@extends('layouts.new-layout')
@section('content')
     


     
      <!-- ============================================-->

    <section class="py-5">
      <div class="container">
      <!-- <nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Tub</a></li>
    <li class="breadcrumb-item active" aria-current="page">Detail</li>
  </ol>
</nav> -->
        <div class="row">
        <div class="col-md-7 my-2">
        <div class="photo-gallery">
  <div class="">
    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-2 g-3 gallery-grid">
      <div class="col">
        <a class="gallery-item" href="/new-assets/img/gallery/upload.webp">
          <img src="/new-assets/img/gallery/upload.webp" class="img-fluid" alt="Lorem ipsum dolor sit amet">
        </a>
      </div>
      <div class="col">
        <a class="gallery-item" href="/new-assets/img/gallery/upload-1.webp">
          <img src="/new-assets/img/gallery/upload-1.webp" class="img-fluid" alt="Ipsum lorem dolor sit amet">
        </a>
      </div>
      <div class="col">
        <a class="gallery-item" href="/new-assets/img/gallery/upload-1.webp">
          <img src="/new-assets/img/gallery/Mocha-Pearl1.jpg" class="img-fluid" alt="Ipsum lorem dolor sit amet">
        </a>
      </div>
      <div class="col">
        <a class="gallery-item" href="/new-assets/img/gallery/upload.webp">
          <img src="/new-assets/img/gallery/Mocha-Pearl.jpg" class="img-fluid" alt="Ipsum lorem dolor sit amet">
        </a>
      </div>
      
    </div>
  </div>
</div>

<div class="modal fade lightbox-modal" id="lightbox-modal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-fullscreen">
    <div class="modal-content">
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      <div class="modal-body">
        <div class="lightbox-content">
          <!-- JS content here -->
        </div>
      </div>
    </div>
  </div>
</div>



          <!-- <img class="img-fluid" src="/new-assets/img/gallery/upload.webp"> -->
        </div>
        <div class="col-md-5 my-2">
          <h2 class="fw-bold pt-3">Resort 300 <span class="gray-font">(4-6 people)</span></h2>
          <h4 class="blue-fonts">$400.00</h4>
          <hr>
          <div class="col-12">
  <p>Color: <span class="fw-bold">Black</span></p>
  <div class="box-color black"></div><div class="box-color brown"></div><div class="box-color black"></div>
  </div>
          <!-- <p>Ready to ship in approximately 2 weeks (August 15, 2024).</p>
          <div class="product-ratingsContainer1"><span>3.8</span><span class="rating-star"> <i class="fa fa-star" aria-hidden="true"></i> </span>
          <div class="product-ratingsCount"><div class="product-separator">|</div>
          <div class="d-flex">298 Ratings</div></div></div> -->
      
      <p>In stock (255 units), ready to be shipped</p>
          <hr class="n-line">
          
<!-- <ul>
<li>Weekend $350</li>

<li>1st Week: $400</li>

<li>Each Additional week: $250</li>

<li>4 weeks upfront: $10</li>
</ul> -->

<div class="row">
  <div class="col-8 pe-0">
  <p class="mb-2 fw-bold">Size</p>
  <select class="form-select1 mb-4">
                          <option value="1" selected="">100 X 200</option>
                          <option value="2">100 X 200</option>
                          <option value="3">100 X 200</option>
                          <option value="4">100 X 200</option>
                          <option value="5">100 X 200</option>
                        </select>
  </div>
  <div class="col-4">
  <p class="mb-2 fw-bold">Quantity</p>
  <select class="form-select1 mb-4">
                          <option value="1" selected="">1</option>
                          <option value="2">2</option>
                          <option value="3">3</option>
                          <option value="4">4</option>
                          <option value="5">5</option>
                        </select>
  </div>
</div>
  <!-- <div class="row">
  <div class="col-12 pe-0 mb-3">
  <a class="btn-blue2 w-100 text-center" href=""> <span>Add To Cart <i class="fa fa-shopping-basket" aria-hidden="true"></i></span></a>
  </div>
  </div> -->
<div class="row">
<div class="col-6 mb-4 pe-0"><a class="btn-blue2 text-center w-100 button-48" href=""> 
  <span>BUY NOW <i class="fa fa-shopping-cart" aria-hidden="true"></i></span>
</a>
</div>
<div class="col-6 mb-4">
<a class="btn-blue1 w-100 text-center button-48" href=""> 
  <span>RENT NOW <i class="fa fa-tag" aria-hidden="true"></i>
</span></a></div>
</div>
<div class="row">
<div class="col-12 mb-4 pe-0">
<ul>
<li>Pickup available at United kingdom</li>
<li>Usually ready in 24 hours</li>
</ul>
<a style="text-decoration: underline!important;" href="">Check availability</a>
</a>
</div>

</div>

