@extends('admin.layouts.master')

@section('title') {{__('fees.fees')}} @endsection
@section('css')

    <link rel="stylesheet" href="{{asset('backend/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css')}}" />
    <link rel="stylesheet" href="{{asset('backend/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css')}}" />
    <link rel="stylesheet" href="{{asset('backend/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css')}}" />

@endsection
@section('content')


    <div class="container-xxl flex-grow-1 container-p-y">

        <!-- Products List Table -->
        <div class="card">
            <div class="card-header border-bottom">
                <h5 class="card-title mb-3">{{__('fees.fees')}}</h5>
            </div>
            <div class="card-datatable table-responsive">
                <table class="datatables-records table">
                    <thead class="border-top">
                    <tr>
                        <th></th>
                        <th>التلميذ</th>
                        <th>نوع الرسوم</th>
                        <th>المبلغ</th>
                        <th>الخصم</th>
                        <th>المبلغ النهائي</th>
                        <th>تاريخ الاستحقاق</th>
                        <th>إجمالي المدفوع</th>
                        <th>الحالة</th>
                    </tr>

                    </thead>
                </table>
            </div>
            <!-- Offcanvas to add new Expense -->

        </div>
    </div>

@endsection
@section('script')
    <script src="{{asset('backend/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js')}}"></script>

    <script>
        document.getElementById('levelDependent').addEventListener('change', function() {
            let isDependent = this.value === '1';
            document.getElementById('levelAmounts').style.display = isDependent ? 'block' : 'none';
            document.getElementById('globalAmount').style.display = isDependent ? 'none' : 'block';
        });
    </script>
    <script>
        var table = $('.datatables-records').DataTable({

            processing: true,
            serverSide: true,

            ajax: "{{ route('admin.fees.studentFees') }}",
            columns: [

                { data: 'id', name: 'id' },
                { data: 'student', name: 'student.first_name' },
                { data: 'fee', name: 'fee.name' },
                { data: 'amount', name: 'amount' },
                { data: 'discount', name: 'discount' },
                { data: 'final_amount', name: 'final_amount' },
                { data: 'due_date', name: 'due_date' },
                { data: 'total_payment', name: 'total_payment' },
                { data: 'status', name: 'status', orderable: false, searchable: false },

            ],
            order: [[1, 'desc']],
            dom:
                '<"row me-2"' +
                '<"col-md-2"<"me-3"l>>' +
                '<"col-md-10"<"dt-action-buttons text-xl-end text-lg-start text-md-end text-start d-flex align-items-center justify-content-end flex-md-row flex-column mb-3 mb-md-0"fB>>' +
                '>t' +
                '<"row mx-2"' +
                '<"col-sm-12 col-md-6"i>' +
                '<"col-sm-12 col-md-6"p>' +
                '>',
            language: {
                sLengthMenu: '_MENU_',
                search: '',
                searchPlaceholder: '{{__('general.search')}}...'
            },
            // Buttons with Dropdown
            buttons: [
                {
                    extend: 'collection',
                    className: 'btn btn-label-secondary dropdown-toggle mx-3 waves-effect waves-light',
                    text: '<i class="ti ti-screen-share me-1 ti-xs"></i>{{__('general.actions.export')}}',
                    buttons: [
                        {
                            extend: 'print',
                            text: '<i class="ti ti-printer me-2" ></i>Print',
                            className: 'dropdown-item',
                        },
                        {
                            extend: 'csv',
                            text: '<i class="ti ti-file-text me-2" ></i>Csv',
                            className: 'dropdown-item',
                        },
                        {
                            extend: 'excel',
                            text: '<i class="ti ti-file-spreadsheet me-2"></i>Excel',
                            className: 'dropdown-item',
                        },
                        {
                            extend: 'pdf',
                            text: '<i class="ti ti-file-code-2 me-2"></i>Pdf',
                            className: 'dropdown-item',
                        },
                        {
                            extend: 'copy',
                            text: '<i class="ti ti-copy me-2" ></i>Copy',
                            className: 'dropdown-item',
                        }
                    ]
                },

            ],

            aLengthMenu: [
                [10, 25, 50, 100, 200, -1],
                [10, 25, 50, 100, 200, "All"]
            ],

            responsive:false,
            initComplete: function () {
                // Apply the search
                this.api()
                    .columns()
                    .every(function () {
                        var that = this;
                        $('input', this.footer()).on('keyup change clear', function () {
                            if (that.search() !== this.value) {
                                that.search(this.value).draw();
                            }
                        });
                    });
            },
        });

    </script>
@endsection