<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" 
      x-data="{ darkMode: localStorage.getItem('darkMode') === 'true' }" 
      x-init="$watch('darkMode', val => localStorage.setItem('darkMode', val))" 
      :class="{ 'dark': darkMode }">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'KKD') }}</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
        
        <!-- DataTables 2.x CSS (plain, no Bootstrap conflict) -->
        <link rel="stylesheet" href="https://cdn.datatables.net/2.3.7/css/dataTables.dataTables.min.css">
        <link rel="stylesheet" href="https://cdn.datatables.net/responsive/3.0.4/css/responsive.dataTables.min.css">
        
        @stack('styles')

        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])
        
        <!-- jQuery & DataTables 2.x JS (plain, no Bootstrap conflict) -->
        <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
        <script src="https://cdn.datatables.net/2.3.7/js/dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/responsive/3.0.4/js/dataTables.responsive.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

        <style>
            /* =============================================
               DARK/LIGHT MODE - TEXT CONTRAST FIX
            ============================================= */
            body { color: #1e293b; }
            .dark body { color: #f1f5f9; }

            h1, h2, h3, h4, h5, h6 { color: #0f172a; }
            .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 { color: #f8fafc; }

            p, span, li, td, th, label, div { color: inherit; }

            .card-content { color: #334155; }
            .dark .card-content { color: #cbd5e1; }

            .text-muted-light { color: #64748b; }
            .dark .text-muted-light { color: #94a3b8; }

            /* =============================================
               DATATABLES v2 - CUSTOM STYLING
               Menghindari konflik dengan Tailwind & Bootstrap
            ============================================= */

            /* Layout wrapper */
            .dt-container { font-size: 0.875rem; }

            /* Top & bottom bar */
            .dt-layout-row {
                display: flex !important;
                align-items: center !important;
                justify-content: space-between !important;
                flex-wrap: wrap !important;
                gap: 0.5rem !important;
                padding: 0.5rem 0 !important;
            }

            /* Length + Search */
            .dt-length label,
            .dt-search label {
                display: flex !important;
                align-items: center !important;
                gap: 0.4rem !important;
                color: #475569 !important;
                font-size: 0.875rem !important;
            }
            .dark .dt-length label,
            .dark .dt-search label { color: #94a3b8 !important; }

            .dt-length select,
            .dt-search input {
                padding: 0.35rem 0.6rem !important;
                border: 1px solid #cbd5e1 !important;
                border-radius: 0.375rem !important;
                font-size: 0.875rem !important;
                background: #fff !important;
                color: #0f172a !important;
                outline: none !important;
            }
            .dark .dt-length select,
            .dark .dt-search input {
                background: #1e293b !important;
                border-color: #475569 !important;
                color: #f1f5f9 !important;
            }
            .dt-search input:focus {
                border-color: #14b8a6 !important;
                box-shadow: 0 0 0 3px rgba(20,184,166,0.2) !important;
            }

            /* Info text */
            .dt-info {
                font-size: 0.8rem !important;
                color: #64748b !important;
            }
            .dark .dt-info { color: #94a3b8 !important; }

            /* ── PAGINATION FIX ── */
            .dt-paging {
                display: flex !important;
                align-items: center !important;
            }
            .dt-paging .dt-paging-button,
            .dataTables_paginate .paginate_button {
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                min-width: 2rem !important;
                height: 2rem !important;
                padding: 0 0.5rem !important;
                margin: 0 1px !important;
                border: 1px solid #e2e8f0 !important;
                border-radius: 0.375rem !important;
                font-size: 0.8rem !important;
                cursor: pointer !important;
                background: #fff !important;
                color: #475569 !important;
                text-decoration: none !important;
                transition: all 0.15s !important;
                float: none !important;
            }
            .dt-paging .dt-paging-button:hover,
            .dataTables_paginate .paginate_button:hover {
                background: #f1f5f9 !important;
                border-color: #14b8a6 !important;
                color: #0d9488 !important;
            }
            .dt-paging .dt-paging-button.current,
            .dataTables_paginate .paginate_button.current {
                background: #14b8a6 !important;
                border-color: #14b8a6 !important;
                color: #fff !important;
                font-weight: 600 !important;
            }
            .dt-paging .dt-paging-button.disabled,
            .dataTables_paginate .paginate_button.disabled {
                opacity: 0.4 !important;
                cursor: default !important;
                pointer-events: none !important;
            }

            /* Dark mode pagination */
            .dark .dt-paging .dt-paging-button,
            .dark .dataTables_paginate .paginate_button {
                background: #1e293b !important;
                border-color: #334155 !important;
                color: #94a3b8 !important;
            }
            .dark .dt-paging .dt-paging-button:hover,
            .dark .dataTables_paginate .paginate_button:hover {
                background: #273549 !important;
                border-color: #14b8a6 !important;
                color: #2dd4bf !important;
            }
            .dark .dt-paging .dt-paging-button.current,
            .dark .dataTables_paginate .paginate_button.current {
                background: #14b8a6 !important;
                border-color: #14b8a6 !important;
                color: #fff !important;
            }

            /* Table styling */
            .dark table.dataTable thead th,
            .dark table.dataTable tbody td {
                color: #e2e8f0 !important;
                border-color: #334155 !important;
            }
            .dark table.dataTable thead th { background: #0f172a !important; }
            .dark table.dataTable tbody tr { background-color: #1e293b !important; }
            .dark table.dataTable tbody tr:hover { background-color: #273549 !important; }

            /* Form inputs dark mode */
            .dark input, .dark select, .dark textarea {
                background-color: #1e293b !important;
                color: #f1f5f9 !important;
                border-color: #475569 !important;
            }
            .dark input::placeholder, .dark textarea::placeholder { color: #64748b !important; }
            .dark input:focus, .dark select:focus, .dark textarea:focus {
                border-color: #14b8a6 !important;
                box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2) !important;
            }

            .dark .alert { color: #f1f5f9; }

            /* Custom scrollbar */
            ::-webkit-scrollbar { width: 8px; height: 8px; }
            ::-webkit-scrollbar-track { background: #f1f5f9; }
            .dark ::-webkit-scrollbar-track { background: #0f172a; }
            ::-webkit-scrollbar-thumb { background: #14b8a6; border-radius: 4px; }
            ::-webkit-scrollbar-thumb:hover { background: #0d9488; }

            main { transition: background-color 0.2s, color 0.2s; }

            @media (max-width: 768px) {
                .table-responsive-stack { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
            }

            .kkd-card {
                background-color: #ffffff;
                border: 1px solid #e2e8f0;
                border-radius: 0.75rem;
                padding: 1.5rem;
                box-shadow: 0 1px 3px rgba(0,0,0,0.05);
                transition: background-color 0.2s, border-color 0.2s;
            }
            .dark .kkd-card {
                background-color: #1e293b;
                border-color: #334155;
                box-shadow: 0 1px 3px rgba(0,0,0,0.3);
            }

            .stat-label {
                font-size: 0.75rem;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                color: #64748b;
            }
            .dark .stat-label { color: #94a3b8; }

            .stat-value { font-size: 1.875rem; font-weight: 700; color: #0f172a; }
            .dark .stat-value { color: #f8fafc; }

            .text-teal-accent { color: #0d9488; }
            .dark .text-teal-accent { color: #2dd4bf; }

            .section-title { font-size: 1.125rem; font-weight: 700; color: #0f172a; }
            .dark .section-title { color: #f8fafc; }

            .section-subtitle { font-size: 0.875rem; color: #64748b; }
            .dark .section-subtitle { color: #94a3b8; }
            /* SweetAlert2 Dark Mode */
.dark .swal2-popup {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f1f5f9 !important;
}
.dark .swal2-title {
    color: #f8fafc !important;
}
.dark .swal2-html-container {
    color: #cbd5e1 !important;
}
.dark .swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(45, 212, 191, 0.3) !important;
}
.dark .swal2-icon.swal2-success [class^=swal2-success-line] {
    background-color: #2dd4bf !important;
}
        </style>
    </head>
    <body class="font-sans antialiased bg-gray-50 dark:bg-slate-900 text-slate-800 dark:text-slate-100 transition-colors duration-200">
        <div class="min-h-screen flex flex-col">
            @include('layouts.navigation')

            <!-- Page Heading -->
            @isset($header)
                <header class="bg-gradient-to-r from-teal-500 to-teal-600 dark:from-teal-700 dark:to-teal-800 shadow-lg">
                    <div class="max-w-7xl mx-auto py-4 sm:py-6 px-4 sm:px-6 lg:px-8">
                        <div class="text-white font-semibold text-base sm:text-lg">
                            {{ $header }}
                        </div>
                    </div>
                </header>
            @endisset

            <!-- Page Content -->
            <main class="flex-grow transition-colors duration-200">
                {{ $slot }}
            </main>
            <!-- Footer -->
            @include('layouts.footer')
        </div>
        @include('layouts.ai-chat')

        <!-- Scripts Stack -->
        @stack('scripts')
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

        <!-- Alpine.js -->
        <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
        
        <script>
            // =============================================
            // DataTables Bahasa Indonesia - INLINE
            // (Tidak pakai CDN eksternal agar tidak CORS error)
            // =============================================
            window.dtLangId = {
                "sEmptyTable":      "Tidak ada data yang tersedia pada tabel ini",
                "sInfo":            "Menampilkan _START_ sampai _END_ dari _TOTAL_ entri",
                "sInfoEmpty":       "Menampilkan 0 sampai 0 dari 0 entri",
                "sInfoFiltered":    "(disaring dari _MAX_ entri keseluruhan)",
                "sInfoThousands":   ".",
                "sLengthMenu":      "Tampilkan _MENU_ entri",
                "sLoadingRecords":  "Sedang memuat...",
                "sProcessing":      "Sedang memproses...",
                "sSearch":          "Cari:",
                "sZeroRecords":     "Tidak ditemukan data yang sesuai",
                "oPaginate": {
                    "sFirst":       "Pertama",
                    "sLast":        "Terakhir",
                    "sNext":        "Selanjutnya",
                    "sPrevious":    "Sebelumnya"
                },
                "oAria": {
                    "sSortAscending":  ": aktifkan untuk mengurutkan kolom ke atas",
                    "sSortDescending": ": aktifkan untuk mengurutkan kolom ke bawah"
                },
                "select": {
                    "rows": {
                        "_":    "%d baris dipilih",
                        "0":    "",
                        "1":    "1 baris dipilih"
                    }
                },
                "buttons": {
                    "print":    "Cetak",
                    "copy":     "Salin",
                    "colvis":   "Visibilitas Kolom",
                    "collection": "Koleksi",
                    "colvisRestore": "Kembalikan visibilitas"
                }
            };

            document.addEventListener('alpine:init', () => {
                console.log('🏥 KKD App Initialized with Alpine.js');
            });
            
            $(document).ready(function() {
                $('table.data-table').each(function() {
                    if (!$.fn.DataTable.isDataTable(this)) {
                        $(this).DataTable({
                            responsive: true,
                            // ✅ FIX: Gunakan inline language object, bukan URL CDN
                            language: window.dtLangId,
                            pageLength: 25,
                            order: [[0, 'asc']]
                        });
                    }
                });
            });
        </script>
    </body>
</html>