@extends('web.layouts.master')

@section('css')
<style>
  /* .box .details {
    position: absolute;
    visibility: hidden;
    background: #000000d4;
    width: 0%;
    height: 0%;
    right: 0;
    top: 0;
    color: white;
    margin: auto;
    border-radius: 10px;
    transition: .1s ease-in;
    inset: 0;
}

.box i {
    position: relative;
    right: 20px;
    top: 16px;
    font-size: 40px;
}

.box i:hover + .details {
    visibility: visible;
    transition: .5s ease-out;
    width: 95%;
    height: 95%;
    inset: 0;
} */

.box {
    position: relative;
    overflow: hidden;
}

.box .details {
    position: absolute;
    background: #00000094;
    color: white;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 10px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    text-align: center;
    padding: 15px;
    z-index: 99; /* Ensure it's above everything */
}

/* 🟢 Show details ONLY when hovering over the info icon */
.box i:hover ~ .details {
    opacity: 1;
    visibility: visible;
}

/* Info icon positioning */
.box i {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    color: white;
    background: rgba(0, 0, 0, 0.6);
    padding: 5px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 101; /* Ensure it's above everything */
}

.pagination {
    justify-content: center;
    margin-top: 20px;
    display: flex;
    gap: 5px;
}

.pagination .page-item .page-link {
    color: black;
    border: 1px solid #d1e5f5;
    background: white;
    padding: 8px 14px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

/* Active Page */
.pagination .page-item.active .page-link {
    background-color: #d1e5f5;
    color: #161616;
    border-color: #d1e5f5;
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.15);
}

/* Hover Effect */
.pagination .page-link:hover {
    background: linear-gradient(45deg, #f79b3e, #f79b3e);
    color: white;
    border-color: #f79b3e;
    transform: scale(1.1);
}

/* Disabled Pagination */
.pagination .page-item.disabled .page-link {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Smooth transition on click */
.pagination .page-link:active {
    transform: scale(0.95);
}
.loader-container {
    display: none; /* Hidden by default */
    width: 100%;
    text-align: center;
    padding: 20px;
}

.spinner-border {
    width: 50px;
    height: 50px;
    border-width: 5px;
}


#fullPageLoader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(94, 94, 94, 0.7); /* Dark overlay */
    display: flex; /* Ensures proper centering */
    align-items: center; /* Centers vertically */
    justify-content: center; /* Centers horizontally */
    z-index: 9999; /* Ensures it's on top */
}

.spinner-border {
    width: 80px;
    height: 80px;
    border-width: 6px;
    color: #F78C1E; /* Set spinner color to orange */
}


</style>
@endsection
@section('content')
<!--Inner Top Title-->
<section id="inner-page-title">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="page-title">
          <h4>Reviews</h4>
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="{{ route('web') }}">Home</a></li>
              <li class="breadcrumb-item active" aria-current="page">
                Reviews
              </li>
            </ol>
          </nav>
        </div>
      </div>
    </div>
  </div>
</section>

<!--About Us-->
<section id="content-abt">
  <div class="container">
      <ul class="nav nav-tabs mb-3" id="mediaTabs">
          <li class="nav-item">
              <a class="nav-link active media-tab" data-type="{{IMAGE}}" href="javascript:void(0);">
                  <i class="fas fa-images"></i> Images
              </a>
          </li>
          <li class="nav-item">
              <a class="nav-link media-tab" data-type="{{AUDIO}}" href="javascript:void(0);">
                  <i class="fas fa-volume-up"></i> Audio
              </a>
          </li>
          <li class="nav-item">
              <a class="nav-link media-tab" data-type="{{VIDEO}}" href="javascript:void(0);">
                  <i class="fas fa-video"></i> Video
              </a>
          </li>
      </ul>
      <div class="row" id="mediaContent">
      
      
      </div>
      <div class="row">
          <div class="loader-container text-center">
              <div class="spinner-border text-warning" role="status">
                  <span class="visually-hidden">Loading...</span>
              </div>
          </div>
      </div>
      <div class="row">
          <div class="d-flex justify-content-center mt-4" id="paginationContainer">
              <!-- Pagination will be loaded here dynamically -->
          </div>
      </div>     

      </div>
  </div> 
</section>
<div id="fullPageLoader">
  <div class="spinner-border text-warning" role="status"></div>
</div>

@endsection

@section('script')
<script>
  $(document).ready(function () {
      function loadMedia(type, page = 1) {
        $("#fullPageLoader").fadeIn();
          $.ajax({
              url: "{{route('load-reviews')}}",
              type: "GET",
              data: { type: type, page: page },
              beforeSend: function () {
                  $("#mediaContent").html('<p class="text-center">Loading...</p>');
              },
              success: function (response) {
                $("#fullPageLoader").fadeOut();
                  $("#mediaContent").html(response.html);
                  $("#paginationContainer").html(response.pagination);
              },
              error: function () {
                $("#fullPageLoader").fadeOut();
                  $("#mediaContent").html('<p class="text-center text-danger">Failed to load media.</p>');
              }
          });
      }

      // Initial load - Images
      loadMedia("1");

      // Handle tab click
      $(".media-tab").click(function () {
          $(".media-tab").removeClass("active");
          $(this).addClass("active");

          let type = $(this).data("type");
          loadMedia(type);
      });

      // Handle pagination click (delegated event)
      $(document).on("click", ".pagination a", function (e) {
          e.preventDefault();
          let type = $(".media-tab.active").data("type");
          let page = $(this).attr("href").split("page=")[1];
          loadMedia(type, page);
      });
  });


  
</script>
@endsection