@extends('admin.layout')
@section('title', 'Product Reviews Management')
@section('heading', 'Customer Product Reviews & Ratings')

@section('content')
<div class="card-custom p-4 w-100">
    <!-- Header Controls: Search & Rating Filter -->
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
        <div>
            <h5 class="fw-bold mb-1" style="color: var(--text-dark);">Customer Product Reviews ({{ $reviews->total() }})</h5>
            <p class="text-muted small mb-0">Manage customer star ratings and feedback for catalogue sarees.</p>
        </div>

        <form method="GET" action="{{ route('admin.reviews.index') }}" class="d-flex flex-wrap gap-2 align-items-center">
            <div class="position-relative">
                <input type="text" name="search" class="form-control form-control-sm ps-4 pe-4 rounded-3" placeholder="Search product, customer, text..." value="{{ request('search') }}" style="min-width: 240px;">
            </div>

            <select name="rating" class="form-select form-select-sm rounded-3" onchange="this.form.submit()" style="width: 140px;">
                <option value="">All Ratings</option>
                <option value="5" @selected(request('rating') == '5')>★ 5 Stars</option>
                <option value="4" @selected(request('rating') == '4')>★ 4 Stars</option>
                <option value="3" @selected(request('rating') == '3')>★ 3 Stars</option>
                <option value="2" @selected(request('rating') == '2')>★ 2 Stars</option>
                <option value="1" @selected(request('rating') == '1')>★ 1 Star</option>
            </select>
        </form>
    </div>

    <!-- REVIEWS TABLE -->
    <div class="table-responsive">
        <table class="table align-middle custom-table">
            <thead>
                <tr>
                    <th style="width: 60px;">S.No</th>
                    <th>Product Details</th>
                    <th>Customer Name</th>
                    <th>Star Rating</th>
                    <th>Review Comment</th>
                    <th>Date</th>
                    <th class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($reviews as $index => $rev)
                    <tr>
                        <td class="fw-bold text-muted">{{ $reviews->firstItem() + $index }}</td>
                        <td>
                            <div class="d-flex align-items-center gap-3">
                                @if($rev->product && $rev->product->image)
                                    <img src="{{ asset($rev->product->image) }}" alt="{{ $rev->product->name }}" class="rounded-3" style="width: 48px; height: 48px; object-fit: cover;">
                                @endif
                                <div>
                                    <strong class="d-block text-dark small mb-0">{{ $rev->product->name ?? 'Saree Product' }}</strong>
                                    <span class="small text-muted">{{ $rev->product->category ?? '' }}</span>
                                </div>
                            </div>
                        </td>
                        <td>
                            <strong class="d-block text-dark small mb-0">{{ $rev->user->name ?? 'Customer' }}</strong>
                            <span class="small text-muted">{{ $rev->user->email ?? 'N/A' }}</span>
                        </td>
                        <td>
                            <div class="fw-bold" style="color: #FFB800;">
                                @for($i = 1; $i <= 5; $i++)
                                    <span>{{ $i <= $rev->rating ? '★' : '☆' }}</span>
                                @endfor
                                <span class="badge bg-warning-subtle text-dark border ms-1">{{ $rev->rating }}/5</span>
                            </div>
                        </td>
                        <td>
                            @if($rev->comment)
                                <p class="small text-secondary mb-0" style="max-width: 320px; line-height: 1.5;">{{ $rev->comment }}</p>
                            @else
                                <span class="small text-muted italic"><em>(No comment provided)</em></span>
                            @endif
                        </td>
                        <td class="small text-muted">
                            {{ $rev->created_at ? $rev->created_at->format('d M Y') : 'N/A' }}
                        </td>
                        <td class="text-end">
                            <form method="POST" action="{{ route('admin.reviews.destroy', $rev) }}" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this customer review?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-outline-danger border-0 rounded-circle" title="Delete Review">
                                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <polyline points="3 6 5 6 21 6"></polyline>
                                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                                    </svg>
                                </button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="py-5 text-center text-muted">
                            No product reviews found.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Footer Pagination -->
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mt-4 pt-3 border-top">
        <div class="text-muted small fw-medium">
            Showing {{ $reviews->firstItem() ?? 0 }} to {{ $reviews->lastItem() ?? 0 }} of {{ $reviews->total() }} entries
        </div>
        <div class="d-flex justify-content-end">
            {{ $reviews->appends(request()->query())->links('admin.partials.pagination') }}
        </div>
    </div>
</div>
@endsection