@extends('layouts.front.front')

@section('maincontent')
    <section class="global-space-section">
        <div class="container">
            @if (empty($product))
                <div class="row">
                    <div class="col-md-12">
                        <div class="alert alert-danger">
                            Product is removed or does not exist! <a href="javascript:history.back()"
                                class="btn btn-sm btn-danger">Back</a>
                        </div>
                    </div>
                </div>
            @else
                <div class="detai-product-index">
                    {{-- <div class="static-detail-slide">
                        <img src="{{ asset('front-shop/images/detail-slide-top.jpg') }}" alt="detail-slide-top"
                            class="center-block img-responsive">
                    </div> --}}
                    <div class="detail-product-section">
                        <div class="row">
                            <div class="col-md-5 col-sm-5">
                                <div class="product-image-panel" style="cursor: pointer;" onclick="toggleGallery();">
                                    <img src="{{ $mainImage }}"
                                        alt="detail-product-index" id="mainPhoto" class="img-responsive">
                                </div>
                                @php
                                    $selectedCol = '';
                                @endphp
                                @if (sizeof($images) > 0)
                                    <div class="product-thumbs">
                                        @foreach ($images as $colorName => $thumbs)
                                            <div class="clearfix imgThumb color_{{ str_slug($colorName) }}"></div>
                                            @foreach ($thumbs as $thumb)
                                                <img src="{{ $thumb }}"
                                                    class="imgThumb color_{{ str_slug($colorName) }} img-responsive"
                                                    onmouseover="document.getElementById('mainPhoto').src=this.src;"  onclick="toggleGallery();"/>
                                            @endforeach
                                            <div class="clearfix imgThumb color_{{ str_slug($colorName) }}"></div>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                            <div class="col-md-7 col-sm-7">
                                <div class="detail-product-section-right-flex">
                                    <div class="breadcums-filter">
                                        <ul>
                                            @foreach ($productBreadcrubs as $productBreadcrub)
                                                <li><a
                                                        href="{{ $productBreadcrub['link'] }}">{{ ucwords(strtolower($productBreadcrub['name'])) }}</a>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                    <div class="detail-product-heading-flex">
                                        <h2>{{ $productName }}</h2>
                                        <a href="#"><img src="{{ asset('front-shop/images/wishlist_v2.svg') }}"
                                                align="wishlist_v2"></a>
                                    </div>
                                    <h5 class="coldark">{{ $productShortDesc }}</h5>
                                    <div class="pricing-earn-points-panel">
                                        <h4 class="product-price">
                                            @if ($productMaxPrice - $productMinPrice == 0)
                                                {{ $homepageModel->formatCurrency($productMaxPrice) }}
                                            @else
                                                {{ $homepageModel->formatCurrency($productMinPrice) }} -
                                                {{ $homepageModel->formatCurrency($productMaxPrice) }}
                                            @endif
                                        </h4>
                                        <div class="reanpoints-panel">
                                            <a href="#">10% less for SPS 88<span class="information"><i class="fa fa-info"
                                                        aria-hidden="true"></i></span></a>
                                            <div class="earn-points-dpdw">
                                                <ul>
                                                    <li>Get special discounts when you shop as SPS Member</li>
                                                    <li>Get guaranteed cashback in wallet on each shopping</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="select-size-section hidden">
                                        <span>Select your size</span> <a href="#">What’s my size?</a>
                                    </div>

                                    <div class="custom-radio-size">
                                        <h4>Buying Options</h4>
                                        @if (sizeof(array_keys($colorSizeMatrix)) > 0)
                                            <h4 class="coldark">Select Color</h4>
                                            <select name="colorOpt" id="colorOpt" class="form-control"
                                                onchange="showSizesOptions(this.value);">
                                                @foreach (array_keys($colorSizeMatrix) as $kx => $col)
                                                    @php
                                                        if (empty($selectedCol)) {
                                                            $selectedCol = str_slug($col);
                                                        }
                                                    @endphp
                                                    <option value="{{ str_slug($col) }}"
                                                        {{ $kx == 0 ? 'selected' : '' }}>{{ $col }}</option>
                                                @endforeach
                                            </select>
                                        @else
                                            <h4 class="coldark">Select Color Option</h4>
                                            <div class="row">
                                                @foreach (array_keys($colorSizeMatrix) as $kx => $col)
                                                    @php
                                                        if (empty($selectedCol)) {
                                                            $selectedCol = str_slug($col);
                                                        }
                                                    @endphp
                                                    <div class="col-sm-6 col-md-3 colbox"
                                                        style="border-radius:5px;height:100px;display: flex; justify-content:center; align-items:center; overflow:hidden';{{ $kx == 0 ? 'border:1px solid #090;' : '' }}"
                                                        onchange="showSizesOptions('{{ str_slug($col) }}');$('colbox').css('border', 'none');this.style.borderWidth='1px'; this.style.borderColor='#090';this.style.borderStyle='solid';">
                                                        @if (!empty($images[$col][0]))
                                                            <img src="{{ $images[$col][0] }}" alt=""
                                                                class="img-responsive">
                                                        @else
                                                            <h3>{{ $col }}</h3>
                                                        @endif
                                                    </div>
                                                @endforeach
                                            </div>
                                        @endif
                                        <div class="clearfix">&nbsp;<input type="hidden" id="sizeVal" value=""></div>
                                        @foreach ($colorSizeMatrix as $k => $v)
                                            <ul class="{{ str_slug($k) }} optHolder hidden">
                                                @foreach ($v as $z => $opt)
                                                    <li>
                                                        <div class="custom-radio-size-panel">
                                                            <input type="radio" id="size-001{{ $k . $z }}"
                                                                name="radio-group" onclick="$('#sizeVal').val('{{ $opt }}');">
                                                            <label
                                                                for="size-001{{ $k . $z }}"  onclick="$('#sizeVal').val('{{ $opt }}');">
                                                                {{ $opt }}
                                                            </label>
                                                            <sub style="text-align:center;text-transform: lowercase;display:block;clear:both;" class="{{ $sizeStock[$opt] > 0  ? '' : 'text-danger'}}">{{ $sizeStock[$opt] > 0  ? $sizeStock[$opt]  : '0'}} left</sub>
                                                        </div>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        @endforeach
                                        <div class="clearfix">&nbsp;</div>
                                    </div>

                                    <div class="buy-cart-panel clearfix">
                                        <div class="buy-panel">
                                            <button type="button" class="buy-now-btn" onclick="atc(1)">Buy Now</button>
                                        </div>
                                        <div class="cart-panel">
                                            <button type="button" class="add-cart-btn" onclick="atc(0);">Add to cart</button>
                                        </div>
                                    </div>

                                    <div class="shipping-standard">
                                        <span class="sh"><img
                                                src="{{ asset('front-shop/images/standard-shipping.svg') }}"
                                                alt="standard-shipping"></span>
                                        <span class="st-sh">Standard Shipping</span>
                                        <p>
                                            This product will be shipped to you after 6-7 weeks from the date of order
                                            placed.
                                            All custom made orders are not returnable.
                                        </p>
                                    </div>
                                    @if (sizeof($productSpecs) > 0)
                                        <div class="buy-cart-panel clearfix">
                                            <h5>Details</h5>
                                            <div class="clearfix"></div>
                                            {{-- <div class="ds-panel"> --}}
                                            <table class="table">
                                                @foreach ($productSpecs as $k => $productSpec)
                                                    <tr>
                                                        <th>{{ $k }}</th>
                                                        <td>{{ $productSpec }}</td>
                                                    </tr>
                                                @endforeach
                                            </table>
                                            {{-- </div> --}}
                                        </div>
                                    @endif
                                    <div class="disclamer-panel hidden">
                                        <div class="ds-panel">
                                            <div class="title-group">DISCLAIMER</div>
                                            <p>This product will be shipped to you after 6-7 weeks from the date of order
                                                placed. All custom made orders are not returnable.</p>
                                        </div>
                                    </div>

                                    <div class="detail-number sign-up-newsletter hidden">
                                        <div class="whatsapp-message"><span class="footer-call"><i class="fa fa-whatsapp"
                                                    aria-hidden="true"></i></span> at +91 84880 70070 to know more about the
                                            product</div>
                                        <div class="email-signup">
                                            <input type="text" placeholder="Know more about the product..."
                                                class="form-control" name="">
                                            <button class="sign-up-btn">Chat With Us</button>
                                        </div>
                                    </div>


                                </div>
                            </div>
                        </div>
                        {{-- SIMILAR FAMILY PRODUCTS --}}
                        <div class="row">
                            <div class="col-md-12">&nbsp;</div>
                        </div>
                        @if($similarFamilyProducts->count() > 0)
                        <div class="row">
                            <div class="col-md-12">
                                <h4>Color Options</h4>
                            </div>
                            @foreach($similarFamilyProducts as $similarFamilyProduct)
                            <div class="col-md-2 col-sm-4 col-xs-12">
                                @include('front-shop.products.product-box', ['product' => $similarFamilyProduct ])
                            </div>
                            @endforeach
                        </div>
                        @endif
                        {{-- SIMILAR FAMILY PRODUCTS --}}
                    </div>
                </div>
            @endif
        </div>

    </section>
    @include('front-shop.products.product-details-gal')

