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

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Permintaan Barang</title>

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

    <style>
        body {
            margin: 0;
            font-family: 'Inter', sans-serif;
            background:
                radial-gradient(circle at top left, rgba(37, 99, 235, 0.07), transparent 24%),
                radial-gradient(circle at top right, rgba(15, 23, 42, 0.06), transparent 22%),
                linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
        }

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

        .content {
            flex: 1;
            padding: 32px;
            width: 100%;
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(10px);
        }

        .hero-grid {
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
            background-size: 24px 24px;
        }

        .stat-card {
            position: relative;
            overflow: hidden;
        }

        .stat-card::after {
            content: "";
            position: absolute;
            right: -18px;
            top: -18px;
            width: 90px;
            height: 90px;
            border-radius: 999px;
            opacity: 0.08;
            background: currentColor;
        }

        .row-hover {
            transition: all 0.2s ease;
        }

        .row-hover:hover {
            background: linear-gradient(90deg, rgba(37, 99, 235, 0.03), rgba(37, 99, 235, 0));
        }

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

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

        @media (max-width:640px) {
            .content {
                padding: 16px;
                padding-top: 80px;
            }
        }
    </style>
</head>

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

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

                @php
                $totalRequests = $requests->total();
                $approvedCount = $requests->getCollection()->where('status', 'approved')->count();
                $pendingCount = $requests->getCollection()->where('status', 'pending')->count();
                $cancelledCount = $requests->getCollection()->where('status', 'cancelled')->count();
                @endphp

                {{-- HERO --}}
                <div class="relative overflow-hidden rounded-[28px] p-6 md:p-8 text-white shadow-xl hero-grid"
                    style="background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 42%, #2563eb 100%);">
                    <div class="absolute top-0 right-0 w-72 h-72 bg-white/10 rounded-full blur-3xl -translate-y-16 translate-x-16"></div>
                    <div class="absolute bottom-0 left-0 w-60 h-60 bg-cyan-300/10 rounded-full blur-3xl translate-y-20 -translate-x-10"></div>

                    <div class="relative flex flex-col lg:flex-row lg:items-center lg:justify-between gap-5">
                        <div class="max-w-2xl">
                            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 border border-white/10 text-xs font-semibold tracking-wide uppercase">
                                <i data-lucide="clipboard-list" class="w-3.5 h-3.5"></i>
                                Permintaan Barang
                            </div>

                            <h1 class="text-2xl md:text-4xl font-extrabold mt-4 leading-tight">
                                Kelola Permintaan Barang Operasional
                            </h1>

                            <p class="text-blue-100/90 mt-3 text-sm md:text-base leading-relaxed">
                                @if(auth()->user()->role === 'sekretariat')
                                Pantau seluruh permintaan barang dari staff dan sekretariat, termasuk jumlah, tanggal permintaan, tanggal realisasi, dan status persetujuan.
                                @else
                                Lihat dan pantau permintaan barang yang Anda ajukan untuk kebutuhan operasional kerja.
                                @endif
                            </p>
                        </div>

                        <div class="flex flex-col sm:flex-row gap-3">
                            <a href="{{ route('item-requests.create') }}"
                                class="inline-flex items-center justify-center gap-2 px-5 py-3 bg-white text-blue-700 font-semibold rounded-2xl shadow-lg hover:bg-blue-50 transition">
                                <i data-lucide="plus" class="w-4 h-4"></i>
                                Buat Permintaan
                            </a>

                            <div class="inline-flex items-center justify-center gap-2 px-5 py-3 bg-white/10 border border-white/15 text-white rounded-2xl font-semibold">
                                <i data-lucide="package-check" class="w-4 h-4"></i>
                                {{ $totalRequests }} Data
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ALERT --}}
                @if(session('success'))
                <div class="rounded-2xl border border-green-200 bg-green-50 px-4 py-3 text-green-700 text-sm font-medium shadow-sm">
                    <div class="flex items-center gap-2">
                        <i data-lucide="check-circle-2" class="w-4 h-4"></i>
                        <span>{{ session('success') }}</span>
                    </div>
                </div>
                @endif

                {{-- STATS --}}
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div class="stat-card glass-card rounded-3xl border border-slate-200/80 p-5 shadow-sm text-slate-900">
                        <div class="flex items-start justify-between gap-4">
                            <div>
                                <div class="text-sm text-slate-500 font-medium">Total Permintaan</div>
                                <div class="text-3xl font-extrabold mt-2">{{ $totalRequests }}</div>
                                <div class="text-xs text-slate-400 mt-2">Data pada halaman ini</div>
                            </div>
                            <div class="w-12 h-12 rounded-2xl bg-blue-100 text-blue-700 flex items-center justify-center">
                                <i data-lucide="files" class="w-6 h-6"></i>
                            </div>
                        </div>
                    </div>

                    <div class="stat-card glass-card rounded-3xl border border-slate-200/80 p-5 shadow-sm text-emerald-700">
                        <div class="flex items-start justify-between gap-4">
                            <div>
                                <div class="text-sm text-slate-500 font-medium">Disetujui</div>
                                <div class="text-3xl font-extrabold mt-2">{{ $approvedCount }}</div>
                                <div class="text-xs text-slate-400 mt-2">Baik (sesuai quantity)</div>
                            </div>
                            <div class="w-12 h-12 rounded-2xl bg-emerald-100 text-emerald-700 flex items-center justify-center">
                                <i data-lucide="badge-check" class="w-6 h-6"></i>
                            </div>
                        </div>
                    </div>

                    <div class="stat-card glass-card rounded-3xl border border-slate-200/80 p-5 shadow-sm text-amber-700">
                        <div class="flex items-start justify-between gap-4">
                            <div>
                                <div class="text-sm text-slate-500 font-medium">Menunggu</div>
                                <div class="text-3xl font-extrabold mt-2">{{ $pendingCount }}</div>
                                <div class="text-xs text-slate-400 mt-2">Belum diproses admin</div>
                            </div>
                            <div class="w-12 h-12 rounded-2xl bg-amber-100 text-amber-700 flex items-center justify-center">
                                <i data-lucide="clock-3" class="w-6 h-6"></i>
                            </div>
                        </div>
                    </div>

                    <div class="stat-card glass-card rounded-3xl border border-slate-200/80 p-5 shadow-sm text-rose-700">
                        <div class="flex items-start justify-between gap-4">
                            <div>
                                <div class="text-sm text-slate-500 font-medium">Belum Diterima</div>
                                <div class="text-3xl font-extrabold mt-2">{{ $cancelledCount }}</div>
                                <div class="text-xs text-slate-400 mt-2">Status cancel / belum diterima</div>
                            </div>
                            <div class="w-12 h-12 rounded-2xl bg-rose-100 text-rose-700 flex items-center justify-center">
                                <i data-lucide="x-circle" class="w-6 h-6"></i>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- LIST --}}
                <div class="glass-card rounded-[28px] border border-slate-200/80 shadow-xl overflow-hidden">
                    <div class="px-6 py-5 border-b border-slate-200 bg-gradient-to-r from-white to-slate-50">
                        <h2 class="text-xl font-bold text-slate-900">Daftar Permintaan Barang</h2>
                        <p class="text-sm text-slate-500 mt-1">
                            @if(auth()->user()->role === 'sekretariat')
                            Menampilkan seluruh permintaan barang yang masuk ke sistem.
                            @else
                            Menampilkan riwayat permintaan barang yang Anda ajukan.
                            @endif
                        </p>
                    </div>

                    {{-- DESKTOP --}}
                    <div class="hidden md:block overflow-x-auto">
                        <table class="min-w-full">
                            <thead class="bg-slate-50/90 border-b border-slate-200">
                                <tr>
                                    <th class="px-6 py-4 text-left text-[11px] font-bold uppercase tracking-[0.14em] text-slate-500">Barang</th>
                                    <th class="px-6 py-4 text-left text-[11px] font-bold uppercase tracking-[0.14em] text-slate-500">Peminta</th>
                                    <th class="px-6 py-4 text-left text-[11px] font-bold uppercase tracking-[0.14em] text-slate-500">Jumlah</th>
                                    <th class="px-6 py-4 text-left text-[0.65rem] font-bold uppercase tracking-[0.14em] text-slate-500">Tgl Pengajuan</th>
                                    <th class="px-6 py-4 text-left text-[0.65rem] font-bold uppercase tracking-[0.14em] text-slate-500">Target Realisasi</th>
                                    <th class="px-6 py-4 text-left text-[11px] font-bold uppercase tracking-[0.14em] text-slate-500">Status</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-200 bg-white">
                                @forelse($requests as $request)
                                <tr class="row-hover">
                                    <td class="px-6 py-5">
                                        <div class="flex items-center gap-4 min-w-[320px]">
                                            <img
                                                src="{{ $request->image_url_snapshot ?: 'https://via.placeholder.com/80x80?text=No+Image' }}"
                                                alt="{{ $request->item_name_snapshot }}"
                                                class="w-16 h-16 rounded-2xl object-cover border border-slate-200 bg-slate-50 shadow-sm"
                                                onerror="this.onerror=null;this.src='https://via.placeholder.com/80x80?text=No+Image';">

                                            <div class="min-w-0">
                                                <div class="font-bold text-slate-900 text-[15px] leading-tight">
                                                    {{ $request->item_name_snapshot }}
                                                </div>
                                                <div class="text-sm text-slate-500 mt-1 truncate max-w-lg">
                                                    {{ $request->purpose ?: 'Tidak ada keterangan.' }}
                                                </div>
                                            </div>
                                        </div>
                                    </td>

                                    <td class="px-6 py-5">
                                        <div class="font-semibold text-slate-900">{{ $request->user->name ?? '-' }}</div>
                                        <div class="text-sm text-slate-500">{{ $request->user->divisi->nama ?? '-' }}</div>
                                    </td>

                                    <td class="px-6 py-5">
                                        <div class="inline-flex items-center gap-2">
                                            <span class="w-2 h-2 rounded-full bg-blue-500"></span>
                                            <span class="font-extrabold text-slate-900">
                                                {{ rtrim(rtrim(number_format($request->quantity, 2, '.', ''), '0'), '.') }} {{ $request->unit_snapshot }}
                                            </span>
                                        </div>
                                    </td>

                                    <td class="px-6 py-5 text-slate-700">
                                        {{ optional($request->request_date)->format('d M Y') }}
                                    </td>

                                    <td class="px-6 py-5 text-slate-700">
                                        {{ $request->realization_date ? $request->realization_date->format('d M Y') : '-' }}
                                    </td>

                                    <td class="px-6 py-5">
                                        @if($request->status === 'approved')
                                        <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-700 border border-emerald-200">
                                            <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
                                            Baik (sesuai quantity)
                                        </span>
                                        @elseif($request->status === 'cancelled')
                                        <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold bg-rose-100 text-rose-700 border border-rose-200">
                                            <span class="w-2 h-2 rounded-full bg-rose-500"></span>
                                            Belum diterima
                                        </span>
                                        @else
                                        <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold bg-amber-100 text-amber-700 border border-amber-200">
                                            <span class="w-2 h-2 rounded-full bg-amber-500"></span>
                                            Menunggu verifikasi
                                        </span>
                                        @endif
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="6" class="px-6 py-16 text-center text-slate-500">
                                        <div class="flex flex-col items-center justify-center gap-3">
                                            <div class="w-16 h-16 rounded-full bg-slate-100 flex items-center justify-center">
                                                <i data-lucide="inbox" class="w-8 h-8 text-slate-400"></i>
                                            </div>
                                            <div class="font-semibold text-slate-700">Belum ada permintaan barang</div>
                                            <div class="text-sm text-slate-500">Silakan buat permintaan baru untuk kebutuhan operasional.</div>
                                        </div>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    {{-- MOBILE --}}
                    <div class="md:hidden p-4 space-y-4 bg-slate-50/50">
                        @forelse($requests as $request)
                        <div class="bg-white border border-slate-200 rounded-3xl p-4 shadow-sm">
                            <div class="flex gap-4">
                                <img
                                    src="{{ $request->image_url_snapshot ?: 'https://via.placeholder.com/80x80?text=No+Image' }}"
                                    alt="{{ $request->item_name_snapshot }}"
                                    class="w-20 h-20 rounded-2xl object-cover border border-slate-200 bg-slate-50"
                                    onerror="this.onerror=null;this.src='https://via.placeholder.com/80x80?text=No+Image';">

                                <div class="flex-1 min-w-0">
                                    <div class="font-bold text-slate-900 leading-tight">{{ $request->item_name_snapshot }}</div>
                                    <div class="text-sm text-slate-500 mt-1">{{ $request->purpose ?: 'Tidak ada keterangan.' }}</div>

                                    <div class="flex flex-wrap gap-2 mt-3">
                                        <span class="inline-flex px-3 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-700 border border-blue-200">
                                            {{ rtrim(rtrim(number_format($request->quantity, 2, '.', ''), '0'), '.') }} {{ $request->unit_snapshot }}
                                        </span>
                                        <span class="inline-flex px-3 py-1 rounded-full text-xs font-semibold bg-slate-100 text-slate-700 border border-slate-200">
                                            {{ optional($request->request_date)->format('d M Y') }}
                                        </span>
                                    </div>

                                    <div class="mt-3 text-xs text-slate-500">
                                        <div>Peminta: <span class="font-semibold text-slate-700">{{ $request->user->name ?? '-' }}</span></div>
                                        <div>Target realisasi: <span class="font-semibold text-slate-700">{{ $request->realization_date ? $request->realization_date->format('d M Y') : '-' }}</span></div>
                                    </div>

                                    <div class="mt-4">
                                        @if($request->status === 'approved')
                                        <span class="inline-flex px-3 py-1.5 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-700 border border-emerald-200">
                                            Baik (sesuai quantity)
                                        </span>
                                        @elseif($request->status === 'cancelled')
                                        <span class="inline-flex px-3 py-1.5 rounded-full text-xs font-semibold bg-rose-100 text-rose-700 border border-rose-200">
                                            Belum diterima
                                        </span>
                                        @else
                                        <span class="inline-flex px-3 py-1.5 rounded-full text-xs font-semibold bg-amber-100 text-amber-700 border border-amber-200">
                                            Menunggu verifikasi
                                        </span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        @empty
                        <div class="text-center text-slate-500 py-12 bg-white rounded-3xl border border-slate-200">
                            Belum ada permintaan barang.
                        </div>
                        @endforelse
                    </div>

                    <div class="px-6 py-4 border-t border-slate-200 bg-white">
                        {{ $requests->links() }}
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script>
        lucide.createIcons();
    </script>
</body>

</html>
