@extends('admin.layouts.master')
@section('customer', 'active')
@section('title') {{ $title ?? '' }} @endsection

@push('style')
<style>
    /* td {
        width: 0;
    } */
    .table th, .table td {
        padding: 0.5rem; /* Adjust the padding as needed */
    }

    .table th {
        text-align: left; /* Ensures the heading is aligned to the left */
    }

    .table td {
        vertical-align: middle; /* Ensures that the content is aligned properly */
    }
</style>
@endpush
@php

@endphp
@section('content')
<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">{{ $title ?? '' }}</h1>
                </div>
                <div class="col-sm-6">
                   <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active">{{ $title ?? '' }}</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="row align-items-center">
                                <div class="col-6">
                                    <h3 class="card-title">{{ $user->name }} - Reviews</h3>
                                </div>
                                <div class="col-6">
                                    <div class="float-right">
                                        <a href="{{ route('admin.customer.index') }}" class="btn btn-primary">Back</a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-body p-4">
                            <div class="row">
                                <!-- Average Rating Section -->
                                <div class="col-md-4">
                                    <div class="rating-box text-center p-3 border rounded">
                                        <h4>{{$user->name}}</h4>
                                        <div class="stars">
                                            <!-- Display average rating using stars -->
                                            @for ($i = 1; $i <= 5; $i++)
                                                @if ($i <= floor($averageRating))
                                                    <!-- Full star for integer part -->
                                                    <i class="fa fa-star text-warning"></i>
                                                @elseif ($i > floor($averageRating) && $i <= ceil($averageRating))
                                                    <!-- Half star if there's a decimal -->
                                                    <i class="fas fa-star-half-alt text-warning"></i>
                                                    {{-- <i class="fa fa-star-half-o text-warning"></i> --}}
                                                @else
                                                    <!-- Empty star for the rest -->
                                                    <i class="far fa-star text-dark"></i>
                                                    {{-- <i class="fa fa-star text-dark"></i> --}}
                                                @endif
                                            @endfor
                                        </div>
                                        <p class="mt-2">{{ number_format($averageRating, 1) }} / 5</p>
                                        <p><strong>Total Reviews:</strong> {{ $reviews->count() }}</p>
                                    </div>
                                </div>

                                <!-- Reviews Section -->
                                <div class="col-md-8">
                                    <div class="card p-3">
                                        <div class="reviews-list">
                                            <h4>All Reviews</h4>
                                            @if($reviews->isEmpty())
                                                <div class="review-item mb-4 p-3">
                                                    <p>No reviews yet.</p>
                                                </div>
                                            @else
                                                @foreach ($reviews as $review)
                                                    <div class="review-item mb-4 p-3 border rounded">
                                                        <div class="d-flex align-items-center mb-2">
                                                            <!-- User image -->
                                                            <img src="{{ getAvatar($review->user->image) }}" class="rounded-circle" alt="{{ $review->user->name }}" width="40" height="40">
                                                            <div class="mx-3">
                                                                <strong>{{ $review->user->name }}</strong>
                                                                <span class="text-muted d-block">{{ Carbon\Carbon::parse($review->created_at)->format('M d, Y') }}</span>
                                                            </div>
                                                        </div>

                                                        <div class="stars mb-2">
                                                            <!-- Display rating for each review -->
                                                            @for ($i = 1; $i <= 5; $i++)
                                                                @if ($i <= floor($review->rating))
                                                                    <!-- Full star for integer part -->
                                                                    <i class="fa fa-star text-warning"></i>
                                                                @else
                                                                    <!-- Empty star for the rest -->
                                                                    <i class="far fa-star text-warning"></i>
                                                                    {{-- <i class="far fa-star text-dark"></i> --}}
                                                                @endif
                                                            @endfor
                                                        </div>

                                                        <p>{{ $review->review_text }}</p>
                                                    </div>
                                                @endforeach
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection