@extends('layouts.app')
@section('content')
<!-- breadcrumb -->

@section('meta')
    <meta property="og:title" content="{{ $product_query->name }}" />
    <meta property="og:description" content="{{ Str::limit(strip_tags($product_query->description), 150) }}" />
    <meta property="og:image" content="{{url('storage/admin/shop-bo/'.$product_query->images[0]->image)}}" />
    <meta property="og:url" content="{{route('shop.product.view',['id'=>Crypt::encrypt($product_query->id)])}}" />
    <meta property="og:type" content="product" />
@endsection


<div class="tf-breadcrumb">
    <div class="container">
        <div class="tf-breadcrumb-wrap d-flex justify-content-between flex-wrap align-items-center">
            <div class="tf-breadcrumb-list">
                <a href="javascript:void(0)" class="text">Home</a>
                <i class="icon icon-arrow-right"></i>
                <a href="#" class="text">{{$product_query->categories[0]->name}}</a>
                <i class="icon icon-arrow-right"></i>
                <span class="text">{{$product_query->name}}</span>
            </div>
        </div>
    </div>
</div>
<!-- /breadcrumb -->
<!-- default -->

<section class="flat-spacing-4 pt_0">
    <div class="tf-main-product section-image-zoom">
        <div class="container">
            <form class="add-to-cart-form" method="POST">
                @csrf
                @honeypot
                <input type="hidden" name="product_id" value="{{Crypt::encrypt($product_query->id)}}">
                <div class="row">
                    <div class="col-md-6">
                        <div class="tf-product-media-wrap sticky-top">
                            <div class="thumbs-slider">
                                <div dir="ltr" class="swiper tf-product-media-thumbs other-image-zoom" data-direction="vertical">
                                    <div class="swiper-wrapper stagger-wrap">
                                        @foreach($product_query->images as $product_image)
                                        <div class="swiper-slide stagger-item" data-color="beige">
                                            <div class="item">
                                                <img class="lazyload" data-src="{{url('storage/admin/shop-bo/'.$product_image->image)}}" src="{{url('storage/admin/shop-bo/'.$product_image->image)}}" alt="{{$product_query->name}}">
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                                <div dir="ltr" class="swiper tf-product-media-main" id="gallery-swiper-started">
                                    <div class="swiper-wrapper" >
                                        <!-- beige -->

                                        @foreach($product_query->images as $product_image)
                                        <div class="swiper-slide" data-color="beige">
                                            <a href="{{url('storage/admin/shop-bo/'.$product_image->image)}}" target="_blank" class="item" data-pswp-width="770px" data-pswp-height="1075px">
                                                <img class="tf-image-zoom lazyload" data-zoom="{{url('storage/admin/shop-bo/'.$product_image->image)}}" data-src="{{url('storage/admin/shop-bo/'.$product_image->image)}}" src="{{url('storage/admin/shop-bo/'.$product_image->image)}}" alt="{{$product_query->name}}">
                                            </a>
                                        </div>
                                        @endforeach
                                    </div>
                                    <div class="swiper-button-next button-style-arrow thumbs-next"></div>
                                    <div class="swiper-button-prev button-style-arrow thumbs-prev"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="tf-product-info-wrap position-relative">
                            <div class="tf-zoom-main"></div>
                            <div class="tf-product-info-list other-image-zoom">
                                <div class="tf-product-info-title">
                                    <h5>{{$product_query->name}}</h5>
                                </div>
                                <div class="tf-product-info-price">
                                    <div class="price">₱{{number_format($product_query->prices[0]->price,2)}}</div>
                                </div>
                                <div class="tf-product-info-variant-picker">
                                    @foreach($product_query->attributes as $attribute)
                                        @if($attribute->name!="No Attribute")
                                        <div class="variant-picker-item">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div class="variant-picker-label">
                                                    {{$attribute->name}}: <span class="fw-6 variant-picker-label-value">{{$attribute->attribute_values[0]->value}}</span>
                                                </div>
                                            </div>
                                            <div class="variant-picker-values">
                                                @foreach($attribute->attribute_values as $attribute_key => $attribute_value)
                                                <input type="radio" class="product-attribute" data-attribute-value="{{$attribute_value->value}}" name="attribute_values_ids[{{strtolower($attribute->name)}}]"
                                                id="values-{{strtolower($attribute->name)}}-{{strtolower($attribute_value->value)}}" value="{{Crypt::encrypt($attribute_value->id)}}" {{$attribute_key == 0 ? 'checked' : ''}}>
                                                <label class="style-text" for="values-{{strtolower($attribute->name)}}-{{strtolower($attribute_value->value)}}" >
                                                    <p>{{$attribute_value->value}}</p>
                                                </label>
                                                @endforeach
                                            </div>
                                        </div>
                                        @endif
                                    @endforeach
                                </div>
                                <div class="tf-product-info-quantity">
                                    <div class="quantity-title fw-6">Quantity</div>
                                    <div class="wg-quantity">
                                        <span class="btn-quantity btn-decrease">-</span>
                                        <input type="text" class="quantity-product" name="quantity" value="1" data-product-price="{{$product_query->prices[0]->price}}" data-add-to-cart-target="product-{{$product_query->sku}}">
                                        <span class="btn-quantity btn-increase">+</span>
                                    </div>
                                </div>

                                <div class="tf-product-info-buy-button">
                                    <button id="product-{{$product_query->sku}}" class="add-to-cart tf-btn btn-fill justify-content-center fw-6 fs-16 flex-grow-1 animate-hover-btn btn-add-to-cart" >
                                        <span>Add to cart -&nbsp;</span><span class="tf-qty-price total-price price-display" id="price-display">₱{{number_format($product_query->prices[0]->price,2)}}</span>
                                    </button>
                                </div>

                                <a href="https://www.facebook.com/sharer/sharer.php?u={{route('shop.product.view',['id'=>Crypt::encrypt($product_query->id)])}}">share</a>
                                <div class="tf-product-info-delivery-return">
                                    <div class="row">
                                        <div class="col-xl-6 col-12">
                                            <div class="tf-product-delivery">
                                                <div class="icon">
                                                    <i class="icon-delivery-time"></i>
                                                </div>
                                                <p>Estimate delivery times: <span class="fw-7">12-26 days</span> (International), <span class="fw-7">3-6 days</span> (United States).</p>
                                            </div>
                                        </div>
                                        <div class="col-xl-6 col-12">
                                            <div class="tf-product-delivery mb-0">
                                                <div class="icon">
                                                    <i class="icon-return-order"></i>
                                                </div>
                                                <p>Return within <span class="fw-7">30 days</span> of purchase. Duties & taxes are non-refundable.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>
