@php
    use App\Models\EnrollmentModule\Enrollment;
    use App\Models\EnrollmentModule\EnrollmentClassHistory;
@endphp
<div class="modal-header">
    <h5 class="modal-title" id="myModalLabel">Enrollment Class Update</h5>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
    <div class="row">
        <div class="col-12">
            @php
                $disabled = '';
                if(! can('student_payment_data_update')) {
                  $disabled = 'disabled';
                }
            @endphp
            <form action="{{ route('enrollment.edit', ['id' => encrypt($enrollment->id)]) }}" method="POST" class="ajax-form">
                @csrf
                <div class="row">
                    <div class="col-lg-6">
                        <div class="mb-4">
                            <label for="course_id" class="form-label fw-semibold"><i class="text-danger">* </i>Course</label>
                            <input type="hidden" class="selectedCourseId" value="{{ $enrollment->course_id }}">
                            <input type="text" id="course_id" name="course_id" class="form-control course_id" value="{{ $enrollment->course?->name }}" disabled>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="mb-4">
                            <label for="track_id" class="form-label fw-semibold"><i class="text-danger">*</i> Track</label>
                            <input type="text" id="track_id" name="track_id" class="form-control track_id" value="Track#{{ $enrollment->track?->track_num. ' '.$enrollment->track?->title }}" disabled>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="mb-4">
                            <label for="level_id" class="form-label fw-semibold"><i class="text-danger">*</i> Level</label>
                            <input type="text" id="level_id" name="level_id" class="form-control level_id" value="Level#{{ $enrollment->level?->level_num. ' '.$enrollment->level?->title }}" disabled>
                        </div>
                    </div>
                    <div class="col-lg-6">

                    </div>
                    <hr>
                    <div class="col-lg-6">
                        <div class="mb-4">
                            <label for="class_id" class="form-label fw-semibold"><i class="text-danger"> * </i>Class</label>
                            <input type="text" id="class_id" name="" class="form-control" value="Class#{{ $enrollment->latest_enrollment_class?->class?->name }}" disabled>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="mb-4">
                            <label for="status" class="form-label fw-semibold"><i class="text-danger"> * </i> Status</label>
                            <select id="status" name="status" class="form-control select2">
                                <option value="" disabled selected>Select Status</option>
                                @foreach(EnrollmentClassHistory::statues() as $key => $status)
                                    <option value="{{ $key }}" @if($enrollment->latest_enrollment_class?->latest_enrollment_class_history?->status == $key) selected @endif>{{ $status }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <hr>
                    <div class="col-lg-6">
                        <div class="mb-4">
                            <label for="payable_amount" class="form-label fw-semibold"><i class="text-danger"> * </i> Payable Amount</label>
                            <input type="number" name="payable_amount" value="{{ (!empty($enrollment) ? $enrollment->fee : '') }}" min="500" max="7000" class="form-control" id="payable_amount" {{ $disabled }}>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="mb-4">
                            <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" {{ $disabled }}>
                                <option value="{{ Enrollment::PAYMENT_STATUS_PENDING }}" @if($enrollment->payment_status == Enrollment::PAYMENT_STATUS_PENDING) selected @endif>{{ Enrollment::PAYMENT_STATUS_PENDING }}</option>
                                <option value="{{ Enrollment::PAYMENT_STATUS_PAID }}" @if($enrollment->payment_status == Enrollment::PAYMENT_STATUS_PAID) selected @endif>{{ Enrollment::PAYMENT_STATUS_PAID }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="mb-4">
                            <label for="due_date" class="form-label fw-semibold"><i class="text-danger">*</i>Due Date</label>
                            <input type="date" name="due_date" value="{{ (!empty($enrollment->due_date) ? $enrollment->due_date : '') }}" min="2021-01-01" class="form-control" id="due_date" {{ $disabled }}>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="mb-4">
                            <label for="due_installment" class="form-label fw-semibold"><i class="text-danger">*</i> Due Installment</label>
                            <input type="number" name="due_installment" value="{{ (!empty($enrollment->due_installment) ? $enrollment->due_installment : '') }}" min="-99" max="10" class="form-control" id="due_installment" {{ $disabled }}>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-6">
                            <div class="mb-4">
                                <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" multiple required data-placeholder="Select Month" {{ $disabled }}>
                                    <option></option>
                                    @foreach($months as $month)
                                        @if(is_null($enrollment->due_for_month))
                                            <option value="{{ $month }}">{{ $month }}</option>
                                        @else
                                            <option value="{{ $month }}"{{in_array($month, explode("," , $enrollment->due_for_month)) ? 'selected' : ''}} >{{ $month }}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <div class="form-check form-switch">
                            <input class="form-check-input shiftToNewClass" type="checkbox" id="shiftToNewClass" name="shiftToNewClass" value="0">
                            <label class="form-check-label" for="shiftToNewClass">Shift To New Class</label>
                        </div>
                    </div>
                    <div class="col-lg-6 new-class-div d-none">
                        <div class="mb-4">
                            <label for="class_id" class="form-label fw-semibold"><i class="text-danger"> * </i>New Class</label>
                            <select id="class_id" name="class_id" class="form-control new_class_id class_id select2">
                                <option value="" disabled selected data-description="Select Class">Select Class</option>
                                @foreach($classes as $class)
                                    <option value="{{ $class->id }}" data-description="{{ $class->name }} ({{ $class->teacher?->name }})">{{ $class->class_schedule_info }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-md-12 col-12 form-group text-end mt-2">
                        <button type="submit" class="btn btn-outline-dark">{{ __('Submit') }}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>


<script>
    $(document).ready(function () {

        $('.select2').select2({
            dropdownParent: $('#largeModal'),
        });

        customSelect2ForClass($('#largeModal'));

        let oldStatus = $('#status').val();
        $(document).on('change', '#status', function () {
            let newStatus = $(this).val();
            Swal.fire({
                title: "Want to change the status?",
                text: "Are You Sure !!!, You Wont Be Able To Undo...",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: "#d33",
                cancelButtonColor: "#30d689",
                confirmButtonText: "Yes, do it!"
            }).then((result) => {
                if (!result.isConfirmed) {
                    $(this).val(oldStatus);
                } else {
                    oldStatus = newStatus;
                }
            });
        });

        $(document).on('change', '#shiftToNewClass', function (e) {
            e.preventDefault();
            Swal.fire({
                title: "Want to shift to new class?",
                text: "Are You Sure !!!, You Wont Be Able To Undo...",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: "#d33",
                cancelButtonColor: "#30d689",
                confirmButtonText: "Yes, do it!"
            }).then((result) => {
                if ($(this).val() == 0) {
                    if (!result.isConfirmed) {
                        $("#shiftToNewClass").prop("checked", false).val(0);
                        $(".new-class-div").addClass('d-none');
                    } else {
                        $("#shiftToNewClass").prop("checked", true).val(1);
                        $(".new-class-div").removeClass('d-none');
                    }
                } else {
                    if (result.isConfirmed) {
                        $("#shiftToNewClass").prop("checked", false).val(0);
                        $(".new-class-div").addClass('d-none');
                    } else {
                        $("#shiftToNewClass").prop("checked", true).val(1);
                        $(".new-class-div").removeClass('d-none');
                    }
                }
            });
        });

    });
</script>

@if(can('student_payment_data_update'))
    <script>
        dueDateAndDueForMonthsCheck();
        $(document).on('change', '#due_date', function () {
            dueDateAndDueForMonthsCheck();
        });
        $(document).on('change', '#due_for_month', function () {
            dueDateAndDueForMonthsCheck();
            dueInstallmentAndDueForMonthCountCheck();
        })
        $(document).on('change', '#due_installment', function () {
            dueInstallmentAndDueForMonthCountCheck();
        })

        function dueDateAndDueForMonthsCheck() {
            var due_date = $('#due_date').val();
            var dueDateMonth = new Date(due_date).toLocaleString('default', {month: 'long'});
            var dueForMonths = $('#due_for_month').val();
            if (!dueForMonths.includes(dueDateMonth)) {
                swal.fire('', 'Due date month is not in due for months list.', 'warning');
            }
        }

        function dueInstallmentAndDueForMonthCountCheck() {
            var dueForMonths = $('#due_for_month').val();
            var dueInstallment = $('#due_installment').val();
            if (Math.sign(dueInstallment) == 1) {
                if (dueForMonths.length != dueInstallment) {
                    swal.fire('', 'Due for months count must be equal to due installments.', 'warning');
                }
            }
        }

        var oldPayableAmount = $('#payable_amount').val();
        $(document).on('change', '#payable_amount', function () {
            var newPayableAmount = $(this).val();
            Swal.fire({
                title: "Want to change the payable amount?",
                text: "Are You Sure !!!, You Wont Be Able To Undo...",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: "#d33",
                cancelButtonColor: "#30d689",
                confirmButtonText: "Yes, do it!"
            }).then((result) => {
                if (!result.isConfirmed) {
                    $(this).val(oldPayableAmount);
                } else {
                    oldPayableAmount = newPayableAmount;
                }
            });
        });

        var oldPaymentStatus = $('#payment_status').val();
        $(document).on('change', '#payment_status', function () {
            var newPaymentStatus = $(this).val();
            Swal.fire({
                title: "Want to change the payment status?",
                text: "Are You Sure !!!, You Wont Be Able To Undo...",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: "#d33",
                cancelButtonColor: "#30d689",
                confirmButtonText: "Yes, do it!"
            }).then((result) => {
                if (!result.isConfirmed) {
                    $(this).val(oldPaymentStatus);
                } else {
                    oldPaymentStatus = newPaymentStatus;
                }
            });
        });
    </script>
@endif