@extends('layouts.app')

@section('content')
@php
    $order = $installation->order;
    $orderItem = $installation->orderItem;
    $customer = $order->customer ?? null;

    $formatDateInput = function ($date) {
        if (empty($date)) return '';

        try {
            return \Carbon\Carbon::parse($date)->format('Y-m-d');
        } catch (\Throwable $e) {
            return '';
        }
    };

    $formatDateDisplay = function ($date) {
        if (empty($date)) return '-';

        try {
            return \Carbon\Carbon::parse($date)->format('d/m/Y');
        } catch (\Throwable $e) {
            return '-';
        }
    };

    /*
     * Sinkron dari data Create Order.
     * Kalau data di pemasangan outdoor masih kosong, ambil dari data item order/customer.
     */
    $syncedCustomerName = $order->customer_name ?? ($customer->name ?? '-');

    $syncedCompany = $installation->received_by_company
        ?: ($customer->company_name
            ?? $customer->contact_person
            ?? $customer->name
            ?? $order->customer_name
            ?? '');

    $syncedLocation = $installation->location
        ?: ($orderItem->outdoor_installation_location
            ?? $orderItem->installation_location
            ?? '');

    $syncedTargetDate = $installation->target_date
        ?: ($orderItem->outdoor_installation_target_date
            ?? $orderItem->installation_target_date
            ?? null);

    $syncedNotes = $installation->notes
        ?: ($orderItem->outdoor_installation_notes
            ?? $orderItem->installation_notes
            ?? '');

    $targetDateValue = old('target_date', $formatDateInput($syncedTargetDate));
    $locationValue = old('location', $syncedLocation);
    $companyValue = old('received_by_company', $syncedCompany);
    $notesValue = old('notes', $syncedNotes);
@endphp

