@extends('frontend.layout.master')
@section('style')
<style>
    .tabset > input[type="radio"] {
      position: absolute;
      left: -200vw;
    }

    .tabset .tab-panel {
      display: none;
    }

    .tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
    .tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
    .tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
    .tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
    .tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
    .tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
      display: block;
    }

    .tabset > label {
      position: relative;
      display: inline-block;
      padding: 15px 15px 25px;
      border: 1px solid transparent;
      border-bottom: 0;
      cursor: pointer;
      font-weight: 600;
      font-size: 30px;
    }

    .tabset > label:hover,
    .tabset > input:focus + label {
      color: var(--primary-color);
    }

    .tabset > input:checked + label {
      border-color: var(--primary-color);
      border-bottom: 1px solid #fff;
      margin-bottom: -1px;
    }

    .tab-panel {
      padding: 30px 0;
      border-top: 1px solid var(--primary-color);
    }
    .product-desc-tabs{
      box-shadow: rgb(14 30 37 / 12%) 0px 2px 4px 0px, rgb(14 30 37 / 32%) 0px 2px 16px 0px;
      padding: 20px;
      border-radius: 5px;
      text-align: center;
    }
    .product-desc-tabs h1{
      font-size: 50px;
    }
    .product-desc-tabs h2{
      font-size: 40px;
    }
    .product-desc-tabs h3{
      font-size: 30px;
    }
    .product-desc-tabs menu, .product-desc-tabs ol, .product-desc-tabs ul {
      list-style: inherit;
      padding-left: 20px;
    }
    @media(max-width: 768px) {
      .tabset > label {
        padding: 8px 8px 10px;
        font-size: 13px;
      }
      .tab-panel {
        padding: 10px 0;
      }
      .product-desc-tabs {
        box-shadow: rgb(14 30 37 / 12%) 0px 0px 0px 0px, rgb(14 30 37 / 32%) 0px 3px 2px 0px;
        padding: 15px;
      }
    }
  </style>
