@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)
                                {{-- @if ($available_qty !== null) --}}
                                @if ($available_qty > 0 || $available_qty === null)
                                    <div class="py-3">
                                        <button class="btn btn-black" type="submit" id="btn-add-to-cart">Add
                                            to Cart</button>
                                    </div>
                                @endif
                                {{-- @endif --}}
                            @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