@extends('Website::layout.website')



@section('extrastyles')
    <link href="{{'/template/three/style.css'}}" rel="stylesheet" type="text/css" />
    <link href="{{'/plugins/magnific-popup/magnific-popup.css'}}" rel="stylesheet">
    <link href="{{'/plugins/light-gallery/lightgallery.css'}}" rel="stylesheet">
    <style>
        .template1 .container{
            padding-left:15px;
            padding-right:15px;
        }
        .box-image-detail img{
            width: 100%;
        }
        .template1 .breadcrumb-container .is-boxes{
            min-height:0px;
        }
        .template1 .breadcrumb-container .breadcrumb {
            margin-bottom:0;
            background-color:transparent;
            padding-left:0;
            padding-right:0;
        }
        .custom_post_title {
            font-size: {{ isset($post_title_font_size)? $post_title_font_size : '36px' }};
        }
        .template1{
            padding-top: 0px !important;
        }
        @media (min-width: 768px)
        {
            .navbar-collapse.collapse {
                display: block!important;
                height: auto!important;
                padding-bottom: 0;
                overflow: visible!important;
            }
        }

        @media (min-width: 768px)
        {
            .navbar-nav>li {
                float: none;
                display: inline-block;
            }
        }
        .template1 .header .navbar-nav>li.mega-menu {
            position: static;
        }
        .template1 .top-header {
            padding: 0 6px;
        }
        .template1 .container {
            margin: 0 auto;
            max-width: 1170px;
            width: 100%;
        }
        .is-wrapper{
            opacity: 1;
        }
        .template1 .header {
            position: relative;
        }
        #products-thumbnail .carousel-inner .item .pro_item_img {
            height: 400px;
            display: block;
            width: 100%;
            position: relative;
            overflow: hidden;
        }
        #products-thumbnail .carousel-inner.item {
            text-align: center;
            border: 1px solid #cccccc;
        }
        #products-thumbnail .carousel-inner {
            position: relative;
        }
        .carousel {
            position: relative;
        }
        .template1 a, .pagination>li>a, .pagination>li>span {
            color: #00DDAF;
        }
        .template1 a, .pagination>li>a, .pagination>li>span {
            color: #E46F80;
        }
        .template1 a {
            color: #2e75b7;
            text-decoration: none;
        }
        #carousel-inner a{
            text-align: center;
            border: 1px solid #cccccc;
        }
        .thumbnail-indicators {
            position: relative;
            left: 0;
            width: 100%;
            text-align: left;
            margin-left: 0;
            top: 30px;
        }
        @media screen and (min-width: 768px)
        {
            .carousel-indicators {
                bottom: 20px;
            }
        }
        .thumbnail-indicators li.active {
            border-color: #296195;
        }
        .thumbnail-indicators li {
            vertical-align: top;
            text-indent : 0px;
            margin-bottom: 20px;
            width: 150px !important;
            height: 30px !important;
        }
        .carousel-inner{
            text-align: center;
            border: 1px solid #cccccc;
        }
        #gallery_01 img {
            border: 2px solid white;
        }
        .active img {
            border: 2px solid #333 !important;
        }
        .product-social-icons .social a i{
            font-size: 30px;
        }

        .item-filter .navbar-nav li {
            font-size: 15px;
            line-height: 2.2307;
            float: none;
            margin: 0;
            padding: 0;
            border: none;
            border-left-color: currentcolor;
            border-left-style: none;
            border-left-width: medium;
        }

        .item-filter .navbar-nav li a {
            font-size: 1em;
            line-height: 2.2307;
            padding: 0 0 0 20px;
            display: block;
            color: #a3a3a3;
            border-left: 4px solid transparent;
        }
        .item-filter .navbar-nav li a:hover {
            color: black;
        }
        .item-img {
            border: 1px solid #d1d0cd;
            margin-bottom: 10px;
            position: relative;
            height: 225px;
            width: 200px;
        }
        .item-img a {
            color: #a3a3a3;
            -moz-transition: all 0.2s ease-in-out;
            -webkit-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
        }
        .item-title a {
            color: #a3a3a3 !important;
        }
        .item-title a:hover {
            color: black !important;
        }
        .compare-product-control {
            text-align: center;
        }
        .compare-product-control label{
            font-size: 14px;
        }
        .compare-products .table-flex {
            width: auto;
            overflow-x: auto;
        }
        .compare-products .tr-flex {
            display: flex;
        }
        .compare-products .tr-flex:first-child > div {
            border-top: 0px !important;
        }
        .compare-products .th-flex:first-child {
            padding-left: 0 !important;
        }
        .compare-products .th-flex {
            flex: 0 0 200px;
            border-color: transparent !important;
            border-top-color: transparent;
        }
        .compare-products .th-flex, .compare-products .td-flex {
            flex: 0 0 230px;
            padding: 15px;
            padding-left: 15px;
            white-space: normal;
            border-color: #d1d0cd !important;
        }
        .visible-lg {
            display: block !important;
        }
        .category .btn-print {
            font-weight: 700;
            text-transform: uppercase;
            padding: 0;
            color: #999;
            float: right;
        }
        .product-print .col-xs-6 {
            width: 50%;
        }
        .product-print #arrange-by{
            width: 200px;
        }
        .td-flex{
            text-align: center;
        }
        .navbar-nav {
            margin-top: 0;
            margin-bottom: 0;
        }
        @media (min-width: 768px)
        {
            .navbar-nav {
                float: left;
                margin: 0;
            }
        }
        .navbar-nav.active-filters > li {
             background: #fff;
             border-radius: 6px;
             border: solid 1px #45494d;
             margin: 0px 2px 2px 4px;
        }
        .navbar-nav.active-filters > li > a {
            color: #090909;
        }
        .carousel-inner{
            max-height: 300px;
        }
        .container .carousel-indicators img
        {
            max-width : 100px;
        }
        .container img
        {
            margin: 0;
        }
    </style>
    @if(!empty($social_share_icon_code))
        {!! $social_share_icon_code !!}
    @endif
