@extends('layouts.app')

@section('title', 'تفاصيل المراجعة')

@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2 align-items-center">
                <div class="col-sm-6 d-flex align-items-center">
                    <h1 class="m-0 text-dark font-weight-bold">
                        <i class="fas fa-search-plus mr-2"></i> تفاصيل المراجعة
                    </h1>
                </div>
                <div class="col-sm-6 text-left">
                    <a class="btn btn-outline-secondary font-weight-bold elevation-1"
                       href="{{ route('reviews.index') }}">
                         <i class="fas fa-arrow-right ml-1"></i> العودة للقائمة
                    </a>
                </div>
            </div>
        </div>
    </section>

    <div class="content px-3 pb-5">
        @include('flash::message')
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show shadow-sm" role="alert">
                {{ session('success') }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif

        <div class="row">
            <!-- Review Details Card -->
            <div class="col-lg-8 col-md-12">
                <div class="card card-outline card-primary shadow-sm mb-4">
                    <div class="card-header bg-light">
                        <h3 class="card-title font-weight-bold text-primary">
                            <i class="fas fa-info-circle mr-1"></i> بيانات المراجعة
                        </h3>
                    </div>
                    <div class="card-body p-0">
                        <table class="table table-hover table-striped mb-0">
                            <tbody>
                                <tr>
                                    <th class="w-25 bg-light text-dark font-weight-bold align-middle">نوع المراجعة</th>
                                    <td class="align-middle">
                                        @if($review->review_type == 'customer_to_property')
                                            <span class="badge badge-info px-2 py-1"><i class="fas fa-home mr-1"></i> عميل إلى عقار</span>
                                        @else
                                            <span class="badge badge-primary px-2 py-1"><i class="fas fa-user mr-1"></i> مضيف إلى عميل</span>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <th class="bg-light text-dark font-weight-bold align-middle">المُراجِع (الكاتب)</th>
                                    <td class="align-middle">
                                        @if($review->reviewer)
                                            <a href="{{ route('tblUsers.show', $review->reviewer_id) }}" class="text-primary font-weight-bold">
                                                <i class="fas fa-user-circle mr-1"></i> {{ $review->reviewer->name }}
                                            </a>
                                            <small class="text-muted d-block mt-1">المعرف: #{{ $review->reviewer_id }}</small>
                                        @else
                                            <span class="text-muted font-weight-bold">المعرف: #{{ $review->reviewer_id }}</span>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <th class="bg-light text-dark font-weight-bold align-middle">المُراجَع له (المستهدف)</th>
                                    <td class="align-middle font-weight-bold text-muted">
                                        المعرف: #{{ $review->reviewee_id }}
                                    </td>
                                </tr>
                                <tr>
                                    <th class="bg-light text-dark font-weight-bold align-middle">رقم الحجز المرتبط</th>
                                    <td class="align-middle font-weight-bold text-muted">
                                        #{{ $review->booking_id }}
                                    </td>
                                </tr>
                                <tr>
                                    <th class="bg-light text-dark font-weight-bold align-middle">تاريخ المراجعة</th>
                                    <td class="align-middle text-muted">
                                        {{ \Carbon\Carbon::parse($review->created_at)->format('Y-m-d h:i A') }}
                                        <small class="text-muted d-block">منذ {{ \Carbon\Carbon::parse($review->created_at)->diffForHumans() }}</small>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Review Content Card -->
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-light">
                        <h3 class="card-title font-weight-bold text-secondary">
                            <i class="fas fa-comment-dots mr-1"></i> التعليق المكتوب
                        </h3>
                    </div>
                    <div class="card-body">
                        @if($review->comment)
                            <blockquote class="blockquote mb-0" style="border-right: 4px solid #007bff; padding-right: 15px; font-size: 1.1rem; color: #495057;">
                                <p>{{ $review->comment }}</p>
                            </blockquote>
                        @else
                            <div class="text-center text-muted py-4">
                                <i class="fas fa-comment-slash fa-3x mb-2 text-light"></i><br>
                                لم يقم المستخدم بكتابة تعليق
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Ratings & Controls Sidebar -->
            <div class="col-lg-4 col-md-12">
                
                <!-- Overall Rating -->
                <div class="card shadow-sm mb-4 text-center">
                    <div class="card-body pb-2 pt-4">
                        <h5 class="text-muted font-weight-bold mb-3">التقييم العام</h5>
                        <h1 class="display-4 font-weight-bold text-dark mb-0">{{ number_format($review->overall_rating, 1) }}</h1>
                        <div class="text-warning mb-2" style="font-size: 24px;">
                            @for($i = 1; $i <= 5; $i++)
                                @if($i <= $review->overall_rating)
                                    <i class="fas fa-star"></i>
                                @else
                                    <i class="far fa-star"></i>
                                @endif
                            @endfor
                        </div>
                    </div>
                </div>

                <!-- Detailed Category Ratings -->
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-light">
                        <h3 class="card-title font-weight-bold text-secondary">
                            <i class="fas fa-list-ul mr-1"></i> تقييمات الفئات
                        </h3>
                    </div>
                    <div class="card-body p-0">
                        @if($categoryRatings->isEmpty())
                            <div class="text-center text-muted py-4">
                                لا توجد تقييمات تفصيلية مسجلة
                            </div>
                        @else
                            <ul class="list-group list-group-flush">
                                @foreach ($categoryRatings as $catRating)
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        <span class="font-weight-bold text-dark">
                                            @if($catRating->category && $catRating->category->icon)
                                                <i class="material-icons text-muted" style="font-size: 16px; vertical-align: middle;">{{ $catRating->category->icon }}</i>
                                            @endif
                                            {{ $catRating->category->category_name ?? 'فئة محذوفة' }}
                                        </span>
                                        <span class="text-warning" style="font-size: 14px;">
                                            @for($i = 1; $i <= 5; $i++)
                                                @if($i <= $catRating->rating)
                                                    <i class="fas fa-star"></i>
                                                @else
                                                    <i class="far fa-star text-light"></i>
                                                @endif
                                            @endfor
                                            <span class="badge badge-light text-dark ml-2">{{ $catRating->rating }}</span>
                                        </span>
                                    </li>
                                @endforeach
                            </ul>
                        @endif
                    </div>
                </div>

                <!-- Visibility Control -->
                <div class="card shadow-sm">
                    <div class="card-header {{ $review->is_visible_to_customers ? 'bg-success' : 'bg-danger' }} text-white">
                        <h3 class="card-title font-weight-bold">
                            <i class="fas {{ $review->is_visible_to_customers ? 'fa-eye' : 'fa-eye-slash' }} mr-1"></i> حالة الظهور
                        </h3>
                    </div>
                    <div class="card-body text-center">
                        <p class="text-muted mb-3">
                            @if($review->is_visible_to_customers)
                                هذه المراجعة <strong>مرئية</strong> وتظهر للعملاء في التطبيق. يمكنك إخفاؤها لمنع ظهورها.
                            @else
                                هذه المراجعة <strong>مخفية</strong> ولن تظهر للعملاء في التطبيق. يمكنك تفعيل ظهورها.
                            @endif
                        </p>
                        
                        <form action="{{ route('reviews.toggleVisibility', $review->review_id) }}" method="POST" onsubmit="return confirm('هل أنت متأكد من تغيير حالة الظهور؟')">
                            @csrf
                            @method('PATCH')
                            <button type="submit" class="btn {{ $review->is_visible_to_customers ? 'btn-outline-danger' : 'btn-outline-success' }} btn-block font-weight-bold p-2">
                                @if($review->is_visible_to_customers)
                                    <i class="fas fa-eye-slash mr-2"></i> إخفاء المراجعة من التطبيق
                                @else
                                    <i class="fas fa-eye mr-2"></i> إظهار المراجعة في التطبيق
                                @endif
                            </button>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection