<x-app-layout>
    <x-slot name="header">
        <style>
            @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');
            .dash-header-title {
                font-family: 'DM Sans', sans-serif;
                font-weight: 800;
                font-size: 1.4rem;
                letter-spacing: -0.01em;
                color: #0a0a0a;
            }
        </style>
        <div class="flex items-center gap-3">
            <a href="{{ route('kurir.orders.index') }}" class="text-gray-500 hover:text-gray-900" style="text-decoration: none;">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                </svg>
            </a>
            <h2 class="dash-header-title">
                Detail Pesanan <span style="color: #0a0a0a; font-weight:800;">#{{ $order->order_number }}</span>
            </h2>
        </div>
    </x-slot>

    <style>
        @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');

        .kurirdetail-wrap { 
            font-family: 'DM Sans', sans-serif; 
            background: #f6f8fb; 
            min-height: 100vh; 
        }
        .kurirdetail-inner { 
            max-width: 900px; 
            margin: 0 auto; 
            padding: 32px 24px; 
        }

        /* ── ALERT ── */
        .kurirdetail-alert {
            padding: 12px 20px;
            margin-bottom: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            border-radius: 12px;
            background: #fff;
            border-left: 4px solid;
            box-shadow: 0 1px 2px rgba(0,0,0,0.02);
        }
        .kurirdetail-alert-success { border-left-color: #0a0a0a; color: #0a0a0a; }
        .kurirdetail-alert-error { border-left-color: #dc2626; color: #dc2626; }

        /* ── CARD ── */
        .kurirdetail-card {
            background: #fff;
            border: 1px solid #eef2f6;
            border-radius: 20px;
            overflow: hidden;
            margin-bottom: 20px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.02);
        }
        .kurirdetail-card-header {
            padding: 14px 20px;
            border-bottom: 1px solid #eef2f6;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .kurirdetail-card-title {
            font-family: 'DM Sans', sans-serif;
            font-size: 0.8rem;
            font-weight: 800;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            color: #5b6b8c;
            margin: 0;
        }
        .kurirdetail-card-body { padding: 20px; }

        /* ── TASK STEPS (Compact) ── */
        .kurirdetail-steps {
            display: flex;
            align-items: center;
            padding: 16px 20px;
        }
        .kurirdetail-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            flex: 1;
        }
        .kurirdetail-step-dot {
            width: 32px;
            height: 32px;
            border-radius: 40px;
            border: 1.5px solid #e2e8f0;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
            font-weight: 800;
        }
        .kurirdetail-step.done .kurirdetail-step-dot {
            background: #0a0a0a;
            border-color: #0a0a0a;
            color: #fff;
        }
        .kurirdetail-step.active .kurirdetail-step-dot {
            border-color: #0a0a0a;
            border-width: 2px;
        }
        .kurirdetail-step-line {
            flex: 1;
            height: 2px;
            background: #e2e8f0;
            margin-top: -16px;
        }
        .kurirdetail-step-line.done { background: #0a0a0a; }
        .kurirdetail-step-label {
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            color: #94a3b8;
            text-align: center;
        }
        .kurirdetail-step.done .kurirdetail-step-label { color: #0a0a0a; }
        .kurirdetail-step.active .kurirdetail-step-label { color: #0a0a0a; }

        /* ── ESTIMASI BANNER ── */
        .kurirdetail-estimasi {
            padding: 12px 20px;
            margin: 0 20px 16px;
            background: #f8fafc;
            border: 1px solid #eef2f6;
            border-radius: 16px;
        }
        .kurirdetail-est-title {
            font-size: 0.65rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: #94a3b8;
            margin-bottom: 4px;
        }
        .kurirdetail-est-main {
            font-size: 0.9rem;
            font-weight: 800;
            color: #0a0a0a;
            margin-bottom: 4px;
        }
        .kurirdetail-est-sub {
            font-size: 0.7rem;
            font-weight: 500;
            color: #64748b;
        }

        /* ── ADDRESS BOX ── */
        .kurirdetail-address {
            background: #f8fafc;
            border-radius: 16px;
            padding: 14px 16px;
            font-size: 0.8rem;
            font-weight: 500;
            line-height: 1.6;
            color: #334155;
        }
        .kurirdetail-address-name {
            font-weight: 800;
            color: #0a0a0a;
            margin-bottom: 4px;
        }

        /* ── RESI BOX ── */
        .kurirdetail-resi {
            background: #f8fafc;
            border: 1px solid #eef2f6;
            border-radius: 16px;
            padding: 14px 20px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
        }
        .kurirdetail-resi-number {
            font-size: 0.9rem;
            font-weight: 800;
            font-family: monospace;
            letter-spacing: 0.5px;
        }
        .kurirdetail-resi-btn {
            background: none;
            border: none;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            color: #5b6b8c;
            cursor: pointer;
            padding: 6px 12px;
            border-radius: 40px;
            transition: all 0.2s;
        }
        .kurirdetail-resi-btn:hover {
            background: #eef2ff;
            color: #0a0a0a;
        }

        /* ── INFO ROWS ── */
        .kurirdetail-info-row {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #f0f3f9;
            font-size: 0.8rem;
        }
        .kurirdetail-info-row:last-child { border-bottom: none; }
        .kurirdetail-info-label {
            color: #5b6b8c;
            font-weight: 700;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            font-size: 0.7rem;
        }
        .kurirdetail-info-value {
            font-weight: 700;
            color: #0a0a0a;
        }

        /* ── UPLOAD ZONE ── */
        .kurirdetail-upload {
            border: 1.5px dashed #cbd5e1;
            border-radius: 16px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
            margin-bottom: 16px;
            background: #fafcff;
        }
        .kurirdetail-upload:hover {
            border-color: #0a0a0a;
            background: #f8fafc;
        }
        .kurirdetail-upload-input {
            display: none;
        }
        .kurirdetail-upload-icon {
            font-size: 1.5rem;
            margin-bottom: 6px;
        }
        .kurirdetail-upload-text {
            font-size: 0.75rem;
            font-weight: 700;
            color: #5b6b8c;
        }
        .kurirdetail-preview {
            display: none;
            margin-top: 12px;
        }
        .kurirdetail-preview img {
            width: 100%;
            max-height: 160px;
            object-fit: cover;
            border-radius: 12px;
            border: 1px solid #eef2f6;
        }

        .kurirdetail-textarea {
            width: 100%;
            padding: 12px 14px;
            font-family: 'DM Sans', sans-serif;
            font-size: 0.75rem;
            font-weight: 500;
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            resize: vertical;
            margin-bottom: 16px;
        }
        .kurirdetail-textarea:focus {
            outline: none;
            border-color: #0a0a0a;
        }

        .kurirdetail-btn {
            width: 100%;
            background: #0a0a0a;
            color: #fff;
            font-family: 'DM Sans', sans-serif;
            font-size: 0.75rem;
            font-weight: 800;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            padding: 12px 16px;
            border: none;
            border-radius: 60px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .kurirdetail-btn:hover { background: #1a1a1a; transform: translateY(-1px); }

        /* ── PROOF GRID ── */
        .kurirdetail-proof-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-bottom: 16px;
        }
        .kurirdetail-proof-item {
            border: 1px solid #eef2f6;
            border-radius: 16px;
            overflow: hidden;
        }
        .kurirdetail-proof-img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            cursor: pointer;
            transition: opacity 0.2s;
        }
        .kurirdetail-proof-img:hover { opacity: 0.85; }
        .kurirdetail-proof-meta {
            padding: 10px 12px;
            background: #fafcff;
            border-top: 1px solid #eef2f6;
        }
        .kurirdetail-proof-label {
            font-size: 0.65rem;
            font-weight: 800;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            color: #5b6b8c;
            margin-bottom: 4px;
        }
        .kurirdetail-proof-date {
            font-size: 0.65rem;
            font-weight: 500;
            color: #94a3b8;
        }
        .kurirdetail-proof-notes {
            font-size: 0.7rem;
            font-weight: 500;
            color: #475569;
            margin-top: 6px;
        }

        .kurirdetail-complete {
            padding: 12px 16px;
            background: #f0fdf4;
            border: 1px solid #dcfce7;
            border-radius: 60px;
            font-size: 0.75rem;
            font-weight: 800;
            color: #15803d;
            text-align: center;
        }

        .kurirdetail-note {
            margin-top: 12px;
            padding: 10px 14px;
            background: #fffbeb;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 600;
            color: #b45309;
        }

        @media (max-width: 640px) {
            .kurirdetail-inner {
                padding: 20px 16px;
            }
            .kurirdetail-proof-grid {
                grid-template-columns: 1fr;
            }
            .kurirdetail-steps {
                padding: 12px 16px;
            }
            .kurirdetail-step-dot {
                width: 28px;
                height: 28px;
                font-size: 0.7rem;
            }
            .kurirdetail-step-label {
                font-size: 0.55rem;
            }
        }
    </style>

    @php
        $taskRank = ['assigned'=>1, 'picked_up'=>2, 'delivered'=>3];
        $curTask  = $taskRank[$order->courier_task_status ?? ''] ?? 0;

        $etaMap = [
            'JNE Reguler'  => '2-3 hari',
            'JNE YES'      => '1-2 hari',
            'J&T Express'  => '2-4 hari',
            'SiCepat REG'  => '1-2 hari',
            'AnterAja'     => '2-4 hari',
            'Pos Indonesia'=> '3-5 hari',
        ];
        $kurirNama = $order->courier_name ?? '-';
        $etaText   = $etaMap[$kurirNama] ?? '2-4 hari';

        $estimasiInfo = null;
        if ($order->courier_task_status === 'assigned') {
            $estimasiInfo = [
                'title' => 'LANGKAH BERIKUTNYA',
                'main'  => 'Ambil paket dari toko',
                'sub'   => 'Estimasi ke customer: ' . $etaText . ' · ' . $kurirNama,
            ];
        } elseif ($order->courier_task_status === 'picked_up') {
            $estimasiInfo = [
                'title' => 'DALAM PERJALANAN',
                'main'  => 'Menuju alamat customer',
                'sub'   => 'Estimasi tiba: ' . $etaText,
            ];
        } elseif ($order->courier_task_status === 'delivered') {
            $estimasiInfo = [
                'title' => 'PENGIRIMAN SELESAI',
                'main'  => 'Paket sudah diterima',
                'sub'   => 'Terkirim: ' . ($order->delivered_at ? $order->delivered_at->format('d M Y, H:i') . ' WIB' : '-'),
            ];
        }
    @endphp

    <div class="kurirdetail-wrap">
        <div class="kurirdetail-inner">

        {{-- NOMOR RESI --}}
            @if($order->tracking_number)
            <div class="kurirdetail-resi">
                <div>
                    <div style="font-size: 0.65rem; font-weight: 800; color: #94a3b8;">Nomor Resi</div>
                    <div class="kurirdetail-resi-number">{{ $order->tracking_number }}</div>
                    @if($order->courier_name)
                        <div style="font-size: 0.65rem; font-weight: 600; color: #94a3b8;">{{ strtoupper($order->courier_name) }}</div>
                    @endif
                </div>
                <button onclick="navigator.clipboard.writeText('{{ $order->tracking_number }}'); this.textContent='✓ Disalin'; setTimeout(() => this.textContent='Salin', 2000)" class="kurirdetail-resi-btn">
                    Salin
                </button>
            </div>
            @endif

            {{-- ALERTS --}}
            @if(session('success'))
                <div class="kurirdetail-alert kurirdetail-alert-success">{{ session('success') }}</div>
            @endif
            @if(session('error'))
                <div class="kurirdetail-alert kurirdetail-alert-error">{{ session('error') }}</div>
            @endif

            {{-- PROGRESS STEPS --}}
            <div class="kurirdetail-card">
                <div class="kurirdetail-steps">
                    {{-- Step 1 --}}
                    <div class="kurirdetail-step {{ $curTask >= 1 ? 'done' : '' }}">
                        <div class="kurirdetail-step-dot">
                            @if($curTask >= 1) ✓ @else 1 @endif
                        </div>
                        <div class="kurirdetail-step-label">Ditugaskan</div>
                    </div>
                    <div class="kurirdetail-step-line {{ $curTask >= 2 ? 'done' : '' }}"></div>
                    {{-- Step 2 --}}
                    <div class="kurirdetail-step {{ $curTask >= 2 ? 'done' : ($curTask >= 1 ? 'active' : '') }}">
                        <div class="kurirdetail-step-dot">
                            @if($curTask >= 2) ✓ @else 2 @endif
                        </div>
                        <div class="kurirdetail-step-label">Diambil</div>
                    </div>
                    <div class="kurirdetail-step-line {{ $curTask >= 3 ? 'done' : '' }}"></div>
                    {{-- Step 3 --}}
                    <div class="kurirdetail-step {{ $curTask >= 3 ? 'done' : ($curTask >= 2 ? 'active' : '') }}">
                        <div class="kurirdetail-step-dot">
                            @if($curTask >= 3) ✓ @else 3 @endif
                        </div>
                        <div class="kurirdetail-step-label">Diantar</div>
                    </div>
                    <div class="kurirdetail-step-line {{ $curTask >= 3 ? 'done' : '' }}"></div>
                    {{-- Step 4 --}}
                    <div class="kurirdetail-step {{ $curTask >= 3 ? 'done' : '' }}">
                        <div class="kurirdetail-step-dot">4</div>
                        <div class="kurirdetail-step-label">Terkirim</div>
                    </div>
                </div>

                @if($estimasiInfo)
                <div class="kurirdetail-estimasi">
                    <div class="kurirdetail-est-title">{{ $estimasiInfo['title'] }}</div>
                    <div class="kurirdetail-est-main">{{ $estimasiInfo['main'] }}</div>
                    <div class="kurirdetail-est-sub">{{ $estimasiInfo['sub'] }}</div>
                </div>
                @endif
            </div>

            {{-- ALAMAT TUJUAN --}}
            <div class="kurirdetail-card">
                <div class="kurirdetail-card-header">
                    <span class="kurirdetail-card-title">Alamat Tujuan</span>
                </div>
                <div class="kurirdetail-card-body">
                    <div class="kurirdetail-address">
                        <div class="kurirdetail-address-name">{{ $order->recipient_name }} · {{ $order->recipient_phone }}</div>
                        <div>{{ $order->address_detail ?? $order->shipping_address }}</div>
                        <div>Kel. {{ $order->village ?? '' }}, Kec. {{ $order->district ?? '-' }}</div>
                        <div>{{ $order->city ?? '-' }}, {{ $order->province ?? '-' }} {{ $order->postal_code ?? '' }}</div>
                    </div>
                    @if($order->notes ?? false)
                    <div class="kurirdetail-note">
                        📝 Catatan: {{ $order->notes }}
                    </div>
                    @endif
                </div>
            </div>

            {{-- INFO PESANAN --}}
            <div class="kurirdetail-card">
                <div class="kurirdetail-card-header">
                    <span class="kurirdetail-card-title">Info Pesanan</span>
                </div>
                <div class="kurirdetail-card-body">
                    <div class="kurirdetail-info-row">
                        <span class="kurirdetail-info-label">No. Pesanan</span>
                        <span class="kurirdetail-info-value">#{{ $order->order_number }}</span>
                    </div>
                    <div class="kurirdetail-info-row">
                        <span class="kurirdetail-info-label">Tanggal</span>
                        <span class="kurirdetail-info-value">{{ $order->created_at->format('d M Y, H:i') }} WIB</span>
                    </div>
                    <div class="kurirdetail-info-row">
                        <span class="kurirdetail-info-label">Metode Bayar</span>
                        <span class="kurirdetail-info-value">{{ $order->payment_method ?? '-' }}</span>
                    </div>
                    <div class="kurirdetail-info-row">
                        <span class="kurirdetail-info-label">Layanan Kurir</span>
                        <span class="kurirdetail-info-value">{{ $order->courier_name ?? '-' }}</span>
                    </div>
                    @if($order->picked_up_at)
                    <div class="kurirdetail-info-row">
                        <span class="kurirdetail-info-label">Waktu Pickup</span>
                        <span class="kurirdetail-info-value">{{ $order->picked_up_at->format('d M Y, H:i') }} WIB</span>
                    </div>
                    @endif
                    @if($order->delivered_at)
                    <div class="kurirdetail-info-row">
                        <span class="kurirdetail-info-label">Waktu Terkirim</span>
                        <span class="kurirdetail-info-value" style="color: #15803d;">{{ $order->delivered_at->format('d M Y, H:i') }} WIB</span>
                    </div>
                    @endif
                </div>
            </div>

            {{-- FORM KONFIRMASI PICKUP --}}
            @if($order->courier_task_status === 'assigned')
            <div class="kurirdetail-card">
                <div class="kurirdetail-card-header">
                    <span class="kurirdetail-card-title">Konfirmasi Ambil Paket</span>
                </div>
                <div class="kurirdetail-card-body">
                    <p style="font-size: 0.75rem; font-weight: 600; color: #64748b; margin-bottom: 16px;">
                        Upload foto paket saat Anda mengambil dari toko.
                    </p>

                    <form action="{{ route('kurir.orders.confirm-pickup', $order->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="kurirdetail-upload" onclick="document.getElementById('pickupInput').click()">
                            <div class="kurirdetail-upload-icon">📷</div>
                            <div class="kurirdetail-upload-text">Tap untuk foto / pilih gambar</div>
                            <input type="file" id="pickupInput" name="photo" accept="image/*" capture="environment" required
                                   onchange="previewPhoto(this, 'pickupPreview')" class="kurirdetail-upload-input">
                        </div>
                        <div class="kurirdetail-preview" id="pickupPreview">
                            <img src="" alt="Preview">
                        </div>
                        @error('photo') <p style="color: #dc2626; font-size: 0.7rem; font-weight: 600; margin-top: 4px;">{{ $message }}</p> @enderror

                        <textarea name="notes" class="kurirdetail-textarea" placeholder="Catatan opsional..."></textarea>

                        <button type="submit" class="kurirdetail-btn" onclick="return confirm('Konfirmasi sudah ambil paket?')">
                            Konfirmasi Pengambilan
                        </button>
                    </form>
                </div>
            </div>
            @endif

            {{-- FORM KONFIRMASI DELIVERED --}}
            @if($order->courier_task_status === 'picked_up')
            <div class="kurirdetail-card">
                <div class="kurirdetail-card-header">
                    <span class="kurirdetail-card-title">Konfirmasi Paket Diterima</span>
                </div>
                <div class="kurirdetail-card-body">
                    @if($pickUpProof)
                    <div style="margin-bottom: 16px; padding: 10px 14px; background: #f8fafc; border: 1px solid #eef2f6; border-radius: 14px;">
                        <div style="font-size: 0.65rem; font-weight: 800; margin-bottom: 8px;">✅ Foto Pickup</div>
                        <img src="{{ asset('storage/' . $pickUpProof->photo_path) }}" style="width: 100%; max-height: 100px; object-fit: cover; border-radius: 10px;">
                    </div>
                    @endif

                    <p style="font-size: 0.75rem; font-weight: 600; color: #64748b; margin-bottom: 16px;">
                        Upload foto serah terima paket kepada penerima.
                    </p>

                    <form action="{{ route('kurir.orders.confirm-delivered', $order->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="kurirdetail-upload" onclick="document.getElementById('deliveredInput').click()">
                            <div class="kurirdetail-upload-icon">🤝</div>
                            <div class="kurirdetail-upload-text">Foto Serah Terima</div>
                            <input type="file" id="deliveredInput" name="photo" accept="image/*" capture="environment" required
                                   onchange="previewPhoto(this, 'deliveredPreview')" class="kurirdetail-upload-input">
                        </div>
                        <div class="kurirdetail-preview" id="deliveredPreview">
                            <img src="" alt="Preview">
                        </div>
                        @error('photo') <p style="color: #dc2626; font-size: 0.7rem; font-weight: 600; margin-top: 4px;">{{ $message }}</p> @enderror

                        <textarea name="notes" class="kurirdetail-textarea" placeholder="Catatan opsional..."></textarea>

                        <button type="submit" class="kurirdetail-btn" onclick="return confirm('Konfirmasi paket sudah diserahkan?')">
                            Konfirmasi Paket Diterima
                        </button>
                    </form>
                </div>
            </div>
            @endif

            {{-- FOTO BUKTI (jika sudah delivered) --}}
            @if($order->courier_task_status === 'delivered')
            <div class="kurirdetail-card">
                <div class="kurirdetail-card-header">
                    <span class="kurirdetail-card-title">Foto Bukti Pengiriman</span>
                </div>
                <div class="kurirdetail-card-body">
                    <div class="kurirdetail-proof-grid">
                        @if($pickUpProof)
                        <div class="kurirdetail-proof-item">
                            <img src="{{ asset('storage/' . $pickUpProof->photo_path) }}" class="kurirdetail-proof-img"
                                 onclick="openLightbox(this.src)" alt="Foto Pickup">
                            <div class="kurirdetail-proof-meta">
                                <div class="kurirdetail-proof-label">Pengambilan Paket</div>
                                <div class="kurirdetail-proof-date">{{ $pickUpProof->created_at->format('d M Y, H:i') }} WIB</div>
                                @if($pickUpProof->notes)<div class="kurirdetail-proof-notes">{{ $pickUpProof->notes }}</div>@endif
                            </div>
                        </div>
                        @endif
                        @if($deliveredProof)
                        <div class="kurirdetail-proof-item">
                            <img src="{{ asset('storage/' . $deliveredProof->photo_path) }}" class="kurirdetail-proof-img"
                                 onclick="openLightbox(this.src)" alt="Foto Delivered">
                            <div class="kurirdetail-proof-meta">
                                <div class="kurirdetail-proof-label">Serah Terima</div>
                                <div class="kurirdetail-proof-date">{{ $deliveredProof->created_at->format('d M Y, H:i') }} WIB</div>
                                @if($deliveredProof->notes)<div class="kurirdetail-proof-notes">{{ $deliveredProof->notes }}</div>@endif
                            </div>
                        </div>
                        @endif
                    </div>

                    <div class="kurirdetail-complete">
                        Pengiriman selesai
                    </div>
                </div>
            </div>
            @endif

        </div>
    </div>

    {{-- Lightbox --}}
    <div id="lightbox" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 1000; align-items: center; justify-content: center;">
        <button onclick="closeLightbox()" style="position: absolute; top: 20px; right: 24px; background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer;">✕</button>
        <img id="lightboxImg" src="" style="max-width: 90vw; max-height: 90vh; object-fit: contain;">
    </div>

    <script>
        function previewPhoto(input, previewId) {
            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const preview = document.getElementById(previewId);
                    const img = preview.querySelector('img');
                    img.src = e.target.result;
                    preview.style.display = 'block';
                };
                reader.readAsDataURL(input.files[0]);
            }
        }

        function openLightbox(src) {
            const lb = document.getElementById('lightbox');
            const img = document.getElementById('lightboxImg');
            img.src = src;
            lb.style.display = 'flex';
        }

        function closeLightbox() {
            document.getElementById('lightbox').style.display = 'none';
        }

        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') closeLightbox();
        });
    </script>
</x-app-layout>