@extends('layouts.app')

@section('css')
    <link href="{{ asset('assets/css/summer-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="grade-filter-wrap">
                <select id="grade-filter" class="grade-filter" aria-label="Filter by grade">
                    <option value="">All grades</option>
                    @foreach(($grades ?? []) as $g)
                        <option value="{{ $g->id }}">{{ $g->name }}</option>
                    @endforeach
                </select>
            </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>Grade</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();

            // Select2 for Grade filter — matches student listing page
            $('#grade-filter').select2({
                width: '100%'
            });

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

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

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

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

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

            // Grade filter
            $('#grade-filter').on('change', function() {
                $('#kt_table_billing_details').DataTable().ajax.reload();
            });

            // Export – simple CSV via DataTables data
            $('#billing-export').on('click', function() {
                window.print();
            });

            $(document).on('click', '.resend-credit-card-notification', function(e) {
                e.preventDefault();
                resendCreditCardNotification($(this).attr('data-id'));
            });
        });

        function resendCreditCardNotification(id){
            Swal.fire({
                icon: 'warning',
                title: 'Do you want to proceed with sending the notification for credit card attachment?',
                showDenyButton: false,
                showCancelButton: true,
                confirmButtonText: 'Yes'
            }).then(function(result) {
                if (result.isConfirmed) {
                    $.blockUI({
                        css: { border:'none', padding:'20px', backgroundColor:'#000',
                            '-webkit-border-radius':'10px','-moz-border-radius':'10px', opacity:0.6, color:'#fff' }
                    });
                    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
                    $.ajax({
                        type: 'POST',
                        url: "{{ url('resend-credit-card-notification') }}",
                        data: { _token: CSRF_TOKEN, studentId: id },
                        success: function (results) {
                            $.unblockUI();
                            if (results.status == 'Success') {
                                swal("Done!", results.status, "success");
                                $('#kt_table_billing_details').DataTable().ajax.reload();
                            } else {
                                swal("Error!", results.status, "error");
                            }
                        }
                    });
                }
            });
        }

        function datatable() {
            $('#kt_table_billing_details').DataTable({
                processing: true,
                serverSide: true,
                pageLength: parseInt($('#billing-page-size').val(), 10) || 10,
                ajax: {
                    url: "{{ url('billing/list') }}",
                    data: function (d) {
                        d.paid = $('.billing-tabs .tab.active').data('paid') || 0;
                        d.grade = $('#grade-filter').val() || '';
                    }
                },
                order: [[0, 'asc']],
                columns: [
                    {data: 'ID', name: 'ID', className: 'col-id'},
                    {data: 'student_name', name: 'student_name'},
                    {data: 'parent_name', name: 'parent_name'},
                    {data: 'grade', name: 'grade'},
                    {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