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

@php
    $typeLabels = [
        'job' => 'Job',
        'rent' => 'Rental',
        'hostel' => 'Hostel',
        'service' => 'Service',
    ];
    $statusMeta = [
        'active' => ['label' => 'Active', 'class' => 'review-status-active'],
        'pending' => ['label' => 'Pending', 'class' => 'review-status-pending'],
        'inactive' => ['label' => 'Inactive', 'class' => 'review-status-inactive'],
    ];
@endphp

<style>
    .review-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 24px 24px; }
    .review-card { background: #fff; border: 1px solid var(--color-outline-variant); border-radius: 18px; box-shadow: 0 12px 34px rgba(36, 59, 83, .07); color: inherit; display: flex; flex-direction: column; min-height: 300px; padding: 20px; text-align: left; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; width: 100%; }
    .review-card:hover { border-color: #b7d4eb; box-shadow: 0 18px 42px rgba(36, 59, 83, .11); transform: translateY(-2px); }
    .review-card:focus { border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(25, 103, 210, .14); outline: 0; }
    .review-top { align-items: flex-start; display: flex; justify-content: space-between; gap: 12px; }
    .review-type { background: #eaf3fb; border-radius: 999px; color: var(--color-primary); display: inline-flex; font-size: 11px; font-weight: 800; padding: 6px 10px; text-transform: uppercase; }
    .review-status { border-radius: 999px; display: inline-flex; font-size: 11px; font-weight: 800; padding: 6px 10px; text-transform: uppercase; }
    .review-status-pending { background: #fff4d6; color: #875200; }
    .review-status-active { background: #dcfce7; color: #166534; }
    .review-status-inactive { background: #e5e7eb; color: #374151; }
    .review-listing-id { color: var(--color-on-surface-variant); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; }
    .review-stars { align-items: center; color: #f5a623; display: flex; gap: 1px; line-height: 1; white-space: nowrap; }
    .review-stars .material-symbols-outlined { font-size: 20px; font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20; }
    .review-comment { color: var(--color-on-surface); font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
    .review-person-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .review-person { background: #f3f8ff; border: 1px solid #dbe8f4; border-radius: 14px; padding: 13px; }
    .review-avatar { align-items: center; background: var(--color-primary); border-radius: 12px; color: #fff; display: flex; flex: 0 0 auto; font-weight: 900; height: 40px; justify-content: center; width: 40px; }
    .review-detail-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .review-detail-box { background: #f3f8ff; border: 1px solid #dbe8f4; border-radius: 14px; padding: 14px; }
    .review-detail-label { color: var(--color-on-surface-variant); font-size: 11px; font-weight: 800; margin-bottom: 4px; text-transform: uppercase; }
    .review-detail-value { color: var(--color-on-surface); font-weight: 800; overflow-wrap: anywhere; }
    .review-filter-card { background: linear-gradient(180deg, #fff 0%, #f8fbff 100%); }
    .review-filter-form { align-items: end; display: grid; gap: 12px; grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(150px, 1fr)) auto; }
    .review-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; }
    .review-filter-form .form-control,
    .review-filter-form .form-select { border: 1px solid var(--color-outline-variant); border-radius: 12px; min-height: 44px; }
    .review-filter-actions { display: flex; gap: 8px; }
    @media (max-width: 1399.98px) { .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 1199.98px) { .review-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .review-filter-actions { grid-column: 1 / -1; } }
    @media (max-width: 991.98px) { .review-grid { grid-template-columns: 1fr; padding-inline: 16px; } }
    @media (max-width: 575.98px) { .review-detail-grid, .review-person-grid { 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">Reviews</span></div>
            <h2 class="admin-page-title">Customer Reviews</h2>
            <p class="admin-page-subtitle">Review feedback submitted from public listing detail pages.</p>
        </div>
    </section>

    <section class="admin-card review-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 reviews</h3>
                    <p class="admin-meta mb-0">Search by customer/provider identity, category, or submitted date.</p>
                </div>
            </div>
            <form class="review-filter-form js-ajax-filter" method="GET" action="{{ route('admin.reviews.index') }}">
                <div class="review-filter-field">
                    <label for="review-search">Search</label>
                    <input id="review-search" class="form-control" name="search" type="search" value="{{ $filters['search'] ?? '' }}" placeholder="Provider/customer name or number">
                </div>
                <div class="review-filter-field">
                    <label for="review-category">Category</label>
                    <select id="review-category" class="form-select" name="category">
                        <option value="">All categories</option>
                        @foreach ($typeLabels as $type => $label)
                            <option value="{{ $type }}" @selected(($filters['category'] ?? null) === $type)>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="review-filter-field">
                    <label for="review-date-from">From</label>
                    <input id="review-date-from" class="form-control" name="date_from" type="date" value="{{ $filters['date_from'] ?? '' }}">
                </div>
                <div class="review-filter-field">
                    <label for="review-date-to">To</label>
                    <input id="review-date-to" class="form-control" name="date_to" type="date" value="{{ $filters['date_to'] ?? '' }}">
                </div>
                <div class="review-filter-actions">
                    <a class="btn btn-outline-secondary js-ajax-link" href="{{ route('admin.reviews.index') }}">Reset</a>
                </div>
            </form>
        </div>
    </section>

    <section class="row g-3 mb-4">
        <div class="col-12 col-md-6">
            <div class="admin-stat"><div class="admin-stat-icon"><span class="material-symbols-outlined">reviews</span></div><p class="admin-stat-value">{{ number_format($totalCount) }}</p><p class="admin-stat-label">Total reviews</p></div>
        </div>
        <div class="col-12 col-md-6">
            <div class="admin-stat"><div class="admin-stat-icon"><span class="material-symbols-outlined">notifications</span></div><p class="admin-stat-value">{{ number_format($pendingCount) }}</p><p class="admin-stat-label">Pending reviews</p></div>
        </div>
    </section>

    

    <section class="admin-card">
        <div class="admin-card-body d-flex flex-column flex-lg-row justify-content-between gap-3">
            <div><h3 class="admin-card-title">Review Inbox</h3><p class="admin-meta mt-1">Newest reviews first</p></div>
            <span class="admin-chip">{{ $reviews->total() }} records</span>
        </div>

        @if ($reviews->isEmpty())
            <div class="text-center admin-meta py-5">No reviews yet.</div>
        @else
            <div class="review-grid">
                @foreach ($reviews as $review)
                    @php
                        $customerName = $review->customer?->name ?: 'Customer #'.$review->customer_id;
                        $customerInitial = strtoupper(substr($customerName, 0, 1));
                        $providerName = $review->provider?->business_name ?: ($review->provider?->name ?: 'Provider #'.$review->provider_id);
                        $status = $statusMeta[$review->status] ?? ['label' => ucfirst((string) $review->status), 'class' => 'review-status-inactive'];
                        $typeLabel = $typeLabels[$review->listing_type] ?? ucfirst((string) $review->listing_type);
                        $listingReference = 'LST-'.strtoupper($review->listing_type).'-'.str_pad((string) $review->listing_id, 5, '0', STR_PAD_LEFT);
                    @endphp

                    <button class="review-card" type="button" data-bs-toggle="modal" data-bs-target="#adminReviewModal-{{ $review->id }}">
                        <div class="review-top mb-3">
                            <span class="review-type">{{ $typeLabel }}</span>
                            <span class="review-status {{ $status['class'] }}">{{ $status['label'] }}</span>
                        </div>
                        <div class="review-listing-id mb-2">{{ $listingReference }}</div>
                        <div class="review-stars mb-3">
                            @for ($star = 1; $star <= 5; $star++)
                                <span class="material-symbols-outlined">{{ $star <= (int) $review->rating ? 'star' : 'star_outline' }}</span>
                            @endfor
                        </div>
                        <p class="review-comment mb-4">{{ $review->review ?: 'No written comment was added.' }}</p>
                        <div class="review-person-grid mt-auto">
                            <div class="review-person">
                                <div class="d-flex align-items-center gap-3">
                                    <div class="review-avatar">{{ $customerInitial }}</div>
                                    <div class="min-w-0">
                                        <div class="review-detail-label mb-1">Customer</div>
                                        <div class="admin-name text-truncate">{{ $customerName }}</div>
                                        <div class="admin-meta text-truncate">{{ $review->customer?->mobile ?: $review->customer?->email ?: 'Contact not shared' }}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="review-person">
                                <div class="d-flex align-items-center gap-3">
                                    <div class="review-avatar">{{ strtoupper(substr($providerName, 0, 1)) }}</div>
                                    <div class="min-w-0">
                                        <div class="review-detail-label mb-1">Provider</div>
                                        <div class="admin-name text-truncate">{{ $providerName }}</div>
                                        <div class="admin-meta text-truncate">{{ $review->provider?->mobile ?: $review->provider?->email ?: 'Contact not shared' }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between gap-3 border-top mt-3 pt-3">
                            <span class="admin-meta">Submitted</span>
                            <span class="admin-meta">{{ $review->created_at?->format('d M Y, h:i A') }}</span>
                        </div>
                    </button>

                    <div class="modal fade" id="adminReviewModal-{{ $review->id }}" tabindex="-1" aria-labelledby="adminReviewModalLabel-{{ $review->id }}" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-lg">
                            <div class="modal-content border-0 rounded-4">
                                <div class="modal-header border-0 pb-0">
                                    <div>
                                        <div class="d-flex align-items-center gap-2 mb-2">
                                            <span class="review-type">{{ $typeLabel }}</span>
                                            <span class="review-status {{ $status['class'] }}">{{ $status['label'] }}</span>
                                        </div>
                                        <h3 class="modal-title fw-bold" id="adminReviewModalLabel-{{ $review->id }}">Review details</h3>
                                    </div>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="d-flex flex-column flex-md-row justify-content-between gap-3 mb-4">
                                        <div>
                                            <div class="review-detail-label">Rating</div>
                                            <div class="review-stars">
                                                @for ($star = 1; $star <= 5; $star++)
                                                    <span class="material-symbols-outlined">{{ $star <= (int) $review->rating ? 'star' : 'star_outline' }}</span>
                                                @endfor
                                            </div>
                                        </div>
                                        <div class="text-md-end">
                                            <div class="review-detail-label">Submitted</div>
                                            <div class="fw-bold">{{ $review->created_at?->format('d M Y, h:i A') }}</div>
                                        </div>
                                    </div>

                                    <div class="review-detail-box mb-3">
                                        <div class="review-detail-label">Customer comment</div>
                                        <p class="review-comment mb-0">{{ $review->review ?: 'No written comment was added.' }}</p>
                                    </div>

                                    <div class="review-detail-grid">
                                        <div class="review-detail-box">
                                            <div class="review-detail-label">Customer</div>
                                            <div class="review-detail-value">{{ $customerName }}</div>
                                            <div class="admin-meta">{{ $review->customer?->mobile ?: 'Mobile not shared' }}</div>
                                            <div class="admin-meta">{{ $review->customer?->email ?: 'Email not shared' }}</div>
                                        </div>
                                        <div class="review-detail-box">
                                            <div class="review-detail-label">Provider</div>
                                            <div class="review-detail-value">{{ $providerName }}</div>
                                            <div class="admin-meta">{{ $review->provider?->mobile ?: 'Mobile not shared' }}</div>
                                            <div class="admin-meta">{{ $review->provider?->email ?: 'Email not shared' }}</div>
                                        </div>
                                        <div class="review-detail-box">
                                            <div class="review-detail-label">Listing</div>
                                            <div class="review-detail-value">{{ $listingReference }}</div>
                                            <div class="admin-meta">{{ $typeLabel }} listing</div>
                                        </div>
                                        <div class="review-detail-box">
                                            <div class="review-detail-label">Review ID</div>
                                            <div class="review-detail-value">#{{ $review->id }}</div>
                                            <div class="admin-meta">Rating {{ (int) $review->rating }}/5</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif

        <div class="admin-pagination">{{ $reviews->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('select,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')