@extends('layouts.main')

@section('title', $product['product_name'])

@section('navbar')
  @include('layouts.navbar')
@endsection

@section('style')

  <style>
    .modal-content {
      background: rgba(0, 0, 0, 0.9);
      backdrop-filter: blur(10px);
      border-radius: 1rem;
      animation: fadeIn 0.4s ease-in-out;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: scale(0.95);
      }

      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    .btn-close-white {
      filter: invert(1);
    }
  </style>
  <style>
    .sticky_ {
      position: sticky;
      top: 60px;
    }

    .rating>label {
      color: #90A0A3;
      float: right;
    }

    .rating>label:before {
      margin: 5px;
      font-size: 2em;
      font-family: FontAwesome;
      content: "\f005";
      display: inline-block;
    }

    .rating>input {
      display: none;
    }

    .rating>input:checked~label,
    .rating:not(:checked)>label:hover,
    .rating:not(:checked)>label:hover~label {
      color: #F79426;
    }

    .rating>input:checked+label:hover,
    .rating>input:checked~label:hover,
    .rating>label:hover~input:checked~label,
    .rating>input:checked~label:hover~label {
      color: #FECE31;
    }
  </style>
@endsection

@section('content')
  <div class="container my-5">
    <div class="row">
      <!-- Left: Product Images -->
      <div class="col-md-5">
        <div class="sticky_">
          <div class="border rounded p-3">
            <img id="mainImage" src="{{ $priviewImages['0'] }}" style="max-height: 505px" class="img-fluid rounded mb-3"
              alt="Product Image">

            <div class="d-flex flex-wrap gap-2">
              @foreach ($priviewImages as $url)
                @if (!empty($url))
                  <img src="{{ $url }}" class="img-thumbnail"
                    style="width: 70px; height: 70px; object-fit: cover; cursor: pointer;"
                    onclick="document.getElementById('mainImage').src=this.src;">
                @endif
              @endforeach
            </div>
          </div>
          <div class="d-flex justify-content-center pt-2">
            <a href="{{ route('customizeimage', enc($product['id'])) }}" class="btn btn-sm w-100 btn-primary">Edit
              Image</a>
          </div>
        </div>
      </div>

      <!-- Right: Product Details -->
      @include('components.product_info')
    </div>




    <!-- Product Banners Section -->
    @if (count($productBanners) > 0)
      <div class="mt-5">
        <h5 class="mb-3">Product Details</h5>
        @foreach ($productBanners as $v)
          <hr>
          <div class="row mb-4">
            @if ($v['image_site'] == 'left')
              <div class="col-md-5 mb-2">
                <img src="{{ url('images/product_banners/' . $v['image']) }}" alt="Banner Image"
                  class="img-fluid rounded shadow-sm">
              </div>
              <div class="col-md-7">
                <h5>{{ $v['title'] }}</h5>
                <p class="text-muted">{{ $v['description'] }}</p>
              </div>
            @elseif ($v['image_site'] == 'right')
              <div class="col-md-7">
                <h5>{{ $v['title'] }}</h5>
                <p class="text-muted">{{ $v['description'] }}</p>
              </div>
              <div class="col-md-5 mb-2">
                <img src="{{ url('images/product_banners/' . $v['image']) }}" alt="Banner Image"
                  class="img-fluid rounded shadow-sm">
              </div>
            @endif
          </div>
        @endforeach
      </div>
    @endif

    @include('components.recommended_products')
    @include('components.review_list')

  </div>

  <!-- Sticky Mobile Buttons -->
  <div class="d-md-none fixed-bottom bg-light border-top p-3 d-flex justify-content-around">
    <button class="btn btn-outline-primary w-50 me-2" type="button" onclick="add_to_cart(`{{ $product['id'] }}`)">Add to
      Cart</button>
    <button class="btn btn-danger w-50" type="button" onclick="add_to_cart(`{{ $product['id'] }}`)">Buy Now</button>
  </div>


  <!-- Media Preview Modal -->
  <div class="modal fade" id="mediaModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down modal-xl">
      <div class="modal-content bg-black border-0">

        <!-- Close Button -->
        <button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 m-3 z-3"
          data-bs-dismiss="modal" aria-label="Close"></button>

        <!-- Modal Body with Max Height/Width -->
        <div class="modal-body d-flex justify-content-center align-items-center p-0" style="height: 95vh;">

          <!-- Image Viewer -->
          <img id="modalImage" class="img-fluid d-none" alt="Image Preview"
            style="max-height: 100%; max-width: 100%; object-fit: contain;">

          <!-- Video Viewer -->
          <video id="modalVideo" class="d-none w-100 h-100" controls style="object-fit: contain;">
            <source id="modalVideoSource" src="" type="video/mp4">
            Your browser does not support the video tag.
          </video>
        </div>
      </div>
    </div>
  </div>




@endsection

@section('script')
  <script>
    let currentPage = 2;
    let loading = false;

    function loadMoreReviews() {
      if (loading) return;
      loading = true;

      let productId = "{{ enc($product['id']) }}"; // use your enc() method here
      let url = "{{ route('product.loadMoreReviews', ['id' => '__ID__']) }}".replace('__ID__', productId);

      $.ajax({
        url: url,
        type: 'GET',
        data: {
          page: currentPage
        },
        success: function(response) {
          $('#loadMore').before(response.html);
          currentPage++;

          if (!response.hasMore) {
            $('#loadMore').remove();
          }

          loading = false;
        },
        error: function(xhr) {
          alert('Something went wrong while loading reviews.');
          loading = false;
        }
      });
    }
  </script>
  <script>
    function confirmDelete() {
      return confirm('Are you sure you want to delete your review?');
    }
  </script>
  <script>
    let qty = 1;

    function updateQty(val) {
      qty += val;
      if (qty < 1) qty = 1;
      document.getElementById('quantity').value = qty;
    }

    function toggleDesc(e) {
      e.preventDefault();
      document.getElementById('short-desc').classList.toggle('d-none');
      document.getElementById('full-desc').classList.toggle('d-none');
      e.target.remove();
    }
  </script>
  <script>
    // Check if the URL contains a fragment identifier for a review
    document.addEventListener('DOMContentLoaded', function() {
      if (window.location.hash) {
        const hash = window.location.hash;
        const target = document.querySelector(hash);

        // If the target exists, scroll to it smoothly
        if (target) {
          target.scrollIntoView({
            behavior: 'smooth'
          });
        }
      }
    });
  </script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const modal = document.getElementById('mediaModal');
      const modalImage = document.getElementById('modalImage');
      const modalVideo = document.getElementById('modalVideo');
      const modalVideoSource = document.getElementById('modalVideoSource');

      modal.addEventListener('show.bs.modal', function(event) {
        const trigger = event.relatedTarget || event.target.querySelector('[data-src]');
        const fileType = trigger.getAttribute('data-filetype');
        const src = trigger.getAttribute('data-src');

        if (fileType === 'image') {
          modalImage.src = src;
          modalImage.classList.remove('d-none');
          modalVideo.classList.add('d-none');
        } else if (fileType === 'video') {
          modalVideoSource.src = src;
          modalVideo.load();
          modalVideo.classList.remove('d-none');
          modalImage.classList.add('d-none');
        }
      });

      modal.addEventListener('hidden.bs.modal', function() {
        modalImage.src = '';
        modalVideo.pause();
        modalVideo.currentTime = 0;
        modalVideoSource.src = '';
        modalImage.classList.add('d-none');
        modalVideo.classList.add('d-none');
      });
    });
  </script>
@endsection