{{-- ==== SINGLE MODAL (place once) ==== --}}
<div class="modal fade"
     id="addPaymentModal"
     tabindex="-1"
     role="dialog"
     aria-labelledby="addPaymentLabel">
    <div class="modal-dialog" role="document">
        <form id="addPaymentForm" method="POST" action="{{ route('teacher.students.addPayment') }}">
            @csrf
            <input type="hidden" name="student_id" id="studentIdInput">
            <input type="hidden" name="course_id" id="courseIdInput">
            <input type="hidden" name="course_student_id" id="courseStudentId">


            <div class="modal-content border-primary">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="addPaymentLabel">{{ __('Add Payment') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="{{ __('Close') }}">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div class="form-group" id="amount-payment">
                        <label for="paymentAmount">{{ __('Amount') }}</label>
                        <input id="paymentAmount" type="number" step="0.01" name="amount" class="form-control" required>
                    </div>

                    <div class="form-group" id="data-payment">
                        <label for="paymentDate">{{ __('Payment Date') }}</label>
                        <input id="paymentDate" type="date" name="date" class="form-control" required>
                    </div>

                    <div class="form-group" id="note-payment">
                        <label for="paymentNotes">{{ __('Notes') }}</label>
                        <textarea id="paymentNotes" name="notes" class="form-control" rows="2"></textarea>
                    </div>

                    <div class="form-group" id="installment-payment">
                        <label for="installmentsSelect">{{ __('Select Installment (optional)') }}</label>
                        <select name="installment_id" id="installmentsSelect" class="form-control">
                            <option value="">{{ __('No Installment') }}</option>
                        </select>
                        <small class="text-muted d-block mt-1" id="installmentHelp"></small>
                    </div>

                </div>
                <div class="banner" id="banner" style="display: none;">

                    <h2 class="banner" style="display: flex;justify-content: center;">{{__("There is no installments")}}</h2>
                </div>
                <div class="modal-footer" id="save">
                    <button type="submit" class="btn btn-success">{{ __('Save Payment') }}</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    $(document).ready(function () {
        // Handle the button click to open the modal
        $('[data-toggle="modal"]').on('click', function () {
            const studentId = $(this).data('student-id');
            const courseId = $(this).data('course-id');
            const courseStudentId = $(this).data('course-student-id');
            const installmentsUrl = $(this).data('get-installments-url');
            console.log(studentId, courseId, installmentsUrl);
            // Set the hidden inputs
            $('#studentIdInput').val(studentId);
            $('#courseIdInput').val(courseId);
            $('#courseStudentId').val(courseStudentId)

            // Clear previous installments
            $('#installmentsSelect').empty().append('<option value="">{{ __('No Installment') }}</option>');

            // Fetch installments for the selected course
            $.ajax({
                url: installmentsUrl,
                type: 'GET',
                data: {course_id: courseId, student_id: studentId, course_student_id: courseStudentId},
                success: function (data) {
                    // clear select
                    if (!data || !data.installment) {
                        // hidden all input in form display none
                       $('#installment-payment').hide();
                        $('#amount-payment').hide();
                        $('#data-payment').hide();
                        $('#note-payment').hide();
                        $('#save').hide();
                        $('#banner').show();
                        $('#banner').style.display = 'flex';
                        $('#banner').style.justifyContent = 'center';


                        $('#installmentHelp').text('{{ __("No installments available for this course") }}');
                        return;
                    } else {
                        console.log(data.installment);
                        let select = $('#installmentsSelect');
                        select.empty();
                        select.append(
                            `<option value="${data.installment.id}">${data.installment.name}</option>`
                        );

                        $('#paymentAmount').val(data.installment.amount);
                        console.log(data.installment.amount);
                        $('#paymentAmount').attr('min', data.installment.minimum_amount);
                        $('#paymentAmount').attr('max', data.installment.amount);
                        console.log(data.installment.minimum_amount);

                        $('#installmentHelp').text('{{ __('Select an installment if applicable') }}');
                    }
                },
                error: function () {
                    console.log("error");
                    $('#installmentHelp').text('{{ __('Error fetching installments') }}');
                }
            });
        });
    });
</script>

{{-- ==== PER-ROW TRIGGER BUTTON ==== --}}
<a href="#"
   class="btn btn-sm btn-primary text-white"
   data-toggle="modal"
   data-target="#addPaymentModal"
   data-student-id="{{ $studentId }}"
   data-course-id="{{ $courseId }}"
   data-course-student-id="{{$courseStudentId}}"
   data-get-installments-url="{{ route('teacher.students.getInstallments') }}">
    <i class="fa fa-plus"></i> {{ __('Add Payment') }}
</a>