@php
    use App\Models\EnrollmentModule\Enrollment;
@endphp
<div class="modal-header d-flex align-items-center border-bottom">
    <h4 class="modal-title" id="myModalLabel">Add Enrollment</h4>
    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
    <form action="{{ route('enrollment.add', ['student_id' => encrypt($student->id)]) }}" method="post" class="ajax-form" enctype="multipart/form-data">
        @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>
                    @include('backend.modules.course_module.components.select.course')
                </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>
                    @include('backend.modules.course_module.components.select.track')
                </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>
                    @include('backend.modules.course_module.components.select.level')
                </div>
            </div>
            <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>
                    @include('backend.modules.course_module.components.select.class')
                </div>
            </div>

            <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="" min="500" max="7000" class="form-control" id="payable_amount">
                </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" data-placeholder="Select Class">
                        <option></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>
            <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="" min="2021-01-01" class="form-control" id="due_date">
                </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 Installments</label>
                    <input type="number" name="due_installment" value="" min="-99" max="10" class="form-control" id="due_installment">
                </div>
            </div>

            <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">
                        <option value=""></option>
                        @foreach($months as $month)
                            <option value="{{ $month }}">{{ $month }}</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>

<script>
    $(document).ready(function () {
        $("#level_id").change(function () {
            $(".loader-populate").html("<div id='loader-main'><div id='loader2'></div></div>");

            let student_id = {{ $student->id }};
            let course_id = $("#course_id").val();
            let track_id = $("#track_id").val();
            let level_id = $(this).val();

            $.ajax({
                url: "{{ route('enrollment.get.existing.data') }}",
                type: "GET",
                data: {
                    student_id,
                    course_id,
                    track_id,
                    level_id
                },
                success: function (response) {
                    $(".loader-populate").html("");
                    if ((response.status === 'error') && (response.message === 'enrolled')) {
                        $(':submit').prop("disabled", true);
                        swal.fire('', `Student already enrolled in this course. Please select another course.`, `${response.status}`);
                    }

                    if ((response.status === 'success') && (response.data != null)) {
                        $("#payable_amount").val(response.data.fee);
                        $("#payment_status").val(response.data.payment_status).trigger('change');
                        $("#due_date").val(response.data.due_date);
                        $("#due_installment").val(response.data.due_installment);
                        if(response.data.due_for_month != null) {
                            $("#due_for_month").val(response.data.due_for_month.split(',')).trigger('change');
                        }
                        $(':submit').prop("disabled", false);
                    }

                    if ((response.status === 'success') && (response.data == null)) {
                        $("#payable_amount").val('');
                        $("#payment_status").val('').trigger('change');
                        $("#due_date").val('');
                        $("#due_installment").val('');
                        $("#due_for_month").val('').trigger('change');
                    }

                },
                error: function (response) {
                    $(".loader-populate").html("");

                    if (response.status === 500) {
                        let error = JSON.parse(response.responseText);
                        swal.fire('', `${error.message}`, `error`);
                    }
                    else {
                        let data = JSON.parse(response.responseText);
                        $.each(data.errors, (key, value) => {
                            swal.fire("", `${value}`, "warning");
                            $("[name^=" + key + "]").parent().addClass('has-error');
                            $("[name^=" + key + "]").parent().append('<div><small class="danger text-muted form-errors">' + value[0] + '</small></div>');
                        });
                    }

                    console.clear();
                }
            });
        });
    });

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

    customSelect2ForClass($('#largeModal'));

</script>

<script>
    $(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' });
        console.log(dueDateMonth);
        var dueForMonths = $('#due_for_month').val();
        console.log(dueForMonths);
        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');
            }
        }
    }
</script>

@include('backend.modules.course_module.script.dependent_script')