@extends('layouts.frontend.app')
@section('style')
    <!-- Primary Meta Tags -->
    <title>{{ $product->name }}</title>
    <meta property="og:title" content="{{ $product->name }}" />
    <meta property="og:description" content="The Best Shop In Myanmar. Let's shopping now." />

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="{{ request()->fullUrl() }}" />
    <meta property="og:title" content="{{ $product->name }}" />
    <meta property="og:description" content="The Best Shop In Myanmar. Let's shopping now." />
    <meta property="og:image" content="{{ $product->Photos[0]['name'] }}" />
@endsection
@section('content')
    <div class="page-wrapper">

        @include('layouts.frontend.header')

        <main class="main">

            <div class="page-content ">
                <div class="container">
                    <div class="product-details-top">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="product-gallery product-gallery-vertical">
                                    <div class="row">
                                        <figure class="product-main-image border text-center ">
                                            <img id="product-image"  src="{{$photo->first()}}" data-zoom-image="{{$photo->first()}}" alt="product image"  >
                                        </figure><!-- End .product-main-image -->

                                        <div id="product-zoom-gallery" class="product-image-gallery">
                                            @foreach($photo as $pto)
                                                <span class="product-gallery-item active border d-flex align-items-center justify-content-center "  data-image="assets/images/products/single/1.jpg" data-zoom-image="assets/images/products/single/1-big.jpg">
                                                    <img src="{{$pto}}"  alt="product side" onclick=showItem('{{$pto}}')>
                                                </span>
                                            @endforeach
                                        </div><!-- End .product-image-gallery -->
                                    </div><!-- End .row -->
                                </div><!-- End .product-gallery -->
                            </div><!-- End .col-md-6 -->

                            <div class="col-md-6 ">
                                <div class="product-details px-lg-5  ">
                                    <div class="d-flex justify-content-between align-items-center ">
                                        <div class="">
                                            <div class="d-flex justify-content-between  align-items-center mb-2  ">
                                                <h1 class="product-title mr-5 mb-0 ">{{$product->name}}</h1><!-- End .product-title -->
                                                <div class=" ml-5 flex-grow-1 bg-dark px-3 text-white stock {{ $product->stock == 1 ?   'd-none' : '' }}">
                                                    Out of Stock
                                                </div>
                                            </div>
                                            <!-- End .product-price -->
                                            <div class="product-price">
                                                <span class="price me-3  ">{{ number_format(\App\Models\ProductVariation::where('product_id',$product->id)->get()[0]->price,0) }}</span> <span class="mx-3">MMK</span>

                                                (<span class="discount ">{{\App\Models\ProductVariation::where('product_id',$product->id)->get()[0]->discount ?? 0 }}</span> % OFF)

                                            </div>

                                        </div>
                                        @if($product->stock>0)
                                            <img src="{{ $product->Brand->photo }}" width="100"  alt="">
                                        @endif
                                    </div>


                                    <div class="">
                                        <table class="table table-borderless mb-0 border-0  ">
                                            <tr class=" ">
                                                <td class="py-3  border-0  text-start">Category </td>
                                                <td class="py-3  border-0  text-right">  {{ $product->Category->name ?? '' }}  </td>
                                            </tr>
                                            <tr class=" ">
                                                <td class="py-3  border-0  text-start">Brand </td>
                                                <td class="py-3  border-0  text-right">
                                                    {{ $product->Brand->name ?? '' }}
                                                </td>
                                            </tr>
                                            <tr class=" ">
                                                <td class="py-3  border-0  text-start">Sub Category </td>
                                                <td class="py-3  border-0  text-right">  {{ $product->SubCategory->name ?? '' }}  </td>
                                            </tr>
                                            <tr class=" ">
                                                <td class="py-3  border-0  text-start">Type </td>
                                                <td class="py-3  border-0  text-right">  {{ $product->Type->name ?? '' }}  </td>
                                            </tr>


                                        </table>

                                    </div><!-- End .product-details-footer -->
                                    <div class="size-container ui-field-contain mt-3  row justify-content-between align-items-center ">
                                       <div class="d-flex align-items-center ">
                                          <div class="">
                                              <div class="fw-bold text-primary mr-3 ">Size </div>
                                          </div>
                                           <select class="form-control  size" aria-label="Default select example">
                                               @foreach($variation as $pv)
                                                   <option value="{{$pv->id}}">{{$pv->size}}</option>
                                               @endforeach
                                           </select>
                                       </div>

                                        <div class="flex-column">
                                            <div class="d-flex justify-content-between align-items-center ">
                                                <label for="" class="fw-bold text-primary mr-3">Price </label>
                                                <span><i class="price">{{ number_format($variation[0]->price) }}</i> MMK</span>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center ">
                                                <label for="" class="fw-bold text-primary mr-3">Discount Price  </label>
                                                <span><i class="discount_price">{{ number_format($variation[0]->discount_price) }}</i> MMK</span>
                                            </div>
                                        </div>
                                    </div>
                                    @if($product->stock>0)
                                    <div class="product-details-action mt-5">
{{--                                        <a href="{{route('add.to.cart',$product->id)}}" class="btn-product btn-cart"><span>add to cart</span></a>--}}
                                        <button class="btn-product btn-cart atc border-0" data-id="{{$product->id}}"><span>add to cart</span></button>
                                    </div><!-- End .product-details-action -->
                                    @else
                                    @endif

                                    @if($discount)
                                        <div class="text-right mt-3 ">
                                            <small class="text-primary  px-3 py-1 border "> {{ $discount->name}}</small>
                                            <small class="text-primary  px-3 py-1 border "> {{ $discount->discount }} % DISCOUNT</small>
                                            <img src="{{ asset('storage/discount_photos/'.$discount->image) }}" class="my-4" alt="">
                                        </div>
                                    @endif

                                </div><!-- End .product-details -->
                            </div><!-- End .col-md-6 -->
                        </div><!-- End .row -->
                    </div><!-- End .product-details-top -->

