{{-- <a href="{{ route('review.create', $product['id']) }}" class="btn btn-sm btn-outline-primary">Add Review</a> --}}

@if (session('success'))
  <div class="alert alert-success alert-dismissible fade show my-4" id="user-review-" role="alert">
    <strong>{{ session('success') }}</strong>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  </div>
@endif


<!-- Average Rating Summary -->
@if (count($product['reviews']) > 0)
  @php
    $averageRating = round(collect($product['reviews'])->avg('rating'), 1);
    $totalReviews = count($product['reviews']);
  @endphp
  <div class="mb-4 p-4 bg-light border rounded shadow-sm my-4">
    <h3 class="text-center mb-3 font-weight-bold">Customer Reviews</h3>

    <div class="d-flex justify-content-center align-items-center mb-3">
      <h4 class="mb-0 mr-2">{{ $averageRating }} <span style="font-size: 1.5rem;">/ 5</span></h4>
      <div class="d-flex align-items-center">
        @for ($i = 1; $i <= 5; $i++)
          @if ($i <= round($averageRating))
            <span class="text-warning" style="font-size: 1.5rem;">&#9733;</span>
          @else
            <span class="text-muted" style="font-size: 1.5rem;">&#9733;</span>
          @endif
        @endfor
      </div>
    </div>

    <p class="text-center text-muted mb-0">
      <strong>{{ $totalReviews }}</strong> customer review{{ $totalReviews > 1 ? 's' : '' }}
    </p>

  </div>
@else
  <div class="alert alert-info">
    <strong>No reviews yet.</strong> Be the first to review this product!
  </div>
@endif

<!-- Customer Reviews -->
@php
  $reviewsCollection = collect($product['reviews']);
  $userReview = $reviewsCollection->firstWhere('user_id', Auth::id());
  $otherReviews = $reviewsCollection->filter(function ($review) {
      return $review['user_id'] !== Auth::id();
  });
  $reviewsPerPage = 5;
  $otherReviewsPaginated = $otherReviews->take($reviewsPerPage);
@endphp

<!-- Display Logged-In User's Review on Top -->
@if ($userReview)
  <div class="card mb-4 shadow-sm border-0">
    <div class="card-body">
      <div class="d-flex justify-content-between align-items-start mb-2">
        <h5 class="card-title mb-0">{{ $userReview['title'] }}</h5>
        <small class="text-muted">{{ \Carbon\Carbon::parse($userReview['created_at'])->format('F j, Y') }}</small>
      </div>
      <div class="mb-1">
        <strong class="text-dark">by {{ $userReview['user']['name'] ?? 'Anonymous' }}</strong>
      </div>

      <!-- Rating -->
      <div class="mb-2">
        @for ($i = 1; $i <= 5; $i++)
          @if ($i <= $userReview['rating'])
            <span style="color: gold;">&#9733;</span>
          @else
            <span style="color: #ccc;">&#9733;</span>
          @endif
        @endfor
      </div>

      <!-- Description -->
      <p class="card-text">{{ $userReview['description'] }}</p>

      <!-- Media -->
      @if (!empty($userReview['media']))
        <div class="d-flex flex-wrap gap-2 mt-3">
          @foreach (json_decode($userReview['media'], true) as $file)
            @php
              $ext = pathinfo($file, PATHINFO_EXTENSION);
            @endphp

            @if (in_array($ext, ['jpg', 'jpeg', 'png']))
              <img src="{{ url('images/review/' . $file) }}" alt="Review Image" class="img-thumbnail media-thumbnail"
                style="max-height: 150px; max-width: 150px;">
            @elseif($ext === 'mp4')
              <video controls style="max-height: 200px; max-width: 250px;" class="media-thumbnail">
                <source src="{{ url('images/review/' . $file) }}" type="video/mp4">
                Your browser does not support the video tag.
              </video>
            @endif
          @endforeach
        </div>


      @endif

      <!-- Edit/Delete options for the logged-in user's review -->
      <div class="mt-3">
        <a href="{{ route('review.edit', $userReview['id']) }}" class="btn btn-sm btn-outline-warning">Edit Review</a>

        @if (check_coin_gain($product['id'], 'product_review_coin'))
          <form action="{{ route('reviews.destroy', $userReview['id']) }}" method="POST" style="display: inline;"
            onsubmit="return confirmDelete();">
            @csrf
            @method('DELETE')
            <button type="submit" class="btn btn-sm btn-outline-danger">Delete Review</button>
          </form>
        @endif
      </div>
    </div>
  </div>
