@extends('layouts.app')

@section('title', 'Client Testimonials & Moderation')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Client Testimonials & Review Moderation</h1>
        <div class="page-subtitle">Manage customer reviews, approve website feedback, and publish VIP client testimonials.</div>
    </div>
    <div>
        <button class="btn btn-luxury-red" data-bs-toggle="modal" data-bs-target="#createTestimonialModal">
            <i class="bi bi-plus-circle-fill me-1"></i>
            <span>Add Testimonial</span>
        </button>
    </div>
</div>

@if(session('success'))
    <div class="alert alert-success border-0 shadow-sm mb-4" role="alert" style="border-radius: 12px; background-color: #DCFCE7; color: #15803D;">
        <i class="bi bi-check-circle-fill me-2"></i> {{ session('success') }}
    </div>
@endif

<!-- Summary Stat Cards -->
<div class="row g-3 mb-4">
    <div class="col-md-4">
        <div class="content-card p-3 d-flex align-items-center gap-3">
            <div class="rounded-circle p-3 bg-light text-dark"><i class="bi bi-chat-square-quote-fill fs-4"></i></div>
            <div>
                <div class="text-muted small">Total Reviews</div>
                <div class="fw-bold fs-4">{{ $totalCount ?? 0 }}</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="content-card p-3 d-flex align-items-center gap-3">
            <div class="rounded-circle p-3 bg-success bg-opacity-10 text-success"><i class="bi bi-patch-check-fill fs-4"></i></div>
            <div>
                <div class="text-muted small">Published on Website</div>
                <div class="fw-bold fs-4 text-success">{{ $publishedCount ?? 0 }}</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="content-card p-3 d-flex align-items-center gap-3">
            <div class="rounded-circle p-3 bg-warning bg-opacity-10 text-warning"><i class="bi bi-hourglass-split fs-4"></i></div>
            <div>
                <div class="text-muted small">Pending Approval</div>
                <div class="fw-bold fs-4 text-warning">{{ $pendingCount ?? 0 }}</div>
            </div>
        </div>
    </div>
</div>

<div class="content-card">
    <div class="content-card-header d-flex justify-content-between align-items-center">
        <h5 class="content-card-title"><i class="bi bi-star-fill text-warning me-2"></i> Customer Feedback & Reviews</h5>
        <span class="text-muted small">Only approved reviews are shown on the public website.</span>
    </div>
    <div class="table-responsive">
        <table class="luxury-table">
            <thead>
                <tr>
                    <th>Client Name</th>
                    <th>Role / Title</th>
                    <th>Car Model</th>
                    <th>Rating</th>
                    <th>Review Comment</th>
                    <th>Website Status</th>
                    <th class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($testimonials as $t)
                <tr>
                    <td>
                        <div class="d-flex align-items-center gap-2.5">
                            <img src="{{ $t->avatar ?: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=100&q=80' }}" alt="Avatar" style="width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid #e2e8f0;">
                            <div>
                                <div class="fw-bold text-dark" style="font-size:0.88rem;">{{ $t->name }}</div>
                                <div class="text-muted" style="font-size:0.72rem;">ID #{{ $t->id }} &bull; {{ $t->created_at ? $t->created_at->format('M d, Y') : 'Recent' }}</div>
                            </div>
                        </div>
                    </td>
                    <td><span class="text-muted" style="font-size:0.8rem;">{{ $t->role ?: 'Verified Client' }}</span></td>
                    <td>
                        @if($t->car_model)
                            <span class="badge bg-light text-dark border" style="font-size:0.75rem;"><i class="bi bi-car-front me-1"></i> {{ $t->car_model }}</span>
                        @else
                            <span class="text-muted small">—</span>
                        @endif
                    </td>
                    <td>
                        <div class="text-warning" style="font-size:0.85rem;" title="{{ $t->rating }} out of 5 Stars">
                            @for($i=0; $i<$t->rating; $i++) ★ @endfor
                        </div>
                    </td>
                    <td>
                        <div class="text-muted text-truncate" style="max-width:280px; font-size:0.82rem;" title="{{ $t->comment }}">
                            "{{ $t->comment }}"
                        </div>
                    </td>
                    <td>
                        @if($t->is_active)
                            <span class="badge bg-success bg-opacity-10 text-success border border-success px-2.5 py-1" style="font-size:0.75rem;">
                                <i class="bi bi-check-circle-fill me-1"></i> Published
                            </span>
                        @else
                            <span class="badge bg-warning bg-opacity-10 text-warning border border-warning px-2.5 py-1" style="font-size:0.75rem;">
                                <i class="bi bi-clock-history me-1"></i> Pending Approval
                            </span>
                        @endif
                    </td>
                    <td class="text-end">
                        <div class="d-flex align-items-center justify-content-end gap-1.5">
                            <!-- Toggle Status Form -->
                            <form action="{{ route('admin.testimonials.toggle', $t->id) }}" method="POST" class="d-inline">
                                @csrf
                                <button type="submit" class="btn btn-sm {{ $t->is_active ? 'btn-outline-secondary' : 'btn-success' }} px-2 py-1" style="font-size:0.75rem;" title="{{ $t->is_active ? 'Hide from website' : 'Approve & Publish to website' }}">
                                    @if($t->is_active)
                                        <i class="bi bi-eye-slash-fill me-1"></i> Hide
                                    @else
                                        <i class="bi bi-check-circle-fill me-1"></i> Approve
                                    @endif
                                </button>
                            </form>

                            <!-- Delete Form -->
                            <form action="{{ route('admin.testimonials.destroy', $t->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Delete this review permanently?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-light border text-danger px-2 py-1" title="Delete Review">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" class="text-center py-5 text-muted">
                        <i class="bi bi-chat-square-quote fs-1 d-block mb-2 text-secondary"></i>
                        No client reviews submitted yet. When clients submit reviews on the website, they will appear here for moderation.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- Modal: Add Testimonial (Admin) -->
<div class="modal fade" id="createTestimonialModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="border-radius: 16px;">
            <div class="modal-header border-bottom">
                <h5 class="modal-title font-weight-bold"><i class="bi bi-star text-warning me-2"></i> Add Client Testimonial</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('admin.testimonials.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label font-weight-bold">Client Name *</label>
                            <input type="text" name="name" class="form-control" placeholder="e.g. Harrison Ford" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label font-weight-bold">Role / Location</label>
                            <input type="text" name="role" class="form-control" placeholder="e.g. Porsche Collector • Beverly Hills">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label font-weight-bold">Car Purchased</label>
                            <input type="text" name="car_model" class="form-control" placeholder="e.g. Porsche 911 GT3 RS">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label font-weight-bold">Star Rating</label>
                            <select name="rating" class="form-select">
                                <option value="5" selected>5 Stars ★★★★★</option>
                                <option value="4">4 Stars ★★★★</option>
                                <option value="3">3 Stars ★★★</option>
                            </select>
                        </div>
                        <div class="col-md-12">
                            <label class="form-label font-weight-bold">Client Photo (Optional File)</label>
                            <input type="file" name="avatar_file" class="form-control" accept="image/*">
                        </div>
                        <div class="col-md-12">
                            <label class="form-label font-weight-bold">Review Comment *</label>
                            <textarea name="comment" class="form-control" rows="3" required placeholder="Enter client testimonial text..."></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-top">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-luxury-red">Publish Review</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection