<x-app-layout>

    @push('styles')
        @vite('resources/css/datatable.css')
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
        <link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.3.2/css/fixedHeader.dataTables.min.css">
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/3.0.2/css/responsive.dataTables.min.css">   
        <link rel="stylesheet" href="https://cdn.datatables.net/rowgroup/1.4.1/css/rowGroup.dataTables.min.css">    
        <style>
            .action-display {
                display: none;
            }
        </style>    
    @endpush
    <x-slot:nav>
        @include('components.navbar')
    </x-slot>

    <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5">
        <div class="px-6 py-4">
            <h6 class="text-gray-950 font-semibold">Jadwal Sidang {{ \Carbon\Carbon::now()->locale('id')->translatedFormat('F Y')}}</h6>
        </div>
        <div class="border-t border-gray-200">
            <div class="px-6 py-4 flex flex-col gap-3">
                <div class="pb-5 text-sm">
                    {!! $jadwalDataTable->table(['id' => 'jadwal-table']) !!}
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/fixedheader/3.3.2/js/dataTables.fixedHeader.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/responsive/3.0.2/js/dataTables.responsive.min.js"></script>
        <script src="https://cdn.datatables.net/rowgroup/1.4.1/js/dataTables.rowGroup.min.js"></script>
        {!! $jadwalDataTable->scripts() !!}
    @endpush
</x-app-layout>