@extends('layouts.app')
@section('title', 'Executive Dashboard')
@section('header_title', 'Dashboard')

@push('styles')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.tailwindcss.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
        }

        /* ===== DASHBOARD CONTAINER ===== */
        .dashboard-container {
            max-width: 1440px;
            margin: 0 auto;
            padding: 0 4px;
        }

        /* ===== HEADER ===== */
        .dashboard-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 32px;
            padding: 0 4px;
            flex-wrap: wrap;
            gap: 16px;
        }

        .header-left h1 {
            font-size: 28px;
            font-weight: 900;
            background: linear-gradient(135deg, #0f172a 0%, #475569 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: -0.02em;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .header-left h1 .header-icon {
            width: 32px;
            height: 32px;
            color: #3b82f6;
            -webkit-text-fill-color: #3b82f6;
        }

        .header-left p {
            font-size: 14px;
            color: #94a3b8;
            font-weight: 500;
            margin-top: 4px;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
        }

        .theme-toggle {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 2px solid #e2e8f0;
            background: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            padding: 0;
        }

        .theme-toggle svg {
            width: 22px;
            height: 22px;
            stroke: #1e293b;
            fill: none;
            stroke-width: 2;
            transition: all 0.3s ease;
        }

        .theme-toggle:hover {
            transform: rotate(30deg);
            border-color: #3b82f6;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
        }

        .theme-toggle.dark svg {
            stroke: #f1f5f9;
            fill: #f1f5f9;
        }

        .live-badge-header {
            display: flex;
            align-items: center;
            gap: 10px;
            background: #ecfdf5;
            padding: 8px 20px;
            border-radius: 50px;
            border: 1px solid #a7f3d0;
        }

        .live-dot-header {
            width: 10px;
            height: 10px;
            background: #10b981;
            border-radius: 50%;
            animation: pulse-ring 1.5s ease-in-out infinite;
        }

        @keyframes pulse-ring {
            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
            70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
        }

        .live-badge-header span {
            font-size: 12px;
            font-weight: 700;
            color: #065f46;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        /* ===== METRIC TILES ===== */
        .metric-tiles-wrapper {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 20px;
            margin-bottom: 32px;
        }

        .metric-card {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 22px 24px;
            display: flex;
            align-items: center;
            gap: 16px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }

        .metric-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            border-radius: 20px;
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .metric-card:hover::before { opacity: 1; }
        .metric-card:hover {
            transform: translateY(-6px) scale(1.02);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.10);
        }

        /* Card Background Gradients */
        .metric-card:nth-child(1)::before { background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(99, 102, 241, 0.05)); }
        .metric-card:nth-child(2)::before { background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(52, 211, 153, 0.05)); }
        .metric-card:nth-child(3)::before { background: linear-gradient(135deg, rgba(236, 72, 153, 0.05), rgba(219, 39, 119, 0.05)); }
        .metric-card:nth-child(4)::before { background: linear-gradient(135deg, rgba(100, 116, 139, 0.05), rgba(148, 163, 184, 0.05)); }
        .metric-card:nth-child(5)::before { background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), rgba(251, 191, 36, 0.05)); }
        .metric-card:nth-child(6)::before { background: linear-gradient(135deg, rgba(6, 182, 212, 0.05), rgba(8, 145, 178, 0.05)); }
        .metric-card:nth-child(7)::before { background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(124, 58, 237, 0.05)); }
        .metric-card:nth-child(8)::before { background: linear-gradient(135deg, rgba(244, 63, 94, 0.05), rgba(225, 29, 72, 0.05)); }
        .metric-card:nth-child(9)::before { background: linear-gradient(135deg, rgba(20, 184, 166, 0.05), rgba(13, 148, 136, 0.05)); }

        .metric-icon-box {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all 0.3s ease;
        }

        .metric-icon-box svg {
            width: 26px;
            height: 26px;
            stroke: white;
            fill: none;
            stroke-width: 2;
        }

        .metric-card:hover .metric-icon-box { transform: scale(1.1) rotate(-5deg); }

        /* Icon Colors */
        .metric-icon-box.blue { background: linear-gradient(135deg, #3b82f6, #6366f1); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); }
        .metric-icon-box.green { background: linear-gradient(135deg, #10b981, #34d399); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); }
        .metric-icon-box.pink { background: linear-gradient(135deg, #ec4899, #db2777); box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3); }
        .metric-icon-box.slate { background: linear-gradient(135deg, #64748b, #94a3b8); box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3); }
        .metric-icon-box.amber { background: linear-gradient(135deg, #f59e0b, #fbbf24); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); }
        .metric-icon-box.cyan { background: linear-gradient(135deg, #06b6d4, #0891b2); box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3); }
        .metric-icon-box.violet { background: linear-gradient(135deg, #8b5cf6, #7c3aed); box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3); }
        .metric-icon-box.rose { background: linear-gradient(135deg, #f43f5e, #e11d48); box-shadow: 0 4px 12px rgba(244, 63, 94, 0.3); }
        .metric-icon-box.teal { background: linear-gradient(135deg, #14b8a6, #0d9488); box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3); }

        .metric-data { flex: 1; }
        .metric-data p {
            font-size: 11px; font-weight: 700; text-transform: uppercase;
            letter-spacing: 0.08em; color: #94a3b8; margin-bottom: 2px;
        }
        .metric-data h3 {
            font-size: 26px; font-weight: 900; color: #0f172a;
            line-height: 1.2; animation: countUp 0.6s ease-out;
        }

        @keyframes countUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .metric-progress {
            width: 100%; height: 3px; background: #f1f5f9;
            border-radius: 4px; margin-top: 8px; overflow: hidden;
        }

        /* Progress Bar Colors */
        .metric-progress .bar { height: 100%; border-radius: 4px; transition: width 1.5s ease; }
        .metric-card:nth-child(1) .metric-progress .bar { background: linear-gradient(90deg, #3b82f6, #6366f1); width: 0%; }
        .metric-card:nth-child(2) .metric-progress .bar { background: linear-gradient(90deg, #10b981, #34d399); width: 62%; }
        .metric-card:nth-child(3) .metric-progress .bar { background: linear-gradient(90deg, #ec4899, #db2777); width: 19%; }
        .metric-card:nth-child(4) .metric-progress .bar { background: linear-gradient(90deg, #64748b, #94a3b8); width: 81%; }
        .metric-card:nth-child(5) .metric-progress .bar { background: linear-gradient(90deg, #f59e0b, #fbbf24); width: 55%; }
        .metric-card:nth-child(6) .metric-progress .bar { background: linear-gradient(90deg, #06b6d4, #0891b2); width: 88%; }
        .metric-card:nth-child(7) .metric-progress .bar { background: linear-gradient(90deg, #8b5cf6, #7c3aed); width: 45%; }
        .metric-card:nth-child(8) .metric-progress .bar { background: linear-gradient(90deg, #f43f5e, #e11d48); width: 12%; }
        .metric-card:nth-child(9) .metric-progress .bar { background: linear-gradient(90deg, #14b8a6, #0d9488); width: 35%; }

        /* ===== CHARTS SECTION ===== */
        .charts-grid {
            display: grid; grid-template-columns: 1fr 2fr; gap: 20px; margin-bottom: 28px;
        }
        .chart-container {
            background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px);
            border-radius: 20px; padding: 24px; border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); transition: all 0.3s ease;
        }
        .chart-container:hover { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); transform: translateY(-2px); }
        .chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .chart-header h2 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #64748b; display: flex; align-items: center; gap: 10px; }
        .chart-header .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
        .dot-indigo { background: linear-gradient(135deg, #6366f1, #818cf8); }
        .dot-blue { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
        .chart-header .badge { font-size: 10px; font-weight: 700; color: #94a3b8; background: #f1f5f9; padding: 4px 14px; border-radius: 50px; letter-spacing: 0.04em; }

        /* ===== FILTER BAR ===== */
        .filter-bar {
            background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px);
            border-radius: 20px; padding: 18px 24px; border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); margin-bottom: 28px; transition: all 0.3s ease;
        }
        .filter-bar:hover { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); }
        .filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
        .filter-row .field-group { flex: 1; min-width: 140px; }
        .filter-row .field-group.small { flex: 0.4; min-width: 40px; }
        .filter-row .field-group label { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; margin-bottom: 4px; }
        .filter-row .field-group label svg { width: 14px; height: 14px; stroke: #94a3b8; fill: none; stroke-width: 2; }
        .filter-row .field-group select, .filter-row .field-group input { width: 100%; padding: 10px 16px; background: rgba(248, 250, 252, 0.8); border: 2px solid transparent; border-radius: 12px; font-size: 13px; font-weight: 600; color: #1e293b; transition: all 0.3s ease; }
        .filter-row .field-group select:hover, .filter-row .field-group input:hover { background: white; }
        .filter-row .field-group select:focus, .filter-row .field-group input:focus { outline: none; border-color: #3b82f6; background: white; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08); }
        .filter-row .field-group .arrow { display: flex; align-items: center; justify-content: center; height: 42px; }
        .filter-row .field-group .arrow svg { width: 24px; height: 24px; stroke: #94a3b8; fill: none; stroke-width: 2; }
        .filter-actions { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
        .filter-actions .divider { width: 1px; height: 32px; background: #e2e8f0; margin: 0 6px; }
        .btn-filter { padding: 10px 24px; background: linear-gradient(135deg, #1e293b, #0f172a); color: white; border-radius: 12px; font-size: 13px; font-weight: 700; border: none; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
        .btn-filter svg { width: 18px; height: 18px; stroke: white; fill: none; stroke-width: 2; }
        .btn-filter:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 25px rgba(30, 41, 59, 0.25); }
        .btn-filter:active { transform: scale(0.98); }
        .btn-clear { padding: 10px 14px; border-radius: 12px; font-size: 16px; font-weight: 600; color: #94a3b8; background: white; border: 2px solid #e2e8f0; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; justify-content: center; }
        .btn-clear svg { width: 18px; height: 18px; stroke: #94a3b8; fill: none; stroke-width: 2; }
        .btn-clear:hover { background: #fef2f2; color: #ef4444; border-color: #fca5a5; transform: rotate(90deg); }
        .btn-clear:hover svg { stroke: #ef4444; }
        .btn-export { padding: 10px 18px; border-radius: 12px; font-size: 12px; font-weight: 700; border: 2px solid; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.04em; }
        .btn-export svg { width: 16px; height: 16px; fill: none; stroke-width: 2; }
        .btn-export-excel { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
        .btn-export-excel svg { stroke: #065f46; }
        .btn-export-excel:hover { background: #d1fae5; border-color: #6ee7b7; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2); }
        .btn-export-pdf { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
        .btn-export-pdf svg { stroke: #991b1b; }
        .btn-export-pdf:hover { background: #fee2e2; border-color: #fca5a5; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2); }

        /* ===== TABLE ===== */
        .table-container {
            background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px);
            border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.3); overflow: hidden;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); transition: all 0.3s ease;
        }
        .table-container:hover { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); }
        .table-header { padding: 18px 24px; background: linear-gradient(135deg, #f8fafc, #f1f5f9); border-bottom: 1px solid #eef2f6; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
        .table-header h2 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #475569; display: flex; align-items: center; gap: 10px; }
        .table-header h2 .dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #6366f1); display: inline-block; animation: pulse-ring 2s ease-in-out infinite; }
        .live-badge { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; color: #059669; background: #ecfdf5; padding: 6px 18px; border-radius: 50px; border: 1px solid #a7f3d0; text-transform: uppercase; letter-spacing: 0.04em; }
        .live-badge .dot { width: 8px; height: 8px; background: #10b981; border-radius: 50%; animation: pulse-ring 1.5s ease-in-out infinite; }

        /* ===== DATA TABLE OVERRIDES ===== */
        .dataTables_wrapper { padding: 8px 16px 16px 16px; }
        
        /* NEW: DataTables Length Dropdown Styling */
        .dataTables_wrapper .dataTables_length { float: left; margin-bottom: 16px; font-size: 13px; font-weight: 600; color: #475569; display: flex; align-items: center; }
        .dataTables_wrapper .dataTables_length select { border: 2px solid #e2e8f0; border-radius: 8px; padding: 6px 28px 6px 12px; margin: 0 8px; background: rgba(255, 255, 255, 0.8); outline: none; transition: all 0.3s ease; color: #1e293b; cursor: pointer; }
        .dataTables_wrapper .dataTables_length select:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }
        
        .dataTables_wrapper .dataTables_filter { float: right; margin-bottom: 16px; }
        .dataTables_wrapper .dataTables_filter input { border: 2px solid #e2e8f0; border-radius: 12px; padding: 10px 18px; font-size: 13px; font-weight: 500; background: rgba(255, 255, 255, 0.8); transition: all 0.3s ease; width: 280px; }
        .dataTables_wrapper .dataTables_filter input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08); background: white; }
        .dataTables_wrapper .dataTables_info { font-size: 13px; color: #64748b; padding: 16px 0; font-weight: 500; float: left; }
        .dataTables_wrapper .dataTables_paginate { padding: 12px 0; float: right; }
        .dataTables_wrapper .dataTables_paginate .paginate_button { padding: 8px 16px; margin: 0 4px; border-radius: 10px; font-size: 13px; font-weight: 600; color: #475569; border: 2px solid transparent; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
        .dataTables_wrapper .dataTables_paginate .paginate_button svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
        .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: linear-gradient(135deg, #3b82f6, #6366f1); color: white !important; border: none; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); }
        .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current) { background: #f1f5f9; border-color: #e2e8f0; }

        /* ===== TABLE BADGES ===== */
        .badge-color { background: linear-gradient(135deg, #eef2ff, #c7d2fe); color: #4f46e5; padding: 4px 16px; border-radius: 50px; font-size: 11px; font-weight: 700; border: 1px solid #a5b4fc; display: inline-block; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15); }
        .badge-bw { background: linear-gradient(135deg, #f1f5f9, #e2e8f0); color: #475569; padding: 4px 16px; border-radius: 50px; font-size: 11px; font-weight: 700; border: 1px solid #cbd5e1; display: inline-block; box-shadow: 0 2px 8px rgba(100, 116, 139, 0.10); }
        .badge-page { background: linear-gradient(135deg, #f1f5f9, #e2e8f0); color: #0f172a; padding: 4px 16px; border-radius: 10px; font-size: 14px; font-weight: 800; min-width: 44px; display: inline-block; text-align: center; border: 1px solid #e2e8f0; }

        /* ===== SCROLLBAR ===== */
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
        ::-webkit-scrollbar-thumb { background: linear-gradient(135deg, #3b82f6, #6366f1); border-radius: 10px; transition: all 0.3s ease; }
        ::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, #2563eb, #4f46e5); }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 1200px) {
            .metric-tiles-wrapper { grid-template-columns: repeat(3, 1fr); }
            .charts-grid { grid-template-columns: 1fr; }
        }
        @media (max-width: 992px) {
            .filter-row .field-group { min-width: 120px; }
            .filter-row .field-group.small { min-width: 30px; }
        }
        @media (max-width: 768px) {
            .dashboard-header { flex-direction: column; align-items: flex-start; }
            .header-right { width: 100%; justify-content: space-between; }
            .metric-tiles-wrapper { grid-template-columns: repeat(2, 1fr); gap: 12px; }
            .filter-row .field-group { min-width: 100%; }
            .filter-row .field-group.small { min-width: 100%; flex: 1 1 100%; }
            .filter-row .field-group .arrow { height: auto; padding: 4px 0; }
            .filter-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
            .dataTables_wrapper .dataTables_filter { float: none; text-align: right; }
            .dataTables_wrapper .dataTables_filter input { width: 100%; }
            .dataTables_wrapper .dataTables_length { float: none; justify-content: center; margin-bottom: 16px; }
            .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { float: none; text-align: center; }
            .table-header { flex-direction: column; align-items: flex-start; }
        }
        @media (max-width: 480px) {
            .metric-tiles-wrapper { grid-template-columns: 1fr; }
            .metric-card { padding: 16px 20px; }
            .metric-data h3 { font-size: 22px; }
        }

        /* ===== DARK THEME ===== */
        body.dark-theme { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important; }
        body.dark-theme .metric-card, body.dark-theme .chart-container, body.dark-theme .filter-bar, body.dark-theme .table-container { background: rgba(30, 41, 59, 0.85); border-color: rgba(71, 85, 105, 0.3); }
        body.dark-theme .metric-data h3 { color: #f1f5f9; }
        body.dark-theme .metric-data p { color: #94a3b8; }
        body.dark-theme .header-left h1 { background: linear-gradient(135deg, #f1f5f9 0%, #94a3b8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
        body.dark-theme .header-left h1 .header-icon { -webkit-text-fill-color: #3b82f6; }
        body.dark-theme .header-left p { color: #64748b; }
        body.dark-theme .chart-header h2 { color: #94a3b8; }
        body.dark-theme .table-header { background: linear-gradient(135deg, #1e293b, #0f172a); border-bottom-color: rgba(71, 85, 105, 0.3); }
        body.dark-theme .table-header h2 { color: #94a3b8; }
        body.dark-theme .filter-row .field-group select, body.dark-theme .filter-row .field-group input { background: rgba(51, 65, 85, 0.8); color: #f1f5f9; border-color: transparent; }
        body.dark-theme .filter-row .field-group select:focus, body.dark-theme .filter-row .field-group input:focus { background: #1e293b; border-color: #3b82f6; }
        body.dark-theme .filter-row .field-group label { color: #64748b; }
        body.dark-theme .filter-row .field-group label svg { stroke: #64748b; }
        body.dark-theme .dataTables_wrapper .dataTables_filter input { background: rgba(51, 65, 85, 0.8); color: #f1f5f9; border-color: #334155; }
        body.dark-theme .dataTables_wrapper .dataTables_filter input:focus { background: #1e293b; border-color: #3b82f6; }
        body.dark-theme .dataTables_wrapper .dataTables_length { color: #94a3b8; }
        body.dark-theme .dataTables_wrapper .dataTables_length select { background: rgba(51, 65, 85, 0.8); border-color: #334155; color: #f1f5f9; }
        body.dark-theme .dataTables_wrapper .dataTables_info, body.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button { color: #94a3b8; }
        body.dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current) { background: #1e293b; border-color: #334155; }
        body.dark-theme .badge-color { background: linear-gradient(135deg, #1e1b4b, #312e81); color: #818cf8; border-color: #4f46e5; }
        body.dark-theme .badge-bw { background: linear-gradient(135deg, #1e293b, #334155); color: #94a3b8; border-color: #475569; }
        body.dark-theme .badge-page { background: linear-gradient(135deg, #1e293b, #334155); color: #f1f5f9; border-color: #475569; }
        body.dark-theme .live-badge-header, body.dark-theme .live-badge { background: #064e3b; border-color: #047857; color: #6ee7b7; }
        body.dark-theme .live-badge-header span { color: #6ee7b7; }
        body.dark-theme .btn-clear { background: #1e293b; border-color: #334155; color: #64748b; }
        body.dark-theme .btn-clear svg { stroke: #64748b; }
        body.dark-theme .btn-clear:hover { background: #7f1d1d; border-color: #991b1b; color: #fca5a5; }
        body.dark-theme .btn-clear:hover svg { stroke: #fca5a5; }
        body.dark-theme .btn-filter { background: linear-gradient(135deg, #f1f5f9, #e2e8f0); color: #0f172a; }
        body.dark-theme .btn-filter svg { stroke: #0f172a; }
        body.dark-theme .btn-filter:hover { box-shadow: 0 8px 25px rgba(241, 245, 249, 0.15); }
        body.dark-theme .btn-export-excel { background: #064e3b; color: #6ee7b7; border-color: #047857; }
        body.dark-theme .btn-export-excel svg { stroke: #6ee7b7; }
        body.dark-theme .btn-export-excel:hover { background: #047857; border-color: #34d399; }
        body.dark-theme .btn-export-pdf { background: #7f1d1d; color: #fca5a5; border-color: #991b1b; }
        body.dark-theme .btn-export-pdf svg { stroke: #fca5a5; }
        body.dark-theme .btn-export-pdf:hover { background: #991b1b; border-color: #f87171; }
        body.dark-theme .theme-toggle { background: #1e293b; border-color: #334155; }
        body.dark-theme .theme-toggle svg { stroke: #f1f5f9; fill: #f1f5f9; }
        body.dark-theme .theme-toggle:hover { border-color: #3b82f6; }
        body.dark-theme .metric-progress { background: #1e293b; }
        body.dark-theme .chart-header .badge { background: #1e293b; color: #64748b; }
        body.dark-theme .filter-row .field-group .arrow svg { stroke: #64748b; }
    </style>
@endpush

@section('content')
<div class="dashboard-container">

    <!-- ===== METRIC TILES ===== -->
    <div class="metric-tiles-wrapper">
        
        <!-- ROW 1 (Existing 5) -->
        <div class="metric-card">
            <div class="metric-icon-box blue">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
                </svg>
            </div>
            <div class="metric-data">
                <p>Total Print Jobs</p>
                <h3 id="kpi-jobs">{{ number_format($totalJobs ?? 0) }}</h3>
                <div class="metric-progress"><div class="bar" style="width:78%"></div></div>
            </div>
        </div>

        <div class="metric-card">
            <div class="metric-icon-box green">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                </svg>
            </div>
            <div class="metric-data">
                <p>Total Pages</p>
                <h3 id="kpi-pages">{{ number_format($totalPages ?? 0) }}</h3>
                <div class="metric-progress"><div class="bar" style="width:62%"></div></div>
            </div>
        </div>

        <div class="metric-card">
            <div class="metric-icon-box pink">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/>
                </svg>
            </div>
            <div class="metric-data">
                <p>Color Pages</p>
                <h3 id="kpi-color">{{ number_format($totalColor ?? 0) }}</h3>
                <div class="metric-progress"><div class="bar" style="width:19%"></div></div>
            </div>
        </div>

        <div class="metric-card">
            <div class="metric-icon-box slate">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
            </div>
            <div class="metric-data">
                <p>B&amp;W Pages</p>
                <h3 id="kpi-bw">{{ number_format($totalBw ?? 0) }}</h3>
                <div class="metric-progress"><div class="bar" style="width:81%"></div></div>
            </div>
        </div>

        <div class="metric-card">
            <div class="metric-icon-box amber">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"/>
                </svg>
            </div>
            <div class="metric-data">
                <p>Estimated Cost</p>
                <h3 id="kpi-cost">Rs. {{ number_format($totalCost ?? 0, 2) }}</h3>
                <div class="metric-progress"><div class="bar" style="width:55%"></div></div>
            </div>
        </div>

        <!-- ROW 2 (New Paper Format Tiles) -->
        <div class="metric-card">
            <div class="metric-icon-box cyan">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                </svg>
            </div>
            <div class="metric-data">
                <p>A4 Pages Printed</p>
                <h3 id="kpi-a4-pages">{{ number_format($totalA4Pages ?? 0) }}</h3>
                <div class="metric-progress"><div class="bar" style="width:88%"></div></div>
            </div>
        </div>

        <div class="metric-card">
            <div class="metric-icon-box violet">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </div>
            <div class="metric-data">
                <p>A4 Est. Cost</p>
                <h3 id="kpi-a4-cost">Rs. {{ number_format($totalA4Cost ?? 0, 2) }}</h3>
                <div class="metric-progress"><div class="bar" style="width:45%"></div></div>
            </div>
        </div>

        <div class="metric-card">
            <div class="metric-icon-box rose">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"/>
                </svg>
            </div>
            <div class="metric-data">
                <p>A3 Pages Printed</p>
                <h3 id="kpi-a3-pages">{{ number_format($totalA3Pages ?? 0) }}</h3>
                <div class="metric-progress"><div class="bar" style="width:12%"></div></div>
            </div>
        </div>

        <div class="metric-card">
            <div class="metric-icon-box teal">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/>
                </svg>
            </div>
            <div class="metric-data">
                <p>A3 Est. Cost</p>
                <h3 id="kpi-a3-cost">Rs. {{ number_format($totalA3Cost ?? 0, 2) }}</h3>
                <div class="metric-progress"><div class="bar" style="width:35%"></div></div>
            </div>
        </div>

    </div>

    <!-- ===== CHARTS ===== -->
    <div class="charts-grid">
        <div class="chart-container">
            <div class="chart-header">
                <h2>
                    <span class="dot dot-indigo"></span>
                    Color vs B&amp;W
                </h2>
                <span class="badge">Distribution</span>
            </div>
            <div id="color-donut-chart" style="height:260px;"></div>
        </div>
        <div class="chart-container">
            <div class="chart-header">
                <h2>
                    <span class="dot dot-blue"></span>
                    Top 10 Consumers
                </h2>
                <span class="badge">Cost Drivers</span>
            </div>
            <div id="top-consumers-chart" style="height:260px;"></div>
        </div>
    </div>

    <!-- ===== FILTER BAR ===== -->
    <div class="filter-bar">
        <form action="{{ route('dashboard') }}" method="GET" id="filter-form">
            <div class="filter-row">
                <div class="field-group">
                    <label>
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                        Search Logs
                    </label>
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="User, Document, PC...">
                </div>

                <div class="field-group">
                    <label>
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                        </svg>
                        Branch Location
                    </label>
                    @hasanyrole('Super Admin|Executive')
                        <select name="location_id">
                            <option value="">National (All Branches)</option>
                            @foreach($locations ?? [] as $loc)
                                <option value="{{ $loc->id }}" {{ request('location_id') == $loc->id ? 'selected' : '' }}>
                                    {{ $loc->name }}
                                </option>
                            @endforeach
                        </select>
                    @else
                        <div style="padding: 10px 16px; background: rgba(248,250,252,0.8); border: 2px solid #e2e8f0; border-radius: 12px; font-size: 13px; font-weight: 600; color: #475569;">
                            {{ auth()->user()->location->name ?? 'Unassigned' }}
                        </div>
                    @endhasanyrole
                </div>

                <!-- NEW: PRINTER DROPDOWN FILTER -->
                <div class="field-group">
                    <label>
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/>
                        </svg>
                        Printer
                    </label>
                    <select name="printer_id">
                        <option value="">All Printers</option>
                        @foreach($filterPrinters ?? [] as $printer)
                            <option value="{{ $printer->id }}" {{ request('printer_id') == $printer->id ? 'selected' : '' }}>
                                {{ $printer->printer_name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="field-group">
                    <label>
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                        </svg>
                        Start Date
                    </label>
                    <input type="date" name="start_date" value="{{ request('start_date') }}">
                </div>

                <div class="field-group small">
                    <label>&nbsp;</label>
                    <div class="arrow">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
                        </svg>
                    </div>
                </div>

                <div class="field-group">
                    <label>
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                        </svg>
                        End Date
                    </label>
                    <input type="date" name="end_date" value="{{ request('end_date') }}">
                </div>

                <div class="filter-actions">
                    <button type="submit" class="btn-filter">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                        Analyze
                    </button>

                    @if(request()->anyFilled(['search', 'location_id', 'printer_id', 'start_date', 'end_date']))
                        <a href="{{ route('dashboard') }}" class="btn-clear" title="Clear filters">
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                            </svg>
                        </a>
                    @endif

                    <span class="divider"></span>

                    <button type="button" onclick="downloadReport('excel')" class="btn-export btn-export-excel">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2-2V9a2 2 0 012-2h6a2 2 0 012 2v6a2 2 0 01-2 2H9z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7v10"/>
                        </svg>
                        Excel
                    </button>
                    <button type="button" onclick="downloadReport('pdf')" class="btn-export btn-export-pdf">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                        </svg>
                        PDF
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- ===== TABLE ===== -->
    <div class="table-container">
        <div class="table-header">
            <h2>
                <span class="dot"></span>
                Live Print Audit Log
            </h2>
        </div>
        <div class="overflow-x-auto">
            <table id="printLogsTable" class="min-w-full divide-y divide-slate-200 w-full">
                <thead>
                    <tr>
                        <th class="px-5 py-4 text-left text-sm font-bold text-slate-500 uppercase tracking-wider bg-slate-50/80">Timestamp</th>
                        <th class="px-5 py-4 text-left text-sm font-bold text-slate-500 uppercase tracking-wider bg-slate-50/80">User</th>
                        <th class="px-5 py-4 text-left text-sm font-bold text-slate-500 uppercase tracking-wider bg-slate-50/80">Desktop &amp; IP</th>
                        <th class="px-5 py-4 text-left text-sm font-bold text-slate-500 uppercase tracking-wider bg-slate-50/80">Document</th>
                        
                        <!-- ALIGNED CENTER -->
                        <th class="px-5 py-4 text-center text-sm font-bold text-slate-500 uppercase tracking-wider bg-slate-50/80">Pages</th>
                        <th class="px-5 py-4 text-center text-sm font-bold text-slate-500 uppercase tracking-wider bg-slate-50/80">Size</th>
                        <th class="px-5 py-4 text-center text-sm font-bold text-slate-500 uppercase tracking-wider bg-slate-50/80">Color Mode</th>
                        
                        <th class="px-5 py-4 text-left text-sm font-bold text-slate-500 uppercase tracking-wider bg-slate-50/80">Printer, IP &amp; Serial</th>
                        <th class="px-5 py-4 text-left text-sm font-bold text-slate-500 uppercase tracking-wider bg-slate-50/80">Branch / Sub-Location</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-slate-100">
                    @foreach ($printJobs ?? [] as $job)
                        <tr class="hover:bg-slate-50 transition-colors duration-150">
                            <td class="px-5 py-4 whitespace-nowrap text-xs text-slate-500 font-mono">
                                {{ $job->printed_at ? $job->printed_at->format('Y-m-d H:i') : 'N/A' }}
                            </td>
                            <td class="px-5 py-4 whitespace-nowrap text-sm font-bold text-slate-800">
                                {{ $job->username }}
                            </td>
                            <td class="px-5 py-4 whitespace-nowrap">
                                <div class="text-xs font-mono font-bold text-slate-700">{{ $job->computer_name }}</div>
                                @if($job->public_ip)
                                    <div class="text-[10px] text-slate-400 font-mono mt-0.5">{{ $job->public_ip }}</div>
                                @endif
                            </td>
                            <td class="px-5 py-4 text-sm text-slate-600 max-w-[200px] truncate font-medium" title="{{ $job->document_name }}">
                                {{ $job->document_name }}
                            </td>
                            
                            <!-- ALIGNED CENTER -->
                            <td class="px-5 py-4 whitespace-nowrap text-sm text-center">
                                <span class="badge-page">{{ $job->pages }}</span>
                            </td>
                            <td class="px-5 py-4 whitespace-nowrap text-sm text-center">
                                <span class="px-2 py-1 bg-slate-100 text-slate-600 rounded text-xs font-bold border border-slate-200">
                                    {{ strtoupper($job->paper_size ?? 'A4') }}
                                </span>
                            </td>
                            <td class="px-5 py-4 whitespace-nowrap text-sm text-center">
                                @php
                                    $actualMode = strtolower($job->color_mode ?? 'unknown');
                                    if ($job->printer && $job->printer->printer_type === 'bw') {
                                        $actualMode = 'monochrome';
                                    }
                                    $isColor = in_array($actualMode, ['color', 'colour']);
                                @endphp
                                
                                @if($isColor)
                                    <span class="badge-color">Color</span>
                                @else
                                    <span class="badge-bw">B&amp;W</span>
                                @endif
                            </td>

                            <td class="px-5 py-4 whitespace-nowrap">
                                <div class="text-sm font-semibold text-slate-700">
                                    {{ $job->printer ? $job->printer->printer_name : $job->printer_name }}
                                </div>
                                <div class="flex items-center gap-1 mt-1">
                                    @php
                                        $printerIp = $job->printer_ip ?? ($job->printer->ip_address ?? null);
                                    @endphp
                                    @if($printerIp)
                                        <span class="px-2 py-0.5 bg-emerald-50 text-emerald-700 border border-emerald-200 rounded text-[10px] font-bold tracking-wider">
                                            IP: {{ $printerIp }}
                                        </span>
                                    @endif
                                    
                                    @if($job->printer && $job->printer->serial_number)
                                        <span class="px-2 py-0.5 bg-blue-50 text-blue-700 border border-blue-200 rounded text-[10px] font-bold tracking-wider">
                                            SN: {{ $job->printer->serial_number }}
                                        </span>
                                    @elseif($job->snmp_printer_id)
                                        <span class="px-2 py-0.5 bg-slate-100 text-slate-600 border border-slate-200 rounded text-[10px] font-bold tracking-wider">
                                            SN: {{ $job->snmp_printer_id }}
                                        </span>
                                    @else
                                        <span class="text-slate-400 text-[10px] italic">No Serial</span>
                                    @endif
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">
                                    {{ $job->printer->location->name ?? ($job->location_name ?? 'N/A') }}
                                </div>
                                <div class="text-xs text-gray-500">
                                    {{ $job->printer->subLocation->name ?? 'N/A' }}
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

</div>
@endsection

@push('scripts')
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.tailwindcss.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

    <script>
        (function() {
            $(document).ready(function() {
                // ===== DATATABLE =====
                var dataTable = $('#printLogsTable').DataTable({
                    "dom": 'lrtip',
                    "lengthChange": true, // CHANGED: Activated the Length Menu!
                    "lengthMenu": [ [10, 20, 30, 50, 100], [10, 20, 30, 50, 100] ],
                    "pageLength": 10,
                    "order": [
                        [0, "desc"]
                    ],
                    "language": {
                        "search": "",
                        "searchPlaceholder": "Search logs...",
                        "lengthMenu": "Show _MENU_ entries",
                        "info": "Showing _START_ to _END_ of _TOTAL_ prints",
                        "infoEmpty": "No records found",
                        "infoFiltered": "(filtered from _MAX_ total)",
                        "paginate": {
                            "previous": "<svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" style=\"width:16px;height:16px;display:inline-block;vertical-align:middle;\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\"/></svg> Prev",
                            "next": "Next <svg fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" style=\"width:16px;height:16px;display:inline-block;vertical-align:middle;\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\"/></svg>"
                        }
                    },
                    "columnDefs": [
                        { targets: 0, className: 'font-mono text-xs' }
                    ]
                });

                // ===== CHARTS =====
                // Donut Chart
                var colorPages = {{ $totalColor ?? 0 }};
                var bwPages = {{ $totalBw ?? 0 }};

                var donutOptions = {
                    series: [colorPages, bwPages],
                    labels: ['Color Pages', 'B&W Pages'],
                    chart: {
                        type: 'donut',
                        height: 260,
                        animations: { enabled: true, easing: 'easeinout' }
                    },
                    colors: ['#6366F1', '#94A3B8'],
                    dataLabels: { enabled: false },
                    legend: {
                        position: 'bottom',
                        fontSize: '12px',
                        fontFamily: 'Inter',
                        fontWeight: 600,
                        markers: { radius: 12 }
                    },
                    stroke: { width: 0 },
                    plotOptions: {
                        pie: {
                            expandOnClick: true,
                            donut: { size: '70%' }
                        }
                    }
                };
                var donutChart = new ApexCharts(document.querySelector("#color-donut-chart"), donutOptions);
                donutChart.render();

                // Bar Chart
                var topConsumers = @json($topConsumers ?? []);
                var consumerNames = topConsumers.map(item => item.username);
                var consumerVols = topConsumers.map(item => item.total_pages);

                // If no data, use fallback
                if (consumerNames.length === 0) {
                    consumerNames = ['No Data Available'];
                    consumerVols = [0];
                }

                var barOptions = {
                    chart: {
                        type: 'bar',
                        height: 260,
                        toolbar: { show: false },
                        animations: { enabled: true }
                    },
                    series: [{ name: 'Pages Printed', data: consumerVols }],
                    xaxis: {
                        categories: consumerNames,
                        labels: {
                            style: { fontSize: '11px', fontWeight: 600, fontFamily: 'Inter' }
                        }
                    },
                    colors: ['#3B82F6'],
                    plotOptions: {
                        bar: {
                            borderRadius: 4,
                            horizontal: false,
                            columnWidth: '40%'
                        }
                    },
                    dataLabels: { enabled: false },
                    grid: { borderColor: '#f1f5f9', strokeDashArray: 4 }
                };
                var barChart = new ApexCharts(document.querySelector("#top-consumers-chart"), barOptions);
                barChart.render();

                // ===== THEME TOGGLE =====
                const themeToggle = document.getElementById('themeToggle');
                const moonIcon = document.getElementById('moonIcon');
                const sunIcon = document.getElementById('sunIcon');
                let isDark = false;

                // Check for saved theme preference
                if (localStorage.getItem('dashboardTheme') === 'dark') {
                    isDark = true;
                    document.body.classList.add('dark-theme');
                    if (themeToggle) {
                        themeToggle.classList.add('dark');
                        moonIcon.style.display = 'none';
                        sunIcon.style.display = 'block';
                    }
                }

                if (themeToggle) {
                    themeToggle.addEventListener('click', function() {
                        isDark = !isDark;
                        document.body.classList.toggle('dark-theme', isDark);
                        this.classList.toggle('dark', isDark);
                        
                        // Toggle icons
                        if (isDark) {
                            moonIcon.style.display = 'none';
                            sunIcon.style.display = 'block';
                        } else {
                            moonIcon.style.display = 'block';
                            sunIcon.style.display = 'none';
                        }
                        
                        localStorage.setItem('dashboardTheme', isDark ? 'dark' : 'light');

                        // Update chart colors
                        var textColor = isDark ? '#94a3b8' : '#475569';
                        var gridColor = isDark ? '#1e293b' : '#f1f5f9';

                        barChart.updateOptions({
                            xaxis: {
                                labels: {
                                    style: { colors: textColor }
                                }
                            },
                            grid: { borderColor: gridColor }
                        });
                    });
                }

                // ===== FILTER FORM =====
                // Auto-submit on filter change
                $('#filter-form select, #filter-form input[type="date"]').on('change', function() {
                    $('#filter-form').submit();
                });

                // ===== EXPORT FUNCTIONS =====
                window.downloadReport = function(format) {
                    let form = document.getElementById('filter-form');
                    let formData = new FormData(form);
                    let params = new URLSearchParams(formData);
                    params.set('export', format);

                    let url = "{{ route('dashboard') }}?" + params.toString();
                    window.location.href = url;
                };

                // ===== SIMULATED LIVE UPDATE =====
                @if(isset($printJobs) && count($printJobs) > 0)
                setInterval(() => {
                    let urlParams = new URLSearchParams(window.location.search);
                    urlParams.delete('export');
                    let url = "{{ route('dashboard') }}?" + urlParams.toString();

                    fetch(url, {
                        headers: { 'X-Requested-With': 'XMLHttpRequest' }
                    })
                    .then(response => response.json())
                    .then(data => {
                        // Directly apply the strings from the controller
                        document.getElementById('kpi-jobs').textContent = data.totalJobs || '0';
                        document.getElementById('kpi-pages').textContent = data.totalPages || '0';
                        document.getElementById('kpi-color').textContent = data.totalColor || '0';
                        document.getElementById('kpi-bw').textContent = data.totalBw || '0';
                        document.getElementById('kpi-cost').textContent = 'Rs. ' + (data.totalCost || '0.00');

                        if(document.getElementById('kpi-a4-pages')) {
                            document.getElementById('kpi-a4-pages').textContent = data.totalA4Pages || '0';
                            document.getElementById('kpi-a4-cost').textContent = 'Rs. ' + (data.totalA4Cost || '0.00');
                            document.getElementById('kpi-a3-pages').textContent = data.totalA3Pages || '0';
                            document.getElementById('kpi-a3-cost').textContent = 'Rs. ' + (data.totalA3Cost || '0.00');
                        }

                        // Update Charts
                        let colorVal = parseInt(data.totalColor.replace(/,/g, '')) || 0;
                        let bwVal = parseInt(data.totalBw.replace(/,/g, '')) || 0;
                        donutChart.updateSeries([colorVal, bwVal]);

                        if (data.topConsumerVols && data.topConsumers) {
                            barChart.updateSeries([{ data: data.topConsumerVols }]);
                            barChart.updateOptions({ xaxis: { categories: data.topConsumers } });
                        }

                        // Update Table
                        let dtRows = data.jobs.map(job => {
                            let formattedDate = job.printed_at ? job.printed_at.replace('T', ' ').slice(0, 16) : 'N/A';

                            // Color Override Logic
                            let actualMode = (job.color_mode || 'unknown').toLowerCase();
                            if (job.printer && job.printer.printer_type === 'bw') {
                                actualMode = 'monochrome';
                            }
                            let isColor = (actualMode === 'color' || actualMode === 'colour');

                            let colorBadge = isColor ?
                                `<span class="badge-color">Color</span>` :
                                `<span class="badge-bw">B&amp;W</span>`;

                            let paperSize = job.paper_size ? job.paper_size.toUpperCase() : 'A4';
                            let sizeBadge = `<span class="px-2 py-1 bg-slate-100 text-slate-600 rounded text-xs font-bold border border-slate-200">${paperSize}</span>`;

                            // Format Desktop & IP Column
                            let desktopIpHtml = job.public_ip ? `<div class="text-[10px] text-slate-400 font-mono mt-0.5">${job.public_ip}</div>` : '';
                            let desktopCol = `<div class="text-xs font-mono font-bold text-slate-700">${job.computer_name}</div>${desktopIpHtml}`;

                            // Format Printer & IP & Serial Column
                            let printerName = job.printer ? job.printer.printer_name : job.printer_name;
                            let printerIp = job.printer_ip || (job.printer ? job.printer.ip_address : null);
                            let ipBadge = printerIp ? `<span class="px-2 py-0.5 bg-emerald-50 text-emerald-700 border border-emerald-200 rounded text-[10px] font-bold tracking-wider">IP: ${printerIp}</span>` : '';
                            
                            let serialBadge = '';
                            if (job.printer && job.printer.serial_number) {
                                serialBadge = `<span class="px-2 py-0.5 bg-blue-50 text-blue-700 border border-blue-200 rounded text-[10px] font-bold tracking-wider">SN: ${job.printer.serial_number}</span>`;
                            } else if (job.snmp_printer_id) {
                                serialBadge = `<span class="px-2 py-0.5 bg-slate-100 text-slate-600 border border-slate-200 rounded text-[10px] font-bold tracking-wider">SN: ${job.snmp_printer_id}</span>`;
                            } else {
                                serialBadge = `<span class="text-slate-400 text-[10px] italic">No Serial</span>`;
                            }
                            let printerCol = `<div class="text-sm font-semibold text-slate-700">${printerName}</div><div class="flex items-center gap-1 mt-1">${ipBadge}${serialBadge}</div>`;

                            let subLocName = (job.printer && job.printer.sub_location) ? job.printer.sub_location.name : 'N/A';
                            let locName = (job.printer && job.printer.location) ? job.printer.location.name : (job.location_name || 'N/A');

                            if (subLocName === 'N/A' && job.printer && job.printer.subLocation) {
                                subLocName = job.printer.subLocation.name;
                            }

                            let locationInfo = `
                                <div class="text-sm font-medium text-gray-900">${locName}</div>
                                <div class="text-xs text-gray-500">${subLocName}</div>
                            `;

                            // FIXED ARRAY - REMOVED COST HTML!
                            return [
                                `<span class="font-mono text-xs text-slate-500">${formattedDate}</span>`,
                                `<span class="font-bold text-slate-800">${job.username}</span>`,
                                desktopCol,
                                `<div class="max-w-[200px] truncate font-medium text-slate-600" title="${job.document_name}">${job.document_name}</div>`,
                                `<div class="text-center"><span class="badge-page">${job.pages}</span></div>`,
                                `<div class="text-center">${sizeBadge}</div>`, // SIZE COL
                                `<div class="text-center">${colorBadge}</div>`, // COLOR COL
                                printerCol,
                                locationInfo
                            ];
                        });

                        dataTable.clear();
                        dataTable.rows.add(dtRows);
                        dataTable.draw(false);

                        // Update progress bars randomly for visual effect
                        document.querySelectorAll('.metric-progress .bar').forEach((bar, index) => {
                            const newWidth = Math.min(95, Math.floor(Math.random() * 30) + 50 + index * 5);
                            bar.style.width = newWidth + '%';
                        });
                    })
                    .catch(err => console.warn("Polling error:", err));
                }, 12000);
                @endif
            });
        })();
    </script>
@endpush