@include('frontend.partials.head', ['title' => 'Fily | Provider Lists'])

@include('frontend.dashboard.partials.styles')
@php
    $providerName = $provider?->business_name ?: ($provider?->name ?: 'Provider');
    $providerInitial = strtoupper(substr($providerName, 0, 1));
    $tabs = [
        'all' => ['label' => 'All', 'icon' => 'inventory_2'],
        'pending' => ['label' => 'Pending', 'icon' => 'pending_actions'],
        'rejected' => ['label' => 'Rejected', 'icon' => 'block'],
        'accepted' => ['label' => 'Accepted', 'icon' => 'verified'],
    ];
    $typeMeta = [
        'job' => ['label' => 'Job', 'icon' => 'work'],
        'rent' => ['label' => 'Rental', 'icon' => 'apartment'],
        'hostel' => ['label' => 'Hostel', 'icon' => 'bed'],
        'service' => ['label' => 'Service', 'icon' => 'construction'],
    ];
    $statusMeta = [
        'pending' => ['label' => 'Pending', 'class' => 'warning'],
        'rejected' => ['label' => 'Rejected', 'class' => 'danger'],
        'approved' => ['label' => 'Accepted', 'class' => 'success'],
    ];
    $visibilityMeta = [
        'visible' => ['label' => 'Visible', 'class' => 'success'],
        'hidden' => ['label' => 'Hidden', 'class' => 'warning'],
        'expired' => ['label' => 'Expired', 'class' => 'danger'],
    ];
