<!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>

    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lucide/0.383.0/lucide.min.css" />

    <style>
        :root {
            --bg: #f8fafc;
            --panel: #ffffff;
            --muted: #6b7280;
            --accent: #0b5ed7;
            --card-border: #e2e8f0;
            --font-main: 'Inter', system-ui, -apple-system, sans-serif;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: var(--font-main);
            background: var(--bg);
            color: #111827;
            -webkit-font-smoothing: antialiased;
        }

        .app {
            display: flex;
            min-height: 100vh;
        }

        .content {
            flex: 1;
            padding: 32px;
            width: 100%;
            transition: all 0.3s ease;
        }

        .icon {
            width: 1.25rem;
            height: 1.25rem;
        }

        .icon-lg {
            width: 2rem;
            height: 2rem;
        }

        @media (max-width: 1024px) {
            .app {
                display: block;
            }

            .content {
                padding: 20px;
                padding-top: 80px;
            }
        }

        @media (max-width: 640px) {
            .content {
                padding: 16px;
                padding-top: 80px;
            }

            .no-scrollbar::-webkit-scrollbar {
                display: none;
            }

            .no-scrollbar {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
        }
    </style>
</head>

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

        <main class="content">
            <div class="max-w-7xl mx-auto space-y-8">

                <div>
                    <h1 class="text-2xl md:text-3xl font-bold text-gray-900 tracking-tight">Laporan & Analitik</h1>
                    <p class="text-sm text-gray-500 mt-1">Pantau kinerja inventaris dan aktivitas peminjaman secara real-time.</p>
                </div>

                <div class="flex overflow-x-auto pb-2 gap-2 no-scrollbar -mx-4 px-4 md:mx-0 md:px-0">
                    <a href="{{ request()->fullUrlWithQuery(['report_type' => 'borrowing']) }}"
                        class="inline-flex items-center px-4 py-2.5 rounded-lg text-sm font-medium whitespace-nowrap border transition-colors
                       {{ $reportType == 'borrowing' ? 'bg-blue-600 text-white border-blue-600 shadow-sm' : 'bg-white text-gray-600 border-gray-200 hover:bg-gray-50' }}">
                        <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="inline-flex items-center px-4 py-2.5 rounded-lg text-sm font-medium whitespace-nowrap border transition-colors
                       {{ $reportType == 'room' ? 'bg-blue-600 text-white border-blue-600 shadow-sm' : 'bg-white text-gray-600 border-gray-200 hover:bg-gray-50' }}">
                        <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="inline-flex items-center px-4 py-2.5 rounded-lg text-sm font-medium whitespace-nowrap border transition-colors
                       {{ $reportType == 'vehicle' ? 'bg-blue-600 text-white border-blue-600 shadow-sm' : 'bg-white text-gray-600 border-gray-200 hover:bg-gray-50' }}">
                        <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="inline-flex items-center px-4 py-2.5 rounded-lg text-sm font-medium whitespace-nowrap border transition-colors
                       {{ $reportType == 'department' ? 'bg-blue-600 text-white border-blue-600 shadow-sm' : 'bg-white text-gray-600 border-gray-200 hover:bg-gray-50' }}">
                        <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="inline-flex items-center px-4 py-2.5 rounded-lg text-sm font-medium whitespace-nowrap border transition-colors
                       {{ $reportType == 'category' ? 'bg-blue-600 text-white border-blue-600 shadow-sm' : 'bg-white text-gray-600 border-gray-200 hover:bg-gray-50' }}">
                        <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="inline-flex items-center px-4 py-2.5 rounded-lg text-sm font-medium whitespace-nowrap border transition-colors
                       {{ $reportType == 'item_request' ? 'bg-blue-600 text-white border-blue-600 shadow-sm' : 'bg-white text-gray-600 border-gray-200 hover:bg-gray-50' }}">
                        <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="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                    @php
                    $summaryCards = [
                    ['title' => 'Total Permintaan', 'value' => $stats['total'], 'color' => 'blue', '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', 'icon' => 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'],
                    ['title' => 'Menunggu', 'value' => $stats['pending'], 'color' => 'yellow', 'icon' => 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z'],
                    ['title' => 'Ditolak', 'value' => $stats['rejected'], 'color' => 'red', '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="bg-white rounded-xl shadow-sm p-5 border border-gray-200 flex justify-between items-center">
                        <div>
                            <p class="text-sm font-medium text-gray-500">{{ $card['title'] }}</p>
                            <p class="text-2xl font-bold text-gray-900 mt-1">{{ number_format($card['value']) }}</p>
                        </div>
                        <div class="p-3 bg-{{ $card['color'] }}-50 rounded-lg">
                            <svg class="w-6 h-6 text-{{ $card['color'] }}-600" 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>
                    @endforeach
                </div>

                <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
                    <h3 class="flex items-center gap-2 font-bold text-gray-800 mb-5 text-sm uppercase tracking-wide">
                        <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>
                        Filter Laporan
                    </h3>
                    <form id="filterForm" action="{{ route('reports.index') }}" method="GET">
                        <input type="hidden" name="report_type" value="{{ $reportType }}">
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
                            <div class="space-y-1.5">
                                <label for="date_from" class="text-xs font-semibold text-gray-500 uppercase">Dari Tanggal</label>
                                <input type="date" name="date_from" id="date_from" value="{{ $dateFrom }}" class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
                            </div>
                            <div class="space-y-1.5">
                                <label for="date_to" class="text-xs font-semibold text-gray-500 uppercase">Sampai Tanggal</label>
                                <input type="date" name="date_to" id="date_to" value="{{ $dateTo }}" class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm">
                            </div>
                            <div class="space-y-1.5">
                                <label for="divisi_id" class="text-xs font-semibold text-gray-500 uppercase">Divisi</label>
                                <select name="divisi_id" id="divisi_id" class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm bg-white">
                                    <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="space-y-1.5">
                                <label for="status" class="text-xs font-semibold text-gray-500 uppercase">Status</label>
                                <select name="status" id="status" class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm bg-white">
                                    @foreach($statuses as $status)
                                    <option value="{{ $status }}" @selected($selectedStatus==$status)>{{ ucfirst(str_replace('_', ' ', $status)) }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </form>
                </div>

                @php
                if (!function_exists('getStatusBadgeClass')) {
                function getStatusBadgeClass($status) {
                return match($status) {
                'pending' => 'bg-yellow-100 text-yellow-800 border-yellow-200',
                'staff_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 overflow-x-auto">
                        <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 overflow-x-auto">
                        <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">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">{{ \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="6" 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">
                                    <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 overflow-x-auto">
                        <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="overflow-x-auto">
                        <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="overflow-x-auto">
                        <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 overflow-x-auto">
                        <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 overflow-x-auto">
                        <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>
</body>

</html>
