@extends('SuperAdmin.layout.layout')
@section('title', 'Feedback Dashboard')
@section('page-name', 'Feedback Dashboard')
@section('page-detail', 'User feedback and ratings overview')
@section('body')
<div class="content-are-dashboard p-3">
    <div class="container-fluid">
        <div class="row mb-3">
            <div class="col-12">
                <div class="page-title-box d-flex justify-content-between align-items-center flex-wrap">
                    <div>
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="{{ tenant_route_url('dashboard') }}">Dashboard</a></li>
                            <li class="breadcrumb-item active">Feedback Dashboard</li>
                        </ol>
                        <h4 class="page-title mb-0"><i class="fas fa-star"></i> Feedback Dashboard</h4>
                    </div>
                    <a href="{{ tenant_route_url('superadmin.orders.index') }}" class="btn btn-outline-secondary btn-sm">
                        <i class="fas fa-truck mr-1"></i> Repair Orders
                    </a>
                </div>
            </div>
        </div>

        <!-- Summary cards -->
        <div class="row mb-4">
            <div class="col-6 col-md-4 col-lg">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body d-flex align-items-center">
                        <div class="rounded-circle p-2 mr-2" style="background: rgba(0,123,255,0.15); min-width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;">
                            <i class="fas fa-comment-dots fa-lg text-primary"></i>
                        </div>
                        <div>
                            <h6 class="text-muted mb-0 small">Total Feedbacks</h6>
                            <h4 class="mb-0">{{ $totalFeedbacks }}</h4>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-4 col-lg">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body d-flex align-items-center">
                        <div class="rounded-circle p-2 mr-2" style="background: rgba(255,193,7,0.25); min-width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;">
                            <i class="fas fa-star fa-lg text-warning"></i>
                        </div>
                        <div>
                            <h6 class="text-muted mb-0 small">Average Rating</h6>
                            <h4 class="mb-0">{{ $avgRating !== null ? $avgRating . '/5' : '—' }}</h4>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-4 col-lg">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body d-flex align-items-center">
                        <div class="rounded-circle p-2 mr-2" style="background: rgba(40,167,69,0.15); min-width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;">
                            <i class="fas fa-star fa-lg text-success"></i>
                        </div>
                        <div>
                            <h6 class="text-muted mb-0 small">5-Star Reviews</h6>
                            <h4 class="mb-0">{{ $fiveStarCount }}</h4>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-4 col-lg">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body d-flex align-items-center">
                        <div class="rounded-circle p-2 mr-2" style="background: rgba(23,162,184,0.15); min-width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;">
                            <i class="fas fa-thumbs-up fa-lg text-info"></i>
                        </div>
                        <div>
                            <h6 class="text-muted mb-0 small">4+ Stars</h6>
                            <h4 class="mb-0">{{ $highRatingCount }}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- All feedbacks list -->
        <div class="card rounded-3 border-0 shadow-sm">
            <div class="card-body">
                <div class="border rounded-3 p-3">
                    <h5 class="mb-3"><i class="fas fa-list mr-2"></i>All User Feedbacks</h5>
                    @if($reviews->isEmpty())
                        <p class="text-muted mb-0">No feedback yet. Reviews appear here when customers submit feedback via the order review link.</p>
                    @else
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead class="thead-light">
                                    <tr>
                                        <th>Order #</th>
                                        <th>Customer</th>
                                        <th>Rating</th>
                                        <th>Feedback</th>
                                        <th>Date</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($reviews as $review)
                                        <tr>
                                            <td>
                                                <a href="{{ tenant_route_url('superadmin.orders.show', ['id' => $review->vehicle_order_id]) }}">{{ $review->vehicleOrder->order_number ?? '—' }}</a>
                                            </td>
                                            <td>{{ $review->customer_id ? ($review->customer?->name ?? 'Customer #'.$review->customer_id) : '—' }}</td>
                                            <td>
                                                {{ $review->rating }}/5
                                                @for($i = 0; $i < $review->rating; $i++)<i class="fas fa-star text-warning small"></i>@endfor
                                            </td>
                                            <td><span class="text-truncate d-inline-block" style="max-width: 280px;">{{ Str::limit($review->feedback, 80) ?: '—' }}</span></td>
                                            <td>{{ tenant_datetime($review->created_at, 'm/d/Y H:i') }}</td>
                                            <td>
                                                <a href="{{ tenant_route_url('superadmin.orders.show', ['id' => $review->vehicle_order_id]) }}" class="btn btn-sm btn-outline-primary" title="View order"><i class="fas fa-eye"></i></a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="mt-3">{{ $reviews->links() }}</div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection