@include('ai_includes.header')

<section class="tabs h-100">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<style>
  .object-fit-cover {
    object-fit: cover;
  }
</style>

<div class="container py-5">

    <div class="container py-5">
        <h2 class="text-center fw-bold display-3 mb-5">Bring Health home</h2>
        <div class="row g-5 py-5">
          <!-- Image Grid -->
          <div class="col-12 col-lg-6">
            <div class="row g-3">
              <!-- Main Image -->
              <div class="col-12">
                <div class="ratio ratio-4x3 rounded overflow-hidden">
                  @php
                  $images = $product->images ? explode(',', $product->images) : [];
                  @endphp
                  <img src="{{url('uploads/products/'.$images[0])}}" class="w-100 h-100 object-fit-contain" alt="Main Product">
                </div>
              </div>
              <!-- Thumbnails -->
              {{-- <div class="col-6 col-sm-12 col-lg-12">
                <div class="ratio ratio-1x1 rounded overflow-hidden">
                  <img src="{{url('custom/ai-asset/contact-free-bg.png')}}" class="w-100 h-100 object-fit-contain " alt="Thumb 1">
                </div>
              </div>
              <div class="col-6 col-sm-3 col-lg-6">
                <div class="ratio ratio-1x1 rounded overflow-hidden">
                  <img src="https://via.placeholder.com/400" class="w-100 h-100 object-fit-cover" alt="Thumb 2">
                </div>
              </div>
              <div class="col-6 col-sm-3 col-lg-6">
                <div class="ratio ratio-1x1 rounded overflow-hidden">
                  <img src="https://via.placeholder.com/400" class="w-100 h-100 object-fit-cover" alt="Thumb 3">
                </div>
              </div>
              <div class="col-6 col-sm-3 col-lg-6">
                <div class="ratio ratio-1x1 rounded overflow-hidden">
                  <img src="https://via.placeholder.com/400" class="w-100 h-100 object-fit-cover" alt="Thumb 4">
                </div>
              </div> --}}
            </div>
          </div>
      
          <!-- Product Info -->
          <div class="col-12 col-lg-6">
            <h1 class="display-5 fw-bold">{{$product->name}}</h1>
            <p class="text-muted fs-5 mb-4">Engineered for optimal comfort and long-lasting support, our Signature Comfort Bed combines luxury materials with smart craftsmanship for a restful sleep every night.</p>
      
            <div class="mb-3">
              <strong class="fs-4">&#8377; <span class="price">{{$product->variants[0]->price}}</span></strong>
              <span class="text-muted text-decoration-line-through ms-2">&#8377; <span class="discount">{{$product->variants[0]->price + ($product->variants[0]->price*$product->variants[0]->discount)/100}}</span></span>
            </div>
      
            <ul class="mb-4" style="list-style: none;">
              <li>✔️ Premium memory foam for full-body support</li>
              <li>✔️ Breathable top layer for cooling comfort</li>
              <li>✔️ 10-year warranty</li>
              <li>✔️ Free shipping & 100-night trial</li>
            </ul>
      
            <div class="d-grid gap-2 d-md-flex">
              <button class="btn btn-dark btn-lg add-to-cart" data-variant-id="{{$product->variants[0]->id}}">Add to Cart</button>
              <button class="btn variantBtn btn-outline-secondary btn-lg">{{$product->variants[0]->dimensionx}}" x {{$product->variants[0]->dimensiony}}" x {{$product->variants[0]->height}}"</button>
            </div>
          </div>
        </div>
        <div class="row justify-content-evenly pb-5">
          <h2 class="text-center fw-bold display-5 mb-5">What Sets Us Apart</h2>
          <div class="d-flex justify-content-center align-items-center flex-column col-12 col-sm-5">
            <img src="{{url('custom/ai-asset/contact-free.png')}}" class="w-100 rounded-4 h-100 object-fit-contain" alt="Contact Free Feature">
            <h4 class="text-center fw-bold my-3">Our mattress doesn’t just support your body — it listens to it</h4>
            <p class="text-center ">
              Using embedded, contactless sensors, it tracks vital signs like your heart rate, breathing patterns, and sleep movement — all without touching your skin.
               It’s a smarter, safer, and more comfortable way to understand your health as you sleep.
            </p>
          </div>
          <div class="d-flex justify-content-center align-items-center flex-column col-12 col-sm-5">
            <img src="{{url('custom/ai-asset/sleepace-new.png')}}" class="w-100 rounded-4 h-100 object-fit-cover" alt="Our Device">
            <h4 class="text-center fw-bold my-3">Smarter Sleep Starts Here</h4>
            <p class="text-center">
              Our AI-powered health monitoring device is seamlessly embedded within the mattress to
               track vital metrics like heart rate, breathing patterns, and movement—helping you sleep better and live healthier.
                Engineered with precision and crafted outside of China, it delivers intelligent insights without compromising on quality or data integrity.
            </p>
          </div>
        </div>
    </div>

