@extends(getTemplate() . '.panel.layouts.panel_layout')
@push('styles_top')
    <link rel="stylesheet" href="https://cdn.datatables.net/2.1.8/css/dataTables.bootstrap5.min.css">
@endpush

@section('content')
    @include(
        'web.default.panel.reports.certification-tracking.partials._overview',
        compact('totalCertificates', 'expiringSoon', 'expiredCertificates'))

    <div class="d-flex justify-content-end mb-3">
        <a href="{{ request()->fullUrlWithQuery(['export' => 1]) }}" class="btn btn-primary">
            <i class="ki-outline ki-download"></i> Export CSV
        </a>
    </div>
    <div class="row gx-5 gx-xl-10">
        @include(
            'web.default.panel.reports.certification-tracking.partials._table',
            compact('certificates'))
    </div>
@endsection

@push('scripts_bottom')
    <script src="https://cdn.datatables.net/2.1.8/js/dataTables.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#certificatesTable').DataTable({
                paging: false,
                order: [
                    [0, "asc"]
                ],
                bInfo: false,
                ordering: true,
                columnDefs: [{
                    orderable: false,
                    targets: 4 // Changed from 6 to 4 since we have 5 columns (0-based index)
                }],
                searching: false,
                language: {
                    emptyTable: "No certificates found"
                }
            });
        });
    </script>
@endpush