@endphp
<style>
    .list-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
    .list-tab { align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); display: inline-flex; font-size: 13px; font-weight: 700; gap: 7px; padding: 8px 11px; text-decoration: none; }
    .list-tab.active { background: var(--brand); border-color: var(--brand); color: #fff; }
    .list-tab.active span { color: #fff; }
    .list-tab-count { background: #eaf3fb; border-radius: 999px; color: var(--brand); font-size: 11px; padding: 1px 7px; }
    .list-tab.active .list-tab-count { background: rgba(255,255,255,.18); color: #fff; }
    .listing-summary-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; }
    .listing-summary { background: #f7fbff; border: 1px solid #dbe6ef; border-radius: 12px; padding: 14px; }
    .listing-summary span { color: var(--muted); display: block; font-size: 12px; font-weight: 700; margin-bottom: 4px; text-transform: uppercase; }
    .listing-summary strong { color: var(--ink); font-size: 22px; }
    .listing-board { display: grid; gap: 12px; }
    .listing-row { align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) 112px 108px 132px 120px 184px; padding: 14px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
    .listing-row:hover { border-color: #b7d4eb; box-shadow: 0 12px 28px rgba(15, 54, 86, .08); transform: translateY(-1px); }
    .listing-thumb { align-items: center; background: #eaf3fb; border-radius: 12px; color: var(--brand); display: flex; flex: 0 0 auto; height: 58px; justify-content: center; overflow: hidden; width: 68px; }
    .listing-thumb img { height: 100%; object-fit: cover; width: 100%; }
    .listing-icon { align-items: center; background: #eaf3fb; border-radius: 12px; color: var(--brand); display: flex; flex: 0 0 auto; height: 40px; justify-content: center; width: 40px; }
    .listing-icon .material-symbols-outlined { font-size: 21px; }
    .listing-title { color: var(--ink); font-size: 15px; font-weight: 700; margin: 0 0 2px; }
    .listing-chip { align-items: center; background: #f4f8fb; border-radius: 999px; color: var(--muted); display: inline-flex; font-size: 11px; font-weight: 700; gap: 5px; padding: 5px 9px; }
    .listing-status { border-radius: 999px; display: inline-flex; font-size: 11px; font-weight: 800; padding: 5px 9px; text-transform: uppercase; }
    .listing-status.success { background: #dcfce7; color: #166534; }
    .listing-status.warning { background: #fef3c7; color: #92400e; }
    .listing-status.danger { background: #fee2e2; color: #991b1b; }
    .listing-price { font-size: 14px; font-weight: 700; }
    .visibility-toggle { align-items: center; border: 1px solid #cfe1ef; border-radius: 999px; display: inline-flex; font-size: 12px; font-weight: 800; gap: 6px; justify-content: center; min-height: 38px; padding: 8px 12px; transition: background .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease; }
    .visibility-toggle.is-visible { background: #dcfce7; border-color: #a7f3d0; color: #166534; }
    .visibility-toggle.is-hidden { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
    .visibility-toggle.is-expired { background: #fee2e2; border-color: #fecaca; color: #991b1b; }
    .visibility-toggle:disabled { opacity: .65; }
    .listing-actions { align-items: center; display: flex; gap: 8px; justify-content: flex-end; }
    .listing-action { align-items: center; border: 1px solid #cfe1ef; border-radius: 999px; color: var(--brand); display: inline-flex; font-size: 13px; font-weight: 800; gap: 6px; justify-content: center; min-height: 38px; padding: 8px 12px; text-decoration: none; }
    .listing-action:hover { background: #eaf3fb; color: var(--brand); }
    .listing-delete { align-items: center; background: #fff; border: 1px solid #fecaca; border-radius: 999px; color: #991b1b; display: inline-flex; height: 38px; justify-content: center; padding: 0; width: 38px; }
    .listing-delete:hover { background: #fee2e2; color: #7f1d1d; }
    .pagination-shell { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }
    .provider-pagination { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin: 0; }
    .provider-page-link { align-items: center; background: #fff; border: 1px solid #d6e3ee; border-radius: 10px; color: var(--ink); display: inline-flex; font-size: 13px; font-weight: 800; height: 38px; justify-content: center; min-width: 38px; padding: 0 12px; text-decoration: none; }
    .provider-page-link:hover { background: #eaf3fb; border-color: #b7d4eb; color: var(--brand); }
    .provider-page-link.active { background: var(--brand); border-color: var(--brand); color: #fff; }
    .provider-page-link.disabled { background: #f6f9fc; color: #9aabba; pointer-events: none; }
    @media (max-width: 991px) { .listing-row, .listing-summary-grid { grid-template-columns: 1fr; } }
</style>
</head>
<body>
@include('frontend.partials.header')

<main class="dashboard-shell">
    <div class="container">
        @include('frontend.dashboard.provider.partials.hero', [
            'provider' => $provider,
            'kicker' => 'Provider listings',
            'title' => 'Listings for '.$providerName,
            'description' => 'Track every listing by moderation status and latest submission date.',
            'actionUrl' => route('frontend.provider.add-list'),
            'actionIcon' => 'add_business',
            'actionLabel' => 'Add listing',
            'status' => null,
        ])

        <div class="dashboard-layout">
            @include('frontend.dashboard.provider.partials.sidebar', ['provider' => $provider, 'active' => 'lists'])

            <div class="dashboard-content">
                @if (session('status'))
                    <div class="alert alert-success mb-4" role="alert">{{ session('status') }}</div>
                @endif

                <section class="dash-card p-4 mb-4">
                    <div class="d-flex flex-column flex-lg-row justify-content-between gap-3 mb-4">
                        <div>
                            <h2 class="h5 fw-bold mb-1">Listing Status</h2>
                            <p class="muted mb-0">{{ $listings->total() }} {{ Str::plural('listing', $listings->total()) }} in this view.</p>
                        </div>
                        <div class="list-tabs">
                            @foreach ($tabs as $key => $tab)
                                <a class="list-tab {{ $status === $key ? 'active' : '' }}" href="{{ route('frontend.provider.lists', ['status' => $key]) }}">
                                    <span class="material-symbols-outlined" style="font-size:18px;">{{ $tab['icon'] }}</span>
                                    {{ $tab['label'] }}
                                    <span class="list-tab-count">{{ number_format((int) ($counts[$key] ?? 0)) }}</span>
                                </a>
                            @endforeach
                        </div>
                    </div>

                    <div class="listing-summary-grid">
                        @foreach ($tabs as $key => $tab)
                            <div class="listing-summary">
                                <span>{{ $tab['label'] }}</span>
                                <strong>{{ number_format((int) ($counts[$key] ?? 0)) }}</strong>
                            </div>
                        @endforeach
                    </div>

                    <div class="listing-board">
                    @forelse ($listings as $listing)
                        @php
                            $meta = $typeMeta[$listing->listing_type] ?? ['label' => ucfirst($listing->listing_type), 'icon' => 'inventory_2'];
                            $statusInfo = $statusMeta[$listing->status] ?? ['label' => ucfirst($listing->status), 'class' => 'warning'];
                            $visibility = $listing->visibility ?: 'visible';
                            $visibilityInfo = $visibilityMeta[$visibility] ?? $visibilityMeta['visible'];
                            $location = collect([$listing->location, $listing->city])->filter()->implode(', ');
                            $imageUrl = $listing->media_path ? asset('storage/'.$listing->media_path) : null;
                            $actionLabel = $listing->status === 'approved' ? 'View details' : 'Edit details';
                        @endphp
                        <article class="listing-row">
                            <div class="d-flex align-items-center gap-3 min-w-0">
                                <div class="listing-thumb">
                                    @if ($imageUrl)
                                        <img src="{{ $imageUrl }}" alt="{{ $listing->title }}">
                                    @else
                                        <span class="material-symbols-outlined">{{ $meta['icon'] }}</span>
                                    @endif
                                </div>
                                <div class="min-w-0">
                                    <h3 class="listing-title text-truncate">{{ $listing->title }}</h3>
                                    <p class="muted mb-0">{{ $location ?: 'Location not provided' }}</p>
                                    <p class="small muted mb-0">LST-{{ strtoupper($listing->listing_type) }}-{{ str_pad((string) $listing->id, 5, '0', STR_PAD_LEFT) }}</p>
                                </div>
                            </div>
                            <span class="listing-chip"><span class="material-symbols-outlined" style="font-size:16px;">{{ $meta['icon'] }}</span>{{ $meta['label'] }}</span>
                            <span class="listing-status {{ $statusInfo['class'] }}">{{ $statusInfo['label'] }}</span>
                            <button
                                class="visibility-toggle is-{{ $visibility === 'visible' ? 'visible' : ($visibility === 'expired' ? 'expired' : 'hidden') }}"
                                type="button"
                                data-visibility-toggle
                                data-current-visibility="{{ $visibility }}"
                                data-url="{{ route('frontend.provider.lists.visibility', ['type' => $listing->listing_type, 'id' => $listing->id]) }}"
                            >
                                <span class="material-symbols-outlined" style="font-size:18px;">{{ $visibility === 'visible' ? 'visibility' : ($visibility === 'expired' ? 'event_busy' : 'visibility_off') }}</span>
                                <span data-visibility-label>{{ $visibilityInfo['label'] }}</span>
                            </button>
                            <div>
                                <div class="listing-price">{{ $listing->price ? 'Rs '.number_format((float) $listing->price, 2) : 'No price' }}</div>
                                <div class="small muted">{{ \Illuminate\Support\Carbon::parse($listing->created_at)->format('d M Y') }} &middot; <span data-visibility-summary>{{ $visibilityInfo['label'] }}</span></div>
                            </div>
                            <div class="listing-actions">
                                <a class="listing-action" href="{{ route('frontend.provider.lists.details', ['type' => $listing->listing_type, 'id' => $listing->id]) }}">
                                    <span class="material-symbols-outlined" style="font-size:18px;">{{ $listing->status === 'approved' ? 'visibility' : 'edit' }}</span>
                                    {{ $actionLabel }}
                                </a>
                                <form method="POST" action="{{ route('frontend.provider.lists.destroy', ['type' => $listing->listing_type, 'id' => $listing->id]) }}" onsubmit="return confirm('Delete this listing?');">
                                    @csrf
                                    @method('DELETE')
                                    <button class="listing-delete" type="submit" aria-label="Delete listing" title="Delete listing">
                                        <span class="material-symbols-outlined" style="font-size:19px;">delete</span>
                                    </button>
                                </form>
                            </div>
                        </article>
                    @empty
                        <div class="text-center py-5">
                            <div class="metric-icon mx-auto mb-3"><span class="material-symbols-outlined">inventory_2</span></div>
                            <h3 class="h5 fw-bold">No listings found</h3>
                            <p class="muted mb-3">Listings matching this status will appear here.</p>
                            <a class="btn btn-brand px-4" href="{{ route('frontend.provider.add-list') }}">Add listing</a>
                        </div>
                    @endforelse
                    </div>
                </section>

                @if ($listings->hasPages())
                    <div class="dash-card p-3">
                        <div class="pagination-shell">
                            <span class="muted small">Showing {{ $listings->firstItem() }}-{{ $listings->lastItem() }} of {{ $listings->total() }} listings</span>
                            <nav class="provider-pagination" aria-label="Listing pagination">
                                @if ($listings->onFirstPage())
                                    <span class="provider-page-link disabled">Previous</span>
                                @else
                                    <a class="provider-page-link" href="{{ $listings->previousPageUrl() }}" rel="prev">Previous</a>
                                @endif

                                @for ($page = 1; $page <= $listings->lastPage(); $page++)
                                    @if ($page === $listings->currentPage())
                                        <span class="provider-page-link active">{{ $page }}</span>
                                    @else
                                        <a class="provider-page-link" href="{{ $listings->url($page) }}">{{ $page }}</a>
                                    @endif
                                @endfor

                                @if ($listings->hasMorePages())
                                    <a class="provider-page-link" href="{{ $listings->nextPageUrl() }}" rel="next">Next</a>
                                @else
                                    <span class="provider-page-link disabled">Next</span>
                                @endif
                            </nav>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</main>

@include('frontend.partials.footer')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const token = @json(csrf_token());
        const visibilityMeta = {
            visible: { label: 'Visible', icon: 'visibility', className: 'is-visible' },
            hidden: { label: 'Hidden', icon: 'visibility_off', className: 'is-hidden' },
            expired: { label: 'Expired', icon: 'event_busy', className: 'is-expired' },
        };

        document.querySelectorAll('[data-visibility-toggle]').forEach(button => {
            button.addEventListener('click', async () => {
                const current = button.dataset.currentVisibility || 'visible';
                const next = current === 'visible' ? 'hidden' : 'visible';
                const row = button.closest('.listing-row');

                button.disabled = true;

                try {
                    const response = await fetch(button.dataset.url, {
                        method: 'PATCH',
                        headers: {
                            'Accept': 'application/json',
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': token,
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        body: JSON.stringify({ visibility: next }),
                    });

                    if (!response.ok) {
                        throw new Error('Unable to update visibility.');
                    }

                    const payload = await response.json();
                    const visibility = payload.visibility || next;
                    const meta = visibilityMeta[visibility] || visibilityMeta.hidden;

                    button.dataset.currentVisibility = visibility;
                    button.classList.remove('is-visible', 'is-hidden', 'is-expired');
                    button.classList.add(meta.className);
                    button.querySelector('.material-symbols-outlined').textContent = meta.icon;
                    button.querySelector('[data-visibility-label]').textContent = meta.label;
                    row?.querySelector('[data-visibility-summary]')?.replaceChildren(document.createTextNode(meta.label));
                } catch (error) {
                    alert(error.message || 'Unable to update visibility.');
                } finally {
                    button.disabled = false;
                }
            });
        });
    });
</script>
</body>
</html>