@extends('layouts.header')

@section('content')
<main class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow">
                <div class="card-body">
                    <h2 class="card-title text-center">Sponsor Registration Form</h2>
                    <form method="POST" action="{{ route('sponsor.store') }}">
                        @csrf
                        <div class="mb-3">
                            <label for="fullName" class="form-label">Full Name:</label>
                            <input type="text" id="fullName" name="fullName" class="form-control">
                        </div>
                        <div class="mb-3">
                            <label for="gender" class="form-label">Gender:</label>
                            <select id="gender" name="gender" class="form-select">
                                <option value="">Select Gender</option>
                                <option value="male">Male</option>
                                <option value="female">Female</option>
                                <option value="other">Other</option>
                            </select>
                        </div>

                        {{-- <div class="mb-3">
                            <label for="dob" class="form-label">Date of Birth:</label>
                            <input type="date" id="dob" name="dob" class="form-control" >
                        </div> --}}

                        <div class="mb-3">
                            <label for="address" class="form-label">Address:</label>
                            <input type="text" id="address" name="address" class="form-control">
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="city" class="form-label">City:</label>
                                <input type="text" id="city" name="city" class="form-control">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="state" class="form-label">State/Province:</label>
                                <input type="text" id="state" name="state" class="form-control">
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="zip" class="form-label">Zip/Postal Code:</label>
                                <input type="text" id="zip" name="zip" class="form-control">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="country" class="form-label">Country:</label>
                                <input type="text" id="country" name="country" class="form-control">
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="phone" class="form-label">Phone Number:</label>
                            <input type="tel" id="phone" name="phone" class="form-control">
                        </div>

                        <div class="mb-3">
                            <label for="email" class="form-label">Email Address:</label>
                            <input type="email" id="email" name="email" class="form-control">
                        </div>

                        <div class="mb-3">
                            <label for="pan" class="form-label">PAN Card Number (for Indian nationals):</label>
                            <input type="text" id="pan" name="pan" class="form-control">
                        </div>

                        <div class="mb-3">
                            <label for="student" class="form-label">Select Student:</label>
                            <select id="student" name="student[]" class="form-select" multiple>
                                @foreach($students as $student)
                                    <option value="{{ $student->id }}"
                                            data-age="{{ $student->student_age }}"
                                            data-dob="{{ $student->date_of_birth }}"
                                            data-fees="{{ $student->school_fees }}">
                                        {{ $student->student_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Display selected students -->
                        <div class="student_id mb-3"></div>

                        <div class="text-center">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Custom JavaScript -->
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const studentSelect = document.getElementById("student");
            const selectedStudentsContainer = document.querySelector(".student_id");

            studentSelect.addEventListener("change", function () {
                const selectedStudentOptions = Array.from(studentSelect.selectedOptions);

                selectedStudentOptions.forEach(student => {
                    const studentId = student.value;
                    const studentName = student.textContent;
                    const studentAge = student.getAttribute("data-age");
                    const studentDOB = student.getAttribute("data-dob");
                    const studentFees = student.getAttribute("data-fees");

                    // Check if the student is already displayed
                    if (!document.getElementById(`student_${studentId}`)) {
                        const studentDetails = document.createElement("div");
                        studentDetails.id = `student_${studentId}`;
                        studentDetails.classList.add("selected-student");
                        studentDetails.innerHTML = `
                            <span>Name: ${studentName}</span>
                            <br>
                            <span>Age: ${studentAge}</span>
                            <br>
                            <span>Date of Birth: ${studentDOB}</span>
                            <br>
                            <span>School Fees: ${studentFees}</span>
                            <br>
                            <button type="button" class="btn btn-sm btn-outline-danger ms-2" onclick="removeStudent('${studentId}')">X</button>
                            <input type="hidden" name="selected_students[]" value="${studentId}">
                        `;

                        selectedStudentsContainer.appendChild(studentDetails);
                    }
                });

                // Calculate total fees after updating selected students
                calculateTotalFees();
            });
        });

        function removeStudent(studentId) {
            const selectedStudent = document.getElementById(`student_${studentId}`);
            if (selectedStudent) {
                selectedStudent.remove();

                // Optionally, you can also update the total fees here if needed
                // calculateTotalFees();
            }
        }

        document.getElementById('fullName').addEventListener('input', function() {
            var input = this.value;
            if (input.length > 0) {
                input = input.charAt(0).toUpperCase() + input.slice(1);
            }
            this.value = input;
        });

        document.getElementById('phone').addEventListener('input', function() {
            var inputValue = this.value.replace(/\D/g, ''); // Remove non-numeric characters
            var maxLength = 10;

            if (inputValue === '' || inputValue === '+') {
                return;
            }
            if (inputValue.length < maxLength) {
                inputValue = inputValue;
            }
            if (inputValue.length > maxLength) {
                inputValue = inputValue.substring(0, maxLength);
            }
            this.value = inputValue;
        });
    </script>
    @endpush
</main>
@endsection