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

    body {
        background: #f4f6f8;
    }

    .product-page {
        padding-top: 14px;
        padding-bottom: 28px;
    }

    .product-breadcrumb {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        margin-bottom: 18px;
        padding: 10px 14px;
    }

    .product-breadcrumb .breadcrumb {
        margin: 0;
        background: transparent;
        padding: 0;
    }

    .product-breadcrumb .breadcrumb > li,
    .product-breadcrumb .breadcrumb > li.active,
    .product-breadcrumb .breadcrumb > li + li:before {
        color: #6b7280;
        font-size: 12px;
    }

    .product-breadcrumb .breadcrumb > li > a {
        color: #374151;
        text-decoration: none;
    }

    .product-breadcrumb .breadcrumb > li > a:hover {
        color: #111827;
    }

    p{
        font-size: 12px;
        margin-top: 5px;
    }
    .price{
        font-size: 25px;
        margin: 0 auto;
        color: #333;
    }
    .right{
        float:right;
        border-bottom: 2px solid #4B8E4B;
    }
    .thumbnail{
        /* opacity:0.70; */
        -webkit-transition: all 0.5s; 
        transition: all 0.5s;
    }
    /* .thumbnail:hover{
        opacity:1.00;
        box-shadow: 0px 0px 10px #4bc6ff;
    } */
    .line{
        margin: 14px 0;
        border-color: #e5e7eb;
    }
    @media screen and (max-width: 770px) {
        .right{
            float:left;
            width: 100%;
        }
    }

    .product-thumbnails {
        height: 100px;
        width: 100px;
        position: relative;
        border : 1px solid #999;
        margin: 0 auto;
    }
    .product-thumbnails > img {
        max-height: 100%;
        max-width: 100%;
        height: auto;
        width: auto;

        position: absolute;
        top: 50%;
        left: 50%;

        transform: translate(-50%, -50%);
    }

    /* one by one slider */

    .multi-item-carousel .carousel-inner>.item,
    .multi-item-carousel-clipart .carousel-inner>.item {
        -webkit-transition: 200ms ease-in-out left;
        transition: 200ms ease-in-out left;
    }

    .multi-item-carousel .carousel-inner .active.left {
        left: -25%;
    }

    .multi-item-carousel .carousel-inner .active.right,
    .multi-item-carousel-clipart .carousel-inner .active.right {
        left: 25%;
    }

    .multi-item-carousel .carousel-inner .next,
    .multi-item-carousel-clipart .carousel-inner .next {
        left: 25%;
    }

    .multi-item-carousel .carousel-inner .prev,
    .multi-item-carousel-clipart .carousel-inner .prev {
        left: -25%;
    }

    @media all and (transform-3d),
    (-webkit-transform-3d) {
        .multi-item-carousel .carousel-inner>.item {
            -webkit-transition: 200ms ease-in-out all;
            transition: 200ms ease-in-out all;
            -webkit-backface-visibility: visible;
            backface-visibility: visible;
            -webkit-transform: none!important;
            transform: none!important;
        }
    }

    .multi-item-carousel .carouse-control.left,
    .multi-item-carousel .carouse-control.right {
        background-image: none;
    }

    .carousel-inner>.item>a>img,
    .carousel-inner>.item>img,
    .img-responsive,
    .thumbnail a>img,
    .thumbnail>img {
        margin: auto;
    }

    .carousel-control.left,
    .carousel-control.right {
        background: none;
        border: none;
    }

    #myCarousel {
        position: relative;
        width: 100%;
    }

    .carousel-control {
        width: 34px;
        height: 34px;
        top: 50%;
        margin-top: -17px;
        opacity: 1;
        text-shadow: none;
    }

    .carousel-control.left {
        left: -18px;
        margin-left: 0;
    }

    .carousel-control.right {
        right: -18px;
        margin-right: 0;
    }

    .carousel-control .glyphicon {
        width: 34px;
        height: 34px;
        line-height: 34px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid #d1d5db;
        color: #374151;
        font-size: 14px;
    }

    .carousel-control:hover .glyphicon {
        background: #ffffff;
        border-color: #9ca3af;
        color: #111827;
    }

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

    .hide-bullets {
        list-style:none;
        margin-left: 0;
        margin-top: 0;
        margin-bottom: 0;
        padding-left: 0;
    }
    .hide-bullets > li {
        margin-bottom: 12px;
    }

    .main-gallery-card,
    .product-info-card,
    .description-card {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    }

    .main-gallery-card {
        padding: 16px;
    }

    .main-image-stage {
        border: 1px solid #eef0f3;
        border-radius: 10px;
        background: #fcfcfd;
        min-height: 430px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .main-product-image {
        max-height: 400px;
        width: auto;
        max-width: 100%;
    }

    .thumbnail {
        border-radius: 10px;
        border: 1px solid #d1d5db;
        background: #fff;
        margin-bottom: 0;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .thumbnail:hover {
        border-color: #9ca3af;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
    }

    .a_thumbnail.active {
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

    .image-thumbnails {
        border-radius: 8px;
        object-fit: contain;
    }

    .product-info-card {
        padding: 22px;
    }

    .product-title {
        margin: 0;
        font-size: 28px;
        line-height: 1.2;
        font-weight: 700;
        color: #111827;
    }

    .price {
        font-size: 30px;
        margin: 8px 0 18px;
        color: #0f172a;
        font-weight: 700;
    }

    .price small {
        font-size: 14px;
        color: #6b7280;
        font-weight: 500;
    }

    #frm-order-list {
        padding-top: 2px;
    }

    #btn-add-to-cart {
        min-height: 44px;
        padding: 10px 18px;
        border-radius: 9px;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 0.2px;
        margin-top: 10px;
    }

    .description-card {
        margin-top: 18px;
        padding: 18px 22px;
    }

    .description-title {
        margin: 0 0 10px;
        font-size: 16px;
        font-weight: 600;
        color: #111827;
    }

    .description-text {
        margin: 0;
        font-size: 14px;
        line-height: 1.65;
        color: #4b5563;
    }

    .spacer-top{
        margin-top: 24px;
    }
    .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;
    }

    @media screen and (max-width: 991px) {
        .product-info-card {
            margin-top: 16px;
        }

        .main-image-stage {
            min-height: 350px;
        }

        #btn-add-to-cart {
            width: 100%;
            float: none !important;
        }
    }

    @media screen and (max-width: 768px) {
        .main-image-stage {
            min-height: 300px;
        }

        .carousel-control.left {
            left: -10px;
        }

        .carousel-control.right {
            right: -10px;
        }

        .product-title {
            font-size: 23px;
        }

        .price {
            font-size: 26px;
        }
    }

