@extends('layouts.app')

@section('css')
    <link href="{{ asset('assets/css/preschool-billing-listing.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')

@include('layouts.toolbar')

<div class="billing-page">
    <div class="page-head">
        <div>
            <h1>Billing</h1>
            <p class="subtitle">Track enrollment payments, deposits, and refunds.</p>
        </div>
        <div class="head-actions">
            <a href="javascript:void(0)" id="billing-export" class="btn btn-billing-export">
                <i class="fa-solid fa-download"></i> Export
            </a>
        </div>
    </div>

    <div class="billing-card">
        <div class="billing-toolbar">
            <div class="billing-search">
                <i class="fa-solid fa-magnifying-glass ic"></i>
                <input type="text" id="billing-search-input" placeholder="Search by name, ID, or email...">
                <span class="kbd">⌘K</span>
            </div>
            <div class="billing-tabs" role="tablist">
                <button type="button" class="tab active" data-paid="0">All <span class="count" id="count-all">{{ $countAll ?? 0 }}</span></button>
                <button type="button" class="tab" data-paid="1">Paid <span class="count" id="count-paid">{{ $countPaid ?? 0 }}</span></button>
            </div>
            <div class="billing-page-size">
                <span>Show</span>
                <select id="billing-page-size">
                    <option value="10" selected>10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
                <span>per page</span>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table" id="kt_table_billing_details" style="width:100%;">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Student</th>
                        <th>Parent / Guardian</th>
                        <th>Enrollment</th>
                        <th>Deposit</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@section('js')
    <script type="text/javascript">
        $(function() {
            $(".dropdown-toggle").dropdown();

            $('#kt_table_billing_details').DataTable().destroy();
            datatable();

            $('#billing-search-input').on('keyup', function() {
                $('#kt_table_billing_details').DataTable().search($(this).val()).draw();
            });

            $(document).on('keydown', function(e) {
                if ((e.metaKey || e.ctrlKey) && e.key && e.key.toLowerCase() === 'k') {
                    e.preventDefault();
                    $('#billing-search-input').focus();
                }
            });

            $('.billing-tabs .tab').on('click', function() {
                $('.billing-tabs .tab').removeClass('active');
                $(this).addClass('active');
                $('#kt_table_billing_details').DataTable().ajax.reload();
            });

            $('#billing-page-size').on('change', function() {
                $('#kt_table_billing_details').DataTable().page.len(parseInt($(this).val(), 10)).draw();
            });

            $('#billing-export').on('click', function() {
                window.print();
            });
        });

        function datatable() {
            $('#kt_table_billing_details').DataTable({
                processing: true,
                serverSide: true,
                pageLength: parseInt($('#billing-page-size').val(), 10) || 10,
                ajax: {
                    url: "{{ url('preschool/billing/list') }}",
                    data: function (d) {
                        d.paid = $('.billing-tabs .tab.active').data('paid') || 0;
                    }
                },
                order: [[0, 'asc']],
                columns: [
                    {data: 'ID', name: 'ID', className: 'col-id'},
                    {data: 'student_name', name: 'student_name'},
                    {data: 'parent_name', name: 'parent_name'},
                    {data: 'enrollment_status'},
                    {data: 'deposit_status', name: 'deposit_status'},
                    {data: 'action', name: 'action', orderable: false, searchable: false, className: 'text-end'}
                ],
                drawCallback: function(settings) {
                    var json = settings.json || {};
                    if (typeof json.countAll !== 'undefined') $('#count-all').text(json.countAll);
                    if (typeof json.countPaid !== 'undefined') $('#count-paid').text(json.countPaid);
                }
            });
        }
    </script>
@endsection