@extends('layouts.frontend_master')

@section('content')


@include(
'web._partials.page-banner',
[
'title' => $product_page->title,
'image' => $product_detail->cover_image->getPath(),

]
)

<!-- BLOG -->
<section class="section-padding-top section-light-bg-color">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-6">
        <figure class="overflow-hidden aspect-ratio-1 position-sticky">
          <img src="{{$product_detail->feature_image->getPath()}}" alt="Design and Professional Guidance"
            class="h-100 w-100 object-fit-cover">
        </figure>
      </div>
      <div class="col-12 col-lg-6">
        <div class="position-sticky">
          <div class="header-section mt-4 mt-lg-0">
            <span class="section-subheader text-uppercase primary-color mb-0">[ OUR PRODUCTS ]</span>
            <h2 class="section-header secondary-color">{{$product_detail->title}}</h2>
          </div>
          <article class="mt-4 mt-lg-5 mb-4_5">
            {!!$product_detail->description!!}
          </article>
          @if (isset($inquiry_page))   
          <a href="{{ route('page', $inquiry_page->slug) }}" class="main-button text-uppercase mb-4_5">INQUIRE NOW</a>
          @endif
        </div>
      </div>
    </div>
  </div>
</section>

<!-- CAROUSEL -->
@if (count($galleries)>0)
<section class="section-padding-top section-padding-bottom">
  <div class="container">
    <div class="d-flex align-items-center justify-content-between mb-5">
      <div class="header-section">
        <span class="section-subheader text-uppercase primary-color mb-0">[ EXPLORE MORE ]</span>
        <h2 class="section-header secondary-color">Product Gallery</h2>
      </div>
      <div class="product-carousel-buttons d-flex justify-content-center align-items-center gap-3">
        <div
          class="product-carousel-button product-carousel-button-left justify-content-center align-items-center animate__animated animate__fadeInRight">
          <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M9.26403 17.536L0.728027 8.99999L9.26403 0.463989L10.496 1.69599L3.19203 8.99999L10.496 16.304L9.26403 17.536Z"
              fill="currentColor" />
            <path d="M1.96002 8.12H16.92V9.88H1.96002V8.12Z" fill="currentColor" />
          </svg>
        </div>
        <div class="product-carousel-button product-carousel-button-right justify-content-center align-items-center">
          <svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M7.73603 17.536L6.50403 16.304L13.808 8.99999L6.50403 1.69599L7.73603 0.463989L16.272 8.99999L7.73603 17.536Z"
              fill="currentColor" />
            <path d="M0.0800171 8.12H15.04V9.88H0.0800171V8.12Z" fill="currentColor" />
          </svg>
        </div>
      </div>
    </div>
    <div class="product-carousel owl-carousel owl-theme">
      @foreach ($galleries as $item )
      <div class="item">
        <figure class="overflow-hidden aspect-ratio-3_4">
          <img src={{$item->getPath()}} alt={{$item->alt}} class="h-100 w-100 object-fit-cover">
        </figure>
      </div>
      @endforeach

    </div>
  </div>
</section>
@endif



@endsection