@extends('merchbay_main')
@section('main-content')
@if ($store_array[0]->IsHibernated)
    <script>
        window.location = "../";
    </script>
@endif

<style>
.carousel-item img {
  /* width: 100%; */
  /* height: 100%; */
  object-fit: contain !important;
  width: 100% !important;
  max-height: 100% !important;
  padding: 5px !important;
}
.carousel-indicators {
  display: inline-block !important;
  height: 400px !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  position: static !important;
  direction: rtl !important;
}

.carousel-inner,
.carousel-item {
  height: 100%;
}

@media screen and (max-width: 992px) {
  .carousel-indicators {
    display: inline-flex !important;
    direction: inherit !important;
    height: auto !important;
    width: 100% !important;
    max-width: 800px !important;
    overflow-x: auto !important;
    position: relative !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-y: hidden !important;
    justify-content: normal !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
  .carousel-inner {
    margin-left: 0 !important;
  }
}
/* width */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
.item {
  margin-bottom: 10px !important;
  margin-left: 10px !important;
  cursor: pointer !important;
  height: 100px !important;
  width: 100px !important;
  border: solid 1px #e2e2e2 !important;
  text-align: center !important;
}
.item.active img {
  /* border:1px solid #000000; */
  opacity: 1;
  padding: 5px;
}

.item.active {
  border: 1px solid #000000 !important;
}

.item img {
  border: 1px solid transparent !important;
  opacity: 0.5;
  transition: 0.5s !important;
  height: inherit !important;
  padding: 5px !important;
  display: block !important;
  margin: auto;

}

.item:hover {
  border: 1px solid #000000 !important;
  opacity: 1 !important;
}
.content {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* Black background with transparency */
  color: #f1f1f1;
  width: 100%;
  padding: 10px;
}
.content p {
  font-size: 15px;
}

@media screen and (max-width: 992px) {
  .content {
    position: static;
  }
}
@media screen and (min-width: 1440px) {
  /* .carousel-inner{
    margin-left: -60px;
  } */
}
@media screen and (min-width: 1200px) and (max-width: 1439px) {
  .carousel-inner {
    margin-left: -20px;
  }
}
@media screen and (min-width: 880px) and (max-width: 1199px) {
  .carousel-inner {
    margin-left: 20px;
  }
  .content {
    position: static;
  }
}
@media screen and (min-width: 576px) and (max-width: 879px) {
  .carousel-inner {
    margin-left: 50px;
  }
  .content {
    position: static;
  }
}
</style>

<style>

    .custom-chevron-left,
    .custom-chevron-right {
        color: grey;
    }
    /* end single carousel*/

    .hide-bullets {
        list-style:none;
        margin-left: -40px;
        margin-top:20px;
    }
    .spacer-top{
        margin-top: 40px;
    }
    .roster-input{
        border-radius: 0px;
        border-right: none;
        border-top: none;
    }
    .table-bordered>thead>tr>td, .table-bordered>thead>tr>th{
        border-bottom-width: 0px;
    }
    .btn-roster-action{
        /* width: 20px;
        height: 20px;
        border-radius: 10px; */
    }

    .btn-group-sm>.btn{
        padding: 0px 0px;
    }
    .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
        vertical-align: unset;
    }

    .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
        border: none;
    }
    
    .table>thead>tr>th{
        border-bottom:none;
    }
    .carousel-control.right{
        margin-right :0px;
    }
    .carousel-control.left {
        margin-left: 0px;
    }
    /* .edge-text { position:absolute; top:3px; right:28px; color:#555; font:bold 13px/1 sans-serif;} */

    /* these styles are for the demo, but are not required for the plugin */
    .zoom {
        display:inline-block;
        position: relative;
    }
    
    /* magnifying glass icon */
    .zoom:after {
        content:'';
        display:block; 
        width:33px; 
        height:33px; 
        position:absolute; 
        top:0;
        right:0;
        /* background:url("{{asset('public/images/icon.png') }}"); */
    }


    tbody#orderTableBody>tr>td {
        padding: 0px !important;
    }
    .panel-design-details{
        max-height: 300px;
        overflow: auto;
    }

</style>


