@extends("Front::Layout.master")

@section("title")
    @if(isset($product->post_meta_array["meta_title"])){{ $product->post_meta_array["meta_title"] }}@else{{ $product->title }}@endif
@endsection
    @section("meta")
<meta name="description" content="@if(isset($product->post_meta_array["meta_description"])){{ $product->post_meta_array["meta_description"] }}@else{{ strip_tags($product->post_excerpt) }}@endif">
    <meta name="robots" content="@if(isset($product->post_meta_array["meta_follow"])){{ $product->post_meta_array["meta_follow"] }}@endif, @if(isset($product->post_meta_array["meta_index"])){{ $product->post_meta_array["meta_index"] }}@endif">
    <link rel="canonical" href="{{ $product->url }}/">
    <meta property="og:locale" content="fa_IR">
    <meta property="og:type" content="product">
    <meta property="og:title" content="@if(isset($product->post_meta_array["meta_title"])){{ $product->post_meta_array["meta_title"] }}@else{{ $product->title }}@endif">
    <meta property="og:description" content="@if(isset($product->post_meta_array["meta_description"])){{ $product->post_meta_array["meta_description"] }}@else{{ strip_tags($product->post_excerpt) }}@endif">
    <meta property="og:url" content="{{ $product->url }}">
    <meta property="og:site_name" content="{{ get_site_title() }}">
    <meta property="og:updated_time" content="{{ $product->updated_at }}">
    <meta property="og:image" content="{{asset(store_image_link($product->media_id)) }}">
    <meta property="og:image:secure_url" content="{{asset(store_image_link($product->media_id)) }}">
    <meta property="og:image:width" content="800">
    <meta property="og:image:height" content="400">
    <meta property="og:image:alt" content="{{ $product->title }}">
    <meta property="og:image:type" content="image/jpeg">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="@if(isset($product->post_meta_array["meta_title"])){{ $product->post_meta_array["meta_title"] }}@else{{ $product->title }}@endif">
    <meta name="twitter:description" content="@if(isset($product->post_meta_array["meta_description"])){{ $product->post_meta_array["meta_description"] }}@else{{ strip_tags($product->post_excerpt) }}@endif">
    <meta name="twitter:image" content="{{asset(store_image_link($product->media_id)) }}">


@endsection