<div class="space-y-6">
    <div class="flex flex-wrap items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Pemasangan Outdoor</h1>
            <p class="text-sm text-gray-500">{{ $order->invoice_number ?? '-' }} — {{ $orderItem->product_name ?? '-' }}</p>
        </div>
        <div class="flex flex-wrap items-center gap-2">
            <button type="button"
                    id="openBastPrintModal"
                    class="inline-flex items-center justify-center gap-2 rounded-lg bg-error-500 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-error-600 focus:outline-none focus:ring-2 focus:ring-error-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M5 4v3H4a2 2 0 00-2 2v4a2 2 0 002 2h1v1a2 2 0 002 2h6a2 2 0 002-2v-1h1a2 2 0 002-2V9a2 2 0 00-2-2h-1V4a2 2 0 00-2-2H7a2 2 0 00-2 2zm8 3V4H7v3h6zm0 6H7v3h6v-3z" clip-rule="evenodd" />
                </svg>
                Print BAST
            </button>
        </div>
    </div>

    @if(session('success'))
        <div class="rounded-lg bg-success-50 p-4 text-sm text-success-700 dark:bg-success-500/10 dark:text-success-400">{{ session('success') }}</div>
    @endif

    <div class="grid gap-6 lg:grid-cols-3">
        <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] lg:col-span-2">
            <h2 class="mb-2 text-lg font-semibold text-gray-900 dark:text-white">Data Pekerjaan</h2>
            <div class="mb-4 rounded-xl border border-blue-100 bg-blue-50 px-4 py-3 text-xs font-medium text-blue-700 dark:border-blue-500/20 dark:bg-blue-500/10 dark:text-blue-300">
                Data instansi, lokasi, target tanggal, dan catatan otomatis mengikuti data yang diisi saat Create Order jika data pemasangan masih kosong.
            </div>

            <form method="POST" action="{{ route('outdoor-installations.update', $installation) }}" class="grid gap-4 md:grid-cols-2">
                @csrf
                @method('PUT')

                <div>
                    <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Status</label>
                    <select name="status" class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-900 dark:text-white">
                        @foreach($statuses as $key => $label)
                            <option value="{{ $key }}" @selected(old('status', $installation->status) === $key)>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <label for="outdoorTargetDateField" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
                        Target Tanggal
                    </label>

                    <div class="relative">
                        <input
                            id="outdoorTargetDateField"
                            type="date"
                            name="target_date"
                            value="{{ $targetDateValue }}"
                            onclick="this.showPicker && this.showPicker()"
                            onfocus="this.showPicker && this.showPicker()"
                            class="h-11 w-full cursor-pointer rounded-lg border border-gray-300 bg-white px-3 pr-12 text-sm font-semibold text-gray-800 outline-none transition hover:border-brand-500 focus:border-brand-500 focus:ring-2 focus:ring-brand-100 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:focus:ring-brand-500/20"
                        >

                        <button
                            type="button"
                            onclick="const input = document.getElementById('outdoorTargetDateField'); if (input) { input.focus(); input.showPicker ? input.showPicker() : input.click(); }"
                            class="absolute right-2 top-1/2 inline-flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-lg bg-brand-50 text-brand-600 transition hover:bg-brand-100 dark:bg-brand-500/15 dark:text-brand-300 dark:hover:bg-brand-500/25"
                            aria-label="Pilih target tanggal"
                        >
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4.5 w-4.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" d="M8 7V3m8 4V3M4 11h16M5 5h14a2 2 0 012 2v12a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2z" />
                            </svg>
                        </button>
                    </div>

                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                        Klik kolom tanggal atau ikon kalender untuk memilih target pemasangan.
                    </p>
                </div>

                <div class="md:col-span-2">
                    <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Lokasi</label>
                    <input type="text" name="location" value="{{ $locationValue }}" class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-900 dark:text-white">
                </div>

                <div>
                    <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Penerima</label>
                    <input type="text" name="received_by_name" value="{{ old('received_by_name', $installation->received_by_name) }}" placeholder="Nama penerima" class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-900 dark:text-white">
                </div>

                <div>
                    <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Jabatan Penerima</label>
                    <input type="text" name="received_by_position" value="{{ old('received_by_position', $installation->received_by_position) }}" class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-900 dark:text-white">
                </div>

                <div>
                    <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Instansi Penerima</label>
                    <input type="text" name="received_by_company" value="{{ $companyValue }}" class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-900 dark:text-white">
                </div>

                <div>
                    <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">No. BAST</label>
                    <input type="text" name="bast_number" value="{{ old('bast_number', $installation->bast_number) }}" placeholder="Auto/manual" class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-900 dark:text-white">
                </div>

                <div>
                    <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Diserahkan Oleh</label>
                    <input type="text" name="handover_by_name" value="{{ old('handover_by_name', $installation->handover_by_name) }}" class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-900 dark:text-white">
                </div>

                <div>
                    <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Jabatan</label>
                    <input type="text" name="handover_by_position" value="{{ old('handover_by_position', $installation->handover_by_position) }}" class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-900 dark:text-white">
                </div>

                <div class="md:col-span-2">
                    <label class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">Catatan</label>
                    <textarea name="notes" rows="3" class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm dark:border-gray-700 dark:bg-gray-900 dark:text-white">{{ $notesValue }}</textarea>
                </div>

                <div class="md:col-span-2 flex justify-end">
                    <button class="rounded-lg bg-brand-500 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-600">Simpan</button>
                </div>
            </form>
        </div>

        <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
            <h2 class="mb-4 text-lg font-semibold text-gray-900 dark:text-white">Ringkasan Item</h2>
            <dl class="space-y-3 text-sm">
                <div><dt class="text-gray-500">Customer</dt><dd class="font-semibold text-gray-900 dark:text-white">{{ $syncedCustomerName ?: '-' }}</dd></div>
                <div><dt class="text-gray-500">Instansi</dt><dd class="font-semibold text-gray-900 dark:text-white">{{ $companyValue ?: '-' }}</dd></div>
                <div><dt class="text-gray-500">Lokasi Pemasangan</dt><dd class="font-semibold text-gray-900 dark:text-white">{{ $locationValue ?: '-' }}</dd></div>
                <div><dt class="text-gray-500">Target Tanggal</dt><dd class="font-semibold text-gray-900 dark:text-white">{{ $formatDateDisplay($targetDateValue) }}</dd></div>
                <div><dt class="text-gray-500">Nama File</dt><dd class="font-semibold text-gray-900 dark:text-white">{{ $orderItem->file_name ?? '-' }}</dd></div>
                <div><dt class="text-gray-500">Ukuran</dt><dd class="font-semibold text-gray-900 dark:text-white">{{ $orderItem->size_description ?? '-' }}</dd></div>
                <div><dt class="text-gray-500">Finishing</dt><dd class="font-semibold text-gray-900 dark:text-white">{{ $orderItem->finishing_note ?? '-' }}</dd></div>
            </dl>
        </div>
    </div>

    <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03]">
        <div class="mb-4">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Foto Proof Pekerjaan</h2>
            <p class="text-sm text-gray-500">Dokumentasi pekerjaan pemasangan outdoor. Foto yang sudah diupload tampil lebih dulu, form tambah foto ada di bawah.</p>
        </div>

        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            @forelse($installation->photos as $photo)
                @php
                    $photoUrl = route('outdoor-installations.photos.view', [$installation, $photo]);
                    $photoTitle = $photo->caption ?: ($photo->original_name ?: 'Foto proof pekerjaan');
                @endphp
                <div class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900">
                    <a href="{{ $photoUrl }}" target="_blank" class="block bg-gray-50 dark:bg-gray-800">
                        <img src="{{ $photoUrl }}" class="h-44 w-full object-cover" alt="{{ $photoTitle }}" loading="lazy">
                    </a>
                    <div class="p-3 text-xs text-gray-500">
                        <div class="line-clamp-2 font-medium text-gray-700 dark:text-gray-300">{{ $photoTitle }}</div>
                        <form method="POST" action="{{ route('outdoor-installations.photos.destroy', [$installation, $photo]) }}" class="mt-2" onsubmit="return confirm('Hapus foto ini?')">
                            @csrf @method('DELETE')
                            <button class="font-semibold text-error-600 hover:underline">Hapus</button>
                        </form>
                    </div>
                </div>
            @empty
                <div class="col-span-full rounded-xl border border-dashed border-gray-300 p-8 text-center text-sm text-gray-500 dark:border-gray-700">
                    Belum ada foto proof. Gunakan tombol <strong>Ambil Foto</strong> atau <strong>Pilih dari Galeri</strong> di bawah.
                </div>
            @endforelse
        </div>

        <form method="POST"
              action="{{ route('outdoor-installations.photos.store', $installation) }}"
              enctype="multipart/form-data"
              class="mt-6 rounded-2xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-800 dark:bg-gray-900/50"
              x-data="{ fileLabel: 'Belum ada foto dipilih' }">
            @csrf

            <div class="mb-3">
                <h3 class="text-sm font-bold text-gray-900 dark:text-white">Tambah Foto Proof</h3>
                <p class="mt-1 text-xs text-gray-500">Pilih kamera untuk foto langsung di lokasi, atau pilih galeri untuk mengambil foto yang sudah ada.</p>
            </div>

            <input
                id="outdoorCameraInput"
                type="file"
                name="photos[]"
                accept="image/*"
                capture="environment"
                class="hidden"
                @change="fileLabel = $event.target.files.length ? ($event.target.files.length + ' foto dari kamera siap diupload') : 'Belum ada foto dipilih'"
            >

            <input
                id="outdoorGalleryInput"
                type="file"
                name="photos[]"
                accept="image/*"
                multiple
                class="hidden"
                @change="fileLabel = $event.target.files.length ? ($event.target.files.length + ' foto dari galeri siap diupload') : 'Belum ada foto dipilih'"
            >

            <div class="grid gap-3 md:grid-cols-[auto_auto_1fr] md:items-center">
                <button type="button"
                        onclick="document.getElementById('outdoorCameraInput').click()"
                        class="inline-flex items-center justify-center gap-2 rounded-xl bg-red-600 px-4 py-3 text-sm font-bold text-white shadow-sm transition hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h2l1.2-2A2 2 0 0110 4h4a2 2 0 011.8 1.1L17 7h2a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
                    </svg>
                    Ambil Foto
                </button>

                <button type="button"
                        onclick="document.getElementById('outdoorGalleryInput').click()"
                        class="photo-proof-gallery-btn inline-flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-black transition focus:outline-none focus:ring-4 focus:ring-blue-300/70"
                        style="background:#dbeafe !important;color:#1e3a8a !important;border:2px solid #2563eb !important;box-shadow:0 8px 18px rgba(37,99,235,.18) !important;opacity:1 !important;">
                    <span class="photo-proof-gallery-icon inline-flex h-6 w-6 items-center justify-center rounded-lg"
                          style="background:#2563eb !important;color:#ffffff !important;">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="color:#ffffff !important;">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4" d="M4 16l4.6-4.6a2 2 0 012.8 0L16 16m-2-2l1.6-1.6a2 2 0 012.8 0L20 14m-16 6h16a2 2 0 002-2V6a2 2 0 00-2-2H4a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                    </span>
                    <span style="color:#1e3a8a !important;font-weight:900 !important;">Pilih dari Galeri</span>
                </button>

                <div class="rounded-xl border border-gray-200 bg-white px-4 py-3 text-sm font-semibold text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300" x-text="fileLabel">
                    Belum ada foto dipilih
                </div>
            </div>

            <div class="mt-3 grid gap-3 md:grid-cols-[1fr_auto]">
                <input
                    type="text"
                    name="caption"
                    placeholder="Caption opsional, contoh: Tampak depan setelah pemasangan"
                    class="rounded-xl border border-gray-300 bg-white px-4 py-3 text-sm text-gray-800 outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-100 dark:border-gray-700 dark:bg-gray-800 dark:text-white dark:focus:ring-brand-500/20"
                >

                <button type="submit"
                        class="photo-proof-upload-btn inline-flex items-center justify-center rounded-xl px-5 py-3 text-sm font-black transition focus:outline-none focus:ring-4 focus:ring-blue-300/70"
                        style="background:#2563eb !important;color:#ffffff !important;border:2px solid #1d4ed8 !important;box-shadow:0 8px 18px rgba(37,99,235,.22) !important;opacity:1 !important;">
                    Upload Foto Proof
                </button>
            </div>
        </form>
    </div>

    <div id="bastPrintModal" class="bast-print-modal" aria-hidden="true">
        <div class="bast-print-modal-card" role="dialog" aria-modal="true" aria-labelledby="bastPrintModalTitle">
            <div class="flex items-start justify-between gap-4 border-b border-gray-200 px-5 py-4 dark:border-gray-800">
                <div>
                    <h3 id="bastPrintModalTitle" class="text-lg font-semibold text-gray-900 dark:text-white">Pilih Ukuran Print BAST</h3>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Pilih ukuran kertas untuk mencetak berita acara serah terima.</p>
                </div>
                <button type="button" id="closeBastPrintModal" class="rounded-lg p-1.5 text-gray-400 transition hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-gray-800 dark:hover:text-gray-200" aria-label="Tutup popup print BAST">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                </button>
            </div>

            <div class="space-y-3 px-5 py-5">
                <a target="_blank" href="{{ route('outdoor-installations.bast', ['outdoorInstallation' => $installation, 'paper' => 'a4']) }}"
                   class="bast-print-option flex items-center justify-between rounded-xl border border-gray-200 px-4 py-3 text-sm font-semibold text-gray-800 transition hover:border-error-300 hover:bg-error-50 hover:text-error-700 dark:border-gray-800 dark:text-gray-200 dark:hover:border-error-500/40 dark:hover:bg-error-500/10 dark:hover:text-error-300">
                    <span>A4</span><span class="text-xs font-medium text-gray-500">210 × 297 mm</span>
                </a>
                <a target="_blank" href="{{ route('outdoor-installations.bast', ['outdoorInstallation' => $installation, 'paper' => 'a5']) }}"
                   class="bast-print-option flex items-center justify-between rounded-xl border border-gray-200 px-4 py-3 text-sm font-semibold text-gray-800 transition hover:border-error-300 hover:bg-error-50 hover:text-error-700 dark:border-gray-800 dark:text-gray-200 dark:hover:border-error-500/40 dark:hover:bg-error-500/10 dark:hover:text-error-300">
                    <span>A5</span><span class="text-xs font-medium text-gray-500">148 × 210 mm</span>
                </a>
                <a target="_blank" href="{{ route('outdoor-installations.bast', ['outdoorInstallation' => $installation, 'paper' => '21x16']) }}"
                   class="bast-print-option flex items-center justify-between rounded-xl border border-gray-200 px-4 py-3 text-sm font-semibold text-gray-800 transition hover:border-error-300 hover:bg-error-50 hover:text-error-700 dark:border-gray-800 dark:text-gray-200 dark:hover:border-error-500/40 dark:hover:bg-error-500/10 dark:hover:text-error-300">
                    <span>21,5 × 16,5</span><span class="text-xs font-medium text-gray-500">Custom</span>
                </a>
            </div>

            <div class="flex justify-end border-t border-gray-200 px-5 py-4 dark:border-gray-800">
                <button type="button" id="cancelBastPrintModal" class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700">Tutup</button>
            </div>
        </div>
    </div>

    <style>
        #bastPrintModal.bast-print-modal {
            position: fixed !important;
            inset: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            z-index: 99999999 !important;
            display: none !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 20px !important;
            background: rgba(15, 23, 42, 0.55) !important;
            backdrop-filter: blur(4px);
            overflow: hidden !important;
            margin: 0 !important;
            transform: none !important;
        }

        #bastPrintModal.bast-print-modal.is-open {
            display: flex !important;
        }

        #bastPrintModal .bast-print-modal-card {
            position: relative !important;
            width: 100% !important;
            max-width: 448px !important;
            max-height: calc(100vh - 40px) !important;
            overflow-y: auto !important;
            margin: 0 !important;
            border: 1px solid #e5e7eb !important;
            border-radius: 16px !important;
            background: #ffffff !important;
            box-shadow: 0 30px 90px rgba(15, 23, 42, 0.35) !important;
            transform: none !important;
        }

        .dark #bastPrintModal .bast-print-modal-card {
            border-color: #1f2937 !important;
            background: #111827 !important;
        }
    
        .photo-proof-gallery-btn {
            background: #dbeafe !important;
            color: #1e3a8a !important;
            border: 2px solid #2563eb !important;
            box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18) !important;
            opacity: 1 !important;
            filter: none !important;
        }

        .photo-proof-gallery-btn:hover {
            background: #bfdbfe !important;
            color: #172554 !important;
            border-color: #1d4ed8 !important;
        }

        .photo-proof-gallery-btn svg,
        .photo-proof-gallery-btn span {
            color: inherit !important;
            opacity: 1 !important;
        }

        .photo-proof-gallery-icon {
            background: #2563eb !important;
            color: #ffffff !important;
        }

        .photo-proof-upload-btn {
            background: #2563eb !important;
            color: #ffffff !important;
            border: 2px solid #1d4ed8 !important;
            box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22) !important;
            opacity: 1 !important;
            filter: none !important;
        }

        .photo-proof-upload-btn:hover {
            background: #1d4ed8 !important;
            color: #ffffff !important;
        }

    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const modal = document.getElementById('bastPrintModal');
            const openBtn = document.getElementById('openBastPrintModal');
            const closeBtn = document.getElementById('closeBastPrintModal');
            const cancelBtn = document.getElementById('cancelBastPrintModal');

            if (!modal || !openBtn) {
                return;
            }

            if (modal.parentElement !== document.body) {
                document.body.appendChild(modal);
            }

            function openModal(event) {
                if (event) event.preventDefault();
                modal.classList.add('is-open');
                modal.setAttribute('aria-hidden', 'false');
                document.documentElement.style.overflow = 'hidden';
                document.body.style.overflow = 'hidden';
            }

            function closeModal() {
                modal.classList.remove('is-open');
                modal.setAttribute('aria-hidden', 'true');
                document.documentElement.style.overflow = '';
                document.body.style.overflow = '';
            }

            openBtn.addEventListener('click', openModal);

            if (closeBtn) closeBtn.addEventListener('click', closeModal);
            if (cancelBtn) cancelBtn.addEventListener('click', closeModal);

            modal.addEventListener('click', function (event) {
                if (event.target === modal) closeModal();
            });

            document.addEventListener('keydown', function (event) {
                if (event.key === 'Escape' && modal.classList.contains('is-open')) closeModal();
            });

            modal.querySelectorAll('a[target="_blank"]').forEach(function (link) {
                link.addEventListener('click', closeModal);
            });
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const targetDateInput = document.getElementById('outdoorTargetDateField');

            if (!targetDateInput) {
                return;
            }

            targetDateInput.addEventListener('click', function () {
                if (typeof targetDateInput.showPicker === 'function') {
                    try {
                        targetDateInput.showPicker();
                    } catch (error) {}
                }
            });
        });
    </script>

</div>
@endsection