</section>
<style>
#variant-backdrop{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 600;
  /* display: none; */
}
#variant-div{
  position: fixed;
  top: 150%;
  left: 50%;
  /* margin-top:5vh; */
  transform: translate(-50%, -30%);
  width: min(98vw, 600px);
  height: 70%;
  background-color: white;
  z-index: 600;
  padding:20px;
  border-radius: 10px;
  display: none;
  transition: all 1s ease-in-out;
  /* overflow: hidden; */
}
#variant-div.show{
  display: block !important;
  top: 30% !important;
}
.variant-body{
  overflow-y: scroll;
  height: calc(100% - 60px);
  overflow-x: hidden;
  scrollbar-width: none;
}
.variant-footer{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  margin-top: 10px;
}
.variant-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.variant-title{
  font-size: 1.5rem;
  font-weight: 600;
}
.variant-close{
  cursor: pointer;
  font-size: 1.2rem;
}
.dimensions {
  padding: 4px;
}
.heights {
  padding: 4px;
}
.dimensions .active {
  background-color: #c6ddff !important;
  border: 1px solid #c6ddff !important;
  color: #003b91 !important;
}
.heights .active {
  background-color: #c6ddff !important;
  border: 1px solid #c6ddff !important;
  color: #003b91 !important;
}
.dimensions div{
  border-radius: 14px;
  padding: 8px;
  border: 1px solid #bfc7cf;
  color: black;
  font-size: 14px;
  font-weight: 500;
}
.heights div{
  border-radius: 14px;
  padding: 8px;
  border: 1px solid #bfc7cf;
  color: black;
  font-size: 14px;
  font-weight: 500;
}

</style>
<div id="variant-backdrop" class="d-none"></div>
<div id="variant-div" >
  <div class="variant-body">
    <div class="variant-header">
      <h4 class="variant-title">Choose your mattress</h4>
      <div class="variant-close">
        <i class="fa fa-times" aria-hidden="true"></i>
      </div>
    </div>
    <div class="variant-content">
      <div class="row">
        <div class="d-flex gap-3 align-items-center col-12">
          <img class="object-fit-cover" src="{{url('uploads/products/'.$images[0])}}" height="60" width="60" style="border-radius: 5px;" alt="">  
          <h6>{{$product->name}}</h6>
        </div>
        <hr class="my-3 w-75 mx-auto">
        <div class="row mx-auto mt-3 col-12">
          <col-12>
            <h6 class="text-muted">Dimensions :</h6>
          </col-12>
          @foreach($dimensions as $key=>$d)
          <div class="col-4 col-sm-3 text-center dimensions ">
            <div data-x="{{$d->dimensionx}}" data-y="{{$d->dimensiony}}" class="{{$product->variants[0]->dimensionx == $d->dimensionx && $product->variants[0]->dimensiony == $d->dimensiony ? 'active' : ''}}">
              <span class="">{{$d->dimensionx}}" x {{$d->dimensiony}}"</span>
            </div>
          </div>
          @endforeach
          {{-- <div class="col-4 col-sm-3 text-center dimensions">
            <div class="">
              <span class="">70" x 70"</span>
            </div>
          </div>
          <div class="col-4 col-sm-3 text-center dimensions">
            <div class="">
              <span class="">70" x 70"</span>
            </div>
          </div>
          <div class="col-4 col-sm-3 text-center dimensions">
            <div class="">
              <span class="">70 x 70</span>
            </div>
          </div>
          <div class="col-4 col-sm-3 text-center dimensions">
            <div class="">
              <span class="">70 x 70</span>
            </div>
          </div>
          <div class="col-4 col-sm-3 text-center dimensions">
            <div class="">
              <span class="">70 x 70</span>
            </div>
          </div>
          <div class="col-4 col-sm-3 text-center dimensions">
            <div class="">
              <span class="">70 x 70</span>
            </div>
          </div>
          <div class="col-4 col-sm-3 text-center dimensions">
            <div class="">
              <span class="">70 x 70</span>
            </div>
          </div> --}}
        </div>
        {{-- <hr class="my-3 w-75 mx-auto"> --}}
        <div class="row mx-auto col-12 mt-4">
          <col-12>
            <h6 class="text-muted">Thicknesss :</h6>
          </col-12>
          @foreach($heights as $h)
          <div class="col-4 col-sm-3 text-center heights ">
            <div data-height="{{$h->height}}" class="{{$product->variants[0]->height == $h->height ? 'active' : ''}}">
              <span class="">{{$h->height}} inch</span>
            </div>
          </div>
          @endforeach
          {{-- <div class="col-4 col-sm-3 text-center dimensions">
            <div class="">
              <span class="">7 inch</span>
            </div>
          </div>
          <div class="col-4 col-sm-3 text-center dimensions">
            <div class="">
              <span class="">8 inch</span>
            </div>
          </div>
          <div class="col-4 col-sm-3 text-center dimensions">
            <div class="">
              <span class="">10 inch</span>
            </div>
          </div> --}}
        </div>
        {{-- <hr class="mt-5 mb-3 w-75 mx-auto">
        <div class="d-flex align-items-center ms-3 gap-3 col-12">
          <h5>Price :</h5>
          <h4>
            <span style="color:#003b91 !important;font-weight: 600;">&#8377; {{$product->variants[0]->price}}</span>
            <span class="text-muted" style="text-decoration: line-through;font-size: 0.8rem">&#8377; {{$product->variants[0]->price}}</span>
          </h4>
        </div> --}}
        {{-- @foreach ($product->variants as $variant)
        <div class="col-6 mb-3">
          <div class="card h-100">
            <img src="{{url('storage/'.$variant->image)}}" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">{{$variant->title}}</h5>
              <p class="card-text">{{$variant->description}}</p>
              <p class="card-text">&#8377; {{$variant->price}}</p>
              <button class="btn btn-primary add-to-cart" data-variant-id="{{$variant->id}}">Add to Cart</button>
            </div>
          </div>
        </div>
        @endforeach --}}
      </div>
    </div>
  </div>
  <div class="variant-footer">
    <div class="col-12">
        <a href="javascript:void(0)" class="btn btn-dark variantConfirm fw-600 fs-5 w-100">Confirm Preferences</a>
    </div>
  </div>
