@extends('layouts.header')

@section('content')
<main class="container mt-5">
    <ol class="breadcrumb mb-4">
    <li class="breadcrumb-item"><a href="{{ route('dash') }}">Dashboard</a></li>
    <li class="breadcrumb-item active"><a href="{{ route('sponsor.list') }}">Sponsor List</a></li>
    <li class="breadcrumb-item active">Edit Sponsor Details</li>
</ol>

    <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">Edit Sponsor Details</h2>
                    <form method="POST" action="{{ route('sponsor.update', $sponsor->id) }}">
                        @csrf
                        @method('PUT')
                        <div class="mb-3">
                            <label for="fullName" class="form-label">Full Name:</label>
                            <input type="text" id="fullName" name="fullName" class="form-control" value="{{ $sponsor->fullName }}" >
                        </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" {{ $sponsor->gender == 'male' ? 'selected' : '' }}>Male</option>
                                <option value="female" {{ $sponsor->gender == 'female' ? 'selected' : '' }}>Female</option>
                                <option value="other" {{ $sponsor->gender == 'other' ? 'selected' : '' }}>Other</option>
                            </select>
                        </div>
                        
                        {{-- <div class="mb-3">
                            <label for="dob" class="form-label">Date of Birth:</label>
                            <input type="text" id="dob" name="dob" class="form-control" value="{{ $sponsor->dob }}" placeholder="DD/MM/YYYY" >
                        </div> --}}

                        <div class="mb-3">
                                <label for="address" class="form-label">Address:</label>
                                <input type="text" id="address" name="address" class="form-control" value="{{ old('address', $sponsor->address) }}" >
                            </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" value="{{ old('city', $sponsor->city) }}" >
                                </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" value="{{ old('state', $sponsor->state) }}" >
                                </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" value="{{ old('zip', $sponsor->zip) }}" >
                                </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" value="{{ old('country', $sponsor->country) }}" >
                                </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" value="{{ old('phone', $sponsor->phone) }}" >
                            </div>

                            <div class="mb-3">
                                <label for="email" class="form-label">Email Address:</label>
                                <input type="email" id="email" name="email" class="form-control" value="{{ old('email', $sponsor->email) }}" >
                            </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" value="{{ old('pan', $sponsor->pan) }}">
                            </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)
            @if ($student !== null && $student instanceof \App\Models\Studentdetails)
                <option value="{{ $student->id }}" 
                        data-age="{{ $student->student_age }}" 
                        data-dob="{{ $student->date_of_birth }}" 
                        data-fees="{{ $student->school_fees }}">
                    {{ $student->student_name }}
                </option>
            @endif
        @endforeach
    </select>
</div>


                       
                        <div class="student_id mb-3">
                            
                        </div>

                        <div class="text-center">
                            <button type="submit" class="btn btn-primary">Update</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>


<script>
    document.addEventListener("DOMContentLoaded", function () {
        const studentSelect = document.getElementById("student");
        const selectedStudentsContainer = document.querySelector(".student_id");
        function addSelectedStudent(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");

            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);
            }
        }

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

        window.removeStudent = function (studentId) {
            const selectedStudent = document.getElementById(`student_${studentId}`);
            if (selectedStudent) {
                selectedStudent.remove();
            }
        };
        function addPreselectedStudents() {
            const preselectedOptions = Array.from(studentSelect.selectedOptions);
            preselectedOptions.forEach(addSelectedStudent);
        }
        addPreselectedStudents();
    });
</script>

<script>
    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;
    });
</script>

<script>
    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