@extends('web.layout.app')

@section('content')
  <main id="content" class="wrapper layout-page">
    <section class="z-index-2 position-relative pb-2 mb-12">
      <div class="bg-body-secondary mb-3">
        <div class="container">
          <nav class="py-4 lh-30px" aria-label="breadcrumb">
            <ol class="breadcrumb justify-content-center py-1 mb-0">
              <li class="breadcrumb-item"><a title="Home" href="{{url('/')}}">{{translate('Home')}}</a></li>
              <li class="breadcrumb-item"><a title="Shop" href="{{route('products')}}">{{translate('Products')}}</a>
              </li>
              <li class="breadcrumb-item active" aria-current="page">{{$product->getTranslation('name')}}</li>
            </ol>
          </nav>
        </div>
      </div>
    </section>
    <section class="container pt-6 pb-13 pb-lg-20">
      <div class="row ">
        <div class="col-md-6 pe-lg-13">
          <div class="row">
            <div class="col-xl-2 pe-xl-0 order-1 order-xl-0 mt-5 mt-xl-0">
              <div id="vertical-slider-thumb" class="slick-slider slick-slider-thumb ps-1 ms-n3 me-n4 mx-xl-0"
                   data-slick-options="{&#34;arrows&#34;:false,&#34;asNavFor&#34;:&#34;#vertical-slider-slides&#34;,&#34;dots&#34;:false,&#34;focusOnSelect&#34;:true,&#34;responsive&#34;:[{&#34;breakpoint&#34;:1260,&#34;settings&#34;:{&#34;vertical&#34;:false}}],&#34;slidesToShow&#34;:4,&#34;vertical&#34;:true}">
                @foreach($product->images as $image)
                <img src="#" data-src="{{asset($image)}}"
                     class="cursor-pointer lazy-image mx-3 mx-xl-0 px-0 mb-xl-7" width="75" height="100" title alt>
                @endforeach

              </div>
            </div>
            <div class="col-xl-10 ps-xl-8 pe-xl-0 order-0 order-xl-1">
              <div id="vertical-slider-slides"
                   class="slick-slider slick-slider-arrow-inside slick-slider-dots-inside slick-slider-dots-light g-0"
                   data-slick-options="{&#34;arrows&#34;:false,&#34;asNavFor&#34;:&#34;#vertical-slider-thumb&#34;,&#34;dots&#34;:false,&#34;slidesToShow&#34;:1,&#34;vertical&#34;:true}">
                @foreach($product->images as $image)
                <a href="{{asset($image)}}" data-gallery="product-gallery">
                  <img src="#"
                                                                                                           data-src="{{asset($image)}}"
                                                                                                           width="540"
                                                                                                           height="720"
                                                                                                           title
                                                                                                           class="h-auto lazy-image"
                                                                                                           alt></a>
                @endforeach
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6 pt-md-0 pt-10">
          <p class="d-flex align-items-center mb-6">
            {{$product->getTranslation('description')}}
          </p>

          <button type="submit"
                  class="btn btn-lg btn-dark mb-7 mt-7 w-100 btn-hover-bg-primary btn-hover-border-primary">Add To Bag
          </button>

          <ul class="single-product-meta list-unstyled border-top pt-7 mt-7">

            <li class="d-flex mb-4 pb-2 align-items-center">
              <span class="text-body-emphasis fw-semibold fs-14px">{{translate('Categories')}}:</span>
              <span class="ps-4">{{$product->category->getTranslation('name')}}</span>
            </li>
            <li class="d-flex mb-4 pb-2 align-items-center">
              <span class="text-body-emphasis fw-semibold fs-14px">{{translate('Share')}}:</span>
              <ul class="list-inline d-flex align-items-center mb-0 col-8 col-lg-10 ps-4">
                <li class="list-inline-item me-7">
                  <a href="#" class="fs-14px text-body product-info-share" data-bs-toggle="tooltip"
                     data-bs-title="Twitter">
                    <i class="fab fa-twitter"></i>
                  </a>
                </li>
                <li class="list-inline-item me-7">
                  <a href="#" class="fs-14px text-body product-info-share" data-bs-toggle="tooltip"
                     data-bs-title="Facebook">
                    <i class="fab fa-facebook-f"></i>
                  </a>
                </li>
                <li class="list-inline-item me-7">
                  <a href="#" class="fs-14px text-body product-info-share" data-bs-toggle="tooltip"
                     data-bs-title="Instagram">
                    <i class="fab fa-instagram"></i>
                  </a>
                </li>
                <li class="list-inline-item">
                  <a href="#" class="fs-14px text-body product-info-share" data-bs-toggle="tooltip"
                     data-bs-title="Youtube">
                    <i class="fab fa-youtube"></i>
                  </a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </section>
    <div class="border-top w-100"></div>

    <div class="border-top w-100 h-1px"></div>
    <section class="container pt-15 pb-15 pt-lg-17 pb-lg-20">

      <div class="slick-slider"
           data-slick-options="{&#34;arrows&#34;:true,&#34;centerMode&#34;:true,&#34;centerPadding&#34;:&#34;calc((100% - 1440px) / 2)&#34;,&#34;dots&#34;:true,&#34;infinite&#34;:true,&#34;responsive&#34;:[{&#34;breakpoint&#34;:1200,&#34;settings&#34;:{&#34;arrows&#34;:false,&#34;dots&#34;:false,&#34;slidesToShow&#34;:3}},{&#34;breakpoint&#34;:992,&#34;settings&#34;:{&#34;arrows&#34;:false,&#34;dots&#34;:false,&#34;slidesToShow&#34;:2}},{&#34;breakpoint&#34;:576,&#34;settings&#34;:{&#34;arrows&#34;:false,&#34;dots&#34;:false,&#34;slidesToShow&#34;:1}}],&#34;slidesToShow&#34;:4}">

        @foreach($products as $p)
        <div class="mb-6">
          <div class="card card-product grid-2 bg-transparent border-0">
            <figure class="card-img-top position-relative mb-7 overflow-hidden">
              <a href="{{url('product/'.$p->getTranslation('slug'))}}" class="hover-zoom-in d-block" title="Shield Conditioner">
                <img src="#" data-src="{{asset($p->image)}}"
                     class="img-fluid lazy-image w-100" alt="Shield Conditioner" width="330" height="440">
              </a>

            </figure>
            <div class="card-body text-center p-0">

              <h4 class="product-title card-title text-primary-hover text-body-emphasis fs-15px fw-500 mb-3"><a
                  class="text-decoration-none text-reset" href="{{url('product/'.$p->getTranslation('slug'))}}">{{$p->getTranslation('name')}}</a>
              </h4>

            </div>
          </div>
        </div>
        @endforeach

      </div>
    </section>

  </main>
@endsection