@extends('layouts.main')

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

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

@section('style')

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

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

    .btn-close-white {
      filter: invert(1);
    }

    .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;
    }

    .product-list-card:hover {
      box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
      transition: 0.3s ease-in-out;
    }

    .product-list-card h6 {
      font-size: 16px;
    }

    .product-list-card .img-fluid {
      border-radius: 6px;
    }

    .hrt_icon_ {
      background: rgba(255, 255, 255, 0.9);
      padding: 5px;
      border-radius: 50%;
      transition: all 0.2s ease-in-out;
    }

    .hrt_icon_:hover {
      background: red;
      color: white;
    }

    .pre_map {
      overflow: hidden;
      position: absolute;
    }

    .pre_img {
      width: 100%;
      display: block;
    }
  </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">

            @if (isset($microsite_subdomain) && $microsite_subdomain != '')
              @if (isset($product['image_mapping']) && !empty($product['image_mapping']))
                @foreach ($product['image_mapping'] as $i => $map_img)
                  <div class="position-relative">
                    <img src="{{ url('images/products/' . $map_img['image_path']) }}" class="img-fluid w-100 h-auto"
                      style="object-fit: contain; border-radius: 8px;">
                    <div class="mapped-areas">
                      @php
                        $map_img['x'] = json_decode($map_img['x'], true);
                        $map_img['y'] = json_decode($map_img['y'], true);
                        $map_img['height'] = json_decode($map_img['height'], true);
                        $map_img['width'] = json_decode($map_img['width'], true);
                        $map_img['angle'] = json_decode($map_img['angle'], true);
                      @endphp
                      @foreach ($map_img['x'] as $j => $x)
                        <div class="position-absolute pre_map d-flex justify-content-center align-items-center"
                          style="width:{{ $map_img['width'][$j] }}%;height:{{ $map_img['height'][$j] }}%;left:{{ $x }}%;top:{{ $map_img['y'][$j] }}%;transform:{{ $map_img['angle'][$j] ?? '' }};">
                          <img src="{{ url('images/micrositelogo/' . $microsite_data['logo']) }}" class="w-100 h-auto"
                            alt="">
                        </div>
                      @endforeach
                    </div>
                  </div>
                @endforeach
              @else
                @include('components.product_image_view')
              @endif
            @else
              @include('components.product_image_view')
            @endif
          </div>
          @if (!empty($map_imgs) && $microsite_subdomain == '')
            <div class="d-flex justify-content-center pt-2">
              <span class="w-100">
                <a href="{{ route('customizeimage', enc($product['id'])) }}" class="btn btn-sm btn-primary w-100"
                  style="margin-right: 5px;">Upload
                  Image</a>
              </span>
              {{-- <form id="cdr_pdf_form" class="w-50">
                @csrf
                <input type="hidden" name="product" value="{{ enc($product['id']) }}">
                <label class="btn btn-sm btn-primary w-100" style="margin-left: 5px;" for="cdr_pdf_input">Upload
                  PDF</label>
                <input type="file" accept=".cdr,.pdf" name="cdr_pdf" class="d-none" id="cdr_pdf_input">
              </form> --}}
            </div>
            <small class="text-danger" style="font-size: 0.75rem;">
              Note Image size: <strong>1000X1000</strong>. Only .png, .pdf, and .jpg files are supported.
            </small>

            <div id="uploaded_file_display">
              @if (isset($preview_product['cdr_pdf']) && $preview_product['cdr_pdf'] != '')
                @foreach ($preview_product['cdr_pdf'] as $item)
                  @if ($item != '')
                    <div class="mt-2">
                      <a href="{{ url('files/cdr_pdf/' . $item) }}" target="_blank">View Uploaded
                        File</a>
                    </div>
                  @endif
                @endforeach
              @endif
            </div>
          @endif
        </div>
      </div>

      <!-- Right: Product Info -->
      @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',
        global: false,
        data: {
          page: currentPage
        },
        success: function(response) {
          $('#loadMore').before(response.html);
          currentPage++;

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

          loading = false;
        },
        error: function(xhr) {
          showAlert("Something went wrong while loading reviews.", "danger", "");
          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');
      });
    });

    $(document).on('change', '#cdr_pdf_input', function() {
      const formData = new FormData($('#cdr_pdf_form')[0]);
      const url = `{{ route('uploadcdrpdf') }}`;

      // Show loader

      $.ajax({
        url: url,
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
          // Hide loader
          showAlert(response.mess, response.color, response.other);
          $('label[for="cdr_pdf_input"]').text(`Edit PDF`);



          if (response.converted_path) {
            window.location.href = `${response.next_url}?converted_path=${response.converted_path}`;
          }

        },
        error: function(xhr) {
          // Hide loader
          showAlert("An error occurred while uploading the file, Please try again.", "danger", "");
        }
      });
    });

    if ($('#uploaded_file_display').children().length > 0) {
      $('label[for="cdr_pdf_input"]').text(`Edit PDF`);
    }
  </script>




@endsection