@php
    use App\Models\Payment;
@endphp
<x-dashboard.admin-layout>

    <x-slot name='title'>Add payment - Dreamers Academy</x-slot>

    <div class="container-fluid">

        <x-inc.breadcrumb title="Add payment"/>

        <div class="row">
            <div class="col-12">
                <form class="ajax-form" action="{{ route('payment.add.by.admin') }}" method="POST" autocomplete="off" data-title="Want to Add this payment?" data-text="">
                    @csrf
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12 mt-3">
                                    <label for="student_id" class="form-label"><span style="color:#e41111">*</span> Student</label>
                                    <select id="student_id" name="student_id" class="form-select select2">
                                        <option value="">Select Child</option>
                                    </select>
                                </div>
                                <div class="col-md-12 mt-3">
                                    <label for="enrollment_id" class="form-label"><span style="color:#e41111">*</span>Select Course</label>
                                    <select id="enrollment_id" name="enrollment_id" class="form-select enrollment_id select2" @if(!request()->bkash_id) disabled @endif>
                                        <option value="" disabled selected>First Select Student</option>
                                    </select>
                                </div>
                                <div class="col-md-6 mt-3">
                                    <label for="fees" class="form-label"><span style="color:#e41111">*</span> Amount</label>
                                    <input type="number" id="fees" name="fees" value="{{old('fees')}}" class="form-control">
                                    <small class="hint-text text-danger"></small>
                                </div>
                                <div class="col-md-6 mt-3">
                                    <label for="date" class="form-label"><span style="color:#e41111">*</span> Date </label>
                                    <input type="date" id="date" name="date" class="form-control" value="{{ $today->format('Y-m-d') }}">
                                </div>
                                <div class="col-md-6 mt-3">
                                    <label for="transaction_type" class="form-label"><span style="color:#e41111">*</span> Transaction Type</label>
                                    <select id="transaction_type" name="transaction_type" class="form-select select2">
                                        <option value="" selected disabled>Select Type</option>
                                        <option value="bank">Bank</option>
                                        <option value="bkash">Bkash</option>
                                        <option value="nagad">Nagad</option>
                                        <option value="stripe">Stripe</option>
                                        <option value="others">Others</option>
                                    </select>
                                </div>
                                <div class="col-md-6 mt-3">
                                    <label for="for_month" class="form-label"><span style="color:#e41111">*</span> For the Month </label>
                                    <select id="for_month" name="for_month[]" class="form-select  placeholder-single select2" multiple data-placeholder="select month">
                                        @foreach($months as $month)
                                            <option value="{{ $month }}">{{ $month }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6 mt-3">
                                    <label for="year" class="form-label"><span style="color:#e41111">*</span> Year </label>
                                    <select id="year" name="year" class="form-select  placeholder-single select2" data-placeholder="Select Year" required>
                                        @php
                                            $currentYear = date('Y');
                                            $years = [
                                                $currentYear - 1,
                                                $currentYear,
                                                $currentYear + 1
                                            ];
                                        @endphp
                                        <option></option>
                                        @foreach($years as $year)
                                            <option value="{{ $year }}">{{ $year }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6 mt-3">
                                    <label for="transaction_id" class="form-label"><span style="color:#e41111">*</span> Transaction ID</label>
                                    <input type="text" id="transaction_id" name="transaction_id" value="{{old('transaction_id')}}" class="form-control">
                                </div>
                                <div class="col-md-6 mt-3">
                                    <label for="installment" class="form-label"><span style="color:#e41111">*</span> Installment </label>
                                    <input type="number" id="installment" name="installment" class="form-control">
                                </div>
                                <input type="hidden" name="enable_installment" id="enable_installment" value="on">

                                <div class="col-md-6 mt-3">
                                    <label for="transaction_purpose" class="form-label"><span style="color:#e41111">*</span> Purpose</label>
                                    <select id="transaction_purpose" name="transaction_purpose" class="form-select select2">
                                        <option value="" selected disabled>Select purpose</option>
                                        @foreach($transactionPurposes as $transactionPurpose)
                                            <option value="{{ $transactionPurpose }}">{{ $transactionPurpose }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-12 mt-3">
                                    <label for="notes" class="form-label">Notes</label>
                                    <textarea class="form-control" name="notes" id="notes" rows="3">{{old('notes')}}</textarea>
                                </div>
                                <div class="col-md-6 mt-3">
                                    <input type="checkbox" name="send_confirmation" id="send_confirmation" value="1" checked>
                                    <label for="send_confirmation" class="form-label">Send Confirmation</label>
                                </div>
                                <div class="col-md-6 mt-3">
                                    <input type="checkbox" name="is_invalid" id="is_invalid">
                                    <label for="is_invalid" class="form-label">Is Invalid?</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="justify-content-between my-3 mx-2">
                            <a href="{{ route('payment.history') }}" class="btn btn-light">Back</a>
                            <div class="float-end">
                                <button type="submit" class="btn btn-primary">Add Payment</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <x-slot name="script">
        <script src="{{asset('assets/js/ajax_form_submit_for_payment_with_confirmation-1.0.0.js')}}"></script>
        <script src="{{asset('assets/js/payment/add-payment-2.1.3.js')}}"></script>

        <script>
            function enrollmentByStudent(student_id) {
                $(".loader-populate").html("<div id='loader-main'><div id='loader2'></div></div>");
                $.ajax({
                    url: "{{ route('enrollment.by.student') }}",
                    type: "GET",
                    data: {
                        student_id
                    },
                    success: function (res) {
                        $('#enrollment_id').prop('disabled', false);
                        $("#enrollment_id").html(`
                            <option value="" disabled selected data-description="Select Class">Select Course</option>
                        `);
                        $.each(res, function (index, value) {
                            $("#enrollment_id").append(`
                                <option value="${ value.id }" >${ value.course.name } || ${ value.track.title } (T${ value.track.track_num }) || ${ value.level.title } (L${ value.level.level_num })</option>
                            `);
                        });
                        $(".loader-populate").html("");
                    },
                });
            }

            $(document).on('change', '#student_id', function () {
                @if(!request()->bkash_id)
                    $('#fees').val('');
                    $('#transaction_purpose').val('').trigger('change');
                @else
                    $('.hint-text').text('');
                    $('#for_month').val('').trigger('change');
                @endif
                $('#installment').val('');
                enrollmentByStudent($(this).val());
            });
        </script>

        <script>
            $(document).on('change', '#enrollment_id', function () {
                let enrollment_id = $(this).val();

                $(".loader-populate").html("<div id='loader-main'><div id='loader2'></div></div>");
                $.ajax({
                    url: "{{ route('enrollment.details') }}",
                    type: "GET",
                    data: {
                        enrollment_id
                    },
                    success: function (res) {
                        @if(!request()->bkash_id)
                            $('#fees').val(res.fee);
                            let transactionPurpose;
                            if (res.course_id === 1) {
                                transactionPurpose = "{{ Payment::TRANSACTION_PURPOSE_MONTHLY_FEE }}";
                            } else if (res.course_id === 3) {
                                transactionPurpose = "{{ Payment::TRANSACTION_PURPOSE_SPOKEN_ENGLISH_FOR_KIDS }}";
                            } else {
                                transactionPurpose = "{{ Payment::TRANSACTION_PURPOSE_OTHERS }}";
                            }
                            $('#transaction_purpose').val(transactionPurpose).trigger('change');
                        @else
                            $('.hint-text').text('Course Fee: '+res.fee+' Taka.');

                            let for_month = res.due_for_month ? res.due_for_month.split(',') : null;
                            $('#for_month').val(for_month).trigger('change');
                        @endif
                        $('#installment').val(res.due_installment);
                        $(".loader-populate").html("");
                    },
                });
            });
        </script>
    </x-slot>

</x-dashboard.admin-layout>