@extends('web.layouts.layout')
@section('content')

    <main>
        <!-- Start section -->
        <section class="bread_sec">
            <div class="container">
                <div class="d-flex flex-wrap">
                    <a href="{{route('home')}}" class="item">{{__('web.home')}}</a>
                    <a href="{{route('filter',$category->id)}}" class="item">{{$category->name}}</a>
                    <span class="item">{{$title}}</span>
                </div>
            </div>
        </section>

        <section class="product_det section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="swiper_box overflow_hidden">
                            <div class="swiper mySwiper2 lg-slide-swiper mb-4" id="slider">
                                <div class="swiper-wrapper">
                                    @if($product->video && $product->video_image)
                                        <div class="swiper-slide">
                                            <div class="img-box">
                                                <img src="{{$product->video_image}}" alt="" class="lg-img"/>
                                                <a class="button is-play" data-fancybox href="{{$product->video}}">
                                                    <div class="button-outer-circle has-scale-animation"></div>
                                                    <div class="button-outer-circle has-scale-animation has-delay-short"></div>
                                                    <div class="button-icon is-play">
                                                        <svg height="100%" width="100%" fill="#fff"><polygon class="triangle" points="5,0 30,15 5,30" viewBox="0 0 30 15"></polygon><path class="path" d="M5,0 L30,15 L5,30z" fill="none" stroke="#fff" stroke-width="1"></path></svg>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                    @endif
                                    @foreach($images as $key => $image)
                                        <div class="swiper-slide {{$key}}">
                                            <div class="img-box">
                                                <img src="{{$image}}" alt="" class="lg-img"/>
                                            </div>
                                        </div>
                                    @endforeach
                                    
                                    <div class="swiper-slide h-auto">
                                        <!--3d modal-->
                                        <div id="modal-wrapper" class="modal-3d d-flex align-items-center h-100">
                                            <div class="w-100">
                                                <!-- <span onClick="document.getElementById('modal-wrapper').style.display='none'" class="close">&times;</span> -->
                                                <div class="rotation">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/2.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/3.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/4.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/5.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/6.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/7.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/8.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/9.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/10.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/11.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/12.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/13.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/14.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/15.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/16.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/17.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/18.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/19.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/20.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/21.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/22.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/23.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/24.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/25.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/26.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/27.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/28.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/29.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/30.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/31.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/32.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/33.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/34.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/35.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/36.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/37.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/38.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/39.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/40.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/41.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/42.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/43.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/44.png">
                                                    <img src="https://citybike.omar.alyomhost.org/assets/web/images/3d-imgs/45.png">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                </div>
                            </div>
                            <div thumbsSlider="" class="swiper mySwiper sm-slide-swiper">
                                <div class="swiper-wrapper pb-3">
                                    @if($product->video && $product->video_image)
                                        <div class="swiper-slide" >
                                            <img src="{{asset($product->video_image)}}" alt="" class="sm-bg-header"/>
                                        </div>
                                    @endif
                                    @foreach($images as $key => $image)
                                        <div class="swiper-slide" id="{{$key}}">
                                            <img src="{{$image}}" alt="" class="sm-bg-header"/>
                                        </div>
                                    @endforeach
                                    <div class="swiper-slide">
                                        <img src="https://citybike.omar.alyomhost.org/assets/web/images/360-degrees.png" alt="" class="sm-bg-header p-3"/>
                                    </div>
                                </div>
                            </div>
                          
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="text_box my-4">
                            @if($product->brand_id)
                                <a href="{{route('search').'?brand='.$product->brand_id}}" class="categ_name text-capitalize mb-3 d-block fw-bold color-gray2">
                                    <img src="{{asset($product->brand->image)}}" class="icon me-2 icon-18" alt=""/> {{$product->brand->descriptions()->name}}
                                </a>
                            @endif
                            <div class="in-flex mb-3">
                                <div class="txt">
                                    <h3 class="title fw-bold ">
                                        {{$product->name}}
                                    </h3>
                                    <h6 class="color-gray2 fw-bold ">
                                        {{$category->name}} @isset($sub_category)- {{$sub_category->name}} @endisset
                                    </h6>
                                </div>

                                <div class="share_box">
                                    <button class="share_butn"><i class="fas fa-share me-1"></i> {{ __('web.share') }}</button>
                                    <div class="share_links d-flex">
                                        <!-- ShareThis BEGIN --><div class="sharethis-inline-share-buttons"></div><!-- ShareThis END -->
                                    </div>
                                </div>
                            </div>
                            <div class="rating">
                                @for($i = 0;$i<$product->rate['rate'];$i++)
                                <i class="fas fa-star active"></i>
                                @endfor
                                @for($i = 0;$i< (5 - $product->rate['rate']);$i++)
                                    <i class="fas fa-star"></i>
                                @endfor
                                <span class="rate_num ms-2">{{$product->rate['count']}} {{__('web.rate')}} </span>
                                
                                  <span class="sold_prods rate_num ms-3">
                                    {{ __('web.product_sold') }} : 
                                    <b class="color-primary">{{$product->sold}} {{ __('web.times') }}</b>
                                </span>
                            </div>
                            <div class="prices d-flex mt-4">
                                <b class="color-primary me-3">@include('web.pages.components.product.price')</b>
                            </div>
                            <div class="det_box mt-3">
                                <p class="prod_data mb-1" id='productCode'>
                                    @if($product->code)
                                        <b>   {{ __('web.product_code') }} :</b> {{$product->code}}
                                    @endif
                                </p>
                                @foreach($one_services as $service)
                                    <p class="prod_data mb-1">
                                        <b>   {{$service->attribute->descriptions()->name}} :</b>  {{$service->choice->descriptions()->name}}
                                    </p>
                                @endforeach
                                <p class="prod_data mb-1 " id="product_count" @if($multi_services) style="display: none" @endif>
                                    <b> {{ __('web.quantity_available') }}  :</b> <span class="color-primary">{{$count}} {{ __('web.pieces') }}</span>
                                </p>
                            </div>
                            <form method="post" action="{{route('product.cart',$product->id)}}" onsubmit="addToCart(this)">
                                @CSRF
                                @if($multi_services)
                                    <div class="form_box mt-4">
                                        <div class="color_box mb-3">
                                            <h5 class="label fw-bold mb-3">{{$multi_services->attribute->descriptions()->name}}</h5>
                                            <div class="color_radios d-flex flex-wrap">
                                                @foreach($multi_services->choices as $key=>$choice)
                                                    @if($choice->statusChoice() == 'one')
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio" data-id="{{$multi_services->id}}"  @if($choice->count == 0) disabled @else name="choice_id" @endif value="{{$choice->id}}"  onclick="showSubService(this);showImage(this);showCount(this)" id="colorRadio{{$choice->id}}">
                                                            <label class="form-check-label img_label" for="brandRadio{{$choice->id}}">
                                                                <!--{{$choice->choice->descriptions()->name}}-->
                                                                <div class="sm_img">
                                                                    <img src="{{asset($choice->image)}}" alt="">
                                                                </div>
                                                            </label>
                                                        </div>
                                                    @else
                                                        @if($choice->hasChoices()['status'])
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="radio" data-id="{{$multi_services->id}}"  @if($choice->hasChoices()['count'] == 0) disabled @else name="solid" @endif value="{{$choice->id}}"  onclick="showSubService(this);showImage(this);showCode(this)" code-id="" id="colorRadio{{$choice->id}}">
                                                                <label class="form-check-label img_label" for="brandRadio{{$choice->id}}">
                                                                    <!--{{$choice->choice->descriptions()->name}}-->
                                                                    <div class="sm_img">
                                                                        <img src="{{asset($choice->image)}}" alt="">
                                                                    </div>
                                                                </label>
                                                            </div>
                                                        @endif
                                                    @endif
                                                @endforeach
                                            </div>
                                        </div>

                                        @if($multi_services->subService)
                                            <div class="color_box ">
                                                <h5 class="label fw-bold mb-3">{{$multi_services->subService->attribute->descriptions()->name}}</h5>
                                                <div class="color_radios size_radios d-flex flex-wrap" id="choices">

                                                </div>
                                            </div>
                                        @endif

                                    </div>
                                @endif
                                <div class="in-flex flex-wrap pt-4 px-1">
                                <div class="">
                                    <div class="d-flex align-items-center">
                                        <h5 class="label fw-bold mb-0 me-3">{{ __('web.quantity') }}</h5>
                                        <div class="quantity-container">
                                            <div class="add-more">
                                                <span class="qt-minus"><i class="fas fa-minus"></i></span>
                                                <input type="number" name="count" min="1" class="qt" value="1">
                                                <span class="qt-plus"><i class="fas fa-plus"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                    @if(!is_null($count))
                                        @if($count == 0)
                                            <p class="qty_alert small mt-2 mb-0 fw-bold color-gray2">
                                                <span class="text-danger"><i class="fas fa-exclamation-triangle me-1"></i></span> {{ __('web.sold_out') }}
                                            </p>
                                        @endif
                                    @endif
                                </div>

                                <div class="butns d-flex align-items-center">
                                    <button type="submit" class="butn primary_butn cart_butn mx-1">
                                        <i class="fas fa-cart-shopping"></i> {{ __('web.add_to_cart') }}
                                    </button>
                                    <a style="cursor: pointer" onclick="favorite(this)" data-id="{{$product->id}}" class="butn primary_butn sm_butn fav_butn mx-1 rounded-circle @if($product->favorited()) active @endif">
                                        <i class="fas fa-heart mx-0"></i>
                                    </a>
                                </div>
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="product_det_inner mt-5 pt-5">
                    <ul class="nav nav-pills mb-0" id="pills-tab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="pills-tab1-tab" data-bs-toggle="pill" data-bs-target="#pills-tab1" type="button" role="tab" aria-controls="pills-tab1" aria-selected="true">
                                {{ __('web.product_details') }}
                            </button>
                        </li>
                        
                        @if(($product->category->size_status == 'true') && $product->image_size)
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="pills-tab2-tab" data-bs-toggle="pill" data-bs-target="#pills-tab2" type="button" role="tab" aria-controls="pills-tab2" aria-selected="false">
                                    {{ __('web.product_size_image') }}
                                </button>
                            </li>
                        @endif
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pills-tab3-tab" data-bs-toggle="pill" data-bs-target="#pills-tab3" type="button" role="tab" aria-controls="pills-tab3" aria-selected="false">
                                {{ __('web.customer_reviews') }}
                            </button>
                        </li>
                    </ul>
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-tab1" role="tabpanel" aria-labelledby="pills-tab1-tab">
                            <div class="tab_wrapper">
                                <h6 class="fw-bold mb-3"> {{ __('web.product_details') }}</h6>
                                <p class="p mb-0">
                                    {!! $product->description !!}
                                </p>
                            </div>
                        </div>
                        @if(($product->category->size_status == 'true') && $product->image_size)
                            <div class="tab-pane fade" id="pills-tab2" role="tabpanel" aria-labelledby="pills-tab2-tab">
                                <div class="tab_wrapper">
                                    <img src="{{asset($product->image_size)}}" class="sec_img"/>
                                </div>
                            </div>
                        @endif
                        <div class="tab-pane fade" id="pills-tab3" role="tabpanel" aria-labelledby="pills-tab3-tab">
                            <div class="tab_wrapper">
                                @if(count($rates) == 0)
                                    <div class="row justify-content-center">
                                        <div class="col-lg-7">
                                            <div class="alert alert-light py-4 text-center" role="alert">
                                                {{__('web.not_exist_reviews')}}
                                            </div>
                                        </div>
                                    </div>
                                @else
                                    @foreach($rates as $row)
                                        <div class="review_item">
                                            <div class="prof_data d-flex align-items-center mb-3">
                                                <img src="{{$row->user_image}}" class="avatar" alt=""/>
                                                <div class="txt">
                                                    <h6 class="name fw-bold mb-1">{{$row->name}}</h6>
                                                    <div class="rating">
                                                        @for($i=0;$i<$row->rate;$i++)
                                                        <i class="fas fa-star active"></i>
                                                        @endfor
                                                        @for($i=0;$i< (5 - $row->rate) ;$i++)
                                                            <i class="fas fa-star"></i>
                                                        @endfor
    
    
                                                        <span class="date ms-2">{{$row->date}}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <p class="review_det">
                                                {!! $row->comment !!}
                                            </p>
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Start section -->
        @if(count($related_products) > 0)
            <section class="products_sec section border-top">
                <div class="container">
                    <h2 class="sec_title text-uppercase color-primary fw-bold text-center mb-5">
                        {{ __('web.related_products') }}
                        <img src="{{url('')}}/assets/web/images/title_line.svg" class="d-block m-auto" alt=""/>
                    </h2>
                    <div class="swiper-container products_swiper">
                        <div class="swiper-wrapper justify-content-center">
                            @foreach($related_products as $row)
                                <div class="swiper-slide">
                                    @include('web.pages.components.product.product',['product'=>$row])
                                </div>
                            @endforeach
                        </div>
    
                    </div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </section>
        @endif

    <!-- Start section -->
        @include('web.layouts.newsletter')
    </main>
