@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("schema")
    <script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "shop",
    "item": "https://tasisataval.com/shop/"
  },
  @if(isset($product->category[0]))
            {
              "@type": "ListItem",
              "position": 2,
              "name": "{{ $product->category[0]->name }}",
    "item": "{{ $product->category[0]->url }}"
  },
  @endif
        {
          "@type": "ListItem",
          "position": @if(isset($product->category[0])) 3 @else 2 @endif,
    "name": "{{ $product->title }}",
     "item": "{{ $product->url }}"
  }
         ]
       }
</script>
    <script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "{{ $product->title }}",
  "image": "{{asset(store_image_link($product->media_id)) }}",
  "description": "{{ strip_tags($product->content) }}",
  "sku": "{{ $product->id }}",
  @if($product->offerpercent >0)
            "offers": {
       "@type": "Offer",
       "url": "",
       "priceCurrency": "USD",
       "price": "{{$product->regular_price}}",
       "priceValidUntil": "{{ \Illuminate\Support\Carbon::now()->addYear() }}",
       "availability": "https://schema.org/OnlineOnly",
       "itemCondition": "https://schema.org/NewCondition"
     },
@endif

        "aggregateRating": {
          "@type": "AggregateRating",
          "ratingValue": "5",
          "bestRating": "5",
          "worstRating": "5",
          "ratingCount": "1"
        }
      }
