<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Laporan & Analitik - {{ config('app.name', 'Laravel') }}</title>
    <link rel="icon" type="image/svg+xml" href="{{ asset('favicon.svg') }}">

    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

    <style>
        :root {
            --bg: #eef4ff;
            --panel: rgba(255, 255, 255, 0.9);
            --text: #172554;
            --muted: #64748b;
            --line: #dbe6f7;
            --primary: #4f46e5;
            --secondary: #2563eb;
            --cyan: #38bdf8;
            --shadow-soft: 0 28px 55px rgba(59, 84, 145, 0.10);
            --shadow-card: 0 18px 32px rgba(148, 163, 184, 0.12);
            --font-main: 'Inter', system-ui, -apple-system, sans-serif;
        }

        * { box-sizing: border-box; }

        body {
            margin: 0;
            font-family: var(--font-main);
            color: var(--text);
            background:
                radial-gradient(circle at top left, rgba(79, 70, 229, 0.08), transparent 20%),
                radial-gradient(circle at top right, rgba(56, 189, 248, 0.08), transparent 22%),
                linear-gradient(180deg, #f8fbff 0%, var(--bg) 100%);
            -webkit-font-smoothing: antialiased;
        }

        .app { display: flex; min-height: 100vh; }
        .content { flex: 1; width: 100%; padding: 28px; }
        .shell { max-width: 1480px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
        .surface {
            background: var(--panel);
            border: 1px solid rgba(255, 255, 255, 0.82);
            box-shadow: var(--shadow-soft);
            backdrop-filter: blur(16px);
        }

        .report-hero {
            position: relative;
            overflow: hidden;
            border-radius: 34px;
            padding: 26px;
            background:
                radial-gradient(circle at top right, rgba(99, 102, 241, 0.16), transparent 24%),
                radial-gradient(circle at bottom left, rgba(56, 189, 248, 0.13), transparent 22%),
                linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(243, 247, 255, 0.96) 100%);
        }

        .report-hero::after {
            content: "";
            position: absolute;
            top: -86px;
            right: -74px;
            width: 270px;
            height: 270px;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(79, 70, 229, 0.16), rgba(56, 189, 248, 0.14));
        }

        .pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(79, 70, 229, 0.10), rgba(37, 99, 235, 0.08));
            color: var(--primary);
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            border: 1px solid rgba(99, 102, 241, 0.10);
        }

        .hero-title {
            margin: 16px 0 8px;
            font-size: clamp(34px, 5vw, 58px);
            line-height: 0.92;
            letter-spacing: -0.06em;
            font-weight: 900;
        }

        .hero-text {
            margin: 0;
            color: var(--muted);
            line-height: 1.8;
            font-size: 14px;
            max-width: 820px;
        }

        .tab-strip {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            padding: 4px;
            border-radius: 24px;
        }

        .report-tab {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            min-height: 46px;
            padding: 0 16px;
            border-radius: 18px;
            white-space: nowrap;
            color: #334155;
            background: rgba(255, 255, 255, 0.86);
            border: 1px solid rgba(214, 226, 247, 0.98);
            font-size: 13px;
            font-weight: 900;
            transition: all 0.2s ease;
        }

        .report-tab.active {
            color: #fff;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border-color: transparent;
            box-shadow: 0 16px 28px rgba(79, 70, 229, 0.22);
        }

        .summary-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 16px;
        }

        .summary-card {
            position: relative;
            overflow: hidden;
            min-height: 136px;
            padding: 24px 22px;
            border-radius: 26px;
            background: rgba(255, 255, 255, 0.88);
            border: 1px solid rgba(214, 226, 247, 0.98);
            box-shadow: var(--shadow-card);
        }

        .summary-card::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 66px;
            height: 66px;
            border-bottom-left-radius: 32px;
            opacity: 0.72;
        }

        .summary-card.indigo::after { background: #ede9fe; }
        .summary-card.green::after { background: #dcfce7; }
        .summary-card.amber::after { background: #fff4df; }
        .summary-card.rose::after { background: #ffe4e6; }

        .summary-label {
            color: var(--muted);
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .summary-value {
            margin-top: 12px;
            font-size: 34px;
            font-weight: 900;
            line-height: 1;
        }

        .summary-card.indigo .summary-value { color: #4f46e5; }
        .summary-card.green .summary-value { color: #16a34a; }
        .summary-card.amber .summary-value { color: #f59e0b; }
        .summary-card.rose .summary-value { color: #e11d48; }

        .summary-sub {
            margin-top: 12px;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.5;
        }

        .filter-card,
        .report-panel {
            overflow: hidden;
            border-radius: 34px;
            background:
                radial-gradient(circle at top right, rgba(99, 102, 241, 0.10), transparent 22%),
                linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(243, 247, 255, 0.96) 100%);
        }

        .panel-head {
            padding: 22px 24px;
            display: flex;
            justify-content: space-between;
            gap: 16px;
            align-items: center;
            border-bottom: 1px solid rgba(219, 230, 247, 0.95);
        }

        .panel-title {
            margin: 0;
            color: #172554;
            font-size: 21px;
            font-weight: 900;
            letter-spacing: -0.04em;
        }

        .panel-subtitle {
            margin: 6px 0 0;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.6;
        }

        .filter-grid {
            padding: 22px 24px 24px;
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 16px;
        }

        .filter-field label {
            display: block;
            color: #334155;
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            margin-bottom: 8px;
        }

        .filter-input {
            width: 100%;
            min-height: 48px;
            border-radius: 17px;
            border: 1px solid rgba(214, 226, 247, 0.98);
            background: rgba(255, 255, 255, 0.92);
            color: #233876;
            padding: 0 13px;
            font-size: 13px;
            font-weight: 800;
            outline: none;
            box-shadow: 0 10px 20px rgba(148, 163, 184, 0.10);
        }

        .filter-input[type="date"],
        .filter-input[type="datetime-local"] {
            min-height: 58px;
            padding: 0 16px;
            font-size: 15px;
            font-weight: 900;
            cursor: pointer;
            background: linear-gradient(180deg, #ffffff, #f8fbff);
        }

        .filter-input[type="date"]::-webkit-calendar-picker-indicator,
        .filter-input[type="datetime-local"]::-webkit-calendar-picker-indicator {
            width: 28px;
            height: 28px;
            padding: 6px;
            border-radius: 12px;
            cursor: pointer;
            background-color: #eef2ff;
        }

        .export-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 40px;
            padding: 0 14px;
            border-radius: 15px;
            color: #fff;
            font-size: 12px;
            font-weight: 900;
            box-shadow: 0 12px 22px rgba(15, 23, 42, 0.10);
        }

        .export-btn.excel { background: linear-gradient(135deg, #059669, #16a34a); }
        .export-btn.pdf { background: linear-gradient(135deg, #dc2626, #f43f5e); }

        table {
            border-collapse: separate !important;
            border-spacing: 0;
        }

        .report-table-wrap {
            width: 100%;
            overflow-x: hidden;
        }

        .report-table-wrap table {
            width: 100%;
            min-width: 0 !important;
            table-layout: fixed;
        }

        .report-table-wrap th,
        .report-table-wrap td {
            white-space: normal !important;
            overflow-wrap: anywhere;
            word-break: break-word;
            vertical-align: top;
        }

        .report-table-wrap .inline-flex {
            max-width: 100%;
        }

        thead {
            background: rgba(248, 251, 255, 0.96) !important;
        }

        tbody tr {
            transition: all 0.2s ease;
        }

        tbody tr:hover {
            background: rgba(238, 242, 255, 0.58) !important;
        }

        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        .icon { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
        .icon-lg { width: 2rem; height: 2rem; }

        @media (max-width: 1180px) {
            .summary-grid, .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .panel-head { flex-direction: column; align-items: stretch; }
        }

        @media (max-width: 1024px) {
            .app { display: block; }
            .content { padding: 20px; padding-top: 84px; }
        }

        @media (max-width: 640px) {
            .content { padding: 16px; padding-top: 84px; }
            .report-hero, .filter-card, .report-panel { border-radius: 24px; }
            .summary-grid, .filter-grid { grid-template-columns: 1fr; }
        }
    </style>
</head>

<body>
    <div class="app">
        @include('partials.sidebar')

        <main class="content">
            <div class="shell">
                @php
                    $reportLabels = [
                        'borrowing' => 'Riwayat Peminjaman',
                        'room' => 'Penggunaan Ruangan',
                        'vehicle' => 'Penggunaan Kendaraan',
                        'department' => 'Statistik Divisi',
                        'category' => 'Analisis Kategori',
                        'item_request' => 'Histori Permintaan',
                    ];
                    $activeReportLabel = $reportLabels[$reportType] ?? 'Laporan';
                @endphp

                <section class="report-hero surface">
                    <div class="relative z-10 flex flex-col xl:flex-row xl:items-center xl:justify-between gap-7">
                        <div>
                            <span class="pill">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 2v-6m2 9H7a2 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>
                                Laporan Admin
                            </span>
                            <h1 class="hero-title">Laporan & Analitik</h1>
                            <p class="hero-text">Pantau ritme peminjaman, permintaan barang, penggunaan ruangan, kendaraan, dan performa divisi dari satu halaman yang lebih rapi.</p>
                        </div>

                        <div class="flex flex-col sm:flex-row gap-3">
                            <a href="{{ route('reports.export.excel', request()->query()) }}" class="export-btn excel">Export Excel</a>
                            <a href="{{ route('reports.export.pdf', request()->query()) }}" class="export-btn pdf">Export PDF</a>
                        </div>
                    </div>
                </section>

                <div class="tab-strip no-scrollbar surface">
                    <a href="{{ request()->fullUrlWithQuery(['report_type' => 'borrowing']) }}"
                        class="report-tab {{ $reportType == 'borrowing' ? 'active' : '' }}">
                        <svg class="icon mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
                        </svg>
                        Riwayat Peminjaman
                    </a>

                    <a href="{{ request()->fullUrlWithQuery(['report_type' => 'room']) }}"
                        class="report-tab {{ $reportType == 'room' ? 'active' : '' }}">
                        <svg class="icon mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                        </svg>
                        Penggunaan Ruangan
                    </a>

                    <a href="{{ request()->fullUrlWithQuery(['report_type' => 'vehicle']) }}"
                        class="report-tab {{ $reportType == 'vehicle' ? 'active' : '' }}">
                        <svg class="icon mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                        </svg>
                        Penggunaan Kendaraan
                    </a>

                    <a href="{{ request()->fullUrlWithQuery(['report_type' => 'department']) }}"
                        class="report-tab {{ $reportType == 'department' ? 'active' : '' }}">
                        <svg class="icon mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                        </svg>
                        Statistik Divisi
                    </a>

                    <a href="{{ request()->fullUrlWithQuery(['report_type' => 'category']) }}"
                        class="report-tab {{ $reportType == 'category' ? 'active' : '' }}">
                        <svg class="icon mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
                        </svg>
                        Analisis Kategori
                    </a>

                    <a href="{{ request()->fullUrlWithQuery(['report_type' => 'item_request']) }}"
                        class="report-tab {{ $reportType == 'item_request' ? 'active' : '' }}">
                        <svg class="icon mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6M7 4h10a2 2 0 012 2v12a2 2 0 01-2 2H7a2 2 0 01-2-2V6a2 2 0 012-2z"></path>
                        </svg>
                        Histori Permintaan
                    </a>
                </div>

                <div class="summary-grid">
                    @php
                    $summaryCards = [
                    ['title' => 'Total Data', 'value' => $stats['total'], 'color' => 'indigo', 'sub' => 'Data sesuai filter aktif.', 'iconColor' => 'text-indigo-600', 'icon' => 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2'],
                    ['title' => 'Disetujui', 'value' => $stats['approved'], 'color' => 'green', 'sub' => 'Permintaan yang sudah OK.', 'iconColor' => 'text-green-600', 'icon' => 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'],
                    ['title' => 'Menunggu', 'value' => $stats['pending'], 'color' => 'amber', 'sub' => 'Masih dalam proses.', 'iconColor' => 'text-amber-500', 'icon' => 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z'],
                    ['title' => 'Ditolak', 'value' => $stats['rejected'], 'color' => 'rose', 'sub' => 'Tidak lanjut / dibatalkan.', 'iconColor' => 'text-rose-600', 'icon' => 'M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z'],
                    ];
                    @endphp
                    @foreach ($summaryCards as $card)
                    <div class="summary-card {{ $card['color'] }}">
                        <div class="flex items-start justify-between gap-4">
                            <div class="summary-label">{{ $card['title'] }}</div>
                            <svg class="w-5 h-5 {{ $card['iconColor'] }} relative z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $card['icon'] }}"></path>
                            </svg>
                        </div>
                        <div class="summary-value">{{ number_format($card['value']) }}</div>
                        <div class="summary-sub">{{ $card['sub'] }}</div>
                    </div>
                    @endforeach
                </div>

                <section class="filter-card surface">
                    <div class="panel-head">
                        <div>
                            <h2 class="panel-title">Filter Laporan</h2>
                            <p class="panel-subtitle">Sedang melihat: {{ $activeReportLabel }}. Ubah tanggal, divisi, atau status untuk menyaring data.</p>
                        </div>
                        <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2a1 1 0 01-.293.707L12 14.414V19a1 1 0 01-1.447.894L7 18.5V14.414L3.293 6.707A1 1 0 013 6V4z"></path>
                        </svg>
                    </div>
                    <form id="filterForm" action="{{ route('reports.index') }}" method="GET">
                        <input type="hidden" name="report_type" value="{{ $reportType }}">
                        <div class="filter-grid">
                            <div class="filter-field">
                                <label for="date_from">Dari Tanggal</label>
                                <input type="date" name="date_from" id="date_from" value="{{ $dateFrom }}" class="filter-input">
                            </div>
                            <div class="filter-field">
                                <label for="date_to">Sampai Tanggal</label>
                                <input type="date" name="date_to" id="date_to" value="{{ $dateTo }}" class="filter-input">
                            </div>
                            <div class="filter-field">
                                <label for="divisi_id">Divisi</label>
                                <select name="divisi_id" id="divisi_id" class="filter-input">
                                    <option value="All">Semua Divisi</option>
                                    @foreach($divisis as $divisi)
                                    <option value="{{ $divisi->id }}" @selected($selectedDivisi==$divisi->id)>{{ $divisi->nama }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="filter-field">
                                <label for="status">Status</label>
                                <select name="status" id="status" class="filter-input">
                                    @foreach($statuses as $status)
                                    <option value="{{ $status }}" @selected($selectedStatus==$status)>{{ ucfirst(str_replace('_', ' ', $status)) }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </form>
                </section>

                @php
                if (!function_exists('getStatusBadgeClass')) {
                function getStatusBadgeClass($status) {
                return match($status) {
                'pending' => 'bg-yellow-100 text-yellow-800 border-yellow-200',
                'staff_approved', 'sekretariat_approved', 'kepala_approved' => 'bg-blue-100 text-blue-800 border-blue-200',
                'final_approved', 'approved' => 'bg-green-100 text-green-800 border-green-200',
                'rejected', 'cancelled' => 'bg-red-100 text-red-800 border-red-200',
                'returned' => 'bg-gray-100 text-gray-800 border-gray-200',
                'return_pending' => 'bg-orange-100 text-orange-800 border-orange-200',
                default => 'bg-gray-100 text-gray-600'
                };
                }
                }

                if (!function_exists('formatStatusLabel')) {
                function formatStatusLabel($status, $actualReturnDate) {
                if ($status == 'rejected') return 'Ditolak';
                if ($status == 'cancelled') return 'Belum diterima';
                if ($actualReturnDate) return 'Dikembalikan';
                if (in_array($status, ['final_approved', 'approved', 'on_loan'])) return 'Belum Dikembalikan';
                return ucfirst(str_replace('_', ' ', $status));
                }
                }
                @endphp

                @if($reportType == 'borrowing' && isset($borrowingHistory))
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 bg-gray-50">
                        <h3 class="font-bold text-gray-800">Riwayat Peminjaman Barang</h3>
                        <div class="flex flex-wrap gap-2">
                            <a href="{{ route('reports.export.excel', request()->query()) }}" class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-semibold rounded bg-emerald-600 text-white hover:bg-emerald-700 shadow-sm transition-colors">
                                Export Excel
                            </a>
                            <a href="{{ route('reports.export.pdf', request()->query()) }}" class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-semibold rounded bg-red-600 text-white hover:bg-red-700 shadow-sm transition-colors">
                                Export PDF
                            </a>
                        </div>
                    </div>

                    <div class="hidden md:block report-table-wrap">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase">Nama Barang</th>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase">Peminjam</th>
                                    <th class="px-6 py-3 text-center text-xs font-bold text-gray-500 uppercase">Jml</th>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase">Tgl Pinjam</th>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase">Kembali (Plan)</th>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase">Kembali (Aktual)</th>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase">Status</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100 bg-white">
                                @forelse($borrowingHistory as $req)
                                <tr class="hover:bg-gray-50 transition-colors">
                                    <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900">{{ $req->item->nama ?? 'N/A' }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm font-semibold text-gray-900">{{ $req->user->name ?? 'N/A' }}</div>
                                        <div class="text-xs text-gray-500">{{ $req->user->divisi->nama ?? '-' }}</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium">{{ $req->jumlah }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ \Carbon\Carbon::parse($req->tanggal_pinjam)->format('d/m/Y H:i') }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ $req->tanggal_kembali ? \Carbon\Carbon::parse($req->tanggal_kembali)->format('d/m/Y H:i') : '-' }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
                                        {{ $req->actual_return_date ? \Carbon\Carbon::parse($req->actual_return_date)->format('d/m/Y H:i') : '-' }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="inline-flex px-2.5 py-0.5 rounded-full text-xs font-bold border {{ getStatusBadgeClass($req->status) }}">
                                            {{ formatStatusLabel($req->status, $req->actual_return_date) }}
                                        </span>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="7" class="text-center py-10 text-gray-500">Tidak ada data riwayat.</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <div class="md:hidden divide-y divide-gray-100">
                        @forelse($borrowingHistory as $req)
                        <div class="p-4 bg-white flex flex-col gap-3">
                            <div class="flex justify-between items-start">
                                <div>
                                    <h4 class="font-bold text-gray-900 text-sm">{{ $req->item->nama ?? 'N/A' }}</h4>
                                    <p class="text-xs text-gray-500 mt-0.5">Oleh: {{ $req->user->name ?? 'N/A' }}</p>
                                </div>
                                <span class="bg-gray-100 text-gray-700 text-xs font-bold px-2 py-0.5 rounded border border-gray-200">{{ $req->jumlah }} Unit</span>
                            </div>
                            <div class="grid grid-cols-2 gap-2 text-xs text-gray-600">
                                <div class="bg-gray-50 p-2 rounded">
                                    <span class="block text-gray-400 text-[10px] uppercase">Pinjam</span>
                                    {{ \Carbon\Carbon::parse($req->tanggal_pinjam)->format('d M Y, H:i') }}
                                </div>
                                <div class="bg-gray-50 p-2 rounded">
                                    <span class="block text-gray-400 text-[10px] uppercase">Aktual Kembali</span>
                                    {{ $req->actual_return_date ? \Carbon\Carbon::parse($req->actual_return_date)->format('d M Y, H:i') : '-' }}
                                </div>
                            </div>
                            <div class="flex justify-between items-center pt-1">
                                <span class="text-xs text-gray-400">Status</span>
                                <span class="inline-flex px-2.5 py-0.5 rounded-full text-[10px] font-bold border {{ getStatusBadgeClass($req->status) }}">
                                    {{ formatStatusLabel($req->status, $req->actual_return_date) }}
                                </span>
                            </div>
                        </div>
                        @empty
                        <div class="p-8 text-center text-gray-500 text-sm">Tidak ada data riwayat.</div>
                        @endforelse
                    </div>

                    @if($borrowingHistory->hasPages())
                    <div class="px-6 py-4 border-t border-gray-200">
                        {{ $borrowingHistory->links() }}
                    </div>
                    @endif
                </div>
                @endif

                @if($reportType == 'room' && isset($roomBookingHistory))
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 bg-gray-50">
                        <h3 class="font-bold text-gray-800">Riwayat Penggunaan Ruangan</h3>
                        <div class="flex flex-wrap gap-2">
                            <a href="{{ route('reports.export.excel', request()->query()) }}" class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-semibold rounded bg-emerald-600 text-white hover:bg-emerald-700 shadow-sm transition-colors">
                                Export Excel
                            </a>
                            <a href="{{ route('reports.export.pdf', request()->query()) }}" class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-semibold rounded bg-red-600 text-white hover:bg-red-700 shadow-sm transition-colors">
                                Export PDF
                            </a>
                        </div>
                    </div>

                    <div class="hidden md:block report-table-wrap">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase">Nama Ruangan</th>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase">Peminjam</th>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase">Kegiatan</th>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase">Kursi</th>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase">Mulai</th>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase">Selesai</th>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase">Status</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100 bg-white">
                                @forelse($roomBookingHistory as $booking)
                                <tr class="hover:bg-gray-50 transition-colors">
                                    <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900">{{ $booking->room->name ?? 'Unknown Room' }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm font-medium text-gray-900">{{ $booking->user->name ?? 'Unknown' }}</div>
                                        <div class="text-xs text-gray-500">{{ $booking->user->divisi->nama ?? '-' }}</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ $booking->title }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ $booking->chair_count ?: '-' }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ \Carbon\Carbon::parse($booking->start_time)->format('d M Y H:i') }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ \Carbon\Carbon::parse($booking->end_time)->format('d M Y H:i') }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="inline-flex px-2.5 py-0.5 rounded-full text-xs font-bold border {{ getStatusBadgeClass($booking->status) }}">
                                            @if($booking->status == 'rejected') Ditolak
                                            @else {{ ucfirst(str_replace('_', ' ', $booking->status)) }}
                                            @endif
                                        </span>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="7" class="text-center py-10 text-gray-500">Tidak ada data.</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <div class="md:hidden divide-y divide-gray-100">
                        @forelse($roomBookingHistory as $booking)
                        <div class="p-4 bg-white flex flex-col gap-3">
                            <div class="flex justify-between items-start">
                                <div>
                                    <h4 class="font-bold text-gray-900 text-sm">{{ $booking->room->name ?? 'Unknown' }}</h4>
                                    <p class="text-xs text-gray-500 mt-0.5">Kegiatan: {{ $booking->title }}</p>
                                </div>
                                <span class="bg-gray-100 text-gray-700 text-[10px] font-bold px-2 py-1 rounded border border-gray-200">
                                    {{ \Carbon\Carbon::parse($booking->start_time)->format('d M') }}
                                </span>
                            </div>
                            <div class="text-xs text-gray-600 bg-gray-50 p-2 rounded">
                                <div class="flex justify-between mb-1">
                                    <span class="text-gray-400 text-[10px] uppercase">Peminjam</span>
                                    <span class="font-medium">{{ $booking->user->name ?? '-' }}</span>
                                </div>
                                <div class="flex justify-between mb-1">
                                    <span class="text-gray-400 text-[10px] uppercase">Kursi</span>
                                    <span class="font-medium">{{ $booking->chair_count ?: '-' }}</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-gray-400 text-[10px] uppercase">Waktu</span>
                                    <span>{{ \Carbon\Carbon::parse($booking->start_time)->format('H:i') }} - {{ \Carbon\Carbon::parse($booking->end_time)->format('H:i') }}</span>
                                </div>
                            </div>
                            <div class="flex justify-between items-center pt-1">
                                <span class="text-xs text-gray-400">Status</span>
                                <span class="inline-flex px-2.5 py-0.5 rounded-full text-[10px] font-bold border {{ getStatusBadgeClass($booking->status) }}">
                                    {{ ucfirst(str_replace('_', ' ', $booking->status)) }}
                                </span>
                            </div>
                        </div>
                        @empty
                        <div class="p-8 text-center text-gray-500 text-sm">Tidak ada data.</div>
                        @endforelse
                    </div>

                    @if($roomBookingHistory->hasPages())
                    <div class="px-6 py-4 border-t border-gray-200">
                        {{ $roomBookingHistory->links() }}
                    </div>
                    @endif
                </div>
                @endif

                @if($reportType == 'department' && isset($departmentStats))
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                        <h3 class="font-bold text-gray-800">Statistik Per Divisi</h3>
                    </div>

                    <div class="hidden md:block report-table-wrap">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase">Divisi</th>
                                    <th class="px-6 py-3 text-center text-xs font-bold text-gray-500 uppercase">Total</th>
                                    <th class="px-6 py-3 text-center text-xs font-bold text-green-600 uppercase">Disetujui</th>
                                    <th class="px-6 py-3 text-center text-xs font-bold text-red-600 uppercase">Ditolak</th>
                                    <th class="px-6 py-3 text-center text-xs font-bold text-yellow-600 uppercase">Pending</th>
                                    <th class="px-6 py-3 text-center text-xs font-bold text-gray-500 uppercase">Rate</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100 bg-white">
                                @forelse($departmentStats as $dept)
                                <tr class="hover:bg-gray-50">
                                    <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900">{{ $dept['department'] }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-center text-gray-700 font-bold">{{ $dept['totalRequests'] }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-center text-green-600 bg-green-50/50">{{ $dept['approved'] }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-center text-red-600 bg-red-50/50">{{ $dept['rejected'] }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-center text-yellow-600 bg-yellow-50/50">{{ $dept['pending'] }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-center font-bold text-blue-600">{{ number_format($dept['approvalRate'], 1) }}%</td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="6" class="text-center py-10 text-gray-500">Tidak ada data.</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <div class="md:hidden grid grid-cols-1 sm:grid-cols-2 gap-4 p-4">
                        @forelse($departmentStats as $dept)
                        <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
                            <h4 class="font-bold text-gray-900 text-lg mb-3 border-b border-gray-100 pb-2">{{ $dept['department'] }}</h4>
                            <div class="grid grid-cols-2 gap-4 text-center">
                                <div>
                                    <div class="text-xs text-gray-500 uppercase font-bold">Total</div>
                                    <div class="text-xl font-bold text-gray-800">{{ $dept['totalRequests'] }}</div>
                                </div>
                                <div>
                                    <div class="text-xs text-gray-500 uppercase font-bold">Rate</div>
                                    <div class="text-xl font-bold text-blue-600">{{ number_format($dept['approvalRate'], 1) }}%</div>
                                </div>
                            </div>
                            <div class="mt-4 grid grid-cols-3 gap-2 text-center text-xs">
                                <div class="bg-green-50 p-2 rounded text-green-700 font-bold">
                                    {{ $dept['approved'] }}<br><span class="font-normal text-[10px]">OK</span>
                                </div>
                                <div class="bg-red-50 p-2 rounded text-red-700 font-bold">
                                    {{ $dept['rejected'] }}<br><span class="font-normal text-[10px]">NOK</span>
                                </div>
                                <div class="bg-yellow-50 p-2 rounded text-yellow-700 font-bold">
                                    {{ $dept['pending'] }}<br><span class="font-normal text-[10px]">WAIT</span>
                                </div>
                            </div>
                        </div>
                        @empty
                        <div class="col-span-full text-center text-gray-500 py-6">Tidak ada data.</div>
                        @endforelse
                    </div>
                </div>
                @endif

                @if($reportType == 'category')
                @if(isset($categoryStats))
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-6">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                        <h3 class="font-bold text-gray-800">Analisis Peminjaman Barang</h3>
                    </div>
                    <div class="report-table-wrap">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase">Nama Barang</th>
                                    <th class="px-6 py-3 text-center text-xs font-bold text-gray-500 uppercase">Total Stok</th>
                                    <th class="px-6 py-3 text-center text-xs font-bold text-blue-600 uppercase">Dipinjam</th>
                                    <th class="px-6 py-3 text-center text-xs font-bold text-green-600 uppercase">Tersedia</th>
                                    <th class="px-6 py-3 text-center text-xs font-bold text-gray-500 uppercase">Utilisasi</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                @forelse($categoryStats as $cat)
                                <tr class="hover:bg-gray-50">
                                    <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900">{{ $cat['category'] }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-center text-gray-700">{{ $cat['total'] }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-center text-blue-600 font-bold bg-blue-50/50">{{ $cat['borrowed'] }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-center text-green-600 font-bold bg-green-50/50">{{ $cat['available'] }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-center font-medium">
                                        {{ number_format($cat['utilizationRate'], 1) }}%
                                        @if($cat['utilizationRate'] > 60)
                                        <span class="ml-2 px-2 py-0.5 text-[10px] rounded-full bg-red-100 text-red-800 font-bold">TINGGI</span>
                                        @endif
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="5" class="text-center py-10 text-gray-500">Tidak ada data.</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
                @endif

                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                        <h3 class="font-bold text-gray-800">Analisis Penggunaan Ruangan</h3>
                    </div>
                    <div class="report-table-wrap">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase">Nama Ruangan</th>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase">Tipe</th>
                                    <th class="px-6 py-3 text-center text-xs font-bold text-gray-500 uppercase">Kapasitas</th>
                                    <th class="px-6 py-3 text-center text-xs font-bold text-blue-600 uppercase">Total Booking</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                @forelse($roomCategoryStats ?? [] as $roomStat)
                                <tr class="hover:bg-gray-50">
                                    <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900">{{ $roomStat['name'] }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-gray-500">{{ $roomStat['type'] }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-center">{{ $roomStat['capacity'] }} Org</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-center">
                                        <span class="inline-flex px-3 py-1 text-xs font-bold rounded-full bg-blue-100 text-blue-800">
                                            {{ $roomStat['booking_count'] }} kali
                                        </span>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="4" class="text-center py-10 text-gray-500">Tidak ada data ruangan.</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
                @endif

                @if ($reportType === 'vehicle' && isset($vehicleBookingHistory))
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 bg-gray-50">
                        <h3 class="font-bold text-gray-800">Riwayat Penggunaan Kendaraan</h3>
                        <div class="flex flex-wrap gap-2">
                            <a href="{{ route('reports.export.excel', request()->query()) }}" class="inline-flex items-center px-3 py-1.5 text-xs font-semibold rounded bg-emerald-600 text-white hover:bg-emerald-700">
                                Export Excel
                            </a>
                            <a href="{{ route('reports.export.pdf', request()->query()) }}" class="inline-flex items-center px-3 py-1.5 text-xs font-semibold rounded bg-red-600 text-white hover:bg-red-700">
                                Export PDF
                            </a>
                        </div>
                    </div>

                    <div class="hidden md:block report-table-wrap">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500">Kendaraan</th>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500">Peminjam</th>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500">Keperluan</th>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500">Tujuan</th>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500">Mulai</th>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500">Selesai</th>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500">Status</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100 bg-white">
                                @forelse ($vehicleBookingHistory as $booking)
                                <tr class="hover:bg-gray-50">
                                    <td class="px-6 py-4 font-medium">{{ $booking->vehicle->name ?? '-' }}</td>
                                    <td class="px-6 py-4">
                                        <div class="font-semibold">{{ $booking->user->name ?? '-' }}</div>
                                        <div class="text-xs text-gray-500">{{ $booking->user->divisi->nama ?? '-' }}</div>
                                    </td>
                                    <td class="px-6 py-4">{{ $booking->purpose }}</td>
                                    <td class="px-6 py-4">{{ $booking->destination }}</td>
                                    <td class="px-6 py-4">{{ $booking->start_time->format('d/m/Y H:i') }}</td>
                                    <td class="px-6 py-4">{{ $booking->end_time->format('d/m/Y H:i') }}</td>
                                    <td class="px-6 py-4">
                                        <span class="px-2 py-1 rounded-full text-xs font-bold {{ getStatusBadgeClass($booking->status) }}">
                                            {{ ucfirst(str_replace('_',' ',$booking->status)) }}
                                        </span>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="7" class="py-10 text-center text-gray-500">
                                        Tidak ada data penggunaan kendaraan
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <div class="md:hidden divide-y">
                        @foreach ($vehicleBookingHistory as $booking)
                        <div class="p-4">
                            <div class="font-bold">{{ $booking->vehicle->name ?? '-' }}</div>
                            <div class="text-xs text-gray-500">{{ $booking->user->name ?? '-' }}</div>
                        </div>
                        @endforeach
                    </div>

                    @if ($vehicleBookingHistory->hasPages())
                    <div class="px-6 py-4 border-t">
                        {{ $vehicleBookingHistory->links() }}
                    </div>
                    @endif
                </div>
                @endif

                @if($reportType == 'item_request' && isset($itemRequestHistory))
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="px-6 py-4 border-b border-gray-200 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 bg-gray-50">
                        <h3 class="font-bold text-gray-800">Histori Permintaan Barang</h3>
                        <div class="flex flex-wrap gap-2">
                            <a href="{{ route('reports.export.excel', request()->query()) }}" class="inline-flex items-center px-3 py-1.5 text-xs font-semibold rounded bg-emerald-600 text-white hover:bg-emerald-700">
                                Export Excel
                            </a>
                            <a href="{{ route('reports.export.pdf', request()->query()) }}" class="inline-flex items-center px-3 py-1.5 text-xs font-semibold rounded bg-red-600 text-white hover:bg-red-700">
                                Export PDF
                            </a>
                        </div>
                    </div>

                    <div class="hidden md:block report-table-wrap">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase">Nama Barang</th>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase">Peminta</th>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase">Divisi</th>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase">Jumlah</th>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase">Tgl Pengajuan</th>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase">Target Realisasi</th>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase">Keperluan</th>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase">Catatan Admin</th>
                                    <th class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase">Status</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100 bg-white">
                                @forelse($itemRequestHistory as $req)
                                <tr class="hover:bg-gray-50 transition-colors">
                                    <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900">{{ $req->item_name_snapshot }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm font-semibold text-gray-900">{{ $req->user->name ?? 'N/A' }}</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ $req->user->divisi->nama ?? '-' }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
                                        {{ rtrim(rtrim(number_format($req->quantity, 2, '.', ''), '0'), '.') }} {{ $req->unit_snapshot }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
                                        {{ $req->request_date ? \Carbon\Carbon::parse($req->request_date)->format('d/m/Y') : '-' }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
                                        {{ $req->realization_date ? \Carbon\Carbon::parse($req->realization_date)->format('d/m/Y') : '-' }}
                                    </td>
                                    <td class="px-6 py-4 text-sm text-gray-600 max-w-xs">
                                        <div class="truncate" title="{{ $req->purpose }}">{{ $req->purpose ?? '-' }}</div>
                                    </td>
                                    <td class="px-6 py-4 text-sm text-gray-600 max-w-xs">
                                        <div class="truncate" title="{{ $req->admin_note }}">{{ $req->admin_note ?? '-' }}</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="inline-flex px-2.5 py-0.5 rounded-full text-xs font-bold border {{ getStatusBadgeClass($req->status) }}">
                                            {{ $req->status_label }}
                                        </span>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="9" class="text-center py-10 text-gray-500">Tidak ada data histori permintaan.</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <div class="md:hidden divide-y divide-gray-100">
                        @forelse($itemRequestHistory as $req)
                        <div class="p-4 bg-white flex flex-col gap-3">
                            <div class="flex justify-between items-start gap-3">
                                <div>
                                    <h4 class="font-bold text-gray-900 text-sm">{{ $req->item_name_snapshot }}</h4>
                                    <p class="text-xs text-gray-500 mt-0.5">{{ $req->user->name ?? 'N/A' }}</p>
                                    <p class="text-[11px] text-gray-400 mt-1">{{ $req->user->divisi->nama ?? '-' }}</p>
                                </div>
                                <span class="bg-gray-100 text-gray-700 text-xs font-bold px-2 py-0.5 rounded border border-gray-200">
                                    {{ rtrim(rtrim(number_format($req->quantity, 2, '.', ''), '0'), '.') }} {{ $req->unit_snapshot }}
                                </span>
                            </div>

                            <div class="grid grid-cols-2 gap-2 text-xs text-gray-600">
                                <div class="bg-gray-50 p-2 rounded">
                                    <span class="block text-gray-400 text-[10px] uppercase">Pengajuan</span>
                                    {{ $req->request_date ? \Carbon\Carbon::parse($req->request_date)->format('d M Y') : '-' }}
                                </div>
                                <div class="bg-gray-50 p-2 rounded">
                                    <span class="block text-gray-400 text-[10px] uppercase">Target</span>
                                    {{ $req->realization_date ? \Carbon\Carbon::parse($req->realization_date)->format('d M Y') : '-' }}
                                </div>
                            </div>

                            <div class="bg-gray-50 p-2 rounded text-xs text-gray-600">
                                <span class="block text-gray-400 text-[10px] uppercase mb-1">Keperluan</span>
                                {{ $req->purpose ?? '-' }}
                            </div>

                            <div class="bg-gray-50 p-2 rounded text-xs text-gray-600">
                                <span class="block text-gray-400 text-[10px] uppercase mb-1">Catatan Admin</span>
                                {{ $req->admin_note ?? '-' }}
                            </div>

                            <div class="flex justify-between items-center pt-1">
                                <span class="text-xs text-gray-400">Status</span>
                                <span class="inline-flex px-2.5 py-0.5 rounded-full text-[10px] font-bold border {{ getStatusBadgeClass($req->status) }}">
                                    {{ $req->status_label }}
                                </span>
                            </div>
                        </div>
                        @empty
                        <div class="p-8 text-center text-gray-500 text-sm">Tidak ada data histori permintaan.</div>
                        @endforelse
                    </div>

                    @if($itemRequestHistory->hasPages())
                    <div class="px-6 py-4 border-t border-gray-200">
                        {{ $itemRequestHistory->links() }}
                    </div>
                    @endif
                </div>
                @endif

            </div>
        </main>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const filterForm = document.getElementById('filterForm');
            const autoSubmitElements = [
                document.getElementById('divisi_id'),
                document.getElementById('status'),
                document.getElementById('date_from'),
                document.getElementById('date_to')
            ];

            function submitForm() {
                filterForm.submit();
            }

            autoSubmitElements.forEach(element => {
                if (element) {
                    element.addEventListener('change', submitForm);
                }
            });
        });
    </script>
    @include('partials.custom-calendar')
</body>

</html>
