@include('admin.partials.header')
@include('admin.partials.sidebar')
@include('admin.partials.topbar')

@php
    $typeMeta = [
        'job' => ['label' => 'Job Advertisement', 'icon' => 'work', 'color' => '#2563eb'],
        'rent' => ['label' => 'Property Rental', 'icon' => 'apartment', 'color' => '#7c3aed'],
        'hostel' => ['label' => 'Hostel Listing', 'icon' => 'bed', 'color' => '#db2777'],
        'service' => ['label' => 'Professional Service', 'icon' => 'construction', 'color' => '#059669'],
    ];
    $meta = $typeMeta[$listing->listing_type] ?? ['label' => ucfirst($listing->listing_type), 'icon' => 'inventory_2', 'color' => '#475569'];
    
    // Clean, corporate fallback title structure if specific string is raw lowercase
    $title = match ($listing->listing_type) {
        'job' => $listing->job_title ?? 'Untitled Job Position',
        'rent' => $listing->property_type ?? $listing->property_kind ?? 'Rental Property',
        'hostel' => $listing->hostel_type ?? 'Hostel Accommodation',
        'service' => $listing->service_type ?? 'Professional Service Request',
        default => 'Marketplace Item',
    };

    $providerName = $listing->provider_business_name ?: ($listing->provider_name ?: ($listing->provider_mobile ?: 'Anonymous Provider'));
    
    $hiddenFields = ['id', 'provider_id', 'deleted_at', 'provider_name', 'provider_business_name', 'provider_mobile', 'provider_email', 'listing_type', 'media', 'status', 'admin_note', 'views_count', 'approved_at', 'created_at', 'updated_at'];
    $fieldOrder = [
        'job' => ['company_name', 'job_title', 'job_category', 'department', 'role_category', 'employment_type', 'experience_required', 'education_required', 'post_role', 'gender_preference', 'job_posted_by', 'designation', 'application_deadline', 'apply_channels', 'apply_whatsapp_number', 'number_of_openings', 'salary_type', 'min_salary', 'monthly_salary', 'job_shift', 'work_type', 'candidate_min_education', 'skills_required', 'responsibilities', 'location', 'city', 'state', 'pincode', 'job_description', 'accuracy_confirmed', 'employer_terms_accepted', 'compliance_check_authorized'],
        'rent' => ['property_kind', 'property_type', 'furnishing_status', 'address', 'area_locality', 'nearest_landmark', 'city', 'state', 'pincode', 'room_details', 'willing_to_rent_to', 'rent_per_month', 'security_deposit', 'maintenance_type', 'available_from', 'lease_duration', 'area_sqft', 'parking_type', 'additional_spaces', 'contact_number', 'whatsapp_number', 'description', 'details_confirmed', 'platform_terms_accepted'],
        'hostel' => ['hostel_type', 'owner_name', 'contact_number', 'whatsapp_number', 'address', 'city', 'area_landmark', 'latitude', 'longitude', 'total_rooms', 'total_bed_capacity', 'bed_sharing_type', 'bathroom_type', 'monthly_rent', 'security_deposit', 'electricity_charge_type', 'electricity_charges', 'wifi_available', 'food_mess', 'power_backup', 'security_guard', 'gate_open_time', 'gate_close_time', 'visitor_policy', 'house_rules', 'description', 'terms_accepted'],
        'service' => ['service_type', 'experience_years', 'service_area', 'service_radius', 'working_days', 'inspection_charge', 'starting_price', 'pricing_unit', 'hourly_rate', 'price_type', 'description', 'terms_accepted', 'guidelines_accepted', 'refund_policy_accepted'],
    ];
    $fieldLabels = [
        'hostel_type' => 'Preferred For',
        'area_landmark' => 'Area / Landmark',
        'total_bed_capacity' => 'Total Bed Capacity',
        'electricity_charge_type' => 'Electricity Charges',
        'electricity_charges' => 'Fixed Electricity Amount',
        'wifi_available' => 'WiFi',
        'food_mess' => 'Food / Mess',
        'security_guard' => 'Security',
        'terms_accepted' => 'Terms Accepted',
        'rent_per_month' => 'Rent Per Month',
        'monthly_rent' => 'Monthly Rent',
        'monthly_salary' => 'Monthly Salary',
        'min_salary' => 'Minimum Salary',
        'salary_type' => 'Salary Type',
        'apply_channels' => 'Apply Channels',
        'apply_whatsapp_number' => 'Apply WhatsApp Number',
        'accuracy_confirmed' => 'Accuracy Confirmed',
        'employer_terms_accepted' => 'Employer Terms Accepted',
        'compliance_check_authorized' => 'Compliance Check Authorized',
        'furnishing_status' => 'Furnishing Status',
        'area_locality' => 'Area / Locality',
        'nearest_landmark' => 'Nearest Landmark',
        'maintenance_type' => 'Maintenance',
        'available_from' => 'Available From',
        'lease_duration' => 'Lease Duration',
        'area_sqft' => 'Area',
        'parking_type' => 'Parking',
        'additional_spaces' => 'Additional Spaces',
        'details_confirmed' => 'Details Confirmed',
        'platform_terms_accepted' => 'Platform Terms Accepted',
        'pricing_unit' => 'Pricing Unit',
        'guidelines_accepted' => 'Guidelines Accepted',
        'refund_policy_accepted' => 'Refund Policy Accepted',
        'room_details' => 'Room Details',
        'working_days' => 'Working Days',
    ];
    $currencyFields = ['monthly_salary', 'min_salary', 'rent_per_month', 'monthly_rent', 'security_deposit', 'electricity_charges', 'inspection_charge', 'starting_price', 'hourly_rate'];
    $booleanFields = ['wifi_available', 'food_mess', 'power_backup', 'security_guard', 'terms_accepted', 'accuracy_confirmed', 'employer_terms_accepted', 'compliance_check_authorized', 'details_confirmed', 'platform_terms_accepted', 'guidelines_accepted', 'refund_policy_accepted'];

    $rawFields = collect((array) $listing)
        ->reject(fn ($value, $key) => in_array($key, $hiddenFields, true))
        ->reject(fn ($value) => $value === null || $value === '' || $value === []);

    $orderedKeys = collect($fieldOrder[$listing->listing_type] ?? [])
        ->filter(fn ($key) => $rawFields->has($key));

    $fields = $orderedKeys
        ->mapWithKeys(fn ($key) => [$key => $rawFields->get($key)])
        ->merge($rawFields->except($orderedKeys->all()));
    $imageMedia = collect($listing->media ?? [])->filter(fn ($media) => ($media->file_type ?? null) === 'image')->values();
    $documentMedia = collect($listing->media ?? [])->filter(fn ($media) => ($media->file_type ?? null) === 'document')->values();
    $profileMedia = $imageMedia->first(fn ($media) => ($media->media_label ?? null) === 'profile_photo');
    $pastWorkMedia = $imageMedia->filter(fn ($media) => in_array(($media->media_label ?? null), ['primary', 'gallery'], true))->values();
    $toolsMedia = $imageMedia->filter(fn ($media) => str_starts_with((string) ($media->media_label ?? ''), 'tools_'))->values();
    $otherImageMedia = $imageMedia
        ->reject(fn ($media) => ($media->media_label ?? null) === 'profile_photo')
        ->reject(fn ($media) => str_starts_with((string) ($media->media_label ?? ''), 'tools_'))
        ->reject(fn ($media) => in_array(($media->media_label ?? null), ['primary', 'gallery'], true))
        ->values();
    $heroMedia = $listing->listing_type === 'service' ? ($profileMedia ?: $pastWorkMedia->first() ?: $toolsMedia->first() ?: $imageMedia->first()) : $imageMedia->first();

    $formatValue = function ($key, $value) use ($currencyFields, $booleanFields) {
        if (in_array($key, $booleanFields, true)) {
            return ((bool) $value) ? 'Yes' : 'No';
        }

        if (in_array($key, $currencyFields, true) && is_numeric($value)) {
            return 'Rs '.number_format((float) $value, 2);
        }

        if (is_string($value) && str_starts_with(trim($value), '[')) {
            $decoded = json_decode($value, true);

            if (json_last_error() === JSON_ERROR_NONE && is_array($decoded)) {
                $value = $decoded;
            }
        }

        if (is_string($value) && str_starts_with(trim($value), '{')) {
            $decoded = json_decode($value, true);

            if (json_last_error() === JSON_ERROR_NONE && is_array($decoded)) {
                $value = $decoded;
            }
        }

        if (is_array($value) || is_object($value)) {
            return collect((array) $value)
                ->map(fn ($item, $itemKey) => is_string($itemKey) ? ucwords(str_replace('_', ' ', $itemKey)).': '.$item : $item)
                ->implode(', ');
        }

        return (string) $value;
    };