@section('inject_js')
    <script>
        var url_fetch_subAttrProduct = "{{route('fetch.subAttrProduct')}}"
        var url_fetch_showCount = "{{route('fetch.showCount')}}"
        function showCount(elem)
        {
            let choice = $(elem).val();
            $.ajax
            ({
                url : url_fetch_showCount,
                type: 'GET',
                data: 'choice_id='+choice,
                success:function(data)
                {
                    if(data != 0 || data != '')
                    {
                        $('#product_count').html(data);
                        $('#product_count').show();
                    }
                }
            })
        }
        function showCode(elem)
        {
            $('#productCode').html('')
            let code = $(elem).attr('code-id');
            if(code != '')
            {
                $('#productCode').html('<b> {{ __("web.product_code") }} :</b> '+code);
            }
        }
        function showSubService(elem)
        {
            let choice = $(elem).val();
            let attribute = $(elem).attr('data-id');
            $('#product_count').hide();
            $.ajax
            ({
                url : url_fetch_subAttrProduct,
                type: 'GET',
                data: 'attribute_id='+attribute+'&choice_id='+choice,
                success:function(data)
                {
                    $('#choices').html(data);
                }
            })
        }
        function addToCart(elem)
        {
            event.preventDefault();
            var action = $(elem).attr('action');
            var method = $(elem).attr('method');
            if(method == 'GET')
            {
                var dataform = $(elem).serialize();
            }
            else
            {
                var dataform = new FormData( $(elem)[0]);
            }

            $.ajax
            ({
                url : action,
                type: method,
                data: dataform,
                dataType:'json',
                contentType: false,
                processData: false,
                success:function(data)
                {
                    if('data' in data)
                    {
                        $('#cart_count').html(data.data.count);
                        if(data.data.count > 0)
                        {
                            $('#cart_count').show();
                        }
                        else
                        {
                            $('#cart_count').hide();
                        }
                        calculateCart();
                        toasterSuccess(data.message);

                    }
                    else
                    {
                        toasterError(Object.values(data.errors)[0]);
                    }
                }
                ,error:function(data)
                {
                    toasterError(Object.values(data.responseJSON.errors)[0]);
                }
            })
        }
    </script>
    <script>
        var swiper = new Swiper(".sm-slide-swiper", {
            // loop: true,
            slidesPerView: 6,
            spaceBetween: 5,
            freeMode: true,
            watchSlidesProgress: true,
        });
        var swiper2 = new Swiper(".lg-slide-swiper", {
            // loop: true,
            // effect: 'fade',
            spaceBetween: 10,
            // autoplay: {
            //     delay: 2500,
            // },
            thumbs: {
                swiper: swiper,
            },
            allowTouchMove: false,
        });
    </script>
    
    <script>
        $(".qt-plus").click(function() {
            $(this).parent().children(".qt").val(parseInt($(this).parent().children(".qt").val()) + 1);
        });
        
        $(".qt-minus").click(function() {
        
            child = $(this).parent().children(".qt");
        
            if (parseInt(child.val()) > 1) {
                child.val(parseInt(child.val()) - 1);
            }
        
            $(this).parent().children(".full-price").addClass("minused");
        
        });
        function showImage(elem)
        {
            let data = $(elem).val()
            let slideIndex = $('#slider').find('.attribute_' + data).index();
            console.log(slideIndex)
            swiper2.slideTo(slideIndex);
        }
    </script>
    
@endsection
@stop
