<!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>Verification Workflow - <?php echo e(config('app.name', 'Laravel')); ?></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://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/lucide@latest"></script>

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

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: var(--font-main);
            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%);
            color: var(--text);
            -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; }

        [x-cloak] {
            display: none !important;
        }

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

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

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

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

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

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

        .hero-stat {
            min-width: 150px;
            border-radius: 24px;
            padding: 18px;
            background: rgba(255, 255, 255, 0.82);
            border: 1px solid rgba(214, 226, 247, 0.98);
            box-shadow: var(--shadow-card);
        }

        .verification-list {
            display: grid;
            gap: 18px;
        }

        .verification-card {
            position: relative;
            overflow: hidden;
            border-radius: 30px;
            background:
                radial-gradient(circle at top right, rgba(79, 70, 229, 0.08), transparent 30%),
                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 16px 32px rgba(148, 163, 184, 0.13);
            transition: all 0.2s ease;
        }

        .verification-card:hover {
            transform: translateY(-2px);
            border-color: rgba(79, 70, 229, 0.28);
            box-shadow: 0 24px 38px rgba(59, 84, 145, 0.15);
        }

        .type-bar {
            height: 7px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
        }

        .type-bar.room { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
        .type-bar.vehicle { background: linear-gradient(135deg, #059669, #10b981); }
        .type-bar.return { background: linear-gradient(135deg, #f97316, #f59e0b); }
        .type-bar.item-request { background: linear-gradient(135deg, #0284c7, #38bdf8); }
        .type-bar.borrow { background: linear-gradient(135deg, #2563eb, #4f46e5); }

        .info-tile {
            border-radius: 20px;
            background: rgba(248, 251, 255, 0.94);
            border: 1px solid rgba(219, 230, 247, 0.95);
            padding: 13px 14px;
            min-width: 0;
            overflow: hidden;
        }

        .safe-text {
            min-width: 0;
            max-width: 100%;
            white-space: normal;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        .verification-card .grid > * {
            min-width: 0;
        }

        .clamped-text:not(.is-expanded) {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .expand-text-btn {
            margin-top: 8px;
            color: var(--primary);
            font-size: 12px;
            font-weight: 800;
        }

        .expand-text-btn:hover {
            color: var(--secondary);
        }

        .action-panel {
            border-radius: 26px;
            background: rgba(248, 251, 255, 0.94);
            border: 1px solid rgba(219, 230, 247, 0.95);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
        }

        .notice {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px 18px;
            border-radius: 24px;
            font-size: 14px;
            font-weight: 800;
        }

        .notice.success { color: #047857; background: rgba(236, 253, 245, 0.94); border: 1px solid rgba(167, 243, 208, 0.9); }
        .notice.error { color: #be123c; background: rgba(255, 241, 242, 0.94); border: 1px solid rgba(254, 205, 211, 0.9); }

        .empty-card {
            border-radius: 30px;
            padding: 48px;
            text-align: center;
            background:
                radial-gradient(circle at top right, rgba(99, 102, 241, 0.10), transparent 24%),
                linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(243, 247, 255, 0.96) 100%);
            border: 1px solid rgba(219, 230, 247, 0.95);
            box-shadow: var(--shadow-soft);
        }

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

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

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

            .verification-hero,
            .verification-card,
            .empty-card {
                border-radius: 24px;
            }
        }
    </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" x-data="verificationWorkflow">
            <div class="shell">

                
                <section class="verification-hero surface">
                    <div class="relative z-10 flex flex-col md:flex-row md:items-end md:justify-between gap-6">
                        <div>
                            <span class="pill">
                                <i data-lucide="shield-check" class="w-3.5 h-3.5"></i>
                                Workflow Verifikasi
                            </span>

                            <h1 class="hero-title">Verifikasi Permintaan</h1>
                            <p class="hero-text">
                                Kelola permintaan barang, ruangan, kendaraan, dan pengembalian dengan tampilan yang lebih jelas dan rapi.
                            </p>
                        </div>

                        <div class="grid grid-cols-2 gap-3 w-full md:w-auto">
                            <div class="hero-stat">
                                <div class="text-[11px] uppercase tracking-[0.12em] text-slate-500 font-black">Tugas Aktif</div>
                                <div class="text-3xl font-black mt-2 text-indigo-600"><?php echo e(count($requests)); ?></div>
                                <div class="text-xs text-slate-500 mt-2">Menunggu diproses</div>
                            </div>
                            <div class="hero-stat">
                                <div class="text-[11px] uppercase tracking-[0.12em] text-slate-500 font-black">Role</div>
                                <div class="text-sm md:text-base font-black mt-3 text-slate-900"><?php echo e(ucfirst(str_replace('_', ' ', auth()->user()->role ?? 'user'))); ?></div>
                                <div class="text-xs text-slate-500 mt-2">Akses saat ini</div>
                            </div>
                        </div>
                    </div>
                </section>

                
                <?php if(session('success')): ?>
                <div class="notice success surface">
                    <i data-lucide="check-circle-2" class="w-5 h-5 flex-shrink-0"></i>
                    <span><?php echo e(session('success')); ?></span>
                </div>
                <?php endif; ?>

                <?php if(session('error')): ?>
                <div class="notice error surface">
                    <i data-lucide="alert-circle" class="w-5 h-5 flex-shrink-0"></i>
                    <span><?php echo e(session('error')); ?></span>
                </div>
                <?php endif; ?>

                
                <div class="verification-list">
                    <?php $__empty_1 = true; $__currentLoopData = $requests; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $req): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                    <?php
                    $isRoom = (isset($req->type) && $req->type === 'room') || ($req instanceof \App\Models\RoomBooking);
                    $isVehicle = (isset($req->type) && $req->type === 'vehicle') || ($req instanceof \App\Models\VehicleBooking);
                    $isReturn = (isset($req->type) && $req->type === 'return');
                    $isItemRequest = (isset($req->type) && $req->type === 'item_request');

                    if ($isRoom) {
                    $itemName = $req->room->name ?? 'Ruangan';
                    $date = $req->start_time;
                    $amount = '1 Ruangan';
                    $actionUrl = route('verification.room.action', $req->id);
                    $typeLabel = 'BOOKING RUANGAN';
                    $typeColor = 'indigo';
                    $barClass = 'room';
                    $icon = 'layout-grid';
                    $previewImage = null;
                    } elseif ($isVehicle) {
                    $itemName = ($req->vehicle->name ?? 'Kendaraan') . ' (' . ($req->vehicle->plate_number ?? '-') . ')';
                    $date = $req->start_time;
                    $amount = '1 Kendaraan';
                    $actionUrl = route('verification.vehicle.action', $req->id);
                    $typeLabel = 'PINJAM KENDARAAN';
                    $typeColor = 'emerald';
                    $barClass = 'vehicle';
                    $icon = 'car';
                    $previewImage = null;
                    } elseif ($isReturn) {
                    $itemName = $req->item->nama ?? 'Barang';
                    $date = $req->updated_at;
                    $amount = ($req->jumlah . ' Unit');
                    $actionUrl = route('verification.action', ['borrowRequest' => $req->id, 'type' => 'return']);
                    $typeLabel = 'VERIFIKASI PENGEMBALIAN';
                    $typeColor = 'orange';
                    $barClass = 'return';
                    $icon = 'corner-down-left';
                    $previewImage = null;
                    } elseif ($isItemRequest) {
                    $itemName = $req->item_name_snapshot ?? ($req->item->display_name ?? 'Barang');
                    $date = $req->request_date ?? $req->created_at;
                    $amount = (rtrim(rtrim(number_format($req->quantity, 2, '.', ''), '0'), '.') . ' ' . ($req->unit_snapshot ?? '-'));
                    $actionUrl = route('verification.item-request.action', $req->id);
                    $typeLabel = 'PERMINTAAN BARANG';
                    $typeColor = 'sky';
                    $barClass = 'item-request';
                    $icon = 'clipboard-list';
                    $previewImage = $req->image_url_snapshot ?? ($req->item->image_url ?? null);
                    } else {
                    $itemName = $req->item->nama ?? 'Barang';
                    $date = $req->tanggal_pinjam;
                    $amount = ($req->jumlah . ' Unit');
                    $actionUrl = route('verification.action', ['borrowRequest' => $req->id, 'type' => 'borrow']);
                    $typeLabel = 'PINJAM BARANG';
                    $typeColor = 'blue';
                    $barClass = 'borrow';
                    $icon = 'package';
                    $previewImage = null;
                    }

                    $userName = $req->user->name ?? 'Unknown';
                    $submittedAt = $req->created_at ?? $date;
                    $borrowPurpose = (!$isRoom && !$isVehicle && !$isReturn && !$isItemRequest)
                        ? optional($req->histories->firstWhere('action', 'submitted'))->comment
                        : null;

                    $status = $req->status;
                    $statusColors = [
                    'pending' => 'bg-yellow-100 text-yellow-800 border-yellow-200',
                    'staff_approved' => 'bg-blue-100 text-blue-800 border-blue-200',
                    'sekretariat_approved' => 'bg-cyan-100 text-cyan-800 border-cyan-200',
                    'kepala_approved' => 'bg-purple-100 text-purple-800 border-purple-200',
                    'final_approved' => 'bg-green-100 text-green-800 border-green-200',
                    'approved' => 'bg-green-100 text-green-800 border-green-200',
                    'rejected' => 'bg-red-100 text-red-800 border-red-200',
                    'return_pending' => 'bg-orange-100 text-orange-800 border-orange-200',
                    'returned' => 'bg-gray-100 text-gray-800 border-gray-200',
                    'cancelled' => 'bg-red-100 text-red-800 border-red-200',
                    ];
                    $statusClass = $statusColors[$status] ?? 'bg-gray-100 text-gray-800 border-gray-200';

                    if ($isItemRequest) {
                    if ($status === 'approved') {
                    $statusLabel = 'Baik (sesuai quantity)';
                    } elseif ($status === 'staff_approved') {
                    $statusLabel = 'Menunggu approval kepala';
                    } elseif ($status === 'cancelled') {
                    $statusLabel = 'Belum diterima';
                    } else {
                    $statusLabel = 'Menunggu verifikasi';
                    }
                    } else {
                    $statusLabel = str_replace('_', ' ', ucfirst($status));
                    }

                    $stockAvailable = $isItemRequest ? ($req->item ? rtrim(rtrim(number_format($req->item->stock, 2, '.', ''), '0'), '.') . ' ' . ($req->item->unit ?? $req->unit_snapshot) : '-') : null;
                    ?>

                    <article class="verification-card">
                        <div class="type-bar <?php echo e($barClass); ?>"></div>

                        <div class="p-5 md:p-6">
                            <div class="flex flex-col xl:flex-row gap-5">

                                
                                <div class="flex-1 min-w-0">
                                    <div class="flex flex-col md:flex-row md:items-start gap-4">

                                        <?php if($isItemRequest): ?>
                                        <div class="w-full md:w-[130px] shrink-0">
                                            <div class="rounded-2xl overflow-hidden border border-slate-200 bg-slate-50 shadow-sm">
                                                <img
                                                    src="<?php echo e($previewImage ?: 'https://via.placeholder.com/300x220?text=No+Image'); ?>"
                                                    alt="<?php echo e($itemName); ?>"
                                                    class="w-full h-[120px] object-cover"
                                                    onerror="this.onerror=null;this.src='https://via.placeholder.com/300x220?text=No+Image';">
                                            </div>
                                        </div>
                                        <?php endif; ?>

                                        <div class="flex-1 min-w-0 space-y-4">
                                            <div class="flex flex-wrap items-center gap-2">
                                                <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-<?php echo e($typeColor); ?>-50 text-<?php echo e($typeColor); ?>-700 border border-<?php echo e($typeColor); ?>-100 text-[11px] font-bold tracking-wide uppercase">
                                                    <i data-lucide="<?php echo e($icon); ?>" class="w-3.5 h-3.5"></i>
                                                    <span><?php echo e($typeLabel); ?></span>
                                                </div>

                                                <span class="inline-flex px-3 py-1.5 rounded-full text-xs font-semibold border <?php echo e($statusClass); ?>">
                                                    <?php echo e($statusLabel); ?>

                                                </span>

                                                <span class="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-xs font-black border border-red-200 bg-red-50 text-red-700 shadow-sm">
                                                    <i data-lucide="clock-3" class="w-3.5 h-3.5"></i>
                                                    <span>Masuk <?php echo e($submittedAt ? \Carbon\Carbon::parse($submittedAt)->format('d M Y, H:i') : '-'); ?></span>
                                                </span>
                                            </div>

                                            <div>
                                                <h3 class="safe-text text-lg md:text-xl font-extrabold text-slate-900 leading-tight">
                                                    <?php echo e($itemName); ?>

                                                </h3>
                                                <p class="text-sm text-slate-500 mt-1">
                                                    Diajukan oleh <span class="font-semibold text-slate-700"><?php echo e($userName); ?></span>
                                                </p>
                                            </div>

                                            <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-3">
                                                <?php if($isVehicle): ?>
                                                <div class="info-tile">
                                                    <div class="text-[11px] uppercase tracking-wide text-slate-400 mb-1">Mulai Pinjam</div>
                                                    <div class="safe-text text-sm font-semibold text-slate-700">
                                                        <?php echo e($req->start_time ? \Carbon\Carbon::parse($req->start_time)->format('d M Y, H:i') : '-'); ?>

                                                    </div>
                                                </div>

                                                <div class="info-tile">
                                                    <div class="text-[11px] uppercase tracking-wide text-slate-400 mb-1">Rencana Kembali</div>
                                                    <div class="safe-text text-sm font-semibold text-slate-700">
                                                        <?php echo e($req->end_time ? \Carbon\Carbon::parse($req->end_time)->format('d M Y, H:i') : '-'); ?>

                                                    </div>
                                                </div>
                                                <?php else: ?>
                                                <div class="info-tile">
                                                    <div class="text-[11px] uppercase tracking-wide text-slate-400 mb-1"><?php echo e($isRoom ? 'Jadwal' : ($isItemRequest ? 'Tanggal Pengajuan' : 'Tanggal')); ?></div>
                                                    <div class="safe-text text-sm font-semibold text-slate-700">
                                                        <?php if($isRoom && $req->start_time && $req->end_time): ?>
                                                        <?php echo e(\Carbon\Carbon::parse($req->start_time)->format('d M Y')); ?>,
                                                        <?php echo e(\Carbon\Carbon::parse($req->start_time)->format('H:i')); ?> - <?php echo e(\Carbon\Carbon::parse($req->end_time)->format('H:i')); ?>

                                                        <?php else: ?>
                                                        <?php echo e($date ? \Carbon\Carbon::parse($date)->format($isItemRequest ? 'd M Y' : 'd M Y, H:i') : '-'); ?>

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

                                                <div class="info-tile">
                                                    <div class="text-[11px] uppercase tracking-wide text-slate-400 mb-1">Jumlah</div>
                                                    <div class="safe-text text-sm font-semibold text-slate-700"><?php echo e($amount); ?></div>
                                                </div>

                                                <?php if($isRoom): ?>
                                                <div class="info-tile">
                                                    <div class="text-[11px] uppercase tracking-wide text-slate-400 mb-1">Judul Kegiatan</div>
                                                    <div class="safe-text clamped-text text-sm font-semibold text-slate-700"
                                                        :class="{ 'is-expanded': expandedTexts['room-title-<?php echo e($req->id); ?>'] }">
                                                        <?php echo e($req->title ?? '-'); ?>

                                                    </div>
                                                    <?php if(mb_strlen((string) ($req->title ?? '')) > 45): ?>
                                                    <button type="button" class="expand-text-btn"
                                                        @click="toggleText('room-title-<?php echo e($req->id); ?>')"
                                                        x-text="expandedTexts['room-title-<?php echo e($req->id); ?>'] ? 'Tutup' : 'Lihat semua'"></button>
                                                    <?php endif; ?>
                                                </div>

                                                <div class="info-tile">
                                                    <div class="text-[11px] uppercase tracking-wide text-slate-400 mb-1">Kebutuhan Kursi</div>
                                                    <div class="safe-text text-sm font-semibold text-slate-700"><?php echo e($req->chair_count ? $req->chair_count . ' Kursi' : '-'); ?></div>
                                                </div>
                                                <?php endif; ?>

                                                <?php if($isItemRequest): ?>
                                                <div class="rounded-2xl bg-emerald-50 border border-emerald-100 px-4 py-3">
                                                    <div class="text-[11px] uppercase tracking-wide text-emerald-500 mb-1">Stok Tersedia</div>
                                                    <div class="safe-text text-sm font-semibold text-emerald-700"><?php echo e($stockAvailable); ?></div>
                                                </div>

                                                <div class="rounded-2xl bg-sky-50 border border-sky-100 px-4 py-3">
                                                    <div class="text-[11px] uppercase tracking-wide text-sky-500 mb-1">Target Realisasi</div>
                                                    <div class="safe-text text-sm font-semibold text-sky-700">
                                                        <?php echo e($req->realization_date ? \Carbon\Carbon::parse($req->realization_date)->format('d M Y') : '-'); ?>

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

                                            <?php if($borrowPurpose): ?>
                                            <div class="rounded-2xl bg-blue-50 border border-blue-100 p-4">
                                                <div class="text-[11px] uppercase tracking-wide text-blue-500 mb-1">Tempat / Keperluan</div>
                                                <div class="safe-text clamped-text text-sm text-blue-900 leading-relaxed"
                                                    :class="{ 'is-expanded': expandedTexts['borrow-purpose-<?php echo e($req->id); ?>'] }">
                                                    <?php echo e($borrowPurpose); ?>

                                                </div>
                                                <?php if(mb_strlen((string) $borrowPurpose) > 90): ?>
                                                <button type="button" class="expand-text-btn"
                                                    @click="toggleText('borrow-purpose-<?php echo e($req->id); ?>')"
                                                    x-text="expandedTexts['borrow-purpose-<?php echo e($req->id); ?>'] ? 'Tutup' : 'Lihat semua'"></button>
                                                <?php endif; ?>
                                            </div>
                                            <?php endif; ?>

                                            <?php if($isVehicle): ?>
                                            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                                <div class="rounded-2xl bg-slate-50 border border-slate-200 p-4">
                                                    <div class="text-[11px] uppercase tracking-wide text-slate-400 mb-1">Tujuan Penggunaan</div>
                                                    <div class="safe-text clamped-text text-sm text-slate-700"
                                                        :class="{ 'is-expanded': expandedTexts['vehicle-purpose-<?php echo e($req->id); ?>'] }">
                                                        <?php echo e($req->purpose ?? 'Tidak disebutkan'); ?>

                                                    </div>
                                                    <?php if(mb_strlen((string) ($req->purpose ?? '')) > 90): ?>
                                                    <button type="button" class="expand-text-btn"
                                                        @click="toggleText('vehicle-purpose-<?php echo e($req->id); ?>')"
                                                        x-text="expandedTexts['vehicle-purpose-<?php echo e($req->id); ?>'] ? 'Tutup' : 'Lihat semua'"></button>
                                                    <?php endif; ?>
                                                </div>
                                                <div class="rounded-2xl bg-slate-50 border border-slate-200 p-4">
                                                    <div class="text-[11px] uppercase tracking-wide text-slate-400 mb-1">Lokasi Tujuan</div>
                                                    <div class="safe-text clamped-text text-sm text-slate-700"
                                                        :class="{ 'is-expanded': expandedTexts['vehicle-destination-<?php echo e($req->id); ?>'] }">
                                                        <?php echo e($req->destination ?? 'Tidak disebutkan'); ?>

                                                    </div>
                                                    <?php if(mb_strlen((string) ($req->destination ?? '')) > 90): ?>
                                                    <button type="button" class="expand-text-btn"
                                                        @click="toggleText('vehicle-destination-<?php echo e($req->id); ?>')"
                                                        x-text="expandedTexts['vehicle-destination-<?php echo e($req->id); ?>'] ? 'Tutup' : 'Lihat semua'"></button>
                                                    <?php endif; ?>
                                                </div>
                                            </div>
                                            <?php endif; ?>

                                            <?php if($isReturn): ?>
                                            <div class="rounded-2xl bg-orange-50 border border-orange-100 p-4 grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
                                                <div>
                                                    <div class="text-[11px] uppercase tracking-wide text-orange-500 mb-1">Kondisi User</div>
                                                    <div class="safe-text font-semibold text-orange-800"><?php echo e(ucfirst($req->return_condition ?? '-')); ?></div>
                                                </div>
                                                <div>
                                                    <div class="text-[11px] uppercase tracking-wide text-orange-500 mb-1">Catatan User</div>
                                                    <div class="safe-text clamped-text text-orange-800"
                                                        :class="{ 'is-expanded': expandedTexts['return-notes-<?php echo e($req->id); ?>'] }">
                                                        <?php echo e($req->return_notes ?? '-'); ?>

                                                    </div>
                                                    <?php if(mb_strlen((string) ($req->return_notes ?? '')) > 90): ?>
                                                    <button type="button" class="expand-text-btn"
                                                        @click="toggleText('return-notes-<?php echo e($req->id); ?>')"
                                                        x-text="expandedTexts['return-notes-<?php echo e($req->id); ?>'] ? 'Tutup' : 'Lihat semua'"></button>
                                                    <?php endif; ?>
                                                </div>
                                            </div>
                                            <?php endif; ?>

                                            <?php if($isItemRequest): ?>
                                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
                                                <div class="rounded-2xl bg-sky-50 border border-sky-100 p-4">
                                                    <div class="text-[11px] uppercase tracking-wide text-sky-500 mb-1">Keperluan</div>
                                                    <div class="safe-text clamped-text text-sm text-sky-900 leading-relaxed"
                                                        :class="{ 'is-expanded': expandedTexts['item-purpose-<?php echo e($req->id); ?>'] }">
                                                        <?php echo e($req->purpose ?? '-'); ?>

                                                    </div>
                                                    <?php if(mb_strlen((string) ($req->purpose ?? '')) > 90): ?>
                                                    <button type="button" class="expand-text-btn"
                                                        @click="toggleText('item-purpose-<?php echo e($req->id); ?>')"
                                                        x-text="expandedTexts['item-purpose-<?php echo e($req->id); ?>'] ? 'Tutup' : 'Lihat semua'"></button>
                                                    <?php endif; ?>
                                                </div>

                                                <div class="rounded-2xl bg-slate-50 border border-slate-200 p-4">
                                                    <div class="text-[11px] uppercase tracking-wide text-slate-400 mb-1">Catatan Admin</div>
                                                    <div class="safe-text clamped-text text-sm text-slate-700 leading-relaxed"
                                                        :class="{ 'is-expanded': expandedTexts['admin-note-<?php echo e($req->id); ?>'] }">
                                                        <?php echo e($req->admin_note ?? '-'); ?>

                                                    </div>
                                                    <?php if(mb_strlen((string) ($req->admin_note ?? '')) > 90): ?>
                                                    <button type="button" class="expand-text-btn"
                                                        @click="toggleText('admin-note-<?php echo e($req->id); ?>')"
                                                        x-text="expandedTexts['admin-note-<?php echo e($req->id); ?>'] ? 'Tutup' : 'Lihat semua'"></button>
                                                    <?php endif; ?>
                                                </div>
                                            </div>

                                            <div class="rounded-2xl bg-red-50 border border-red-100 p-4">
                                                <div class="text-[11px] uppercase tracking-wide text-red-500 mb-2">Surat Pengajuan</div>
                                                <?php if($req->letter_file_path): ?>
                                                <a href="<?php echo e($req->letter_file_path); ?>" target="_blank" rel="noopener noreferrer"
                                                    class="inline-flex items-center gap-2 px-4 py-2 rounded-2xl bg-white text-red-700 border border-red-200 text-sm font-semibold hover:bg-red-100 transition">
                                                    <i data-lucide="file-text" class="w-4 h-4"></i>
                                                    Lihat PDF Surat
                                                </a>
                                                <?php else: ?>
                                                <div class="text-sm text-slate-500">Tidak ada surat terlampir.</div>
                                                <?php endif; ?>
                                            </div>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                </div>

                                
                                <div class="xl:w-[210px] xl:shrink-0">
                                    <div class="h-full action-panel p-4 flex flex-col justify-between">
                                        <div>
                                            <div class="text-[11px] uppercase tracking-wide text-slate-400 mb-3">Aksi Verifikasi</div>

                                            <?php if($isItemRequest): ?>
                                            <?php if(in_array($req->status, ['pending', 'staff_approved'], true)): ?>
                                            <div class="space-y-2">
                                                <button type="button"
                                                    @click="openModal('approve', '<?php echo e($actionUrl); ?>', false, true)"
                                                    class="w-full inline-flex items-center justify-center gap-2 px-4 py-3 bg-green-600 hover:bg-green-700 text-white text-sm font-semibold rounded-2xl shadow-sm transition-colors">
                                                    <i data-lucide="check-circle-2" class="h-4 w-4"></i>
                                                    <span>Approve</span>
                                                </button>

                                                <button type="button"
                                                    @click="openModal('cancel', '<?php echo e($actionUrl); ?>', false, true)"
                                                    class="w-full inline-flex items-center justify-center gap-2 px-4 py-3 bg-white border border-red-200 text-red-600 hover:bg-red-50 text-sm font-semibold rounded-2xl shadow-sm transition-colors">
                                                    <i data-lucide="x-circle" class="h-4 w-4"></i>
                                                    <span>Reject</span>
                                                </button>
                                            </div>
                                            <?php else: ?>
                                            <div class="rounded-2xl bg-white border border-slate-200 p-4 text-center">
                                                <div class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center mx-auto mb-2">
                                                    <i data-lucide="badge-check" class="w-5 h-5 text-slate-500"></i>
                                                </div>
                                                <div class="text-sm font-semibold text-slate-700">Sudah diproses</div>
                                                <div class="text-xs text-slate-500 mt-1">Permintaan ini tidak bisa diverifikasi ulang.</div>
                                            </div>
                                            <?php endif; ?>
                                            <?php else: ?>
                                            <div class="space-y-2">
                                                <button type="button"
                                                    @click="openModal('approve', '<?php echo e($actionUrl); ?>', <?php echo e($isReturn ? 'true' : 'false'); ?>, false)"
                                                    class="w-full inline-flex items-center justify-center gap-2 px-4 py-3 bg-green-600 hover:bg-green-700 text-white text-sm font-semibold rounded-2xl shadow-sm transition-colors">
                                                    <i data-lucide="check-circle-2" class="h-4 w-4"></i>
                                                    <span>Approve</span>
                                                </button>

                                                <button type="button"
                                                    @click="openModal('reject', '<?php echo e($actionUrl); ?>', <?php echo e($isReturn ? 'true' : 'false'); ?>, false)"
                                                    class="w-full inline-flex items-center justify-center gap-2 px-4 py-3 bg-white border border-red-200 text-red-600 hover:bg-red-50 text-sm font-semibold rounded-2xl shadow-sm transition-colors">
                                                    <i data-lucide="x-circle" class="h-4 w-4"></i>
                                                    <span>Reject</span>
                                                </button>

                                                <?php if(!$isRoom && !$isReturn && !$isVehicle): ?>
                                                <button type="button"
                                                    @click="openModal('revise', '<?php echo e($actionUrl); ?>', false, false)"
                                                    class="w-full inline-flex items-center justify-center gap-2 px-4 py-3 bg-white border border-orange-200 text-orange-600 hover:bg-orange-50 text-sm font-semibold rounded-2xl shadow-sm transition-colors">
                                                    <i data-lucide="file-pen-line" class="h-4 w-4"></i>
                                                    <span>Revise</span>
                                                </button>
                                                <?php endif; ?>
                                            </div>
                                            <?php endif; ?>
                                        </div>

                                        <div class="mt-4 rounded-2xl bg-white border border-slate-200 px-4 py-3">
                                            <div class="text-[11px] uppercase tracking-wide text-slate-400 mb-1">Ringkasan</div>
                                            <div class="text-sm text-slate-600 leading-relaxed">
                                                <?php if($isItemRequest): ?>
                                                Pastikan jumlah permintaan sesuai kebutuhan dan stok masih tersedia sebelum approve.
                                                <?php elseif($isReturn): ?>
                                                Pastikan kondisi fisik barang sesuai sebelum pengembalian diselesaikan.
                                                <?php else: ?>
                                                Tinjau data permintaan sebelum mengambil keputusan akhir.
                                                <?php endif; ?>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </article>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                    <div class="empty-card surface">
                        <div class="w-20 h-20 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-5">
                            <i data-lucide="clipboard-check" class="h-9 w-9 text-slate-300"></i>
                        </div>
                        <h3 class="text-xl font-bold text-slate-900">Tidak ada tugas verifikasi</h3>
                        <p class="text-slate-500 max-w-md mx-auto mt-2 leading-relaxed">
                            Semua permintaan yang masuk sudah diproses. Nanti data baru akan muncul otomatis di halaman ini.
                        </p>
                    </div>
                    <?php endif; ?>
                </div>
            </div>

            
            <div x-show="isModalOpen" x-cloak
                class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-[9999] p-4 transition-opacity"
                x-transition:enter="ease-out duration-300"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
                x-transition:leave="ease-in duration-200"
                x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0">

                <div class="bg-white rounded-[24px] shadow-2xl w-full max-w-lg overflow-hidden transform transition-all"
                    @click.outside="isModalOpen = false"
                    x-transition:enter="ease-out duration-300"
                    x-transition:enter-start="opacity-0 translate-y-4 scale-95"
                    x-transition:enter-end="opacity-100 translate-y-0 scale-100">

                    <div class="px-6 py-5 border-b border-slate-200 bg-gradient-to-r from-white to-slate-50 flex justify-between items-center">
                        <div>
                            <h2 class="text-lg font-bold text-slate-800" x-text="modalTitle"></h2>
                            <p class="text-xs text-slate-500 mt-1" x-show="isItemRequestAction">Pastikan keputusan sesuai kebutuhan dan stok barang.</p>
                        </div>

                        <button type="button" @click="isModalOpen = false" class="text-slate-400 hover:text-slate-600 transition-colors">
                            <i data-lucide="x" class="h-5 w-5"></i>
                        </button>
                    </div>

                    <form :action="formAction" method="POST" class="p-6">
                        <?php echo csrf_field(); ?>
                        <input type="hidden" name="action" :value="action">

                        <div class="space-y-4">
                            <div x-show="isReturnAction && action === 'approve'" class="rounded-2xl bg-blue-50 p-4 border border-blue-100">
                                <label class="block text-sm font-bold text-blue-900 mb-1">Konfirmasi Kondisi Fisik</label>
                                <p class="text-xs text-blue-700 mb-3">Pastikan fisik barang sudah dicek sebelum stok dikembalikan.</p>
                                <select name="final_condition" class="w-full border-blue-200 rounded-xl text-sm p-3 focus:ring-blue-500 focus:border-blue-500 bg-white">
                                    <option value="baik">✅ Baik (Kembalikan ke Stok)</option>
                                    <option value="rusak_ringan">⚠️ Rusak Ringan</option>
                                    <option value="rusak_berat">❌ Rusak Berat</option>
                                </select>
                            </div>

                            <div x-show="isItemRequestAction" class="rounded-2xl border p-4"
                                :class="action === 'approve' ? 'bg-green-50 border-green-100' : 'bg-red-50 border-red-100'">
                                <div class="text-xs mb-1"
                                    :class="action === 'approve' ? 'text-green-600' : 'text-red-500'">
                                    Status verifikasi
                                </div>
                                <div class="text-sm font-bold"
                                    :class="action === 'approve' ? 'text-green-700' : 'text-red-700'"
                                    x-text="itemRequestStatusLabel">
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-semibold text-slate-700 mb-2" x-text="commentLabel"></label>
                                <textarea name="comment" rows="4"
                                    class="w-full border border-slate-300 rounded-2xl focus:border-blue-500 focus:ring-blue-500 text-sm p-4 resize-none"
                                    :placeholder="commentPlaceholder"
                                    :required="isCommentRequired"></textarea>
                                <p class="text-xs text-slate-500 mt-2" x-show="!isCommentRequired">Kolom ini opsional.</p>
                            </div>

                            <div class="flex justify-end gap-3 pt-4 border-t border-slate-100">
                                <button type="button" @click="isModalOpen = false"
                                    class="px-5 py-3 bg-white border border-slate-300 text-slate-700 rounded-2xl hover:bg-slate-50 text-sm font-semibold transition-colors">
                                    Batal
                                </button>
                                <button type="submit"
                                    :class="{
                                        'bg-green-600 hover:bg-green-700 text-white': action === 'approve',
                                        'bg-red-600 hover:bg-red-700 text-white': action === 'reject' || action === 'cancel',
                                        'bg-orange-500 hover:bg-orange-600 text-white': action === 'revise'
                                    }"
                                    class="px-5 py-3 rounded-2xl text-sm font-semibold shadow-sm flex items-center gap-2 transition-colors">
                                    <span x-text="buttonText"></span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </main>
    </div>

    <script>
        lucide.createIcons();

        document.addEventListener('alpine:init', () => {
            Alpine.data('verificationWorkflow', () => ({
                isModalOpen: false,
                action: '',
                formAction: '',
                modalTitle: '',
                commentLabel: '',
                commentPlaceholder: '',
                buttonText: '',
                isReturnAction: false,
                isItemRequestAction: false,
                isCommentRequired: false,
                itemRequestStatusLabel: '',
                expandedTexts: {},

                toggleText(key) {
                    this.expandedTexts[key] = !this.expandedTexts[key];
                },

                openModal(actionType, url, isReturn = false, isItemRequest = false) {
                    this.action = actionType;
                    this.formAction = url;
                    this.isReturnAction = isReturn;
                    this.isItemRequestAction = isItemRequest;
                    this.isModalOpen = true;

                    if (isItemRequest) {
                        if (actionType === 'approve') {
                            this.modalTitle = 'Approve Permintaan Barang';
                            this.commentLabel = 'Catatan Admin (Opsional)';
                            this.commentPlaceholder = 'Tambahkan catatan approval jika diperlukan...';
                            this.buttonText = 'Approve';
                            this.isCommentRequired = false;
                            this.itemRequestStatusLabel = 'Baik (sesuai quantity)';
                        } else {
                            this.modalTitle = 'Cancel Permintaan Barang';
                            this.commentLabel = 'Catatan Admin (Opsional)';
                            this.commentPlaceholder = 'Tambahkan alasan atau catatan jika diperlukan...';
                            this.buttonText = 'Cancel Permintaan';
                            this.isCommentRequired = false;
                            this.itemRequestStatusLabel = 'Belum diterima';
                        }
                        return;
                    }

                    if (actionType === 'approve') {
                        this.modalTitle = isReturn ? 'Terima Barang Kembali' : 'Konfirmasi Persetujuan';
                        this.commentLabel = 'Catatan (Opsional)';
                        this.commentPlaceholder = 'Tambahkan catatan persetujuan...';
                        this.buttonText = isReturn ? 'Terima & Update Stok' : 'Setujui';
                        this.isCommentRequired = false;
                    } else if (actionType === 'reject') {
                        this.modalTitle = 'Konfirmasi Penolakan';
                        this.commentLabel = 'Alasan Penolakan (Wajib)';
                        this.commentPlaceholder = 'Jelaskan alasan penolakan...';
                        this.buttonText = 'Tolak Permintaan';
                        this.isCommentRequired = true;
                    } else {
                        this.modalTitle = 'Permintaan Revisi';
                        this.commentLabel = 'Instruksi Revisi (Wajib)';
                        this.commentPlaceholder = 'Jelaskan bagian yang perlu direvisi...';
                        this.buttonText = 'Kirim Revisi';
                        this.isCommentRequired = true;
                    }
                }
            }))
        })
    </script>
</body>

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