</div>
@include('ai_includes.footer')

<script>
$('.add-to-cart').on('click', function() {
  var variantId = $(this).data('variant-id');
  addToCart({variantId:variantId});
});

$('.dimensions').on('click', function() {
  $('.dimensions').find('div').removeClass('active');
  $(this).find('div').addClass('active');
});

$('.heights').on('click', function() {
  $('.heights').find('div').removeClass('active');
  $(this).find('div').addClass('active');
});

$('.variantConfirm').on('click', async function() {
  var product_id = {{$product->id}};
  var dimensions = $('.dimensions .active');
  var dx = dimensions.data('x');
  var dy = dimensions.data('y');
  var height = $('.heights .active').data('height');
  var data = {
                product_id: product_id,
                dx: dx,
                dy: dy,
                height: height
              };
  try{
    var response = await findVariantWithDimensions(data);
    if(response.status == 'error'){
      Swal.fire({
        title: response.message,
        icon: 'error',
        timer: 2000
      });
      return false;
    }
    if(response.status == 'success'){
      if(response.variant){
        var variant =response.variant;
        updatePrice({price:variant.price, discount:variant.discount});
        $('.variantBtn').text(variant.dimensionx+'" x '+variant.dimensiony+'" x '+variant.height+'"');
        // addToCart({variantId:response.variant.id});
        $('#variant-div').removeClass('show');
        $('#variant-backdrop').addClass('d-none');
      }
    }
  }catch(e){
    console.log(e);
  }
  // addToCart({variantId:variantId});
});

$('.variantBtn').on('click', function() {
  $('#variant-div').addClass('show');
  $('body').addClass('no-scroll');
  $('#variant-backdrop').removeClass('d-none');
});

$('.variant-close,#variant-backdrop').on('click', function() {
  $('#variant-div').removeClass('show');
  $('body').removeClass('no-scroll');
  $('#variant-backdrop').addClass('d-none');
});

function findVariantWithDimensions(data) {
  return $.ajax({
    url: "{{url('findVariantWithDimensions')}}",
    type: "GET",
    data: data,
  });
}
function updatePrice(data) {
  var price = parseInt(data.price);
  var discount = parseInt(data.discount);
  var discountVal= price + (price * discount / 100);
  console.log(price);
  $('.price').text(price);
  $('.discount').text(discountVal);
}
</script>