<div class="wrapper bg-white pb-5">
    <div class="main__banner">
      <div class="row">
        <div class="col-lg-12 text-center">
          <div class="store-banner border-top">
            <img
              src="{{ config('site_config.uploads') . 'teamstore/' . $store_array[0]->ImageFolder . '/' . $store_array[0]->StoreBanner }}"
              id="storeBanner"
              class="shadow-sm img-fluid w-100"
              alt="..."
            />
          </div>
        </div>
      </div>
    </div>
    <div class="main__content">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <div class="py-4">
              <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                  <li class="breadcrumb-item">
                    <a href="{{ url('store') }}/{{ $store_array[0]->StoreUrl }}"
                      >{{$store_array[0]->StoreName}}</a
                    >
                  </li>
                  <li class="breadcrumb-item active" aria-current="page">
                    {{ $product_array[0]->ProductName }}
                  </li>
                </ol>
              </nav>
            </div>
          </div>
        </div>

        <div class="row pb-5">
            <div class="col-lg-6">
                <div
                  id="demo"
                  class="carousel slide vert"
                  data-bs-interval="false"
                  data-bs-ride="carousel"
                >
                  <div class="row no-gutters">
                    <div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3">
                      <div class="carousel-indicators">
                        @define $i = 0
                        @foreach($thumbnails_array as $thumbnail)
                            @if($thumbnail->ImageClass == 'active')
                                <div
                                    data-bs-target="#demo"
                                    data-bs-slide-to="{{ $i }}"
                                    class="item active"
                                >
                                    <img
                                    src="{{ config('site_config.images_url')  }}/{{ $thumbnail->Image }}"
                                    />
                                </div>
                            @else
                                <div
                                    data-bs-target="#demo"
                                    data-bs-slide-to="{{ $i }}"
                                    class="item"
                                >
                                    <img
                                    src="{{ config('site_config.images_url')  }}/{{ $thumbnail->Image }}"
                                    />
                                </div>
                            @endif
                            @define $i++
                        @endforeach
                      </div>
                    </div>
                    <!-- col-sm-4 Indicators -->

                    <div class="col-12 col-sm-12 col-md-12 col-lg-9 col-xl-9 order-first order-lg-last">
                      <div
                        class="border text-center p-1 product-active-thumbnail"
                      >
                        <div class="carousel-inner align-self-center">
                            @define $j = 0
                            @foreach($thumbnails_array as $thumbnail)
                                @if ($j == 0)
                                  <div class="carousel-item active">
                                    <img
                                      src="{{ config('site_config.images_url')  }}/{{ $thumbnail->Image }}"
                                      class="img-fluid"
                                    />
                                  </div>
                                @else
                                 <div class="carousel-item">
                                    <img
                                      src="{{ config('site_config.images_url')  }}/{{ $thumbnail->Image }}"
                                      class="img-fluid"
                                    />
                                  </div>
                                @endif
                                @define $j++
                            @endforeach
                        </div>
                        <!--inner-->
                      </div>
                    </div>
                    <!-- col-sm-6  -->
                  </div>
                  <!--row-->
                </div>
              </div>

          <div class="col-lg-6">
            <div class="product-name-display">
              <h3>{{ $product_array[0]->ProductName }}</h3>
            </div>
            <div class="d-flex product-price-display">
              <div class="currency">{{ $store_array[0]->StoreCurrency }} </div>
              <div class="price-display">{{ $product_array[0]->ProductPrice }}</div>
            </div>
            <form id="frm-order-list">
                <input type="hidden" value="{{ md5($product_array[0]->Id) }}" name="p_id" id="p_id" />
                @include('teamstore-sublayouts.forms.'.$product_array[0]->ProductForm) 

                @if($product_array[0]->ProductPrice > 0)
                    <div class="py-3">
                        <button class="btn btn-black" type="submit" id="btn-add-to-cart"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> Add to Cart</button>
                    </div>
                @endif
            </form>
            <hr>
            <p>{{ $product_array[0]->ProductDescription }}</p>
          </div>
        </div>
        
        <div class="row py-5">
          <div class="col-lg-12">
            <h4>From the same Store</h4>
          </div>
          {{-- <div class="col-md-12">
              <p>...</p>
          </div> --}}
          @foreach ($store_products as $product)
          <div
            class="col-lg-2 col-md-3 col-6"
            v-for="index in 6"
            :key="index"
          >
            <div class="text-center p-3">
              <a href="{{ url('store') . '/' . $product->StoreUrl . '/product/' . $product->ProductURL  }}">
              <div class="store-logo">
                <img src="{{ config('site_config.images_url') . '/' . $product->Image }}" alt="{{ $product->ProductName }}"  class="d-block border shadow-sm">
              </div>
              <div class="store-name text-truncate">{{ $product->ProductName }}</div>
            </a>
            </div>
          </div>
          @endforeach
        </div>
      </div>
    </div>
  </div>

@endsection