<div class="row mt-2">
<div class="col-12 mb-4 pe-0">
  <h4>Key Features</h4>
  <hr>
<ul>
<li>Weekend $350</li>

<li>1st Week: $400</li>

<li>Each Additional week: $250</li>

<li>4 weeks upfront: $10</li>
</ul>
</div>

</div>

<div class="row mt-2">
<div class="col-6 mb-4">
<div class="abb-l"> <h5 class="mb-2 mq"><i class="fa fa-tag" aria-hidden="true"></i> <span class="text-blue">Available Bank offers</span></h5>
 <p class="fw-bold mb-2"> Instant 10% Discount On Selected Cards</p>

HDFC Banks Credit/Debit Cards EMI and CreditCard Full Swipe.
</div></div>
<div class="col-6 mb-4">
<div class="abb-2"> <h5 class="mb-2 mq"><i class="fa fa-user" aria-hidden="true"></i> <span class="text-blue">Vip members only</span></h5>
 <p class="fw-bold mb-2"> Vip Exclusive Deal for vip members only</p>

 Fastest Delivery Tomorrow With Vip DealOrder within 1 hr 8 mins.
</div></div>

</div>

<div class="row my-4">
<div class="col-4 mb-4">
  <div class="text-center">
<i class="fa fa-truck fft20 text-blue" aria-hidden="true"></i><br>
Express Delivery</div>
</div>
<div class="col-4 mb-4">
<div class="text-center">
<i class="fa fa-reply fft20 text-blue" aria-hidden="true"></i><br>
12 Months Warranty</div>
</div>
<div class="col-4 mb-4">
<div class="text-center">
<i class="fa fa-recycle fft20 text-blue" aria-hidden="true"></i><br>
7 Days Easy Replace</div>
</div>

</div>


        </div>
      </div>
      <div class="row mt-5">
<div class="accordion accordion-flush" id="accordionFlushExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="flush-headingOne">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
        Description
      </button>
    </h2>
    <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="flush-headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
      Product Features
      </button>
    </h2>
    <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
      <div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
    </div>
  </div>
 
</div>   
        </div>
        <div class="row mt-5">
          <h4>Buy it with</h4>
        <div class="col-md-4 p-3 buy-add-on position-relative">
                <div class="border-0 ">
            <div class="position-relative imm left-1">
            <img class="img-fluid img1" src="/new-assets/img/gallery/upload.webp">
            <!-- <div class="product-ratingsContainer"><span>3.8</span><span class="rating-star"> <i class="fa fa-star" aria-hidden="true"></i> </span><div class="product-ratingsCount"><div class="product-separator">|</div><div class="d-flex">298</div></div></div> -->
       
            <div class=" image-over pt-0 pb-3">
            <div class="tt-main main-text-img my-4">
                <div class="sst">
                <div class="line1"></div>
            <p class="mb-0">From $400.00</p>
            <h3 class="mb-0">Resort 300</h3> 
            <div class="col-12 mt-2">
  <div class="box-color1 black"></div><div class="box-color1 brown"></div><div class="box-color1 black"></div>
  </div></div>
  <div class="sst1">
    <div><i class="fa fa-star yellow-t" aria-hidden="true"></i><i class="fa fa-star yellow-t" aria-hidden="true"></i><i class="fa fa-star yellow-t" aria-hidden="true"></i><i class="fa fa-star yellow-t" aria-hidden="true"></i><i class="fa fa-star yellow-t" aria-hidden="true"></i></div>
    <a class="cart-btn" href=""><i class="fa fa-plus" aria-hidden="true"></i></a>
</div>
        </div> 
                 
        <!-- <div><a class="btn-blue button-48" href=""> <span>BUY NOW <i class="fa fa-shopping-cart" aria-hidden="true"></i></span></a><a class="btn-blue button-48" href=""> <span>RENT NOW <i class="fa fa-tag" aria-hidden="true"></i></span></a></div> -->
       
    </div>
        </div>
            </div>
        </div>
        <div class="col-md-4 p-3">
                <div class="border-0 ">
            <div class="position-relative imm left-1">
            <img class="img-fluid img1" src="/new-assets/img/gallery/upload.webp">
            <!-- <div class="product-ratingsContainer"><span>3.8</span><span class="rating-star"> <i class="fa fa-star" aria-hidden="true"></i> </span><div class="product-ratingsCount"><div class="product-separator">|</div><div class="d-flex">298</div></div></div> -->
       
            <div class=" image-over pt-0 pb-3">
            <div class="tt-main main-text-img my-4">
                <div class="sst">
                <div class="line1"></div>
            <p class="mb-0">From $400.00</p>
            <h3 class="mb-0">Resort 300</h3> 
            <div class="col-12 mt-2">
  <div class="box-color1 black"></div><div class="box-color1 brown"></div><div class="box-color1 black"></div>
  </div></div>
  <div class="sst1">
    <div><i class="fa fa-star yellow-t" aria-hidden="true"></i><i class="fa fa-star yellow-t" aria-hidden="true"></i><i class="fa fa-star yellow-t" aria-hidden="true"></i><i class="fa fa-star yellow-t" aria-hidden="true"></i><i class="fa fa-star yellow-t" aria-hidden="true"></i></div>
    <a class="cart-btn" href=""><i class="fa fa-plus" aria-hidden="true"></i></a>