@endphp

<style>
    :root {
        --sheet-bg: #ffffff;
        --body-bg: #f8fafc;
        --border-color: #e2e8f0;
        --text-main: #0f172a;
        --text-muted: #64748b;
        --accent-color: {{ $meta['color'] }};
    }

    #main { background-color: var(--body-bg); min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

    /* Fix Page Heading & Meta Context Row */
    .page-title-main {
        font-size: 1.75rem;
        font-weight: 700;
        color: var(--text-main);
        letter-spacing: -0.03em;
        text-transform: capitalize; /* Enforces title capitalization for clean look */
        margin: 0;
    }
    
    .meta-subtitle {
        font-size: 0.85rem;
        color: var(--text-muted);
        font-weight: 500;
    }

    /* Layout Containers */
    .review-container {
        display: grid;
        grid-template-columns: 1fr 360px;
        gap: 2rem;
        align-items: start;
        max-width: 1400px;
        margin: 0 auto;
    }

    /* Main Content Sheet */
    .content-sheet {
        background: var(--sheet-bg);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        overflow: hidden;
    }

    .hero-area {
        height: 280px;
        background: #0f172a;
        position: relative;
    }

    .hero-area img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .type-badge {
        position: absolute;
        top: 20px;
        left: 20px;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(4px);
        padding: 6px 14px;
        border-radius: 6px;
        font-weight: 700;
        font-size: 11px;
        display: flex;
        align-items: center;
        gap: 6px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        color: var(--accent-color);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* Typography & Sections */
    .section-header {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--text-muted);
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 8px;
        margin-bottom: 20px;
        width: 100%;
    }

    .data-table-row {
        display: flex;
        align-items: center;
        padding: 14px 0;
        border-bottom: 1px solid #f1f5f9;
    }

    .data-table-row:last-child {
        border-bottom: none;
    }

    .data-label {
        width: 220px;
        font-weight: 500;
        color: var(--text-muted);
        font-size: 14px;
    }

    .data-value {
        flex: 1;
        color: var(--text-main);
        font-size: 14px;
        font-weight: 600;
        white-space: pre-wrap;
    }

    /* Sidebar Components */
    .sticky-sidebar {
        position: sticky;
        top: 24px;
    }

    .sidebar-card {
        background: white;
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 24px;
        margin-bottom: 20px;
    }

    .provider-avatar {
        width: 44px;
        height: 44px;
        background: #f1f5f9;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-muted);
    }

    /* Buttons */
    .btn-action {
        padding: 12px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: all 0.15s ease-in-out;
        width: 100%;
        border: none;
    }

    .btn-approve { background: #10b981; color: white; }
    .btn-approve:hover { background: #059669; }

    .btn-reject { background: #fee2e2; color: #dc2626; margin-top: 10px; }
    .btn-reject:hover { background: #fecaca; }

    .gallery-thumb {
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        border-radius: 8px;
        border: 1px solid var(--border-color);
    }

    .lightbox-trigger {
        background: transparent;
        border: 0;
        cursor: zoom-in;
        display: block;
        height: 100%;
        padding: 0;
        width: 100%;
    }

    .lightbox-trigger img {
        transition: filter .2s ease, transform .2s ease;
    }

    .lightbox-trigger:hover img {
        filter: brightness(.94);
    }

    .image-lightbox {
        align-items: center;
        background: rgba(2, 6, 23, .88);
        display: none;
        inset: 0;
        justify-content: center;
        padding: 28px;
        position: fixed;
        z-index: 3000;
    }

    .image-lightbox.show {
        display: flex;
    }

    .lightbox-panel {
        max-width: min(1120px, 94vw);
        position: relative;
        width: 100%;
    }

    .lightbox-panel img {
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 30px 90px rgba(0, 0, 0, .38);
        display: block;
        max-height: 86vh;
        object-fit: contain;
        width: 100%;
    }

    .lightbox-close {
        align-items: center;
        background: #fff;
        border: 0;
        border-radius: 999px;
        color: #0f172a;
        display: inline-flex;
        height: 42px;
        justify-content: center;
        position: absolute;
        right: -12px;
        top: -12px;
        width: 42px;
        z-index: 2;
    }

    @media (max-width: 1100px) {
        .review-container { grid-template-columns: 1fr; }
        .sticky-sidebar { position: static; }
    }
</style>

<main id="main" class="pb-5">
    <div class="container-fluid pt-4 px-4 mb-4">
        <div class="d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-between gap-3 pb-3 border-bottom">
            <div>
                <nav aria-label="breadcrumb" class="mb-1">
                    <ol class="breadcrumb m-0" style="font-size: 12px;">
                        <li class="breadcrumb-item"><a href="#" class="text-decoration-none text-muted">Admin</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.moderation.index') }}" class="text-decoration-none text-muted">Moderation</a></li>
                        <li class="breadcrumb-item active text-dark fw-medium">Review</li>
                    </ol>
                </nav>
                <div class="d-flex align-items-center gap-2">
                    <h1 class="page-title-main">{{ $title }}</h1>
                    <span class="badge bg-light text-muted border px-2 py-1 align-middle" style="font-size: 11px; font-weight: 600;">ID: #{{ $listing->id ?? 'N/A' }}</span>
                </div>
            </div>
            <a href="{{ route('admin.moderation.index') }}" class="btn btn-white border shadow-sm btn-sm px-3 fw-medium">
                <span class="material-symbols-outlined align-middle me-1" style="font-size: 16px;">arrow_back</span> Back to List
            </a>
            <a href="{{ route('admin.listings.edit', ['type' => $listing->listing_type, 'id' => $listing->id]) }}" class="btn btn-white border shadow-sm btn-sm px-3 fw-medium">
                <span class="material-symbols-outlined align-middle me-1" style="font-size: 16px;">edit</span> Edit Listing
            </a>
        </div>

        <div class="review-container mt-4">
            <div class="content-sheet">
                <div class="hero-area">
                    <div class="type-badge">
                        <span class="material-symbols-outlined" style="font-size: 16px;">{{ $meta['icon'] }}</span>
                        {{ $meta['label'] }}
                    </div>
                    @if ($heroMedia?->image_url)
                        <button class="lightbox-trigger" type="button" data-lightbox-src="{{ $heroMedia->image_url }}" data-lightbox-alt="{{ $title }}">
                            <img src="{{ $heroMedia->image_url }}" alt="Featured Image">
                        </button>
                    @else
                        <div class="h-100 d-flex align-items-center justify-content-center text-muted">
                            <span class="material-symbols-outlined" style="font-size: 64px; opacity: 0.15;">{{ $meta['icon'] }}</span>
                        </div>
                    @endif
                </div>

                <div class="p-4 p-md-5">
                    <div class="section-header">Listing Specifications</div>
                    
                    <div class="mb-2">
                        @foreach ($fields as $key => $value)
                            <div class="data-table-row">
                                <div class="data-label">{{ $fieldLabels[$key] ?? ucwords(str_replace('_', ' ', $key)) }}</div>
                                <div class="data-value">{{ $formatValue($key, $value) }}</div>
                            </div>
                        @endforeach
                    </div>

                    @if ($listing->listing_type === 'service')
                        @if ($profileMedia?->image_url)
                            <div class="mt-5">
                                <div class="section-header">Profile Photo</div>
                                <div class="row g-3 mt-1">
                                    <div class="col-6 col-md-3">
                                        <button class="lightbox-trigger" type="button" data-lightbox-src="{{ $profileMedia->image_url }}" data-lightbox-alt="Profile photo">
                                            <img src="{{ $profileMedia->image_url }}" class="gallery-thumb shadow-sm" alt="Profile photo">
                                        </button>
                                    </div>
                                </div>
                            </div>
                        @endif

                        @if ($pastWorkMedia->isNotEmpty())
                            <div class="mt-5">
                                <div class="section-header">Past Work Images</div>
                                <div class="row g-3 mt-1">
                                    @foreach ($pastWorkMedia as $media)
                                        <div class="col-6 col-md-3">
                                            <button class="lightbox-trigger" type="button" data-lightbox-src="{{ $media->image_url }}" data-lightbox-alt="Past work image">
                                                <img src="{{ $media->image_url }}" class="gallery-thumb shadow-sm" alt="Past work image">
                                            </button>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        @if ($toolsMedia->isNotEmpty())
                            <div class="mt-5">
                                <div class="section-header">Tools and Equipment Images</div>
                                <div class="row g-3 mt-1">
                                    @foreach ($toolsMedia as $media)
                                        <div class="col-6 col-md-3">
                                            <button class="lightbox-trigger" type="button" data-lightbox-src="{{ $media->image_url }}" data-lightbox-alt="Tools and equipment image">
                                                <img src="{{ $media->image_url }}" class="gallery-thumb shadow-sm" alt="Tools and equipment image">
                                            </button>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        @if ($otherImageMedia->isNotEmpty())
                            <div class="mt-5">
                                <div class="section-header">Other Images</div>
                                <div class="row g-3 mt-1">
                                    @foreach ($otherImageMedia as $media)
                                        <div class="col-6 col-md-3">
                                            <button class="lightbox-trigger" type="button" data-lightbox-src="{{ $media->image_url }}" data-lightbox-alt="Listing image">
                                                <img src="{{ $media->image_url }}" class="gallery-thumb shadow-sm" alt="Listing image">
                                            </button>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    @elseif ($imageMedia->count() > 1)
                        <div class="mt-5">
                            <div class="section-header">Supporting Media</div>
                            <div class="row g-3 mt-1">
                                @foreach ($imageMedia as $media)
                                    <div class="col-6 col-md-3">
                                        <button class="lightbox-trigger" type="button" data-lightbox-src="{{ $media->image_url }}" data-lightbox-alt="{{ $title }}">
                                            <img src="{{ $media->image_url }}" class="gallery-thumb shadow-sm" alt="Gallery image">
                                        </button>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    @if ($documentMedia->isNotEmpty())
                        <div class="mt-5">
                            <div class="section-header">{{ $listing->listing_type === 'service' ? 'Submitted Documents' : 'Verification Documents' }}</div>
                            <div class="d-grid gap-2">
                                @foreach ($documentMedia as $media)
                                    <a class="text-decoration-none border rounded p-3 d-flex align-items-center gap-2" href="{{ $media->image_url }}" target="_blank" rel="noopener">
                                        <span class="material-symbols-outlined">description</span>
                                        <span>{{ ucwords(str_replace('_', ' ', $media->media_label ?: 'Document')) }}</span>
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <aside class="sticky-sidebar">
                <div class="sidebar-card shadow-sm">
                    <h6 class="fw-bold mb-3 text-muted small uppercase" style="letter-spacing: 0.5px; font-size: 11px;">Posted By</h6>
                    <div class="d-flex align-items-center gap-3 mb-4">
                        <div class="provider-avatar">
                            <span class="material-symbols-outlined" style="font-size: 24px;">person</span>
                        </div>
                        <div>
                            <div class="fw-bold text-dark" style="font-size: 15px;">{{ $providerName }}</div>
                            <div class="small text-muted" style="font-size: 12px;">Verified Provider</div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="small text-muted d-block mb-1" style="font-size: 11px;">Contact Phone</label>
                        <div class="fw-medium text-dark" style="font-size: 13px;">{{ $listing->provider_mobile ?? 'Not provided' }}</div>
                    </div>
                    <div class="mb-0">
                        <label class="small text-muted d-block mb-1" style="font-size: 11px;">Email Address</label>
                        <div class="fw-medium text-dark text-break" style="font-size: 13px;">{{ $listing->provider_email ?? 'Not provided' }}</div>
                    </div>
                </div>

                <div class="sidebar-card shadow-sm border-0 bg-dark text-white">
                    <h6 class="fw-bold mb-2" style="font-size: 14px;">Moderation Verdict</h6>
                    <p class="small opacity-75 mb-4" style="font-size: 12px; line-height: 1.4;">Please verify the content for community guidelines before taking action.</p>
                    
                    @if ($listing->status === 'pending')
                        <form class="js-moderation-confirm" method="POST" action="{{ route('admin.moderation.moderate', ['type' => $listing->listing_type, 'id' => $listing->id]) }}">
                            @csrf
                            <input name="status" type="hidden" value="approved">
                            <button type="submit" class="btn-action btn-approve shadow-sm">
                                <span class="material-symbols-outlined" style="font-size: 18px;">verified</span> Approve Listing
                            </button>
                        </form>

                        <form class="js-moderation-confirm" method="POST" action="{{ route('admin.moderation.moderate', ['type' => $listing->listing_type, 'id' => $listing->id]) }}">
                            @csrf
                            <input name="status" type="hidden" value="rejected">
                            <button type="submit" class="btn-action btn-reject">
                                <span class="material-symbols-outlined" style="font-size: 18px;">report</span> Reject Content
                            </button>
                        </form>
                    @else
                        <div class="text-center py-2 bg-secondary rounded text-uppercase fw-bold small mb-2" style="font-size: 11px; letter-spacing: 0.5px;">
                            Status: {{ $listing->status }}
                        </div>
                        @if ($listing->status === 'rejected')
                            <form class="js-moderation-confirm" method="POST" action="{{ route('admin.moderation.moderate', ['type' => $listing->listing_type, 'id' => $listing->id]) }}">
                                @csrf
                                <input name="status" type="hidden" value="approved">
                                <button type="submit" class="btn-action btn-approve shadow-sm">
                                    <span class="material-symbols-outlined" style="font-size: 18px;">verified</span> Approve Listing
                                </button>
                            </form>
                        @endif
                    @endif
                </div>

                <div class="text-center p-2 mt-2">
                    <div class="text-muted" style="font-size: 10px; letter-spacing: 0.5px;">
                        SUBMITTED ON<br>
                        <span class="fw-bold text-dark">{{ \Illuminate\Support\Carbon::parse($listing->created_at)->format('d M Y | h:i A') }}</span>
                    </div>
                </div>
            </aside>
        </div>
    </div>
</main>

<div id="imageLightbox" class="image-lightbox" aria-hidden="true" role="dialog" aria-modal="true">
    <div class="lightbox-panel">
        <button id="lightboxClose" class="lightbox-close" type="button" aria-label="Close image preview">
            <span class="material-symbols-outlined">close</span>
        </button>
        <img id="lightboxImage" src="" alt="">
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    (() => {
        const confirmModeration = (action) => {
            const isApprove = action === 'approved';
            const title = isApprove ? 'Approve listing?' : 'Reject listing?';
            const text = `This listing will be marked as ${isApprove ? 'approved' : 'rejected'}.`;

            if (!window.Swal) {
                return Promise.resolve(window.confirm(`${title} ${text}`));
            }

            return Swal.fire({
                title,
                text,
                icon: isApprove ? 'question' : 'warning',
                showCancelButton: true,
                confirmButtonText: isApprove ? 'Yes, approve' : 'Yes, reject',
                cancelButtonText: 'Cancel',
                confirmButtonColor: isApprove ? '#004b89' : '#dc2626',
                reverseButtons: true,
            }).then((result) => result.isConfirmed);
        };

        document.querySelectorAll('.js-moderation-confirm').forEach((form) => {
            form.addEventListener('submit', async (event) => {
                event.preventDefault();

                if (await confirmModeration(form.querySelector('input[name="status"]')?.value || 'approved')) {
                    form.submit();
                }
            });
        });

        const lightbox = document.getElementById('imageLightbox');
        const lightboxImage = document.getElementById('lightboxImage');
        const closeButton = document.getElementById('lightboxClose');

        if (!lightbox || !lightboxImage || !closeButton) {
            return;
        }

        const openLightbox = (src, alt) => {
            lightboxImage.src = src;
            lightboxImage.alt = alt || 'Listing image';
            lightbox.classList.add('show');
            lightbox.setAttribute('aria-hidden', 'false');
            document.body.style.overflow = 'hidden';
        };

        const closeLightbox = () => {
            lightbox.classList.remove('show');
            lightbox.setAttribute('aria-hidden', 'true');
            lightboxImage.src = '';
            lightboxImage.alt = '';
            document.body.style.overflow = '';
        };

        document.querySelectorAll('.lightbox-trigger').forEach((button) => {
            button.addEventListener('click', () => {
                openLightbox(button.dataset.lightboxSrc || '', button.dataset.lightboxAlt || '');
            });
        });

        closeButton.addEventListener('click', closeLightbox);
        lightbox.addEventListener('click', (event) => {
            if (event.target === lightbox) {
                closeLightbox();
            }
        });

        document.addEventListener('keydown', (event) => {
            if (event.key === 'Escape' && lightbox.classList.contains('show')) {
                closeLightbox();
            }
        });
    })();
</script>

@include('admin.partials.footer')