<!-- /default -->
<!-- tabs -->
<section class="flat-spacing-17 pt_0">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="widget-tabs style-has-border">
                    <ul class="widget-menu-tab">
                        <li class="item-title active">
                            <span class="inner">Description</span>
                        </li>
                        <li class="item-title">
                            <span class="inner">Additional Information</span>
                        </li>
                    </ul>
                    <div class="widget-content-tab">
                        <div class="widget-content-inner active">
                            <div class="">
                                <p class="mb_30">
                                    {{$product_query->description}}
                                </p>
                            </div>
                        </div>
                        <div class="widget-content-inner">
                            <table class="tf-pr-attrs">
                                <tbody>
                                    <tr class="tf-attr-pa-color">
                                        <th class="tf-attr-label">Color</th>
                                        <td class="tf-attr-value">
                                            <p>White, Pink, Black</p>
                                        </td>
                                    </tr>
                                    <tr class="tf-attr-pa-size">
                                        <th class="tf-attr-label">Size</th>
                                        <td class="tf-attr-value">
                                            <p>S, M, L, XL</p>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="flat-spacing-1 pt_0">
    <div class="container">
        <div class="flat-title">
            <span class="title">Related Products</span>
        </div>
        <div class="hover-sw-nav hover-sw-2">
            <div dir="ltr" class="swiper tf-sw-product-sell wrap-sw-over" data-preview="4" data-tablet="3"
                data-mobile="2" data-space-lg="30" data-space-md="15" data-pagination="2" data-pagination-md="3"
                data-pagination-lg="3">
                <div class="swiper-wrapper">

                    @foreach($related_products as $rp)
                    <div class="swiper-slide" lazy="true">
                        <div class="card-product">
                            <div class="card-product-wrapper">
                                <a href="{{route('shop.product.view',['id'=>Crypt::encrypt($rp->id)])}}" class="product-img">
                                    <img class="lazyload img-product" data-src="{{url('storage/admin/shop-bo/'.$rp->image)}}"
                                        src="{{url('storage/admin/shop-bo/'.$rp->image)}}" alt="image-product">
                                    <img class="lazyload img-hover" data-src="{{url('storage/admin/shop-bo/'.$rp->image)}}"
                                        src="{{url('storage/admin/shop-bo/'.$rp->image)}}" alt="image-product">
                                </a>
                            </div>
                            <div class="card-product-info">
                                <a href="{{route('shop.product.view',['id'=>Crypt::encrypt($rp->id)])}}" class="{{$rp->name}}">{{$rp->name}}</a>
                                <span class="price">₱{{number_format($rp->prices->first()->price,2)}}</span>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            <div class="nav-sw nav-next-slider nav-next-product box-icon w_46 round"><span
                    class="icon icon-arrow-left"></span></div>
            <div class="nav-sw nav-prev-slider nav-prev-product box-icon w_46 round"><span
                    class="icon icon-arrow-right"></span></div>
            <div class="sw-dots style-2 sw-pagination-product justify-content-center"></div>
        </div>
    </div>
</section>


<!-- /tabs -->
@endsection
@section('page_script')
@parent
<script>



    var prices          = {
        @foreach($product_query->prices as $price)
            "{{$price->attribute_value->value}}" : {{$price->price}},
        @endforeach
    }

    $(".variant-picker-item input").on("click",function(){
        let attribute_value         = $(this).data("attribute-value");
        let price                   = prices[attribute_value];
        if(price == undefined){
            return;
        }

        let current_quantity        = $('.quantity-product').val()
        let total_price             = price * current_quantity;

        $('.quantity-product').data('product-price',price)
        $(".total-price").text("₱" + total_price.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ","));
    });
    $(".btn-increase").on("click", function () {
        let quantityInput       = $(this).siblings('.quantity-product');
        let currentQuantity = parseInt(quantityInput.val());
        quantityInput.val(currentQuantity + 1);
        updateTotalPrice(this,quantityInput.val());
    });

    $(".btn-decrease").on("click", function () {
        let quantityInput       = $(this).siblings('.quantity-product');
        let currentQuantity = parseInt(quantityInput.val());
        if (currentQuantity > 1) {
            quantityInput.val(currentQuantity - 1);
            updateTotalPrice(this,quantityInput.val());
        }
    });

    function updateTotalPrice(el,quantity) {
        let product_quantity_input      = $(el).siblings('.quantity-product')
        let product_price               = product_quantity_input.data('product-price');
        let add_to_cart_button          = $("#" + product_quantity_input.data('add-to-cart-target'))
        let totalPrice = product_price * quantity;
        $(".total-price").text("₱" + totalPrice.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ","));
    }
</script>
@endsection
<!-- App js -->