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

@include('frontend.dashboard.partials.styles')
@php
    $providerName = $provider?->business_name ?: ($provider?->name ?: 'Provider');
    $providerInitial = strtoupper(substr($providerName, 0, 1));
    $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-summary-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .review-summary { background: linear-gradient(135deg, #ffffff, #f0f7ff); border: 1px solid #dbe6ef; border-radius: 16px; padding: 18px; }
    .review-summary span { color: var(--muted); display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; }
    .review-summary strong { color: var(--ink); display: block; font-size: 30px; line-height: 1.1; margin-top: 6px; }
    .review-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .review-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 12px 34px rgba(18, 50, 74, .06); color: inherit; display: flex; flex-direction: column; min-height: 290px; 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(18, 50, 74, .1); }
    .review-card:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(0, 75, 137, .14); outline: 0; }
    .review-card:hover { transform: translateY(-2px); }
    .review-top { align-items: flex-start; display: flex; justify-content: space-between; gap: 12px; }
    .review-type { background: #eaf3fb; border-radius: 999px; color: var(--brand); 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-stars { color: #f5a623; font-size: 20px; letter-spacing: 1px; line-height: 1; }
    .review-text { color: var(--ink); line-height: 1.65; overflow-wrap: anywhere; }
    .review-person { background: #f3f8ff; border: 1px solid #dbe8f4; border-radius: 14px; padding: 13px; }
    .review-avatar { align-items: center; background: var(--brand); 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(--muted); font-size: 11px; font-weight: 800; margin-bottom: 4px; text-transform: uppercase; }
    .review-detail-value { color: var(--ink); font-weight: 800; overflow-wrap: anywhere; }
    .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: 1199px) { .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 767px) { .review-detail-grid, .review-grid, .review-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' => 'Customer reviews',
            'title' => 'Reviews for '.$providerName,
            'description' => 'See every customer rating and comment submitted on your listings.',
            'actionUrl' => route('frontend.provider.lists'),
            'actionIcon' => 'format_list_bulleted',
            'actionLabel' => 'View listings',
        ])

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

            <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="review-summary-grid">
                        <div class="review-summary">
                            <span>Total reviews</span>
                            <strong>{{ number_format((int) $totalReviews) }}</strong>
                        </div>
                        <div class="review-summary">
                            <span>Average rating</span>
                            <strong>{{ number_format((float) $averageRating, 1) }}/5</strong>
                        </div>
                        <div class="review-summary">
                            <span>Pending moderation</span>
                            <strong>{{ number_format((int) $pendingReviews) }}</strong>
                        </div>
                    </div>
                </section>

                <section class="dash-card p-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">Customer comments</h2>
                            <p class="muted mb-0">{{ $reviews->total() }} {{ Str::plural('review', $reviews->total()) }} found for your listings.</p>
                        </div>
                    </div>

                    <div class="review-grid">
                        @forelse ($reviews as $review)
                            @php
                                $customerName = $review->customer?->name ?: 'Customer';
                                $customerInitial = strtoupper(substr($customerName, 0, 1));
                                $status = $statusMeta[$review->status] ?? ['label' => 'Inactive', 'class' => 'review-status-inactive'];
                                $typeLabel = $typeLabels[$review->listing_type] ?? ucfirst((string) $review->listing_type);
                            @endphp
                            <button class="review-card" type="button" data-bs-toggle="modal" data-bs-target="#reviewModal-{{ $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="small muted mb-2">LST-{{ strtoupper($review->listing_type) }}-{{ str_pad((string) $review->listing_id, 5, '0', STR_PAD_LEFT) }}</div>
                                <div class="review-stars mb-3">{{ str_repeat('★', (int) $review->rating) }}{{ str_repeat('☆', 5 - (int) $review->rating) }}</div>
                                <p class="review-text mb-4">{{ $review->review ?: 'No written comment was added.' }}</p>
                                <div class="review-person mt-auto">
                                    <div class="d-flex align-items-center gap-3">
                                        <div class="review-avatar">{{ $customerInitial }}</div>
                                        <div class="min-w-0">
                                            <div class="fw-bold text-truncate">{{ $customerName }}</div>
                                            <div class="small muted text-truncate">{{ $review->customer?->mobile ?: $review->customer?->email ?: 'Contact not shared' }}</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-between gap-3 border-top mt-3 pt-3">
                                    <span class="small muted">Submitted</span>
                                    <span class="small fw-bold">{{ $review->created_at?->format('d M Y, h:i A') }}</span>
                                </div>
                            </button>

                            <div class="modal fade" id="reviewModal-{{ $review->id }}" tabindex="-1" aria-labelledby="reviewModalLabel-{{ $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="reviewModalLabel-{{ $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="small muted mb-1">Rating</div>
                                                    <div class="review-stars">{{ str_repeat('★', (int) $review->rating) }}{{ str_repeat('☆', 5 - (int) $review->rating) }}</div>
                                                </div>
                                                <div class="text-md-end">
                                                    <div class="small muted mb-1">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-text mb-0">{{ $review->review ?: 'No written comment was added.' }}</p>
                                            </div>

                                            <div class="review-detail-grid mb-4">
                                                <div class="review-detail-box">
                                                    <div class="review-detail-label">Customer</div>
                                                    <div class="review-detail-value">{{ $customerName }}</div>
                                                    <div class="small muted">{{ $review->customer?->mobile ?: 'Mobile not shared' }}</div>
                                                    <div class="small muted">{{ $review->customer?->email ?: 'Email not shared' }}</div>
                                                </div>
                                                <div class="review-detail-box">
                                                    <div class="review-detail-label">Listing</div>
                                                    <div class="review-detail-value">LST-{{ strtoupper($review->listing_type) }}-{{ str_pad((string) $review->listing_id, 5, '0', STR_PAD_LEFT) }}</div>
                                                    <div class="small muted">{{ $typeLabel }} listing</div>
                                                </div>
                                            </div>

                                            <form class="review-detail-box" method="POST" action="{{ route('frontend.provider.reviews.update', $review) }}">
                                                @csrf
                                                @method('PATCH')
                                                <label class="review-detail-label d-block" for="review-status-{{ $review->id }}">Update status</label>
                                                <div class="row g-2 align-items-center">
                                                    <div class="col-md-8">
                                                        <select class="form-select" id="review-status-{{ $review->id }}" name="status" required>
                                                            <option value="active" @selected($review->status === 'active')>Active</option>
                                                            <option value="pending" @selected($review->status === 'pending')>Pending</option>
                                                            <option value="inactive" @selected($review->status === 'inactive')>Inactive</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <button class="btn btn-brand w-100" type="submit">Save status</button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="text-center py-5" style="grid-column: 1 / -1;">
                                <div class="metric-icon mx-auto mb-3"><span class="material-symbols-outlined">reviews</span></div>
                                <h3 class="h5 fw-bold">No reviews yet</h3>
                                <p class="muted mb-0">Customer ratings and comments for your listings will appear here.</p>
                            </div>
                        @endforelse
                    </div>
                </section>

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

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

                                @if ($reviews->hasMorePages())
                                    <a class="provider-page-link" href="{{ $reviews->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')
</body>
</html>