@section('css')
@parent
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.dataTables.min.css">
<style>
    .report-table-card {
        border-radius: 1.35rem;
        border: 1px solid rgba(15, 23, 42, .07);
        box-shadow: 0 24px 46px rgba(15, 23, 42, .1);
        background: #fff;
        overflow: hidden;
    }

    .report-table-card__body {
        padding: 1.75rem;
        background: linear-gradient(180deg, rgba(15, 23, 42, .02), transparent);
    }

    .report-table-card .dataTables_wrapper {
        padding: .25rem;
    }

    .report-table-card .dataTables_wrapper .dataTables_filter label {
        display: flex;
        align-items: center;
        gap: .75rem;
        font-weight: 500;
        color: #475569;
    }

    .report-table-card .dataTables_wrapper .dataTables_filter input {
        border-radius: 999px;
        border: 1px solid rgba(15, 23, 42, .2);
        padding: .4rem 1rem;
        min-width: 220px;
        box-shadow: inset 0 1px 2px rgba(15, 23, 42, .08);
    }

    .report-table-card .dataTables_wrapper .dataTables_length select {
        border-radius: 0.85rem;
        padding: .35rem .75rem;
        border-color: rgba(15, 23, 42, .2);
    }

    .report-table-card .dataTables_wrapper .dt-buttons .dt-button,
    .report-table-card .dataTables_wrapper .dt-buttons button {
        border-radius: 999px !important;
        border: none !important;
        background: linear-gradient(120deg, #1d4ed8, #3b82f6) !important;
        color: #fff !important;
        text-transform: uppercase;
        letter-spacing: .08em;
        font-size: .65rem;
        font-weight: 600;
        padding: .45rem 1.25rem;
        box-shadow: 0 10px 25px rgba(30, 64, 175, .35);
        margin-right: .35rem;
    }

    .report-table-card .dataTables_wrapper .dt-buttons .dt-button:hover {
        box-shadow: 0 12px 30px rgba(30, 64, 175, .45);
        transform: translateY(-1px);
    }

    .table.report-table {
        width: 100%;
        border-collapse: separate !important;
        border-spacing: 0 10px !important;
    }

    .table.report-table thead th {
        border: none;
        background: #0f172a;
        color: #e2e8f0;
        text-transform: uppercase;
        letter-spacing: .08em;
        font-size: .75rem;
        padding: .85rem .75rem;
    }

    .table.report-table tbody tr {
        box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
    }

    .table.report-table tbody td {
        background: #fff;
        border: none;
        padding: 1rem .85rem;
        vertical-align: middle;
    }

    .table.report-table tbody tr:hover td {
        background: #f8fafc;
    }

    .report-table-card .dataTables_paginate .paginate_button {
        border-radius: 999px !important;
        margin: 0 .15rem;
        border: 1px solid transparent !important;
        padding: .3rem .7rem !important;
        color: #0f172a !important;
    }

    .report-table-card .dataTables_paginate .paginate_button.current,
    .report-table-card .dataTables_paginate .paginate_button:hover {
        background: #0f172a !important;
        color: #fff !important;
    }
</style>
@endsection

@php
    $tableId = $table_data['id'] ?? 'report-table-'.uniqid();
@endphp

<div class="report-table-card mb-5">
    <div class="report-table-card__body">
        <div class="table-responsive">
            <table class="table report-table display nowrap align-middle" id="{{ $tableId }}">
                <thead>
                    <tr>
                        @forelse ($table_data['keys'] as $key)
                            <th class="text-center">{{ $key }}</th>
                        @empty
                        @endforelse
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

@section('scripts')
@parent
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const tableId = @json($tableId);
    const tableElement = document.getElementById(tableId);

    if (! tableElement) {
        return;
    }

    const dataset = [];
    @forelse ($table_data['data'] as $object)
        dataset.push([
            @forelse ($table_data['keys'] as $key)
                {!! json_encode($object[$key] ?? null) !!},
            @empty
            @endforelse
        ]);
    @empty
    @endforelse

    const table = $('#'+tableId).DataTable({
        dom: "<'row g-3 align-items-center mb-3'<'col-lg-3 col-md-6'l><'col-lg-6 col-md-12 text-lg-center'B><'col-lg-3 col-md-6'f>>" +
             "<'row'<'col-12'tr>>" +
             "<'row g-2 align-items-center mt-3'<'col-md-5'i><'col-md-7'p>>",
        paging: true,
        ordering: true,
        bStateSave: true,
        stateSave: true,
        data: dataset,
        order: [[0, "desc"]],
        deferRender: true,
        autoWidth: false,
        responsive: {
            details: true,
        },
        columnDefs: [
            {
                targets: '_all',
                className: 'text-center text-md-start align-middle',
            },
        ],
        buttons: [
            {
                extend: 'copyHtml5',
                text: 'Copier',
            },
            {
                extend: 'excelHtml5',
                text: 'Export Excel',
            },
            {
                extend: 'csvHtml5',
                text: 'Export CSV',
            },
            {
                extend: 'pdfHtml5',
                text: 'Export PDF',
            }
        ],
        language: {!! json_encode(
                app()->getLocale() === 'fr'
                    ? [
                        "decimal"        => "",
                        "emptyTable"     => "Aucune donnée",
                        "info"           => "Enregistrements _START_ à _END_ d'un total de _TOTAL_",
                        "infoEmpty"      => "Aucun enregistrement",
                        "infoFiltered"   => "(filtrés de _MAX_ enregistrements)",
                        "infoPostFix"    => "",
                        "thousands"      => ",",
                        "lengthMenu"     => "Afficher _MENU_ enregistrements par page",
                        "loadingRecords" => "Chargement...",
                        "processing"     => "Traitement...",
                        "search"         => "Rechercher :",
                        "zeroRecords"    => "Aucun enregistrement trouvé",
                        "paginate"       => [
                            "first"    => "Premier",
                            "last"     => "Dernier",
                            "next"     => "Suivant",
                            "previous" => "Précédent",
                        ],
                        "aria" => [
                            "sortAscending"  => ": activer pour trier la colonne par ordre croissant",
                            "sortDescending" => ": activer pour trier la colonne par ordre décroissant",
                        ],
                    ]
                    : [
                        "decimal"        => "",
                        "emptyTable"     => "No data available",
                        "info"           => "Showing _START_ to _END_ of _TOTAL_ entries",
                        "infoEmpty"      => "No entries",
                        "infoFiltered"   => "(filtered from _MAX_ total entries)",
                        "infoPostFix"    => "",
                        "thousands"      => ",",
                        "lengthMenu"     => "Show _MENU_ entries per page",
                        "loadingRecords" => "Loading...",
                        "processing"     => "Processing...",
                        "search"         => "Search:",
                        "zeroRecords"    => "No matching records found",
                        "paginate"       => [
                            "first"    => "First",
                            "last"     => "Last",
                            "next"     => "Next",
                            "previous" => "Previous",
                        ],
                        "aria" => [
                            "sortAscending"  => ": activate to sort column ascending",
                            "sortDescending" => ": activate to sort column descending",
                        ],
                    ]
            ) !!}
    });
});
</script>
@endsection