@section("content")
    <!-- breadcrumb -->
    <div class="breadcrumbSection marginX my-md-3 my-3">
        <div class="breadcrumb_contanier">
            <ul class="d-flex">
                <li class="ml-2"><a href="/" class="font_size_2">تاسیسات اول</a></li>
                @if(isset($product->category[0]))
                    <li class="ml-2"><a href="{{ $product->category[0]->url }}" class="font_size_2">{{ $product->category[0]->name }}</a></li>
                @endif
                <li class="ml-2"><a class="font_size_2">{{ $product->title }}</a></li>
            </ul>
        </div>
    </div>
    <!-- end breadcrumb -->
        <div class="container">

                <div class="specification-filters-wrapper">
                    <div class="title filters">فیلتر محصولات</div>
                    <div class="group-product-filter-box">
                        @foreach($filter_attributes_once as $filter_key=>$filter_attribute)

                            <select class="d-none" id="filter_{{$filter_key}}" data-parent-id="{{ $filter_attribute["parent"]["id"] }}" data-parent-name="{{ $filter_attribute["parent"]["name"] }}" multiple="multiple">
                                @foreach($filter_attribute["values"] as $value)
                                    <option value="{{ $value["id"] }}">{{ $value["name"] }}</option>
                                @endforeach

                            </select>

                        @endforeach
                    </div>
            </div>

            <div class="group-product-top">
                <h1>{{ $product->title }}</h1>
                <div class="invoice-summary" style="z-index: auto; position: static; top: auto;"><div class="total"><span class="title">جمع کل:</span>&nbsp;
                        <span class="value">0</span>
                        <span class="unit">تومان</span></div> <div class="discounted-total"><span class="title">جمع کل با تخفیف:</span>&nbsp;
                        <span class="value">0</span>&nbsp;
                        <span class="unit">تومان</span></div></div>
            </div>

            <section class="products stuff">


                <form action="{{ route("add_to_cart",$product->id) }}" method="post">
                    @csrf
                    <input type="hidden" value="{{ $product->id }}" name=group_product_id>
                <div class="stuffs-header clearfix">
                    <div class="cell image">
                        <div class="content">
                            تصویر و
                            مشخصات فنی
                        </div>
                    </div>
                    <div class="cell title-and-specs">
                        <div class="content">
                            نام کالا
                        </div>
                    </div>
                    <div class="cell size">
                        <div class="content">سایز</div>
                    </div>
                    <div class="cell price">
                        <div class="content">
                            قیمت
                            (تومان)
                        </div>
                    </div>
                    <div class="cell count">
                        <div class="content">تعداد</div>
                    </div>
                    <div class="cell discount">
                        <div class="content">تخفیف</div>
                    </div>
                    <div class="cell total">
                        <div class="content">
                            جمع
                            (تومان)
                        </div>
                    </div>
                    <div class="cell discounted-total">
                        <div class="content">
                            جمع با تخفیف
                            (تومان)
                        </div>
                    </div>
                </div>
                <div class="items-wrapper search-info" data-query="" data-template-id="20" data-menu-id="207" data-brand-id="" data-search-items-count="33" data-min-price="8580000" data-max-price="43830000" data-display-priority="MenuPriority" data-page="1" data-has-next-page="true">
                    <div class="stuffs">
                        @foreach($in_stock_children_products as $children_product)
                            @php($children_product->set_parent_group_product($product))
                            <input type="hidden" name="children_product_id[{{$children_product["id"]}}]" value="{{ $children_product->id }}">
                            <div class="stuff" >
                            <div class="cell-group general-info clearfix">
                                <a class="cell image v-center" data-title="{{ $children_product->title }}" >
                                    <div class="image-wrapper">
                                        <img src="{{ asset(store_image_link($children_product->media_id)) }}" alt="{{ $children_product->title }}">
                                    </div>
                                </a>
                                <div class="cell title-and-specs v-center">
                                    <div class="content">
                                        <span class="title">{{ $children_product->title }}</span>
                                        <div class="specs">
                                            @if($children_product["filters_attribute"])
                                                @foreach($children_product["filters_attribute"] as $filter_attribute)
                                                    <span data-parent-id="{{ $filter_attribute["parent"]["id"] }}" data-attribute-id="{{ $filter_attribute["values"][0]["id"] }}">{{ $filter_attribute["parent"]["name"] }}: {{ $filter_attribute["values"][0]["name"] }}</span>
                                                @endforeach
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="cell-group price-info clearfix">
                                <div class="cell size v-center">
                                    <div class="content">
                                        <div class="sub-title">سایز</div>
                                        <div class="value">
                                            @if($children_product->type=="variable")
                                                <select class="sizes" name="product[{{$children_product["id"]}}]">

                                                        @foreach($in_stock_variations[$children_product->id] as $variation)
                                                            @foreach($variation["variations"] as $parent_id=>$size)
                                                                @if($parent_id==1)
                                                                    @php($variation_price=$variation["price"] - $children_product->minus_offer_price )
                                                                    <option data-offer-min-1="{{ $variation["offer_1_min"] }}" data-offer-min-2="{{ $variation["offer_2_min"] }}" data-offer-percent-1="{{ $variation["offer_1_percent"] }}"  data-offer-percent-2="{{ $variation["offer_2_percent"] }}" @if($loop->index==0) selected @endif data-price="{{ $variation["price"] - $children_product->minus_offer_price  }}" value="{{ $variation["id"] }}">{{ $size[0]["name"] }}</option>
                                                                @endif

                                                            @endforeach
                                                        @endforeach

                                                </select>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="cell price v-center" data-price="{{ $children_product->offer_price }}">
                                    <div class="content">
                                        {{ isset($variation_price)? format_price_with_currencySymbol($variation_price): format_price_with_currencySymbol($children_product->offer_price) }}
                                    </div>
                                </div>
                                <div class="cell count v-center">
                                    <div class="content">
                                        <div class="sub-title">تعداد</div>
                                        <input type="number" name="quantity[{{$children_product["id"]}}]" value="0" min="0" @if($children_product->stock_number != null) max="{{ $children_product->stock_number }}" @endif>
                                    </div>
                                </div>
                                <div class="cell discounts v-center">
                                    <div class="content">
                                        {!! isset($variation_price)??$children_product->variation_offer_html !!}
                                    </div>
                                </div>
                                <div class="cell total v-center">
                                    <div class="content">
                                        <div class="sub-title">جمع (تومان)</div>
                                        <span class="value">۰</span>
                                    </div>
                                </div>
                                <div class="cell discounted-total v-center">
                                    <div class="content">
                                        <div class="sub-title">جمع با تخفیف (تومان)</div>
                                        <span class="value">۰</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                    <button class="group_product_add_to_cart" type="submit"><i class="fas fa-shopping-cart" style="font-weight: 400; margin-left: 7px;"></i>افزودن به سبد خرید</button>
                </form>


            </section>
            <div class="group-product-content" >
                {!! $product->content !!}
            </div>
        </div>
    <style>


        @media (min-width: 1200px) {
            .container, .container-lg, .container-md, .container-sm, .container-xl {
                max-width: 1170px;
            }
        }
    </style>
    @push('css')
        <link rel="stylesheet" href="{{asset('front/css/bootstrap-multiselect.min.css')}}" />

    @endpush

    @push('js')
        <script src="{{asset('front/js/bootstrap-multiselect.min.js')}}"></script>
        <script>
            $(function(){
                jQuery(".specification-filters-wrapper select").each(function (){
                    var buttonText=jQuery(this).data("parent-name")
                    $(this).multiselect({
                        includeSelectAllOption: false,

                        buttonText:function (){
                            return buttonText;
                        },
                        allSelectedText: 'همه موارد',
                        selectAllText: 'انتخاب همه',
                        buttonWidth: '200px',
                        dropUp: true,
                        onChange: function(option, checked, select) {
                            var active_filters_option=jQuery("span.multiselect-native-select :selected");
                            var active_filters={};
                            active_filters_option.each(function (){
                                var parent=jQuery(this).parents("select");
                                var filter_parent_value=parent.data("parent-id")
                                var parent_active_option=parent.val();
                                active_filters[filter_parent_value]=parent_active_option
                            })

                            var matched_filter_element=[];
                            jQuery.each(active_filters,function (key, value){
                                if(matched_filter_element.length==0){
                                    jQuery.each(value,function (valueKey,valueValue){
                                        var item=jQuery(`.specs span[data-parent-id="${key}"][data-attribute-id="${valueValue}"]`).parents(".stuff .stuff");

                                        if(item.length>1){
                                            jQuery.each(item,function (e,i){

                                                matched_filter_element.push(jQuery(i));

                                            })
                                        } else{
                                            matched_filter_element.push(jQuery(`.specs span[data-parent-id="${key}"][data-attribute-id="${valueValue}"]`).parents(".stuff .stuff"))

                                        }

                                    })
                                } else{
                                    jQuery.each(matched_filter_element,function (attrKey,attrElement){
                                        console.log(attrKey)
                                        var should_delete=true;
                                        jQuery.each(value,function (valueKey,valueValue){
                                            if(jQuery(attrElement).find(`.specs span[data-parent-id="${key}"][data-attribute-id="${valueValue}"]`).height()){
                                                should_delete=false;
                                            }

                                        })

                                        if(should_delete){
                                            matched_filter_element.splice(attrKey, 1);
                                        }

                                    })
                                }
                            })
                            if(matched_filter_element.length>=1){
                            jQuery(".stuff .stuff").addClass("d-none");

                            } else{
                                jQuery(".stuff .stuff").removeClass("d-none");
                            }

                            jQuery.each(matched_filter_element,function (){
                                jQuery(this).removeClass("d-none")
                            })
                        }

                    });


                })


                jQuery("button.multiselect").click()

            });

        </script>
        <script>
            var header = jQuery(".group-product-top")
            $(window).scroll(function() {
                var scroll = $(window).scrollTop();

                if (scroll >= header.offset().top) {
                    jQuery(".invoice-summary").addClass("scroll-to-fixed-fixed");
                } else {
                    jQuery(".invoice-summary").removeClass("scroll-to-fixed-fixed")
                }
            });

            jQuery('.count input[type="number"]').change(function(){
                var parent=jQuery(this).closest(".price-info")
                var price=parent.find(".size select :selected").data("price");
                if(!price){
                    price=jQuery(".cell.price.v-center").data("price")
                }
                price=price * this.value
                var offer_price=price;
                if(parent.find("span.discount:first-child")){
                    var offer_first_min=parent.find("span.discount:first-child").data("min-price")
                    var offer_second_min=parent.find("span.discount:last-child").data("min-price")
                    var offer_first_percent=parent.find("span.discount:first-child").data("percent")
                    var offer_second_percent=parent.find("span.discount:last-child").data("percent")
                    if(price > offer_first_min){
                        parent.find("span.discount:first-child").addClass("selected")
                        offer_price=(offer_first_percent / 100) * price;
                        offer_price=price - offer_price ;
                    }  else{
                        parent.find("span.discount:first-child").removeClass("selected")
                    }
                    if(offer_second_min){
                        if(price >=offer_second_min){
                            parent.find("span.discount:first-child").removeClass("selected")
                            parent.find("span.discount:last-child").addClass("selected")
                            offer_price=(offer_second_percent / 100) * price;
                            offer_price=price - offer_price ;
                        }
                        else{
                            parent.find("span.discount:last-child").removeClass("selected")

                        }
                    }


                }
                parent.find(".total .value").html(formatMoney(price))
                parent.find(".discounted-total .value").html(formatMoney(offer_price))


                updateInvoice();


            })

            function formatMoney(amount) {
                return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            }

            jQuery("select.sizes").change(function (){

                var offer_1_min=jQuery(this).find(":selected").data("offer-min-1")
                var offer_2_min=jQuery(this).find(":selected").data("offer-min-2")
                var offer_1_percent=jQuery(this).find(":selected").data("offer-percent-1")
                var price=jQuery(this).find(":selected").data("price")
                var offer_2_percent=jQuery(this).find(":selected").data("offer-percent-2")

                var offer_html="";

                if(offer_1_min && offer_1_percent){
                    offer_html=`<span class="discount"  data-toggle="tooltip" title="حد اقل سفارش : ${offer_1_min}" data-min-price="${offer_1_min}" data-percent="${offer_1_percent}">${offer_1_percent}٪</span>`
                }
                if(offer_2_min && offer_2_percent){
                    offer_html+=`<span class="discount" data-toggle="tooltip" title="حد اقل سفارش : ${offer_2_min}" data-min-price="${offer_2_min}" data-percent="${offer_1_min}}">${offer_2_percent}٪</span>`
                }
                var parent=jQuery(this).parents(".price-info");
                parent.find(".discounts .content").html(offer_html);
                parent.find(".count  input").val(0);
                parent.find(".price  .content").html(formatMoney(price));
                parent.find(".total .value").html(0)
                parent.find(".discounted-total .value").html(0)
                updateInvoice();

            })

            function updateInvoice(){
                var sum = 0;
                jQuery(".price-info .total .value").each(function() {

                    var value = $(this).text();
                    value=value.replace(',','');
                    value=parseFloat(value);
                    if(!isNaN(value) && value.length != 0) {
                        sum += parseFloat(value);
                    }
                });

                var sum2 = 0;
                jQuery(".price-info .discounted-total .value").each(function() {

                    var value = $(this).text();
                    value=value.replace(',','');
                    value=parseFloat(value);
                    if(!isNaN(value) && value.length != 0) {
                        sum2 += parseFloat(value);
                    }
                });

                jQuery(".invoice-summary .total .value").html(formatMoney(sum))
                jQuery(".invoice-summary .discounted-total .value").html(formatMoney(sum2))
            }

        </script>
    @endpush
@endsection