@endif

<!-- Display Other Reviews -->
@foreach ($otherReviewsPaginated as $review)
  <div class="card mb-4 shadow-sm border-0">
    <div class="card-body">
      <div class="d-flex justify-content-between align-items-start mb-2">
        <h5 class="card-title mb-0">{{ $review['title'] }}</h5>
        <small class="text-muted">{{ \Carbon\Carbon::parse($review['created_at'])->format('F j, Y') }}</small>
      </div>
      <div class="mb-1">
        <strong class="text-dark">by {{ $review['user']['name'] ?? 'Anonymous' }}</strong>
      </div>

      <!-- Rating -->
      <div class="mb-2">
        @for ($i = 1; $i <= 5; $i++)
          @if ($i <= $review['rating'])
            <span style="color: gold;">&#9733;</span>
          @else
            <span style="color: #ccc;">&#9733;</span>
          @endif
        @endfor
      </div>

      <!-- Description -->
      <p class="card-text">{{ $review['description'] }}</p>

      <!-- Media -->
      @if (!empty($review['media']))
        <div class="d-flex flex-wrap gap-2 mt-3">
          @foreach (json_decode($review['media'], true) as $file)
            @php
              $ext = pathinfo($file, PATHINFO_EXTENSION);
            @endphp

            @if (in_array($ext, ['jpg', 'jpeg', 'png']))
              <img src="{{ url('images/review/' . $file) }}" alt="Review Image" class="img-thumbnail"
                style="max-height: 150px; max-width: 150px;">
            @elseif($ext === 'mp4')
              <video controls style="max-height: 200px; max-width: 250px;">
                <source src="{{ url('images/review/' . $file) }}" type="video/mp4">
                Your browser does not support the video tag.
              </video>
            @endif
          @endforeach
        </div>
      @endif
    </div>
  </div>
@endforeach

<!-- Load More Button -->
@if ($otherReviews->count() > $reviewsPerPage)
  <div class="text-center mt-4">
    <button id="loadMore" class="btn btn-outline-primary" onclick="loadMoreReviews()">Load More</button>
  </div>
@endif

<!-- Option to Add Review if User doesn't have one -->
@if (!$userReview && $order_count > 0)
  <div class="mt-4 text-center">
    <a href="{{ route('review.create', $product['id']) }}"
      class="btn btn-primary btn-lg px-4 py-2 rounded-pill shadow-lg hover-shadow-lg">
      <strong>Write a Review</strong>
    </a>
  </div>
@endif

<!-- Fullscreen Modal -->
<div class="modal fade" id="mediaModal" tabindex="-1" aria-labelledby="mediaModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-xl">
    <div class="modal-content bg-white text-dark">
      <div class="modal-header border-0">
        <h5 class="modal-title" id="mediaModalLabel">Preview</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body d-flex justify-content-center align-items-center" style="min-height: 70vh;">
        <div id="mediaContainer" class="w-100 text-center"></div>
      </div>
    </div>
  </div>
</div>
@push('script')
  <script>
    $(document).ready(function() {
      $(document).on('click', '.media-thumbnail', function() {
        const type = $(this)[0].tagName;
        const src = $(this).attr('src');
        console.log($(this));
        const container = $('#mediaContainer');


        if (type === 'IMG') {
          container.html(
            `<img src="${src}" class="img-fluid rounded" style="max-height: 80vh;" alt="Image Preview">`);
        } else if (type === 'VIDEO') {
          container.html(`
          <video controls autoplay class="w-100 rounded" style="max-height: 80vh;">
            <source src="${src}" type="video/mp4">
            Your browser does not support the video tag.
          </video>
        `);
        }

        $('#mediaModal').modal('show');
      });

      // Clear media when modal closes
      $('#mediaModal').on('hidden.bs.modal', function() {
        $('#mediaContainer').empty();
      });
    });
  </script>
@endpush