@endsection
@section('content')
<!-- Breadcrumb -->
<div class="breadcrumb bg-bgPrimary py-4">
    <nav class="container text-xs flex justify-between items-center">
        <ol class="flex items-center">
            <li class="px-1 md:px-2"><a href="{{ url('/') }}" class="">Home</a></li>
            
              <li>
                  <i class="bi bi-chevron-right"></i>
              </li>
              <li class="px-1 md:px-2">
                  
                      <a href="{{ url('/product') }}">
                          Products
                      </a>
                  
              </li>
            
              <li>
                  <i class="bi bi-chevron-right"></i>
              </li>
              <li class="px-1 md:px-2">
                  
                    {{ $product->title }}
                  
              </li>
            
        </ol>
        <ol class="flex items-center">
            <li>
              <i class="bi bi-chevron-left"></i>
            </li>
            <li class="px-1 md:px-2"><a href="{{ url('/') }}" class="">Back to Home</a></li>
        </ol>
    </nav>
  </div> 
  <!-- // Breadcrumb -->
  
  <section class="product-details-wrapper container py-5 relative z-[90]">
    <div class="grid md:grid-cols-10 md:gap-7 gap-2">
      <!-- product Gallery/Image -->
      <div class="lg:col-span-5 md:col-span-5 product-details-image mt-3">
        <div class="md:p-5 md:border md:mb-7">
          <!-- Primary carousel image -->
          <div class="show gallery-img-wrap" href="{{ asset($product->image) }}">
            <img src="{{ asset($product->image) }}" id="show-img">
          </div>
          <!-- Secondary carousel image thumbnail gallery -->
          <div class="small-img">
            <img src="{{ asset('images/next-icon.png') }}" class="icon-left" alt="" id="prev-img">
              <div class="small-container">
              <div id="small-img-roll">
                  <img src="{{ asset($product->image) }}" class="show-small-img" alt="{{ $product->title }}">
                  @foreach ($product->images as $img)
                    <img src="{{ asset($img->image) }}" class="show-small-img" alt="{{ $product->title }}">
                  @endforeach
                  
              </div>
              </div>
            <img src="{{ asset('images/next-icon.png') }}" class="icon-right" alt="" id="next-img">
          </div>
        </div>
  
        
      </div>
  
      <!-- product Info -->
      <div class="lg:col-span-5 md:col-span-5 product-details-content mt-3">
        <div class="md:p-5 p-0 md:border">
          <div class="">
            <h2 class="text-xl md:text-2xl font-semibold mb-1 md:mb-3">{{ $product->title }}</h2>
            <hr  class="mb-2 md:mb-3">
              <!-- Social Share -->
              <div class="social-share mb-2">
                <ul class="flex items-center">
                  <li class="mr-2">
                    <a class="bg-secondary hover:text-primary inline-block w-7 h-7 text-center leading-7 rounded-full"  target="_blank" href="https://www.facebook.com/sharer/sharer.php?u={{ url()->full() }}" rel="noopener noreferrer nofollow"><i class="bi bi-facebook text-lg"></i></a>
                  </li>
                  <li class="mr-2">
                    <a class="bg-secondary inline-block w-7 h-7 text-center leading-7 rounded-full"  target="_blank" href="https://twitter.com/intent/tweet?url={{ url()->full() }}" rel="noopener noreferrer nofollow"><i class="bi bi-twitter text-lg"></i></a>
                  </li>
                  <li class="mr-2">
                    <a class="bg-secondary inline-block w-7 h-7 text-center leading-7 rounded-full"  target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{ url()->full() }}" rel="noopener noreferrer nofollow"><i class="bi bi-linkedin text-lg"></i></a>
                  </li>
                  <li class="mr-2">
                    <a class="bg-secondary inline-block w-7 h-7 text-center leading-7 rounded-full"  target="_blank" href="mailto:{{ get_setting('company_email') }}?&subject={{ $product->title }}&body={{ url()->full() }}" rel="noopener noreferrer nofollow"><i class="bi bi-envelope-fill text-lg"></i></a>
                  </li>
                </ul>
              </div>
            </div>
           
            @if(1==get_setting('ecom_status'))
            <hr  class="mb-2 md:mb-3">
            <div class="flex items-center">
              <strong>Price:</strong> 
                  <span class="text-lg md:text-xl ml-2 font-bold">
                    <ins class="text-primary">Tk {{ $product->price }}</ins>
                  </span>       
            </div>
  
            <ul class="text-md mb-4">
              <li><strong class="mr-2">Status: </strong><span class="text-success">Stock In</span></li>
            </ul>
            @endif
            
              <div class="intro-text">
                {{-- <p class="text-lg mb-5"><p><img alt="" src="data:image/png;base64,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" /></p> --}}
                {!! $product->short_description !!}
              </div>
            
            
            <div class="sticy-menu-wrap">
              
              <div class="md:block flex items-center justify-between">
                <!-- Variations -->
                <div class="flex items-center form-group md:py-3 pt-1">
                  <label for="size"> <strong><span class="md:inline hidden"> </span></strong> </label>
                  <div class="custom-checbox flex flex-wrap ml-2">
                  </div>
                </div>
              </div>
  
              <div class="md:block flex items-center md:pt-0 pt-2">
  
                <hr class="mt-3 md:block hidden"><div class="total-amount py-3 md:block hidden"></div>
                <div class="md:mt-0 md:mt-3 flex-1 order-now-wrap">
                    <div class="grid grid-cols-1 flex form-cart-wrap align-items-center mb-1">
                      <!-- order now form -->
                      @if(1==get_setting('ecom_status'))
                        <form action="#" method="get" class="pure-from">
                          <input type="hidden" name="product_variations">
                          <input type="hidden" name="product_color2">
                          <input type="hidden" name="product_size2">
                          <input type="hidden" name="product_qty2">
                          <button type="submit" class="btn btn-success w-full submit-btn border-0" style="background-color:green ;">Buy Now</button>
                        </form>
                      @endif
                    </div>
                  </div>
              </div>
            </div>
            @if(1==get_setting('ecom_status'))
              <a href="tel: {{ get_setting('company_mobile') }}" class="btn btn-success btn-block mt-2 text-xl py-2 !h-auto"><div class="flex items-center">
                <div class="mr-2">
                  <svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" fill="currentColor" class="bi bi-telephone" viewBox="0 0 16 16"><path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"/></svg>
                </div>
                <div>
                  <strong>কল করুন :</strong>  {{ get_setting('company_mobile') }}
                </div>
              </div>
              </a>

          <div class="alert alert-info mb-5 mt-5 text-xs">
            <div class="flex-1 flex items-center">
              <i class="bi bi-boxes text-3xl mr-3"></i>
              <div>
                -> ঢাকা সিটির ভিতরে হোম ডেলিভারি 65Tk <br>
                -> ঢাকা সিটির বাহিরে হোম ডেলিভারি  110Tk <br>
                -> কুরিয়ার অফিস থেকে ডেলিভারি  120Tk <br>
              </div>
            </div>
          </div>
        @endif
           
  
            <!-- Description for mobile only -->
            
          </div>     
        </div>
      </div>
    </div>
  
    
    <!-- product tabs   -->
    <!-- Description -->
    <div class="tabset product-desc-tabs">
    <!-- Tab 1 -->
    <input type="radio" name="tabset" id="tab1" aria-controls="marzen" checked>
    <label for="tab1">Product Details</label>
    <div class="tab-panels text-left">
      <section id="marzen" class="tab-panel !pt-0">
        <div class="text-md md:text-lg p-5 border border-[var(--primary-color)] border-t-0">
            <div class="mt-4">
                <div class="desc mb-5">
                  {{-- <p><img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOoAAACpCAIAAACqOjbbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAFNRJREFUeNrsXU1oHEcWbjlmMVigCSyrm2cs73UlmezFZo0kgiG5RKP4uCaS40NMFvRjQQw6WD+HgA2yLcGCfYgjCeW2Xo324gVh4sFLclr0s9fYknzTsuAZkMHZeKX9ql+rpqa65k+abqtK72MYarp7uvvV++rVq5qubxq2t7c9BsNOHOMqYDB9GQymL4NRC44XfXj5NV5cKYxDjjd/2Oboy+DkgcFg+jIYTF8G05fBsATH9/GdzS1vY0sUEo1eW4v5ACDZXPIMqy+83LbX0apvz732Vp8XtmfXvLYzXuKk4dIE9Qz0XRXh8xuBqxgNwbVwTm27dgOp5iIztXvQbr5ilRqPR11hI10F58eRtdY51XYpZ9HeUhY5SF/4e3ZJVCWq9cltwwEffiXef5o11/KnE15+22tqFOVHN4tIBt/ju2//LspXJ8X7N8UUxHWnMwU3qFfH2SbmixqA8d40z+FyOJvRFlwLlmobyXZZvnPN60/r9y8twt5ES+X6vDThN9QWwwmB6/fFCW9eDs4PG2utc5wBlQNSwl5c5dFoUSOBOTitbCS9F73PLjpN3898C1HXqEojuUFN1MXij173OX3v55Nee4v3zXDAnlINHdwFpUDuMOAAo/9oO64OR1YkLmHxB3GHdDO4XPW2B62rVadauFFVBOoQcRe0Q41RcN1fQClT53Tb1AB+2+v97Ycigt75ImC/bCQVgQgiDaeGoZapkaj3pvaEdAwsRQijL84tib37C/n1z33hj4G0aMTTC+aKnrxWIJyxbwUz4AZilTF+4xJ4zS0d9FbRWSP24HK1nmrOD8wIY6VqgF5VMg+koXrAu7F/p0hRxuTyda4CLK+yoZaBmj7NLhX1AOAugn0h8D8Ql6OXejzivfwiuAt3H4qhG7iFuk42B62QWp6GfKVH3FZeiHcEiVIOgMF4gXwHBALV81lxKlQlwlKVfhUeeqB3wVrOTa8qkd+OvM7Be3Drgz8FkfiAKGX4J+eD/E2rZLzUr2jtUATj7RjpS23F2M3hzrrPixrEC/4LRwtslBZi7+oLc+eLFyhi3IuKCOjbclA30PnhTnARNVhNx41jwAP0DGWuXhN9cdhUJrg07scYX6lbx8vIvIp1Ls+AqtOYtO8GU4rWqJnN4rE1/Ij+Td2oGSLS7sYYc1/0UJfGxSW1/h2kRBhDPJPD5F9fEveqpjUgyvB9sZ0Gucb+F7WAEQ9yMhDln3/WsyI46fhHBaJXH+QM9H0uKheXQ2/Y31NVexC94bYwX3oinC/K2zPu1UAHIC7S5ABlotWjmjqnCIeKQm2jkwHXD9jy1X5PNZDK//mLHnrD9qrNG17Yd4fQoD6uzo/sMKwAP7LDcAFMXwbTl8Fg+jIYTF/GUUHRxNnuieRO0wWuFIYtaGCdBwYnDwwG05fB2Hfu+96/v3tva95JO3dPtv7ScovKv/rXx666823LrZ2T4tfYY6/Xjr+44aqZ//3dYwN9G95sHss/c9LgHbXHcdRGn795WXDZTE4eGExfBoPpy2AwfRlHDccPforca7GwJ7sWLPVubwmePt7cEk9Sp5rFRyqHQXtppYBxF51n8UdxAK2tr2kdTl1AV199Lm4Jl/7kfLBgYW5JmNx7sejZcNpID2WXt8tYb/T1MOplteoUDcZL03XJEO05d9qomS/rKuGv6cJVUFfGepBVUbEaI6QvfCAW6D0PZARoqeDKC7FqYMNfU0k2UDkM1EipRcv0RVrLDuLC1KbG4LBHo+b1tHUHrLs0Xqj6rL/SMDUvbgDG0kp6bZUsbZT0LWVXqXrDFqOnccK60Fd1iga6c+N1yRBQ88ntwloj2ijN1+rK8xdy07L+UovS6TYqVmOE9J3zVQL6ewqrXGBke4vhRkm9gUCk9EJLTcK3KxbGbRf4ShErHu4C5I/ei4XlN9MZ4ZWaVnUb7SpVb/LMtLS4muVG9UWZ9Ve4YVRIKRmAcF3BRupypRUkY4Dz16QlEGX03Q7YWQio5yqHtM8nxRdhQ8VFV9r50fRjE9GgfhD9g7qkrz9t1naIod7eOdABokKuPzAsyDPW1WfRK54clL7kALQ83DrK8EHFyHR1UrTjh8N6K9e6GLmmD9vFAsNzRXlnDCC5p4oOmCvuc8OrcEvZVWu9xQPVHC1FnrwmDEGeI4c3tdbVQaoxKvoiiFKXihcpGt25VjKsou3iMKMSkZbgk5vxjkqcyohuSPREk+K7qMcYSEzL6CteaLaSxInRrlrrLTao5mgpMqoCQQe9P5yoiWwY64okS6pUnZrdl+hMHWYe5KAYPQgSU9wHgopRbAstDG0XlhsVdErledQHUdY7u5dOldLgqSPAJBCrYhjQkkV4VxsAlbKr+no7JLkv1QlqHvcJM1VSGusKCRKNyfZx3XA1GnHQeV9VUoX0wnATxqkfEqdBKK0pbZfnp6yXvruxFYcjey/ujR1f63NPdZnTqLLeDhtwt+glQE1VkKpUXR32eV8EVEoGkLolGgOtwlSzeX4NNiMOlZIxJbEjbRcSZRAXKW+qOWjNlJPFAFjU3yOc9Psvg9E0rJjbk52svpc32lVlvUU3IajekqqdqikbGWVVMXhVRcqMdUWzNIedvuAW3PP5ZNH4NKydA8NorK3qtxHkhJpMDNRdqIi5JT0hkyJ/UQNDbBgIN6gGwk81DbOMdlVZb9GNSmniUh3ABIOT+4axTRhwAc1Sl68rMSo9H6Eh9VHZWd2zhMSIZBOX0/KaqrNWQaX2qjrVpKYKH+9vcLPTdEE+JHriH421xiqKjri0qt5Mws6aprSqvF3RLmO9yZiN79YqFg0babXisfwz42PNYRFvGWI1nWp1l1E9m05l3BiuqzAltBorU41hSJWdoyISdRD6WoSK9HUDLBLFcAFMXwbTl8Fg+jIYTF8G05fBYPoyGNGh6Fe3naYLb0+NOGnn7omkLLtqo2omCg6bKcESfQxOHhiMd548NPz8suHNpqOGNpH4F/DsmbPqSa2trU1NTSjk8/m1tTVXzbxw4YIheTgizzw0Njr7zMPjx4/JtWiiH3/s7DMPkrScPDA492UwmL4MBtOXwfRlMJi+Eh9+5V2aKLl3Yt7X/HrBHmHUgOOxXYmWtk5nDCJLYC3p0OT4F0DGYU4ejFIA4eXHVuOuD23j2NjYq1evdnd38Y69iUTCUutSqdTCwsKuj/X19b6+Ptre3t7+fQjuRF8C4uvw/SKNnLmlqvRUbAHcOTg4+PTpU427AwMD4+PjKysrcD/oi/eenh5LGyfaHm4+l8vBqG+//XZjYwP24h0GysNGR0dho2v0bTsjRA8+uxisgUYkRjxONIoV1eEF3Nahs7MT7tS4Cy/Cl0NDQ/fu3aMt8DQiE8IV2GydjVeuXAFxqQxLEYNhNQrYKA2HydiII11LHkhb8/qD4OP0QiCiHZtuZHQAHdGrwmfZbFbjNN4ld8nrIG46nbbRTMndMkBzxWEzMzOu0RdBt79HBFqM4TZ9pW/E4/609dxFf4q4m8lkwj5DKNLiMZGgo6PDdqthcpimsBcZ1NTUlINDN89XXEz4Mv+kJhTWOrYRiLvUsZYit3ujfnAXNEVShFxIy/7BabW3cYq+yBNAWdLb670Y9/+sRDSaoQyBhtu9vb00DKdRObyLjxqDEaK0HMO6ESqA5qqFXpiJ8RxCbzU5hpX09bxg6IYYHJvYXqRYXV3FoHtxcTHrA3yF86iAvcgo8FFOMFE2DPpiu73cRegNcxcYHBzUEn2nZh4kHg6LaQcHRmyA5sWxsTH5TmkuyI0InUwmQXFwF/EJDrZx2kFyl2YAyUa0UqqBmENvrPTVFMaTzV5S+UhZRKrZBTbDnbTkQQJkpVlSBCfshYMlua1DW1sbjUTl0FMai5YJWscWej1ebeEYeLUFg2ENmL4Mpi+DwfRlMJi+DKYvg3HowRpnDI6+DAbTl8GoCUU/Gh/LP8PLSTt3TyT/95s/Uvnrr7921Z2XL18+deoUCi9fvpyfn3fVzJGREUPuyz8a2w7+0ZjB4NyXwWD6MhhMXwbTl8E44vTNrnnHPxJqfAzGwXGcqyAKtLe353I5dQV5KpVKp9OJRALbM5mMtrjcIpQ3pK+vj7Shnvrg5ME+dHZ2Li8vq0uL4W9sGRgY6OjoGB0dRRn8ttG08oZ866PDx/fffx/WKWT6WhB3FxYWtKW2JF93+vTprq4uvGMvfG+jdWUMgeFosV17GBoaokXznDxYAykVpYkrrvigMiUVlurulDGECjKXiCc74uhbT1DcLa+sCDeD3PbmvqUMId1B1EDaB6JyDLkvR9+6AXEX7jx79mx5lyMpxDv6Vtu5GzYE9EX+AOISsx0USHUVpPk1NTWFFBBDN/gvmUxSQQvP8CtSw9h0aKLrZzRDEHEp90UDRloMWlN7ZvraEXo9X6uPVPpoHEMF9Rh8hIMtlYcqbwi2kMw6fSStnajp+26SB1L2VZFqFrp99qKhoUH9COJms1lVCQouR3xyg7tGQ8BdkFVKxtO8YdSdzLuh70aIvh2tdtO3PAYHB8mdy8vLpRhvuyEzMzMdHR3YjgCMlAk8pv/ycIq+bWe8J7dNQwG3niBH5qcGnkwmY3vQrcYQjNWQ/dOfHqAcg8lx0zdx0gU96ooId6wOzJRVY4g6MRwDeOjGsBhMXwbTl8Fg+jIYTF/GUUHRzMNO04W3p0actHP3ROGfNKTIhXtIJpOy4LCZEizRx+DkgcF458lDw88vG95sOmpo087J4PeSZ8+euerO1tZW+puqfD6/trbmqpkkhOWxxpljYI0zBoNzXwaD6ctgMH0ZTF8G40jR9/oDIWeGdxW512IjXqsvCsdQmcE4RPS9eVnwcnrBW/yxsPHqpBDqazvjtbWIj6vPxccc//bHOGz0TZz0vhkOKLu5JQrTGW/xB8HdO184W6ft7e3aGmMVtALZUtMSicTdu3dfvXq1u7uLd03FLJ1Or6+vy10xKAlFvlio+5zX3yMC8OeT3p1rYoVmotH7601nuUs6UeCu0XnYHo9fIwLaHjg6NDS0sbHR2dk5Ojqaz+dpQTU+LiwszMzMzM7OUiV4/po/u+lLKQTSA7yQ4yJJeDjsJZudpW9Yn09lNuLuysoKPG2pdffu3QNBycCnT5+SmGQQp7q7YZpU1iEGT01NRbrIL46ZB6QQD/0UAtztPu/ygng4DG7r6ekpxd1MJjM+Pm61jWUap7qLyo6o7CDfJSAGUxLsHqhjRfgxOpjSRNulzTR70Y0gvgYuXlzERxJFRY5EwqlR9zNx0Hf1RZDyIvQiAH864SB34SeE3lLiBsgOwWxEZdulzVTuwl4kEuhPaAt1LGAthm4kVuJFL5MaOX1zr71Lfm955wvv0U0x57D6XJfYsR3oIinlHRgYII0zb0/vjMbjcCr2wt9Sczwe8fHoplZw8+CupiGJVvr++++fPn26oaGBcqSo6Rv50O3qpJCEkikvkmAM4EDfjtYivZLwzxYgOpJmWyD7UBmMEYY3NzcpC1Tz3WQyCfdns1lLhUtoWhCxNqx/Sukv2YVGi3LUEr/RPu87tyTmy5A2/DRb4OJ0xrt+v7ARbM6anqt+crueejwxP++LDrSrq8voPDAb7o9I4Czq532Ju1pzpYkzcHd9fR0hGUkw5b44RhUprCMkaaONvsgcbl4WoVeNo/3pYBYCrO0+5/VeNNM0ZfPkGohbKs2NISZFGnopuZfzZapdiMdgLUZvCMDRcTe+6Ht4wKstXAKvtmC4AKYvg+nLYDB9GQymL4Ppy2AcerDGGYOjL4PB9GUwakLRj8bv/fu797bmnbRz92TrLy23qOzwz1G3bt1qbRU/wa+trd24ccNVMx8/fmygb8ObzWN5N9UXd5SywwqT+XxeFhw2k5MHBtOXwWD6MhhMX8aRQ90eV8+9FovYvNAiH3V7flssHPI8/fn0za2i7fQx1eyyHATjcEVfUHZuSaz8uVQsYzAxLzZOZ8QBTY2BIJ+2VPPTiSKVvln/PHhnMGKKvsDktUBNB2SlFUGLPwp5KMRRUjojvZIPvhT07T4fSPSB0AjP+EhfcQO0VFNbL5RKpfr6+jz/b9fl+nKLkEgkwsJt2sInGEjSJDAwhr+Wr2fuC3Y+GvUZeV+EUqQNVyfFR2yU6QQoe+eaKCBI4wDBdYXfbmBsbCws0Qe/rq+vd3d3d3R0LPiwzi7wclQBTFC1BkHu5eXlu3fvwkCYiXIMa93qvFQT7Lx5WQRXscD4pFiPiY8UZSUQZRd/EMQdvh8Ip4K7Fq2JLw/QdGBgIOx4EjGZmZnx/AWPpfQnDzMQTbu6uqSZ6GHUtfIgNMw8e/YsLZQnHZOnPmyaeQBfMQIj1V4U8DEMEY8bRXZL/K7jgvh3C9LvCCtBwZdwKnGXeCDLljZRUHN8fFy1YnBwkJQn6SN2gbi9vb3WJA8SSGS1QjjNkJQtdYyNqSE606mpqTA10Z/Cr6TsC5AQmKVIp9Pgrpa+k5aZFmiz2ax9GmebW4WJBUqCw0DOIEX7KAl2g7vwX6mEj9Rwsz5QsFqhmmgazm7DukH2KUx+OhGkBOoQTeM3Deme3Bahd2Pvo9VAzgBXzc7OdvqgREKNPblcDnnhmI+enh7ssjH9pawAGTBsQapAMpJq7qQdbJnGGc2CyZRXDtHUiQXJbxzWdkYcgMPmlizW/QUXaUZMnU8gBT4Sg0LEBbnlPBrNKNmrsa5aQbo7pCpE04WFHLK7O2o9oXpGX5oFw5js4bA+RJvb+w0CeQX4DdYSv8Vc28093henGfQjiPqaO6w/ZMBJDcXARoQoKWSGNFFO+tIgHc6OYVq07mkDug7Z6jAsU61A0g+7ZABGfo+yplx4eKOvEEL1hXvvfFH4sZf+mgX5A9gJyiLoktDvQyUYIwbLP79AOiFn0Db2fklWj7Q3UF25cgUjnoGBgYQP9LzWaf2iBYKy4Ciaa8qHOnEGZmOEioQYxsJA2ht1E2WNs6jSCeOvbnKEHlFSGIPGWTqdRliFaehSwlZgF0mjGvfWCzEpTB5ZGHM+derXXmR8lOln4kyK+IFJhsVg+jKYvgwG05fBYPoyjgqKZh52mi68PTXipJ27J5KyPDIy4qo7k8mkLDhspgRL9DE4eWAw3gX+L8AAUKjJ8Qt9vQAAAAAASUVORK5CYII=" /></p> --}}
                  {!! $product->long_description !!}
                </div>
            </div>
        </div>  
      </section>
  
      
    </div>
    </div>
    
  </section>
  <!-- Related Product   -->
  <div class="container md:mt-20 mt-10 md:mb-20 mb-16">
      <div class="text-center mb-4 md:mb-7">
        <h4 class="uppercase text-lg md:text-3xl md:tracking-widest font-bold">Related Products</h4>
      </div>
      <div class="splide similar-products">
        <div class="splide__track">
          <div class="splide__list">
          
              @forelse ($raleted_products as $item)
              <div class="splide__slide">
                <div class="product-grid h-full flex flex-col justify-between border border-opacity-1 border-gray-200 hover:border-primary ">
                  <div class="content-wrap relative h-full flex flex-col justify-between">
                      <div class="relative">
                        <div class="img-wrap relative">
                          <img src="{{ asset($item->image) }}" class="primary-img min-h-[100px]" loading="lazy" alt="{{ $item->title }}">
                        </div>
                      </div>
                      <div class="p-3">
                        <a href="{{ route('product',$item->slug) }}" class="uppercase stretched-link"></a>
                        <h4 class="product__title md:text-lg text-md font-normal md:mb-2 mb-1">{{ $item->title }}</h4>
                        @if(1==get_setting('ecom_status'))
                          <p class="md:text-lg text-md">
                              <ins class="mr-1">Tk {{ $item->price }}</ins>
                          </p>
                        @endif
                      </div>
                  </div>
                  <!-- add to cart & buy now buttons -->
                  @if(1==get_setting('ecom_status'))
                  <div class="form-cart-wrap grid sm:grid-cols-1 grid-cols-1 sm:gap-2 gap-1 px-2 mb-3">
                        <a href="{{ route('product',$item->slug) }}" class="btn border-0 btn-success btn-sm " style="background-color: ;">Buy Now</a>
                  </div>
                  @endif
                </div>
              </div>
              @empty
                <div class="text-center">
                    <h1>No Product Found!!</h1>
              </div>
              @endforelse
             
        
        </div>
      </div>
    </div>
  </div>

  <!-- #End Main Body  -->

@endsection
@section('script')
<script src="{{ asset('js/zoom-image.js') }}"></script>
<script>
    //Initialize product gallery
    $('.show').zoomImage();
  
    $('.show-small-img:first-of-type').css({'border': 'solid 1px #951b25', 'padding': '2px'})
    $('.show-small-img:first-of-type').attr('alt', 'now').siblings().removeAttr('alt')
    $('.show-small-img').click(function () {
      $('#show-img').attr('src', $(this).attr('src'))
      $('#big-img').attr('src', $(this).attr('src'))
      $(this).attr('alt', 'now').siblings().removeAttr('alt')
      $(this).css({'border': 'solid 1px #951b25', 'padding': '2px'}).siblings().css({'border': 'none', 'padding': '0'})
      if ($('#small-img-roll').children().length > 4) {
        if ($(this).index() >= 3 && $(this).index() < $('#small-img-roll').children().length - 1){
          $('#small-img-roll').css('left', -($(this).index() - 2) * 76 + 'px')
        } else if ($(this).index() == $('#small-img-roll').children().length - 1) {
          $('#small-img-roll').css('left', -($('#small-img-roll').children().length - 4) * 76 + 'px')
        } else {
          $('#small-img-roll').css('left', '0')
        }
      }
    })
  
    //Enable the next button
    $('#next-img').click(function (){
      $('#show-img').attr('src', $(".show-small-img[alt='now']").next().attr('src'))
      $('#big-img').attr('src', $(".show-small-img[alt='now']").next().attr('src'))
      $(".show-small-img[alt='now']").next().css({'border': 'solid 1px #951b25', 'padding': '2px'}).siblings().css({'border': 'none', 'padding': '0'})
      $(".show-small-img[alt='now']").next().attr('alt', 'now').siblings().removeAttr('alt')
      if ($('#small-img-roll').children().length > 4) {
        if ($(".show-small-img[alt='now']").index() >= 3 && $(".show-small-img[alt='now']").index() < $('#small-img-roll').children().length - 1){
          $('#small-img-roll').css('left', -($(".show-small-img[alt='now']").index() - 2) * 76 + 'px')
        } else if ($(".show-small-img[alt='now']").index() == $('#small-img-roll').children().length - 1) {
          $('#small-img-roll').css('left', -($('#small-img-roll').children().length - 4) * 76 + 'px')
        } else {
          $('#small-img-roll').css('left', '0')
        }
      }
    })
  
    //Enable the previous button
    $('#prev-img').click(function (){
      $('#show-img').attr('src', $(".show-small-img[alt='now']").prev().attr('src'))
      $('#big-img').attr('src', $(".show-small-img[alt='now']").prev().attr('src'))
      $(".show-small-img[alt='now']").prev().css({'border': 'solid 1px #951b25', 'padding': '2px'}).siblings().css({'border': 'none', 'padding': '0'})
      $(".show-small-img[alt='now']").prev().attr('alt', 'now').siblings().removeAttr('alt')
      if ($('#small-img-roll').children().length > 4) {
        if ($(".show-small-img[alt='now']").index() >= 3 && $(".show-small-img[alt='now']").index() < $('#small-img-roll').children().length - 1){
          $('#small-img-roll').css('left', -($(".show-small-img[alt='now']").index() - 2) * 76 + 'px')
        } else if ($(".show-small-img[alt='now']").index() == $('#small-img-roll').children().length - 1) {
          $('#small-img-roll').css('left', -($('#small-img-roll').children().length - 4) * 76 + 'px')
        } else {
          $('#small-img-roll').css('left', '0')
        }
      }
    })
  
    //Varation
    $('select.product-variations').on('change', function() {
      let variations = [];
      $('select.product-variations option:selected').each(function() {
        let group = $(this).parent().attr('name');
        let value = $(this).val();
        variations.push({group: group, value: value});
      });
      $('input[name="product_variations"]').val(JSON.stringify(variations));
    });
  
    //product size, colors
    $('input[name="color"]').change(function() {
      const inputValue = $(this).attr('value');
      $('input[name="product_color"]').val(inputValue);
      $('input[name="product_color2"]').val(inputValue);
    });
    $('input[name="size"]').change(function() {
      const inputValue = $(this).attr('value');
      $('input[name="product_size"]').val(inputValue);
      $('input[name="product_size2"]').val(inputValue);
    });
    $('input[name="qty"]').change(function() {
      const inputValue = $(this).val();
      $('input[name="product_qty"]').val(inputValue);
      $('input[name="product_qty2"]').val(inputValue);
    });
  
    //color image change on click
    const colors = $('.product-color-wrap img');
    colors.on('click', function() {
      const imgPath = $(this).attr('src');
      $('.gallery-img-wrap').attr('href', imgPath);
      $('.gallery-img-wrap img').attr('src', imgPath);
    })
  
    //quantiy increse dicrase
    $('.increase-qty').on('click', function() {
      let qty = $('input[name="qty"]');
      let inputValue = qty.val();
      inputValue =  Number(inputValue) + 1;
      qty.val(inputValue);
      $('input[name="product_qty"]').val(inputValue);
      $('input[name="product_qty2"]').val(inputValue);
    });
    $('.decrease-qty').on('click', function() {
      let qty = $('input[name="qty"]');
      let inputValue = qty.val();
      if(inputValue > 1) {
        inputValue =  Number(inputValue) - 1;
        qty.val(inputValue);
        $('input[name="product_qty"]').val(inputValue);
        $('input[name="product_qty2"]').val(inputValue);
      }
    });
    const qtyWrap = $('.quantity-wrap');
    qtyWrap.on('click', function(e) {
      if(e.target.classList.contains('qty-button')) {
        const productPrice = Number('1490')
        const count = Number($('#qty').val());
        $('.total-amount').html(`Total: ${productPrice*count}Tk`);
      }
    });
  
    if($('.similar-products').length>0){
      new Splide( '.similar-products' , {
        type   : 'loop',
        perPage: 4,
        perMove: 1,
        speed: 400,
        gap    : '1.75rem',
        autoplay: true,
        interval: 2000,
        pagination: false,
        pauseOnHover: true,
        rewind: true,
        lazyLoad: 'nearby',
        breakpoints: {
        '1024': {
          perPage: 3,
          gap    : '1.75rem',
        },
        '768': {
          perPage: 2,
          gap    : '0.75rem',
        },
      }
      }).mount();
    }
  
    // validation add to cart
    const submitBtn = $('.submit-btn');
    const productVariations = $('select.product-variations');
    const colorDom = $('input[name="color"]');
    const sizeDom = $('input[name="size"]');
    const orderCartArea = $('.order-now-wrap');
    const colorSizeArea = $('.color-size-warning');
  
    submitBtn.on('click', function() {
      if(productVariations.length>0){
        let allSelected = true;
        productVariations.each(function() {
          if(!$(this).find(':selected').val()) {
            allSelected = false;
            return false; // break out of loop
          }
        });
        if(!allSelected) {
          alert('Choose Variations!');
          return false;
        }
      } else if(sizeDom.length>0 && colorDom.length>0){
        if(!$(sizeDom).is(':checked') || !$(colorDom).is(':checked')) {
          alert('Choose Color & Size!');
          return false;
        }
      } else if(sizeDom.length>0){
        if(!$(sizeDom).is(':checked')) {
          alert('Choose Size!');
          return false;
        }
      } else if(colorDom.length>0){
        if(!$(colorDom).is(':checked')) {
          alert('Choose Color!');
          return false;
        }
      }
    })
  
    // mobile device zoming
    $('.product-details-image .show.gallery-img-wrap').on('click', function() {
      if(!$('body.mobile-gallery-active').length > 0) {
        $(this).before(`<button class="btn btn-primary remove-mobile-gallery" onclick="removeBodyActive()">Back</button>`)
        $('body').addClass('mobile-gallery-active')
      }
    });
    function removeBodyActive (){
      $('body').removeClass('mobile-gallery-active');
      $('.remove-mobile-gallery').remove();
    };
  
  </script>
  @endsection