<!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">
    <title>Riwayat Selesai - <?php echo e(config('app.name')); ?></title>
    <link rel="icon" type="image/svg+xml" href="<?php echo e(asset('favicon.svg')); ?>">

    <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;900&display=swap" rel="stylesheet">

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

        * { box-sizing: border-box; }

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

        .app { display: flex; min-height: 100vh; }
        .content { flex: 1; width: 100%; padding: 28px; }
        .shell { max-width: 1480px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }

        .surface {
            background: var(--panel);
            border: 1px solid rgba(255, 255, 255, 0.82);
            box-shadow: var(--shadow-soft);
            backdrop-filter: blur(16px);
        }

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

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

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

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

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

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

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

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

        .summary-card.indigo::after { background: #ede9fe; }
        .summary-card.emerald::after { background: #dcfce7; }
        .summary-card.sky::after { background: #e0f2fe; }
        .summary-card.amber::after { background: #fff4df; }

        .summary-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
        }

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

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

        .summary-card.indigo .summary-value { color: #4f46e5; }
        .summary-card.emerald .summary-value { color: #16a34a; }
        .summary-card.sky .summary-value { color: #0284c7; }
        .summary-card.amber .summary-value { color: #f59e0b; }

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

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

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

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

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

        .filter-form {
            display: grid;
            grid-template-columns: minmax(170px, 1fr) minmax(210px, 1fr) minmax(240px, 1.35fr) auto;
            gap: 10px;
            width: min(840px, 100%);
        }

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

        .filter-btn {
            min-height: 44px;
            padding: 0 16px;
            border-radius: 16px;
            color: #fff;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            font-size: 13px;
            font-weight: 900;
            box-shadow: 0 14px 24px rgba(79, 70, 229, 0.20);
        }

        .category-strip {
            padding: 18px 24px 0;
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 12px;
        }

        .category-chip {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 13px 14px;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.82);
            border: 1px solid rgba(219, 230, 247, 0.95);
            color: #334155;
            font-size: 12px;
            font-weight: 900;
        }

        .category-chip.active {
            color: #fff;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border-color: transparent;
            box-shadow: 0 14px 24px rgba(79, 70, 229, 0.20);
        }

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

        .history-item {
            overflow: hidden;
            border-radius: 28px;
            background: linear-gradient(180deg, rgba(248, 251, 255, 0.96), rgba(255, 255, 255, 0.98));
            border: 1px solid rgba(219, 230, 247, 0.95);
            box-shadow: 0 14px 26px rgba(148, 163, 184, 0.10);
            transition: all 0.2s ease;
        }

        .history-item:hover {
            transform: translateY(-2px);
            border-color: rgba(79, 70, 229, 0.28);
            box-shadow: 0 22px 34px rgba(59, 84, 145, 0.14);
        }

        .image-box {
            position: relative;
            height: 182px;
            overflow: hidden;
            background:
                radial-gradient(circle at top left, rgba(79, 70, 229, 0.12), transparent 30%),
                linear-gradient(180deg, #f8fbff, #eef4ff);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #94a3b8;
        }

        .image-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .type-badge,
        .status-pill {
            position: absolute;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 8px 11px;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 900;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            white-space: nowrap;
            border: 1px solid transparent;
            box-shadow: 0 12px 22px rgba(15, 23, 42, 0.12);
        }

        .type-badge {
            top: 14px;
            left: 14px;
            color: #233876;
            background: rgba(255, 255, 255, 0.92);
            border-color: rgba(219, 230, 247, 0.95);
        }

        .status-pill {
            top: 14px;
            right: 14px;
        }

        .status-pill.completed { color: #047857; background: #ecfdf5; border-color: #a7f3d0; }
        .status-pill.rejected { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
        .status-pill.cancelled { color: #475569; background: #f8fafc; border-color: #e2e8f0; }

        .history-body { padding: 16px; }

        .history-title {
            margin: 0;
            color: #0f172a;
            font-size: 17px;
            font-weight: 900;
            line-height: 1.25;
        }

        .history-subtitle {
            margin-top: 5px;
            color: #64748b;
            font-size: 12px;
            font-weight: 800;
            line-height: 1.45;
        }

        .history-desc {
            min-height: 42px;
            margin: 12px 0 0;
            color: #64748b;
            font-size: 13px;
            line-height: 1.6;
        }

        .owner-row {
            margin-top: 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px;
            border-radius: 18px;
            background: rgba(238, 242, 255, 0.72);
            border: 1px solid rgba(219, 230, 247, 0.95);
        }

        .owner-avatar {
            width: 36px;
            height: 36px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 13px;
            font-weight: 900;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            flex: 0 0 auto;
        }

        .owner-name {
            color: #172554;
            font-size: 13px;
            font-weight: 900;
            line-height: 1.25;
        }

        .owner-divisi {
            margin-top: 2px;
            color: #64748b;
            font-size: 11px;
            font-weight: 800;
        }

        .info-grid {
            margin-top: 14px;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        .info-box {
            border-radius: 18px;
            padding: 11px 12px;
            background: rgba(248, 250, 252, 0.9);
            border: 1px solid rgba(226, 232, 240, 0.9);
        }

        .info-label {
            color: #64748b;
            font-size: 10px;
            font-weight: 900;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        .info-value {
            margin-top: 5px;
            color: #172554;
            font-size: 12px;
            font-weight: 900;
            line-height: 1.35;
        }

        .empty-state {
            min-height: 320px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;
            color: #64748b;
            text-align: center;
            padding: 36px;
        }

        .empty-icon {
            width: 76px;
            height: 76px;
            border-radius: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #4f46e5;
            background: #eef2ff;
            border: 1px solid #dbeafe;
        }

        .pagination-wrap { padding: 0 22px 22px; }

        @media (max-width: 1180px) {
            .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .filter-btn { grid-column: 1 / -1; }
            .category-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
            .history-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .panel-head { flex-direction: column; }
        }

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

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

<body>
    <div class="app">
        <?php echo $__env->make('partials.sidebar', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

        <main class="content">
            <div class="shell">
                <section class="hero-card surface">
                    <div class="relative z-10">
                        <span class="pill">
                            <i data-lucide="archive-restore" class="w-4 h-4"></i>
                            Riwayat Selesai
                        </span>
                        <h1 class="hero-title">Arsip Aktivitas Final</h1>
                        <p class="hero-text">
                            <?php if($isPrivileged): ?>
                                Pantau arsip akhir seluruh user secara terstruktur: peminjaman barang, permintaan barang, ruangan, dan kendaraan.
                            <?php else: ?>
                                Pantau arsip akhir milik akun Anda saja. Data yang masih pending tetap berada di halaman proses aktif masing-masing.
                            <?php endif; ?>
                        </p>

                        <div class="summary-grid">
                            <div class="summary-card indigo">
                                <div class="summary-top">
                                    <div class="summary-label">Total Arsip</div>
                                    <i data-lucide="files" class="w-5 h-5 text-indigo-600"></i>
                                </div>
                                <div class="summary-value"><?php echo e($summary['total']); ?></div>
                                <div class="summary-sub">Semua riwayat final sesuai akses.</div>
                            </div>

                            <div class="summary-card emerald">
                                <div class="summary-top">
                                    <div class="summary-label">Barang</div>
                                    <i data-lucide="package-check" class="w-5 h-5 text-emerald-600"></i>
                                </div>
                                <div class="summary-value"><?php echo e($summary['borrows'] + $summary['item_requests']); ?></div>
                                <div class="summary-sub">Pinjaman dan permintaan barang.</div>
                            </div>

                            <div class="summary-card sky">
                                <div class="summary-top">
                                    <div class="summary-label">Ruangan</div>
                                    <i data-lucide="door-open" class="w-5 h-5 text-sky-600"></i>
                                </div>
                                <div class="summary-value"><?php echo e($summary['rooms']); ?></div>
                                <div class="summary-sub">Booking ruangan yang sudah final.</div>
                            </div>

                            <div class="summary-card amber">
                                <div class="summary-top">
                                    <div class="summary-label">Kendaraan</div>
                                    <i data-lucide="car-front" class="w-5 h-5 text-amber-500"></i>
                                </div>
                                <div class="summary-value"><?php echo e($summary['vehicles']); ?></div>
                                <div class="summary-sub">Booking kendaraan yang sudah final.</div>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="history-panel surface">
                    <div class="panel-head">
                        <div>
                            <h2 class="panel-title">Daftar Riwayat Terstruktur</h2>
                            <p class="panel-subtitle">Pending tidak tampil di sini. Gunakan filter untuk memisahkan pinjam barang, permintaan barang, ruangan, dan kendaraan.</p>
                        </div>

                        <form action="<?php echo e(route($routeName)); ?>" method="GET" class="filter-form">
                            <?php if($selectedType !== 'all'): ?>
                                <input type="hidden" name="type" value="<?php echo e($selectedType); ?>">
                            <?php endif; ?>

                            <select name="status" class="filter-select">
                                <?php $__currentLoopData = $statusLabels; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $value => $label): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <option value="<?php echo e($value); ?>" <?php if($selectedStatus === $value): echo 'selected'; endif; ?>><?php echo e($label); ?></option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </select>

                            <?php if($isPrivileged): ?>
                                <select name="owner" class="filter-select">
                                    <option value="all" <?php if($selectedOwner === 'all'): echo 'selected'; endif; ?>>Semua User</option>
                                    <option value="mine" <?php if($selectedOwner === 'mine'): echo 'selected'; endif; ?>>Punya Saya</option>
                                    <?php $__currentLoopData = $users; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $filterUser): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <option value="user:<?php echo e($filterUser->id); ?>" <?php if($selectedOwner === 'user:' . $filterUser->id): echo 'selected'; endif; ?>>
                                            <?php echo e($filterUser->name); ?> - <?php echo e($filterUser->email); ?>

                                        </option>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </select>
                            <?php endif; ?>

                            <input type="search" name="q" value="<?php echo e($search); ?>" class="filter-input" placeholder="Cari nama barang, user, ruangan...">

                            <button type="submit" class="filter-btn">
                                <i data-lucide="search" class="w-4 h-4 inline-block mr-1"></i>
                                Filter
                            </button>
                        </form>
                    </div>

                    <div class="category-strip">
                        <?php
                            $categoryCounts = [
                                'all' => $categorySummary['total'],
                                'borrow' => $categorySummary['borrows'],
                                'item_request' => $categorySummary['item_requests'],
                                'room' => $categorySummary['rooms'],
                                'vehicle' => $categorySummary['vehicles'],
                            ];
                        ?>

                        <?php $__currentLoopData = $typeLabels; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $value => $label): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <a href="<?php echo e(route($routeName, array_filter(['type' => $value === 'all' ? null : $value, 'status' => $selectedStatus === 'all' ? null : $selectedStatus, 'owner' => ($isPrivileged && $selectedOwner !== 'all') ? $selectedOwner : null, 'q' => $search ?: null]))); ?>"
                               class="category-chip <?php echo e($selectedType === $value ? 'active' : ''); ?>">
                                <span><?php echo e($label); ?></span>
                                <span><?php echo e($categoryCounts[$value] ?? 0); ?></span>
                            </a>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>

                    <div class="history-grid">
                        <?php $__empty_1 = true; $__currentLoopData = $historyRecords; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $record): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                            <?php
                                $initials = collect(explode(' ', trim($record['user_name'])))
                                    ->filter()
                                    ->take(2)
                                    ->map(fn ($part) => mb_substr($part, 0, 1))
                                    ->implode('');
                                $initials = $initials ?: 'U';
                            ?>

                            <article class="history-item">
                                <div class="image-box">
                                    <?php if($record['image_url']): ?>
                                        <img src="<?php echo e($record['image_url']); ?>" alt="<?php echo e($record['title']); ?>" onerror="this.remove();">
                                    <?php else: ?>
                                        <i data-lucide="<?php echo e($record['icon']); ?>" class="w-12 h-12"></i>
                                    <?php endif; ?>

                                    <span class="type-badge">
                                        <i data-lucide="<?php echo e($record['icon']); ?>" class="w-3.5 h-3.5"></i>
                                        <?php echo e($record['type_label']); ?>

                                    </span>

                                    <span class="status-pill <?php echo e($record['status_group']); ?>">
                                        <span class="w-2 h-2 rounded-full <?php echo e($record['status_group'] === 'completed' ? 'bg-emerald-500' : ($record['status_group'] === 'rejected' ? 'bg-rose-500' : 'bg-slate-500')); ?>"></span>
                                        <?php echo e($record['status_label']); ?>

                                    </span>
                                </div>

                                <div class="history-body">
                                    <h3 class="history-title"><?php echo e($record['title']); ?></h3>
                                    <div class="history-subtitle"><?php echo e($record['subtitle']); ?></div>
                                    <p class="history-desc"><?php echo e(\Illuminate\Support\Str::limit($record['description'], 110)); ?></p>

                                    <?php if($isPrivileged): ?>
                                        <div class="owner-row">
                                            <div class="owner-avatar"><?php echo e(strtoupper($initials)); ?></div>
                                            <div>
                                                <div class="owner-name"><?php echo e($record['user_name']); ?></div>
                                                <div class="owner-divisi"><?php echo e($record['user_division']); ?></div>
                                            </div>
                                        </div>
                                    <?php endif; ?>

                                    <div class="info-grid">
                                        <div class="info-box">
                                            <div class="info-label"><?php echo e($record['date_label']); ?></div>
                                            <div class="info-value"><?php echo e($record['start_date'] ?: '-'); ?></div>
                                        </div>
                                        <div class="info-box">
                                            <div class="info-label">Selesai</div>
                                            <div class="info-value"><?php echo e($record['end_date'] ?: '-'); ?></div>
                                        </div>
                                        <div class="info-box">
                                            <div class="info-label"><?php echo e($record['primary_meta_label']); ?></div>
                                            <div class="info-value"><?php echo e($record['primary_meta']); ?></div>
                                        </div>
                                        <div class="info-box">
                                            <div class="info-label"><?php echo e($record['secondary_meta_label']); ?></div>
                                            <div class="info-value"><?php echo e($record['secondary_meta']); ?></div>
                                        </div>
                                    </div>
                                </div>
                            </article>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                            <div class="empty-state col-span-full">
                                <div class="empty-icon">
                                    <i data-lucide="archive-x" class="w-9 h-9"></i>
                                </div>
                                <div class="font-black text-slate-800">Belum Ada Riwayat Final</div>
                                <div class="text-sm text-slate-500">Data pending masih berada di halaman proses aktif. Arsip yang selesai nanti muncul otomatis di sini.</div>
                            </div>
                        <?php endif; ?>
                    </div>

                    <?php if($historyRecords->hasPages()): ?>
                        <div class="pagination-wrap">
                            <?php echo e($historyRecords->links()); ?>

                        </div>
                    <?php endif; ?>
                </section>
            </div>
        </main>
    </div>

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

</html>
<?php /**PATH /Users/Afifudin/Downloads/Magang/SIpian_2026-05-06/resources/views/history/index.blade.php ENDPATH**/ ?>