</div>
        </div> 
                 
        <!-- <div><a class="btn-blue button-48" href=""> <span>BUY NOW <i class="fa fa-shopping-cart" aria-hidden="true"></i></span></a><a class="btn-blue button-48" href=""> <span>RENT NOW <i class="fa fa-tag" aria-hidden="true"></i></span></a></div> -->
       
    </div>
        </div>
            </div>
        </div>
        
        <div class="col-md-4 p-3">
                <div class="text-center mt-5">
                  <h5 class="mb-3">Total price:$4,598.00</h5>
                  <div class="col-12 mb-4 pe-0"><a class="btn-blue2 text-center w-100 button-48" href=""> 
  <span>BUY NOW <i class="fa fa-shopping-cart" aria-hidden="true"></i></span>
</a>
</div>
                </div>
        </div>

        </div>
      </div>
    </section>

      
   
       


  

    <script>
      var btn = $("#button");

$(window).scroll(function () {
  if ($(window).scrollTop() > 300) {
    btn.addClass("show");
  } else {
    btn.removeClass("show");
  }
});

btn.on("click", function (e) {
  e.preventDefault();
  $("html, body").animate({ scrollTop: 0 }, "300");
});
    </script>
    <script>
      AOS.init();
    </script>
    <script type="text/javascript">
      $(document).ready(function () {
          $('.dropdown-toggle').dropdown();
      });
 </script>

 <script>
  const html = document.querySelector('html');
// html.setAttribute('data-bs-theme', 'dark');

const galleryGrid = document.querySelector(".gallery-grid");
const links = galleryGrid.querySelectorAll("a");
const imgs = galleryGrid.querySelectorAll("img");
const lightboxModal = document.getElementById("lightbox-modal");
const bsModal = new bootstrap.Modal(lightboxModal);
const modalBody = lightboxModal.querySelector(".lightbox-content");

function createCaption (caption) {
  return `<div class="carousel-caption d-none d-md-block">
      <h4 class="m-0">${caption}</h4>
    </div>`;
}

function createIndicators (img) {
  let markup = "", i, len;

  const countSlides = links.length;
  const parentCol = img.closest('.col');
  const curIndex = [...parentCol.parentElement.children].indexOf(parentCol);

  for (i = 0, len = countSlides; i < len; i++) {
    markup += `
      <button type="button" data-bs-target="#lightboxCarousel"
        data-bs-slide-to="${i}"
        ${i === curIndex ? 'class="active" aria-current="true"' : ''}
        aria-label="Slide ${i + 1}">
      </button>`;
  }

  return markup;
}

function createSlides (img) {
  let markup = "";
  const currentImgSrc = img.closest('.gallery-item').getAttribute("href");

  for (const img of imgs) {
    const imgSrc = img.closest('.gallery-item').getAttribute("href");
    const imgAlt = img.getAttribute("alt");

    markup += `
      <div class="carousel-item${currentImgSrc === imgSrc ? " active" : ""}">
        <img class="d-block img-fluid w-100" src=${imgSrc} alt="${imgAlt}">
        ${imgAlt ? createCaption(imgAlt) : ""}
      </div>`;
  }

  return markup;
}

function createCarousel (img) {
  const markup = `
    <!-- Lightbox Carousel -->
    <div id="lightboxCarousel" class="carousel slide carousel-fade" data-bs-ride="true">
      <!-- Indicators/dots -->
      <div class="carousel-indicators">
        ${createIndicators(img)}
      </div>
      <!-- Wrapper for Slides -->
      <div class="carousel-inner justify-content-center mx-auto">
        ${createSlides(img)}
      </div>
      <!-- Controls/icons -->
      <button class="carousel-control-prev" type="button" data-bs-target="#lightboxCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#lightboxCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
    `;

  modalBody.innerHTML = markup;
}

for (const link of links) {
  link.addEventListener("click", function (e) {
    e.preventDefault();
    const currentImg = link.querySelector("img");
    const lightboxCarousel = document.getElementById("lightboxCarousel");

    if (lightboxCarousel) {
      const parentCol = link.closest('.col');
      const index = [...parentCol.parentElement.children].indexOf(parentCol);

      const bsCarousel = new bootstrap.Carousel(lightboxCarousel);
      bsCarousel.to(index);
    } else {
      createCarousel(currentImg);
    }

    bsModal.show();
  });
}
  </script>
@endsection