</style>

<div class="container product-page">
    <div class="row">
        <div class="col-md-12">
            <nav aria-label="breadcrumb" class="product-breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url('teamstore') }}/{{ $store_array[0]->StoreUrl }}">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ $product_array[0]->ProductName }}</li>
                </ol>
            </nav>
        </div>
    </div>
    <div class="row">

        <div class="col-md-5 col-sm-5">
            <div class="main-gallery-card">
                <div id="carousel-bounding-box">
                    <div class="main-image-stage">
                        <div class="carousel slide" id="myCarousel" data-interval="false">
                            <div class="carousel-inner">
                                @define $i = 0
                                @foreach($thumbnails_array as $thumbnail)
                                    @if($thumbnail->ImageClass == 'active')
                                        <div class="active item text-center" data-slide-number="{{ $i }}">
                                            <span class="zoom img-zoom">
                                                <img class="main-product-image" src="{{ minio_url('images/' . $thumbnail->Image) }}">
                                            </span>
                                        </div>
                                    @else
                                        <div class="item text-center" data-slide-number="{{ $i }}">
                                            <span class="zoom img-zoom">
                                                <img class="main-product-image" src="{{ minio_url('images/' . $thumbnail->Image) }}">
                                            </span>
                                        </div>
                                    @endif
                                    @define $i++
                                @endforeach
                            </div>

                            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left"></span>
                            </a>
                            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right"></span>
                            </a>
                        </div>
                    </div>
                </div>

                <hr class="line">

                <ul class="hide-bullets row">
                    @define $j = 0
                    @foreach($thumbnails_array as $thumbnail)
                        <li class="col-sm-3 col-xs-3">
                            <a class="thumbnail a_thumbnail {{ $thumbnail->ImageClass }}" id="carousel-selector-{{ $j }}">
                                <img class="img img-responsive product-center image-thumbnails" style="height: 59.45px;" src="{{ minio_url('images/' . $thumbnail->Image) }}"/>
                            </a>
                        </li>
                        @define $j++
                    @endforeach
                </ul>
            </div>

        </div>

        <div class="col-md-7 col-sm-7">
            <div class="product-info-card">
                <h1 class="product-title">{{ $product_array[0]->ProductName }}</h1>
                <p class="price">{{ $product_array[0]->ProductPrice }} <small> {{ $store_array[0]->StoreCurrency }} </small></p>

                    <div class="row">
                        <div class="col-md-12">
                            <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)
                                    <button class="btn btn-primary pull-right" type="submit" id="btn-add-to-cart"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> Add to Cart</button>
                                @endif
                            </form>

                           
                        </div>
                    </div>

                <div class="description-card">
                    <h3 class="description-title">Description</h3>
                    <p class="description-text">{{ $product_array[0]->ProductDescription }}</p>
                </div>

                <div class="spacer-top"></div>
                <div class="row">
                    <div class="col-md-12">
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active"><a href="#productDescription" aria-controls="productDescription" role="tab" data-toggle="tab">More Details</a></li>
                        </ul>
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="productDescription">
                                <div class="row">
                                    <div class="col-md-12">
                                        <p>{{ $product_array[0]->ProductDescription }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>    
                    </div>    
                </div>
            </div>
        </div>

    </div> <!-- container -->
</div>
@endsection