@extends('admin.layouts.app')


@section('section')
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">

    <div class="content-wrapper">
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>All Reviews</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{{ url('admin/dashboard') }}">Home</a></li>
                            <li class="breadcrumb-item active">All Reviews to this inspection</li>
                        </ol>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <!-- /.card -->
                        <div class="card">
                            <div class="card-header"style="text-align: right;">
                                {{--                                <a class="btn btn-primary float-right" data-toggle="modal" data-target="#addUserModal">Add User</a>--}}
                            </div>
                            <div class="col-md-12">

                            </div>
                            <!-- /.card-header -->
                            <div class="card-body">
{{--                                <h3 style="font-size: 1.5rem; margin-bottom: 1rem;">Reviews</h3>--}}
                                <ul class="review-list" style="list-style-type: none; padding: 0;">
                                    @if($reviews !='[]')
                                        @foreach ($reviews as $review)
                                    <li>
                                        <div class="review" style="border: 1px solid #ccc; padding: 1rem; margin-bottom: 1rem;">
                                            <div class="review-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
                                                <h4 style="font-size: 1.2rem; margin: 0;"><b>{{$review->user->name}}</b></h4>
                                                <span class="review-date" style="font-size: 0.8rem; color: #666;">{{$review->created_at}}</span>
                                            </div>
                                            <p style="margin: 0;">Review for Agent: {{$review->agent->name}}</p>
                                            <p style="margin: 0;">Review : {{$review->comment}}</p>
                                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#reviewModal{{$review->id}}" style="background-color: #f5c518; color: #fff; border-color: #f5c518;">
                                                View Inspection Details
                                            </button>
                                            <div class="star-rating" style="display: flex; align-items: center; margin-top: 0.5rem;">
                                                @for ($i = 1; $i <= $review->stars; $i++)
                                                    <i class="fas fa-star" style="color: #f5c518;"></i>
                                                @endfor
                                            </div>
                                        </div>
                                        <!-- Modal -->
                                        <div class="modal fade" id="reviewModal{{$review->id}}" tabindex="-1" role="dialog" aria-labelledby="reviewModal{{$review->id}}Label" aria-hidden="true">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="reviewModal{{$review->id}}Label">Inspection Details</h5>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        @if(isset($review->inspection->inspectionDetails) && $review->inspection->inspectionDetails!=null)

                                                        @foreach($review->inspection->inspectionDetails as $r)
                                                            <p><strong>{{$r->key}}:</strong> {{ $r->value }}</p>
                                                        @endforeach
                                                            @else
                                                            <p>-</p>
                                                        @endif
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    @endforeach
                                @else
                                        <li>
                                           No Reviews
                                        </li>
                                    @endif

                                    <!-- Add more review items here -->
                                </ul>
                            </div>
                            <!-- /.card-body -->
                        </div>
                        <!-- /.card -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>



    </div>
@endsection
@section('script')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <script type="text/javascript">
        $(document).ready(function () {
            $('#myTable').DataTable();
        });
    </script>


@endsection