<!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>Data Barang Permintaan - {{ config('app.name', 'Laravel') }}</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>
        :root {
            --bg: #f8fafc;
            --panel: #ffffff;
            --muted: #64748b;
            --heading: #0f172a;
            --accent: #2563eb;
            --border: #e2e8f0;
            --font-main: 'Inter', system-ui, sans-serif;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: var(--font-main);
            background:
                radial-gradient(circle at top left, rgba(37, 99, 235, 0.08), transparent 24%),
                radial-gradient(circle at top right, rgba(15, 23, 42, 0.08), transparent 22%),
                linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
            color: #1e293b;
            -webkit-font-smoothing: antialiased;
        }

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

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

        .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;
        }

        .item-image {
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
        }

        .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">

                {{-- 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="package" class="w-3.5 h-3.5"></i>
                                Master Data Barang
                            </div>
                            <h1 class="text-2xl md:text-4xl font-extrabold tracking-tight mt-4 leading-tight">
                                Data Barang Permintaan
                            </h1>
                            <p class="text-sm md:text-base text-blue-100/90 mt-3 leading-relaxed">
                                Kelola daftar barang yang dapat diajukan oleh staff dan sekretariat, lengkap dengan stok,
                                satuan, status aktif, dan visual barang.
                            </p>
                        </div>

                        <div class="flex flex-col sm:flex-row gap-3">
                            <a href="{{ route('admin.request-items.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>
                                Tambah Barang
                            </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="shield-check" class="w-4 h-4"></i>
                                Admin Sekretariat
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ALERT --}}
                @if(session('success'))
                <div class="rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-emerald-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 --}}
                @if($lowStockCount > 0)
                <div class="rounded-3xl border border-rose-200 bg-rose-50 px-5 py-4 shadow-sm">
                    <div class="flex items-start gap-3">
                        <div class="w-10 h-10 rounded-2xl bg-rose-100 text-rose-700 flex items-center justify-center shrink-0">
                            <i data-lucide="triangle-alert" class="w-5 h-5"></i>
                        </div>
                        <div>
                            <div class="text-sm font-bold text-rose-800">Perhatian stok minimum</div>
                            <div class="text-sm text-rose-700 mt-1">
                                Ada {{ $lowStockCount }} barang yang sudah menyentuh batas stok minimum. Sekretariat disarankan segera menambah persediaan agar barang tidak habis.
                            </div>
                        </div>
                    </div>
                </div>
                @endif

                <div class="grid grid-cols-1 md:grid-cols-2 xl: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 Barang</div>
                                <div class="text-3xl font-extrabold mt-2">{{ $totalItemCount }}</div>
                                <div class="text-xs text-slate-400 mt-2">Seluruh data barang permintaan</div>
                            </div>
                            <div class="w-12 h-12 rounded-2xl bg-blue-100 text-blue-700 flex items-center justify-center">
                                <i data-lucide="boxes" 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">Barang Aktif</div>
                                <div class="text-3xl font-extrabold mt-2">{{ $activeItemCount }}</div>
                                <div class="text-xs text-slate-400 mt-2">Dapat diajukan oleh pengguna</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-slate-500">
                        <div class="flex items-start justify-between gap-4">
                            <div>
                                <div class="text-sm text-slate-500 font-medium">Barang Nonaktif</div>
                                <div class="text-3xl font-extrabold mt-2">{{ $inactiveItemCount }}</div>
                                <div class="text-xs text-slate-400 mt-2">Sementara tidak tersedia</div>
                            </div>
                            <div class="w-12 h-12 rounded-2xl bg-slate-200 text-slate-600 flex items-center justify-center">
                                <i data-lucide="archive-x" class="w-6 h-6"></i>
                            </div>
                        </div>
                    </div>

                    <div class="stat-card glass-card rounded-3xl border border-rose-200/80 p-5 shadow-sm text-rose-700">
                        <div class="flex items-start justify-between gap-4">
                            <div>
                                <div class="text-sm text-rose-600 font-medium">Stok Minimum</div>
                                <div class="text-3xl font-extrabold mt-2">{{ $lowStockCount }}</div>
                                <div class="text-xs text-rose-500 mt-2">Perlu perhatian dan pengadaan ulang</div>
                            </div>
                            <div class="w-12 h-12 rounded-2xl bg-rose-100 text-rose-700 flex items-center justify-center">
                                <i data-lucide="siren" class="w-6 h-6"></i>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- TABLE / 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 flex flex-col lg:flex-row gap-4 lg:items-center lg:justify-between bg-gradient-to-r from-white to-slate-50">
                        <div>
                            <h2 class="text-xl font-bold text-slate-900">Daftar Barang</h2>
                            <p class="text-sm text-slate-500 mt-1">
                                Barang yang tersedia untuk diajukan melalui menu permintaan barang.
                            </p>
                        </div>

                        <div class="flex flex-col sm:flex-row gap-3 w-full lg:w-auto">
                            <div class="relative w-full lg:w-80">
                                <i data-lucide="search" class="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2"></i>
                                <input id="searchInput" type="text" placeholder="Cari nama barang atau deskripsi..."
                                    class="w-full pl-10 pr-4 py-3 border border-slate-300 rounded-2xl text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 shadow-sm">
                            </div>
                            <a href="{{ route('admin.request-items.create') }}"
                                class="inline-flex items-center justify-center gap-2 px-4 py-3 rounded-2xl bg-slate-900 text-white font-semibold text-sm hover:bg-slate-800 transition shadow-sm">
                                <i data-lucide="plus" class="w-4 h-4"></i>
                                Tambah
                            </a>
                        </div>
                    </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">Satuan</th>
                                    <th class="px-6 py-4 text-left text-[11px] font-bold uppercase tracking-[0.14em] text-slate-500">Stok</th>
                                    <th class="px-6 py-4 text-left text-[11px] font-bold uppercase tracking-[0.14em] text-slate-500">Status</th>
                                    <th class="px-6 py-4 text-center text-[11px] font-bold uppercase tracking-[0.14em] text-slate-500">Aksi</th>
                                </tr>
                            </thead>
                            <tbody id="desktopTableBody" class="divide-y divide-slate-200/90 bg-white">
                                @forelse($items as $item)
                                <tr class="row-hover item-row {{ $item->is_low_stock ? 'bg-rose-50/70' : '' }}"
                                    data-name="{{ strtolower($item->display_name . ' ' . ($item->description ?? '')) }}">
                                    <td class="px-6 py-5">
                                        <div class="flex items-center gap-4 min-w-[320px]">
                                            <div class="relative">
                                                <img
                                                    src="{{ $item->image_url ?: 'https://via.placeholder.com/80x80?text=No+Image' }}"
                                                    alt="{{ $item->display_name }}"
                                                    class="item-image w-16 h-16 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="absolute -bottom-1 -right-1 w-5 h-5 rounded-full bg-white border border-slate-200 flex items-center justify-center shadow-sm">
                                                    <i data-lucide="image" class="w-3 h-3 text-slate-400"></i>
                                                </div>
                                            </div>

                                            <div class="min-w-0">
                                                <div class="font-bold {{ $item->is_low_stock ? 'text-rose-800' : 'text-slate-900' }} text-[15px] leading-tight">
                                                    {{ $item->display_name }}
                                                </div>
                                                <div class="text-sm {{ $item->is_low_stock ? 'text-rose-600' : 'text-slate-500' }} mt-1 truncate max-w-lg">
                                                    {{ $item->description ?: 'Belum ada deskripsi barang.' }}
                                                </div>
                                                @if($item->is_low_stock)
                                                <div class="mt-2">
                                                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-semibold bg-rose-100 text-rose-700 border border-rose-200">
                                                        <span class="w-2 h-2 rounded-full bg-rose-500"></span>
                                                        Stok minimum tercapai
                                                    </span>
                                                </div>
                                                @endif
                                            </div>
                                        </div>
                                    </td>

                                    <td class="px-6 py-5">
                                        <span class="inline-flex px-3 py-1.5 rounded-full text-xs font-semibold bg-slate-100 text-slate-700 border border-slate-200">
                                            {{ $item->unit }}
                                        </span>
                                    </td>

                                    <td class="px-6 py-5">
                                        <div class="inline-flex items-center gap-2">
                                            <div class="w-2 h-2 rounded-full {{ $item->is_low_stock ? 'bg-rose-500' : 'bg-blue-500' }}"></div>
                                            <span class="font-extrabold {{ $item->is_low_stock ? 'text-rose-700' : 'text-slate-900' }} text-base">
                                                {{ rtrim(rtrim(number_format($item->stock, 2, '.', ''), '0'), '.') }}
                                            </span>
                                        </div>
                                        <div class="text-xs mt-1 {{ $item->is_low_stock ? 'text-rose-600' : 'text-slate-400' }}">
                                            Minimum: {{ rtrim(rtrim(number_format($item->min_stock, 2, '.', ''), '0'), '.') }}
                                        </div>
                                    </td>

                                    <td class="px-6 py-5">
                                        @if($item->is_low_stock)
                                        <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>
                                            Stok Minimum
                                        </span>
                                        @elseif($item->is_active)
                                        <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>
                                            Aktif
                                        </span>
                                        @else
                                        <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-semibold bg-slate-200 text-slate-600 border border-slate-300">
                                            <span class="w-2 h-2 rounded-full bg-slate-500"></span>
                                            Nonaktif
                                        </span>
                                        @endif
                                    </td>

                                    <td class="px-6 py-5">
                                        <div class="flex justify-center gap-2">
                                            <a href="{{ route('admin.request-items.edit', $item->id) }}"
                                                class="inline-flex items-center gap-2 px-3.5 py-2.5 rounded-2xl bg-amber-50 text-amber-700 border border-amber-200 hover:bg-amber-100 text-sm font-semibold transition shadow-sm">
                                                <i data-lucide="pencil" class="w-4 h-4"></i>
                                                Edit
                                            </a>

                                            <form action="{{ route('admin.request-items.destroy', $item->id) }}" method="POST" onsubmit="return confirm('Yakin ingin menghapus barang ini?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit"
                                                    class="inline-flex items-center gap-2 px-3.5 py-2.5 rounded-2xl bg-rose-50 text-rose-700 border border-rose-200 hover:bg-rose-100 text-sm font-semibold transition shadow-sm">
                                                    <i data-lucide="trash-2" class="w-4 h-4"></i>
                                                    Hapus
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="5" 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 data barang</div>
                                            <div class="text-sm text-slate-500">Tambahkan barang baru agar bisa diajukan melalui menu permintaan.</div>
                                        </div>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    {{-- MOBILE --}}
                    <div id="mobileCards" class="md:hidden p-4 space-y-4 bg-slate-50/50">
                        @forelse($items as $item)
                        <div class="bg-white border {{ $item->is_low_stock ? 'border-rose-200 bg-rose-50/40' : 'border-slate-200' }} rounded-3xl p-4 shadow-sm item-card"
                            data-name="{{ strtolower($item->display_name . ' ' . ($item->description ?? '')) }}">
                            <div class="flex gap-4">
                                <img
                                    src="{{ $item->image_url ?: 'https://via.placeholder.com/80x80?text=No+Image' }}"
                                    alt="{{ $item->display_name }}"
                                    class="item-image 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 {{ $item->is_low_stock ? 'text-rose-800' : 'text-slate-900' }} leading-tight">{{ $item->display_name }}</div>
                                    <div class="text-sm {{ $item->is_low_stock ? 'text-rose-600' : 'text-slate-500' }} mt-1">{{ $item->description ?: 'Belum ada deskripsi barang.' }}</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-slate-100 text-slate-700 border border-slate-200">
                                            {{ $item->unit }}
                                        </span>
                                        <span class="inline-flex px-3 py-1 rounded-full text-xs font-semibold {{ $item->is_low_stock ? 'bg-rose-100 text-rose-700 border-rose-200' : 'bg-blue-100 text-blue-700 border-blue-200' }}">
                                            Stok: {{ rtrim(rtrim(number_format($item->stock, 2, '.', ''), '0'), '.') }}
                                        </span>
                                        <span class="inline-flex px-3 py-1 rounded-full text-xs font-semibold bg-slate-100 text-slate-600 border border-slate-200">
                                            Min: {{ rtrim(rtrim(number_format($item->min_stock, 2, '.', ''), '0'), '.') }}
                                        </span>
                                        @if($item->is_low_stock)
                                        <span class="inline-flex px-3 py-1 rounded-full text-xs font-semibold bg-rose-100 text-rose-700 border border-rose-200">
                                            Stok Minimum
                                        </span>
                                        @elseif($item->is_active)
                                        <span class="inline-flex px-3 py-1 rounded-full text-xs font-semibold bg-emerald-100 text-emerald-700 border border-emerald-200">
                                            Aktif
                                        </span>
                                        @else
                                        <span class="inline-flex px-3 py-1 rounded-full text-xs font-semibold bg-slate-200 text-slate-600 border border-slate-300">
                                            Nonaktif
                                        </span>
                                        @endif
                                    </div>

                                    <div class="flex gap-2 mt-4">
                                        <a href="{{ route('admin.request-items.edit', $item->id) }}"
                                            class="flex-1 inline-flex justify-center items-center gap-2 px-3 py-2.5 rounded-2xl bg-amber-50 border border-amber-200 text-amber-700 text-sm font-semibold">
                                            <i data-lucide="pencil" class="w-4 h-4"></i>
                                            Edit
                                        </a>

                                        <form action="{{ route('admin.request-items.destroy', $item->id) }}" method="POST" class="flex-1" onsubmit="return confirm('Yakin ingin menghapus barang ini?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit"
                                                class="w-full inline-flex justify-center items-center gap-2 px-3 py-2.5 rounded-2xl bg-rose-50 border border-rose-200 text-rose-700 text-sm font-semibold">
                                                <i data-lucide="trash-2" class="w-4 h-4"></i>
                                                Hapus
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @empty
                        <div class="text-center text-slate-500 py-12 bg-white rounded-3xl border border-slate-200">
                            Belum ada data barang.
                        </div>
                        @endforelse
                    </div>

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

    <script>
        lucide.createIcons();

        const searchInput = document.getElementById('searchInput');

        if (searchInput) {
            searchInput.addEventListener('input', function() {
                const keyword = this.value.toLowerCase();

                document.querySelectorAll('.item-row').forEach(row => {
                    const name = row.dataset.name || '';
                    row.style.display = name.includes(keyword) ? '' : 'none';
                });

                document.querySelectorAll('.item-card').forEach(card => {
                    const name = card.dataset.name || '';
                    card.style.display = name.includes(keyword) ? '' : 'none';
                });
            });
        }
    </script>
</body>

</html>
