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

<style>
    .mod-layout {
        display: block;
    }

    .mod-card {
        background: #fff;
        border: 1px solid var(--color-outline-variant);
        border-radius: 14px;
        box-shadow: 0 8px 24px rgba(36, 59, 83, .06);
    }

    .filter-section {
        margin-bottom: 18px;
    }

    .filter-section-label {
        color: var(--color-outline);
        display: block;
        font-family: 'JetBrains Mono', monospace;
        font-size: 12px;
        letter-spacing: .08em;
        margin-bottom: 12px;
        text-transform: uppercase;
    }

    .filter-item,
    .urgency-btn {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 8px;
        color: var(--color-on-surface);
        display: flex;
        gap: 10px;
        padding: 10px 12px;
        width: 100%;
    }

    .filter-item:hover,
    .filter-item.active,
    .urgency-btn:hover {
        background: var(--color-surface-container-low);
    }

    .filter-item input {
        accent-color: var(--color-primary);
    }

    .filter-item-label {
        flex: 1;
        text-align: left;
    }

    .filter-badge {
        background: var(--color-surface-container);
        border-radius: 999px;
        color: var(--color-on-surface-variant);
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px;
        padding: 2px 8px;
    }

    .urgency-dot {
        border-radius: 50%;
        height: 8px;
        width: 8px;
    }

    .mod-page-title {
        color: var(--color-on-surface);
        font-family: 'Hanken Grotesk', sans-serif;
        font-size: clamp(32px, 4vw, 48px);
        font-weight: 700;
        margin: 0;
    }

    .mod-page-sub {
        color: var(--color-on-surface-variant);
        font-size: 18px;
        margin-top: 4px;
    }

    .btn-sort,
    .btn-bulk {
        align-items: center;
        border-radius: 999px;
        display: flex;
        font-family: 'JetBrains Mono', monospace;
        font-size: 14px;
        gap: 8px;
        padding: 9px 18px;
    }

    .btn-sort {
        background: #fff;
        border: 1px solid var(--color-outline-variant);
        color: var(--color-on-surface);
    }

    .btn-bulk {
        background: var(--color-primary);
        border: 0;
        color: #fff;
    }

    .sort-select {
        appearance: none;
        background: #fff;
        border: 1px solid var(--color-outline-variant);
        border-radius: 999px;
        color: var(--color-on-surface);
        font-family: 'JetBrains Mono', monospace;
        font-size: 14px;
        padding: 9px 44px 9px 42px;
    }

    .mod-search-form {
        align-items: center;
        display: flex;
        gap: 8px;
        flex: 1 1 360px;
        min-width: 280px;
    }

    .mod-search-input-wrap {
        flex: 1;
        position: relative;
    }

    .mod-search-input-wrap .material-symbols-outlined {
        color: var(--color-on-surface-variant);
        left: 14px;
        pointer-events: none;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .mod-search-input {
        background: #fff;
        border: 1px solid var(--color-outline-variant);
        border-radius: 999px;
        color: var(--color-on-surface);
        min-height: 42px;
        padding: 9px 44px;
        width: 100%;
    }

    .mod-search-reset {
        align-items: center;
        border-radius: 999px;
        display: inline-flex;
        font-family: 'JetBrains Mono', monospace;
        font-size: 13px;
        min-height: 42px;
        padding: 9px 14px;
    }

    .mod-search-reset {
        background: #fff;
        border: 1px solid var(--color-outline-variant);
        color: var(--color-on-surface);
        text-decoration: none;
    }

    .sort-wrap {
        flex: 0 0 auto;
        position: relative;
    }

    .sort-wrap .material-symbols-outlined {
        left: 18px;
        pointer-events: none;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .card-select {
        background: rgba(255, 255, 255, .92);
        border-radius: 999px;
        display: none;
        left: 12px;
        padding: 6px;
        position: absolute;
        top: 54px;
        z-index: 2;
    }

    .bulk-selecting .card-select {
        display: block;
    }

    .card-select input {
        accent-color: var(--color-primary);
        display: block;
        height: 16px;
        width: 16px;
    }

    .bulk-menu {
        background: #fff;
        border: 1px solid var(--color-outline-variant);
        border-radius: 12px;
        box-shadow: 0 12px 28px rgba(36, 59, 83, .14);
        display: none;
        padding: 8px;
        position: absolute;
        right: 0;
        top: calc(100% + 8px);
        width: 190px;
        z-index: 5;
    }

    .bulk-menu.show {
        display: block;
    }

    .bulk-menu button {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 8px;
        color: var(--color-on-surface);
        display: flex;
        gap: 8px;
        padding: 10px;
        text-align: left;
        width: 100%;
    }

    .bulk-menu button:hover {
        background: var(--color-surface-container-low);
    }

    .filter-menu {
        background: #fff;
        border: 1px solid var(--color-outline-variant);
        border-radius: 14px;
        box-shadow: 0 12px 28px rgba(36, 59, 83, .14);
        display: none;
        min-width: 280px;
        padding: 18px;
        position: absolute;
        right: 0;
        top: calc(100% + 8px);
        z-index: 6;
    }

    .filter-menu.show {
        display: block;
    }

    .filter-menu-header {
        align-items: center;
        border-bottom: 1px solid var(--color-outline-variant);
        display: flex;
        justify-content: space-between;
        margin: -2px 0 14px;
        padding-bottom: 12px;
    }

    .filter-menu-title {
        color: var(--color-on-surface);
        font-family: 'Hanken Grotesk', sans-serif;
        font-size: 16px;
        font-weight: 800;
        margin: 0;
    }

    .filter-menu-clear {
        color: var(--color-primary);
        font-family: 'JetBrains Mono', monospace;
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
    }

    .filter-menu-clear:hover {
        color: var(--color-primary);
        text-decoration: underline;
    }

    .mod-card {
        overflow: hidden;
        transition: opacity .3s, transform .25s, box-shadow .2s, border-color .2s;
    }

    .mod-card:hover {
        border-color: rgba(0, 75, 137, .28);
        box-shadow: 0 16px 36px rgba(36, 59, 83, .13);
        transform: translateY(-3px);
    }

    .mod-card-img-wrap {
        background: var(--color-surface-container);
        height: 168px;
        overflow: hidden;
        position: relative;
    }

    .mod-card-img {
        height: 100%;
        object-fit: cover;
        object-position: center;
        width: 100%;
    }

    .mod-card-img.is-service {
        object-position: center center;
    }

    .type-pill,
    .time-pill,
    .status-badge {
        border-radius: 999px;
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px;
        padding: 5px 10px;
    }

    .type-pill {
        align-items: center;
        background: rgba(255, 255, 255, .9);
        color: var(--color-primary);
        display: flex;
        gap: 4px;
    }

    .time-pill {
        background: rgba(228, 239, 255, .95);
        color: var(--color-on-surface-variant);
    }

    .img-badge-left,
    .img-badge-right {
        position: absolute;
        top: 12px;
    }

    .img-badge-left {
        left: 12px;
    }

    .img-badge-right {
        right: 12px;
    }

    .mod-card-body {
        padding: 18px;
    }

    .mod-card-title {
        color: var(--color-on-surface);
        font-family: 'Hanken Grotesk', sans-serif;
        font-size: 19px;
        font-weight: 700;
        line-height: 1.25;
        margin: 0;
    }

    .status-badge {
        align-items: center;
        display: inline-flex;
        gap: 6px;
        white-space: nowrap;
    }

    .status-badge::before {
        border-radius: 50%;
        content: "";
        height: 7px;
        width: 7px;
    }

    .status-pending-badge {
        background: #fff8df;
        color: #8a6400;
    }

    .status-pending-badge::before {
        background: #d99a00;
    }

    .status-rejected-badge {
        background: var(--color-error-container);
        color: var(--color-error);
    }

    .status-rejected-badge::before {
        background: var(--color-error);
    }

    .mod-tabs {
        border-bottom: 1px solid var(--color-outline-variant);
        display: flex;
        gap: 8px;
        margin-bottom: 24px;
    }

    .mod-tab {
        align-items: center;
        border-bottom: 3px solid transparent;
        color: var(--color-on-surface-variant);
        display: inline-flex;
        font-family: 'JetBrains Mono', monospace;
        font-size: 14px;
        gap: 8px;
        padding: 0 14px 14px;
        text-decoration: none;
    }

    .mod-tab.active {
        border-bottom-color: var(--color-primary);
        color: var(--color-primary);
    }

    .mod-tab-count {
        background: var(--color-surface-container);
        border-radius: 999px;
        color: inherit;
        font-size: 11px;
        padding: 2px 8px;
    }

    .btn-approve,
    .btn-reject,
    .btn-rejected-disabled,
    .btn-view {
        align-items: center;
        border: 0;
        border-radius: 10px;
        display: flex;
        font-family: 'JetBrains Mono', monospace;
        font-size: 14px;
        gap: 8px;
        justify-content: center;
        padding: 10px;
    }

    .btn-approve {
        background: var(--color-secondary);
        color: #fff;
        flex: 1;
    }

    .btn-reject {
        background: var(--color-error-container);
        color: var(--color-error);
        flex: 1;
    }

    .btn-rejected-disabled {
        background: var(--color-error-container);
        color: var(--color-error);
        cursor: not-allowed;
        opacity: .72;
        width: 100%;
    }

    .btn-view {
        align-self: stretch;
        background: transparent;
        border: 1px solid var(--color-outline-variant);
        color: var(--color-on-surface);
        text-decoration: none;
    }

    .mod-card-head {
        border-bottom: 1px solid var(--color-outline-variant);
        margin: -18px -18px 16px;
        padding: 16px 18px;
    }

    .mod-card-provider {
        min-height: 0;
    }

    .mod-meta-stack {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 16px;
    }

    .mod-meta-line {
        align-items: center;
        background: var(--color-surface-container-low);
        border: 1px solid transparent;
        border-radius: 999px;
        color: var(--color-on-surface-variant);
        display: inline-flex;
        font-size: 12px;
        gap: 6px;
        max-width: 100%;
        min-width: 0;
        padding: 6px 10px;
    }

    .mod-meta-line .material-symbols-outlined {
        color: var(--color-primary);
        flex: 0 0 auto;
        font-size: 16px;
    }

    .mod-meta-line span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mod-actions {
        background: var(--color-surface-container-low);
        border-radius: 12px;
        display: grid;
        gap: 8px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
        padding: 8px;
    }

    .mod-actions-rejected {
        grid-template-columns: minmax(0, 1fr) 44px;
    }

    .rejected-action-stack {
        display: grid;
        gap: 8px;
        min-width: 0;
    }

    .mod-actions form {
        min-width: 0;
    }

    .empty-mod-card {
        align-items: center;
        background: #fff;
        border: 1px solid var(--color-outline-variant);
        border-radius: 16px;
        color: var(--color-on-surface-variant);
        display: flex;
        flex-direction: column;
        gap: 10px;
        justify-content: center;
        min-height: 280px;
        text-align: center;
    }

    .filter-actions {
        display: flex;
        gap: 8px;
    }

    .filter-actions .btn-sort {
        justify-content: center;
        width: 100%;
    }

    .mod-toolbar {
        align-items: center;
        display: flex;
        flex: 1 1 auto;
        flex-wrap: nowrap;
        gap: 8px;
        justify-content: flex-end;
        min-width: 0;
        overflow: visible;
        padding-bottom: 2px;
    }

    .mod-toolbar > .position-relative,
    .mod-toolbar > form:not(.mod-search-form) {
        flex: 0 0 auto;
    }

    .mod-header-row {
        align-items: flex-end;
        display: flex;
        gap: 16px;
        justify-content: space-between;
        margin-bottom: 24px;
    }

    .mod-header-copy {
        flex: 0 0 auto;
    }

    @media (max-width: 1399.98px) and (min-width: 992px) {
        .mod-page-title {
            font-size: clamp(28px, 2.8vw, 38px);
        }

        .mod-page-sub {
            font-size: 14px;
        }

        .mod-header-row {
            align-items: stretch;
            flex-direction: column;
            gap: 14px;
            margin-bottom: 18px;
        }

        .mod-header-copy {
            flex: 1 1 auto;
            min-width: 0;
        }

        .mod-toolbar {
            flex-wrap: wrap;
            justify-content: flex-start;
        }

        .mod-search-form {
            flex: 1 1 400px;
            min-width: 300px;
        }

        .btn-sort,
        .btn-bulk {
            font-size: 13px;
            padding: 8px 14px;
        }

        .sort-select {
            font-size: 13px;
            padding-bottom: 8px;
            padding-top: 8px;
        }

        .mod-search-input {
            font-size: 13px;
            min-height: 38px;
        }

        .mod-tabs {
            margin-bottom: 18px;
        }

        .mod-tab {
            font-size: 12px;
            padding-bottom: 12px;
        }

        .mod-card-img-wrap {
            height: 146px;
        }

        .mod-card-body {
            padding: 14px;
        }

        .mod-card-head {
            margin: -14px -14px 14px;
            padding: 14px;
        }

        .mod-card-title {
            font-size: 17px;
        }

        .mod-meta-line {
            font-size: 11px;
            padding: 5px 9px;
        }

        .btn-approve,
        .btn-reject,
        .btn-rejected-disabled,
        .btn-view {
            border-radius: 8px;
            font-size: 12px;
            gap: 6px;
            padding: 8px;
        }
    }

    @media (max-width: 1199px) {
        .mod-header-row {
            align-items: stretch;
            flex-direction: column;
        }

        .mod-toolbar {
            justify-content: flex-start;
        }
    }

    @media (max-width: 991px) {
        .mod-layout {
            grid-template-columns: 1fr;
        }

        .mod-toolbar {
            flex-wrap: wrap;
            overflow-x: visible;
        }

        .mod-search-form {
            flex-basis: 100%;
        }
    }
</style>

@php
    $typeMeta = [
        'job' => ['label' => 'Jobs', 'icon' => 'work'],
        'rent' => ['label' => 'Rentals', 'icon' => 'apartment'],
        'hostel' => ['label' => 'Hostels', 'icon' => 'bed'],
        'service' => ['label' => 'Services', 'icon' => 'construction'],
    ];
    $activeTypes = $activeTypes ?? [];
    $tab = $tab ?? 'pending';
    $rejectedCounts = $rejectedCounts ?? [];
    $rejectedListings = $rejectedListings ?? collect();
    $totalPending = array_sum($counts ?? []);
    $totalRejected = array_sum($rejectedCounts);
    $filterCounts = $tab === 'rejected' ? $rejectedCounts : ($counts ?? []);
    $filterTotal = $tab === 'rejected' ? $totalRejected : $totalPending;
    $activeListings = $tab === 'rejected' ? $rejectedListings : $listings;
    $activeStatusClass = $tab === 'rejected' ? 'status-rejected-badge' : 'status-pending-badge';
    $activeStatusLabel = $tab === 'rejected' ? 'REJECTED' : 'PENDING';
    $activeTitle = $tab === 'rejected' ? 'Rejected Listings' : 'Pending Approval';
    $activeDescription = $tab === 'rejected'
        ? 'Showing '.$activeListings->total().' rejected '.Str::plural('submission', $activeListings->total()).'.'
        : 'Reviewing '.$activeListings->total().' pending '.Str::plural('submission', $activeListings->total()).'.';
    $sort = $sort ?? 'newest';
@endphp

<main id="main" class="pt-4">
    <section class="mod-layout">
        <section>
            <div class="mod-header-row">
                <div class="mod-header-copy">
                    <h2 class="mod-page-title">{{ $activeTitle }}</h2>
                    <p class="mod-page-sub">{{ $activeDescription }}</p>
                </div>
                <div class="d-flex gap-2 align-items-center mod-toolbar">
                    <div class="position-relative">
                        <button id="filterMenuButton" class="btn-sort" type="button">
                            <span class="material-symbols-outlined" style="font-size:18px;">filter_alt</span>
                            Filters
                            @if (! empty($activeTypes))
                                <span class="filter-badge">{{ count($activeTypes) }}</span>
                            @endif
                        </button>
                        <form id="moderationFilterForm" class="filter-menu" method="GET" action="{{ route('admin.moderation.index') }}">
                            <input name="sort" type="hidden" value="{{ $sort }}">
                            <input name="tab" type="hidden" value="{{ $tab }}">
                            @if ($search !== '')
                                <input name="search" type="hidden" value="{{ $search }}">
                            @endif
                            <div class="filter-menu-header">
                                <p class="filter-menu-title">Categories</p>
                                @if (! empty($activeTypes))
                                    <a class="filter-menu-clear js-ajax-link" href="{{ route('admin.moderation.index', array_merge(request()->except(['types', 'pending_page', 'rejected_page']), ['tab' => $tab])) }}">Clear</a>
                                @endif
                            </div>
                            <div class="filter-section">
                                <span class="filter-section-label">Listing Categories</span>
                                <label class="filter-item {{ empty($activeTypes) ? 'active' : '' }}">
                                    <input id="allListingFilter" type="checkbox" @checked(empty($activeTypes))>
                                    <span class="filter-item-label">All Listings</span>
                                    <span class="filter-badge">{{ $filterTotal }}</span>
                                </label>

                                @foreach ($typeMeta as $type => $meta)
                                    <label class="filter-item {{ in_array($type, $activeTypes, true) ? 'active' : '' }}">
                                        <input name="types[]" type="checkbox" value="{{ $type }}" @checked(in_array($type, $activeTypes, true))>
                                        <span class="filter-item-label">{{ $meta['label'] }}</span>
                                        <span class="filter-badge">{{ $filterCounts[$type] ?? 0 }}</span>
                                    </label>
                                @endforeach
                            </div>
                        </form>
                    </div>
                    <form class="mod-search-form" method="GET" action="{{ route('admin.moderation.index') }}">
                        <input name="tab" type="hidden" value="{{ $tab }}">
                        <input name="sort" type="hidden" value="{{ $sort }}">
                        @foreach ($activeTypes as $type)
                            <input name="types[]" type="hidden" value="{{ $type }}">
                        @endforeach
                        <div class="mod-search-input-wrap">
                            <span class="material-symbols-outlined" style="font-size:18px;">search</span>
                            <input class="mod-search-input" name="search" type="search" value="{{ $search }}" placeholder="Search title, provider, location">
                        </div>
                        @if ($search !== '')
                            <a class="mod-search-reset js-ajax-link" href="{{ route('admin.moderation.index', array_merge(request()->except(['search', 'pending_page', 'rejected_page']), ['tab' => $tab])) }}">Reset</a>
                        @endif
                    </form>
                    <form method="GET" action="{{ route('admin.moderation.index') }}" class="sort-wrap">
                        <input name="tab" type="hidden" value="{{ $tab }}">
                        @if ($search !== '')
                            <input name="search" type="hidden" value="{{ $search }}">
                        @endif
                        @foreach ($activeTypes as $type)
                            <input name="types[]" type="hidden" value="{{ $type }}">
                        @endforeach
                        <span class="material-symbols-outlined" style="font-size:18px;">sort</span>
                        <select class="sort-select" name="sort">
                            <option value="newest" @selected($sort === 'newest')>Newest First</option>
                            <option value="oldest" @selected($sort === 'oldest')>Oldest First</option>
                        </select>
                    </form>
                    @if ($tab === 'pending')
                        <form id="bulkModerationForm" method="POST" action="{{ route('admin.moderation.bulk') }}" class="position-relative">
                            @csrf
                            <input id="bulkActionInput" name="action" type="hidden">
                            <button id="bulkActionButton" class="btn-bulk" type="button">
                                <span data-bulk-label>Bulk Action</span> (<span id="selectedCount">0</span>)
                            </button>
                            <div id="bulkMenu" class="bulk-menu">
                                <button type="button" data-bulk-action="approved"><span class="material-symbols-outlined">check_circle</span> Approve selected</button>
                                <button type="button" data-bulk-action="rejected"><span class="material-symbols-outlined">cancel</span> Reject selected</button>
                            </div>
                        </form>
                    @endif
                </div>
            </div>

            <nav class="mod-tabs" aria-label="Moderation lists">
                <a class="mod-tab {{ $tab === 'pending' ? 'active' : '' }}" href="{{ route('admin.moderation.index', array_merge(request()->except(['tab', 'pending_page', 'rejected_page']), ['tab' => 'pending'])) }}">
                    Pending
                    <span class="mod-tab-count">{{ $totalPending }}</span>
                </a>
                <a class="mod-tab {{ $tab === 'rejected' ? 'active' : '' }}" href="{{ route('admin.moderation.index', array_merge(request()->except(['tab', 'pending_page', 'rejected_page']), ['tab' => 'rejected'])) }}">
                    Rejected
                    <span class="mod-tab-count">{{ $totalRejected }}</span>
                </a>
            </nav>

            @if ($activeListings->isEmpty())
                <div class="empty-mod-card">
                    <span class="material-symbols-outlined" style="font-size:48px;color:var(--color-secondary);">{{ $tab === 'rejected' ? 'block' : 'task_alt' }}</span>
                    <h3 class="mb-0">No {{ $tab }} listings</h3>
                    <p class="mb-0">Everything in this filter is clear.</p>
                </div>
            @else
                <div class="row g-4">
                    @foreach ($activeListings as $listing)
                        @php
                            $meta = $typeMeta[$listing->listing_type] ?? ['label' => ucfirst($listing->listing_type), 'icon' => 'inventory_2'];
                            $providerName = $listing->provider_business_name ?: ($listing->provider_name ?: ($listing->provider_mobile ?: 'Unknown provider'));
                            $location = collect([$listing->location, $listing->city, $listing->state])->filter()->implode(', ');
                        @endphp
                        <div class="col-12 col-md-6 col-xl-4">
                            <div class="mod-card">
                                <div class="mod-card-img-wrap">
                                    @if ($tab === 'pending')
                                        <label class="card-select" title="Select for bulk action">
                                            <input class="listing-select" form="bulkModerationForm" name="items[]" type="checkbox" value="{{ $listing->listing_type }}:{{ $listing->id }}">
                                        </label>
                                    @endif
                                    @if ($listing->image_url)
                                        <img class="mod-card-img is-{{ $listing->listing_type }}" src="{{ $listing->image_url }}" alt="{{ $listing->title }}">
                                    @else
                                        <div class="mod-card-img d-flex align-items-center justify-content-center" style="background:var(--color-surface-container);color:var(--color-primary);">
                                            <span class="material-symbols-outlined" style="font-size:64px;">{{ $meta['icon'] }}</span>
                                        </div>
                                    @endif
                                    <div class="img-badge-left"><span class="type-pill"><span class="material-symbols-outlined">{{ $meta['icon'] }}</span> {{ strtoupper($meta['label']) }}</span></div>
                                    <div class="img-badge-right"><span class="time-pill">{{ \Illuminate\Support\Carbon::parse($listing->created_at)->diffForHumans() }}</span></div>
                                </div>
                                <div class="mod-card-body">
                                    <div class="mod-card-head">
                                        <div class="d-flex justify-content-between align-items-start gap-3">
                                            <h4 class="mod-card-title">{{ $listing->title }}</h4>
                                            <span class="status-badge {{ $activeStatusClass }}">{{ $activeStatusLabel }}</span>
                                        </div>
                                    </div>
                                    <div class="mod-meta-stack">
                                        <div class="mod-meta-line"><span class="material-symbols-outlined">storefront</span><span>{{ $providerName }}</span></div>
                                        @if ($location)
                                            <div class="mod-meta-line"><span class="material-symbols-outlined">location_on</span><span>{{ Str::limit($location, 72) }}</span></div>
                                        @endif
                                    </div>
                                    <div class="mod-actions {{ $tab === 'rejected' ? 'mod-actions-rejected' : '' }}">
                                        @if ($tab === 'pending')
                                            <form class="flex-fill 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 class="btn-approve w-100" type="submit"><span class="material-symbols-outlined">check_circle</span> Approve</button>
                                            </form>
                                            <form class="flex-fill 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 class="btn-reject w-100" type="submit"><span class="material-symbols-outlined">cancel</span> Reject</button>
                                            </form>
                                        @else
                                            <div class="rejected-action-stack">
                                                <button class="btn-rejected-disabled" type="button" disabled><span class="material-symbols-outlined">block</span> Already Rejected</button>
                                                <form class="flex-fill 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 class="btn-approve w-100" type="submit"><span class="material-symbols-outlined">check_circle</span> Approve</button>
                                                </form>
                                            </div>
                                        @endif
                                        <a class="btn-view" href="{{ route('admin.moderation.show', ['type' => $listing->listing_type, 'id' => $listing->id]) }}" title="View Details"><span class="material-symbols-outlined">visibility</span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="admin-pagination mt-4">
                    {{ $activeListings->links('pagination::bootstrap-5') }}
                </div>
            @endif
        </section>
    </section>
</main>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    (() => {
        const confirmModeration = (action, count = 1) => {
            const isApprove = action === 'approved';
            const verb = isApprove ? 'approve' : 'reject';
            const title = isApprove ? 'Approve listing?' : 'Reject listing?';
            const text = count > 1
                ? `This will ${verb} ${count} selected listings.`
                : `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);
        };

        const formUrl = (form) => {
            const url = new URL(form.action, window.location.origin);
            const data = new FormData(form);

            data.forEach((value, key) => {
                if (String(value).trim() !== '') {
                    url.searchParams.append(key, value);
                }
            });

            return url;
        };

        const loadUrl = async (url, push = true) => {
            const main = document.getElementById('main');
            const response = await fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
            const html = await response.text();
            const nextMain = new DOMParser().parseFromString(html, 'text/html').querySelector('#main');

            if (! nextMain || ! main) {
                window.location.href = url;
                return;
            }

            main.innerHTML = nextMain.innerHTML;

            if (push) {
                window.history.pushState({}, '', url);
            }

            initModerationPage();
        };

        const initModerationPage = () => {
            const filterForm = document.getElementById('moderationFilterForm');
            const filterButton = document.getElementById('filterMenuButton');
            const allFilter = document.getElementById('allListingFilter');
            const searchForm = document.querySelector('.mod-search-form');
            const sortForm = document.querySelector('.sort-wrap');
            const typeFilters = filterForm ? [...filterForm.querySelectorAll('input[name="types[]"]')] : [];
            const listingSelects = [...document.querySelectorAll('.listing-select')];
            const moderationMain = document.getElementById('main');
            const selectedCount = document.getElementById('selectedCount');
            const bulkButton = document.getElementById('bulkActionButton');
            const bulkMenu = document.getElementById('bulkMenu');
            const bulkForm = document.getElementById('bulkModerationForm');
            const bulkActionInput = document.getElementById('bulkActionInput');
            const bulkLabel = document.querySelector('[data-bulk-label]');
            let debounceTimer = null;

            filterButton?.addEventListener('click', (event) => {
                event.stopPropagation();
                filterForm?.classList.toggle('show');
            });

            filterForm?.addEventListener('submit', (event) => event.preventDefault());
            searchForm?.addEventListener('submit', (event) => event.preventDefault());
            sortForm?.addEventListener('submit', (event) => event.preventDefault());

            allFilter?.addEventListener('change', () => {
                typeFilters.forEach((input) => input.checked = false);
                loadUrl(formUrl(filterForm));
            });

            typeFilters.forEach((input) => {
                input.addEventListener('change', () => {
                    if (allFilter) {
                        allFilter.checked = typeFilters.every((typeInput) => !typeInput.checked);
                    }

                    loadUrl(formUrl(filterForm));
                });
            });

            searchForm?.querySelector('input[type="search"]')?.addEventListener('input', () => {
                clearTimeout(debounceTimer);
                debounceTimer = setTimeout(() => loadUrl(formUrl(searchForm)), 350);
            });

            sortForm?.querySelector('select')?.addEventListener('change', () => loadUrl(formUrl(sortForm)));

            const updateBulkCount = () => {
                const count = listingSelects.filter((input) => input.checked).length;
                if (selectedCount) {
                    selectedCount.textContent = count;
                }

                if (bulkLabel) {
                    bulkLabel.textContent = moderationMain?.classList.contains('bulk-selecting') && count === 0 ? 'Done' : 'Bulk Action';
                }
            };

            const leaveBulkMode = () => {
                moderationMain?.classList.remove('bulk-selecting');
                bulkMenu?.classList.remove('show');
                listingSelects.forEach((input) => input.checked = false);
                updateBulkCount();
            };

            listingSelects.forEach((input) => input.addEventListener('change', updateBulkCount));

            bulkButton?.addEventListener('click', () => {
                if (!moderationMain?.classList.contains('bulk-selecting')) {
                    moderationMain?.classList.add('bulk-selecting');
                    updateBulkCount();
                    return;
                }

                const selectedTotal = listingSelects.filter((input) => input.checked).length;

                if (selectedTotal === 0) {
                    leaveBulkMode();
                    return;
                }

                if (bulkMenu?.classList.contains('show')) {
                    leaveBulkMode();
                    return;
                }

                bulkMenu?.classList.add('show');
            });

            document.querySelectorAll('.js-ajax-link, .mod-tab, .admin-pagination a').forEach((link) => {
                link.addEventListener('click', (event) => {
                    event.preventDefault();
                    loadUrl(link.href);
                });
            });

            document.querySelectorAll('[data-bulk-action]').forEach((button) => {
                button.addEventListener('click', async () => {
                    const selected = listingSelects.filter((input) => input.checked);

                    if (selected.length === 0) {
                        return;
                    }

                    bulkActionInput.value = button.dataset.bulkAction;

                    if (await confirmModeration(button.dataset.bulkAction, selected.length)) {
                        bulkForm.submit();
                    }
                });
            });

            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();
                    }
                });
            });

            updateBulkCount();
        };

        document.addEventListener('click', (event) => {
            const filterForm = document.getElementById('moderationFilterForm');
            const filterButton = document.getElementById('filterMenuButton');
            const bulkForm = document.getElementById('bulkModerationForm');
            const bulkMenu = document.getElementById('bulkMenu');

            if (!bulkForm?.contains(event.target)) {
                bulkMenu?.classList.remove('show');
            }

            if (!filterForm?.contains(event.target) && !filterButton?.contains(event.target)) {
                filterForm?.classList.remove('show');
            }
        });

        window.addEventListener('popstate', () => window.location.reload());
        initModerationPage();
    })();
</script>

@include('admin.partials.footer')