{{--                    <div class="product-details-tab">--}}
{{--                        <ul class="nav nav-pills justify-content-center" role="tablist">--}}
{{--                            <li class="nav-item">--}}
{{--                                <a class="nav-link active" id="product-desc-link" data-toggle="tab" href="#product-desc-tab" role="tab" aria-controls="product-desc-tab" aria-selected="true">Detail</a>--}}
{{--                            </li>--}}
{{--                        </ul>--}}
{{--                        <div class="tab-content">--}}
{{--                            <div class="tab-pane fade show active" id="product-desc-tab" role="tabpanel" aria-labelledby="product-desc-link">--}}
{{--                                <div class="product-desc-content">--}}
{{--                                    <h3>{{$product->name}}</h3>--}}
{{--                                    <p>{{$product->detail}}</p>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}

                    <h2 class="title text-center mb-4">You May Also Like</h2><!-- End .title text-center -->
                    <div class="d-flex justify-content-center flex-wrap">
                        @foreach($relatedProducts as $p)
                            <div class="col-6 col-md-4 col-lg-2 col-xl-2 mt-3 ml-lg-5">
                                <div class="product product-7 text-center">
                                    <figure class="product-media">
                                        <a href="{{route('detail',$p->id)}}">
                                            <img src="{{\App\Models\ProductPhoto::where('product_id',$p->id)->pluck('name')->first()}}" alt="Product image" id="product-image" class="product-image">
                                        </a>

                                        @if($p->stock <1)
                                            <span class="px-2 text-white bg-darl">Out Of Stock</span>
                                        @endif
                                            <div class="product-action">
                                                <a href="{{route('detail',$p->id)}}" class="btn-product btn-cart"><span>View Detail</span></a>

                                            </div><!-- End .product-action -->
                                    </figure><!-- End .product-media -->

                                    <div class="product-body">
                                        <div class="product-cat">
                                            <a href="#">{{$product->Category->name ?? '-' }}</a>
                                        </div><!-- End .product-cat -->
                                        <h3 class="product-title my-3 "><a href="">{{$p->name ?? ''}}</a></h3><!-- End .product-title -->
                                        <div class="product-price " style="{{ $p->variations[0]['discount'] != 0 ? ' text-decoration: line-through;font-size:12px' : '' }}">
                                            {{number_format($p->variations[0]['price'],0)}} MMK
                                        </div>
                                        @if($p->variations[0]['discount'] != 0)
                                            <div class="product-price">
                                                {{number_format($p->variations[0]['discount_price'],0)}} MMK
                                            </div>
                                            <span class="small">({{ $p->variations[0]['size'] }})</span>
                                        @endif
                                        <!-- End .product-price -->
{{--                                        <div class="ratings-container">--}}
{{--                                            <div class="ratings">--}}
{{--                                                <div class="ratings-val" style="width: 20%;"></div><!-- End .ratings-val -->--}}
{{--                                            </div><!-- End .ratings -->--}}
{{--                                            <span class="ratings-text">( 2 Reviews )</span>--}}
{{--                                        </div><!-- End .rating-container -->--}}
                                        @php
                                            $photos=\App\Models\ProductPhoto::where('product_id',$p->id)->get()->take(3);
                                        @endphp
                                        <div class="product-nav product-nav-thumbs">
                                            @foreach($photos as $index=>$pto)
                                                <a href="#" class="active p-2 ">
                                                    <img src="{{$pto->name}}"  alt="product desc" id='p{{$index}}' onclick=showItem('{{$pto->name}}')>
                                                </a>
                                            @endforeach

                                        </div><!-- End .product-nav -->
                                    </div><!-- End .product-body -->
                                </div><!-- End .product -->
                            </div><!-- End .col-sm-6 col-lg-4 col-xl-3 -->
                        @endforeach
                    </div>

                </div><!-- End .container -->
            </div><!-- End .page-content -->
        </main><!-- End .main -->

        @include('layouts.frontend.footer')
    </div><!-- End .page-wrapper -->
    <button id="scroll-top" title="Back to Top"><i class="icon-arrow-up"></i></button>

    <!-- Mobile Menu -->
    @include('partials.login_modal')
@endsection
@section('script')
    <script>

        let showItem=(photo)=>{
            console.log(photo)
            document.getElementById('product-image').src=photo;
        }

        $(document).on('click','.atc',function(){
            let id = $(this).data('id');
            let size=$('.size').find(":selected").val()
            $.ajax({
                type: "get",
                dataType: "json",
                url: '/add-to-cart',
                data: {'id': id,'size':size},
                success: function(data){
                    console.log(data)
                    $('.cart-count').text(data[0])
                    let ele='';
                    let total=0;
                    $.each(data[1],(key,v)=>{
                        $.each(v,(k,val)=>{
                            let sub=val['quantity']*val['price'];
                            total+=sub;
                            ele+=`<div class="product">
                                        <div class="product-cart-details">
                                            <h4 class="product-title">
                                                <a href="#">${val['name']}</a>
                                            </h4>

                                            <span class="cart-product-info">
                                                <span class="cart-product-qty">${val['quantity']}</span>
                                                x ${val['price']}
                        </span>
                    </div><!-- End .product-cart-details -->

                    <figure class="product-image-container">
                        <a href="#" class="product-image-cart">
                        <img src="${val['photo']}" alt="product" width="100%" height="50px">
                        </a>
                    </figure>
 <a href="#" class="btn-remove" title="Remove Product"><i class="icon-close"></i></a>
                        </div>`
                        })

                    });

                    $('.dropdown-cart-products').html(ele)
                    $('.cart-total').text(total)
                }
            });
        })

            $(document).on('change', '.size', function(){
                var size=parseInt($(this).find(":selected").val())
                var pid={{(int)$product->id}};
                var price_col=$('.price');
                $.ajax({
                    url: "{{ route('change.size') }}",
                    data: {'size':size,'pid':pid},
                    type: 'get',
                    success: function (response) {
                        // console.log(response)
                        if(response.data['stock'] === 1){
                            $('.stock').addClass('d-none');
                            $('.atc').removeClass('d-none');
                        }else {
                            $('.stock').removeClass('d-none');
                            $('.atc').addClass('d-none');
                        }

                        price_col.text(response.data['price'].toLocaleString())
                        $('.discount_price').text(response.data['discount_price'].toLocaleString());
                        $('.discount').text(response.data['discount'])
                    }
                });

            })
    </script>


@endsection