@extends('admin.layouts.master')

@section('title')
    Reviews Manage
@endsection

<style>
    .user-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 12px;
    }
</style>

@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<section class="section">
    <div class="section-body">
        <div class="row">
          <div class="col-12">
            <div class="card">
                <!--<x-cardheader title="Contents" /> -->
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4>Reviews</h4>
                </div>
              <div class="card-body">
                <div class="table-responsive">
                  <table class="table table-striped" id="table-1">
                    <thead>
                      <tr>
                          <th>No</th>
                          <th width="100px">Created By</th>
                          <th width="160px">Rating</th>
                          <th width="400px">Image</th>
                          <th width="500px">Description</th>
                          <th width="100px">Action</th>
                      </tr>
                    </thead>
                    <tbody>
                      @foreach ($reviews as $key => $review)
                      <tr>
                        <td>{{ $key + 1 }}</td>
                        <!--<td>{{ $review->user->name ?? '' }}</td>-->
                        <td>
                            <div class="d-flex align-items-center">
                                @if($review->user->image ?? false)
                                    <img src="{{ $review->user->image }}" class="user-avatar">
                                @else
                                    <div class="user-avatar d-flex align-items-center justify-content-center bg-light text-dark">
                                        {{ substr($review->user->name ?? 'N/A', 0, 1) }}
                                    </div>
                                @endif
                                <div>{{ $review->user->name ?? 'N/A' }}</div>
                            </div>
                        </td>
                        <td>
                            <div class="star-rating" title="{{ $review->rating }} out of 5">
                                @for ($i = 1; $i <= 5; $i++)
                                    @if ($i <= $review->rating)
                                        <i class="fas fa-star text-warning"></i>
                                    @else
                                        <i class="far fa-star text-warning"></i>
                                    @endif
                                @endfor
                            </div>
                            <small class="text-muted">({{ $review->rating }})</small>
                        </td>
                        <td>
                            @if($review->images->isNotEmpty())
                                <div class="review-images">
                                    @foreach($review->images as $image)
                                        <a href="{{ asset(''.$image->image) }}" data-lightbox="review-{{ $review->id }}" data-title="Review Image">
                                            <img src="{{ asset(''.$image->image) }}" class="img-thumbnail" style="max-width: 60px; max-height: 60px; margin-right: 5px;">
                                        </a>
                                    @endforeach
                                </div>
                            @else
                                <span class="text-muted">No images</span>
                            @endif
                        </td>
                        <td>{{ $review->description }}</td>
                        <td>
                            @can('review-edit')
                              @if($review->status == '0')
                                <a class="btn btn-primary" href="{{ route('reviews.status',$review->id) }}">
                                    <i class="fa fa-check"></i> Activate
                                </a>
                              @else
                                <a class="btn btn-danger" href="{{ route('reviews.status',$review->id) }}">
                                    <i class="fa fa-times"></i> Deactivate
                                </a> 
                              @endif
                            @endcan
                            <!-- @can('review-delete')
                              <button class="btn btn-danger" type="button" onclick="deleteItem({{ $review->id }})">
                                  <i class="fa fa-trash" aria-hidden="true"></i>
                              </button>
                              <form id="delete-form-{{ $review->id }}" action="{{ route('reviews.destroy', $review->id) }}" method="post"
                                    style="display:none;">
                                  @csrf
                                  @method('DELETE')
                              </form>
                            @endcan -->
                        </td>
                      </tr>
                      @endforeach
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
@endsection

@push('js')
    <!-- Sweet Alert Js -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.29.1/dist/sweetalert2.all.min.js"></script>

    <script type="text/javascript">
        function deleteItem(id) {
            const swalWithBootstrapButtons = swal.mixin({
                confirmButtonClass: 'btn btn-success',
                cancelButtonClass: 'btn btn-danger',
                buttonsStyling: false,
            })

            swalWithBootstrapButtons({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                type: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'No, cancel!',
                reverseButtons: true
            }).then((result) => {
                if (result.value) {
                    event.preventDefault();
                    document.getElementById('delete-form-'+id).submit();
                } else if (
                    // Read more about handling dismissals
                    result.dismiss === swal.DismissReason.cancel
                ) {
                    swalWithBootstrapButtons(
                        'Cancelled',
                        'Your data is safe :)',
                        'error'
                    )
                }
            })
        }
    </script>
@endpush