@include('admin.partials.header')
@include('admin.partials.sidebar')
@include('admin.partials.topbar')
@include('admin.partials.management-styles')

@php
    $typeMeta = [
        'job' => ['label' => 'Jobs', 'icon' => 'work'],
        'rent' => ['label' => 'Rentals', 'icon' => 'apartment'],
        'hostel' => ['label' => 'Hostels', 'icon' => 'bed'],
        'service' => ['label' => 'Services', 'icon' => 'construction'],
    ];
    $activeTypes = $activeTypes ?? [];
    $totalApproved = array_sum($counts ?? []);
    $activeSort = ($filters['sort'] ?? 'newest') === 'oldest' ? 'oldest' : 'newest';
    $baseFilterQuery = array_filter([
        'search' => $filters['search'] ?? null,
        'date_from' => $filters['date_from'] ?? null,
        'date_to' => $filters['date_to'] ?? null,
        'sort' => $activeSort === 'oldest' ? 'oldest' : null,
    ]);
    $baseFilterQueryWithTypes = empty($activeTypes) ? $baseFilterQuery : array_merge($baseFilterQuery, ['types' => $activeTypes]);
@endphp

<style>
    .listing-cover { align-items: center; background: var(--color-surface-container); border-radius: 10px; color: var(--color-primary); display: flex; flex-shrink: 0; height: 48px; justify-content: center; overflow: hidden; width: 56px; }
    .listing-cover img { height: 100%; object-fit: cover; width: 100%; }
    .listing-actions { align-items: center; display: inline-flex; gap: 6px; justify-content: flex-end; }
    .admin-action.danger:hover { background: rgba(186, 26, 26, .1); color: var(--color-error); }
    .listing-filter-card { background: linear-gradient(180deg, #fff 0%, #f8fbff 100%); }
    .listing-filter-form { align-items: end; display: grid; gap: 12px; grid-template-columns: minmax(260px, 1.5fr) repeat(2, minmax(150px, 1fr)) auto; }
    .listing-filter-field label { color: var(--color-on-surface-variant); display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; margin-bottom: 6px; text-transform: uppercase; }
    .listing-filter-form .form-control { border: 1px solid var(--color-outline-variant); border-radius: 12px; min-height: 44px; }
    .listing-sort-menu .dropdown-item.active { background: var(--color-primary); color: #fff; }
    .listing-filter-actions { display: flex; gap: 8px; }
    @media (max-width: 1399.98px) and (min-width: 992px) {
        .listing-cover { border-radius: 8px; height: 44px; width: 50px; }
        .listing-filter-form { gap: 10px; grid-template-columns: minmax(220px, 1.35fr) repeat(2, minmax(140px, .8fr)) auto; }
        .listing-filter-field label { font-size: 10px; margin-bottom: 5px; }
        .listing-filter-form .form-control { font-size: 13px; min-height: 38px; }
        .listing-filter-actions .btn { font-size: 13px; padding: 7px 14px; }
        .admin-table .d-flex.align-items-center.gap-3 { gap: 12px !important; }
        .admin-table .form-select-sm { font-size: 13px; min-height: 34px; padding-bottom: 5px; padding-top: 5px; }
    }
    @media (max-width: 991.98px) { .listing-filter-form { grid-template-columns: 1fr 1fr; } .listing-filter-actions { grid-column: 1 / -1; } }
    @media (max-width: 575.98px) { .listing-filter-form { grid-template-columns: 1fr; } }
</style>

<main id="main" class="pt-4">
    <section class="d-flex flex-column flex-md-row align-items-md-end justify-content-between gap-3 mb-4">
        <div>
            <div class="admin-breadcrumb"><span>Admin</span><span class="material-symbols-outlined" style="font-size:16px;">chevron_right</span><span class="active">Listings</span></div>
            <h2 class="admin-page-title">Listing Inventory</h2>
            <p class="admin-page-subtitle">Approved marketplace listings ordered by {{ $activeSort === 'oldest' ? 'oldest approval' : 'latest approval' }}.</p>
        </div>
        <div class="dropdown listing-sort-menu">
            <button class="btn-outline-neutral dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-expanded="false">
                <span class="material-symbols-outlined" style="font-size:18px;">sort</span>
                {{ $activeSort === 'oldest' ? 'Oldest First' : 'Newest First' }}
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
                <li><a class="dropdown-item js-ajax-link {{ $activeSort === 'newest' ? 'active' : '' }}" href="{{ route('admin.listings.index', array_merge($baseFilterQueryWithTypes, ['sort' => 'newest'])) }}">Newest First</a></li>
                <li><a class="dropdown-item js-ajax-link {{ $activeSort === 'oldest' ? 'active' : '' }}" href="{{ route('admin.listings.index', array_merge($baseFilterQueryWithTypes, ['sort' => 'oldest'])) }}">Oldest First</a></li>
            </ul>
        </div>
    </section>

    <section class="admin-card listing-filter-card mb-4">
        <div class="admin-card-body">
            <div class="d-flex flex-column flex-lg-row justify-content-between gap-2 mb-3">
                <div>
                    <h3 class="admin-card-title mb-1">Filter listings</h3>
                    <p class="admin-meta mb-0">Search listing, provider, or location and narrow by approval date.</p>
                </div>
            </div>
            <form class="listing-filter-form js-ajax-filter" method="GET" action="{{ route('admin.listings.index') }}">
                @foreach ($activeTypes as $type)
                    <input name="types[]" type="hidden" value="{{ $type }}">
                @endforeach
                <input name="sort" type="hidden" value="{{ $activeSort }}">
                <div class="listing-filter-field">
                    <label for="listing-search">Search</label>
                    <input id="listing-search" class="form-control" name="search" type="search" value="{{ $filters['search'] ?? '' }}" placeholder="Title, provider, location">
                </div>
                <div class="listing-filter-field">
                    <label for="listing-date-from">From</label>
                    <input id="listing-date-from" class="form-control" name="date_from" type="date" value="{{ $filters['date_from'] ?? '' }}">
                </div>
                <div class="listing-filter-field">
                    <label for="listing-date-to">To</label>
                    <input id="listing-date-to" class="form-control" name="date_to" type="date" value="{{ $filters['date_to'] ?? '' }}">
                </div>
                <div class="listing-filter-actions">
                    <a class="btn btn-outline-secondary js-ajax-link" href="{{ route('admin.listings.index', empty($activeTypes) ? ['sort' => $activeSort] : ['types' => $activeTypes, 'sort' => $activeSort]) }}">Reset</a>
                </div>
            </form>
        </div>
    </section>
    
    <section class="row g-3 mb-4">
        <div class="col-12 col-sm-6 col-xl-3"><div class="admin-stat"><div class="admin-stat-icon"><span class="material-symbols-outlined">inventory_2</span></div><p class="admin-stat-value">{{ number_format($totalApproved) }}</p><p class="admin-stat-label">Approved listings</p></div></div>
        <div class="col-12 col-sm-6 col-xl-3"><div class="admin-stat"><div class="admin-stat-icon"><span class="material-symbols-outlined">work</span></div><p class="admin-stat-value">{{ number_format((int) ($counts['job'] ?? 0)) }}</p><p class="admin-stat-label">Job postings</p></div></div>
        <div class="col-12 col-sm-6 col-xl-3"><div class="admin-stat"><div class="admin-stat-icon"><span class="material-symbols-outlined">apartment</span></div><p class="admin-stat-value">{{ number_format((int) (($counts['rent'] ?? 0) + ($counts['hostel'] ?? 0))) }}</p><p class="admin-stat-label">Rental and hostel spaces</p></div></div>
        <div class="col-12 col-sm-6 col-xl-3"><div class="admin-stat"><div class="admin-stat-icon"><span class="material-symbols-outlined">construction</span></div><p class="admin-stat-value">{{ number_format((int) ($counts['service'] ?? 0)) }}</p><p class="admin-stat-label">Services listed</p></div></div>
    </section>


    <div class="admin-tabs">
        @php $listingFilterQuery = $baseFilterQuery; @endphp
        <a class="admin-tab js-ajax-link text-decoration-none {{ empty($activeTypes) ? 'active' : '' }}" href="{{ route('admin.listings.index', $listingFilterQuery) }}">All Listings <span class="admin-tab-count">{{ number_format($totalApproved) }}</span></a>
        @foreach ($typeMeta as $type => $meta)
            <a class="admin-tab js-ajax-link text-decoration-none {{ in_array($type, $activeTypes, true) ? 'active' : '' }}" href="{{ route('admin.listings.index', array_merge($listingFilterQuery, ['types' => [$type]])) }}">{{ $meta['label'] }} <span class="admin-tab-count">{{ number_format((int) ($counts[$type] ?? 0)) }}</span></a>
        @endforeach
    </div>

    <section class="admin-card">
        @if (session('success'))
            <div class="alert alert-success m-3 mb-0">{{ session('success') }}</div>
        @endif
        <div class="admin-card-body d-flex flex-column flex-lg-row justify-content-between gap-3">
            <div><h3 class="admin-card-title">Marketplace Listings</h3><p class="admin-meta mt-1">Only admin-approved content is shown here</p></div>
            <div class="admin-toolbar"><span class="admin-chip">Approved</span><span class="admin-meta">{{ $listings->total() }} records</span></div>
        </div>
        <div class="table-responsive">
            <table class="table admin-table mb-0">
                <thead><tr><th>Listing</th><th>Category</th><th>Provider</th><th>Rank</th><th>Status</th><th>Approved</th><th>Views</th><th class="text-end">Action</th></tr></thead>
                <tbody>
                    @forelse ($listings 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
                        <tr>
                            <td><div class="d-flex align-items-center gap-3"><div class="listing-cover">@if ($listing->image_url)<img src="{{ $listing->image_url }}" alt="{{ $listing->title }}">@else<span class="material-symbols-outlined">{{ $meta['icon'] }}</span>@endif</div><div><p class="admin-name">{{ $listing->title }}</p><p class="admin-meta">LST-{{ strtoupper($listing->listing_type) }}-{{ str_pad((string) $listing->id, 5, '0', STR_PAD_LEFT) }}{{ $location ? ' · '.Str::limit($location, 48) : '' }}</p></div></div></td>
                            <td><span class="admin-chip">{{ $meta['label'] }}</span></td>
                            <td>{{ $providerName }}</td>
                            <td>
                                <form method="POST" action="{{ route('admin.listings.rank', ['type' => $listing->listing_type, 'id' => $listing->id]) }}">
                                    @csrf
                                    <select class="form-select form-select-sm" name="rank" onchange="this.form.submit()" style="min-width:96px;">
                                        <option value="">Default</option>
                                        @for ($rank = 1; $rank <= 15; $rank++)
                                            <option value="{{ $rank }}" @selected((int) ($listing->reserved_rank ?? 0) === $rank)>#{{ $rank }}</option>
                                        @endfor
                                    </select>
                                </form>
                            </td>
                            <td><span class="admin-status success">Approved</span></td>
                            <td class="admin-meta">{{ $listing->approved_at ? \Illuminate\Support\Carbon::parse($listing->approved_at)->format('d M Y, h:i A') : \Illuminate\Support\Carbon::parse($listing->created_at)->format('d M Y, h:i A') }}</td>
                            <td>{{ number_format((int) $listing->views_count) }}</td>
                            <td class="text-end">
                                <div class="listing-actions">
                                    <a class="admin-action text-decoration-none" href="{{ route('admin.moderation.show', ['type' => $listing->listing_type, 'id' => $listing->id]) }}" title="View"><span class="material-symbols-outlined">visibility</span></a>
                                    <a class="admin-action text-decoration-none" href="{{ route('admin.listings.edit', ['type' => $listing->listing_type, 'id' => $listing->id]) }}" title="Edit"><span class="material-symbols-outlined">edit</span></a>
                                    <form action="{{ route('admin.listings.destroy', ['type' => $listing->listing_type, 'id' => $listing->id]) }}" method="POST" onsubmit="return confirm('Delete this listing? This will remove it from the marketplace inventory.');">
                                        @csrf
                                        @method('DELETE')
                                        <button class="admin-action danger" type="submit" title="Delete"><span class="material-symbols-outlined">delete</span></button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td class="text-center admin-meta py-5" colspan="8">No approved listings found.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="admin-pagination">{{ $listings->links('pagination::bootstrap-5') }}</div>
    </section>
</main>

<script>
    (() => {
        const initAdminAjaxFilters = () => {
            const main = document.getElementById('main');
            const forms = [...document.querySelectorAll('.js-ajax-filter')];
            let debounceTimer = null;

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

                initAdminAjaxFilters();
            };

            forms.forEach((form) => {
                form.addEventListener('submit', (event) => event.preventDefault());

                form.querySelectorAll('input[type="search"]').forEach((input) => {
                    input.addEventListener('input', () => {
                        clearTimeout(debounceTimer);
                        debounceTimer = setTimeout(() => loadUrl(formUrl(form)), 350);
                    });
                });

                form.querySelectorAll('input[type="date"]').forEach((input) => {
                    input.addEventListener('change', () => loadUrl(formUrl(form)));
                });
            });

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

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

@include('admin.partials.footer')