@php
    use App\Models\EnrollmentModule\Enrollment;
@endphp
<x-dashboard.admin-layout>
    <x-slot name='title'>New Student - Dreamers Academy</x-slot>
    <div class="container-fluid">
        <x-inc.breadcrumb title="Add Student"/>

        <form action="{{ route('students.store') }}" method="post" class="ajax-form" autocomplete="off">
            @csrf

            <div class="row">
                <div class="col-md-12">
                    <div class="card w-100 position-relative overflow-hidden mb-0">
                        <div class="card-body p-4">
                            <h5 class="card-title fw-semibold  mb-3">Parent Information</h5>
                            <div class="row">
                                <div class="col-lg-6 mb-2">
                                    <label for="gurdian_name" class="form-label fw-semibold"><i class="text-danger"> * </i> Name</label>
                                    <input type="text" name="gurdian_name" class="form-control" id="gurdian_name">
                                </div>
                                <div class="col-lg-6 mb-2">
                                    <label for="email" class="form-label fw-semibold"><i class="text-danger">* </i>Email</label>
                                    <input type="text" name="email" class="form-control" id="email">
                                </div>
                                <div class="col-lg-6 mb-2">
                                    <label for="phone" class="form-label fw-semibold"><i class="text-danger"> * </i> Phone</label>
                                    <input type="text" name="phone" class="form-control" id="phone">
                                </div>
                                <div class="col-lg-6 mb-2">
                                    <label for="occupation" class="form-label fw-semibold"><i class="text-danger"> * </i>Occupation</label>
                                    <input type="text" name="occupation" class="form-control" id="occupation">
                                </div>
                                <div class="col-md-6 mb-2">
                                    <label for="country" class="form-label fw-semibold"><i class="text-danger"> * </i>Country</label>
                                    <x-select.country/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-md-12">
                    <div class="card w-100 position-relative overflow-hidden mb-0">
                        <div class="card-body p-4">
                            <h5 class="card-title fw-semibold  mb-3">Student Information</h5>
                            <div class="row">
                                <div class="col-md-6 mb-2">
                                    <label for="student_name" class="form-label fw-semibold"><i class="text-danger"> * </i> Name</label>
                                    <input type="text" name="student_name" class="form-control" id="student_name">
                                </div>
                                <div class="col-md-6 mb-2">
                                    <label for="age" class="form-label fw-semibold"><i class="text-danger"> * </i> Age</label>
                                    <input type="number" name="age" class="form-control" id="age" min="7" max="16">
                                </div>
                                <div class="col-md-6 mb-2">
                                    <label for="school" class="form-label fw-semibold"><i class="text-danger"> * </i>School</label>
                                    <input type="text" name="school" class="form-control" id="school">
                                </div>
                                <div class="col-md-6 mb-2">
                                    <label for="gender" class="form-label fw-semibold"><i class="text-danger"> * </i>Gender</label>
                                    <select id="gender" name="gender" title="gender" class="form-control select2">
                                        <option value="" disabled selected>Select Gender</option>
                                        <option value="Male">Male</option>
                                        <option value="Female">Female</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-md-12">
                    <div class="card w-100 position-relative overflow-hidden mb-0">
                        <div class="card-body p-4">
                            <h5 class="card-title fw-semibold  mb-3">Course Enrollment</h5>
                            <div class="row">
                                <div class="col-lg-6 mb-2">
                                    <label for="addcourse_id" class="form-label fw-semibold"><i class="text-danger">* </i>Course</label>
                                    <select id="addcourse_id" name="course_id" class="form-control course_id select2" onchange="courseWiseTrack()" required>
                                        <option value="" disabled selected>Select Course</option>
                                    </select>
                                </div>
                                <div class="col-lg-6 mb-2">
                                    <label for="addtrack_id" class="form-label fw-semibold"><i class="text-danger">*</i> Track</label>
                                    <select id="addtrack_id" name="track_id" class="form-control track_id select2" onchange="trackWiseLevel()" required>
                                        <option value="" disabled selected>Select Track</option>
                                    </select>
                                </div>
                                <div class="col-lg-6 mb-2">
                                    <label for="level_id" class="form-label fw-semibold"><i class="text-danger">*</i> Level</label>
                                    @include('backend.modules.course_module.components.select.level')
                                </div>
                                <div class="col-lg-6 mb-2">
                                    <label for="class_id" class="form-label fw-semibold"><i class="text-danger"> * </i>Class</label>
                                    @include('backend.modules.course_module.components.select.class')
                                </div>

                                <div class="col-lg-6 mb-2">
                                    <label for="payable_amount" class="form-label fw-semibold"><i class="text-danger"> * </i> Payable Amount</label>
                                    <input type="number" name="payable_amount" value="" min="500" max="7000" class="form-control" id="payable_amount" required>
                                </div>
                                <div class="col-lg-6 mb-2">
                                    <label for="payment_status" class="form-label fw-semibold"><i class="text-danger"> * </i>Payment Status</label>
                                    <select id="payment_status" name="payment_status" class="form-control select2" required>
                                        <option value="" disabled selected>Select Class</option>
                                        <option value="{{ Enrollment::PAYMENT_STATUS_PENDING }}">{{ Enrollment::PAYMENT_STATUS_PENDING }}</option>
                                        <option value="{{ Enrollment::PAYMENT_STATUS_PAID }}">{{ Enrollment::PAYMENT_STATUS_PAID }}</option>
                                    </select>
                                </div>
                                <div class="col-md-6 mb-2">
                                    <label for="due_installment" class="form-label fw-semibold"><i class="text-danger"> * </i>Due Installment</label>
                                    <input type="number" name="due_installment" class="form-control" id="due_installment" required>
                                </div>
                                <div class="col-md-6 mb-2">
                                    <label for="due_date" class="form-label fw-semibold"><i class="text-danger"> * </i>Due Date</label>
                                    <input type="date" name="due_date" class="form-control" id="due_date" required>
                                </div>
                                <div class="col-md-6 mb-2">
                                    <label for="due_for_month" class="form-label fw-semibold"><i class="text-danger">*</i> Due Months</label>
                                    <select id="due_for_month" name="due_for_month" class="form-control select2" required>
                                        <option value="" selected disabled>Select Due Months</option>
                                        @foreach($months as $month)
                                            <option value="{{ $month }}">{{ $month }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-md-12">
                    <div class="card w-100 position-relative overflow-hidden mb-0">
                        <div class="card-body p-4">
                            <h5 class="card-title fw-semibold  mb-3">Payment Details</h5>
                            <div class="row">
                                <div class="col-md-12 mb-2">
                                    <label for="" class="form-label fw-semibold"><span style="color:#e41111">*</span>Screenshot</label>
                                    <input type="file" name="attachment" class="form-control" accept=".png, .jpg, .jpeg, .gif, .bmp, .web">
                                </div>
                                <div class="col-md-12 mb-2">
                                    <label for="note" class="form-label font-weight-bold"><span style="color:#e41111">*</span>Note</label>
                                    <textarea rows="3" cols="50" maxlength="1000" name="payment_notes" class="form-control"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="align-items-center justify-content-end">
                                <a class="btn btn-light" href="{{ route('students.index') }}">Back</a>
                                <button class="btn btn-primary float-end">Save</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <x-slot name="script">
        <script src="{{ asset('assets/js/ajax_form_submit-1.0.1.js') }}"></script>

        <script src="{{ asset('assets/js/course_track_level_class_data-1.0.0.js') }}"></script>

        <script>
            customSelect2ForClass();
        </script>
    </x-slot>

    @include('backend.modules.course_module.script.dependent_script')
</x-dashboard.admin-layout>