@extends('layouts.admin')

@section('title', 'Product Reviews')

@section('content')
<div class="admin-page-header">
    <h1>Product Reviews</h1>
</div>

<!-- Statistics Cards -->
<div class="row g-4 mb-4">
    <div class="col-md-6 col-lg-3">
        <div class="kpi-card">
            <div class="kpi-card-icon kpi-card-icon-primary">
                <i class="bi bi-list-stars"></i>
            </div>
            <div class="kpi-card-content-wrapper">
                <div class="kpi-card-value">{{ $totalReviews }}</div>
                <div class="kpi-card-label">Total Reviews</div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-lg-3">
        <div class="kpi-card">
            <div class="kpi-card-icon kpi-card-icon-success">
                <i class="bi bi-stars"></i>
            </div>
            <div class="kpi-card-content-wrapper">
                <div class="kpi-card-value">{{ $approvedReviews }}</div>
                <div class="kpi-card-label">Approved</div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-lg-3">
        <div class="kpi-card">
            <div class="kpi-card-icon kpi-card-icon-warning">
                <i class="bi bi-star-half"></i>
            </div>
            <div class="kpi-card-content-wrapper">
                <div class="kpi-card-value">{{ $pendingReviews }}</div>
                <div class="kpi-card-label">Pending</div>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-lg-3">
        <div class="kpi-card">
            <div class="kpi-card-icon kpi-card-icon-info">
                <i class="bi bi-star"></i>
            </div>
            <div class="kpi-card-content-wrapper">
                <div class="kpi-card-value">{{ number_format($avgRating ?? 0, 1) }}</div>
                <div class="kpi-card-label">Avg Rating</div>
            </div>
        </div>
    </div>
</div>

<!-- Filters -->
<div class="admin-card mb-4">
    <div class="card-body">
        <form method="GET" action="{{ route('admin.reviews.index') }}" class="row g-3">
            <div class="col-md-2 col-lg-3">
                <label for="search" class="admin-form-label">Search</label>
                <input type="text" class="admin-form-control form-control" id="search" name="search" 
                       value="{{ request('search') }}" placeholder="Search reviews...">
            </div>
            <div class="col-md-2">
                <label for="product_id" class="admin-form-label">Product</label>
                <select class="admin-form-control form-select" id="product_id" name="product_id">
                    <option value="">All Products</option>
                    @foreach($products as $product)
                        <option value="{{ $product->id }}" {{ request('product_id') == $product->id ? 'selected' : '' }}>
                            {{ $product->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label for="is_approved" class="admin-form-label">Status</label>
                <select class="admin-form-control form-select" id="is_approved" name="is_approved">
                    <option value="">All</option>
                    <option value="1" {{ request('is_approved') === '1' ? 'selected' : '' }}>Approved</option>
                    <option value="0" {{ request('is_approved') === '0' ? 'selected' : '' }}>Pending</option>
                </select>
            </div>
            <div class="col-md-2">
                <label for="rating" class="admin-form-label">Rating</label>
                <select class="admin-form-control form-select" id="rating" name="rating">
                    <option value="">All</option>
                    @for($i = 5; $i >= 1; $i--)
                        <option value="{{ $i }}" {{ request('rating') == $i ? 'selected' : '' }}>
                            {{ $i }} Star{{ $i > 1 ? 's' : '' }}
                        </option>
                    @endfor
                </select>
            </div>
            <div class="col-md-3 d-flex align-items-end gap-1">
                <button type="submit" class="admin-btn-primary">
                    <i class="bi bi-search"></i> Filter
                </button>
                <a href="{{ route('admin.reviews.index') }}"title="Reset" class="btn btn-outline-secondary" >
                                <i class="bi bi-arrow-clockwise"></i>
                </a>
                <a href="{{ route('admin.reviews.export-csv', request()->query()) }}" class="btn btn-outline-secondary" style="background: #10b981; color:#fff">
                    <i class="bi bi-download"></i> Export CSV
                </a>
            </div>
        </form>
    </div>
</div>

    <!-- Reviews Table -->
    <div class="admin-table-card">
        <div class="card-body">
            @if($reviews->count() > 0)
                <div class="table-responsive">
                    <table class="table table-hover admin-table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Product</th>
                                <th>User</th>
                                <th>Rating</th>
                                <th>Title</th>
                                <th>Review</th>
                                <th>Status</th>
                                <th>Date</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($reviews as $review)
                                <tr>
                                    <td>{{ $review->id }}</td>
                                    <td>
                                        <a href="{{ route('product.show', $review->product->slug) }}" target="_blank">
                                            {{ Str::limit($review->product->name, 30) }}
                                        </a>
                                    </td>
                                    <td>
                                        {{ $review->user ? $review->user->name : 'Anonymous' }}
                                        @if($review->order_id)
                                            <span class="badge-modern badge-modern-success ms-1">
                                                <i class="bi bi-check-circle"></i> Verified
                                            </span>
                                        @endif
                                    </td>
                                    <td>
                                        <x-star-rating :rating="$review->rating" size="sm" />
                                    </td>
                                    <td>{{ Str::limit($review->title ?? 'N/A', 30) }}</td>
                                    <td>{{ Str::limit($review->body ?? 'N/A', 50) }}</td>
                                    <td>
                                        @if($review->is_approved)
                                            <span class="badge-modern badge-modern-success">
                                                <i class="bi bi-check-circle"></i> Approved
                                            </span>
                                        @else
                                            <span class="badge-modern badge-modern-warning">
                                                <i class="bi bi-clock"></i> Pending
                                            </span>
                                        @endif
                                    </td>
                                    <td>{{ $review->created_at->format('M d, Y') }}</td>
                                    <td>
                                        <div class="d-flex gap-2">
                                            @if(!$review->is_approved)
                                                <button class="admin-action-btn admin-action-btn-sm approve-btn" 
                                                        style="background: #10b981; color: white; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0;"
                                                        data-review-id="{{ $review->id }}"
                                                        data-action="approve"
                                                        title="Approve">
                                                    <i class="bi bi-check-circle"></i>
                                                </button>
                                            @else
                                                <button class="admin-action-btn admin-action-btn-sm approve-btn" 
                                                        data-review-id="{{ $review->id }}"
                                                        style="background: #f59e0b; color: white; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0;"
                                                        data-action="unapprove"
                                                        title="Unapprove">
                                                    <i class="bi bi-x-circle"></i>
                                                </button>
                                            @endif
                                            <button class="btn btn-danger delete-btn" 
                                                    data-review-id="{{ $review->id }}"
                                                    style="background: #ef4444; height: -webkit-fill-available; color: white; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0;"
                                                    title="Delete">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Pagination - Right Aligned -->
                @if($reviews->hasPages())
                <div class="pagination-wrapper mt-4">
                    <div class="d-flex justify-content-end align-items-center gap-3 flex-wrap">
                        <div class="pagination-info-text">
                            Showing <strong>{{ $reviews->firstItem() ?? 0 }}</strong>–<strong>{{ $reviews->lastItem() ?? 0 }}</strong> 
                            of <strong>{{ $reviews->total() }}</strong> reviews
                        </div>
                        <div class="pagination-controls">
                            {{ $reviews->links('vendor.pagination.admin-categories') }}
                        </div>
                    </div>
                </div>
                @endif
            @else
                <div class="admin-empty-state">
                    <i class="bi bi-star"></i>
                    <h3>No Reviews Found</h3>
                    <p>No reviews match your current filters.</p>
                </div>
            @endif
        </div>
    </div>
@endsection

@push('scripts')
<script src="{{ asset('js/admin-reviews.js') }}"></script>
@endpush