@endsection

@section('extraJS')
    <script src="{{ asset('front-shop/js/jquery.zoom.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('.product-image-panel-zoom').zoom();
            @if (!empty($selectedCol))
                showSizesOptions('{{ $selectedCol }}')
            @endif
            $('.pthumbs').slimScroll({
                height: '100vh'
            });
        });

        function showSizesOptions(v) {
            $('.optHolder').hide();
            $('.optHolder').removeClass('hidden');
            $('.optHolder').addClass('hidden');
            $('.' + v).removeClass('hidden');
            $('.' + v).fadeIn('slow');
        }

        function toggleGallery() {
            $("#productGallery").toggle();
            $(".global-space-section").toggle();
            $(".bottom-footer").toggle();
        }

        function atc(t) {
            var cartToken = '{{ session()->get('refId') }}';
            var customerId = '{{ empty(session()->get('customerId')) ? 0 : session()->get('customerId') }}';
            var sizeVal = '';
            sizeVal = $("#sizeVal").val();
            if(sizeVal == '') {
                toastr.error('Please select the size!');
                return false;
            }
            $.post("{{ route('front.shop.shop-product-atc') }}", {
                _token: document.tokenForm._token.value,
                article: '{{ $product->article }}',
                color: '{{ $product->color }}',
                size: sizeVal,
                qty: 1,
                cartToken: cartToken,
                pid: {{ $pid }},
                customerId: customerId,
            }, function(result) {
                var response = jQuery.parseJSON(result);
                if(response.status == true) {
                    toastr.success(response.info);
                    return false;
                } else {
                    toastr.error(response.info);
                    return false;
                }
                return false;
            });
        }
    </script>
@endsection