<!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 - {{ config('app.name', 'Laravel') }}</title>

    <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&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/lucide@latest"></script>

    <style>
        :root {
            --bg: #f8fafc;
            --panel: #ffffff;
            --muted: #6b7280;
            --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(37, 99, 235, 0.05), transparent 24%),
                radial-gradient(circle at top right, rgba(15, 23, 42, 0.06), transparent 22%),
                linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
            color: #111827;
            -webkit-font-smoothing: antialiased;
        }

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

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

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

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

        @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" x-data="verificationWorkflow">
            <div class="max-w-7xl mx-auto space-y-6">

                {{-- HEADER --}}
                <div class="rounded-[28px] p-6 md:p-8 text-white shadow-xl overflow-hidden relative"
                    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="relative flex flex-col md:flex-row md:items-end md:justify-between gap-4">
                        <div>
                            <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="shield-check" class="w-3.5 h-3.5"></i>
                                Workflow Verifikasi
                            </div>

                            <h1 class="text-2xl md:text-4xl font-extrabold mt-4 tracking-tight">Verifikasi Permintaan</h1>
                            <p class="text-blue-100/90 mt-3 text-sm md:text-base max-w-3xl leading-relaxed">
                                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="rounded-2xl bg-white/10 border border-white/10 px-4 py-3 min-w-[140px]">
                                <div class="text-[11px] uppercase tracking-wide text-blue-100">Tugas Aktif</div>
                                <div class="text-2xl font-extrabold mt-1">{{ count($requests) }}</div>
                            </div>
                            <div class="rounded-2xl bg-white/10 border border-white/10 px-4 py-3 min-w-[140px]">
                                <div class="text-[11px] uppercase tracking-wide text-blue-100">Role</div>
                                <div class="text-sm md:text-base font-bold mt-2">{{ ucfirst(str_replace('_', ' ', auth()->user()->role ?? 'user')) }}</div>
                            </div>
                        </div>
                    </div>
                </div>

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

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

                {{-- LIST --}}
                <div class="space-y-5">
                    @forelse ($requests as $req)
                    @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';
                    $icon = 'layout-grid';
                    $previewImage = null;
                    } elseif ($isVehicle) {
                    $itemName = ($req->vehicle->name ?? 'Kendaraan') . ' (' . ($req->vehicle->plate_number ?? '-') . ')';
                    $date = $req->start_date;
                    $amount = '1 Kendaraan';
                    $actionUrl = route('verification.vehicle.action', $req->id);
                    $typeLabel = 'PINJAM KENDARAAN';
                    $typeColor = 'emerald';
                    $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';
                    $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';
                    $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';
                    $icon = 'package';
                    $previewImage = null;
                    }

                    $userName = $req->user->name ?? 'Unknown';

                    $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',
                    '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 === '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;
                    @endphp

                    <div class="glass-card rounded-[26px] border border-slate-200 shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300">
                        <div class="h-1.5 bg-{{ $typeColor }}-500"></div>

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

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

                                        @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="{{ $previewImage ?: 'https://via.placeholder.com/300x220?text=No+Image' }}"
                                                    alt="{{ $itemName }}"
                                                    class="w-full h-[120px] object-cover"
                                                    onerror="this.onerror=null;this.src='https://via.placeholder.com/300x220?text=No+Image';">
                                            </div>
                                        </div>
                                        @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-{{ $typeColor }}-50 text-{{ $typeColor }}-700 border border-{{ $typeColor }}-100 text-[11px] font-bold tracking-wide uppercase">
                                                    <i data-lucide="{{ $icon }}" class="w-3.5 h-3.5"></i>
                                                    <span>{{ $typeLabel }}</span>
                                                </div>

                                                <span class="inline-flex px-3 py-1.5 rounded-full text-xs font-semibold border {{ $statusClass }}">
                                                    {{ $statusLabel }}
                                                </span>
                                            </div>

                                            <div>
                                                <h3 class="text-lg md:text-xl font-extrabold text-slate-900 leading-tight">
                                                    {{ $itemName }}
                                                </h3>
                                                <p class="text-sm text-slate-500 mt-1">
                                                    Diajukan oleh <span class="font-semibold text-slate-700">{{ $userName }}</span>
                                                </p>
                                            </div>

                                            <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-3">
                                                <div class="rounded-2xl bg-slate-50 border border-slate-200 px-4 py-3">
                                                    <div class="text-[11px] uppercase tracking-wide text-slate-400 mb-1">{{ $isItemRequest ? 'Tanggal Pengajuan' : 'Tanggal' }}</div>
                                                    <div class="text-sm font-semibold text-slate-700">
                                                        {{ $date ? \Carbon\Carbon::parse($date)->format($isItemRequest ? 'd M Y' : 'd M Y, H:i') : '-' }}
                                                    </div>
                                                </div>

                                                <div class="rounded-2xl bg-slate-50 border border-slate-200 px-4 py-3">
                                                    <div class="text-[11px] uppercase tracking-wide text-slate-400 mb-1">Jumlah</div>
                                                    <div class="text-sm font-semibold text-slate-700">{{ $amount }}</div>
                                                </div>

                                                @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="text-sm font-semibold text-emerald-700">{{ $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="text-sm font-semibold text-sky-700">
                                                        {{ $req->realization_date ? \Carbon\Carbon::parse($req->realization_date)->format('d M Y') : '-' }}
                                                    </div>
                                                </div>
                                                @endif
                                            </div>

                                            @if($isVehicle)
                                            <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</div>
                                                <div class="text-sm text-slate-700">{{ $req->destination ?? 'Tidak disebutkan' }}</div>
                                            </div>
                                            @endif

                                            @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="font-semibold text-orange-800">{{ ucfirst($req->return_condition ?? '-') }}</div>
                                                </div>
                                                <div>
                                                    <div class="text-[11px] uppercase tracking-wide text-orange-500 mb-1">Catatan User</div>
                                                    <div class="text-orange-800">{{ $req->return_notes ?? '-' }}</div>
                                                </div>
                                            </div>
                                            @endif

                                            @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="text-sm text-sky-900 leading-relaxed">
                                                        {{ $req->purpose ?? '-' }}
                                                    </div>
                                                </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="text-sm text-slate-700 leading-relaxed">
                                                        {{ $req->admin_note ?? '-' }}
                                                    </div>
                                                </div>
                                            </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                {{-- RIGHT ACTION --}}
                                <div class="xl:w-[210px] xl:shrink-0">
                                    <div class="h-full rounded-3xl bg-slate-50 border border-slate-200 p-4 flex flex-col justify-between">
                                        <div>
                                            <div class="text-[11px] uppercase tracking-wide text-slate-400 mb-3">Aksi Verifikasi</div>

                                            @if($isItemRequest)
                                            @if($req->status === 'pending')
                                            <div class="space-y-2">
                                                <button type="button"
                                                    @click="openModal('approve', '{{ $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', '{{ $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>
                                            @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>
                                            @endif
                                            @else
                                            <div class="space-y-2">
                                                <button type="button"
                                                    @click="openModal('approve', '{{ $actionUrl }}', {{ $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', '{{ $actionUrl }}', {{ $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>

                                                @if(!$isRoom && !$isReturn && !$isVehicle)
                                                <button type="button"
                                                    @click="openModal('revise', '{{ $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>
                                                @endif
                                            </div>
                                            @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">
                                                @if($isItemRequest)
                                                Pastikan jumlah permintaan sesuai kebutuhan dan stok masih tersedia sebelum approve.
                                                @elseif($isReturn)
                                                Pastikan kondisi fisik barang sesuai sebelum pengembalian diselesaikan.
                                                @else
                                                Tinjau data permintaan sebelum mengambil keputusan akhir.
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    @empty
                    <div class="glass-card rounded-[26px] border border-slate-200 p-12 text-center shadow-lg">
                        <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>
                    @endforelse
                </div>
            </div>

            {{-- MODAL --}}
            <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">
                        @csrf
                        <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: '',

                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>