@endsection

@section('content')
    @if(isset($product))
        <div class="blog_temp_custom_template">
            <div class="is-section is-box is-section-auto">
                <div class="is-boxes">
                    <div class="is-box-centered">
                        <div class="is-container">
                            @include('Website::custom-section.product.detail',compact('product'))
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @elseif(isset($is_comparison))
        <div class="blog_temp_custom_template">
            <div class="is-section is-box is-section-auto">
                <div class="is-boxes">
                    <div class="is-box-centered">
                        @include('Website::custom-section.product.comparison',compact('products_data'))
                    </div>
                </div>
            </div>
        </div>
    @else
        <div class="blog_temp_custom_template">
            <div class="is-section is-box is-section-auto">
                <div class="is-boxes">
                    <div class="is-box-centered">
                        @include('Website::custom-section.product.listing',compact('data','brands','category_data','attributes'))
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection

@section('footer')
    <script src="{{'/plugins/magnific-popup/jquery.magnific-popup.min.js'}}"></script>
    <script src="{{'/plugins/light-gallery/lightgallery.js'}}"></script>
    <script src="{{'/plugins/light-gallery/lightgallery.min.js'}}"></script>

    <script src="https://cdn.jsdelivr.net/gh/igorlino/elevatezoom-plus@1.2.3/src/jquery.ez-plus.js"></script>
    <script>

        $(document).ready(function() {
            // $('.gallery-item a').nivoLightbox();
            $("#carouselExampleControls .carousel-inner  ").lightGallery();
            // $('.zoom-img').ezPlus();

            // $('.zoom-img').ezPlus({
            //     gallery: 'gallery_01', cursor: 'pointer', galleryActiveClass: 'active',
            //     imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'
            // });
            //
            // //pass the images to Fancybox
            // $('.zoom-img').bind('click', function (e) {
            //     var ez = $('.zoom-img').data('ezPlus');
            //     $.fancyboxPlus(ez.getGalleryList());
            //     return false;
            // });


            // $('#carouselExampleControls').carousel();
            $('.popup-gallery').magnificPopup({
                delegate: 'a',
                type: 'image',
                tLoading: 'Loading image #%curr%...',
                mainClass: 'mfp-img-mobile',
                gallery: {
                    enabled: true,
                    navigateByImgClick: true,
                    preload: [0,1]
                },
                image: {
                    tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
                    titleSrc: function(item) {
                        return '';
                    }
                }
            });
        });
    </script>
    <script src="/plugins/nivo-lightbox/nivo-lightbox.min.js"></script>

    <script>
        $(document).ready(function(){
            if($("#toggle_comment_show")){
                $('#toggle_comment_show').on('click', function () {
                    if($("#message_content").hasClass('show')){
                        $("#message_content.show").removeClass('show').addClass('hide');
                        $(this).text('SHOW COMMENTS');
                    }else if($("#message_content.hide").hasClass('hide')) {
                        $("#message_content.hide").removeClass('hide').addClass('show');
                        $(this).text('HIDE COMMENTS');
                    }
                });
            }
            $('#products_count').change(function() {
                var productCount = $(this).children("option:selected").val();
                var category_id = $('#category_id').val();
                $.ajax({
                    method: 'get',
                    url: '{{ url('products/filter')}}',
                    data: 'productCount=' + productCount + '&category_id=' + category_id,
                }).done(function(response){
                    $('.product-items').html(response);
                });
            });

            $('#products_order').change(function() {
                var selectedOrder = $(this).children("option:selected").val();
                var category_id = $('#category_id').val();
                $.ajax({
                    method: 'get',
                    url: '{{ url('products/filter')}}',
                    data: 'selectedOrder=' + selectedOrder + '&category_id=' + category_id,
                }).done(function(response){
                    $('.product-items').html(response);
                });
            });
            $("#arrange-by").change(function(){
                var selectedOrder = $(this).children("option:selected").val();
                var url = window.location.href;
                var index = url.indexOf('&sort=');
                if(index > -1)
                {
                 var split_url = url.split('&sort=');
                 url = split_url[0] + '&sort=' + selectedOrder;
                }
                else{
                    url = url+'&sort='+selectedOrder;
                }
                window.location.href = url;
            });
        });
        $(function() {
            var ctrlVideo = document.getElementById("product-video");
            $('#product-video-control').click(function(){
                if ($('button#product-video-control').hasClass("active")){
                    ctrlVideo.play();
                    $('#product-video-control').toggleClass("active");
                } else {
                    ctrlVideo.pause();
                    $('#product-video-control').toggleClass("active");
                }
            });
        });
        function string_replace(start,replaceString,end)
        {
            return this.substring(0, start) + replaceString + this.substring(end);
        }
        function printContent(el){
            var restorepage = $('body').html();
            var printcontent = $('.' + el).clone();
            $('body').empty().html(printcontent);
            window.print();
            $('body').html(restorepage);
        }
        function compareProducts()
        {
            var selected = '';
            $('.compare-product-control input:checked').each(function() {
                selected = selected + '&' + ($(this).attr('value'));
            });
            if(selected !== '')
            {
                window.location.href = '{{ url('products/compare/')}}/'+selected;
            }
        }
        function removeProduct(id)
        {
        var url = window.location.href;
        url = url.replace('&compare-'+id,'');
        window.location.href = url;
        }
        $("#brands").change(function(){
            var selectedBrand = $(this).children("option:selected").val();
            var url = window.location.href;
            if(url.split('?').length > 1)
            {
                replacetext = '&';
            }else{
                replacetext = '/?';
            }
            url = url + replacetext + 'brand=' + selectedBrand;
            window.location.href = url;
        });

        $(".product_attribute_filter").change(function(){
            var selected_item = $(this).children("option:selected").val();
            var product_attribute_filter_name = $(this).closest('.form-group').find('label').text();
            var url = window.location.href;
            product_attribute_filter_name = product_attribute_filter_name.replace(' ','_');
            var replacetext = '';
            if(url.split('?').length > 1)
            {
                replacetext = '&';
            }else{
                replacetext = '/?';
            }
            url = url + replacetext + product_attribute_filter_name + '=' + selected_item;
            window.location.href = url;
        });
        $(".remove_attribute").click(function(){
            var product_attribute_filter_name = $(this).closest('.navbar-nav').find('a').text();
            product_attribute_filter_name = product_attribute_filter_name.trim();
            var filter_value = product_attribute_filter_name.split(':')[1].trim();
            filter_value = filter_value.split(' ')[0];
            product_attribute_filter_name = product_attribute_filter_name.split(':')[0];
            product_attribute_filter_name = product_attribute_filter_name.replace(' ','_');
            var url = window.location.href;
            if(product_attribute_filter_name == 'Brand_')
            {
                var brand_filter_label = $('#brand_filter_label').val();
                url = url.replace('&brand=' + brand_filter_label,'');
                url = url.replace('?brand=' + brand_filter_label,'');
            }
            else{
                url = url.replace('&'+product_attribute_filter_name + '=' + filter_value,'');
                url = url.replace('?'+product_attribute_filter_name + '=' + filter_value,'');
            }
            window.location.href = url;
        });

        function addToCart (id) {
            var images = [];
            $('.carousel-indicators li').each(function(i)
            {
                images.push($(this).find('img').attr('src'));
            });
            var image = typeof images[0] !== 'undefined' ? images[0] : '';
            $.ajax({
                method: 'POST',
                url: '{{ url('/shopping-cart/store')}}',
                dataType : 'json',
                data: 'product_id=' + id + '&image=' + image + '&_token= {{ csrf_token() }}',
            }).done(function(response){
            });
        }
    </script>
@endsection