</script>
@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="product type-product  status-publish    has-post-thumbnail">
            <div class="single-product-box-top">
                <div class="row">
                    <div class="col-lg-4">

                            <div class="woocommerce-product-gallery__image single-product-main-image">
                                <a href="{{ asset(store_image_link($product->media_id)) }}"  target="_blank" class="woocommerce-main-image">
                                    <img  src="{{ asset(store_image_link($product->media_id)) }}" class="attachment-shop_single" >
                                </a>
                            </div>
                        @if(!empty($gallery))
                            <div class="thumbnails">
                                <ul class="thumbnail-nav slick-initialized slick-slider">


                                    <div class="slick-list draggable">
                                        <div class="slick-track" >
                                            @foreach($gallery as $gallery_item)
                                                <li class="slick-slide slick-current slick-active" style="width: 92px;">

                                                    <a href="{{ asset(store_image_link($gallery_item)) }}" target="_blank"></a>
                                                    <img src="{{ asset(store_image_link($gallery_item)) }}" alt="">
                                                </li>
                                            @endforeach

                                            </div>
                                    </div>
                                </ul>
                            </div>
                        @endif

                    </div>
                    <div class="col-lg-4">
                        <div class="summary entry-summary">
                            <h1 class="product_title entry-title">{{ $product->title }}</h1>
                            <div class="row">
                                <div class="col-sm-6">
                                    @if(isset($product->category[0]))
                                        @if(is_object($product->category[0]))
                                            <div class="product_meta">
                                                <span class="posted_in">دسته:
                                                    <a href="{{ $product->category[0]->url }}" rel="tag">{{ $product->category[0]->name }}</a>
                                                </span>
                                            </div>
                                        @endif
                                    @endif
                                </div>
                            </div>
                            @if($product->post_excerpt)
                                <div class="product-exerpt-page">
                                   <span>توضیحات کوتاه محصول : </span>
                                    {!! $product->post_excerpt !!}

                                </div>
                            @endif

                            @if($product->type == $product->type_variable)
                                <table class="variations" cellspacing="0">
                                    <tbody>
                                    @foreach($table_variations as $table_variation_id=>$table_variation)
                                       @if($table_variation["item"])
                                            <tr>
                                                <td class="label"><label for="pa_weight">{{ $table_variation["parentName"] }}</label></td>
                                                <td class="value">
                                                    <select  class="variation_select_box" name="{{ $table_variation_id }}">
                                                        <option value="">یک گزینه را انتخاب کنید</option>
                                                        @foreach($table_variation["item"] as $item)
                                                            @if(isset($item["id"]))
                                                            <option value="{{ $item["id"] }}">{{ $item["name"] }}</option>
                                                            @endif
                                                         @endforeach
                                                    </select>
                                                </td>
                                            </tr>
                                        @endif
                                    @endforeach
                                    </tbody>
                                </table>

                            @endif

                        </div>
                    </div>
                    <div class="col-lg-4 dsfsdsffgt">
                        <div class="product-description-boxes">
                            <div class="product-description-boxes-top">
                                <div class="product-description-boxes-top-item">
                                    <i class="fas fa-store"></i>
                                    <span>
                            <strong>فروشنده : </strong>
                            تاسیسات اول
                        </span>
                                </div>
                                <div class="product-description-boxes-top-item">
                                    <i class="fas fa-shield-alt"></i>
                                    <span>
                           ۷ روز تضمین بازگشت کالا
                        </span>
                                </div>
                                <div class="product-description-boxes-top-item">
                                    <i class="fas fa-hdd"></i>
                                    @if($in_stock)

                                    <span>

                                      @if($product->manage_stock)
                                          تعداد موجود در انبار : {{ $product->stock_number }}
                                          @if($product->stock_number <=$product->stock_low_number)
                                                - پیش از اتمام بخرید
                                          @endif
                                          @else
                                            موجود در انبار تاسیسات اول
                                          @endif
                        </span>
                                        @else
                                        در انبار موجود نیست
                                    @endif
                                </div>
                            </div>

                            <div class="product-description-boxes-bottom">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="single-product-price">
                                            <p class="price">
                                                {!! $product->product_price() !!}
                                                @if($product->offerpercent >0)
                                                    <span class="offer-adad">
                                                    {{ $product->offerpercent }}
                                                </span>
                                                @endif
                                            </p>
                                            @if($product->offerpercent >0)
                                                <span class="offer-adad">
                                                    {{ $product->offerpercent }}
                                                </span>
                                            @endif
                                        </div>

                                    </div>
                                </div>


                                <div class="add-tocart-page-product">


                                    @if($in_stock)
                                        <div class="add-tocart-page-product">
                                            <a class="add-to-cart-btn" href="{{ route("add_to_cart",["product"=>$product->id]) }}"><i class="fas fa-shopping-cart" style="font-weight: 400; margin-left: 7px;"></i> افزودن به  سبد خرید</a>
                                        </div>
                                    @else
                                        <div class="add-tocart-page-product">
                                            <a  style="background: #838383">در انبار موجود نیست</a>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="woocommerce-tabs wc-tabs-wrapper">
                    <ul class="tabs wc-tabs nav">
                        <li class="description_tab " id="tab-title-description" role="tab" aria-controls="tab-description">
                            <a class="active" data-toggle="tab" href="#tab-description">
                                توضیحات
                            </a>
                        </li>
                        @if(!empty($attributes))
                            <li class="attribute" id="attribute" role="tab" aria-controls="tab-reviews">
                                <a data-toggle="tab" href="#tab-attribute">
                                   مشخصات
                                </a>
                            </li>
                        @endif
                        <li class="reviews_tab" id="tab-title-reviews" role="tab" aria-controls="tab-reviews">
                            <a data-toggle="tab" href="#tab-reviews">
                                نظرات کاربران
                            </a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="woocommerce-Tabs-panel woocommerce-Tabs-panel--description tab-pane fade in active show" id="tab-description"  >

                            <div class="descriptio-product-tab">
                                <div>
                                    {!! $product->content !!}
                                </div>
                            </div>
                        </div>
                        @if(!empty($attributes))
                            <div class="woocommerce-Tabs-panel woocommerce-Tabs-panel--attribute tab-pane fade" id="tab-attribute">
                                <div class="additionalproarea">
                                    <table class="woocommerce-product-attributes shop_attributes">
                                        <tbody>
                                        @foreach($attributes as $attribute)
                                            <tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--attribute_%d9%85%d9%88%d8%a7%d8%b1%d8%af-%d9%85%d8%b5%d8%b1%d9%81">
                                                <th class="woocommerce-product-attributes-item__label">{{ $attribute["parent"]["name"] }}</th>
                                                <td class="woocommerce-product-attributes-item__value">
                                                    <p>
                                                        @foreach($attribute["values"] as $value)
                                                            {{ $value["name"] }}
                                                            <br>
                                                        @endforeach
                                                    </p>
                                                </td>
                                            </tr>
                                        @endforeach


                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        @endif
                        <div class="woocommerce-Tabs-panel woocommerce-Tabs-panel--reviews tab-pane fade in " id="tab-reviews" >
                        <div id="reviews" class="woocommerce-Reviews">
                            <div class="post-item-review">
                                <div class="post_item_add_review">
                                    <div class="title  mb-4 mx-0">
                                        <div class="style_header"></div>
                                        <span>
               ارسال نظر
            </span>
                                    </div>
                                    @includeIf("Front::comment_form",["post_id"=>$product->id,"post_type"=>"product"])

                                </div>
                                @if($comments->isNotEmpty())
                                    <div class="post_item_reviews">
                                        <div class="title  mb-4 mx-0">
                                            <div class="style_header"></div>
                                            <span>
                                نظرات کاربران
                            </span>
                                        </div>
                                        @includeIf("Front::comment",["comments"=>$comments])
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                    </div>
                </div>

            </div>
        </div>


    </div>
    @if($related_products->isNotEmpty())
        <div class="main_discount_style">
            <div class="topTitle">
            <span>
                محصولات مرتبط
            </span>
            </div>
            <span class="borderTopTitle">
        </span>
            <div class="leftCircle"></div>
            <div class="rightCircle"></div>
            <div class="nextSlider text-center" id="first_discount_navigation_prev"><i
                    class="fa fa-chevron-right fa-2x"></i></div>
            <div class="prevSlider text-center" id="first_discount_navigation_next"><i class="fa fa-chevron-left fa-2x"></i>
            </div>
            <div class="first_slider overflow-hidden">
                <div class="main-first_slider">
                    <!-- Slider main container -->
                    <div class="main-first-swiper-container col-12">
                        <!-- Additional required wrapper -->
                        <div class="swiper-wrapper">
                            <!-- Slides -->
                            @foreach($related_products as $related_product)
                                <div class="card_slider  swiper-slide">
                                    @includeIf("Front::product_item",["product"=>$related_product])
                                </div>
                            @endforeach

                        </div>
                        <!-- If we need pagination -->
                    </div>
                </div>
            </div>
        </div>
    @endif

    @push("js")
        @if($product->type == $product->type_variable)
            <script>
                var empty = false;
                    var variations=JSON.parse('{!! json_encode($in_stock_variations)  !!}');
                    jQuery(".add-to-cart-btn").click(function (e){

                        var selected_variations={};
                        jQuery("select.variation_select_box").each(function (item){
                            if(!jQuery(this).val()){
                                empty = true;
                                alert("لطفا همه مشخصات محصول را انتخاب کنید");
                                return false;
                            }
                            empty = false;
                            var parent_id=jQuery(this).attr("name")
                            var parentvalue_id=jQuery(this).val()
                            Object.assign(selected_variations,{
                                [parent_id]: parentvalue_id
                            })
                        })
                        if (empty) {
                            return false;
                        }

                        var variation_by_parent_id=[];

                        jQuery(variations).each(function (){
                            var item_variations_object={};
                            var item_variations=this.variations;
                            var item_variation_id=this.id;
                            var that=this;
                            for (const [index, value] of Object.entries(item_variations)) {
                                if(item_variations_object[item_variation_id]){
                                    item_variations_object[item_variation_id][index]=value[0].id;
                                } else{
                                    Object.assign(item_variations_object,{[item_variation_id]:{[index]:value[0].id}})

                                }

                            }
                            variation_by_parent_id.push(item_variations_object)
                        })



                        var exist_variation=false;
                        var active_variation_id=false;
                        for (const [aa, value] of Object.entries(variation_by_parent_id)) {

                            for (const [id, child_value] of Object.entries(value)) {
                                active_variation_id=id;
                                for (const [index, child_child_value] of Object.entries(child_value)) {

                                    if(selected_variations[index] == child_child_value){
                                        exist_variation=true;
                                    } else{
                                        exist_variation=false;
                                        active_variation_id=false;
                                        break;
                                    }
                                }
                                if(exist_variation) {
                                    break;
                                }
                            }
                            if(exist_variation) {
                                break;
                            }
                        }

                        if(active_variation_id && exist_variation ){
                                var href=jQuery(this).attr("href")
                                href=href+`?variation=${active_variation_id}`
                                jQuery(this).attr("href",href)
                        } else{
                            e.preventDefault();
                            alert("محصولی با ویژگی های مورد نظر شما موجود نیست لطفا مشخصات دیگری را انتخاب کنید")
                        }
                    })

            </script>
        @endif

        <script>
            var open=true;
            if(jQuery(".descriptio-product-tab >div:not(.grwwgw)").height()<340){
                document.querySelector(".open-product-desc").style.cssText="display:none";
                jQuery(".descriptio-product-tab").addClass("open");
            }
            jQuery(".open-product-desc").click(function(){
                if(open){
                    document.querySelector(".descriptio-product-tab").style.cssText="height:"+jQuery(".descriptio-product-tab >div:not(.grwwgw)").height()+"px";
                    jQuery(".descriptio-product-tab").addClass("open");
                    document.querySelector(".open-product-desc").innerHTML="بستن";
                } else{
                    document.querySelector(".descriptio-product-tab").style.cssText="height:339px";
                    document.querySelector(".open-product-desc").innerHTML="ادامه مطلب";

                    jQuery(".descriptio-product-tab").removeClass("open");
                }
                open=!open;
            })
        </script>
    @endpush
@endsection
