@extends('web.layouts.container')

@section('content')
    <div class="heading-pg">
        <div class="container">
            <div class="inner">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), route('home'), [], true)}}">{{__('main.home')}}</a></li>
                        {{--                        <li class="breadcrumb-item"><a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), route('product.index'), [], true)}}">{{__('products.head')}}</a></li>--}}
                        <li class="breadcrumb-item active" aria-current="page"> {{$products->name}} </li>
                    </ol>
                </nav>
            </div>
        </div>
        <img src="{{asset('assets/web/images/line-heading-pg.png')}}" alt="" class="line">
    </div>
    <section class="single-product">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="imgs-box">
                        <!-- Swiper -->
                        <div class="swiper-container gallery-top">
                            <div class="swiper-wrapper">
                                @if(count($products->images))
                                    @foreach($products->images as $image)
                                        <div class="swiper-slide" style="background-image:url({{getAgentPhotos($image)}})"></div>
                                    @endforeach
                                @endif
                            </div>
                            <!-- Add Arrows -->
                            <div class="swiper-button-next swiper-button-white"></div>
                            <div class="swiper-button-prev swiper-button-white"></div>
                        </div>
                        <div class="text d-none d-lg-block">
                            <p class="desc_prod mb-0">
                                {{$products->category_name}}
                            </p>
                            <div class="social-links">
                                <h5 class="my-4">{{__('products.share_on')}}</h5>
                                <a href="#0" class="clipboard">
                                    <i class="far fa-copy"></i>
                                </a>
                                <a target="_blank" href="http://twitter.com/share?text={{$products->name}}&url={{route('product.show', $products->id)}}&hashtags=hashtag1,hashtag2,hashtag3">
                                    <i class="fab fa-twitter"></i>
                                </a>
                                <a href="#" target="_blank" >
                                    <i class="fab fa-snapchat-ghost"></i>
                                </a>
                                <a href="#" target="_blank" >
                                    <i class="fab fa-whatsapp"></i>
                                </a>
                                <a href="javascript:window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(location.href),'sharewindow','width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=!');" >
                                    <i class="fab fa-facebook-f"></i>
                                </a>
                            <!--<div class="fb-share-button" data-href="{{route('product.show', $products->id)}}" data-layout="button" data-size="large">-->
                            <!--    <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u={{route('product.show', $products->id)}}/?hl=ar&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore"><i class="fab fa-facebook-f"></i></a>-->
                                <!--</div>-->
                            </div>
                        </div>
                        <div class="swiper-container gallery-thumbs mt-3">
                            <div class="swiper-wrapper">
                                @if(count($products->images))
                                    @foreach($products->images as $image)
                                        <div class="swiper-slide" style="background-image:url({{getAgentPhotos($image)}})"></div>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="product-details">
                        <h2 class="prod-name">{{$products->name}}</h2>
                        <div class="rate">
                            <i class="fas fa-star {{abs(round($products->evaluate_average)) >= 1 ? 'active' : ''}}"></i>
                            <i class="fas fa-star {{abs(round($products->evaluate_average)) >= 2 ? 'active' : ''}}"></i>
                            <i class="fas fa-star {{abs(round($products->evaluate_average)) >= 3 ? 'active' : ''}}"></i>
                            <i class="fas fa-star {{abs(round($products->evaluate_average)) >= 4 ? 'active' : ''}}"></i>
                            <i class="fas fa-star {{abs(round($products->evaluate_average)) >= 5 ? 'active' : ''}}"></i>
                            <span class="num_reviews"><small>({{$products->evaluate_count}} {{__('products.reviews')}})</small></span>
                        </div>
                        <h3 class="price"><b>{{$products->discount ?? $products->price}} </b><small>{{__('products.sar')}}</small></h3>
                        @isset($settings['show_added_value'])
                            <small class="price_note"> <i class="fas fa-info-circle mr-2"></i> {{__('products.price_include_added_Value')}} </small>
                        @endisset
                        <!--new-->
                            <div class="accordion mt-3 d-block d-lg-none" id="accordionExample">
                              <div class="bg-transparent">
                                <div class="" id="headingOne">
                                  <h2 class="mb-0">
                                    <button class="btn-block text-left border-0 fw-bold bg-transparent" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                      {{__('products.see_description')}}
                                    </button>
                                  </h2>
                                </div>

                                <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
                                  <p class="desc mt-2">{!! $products->description !!}</p>
                                </div>
                              </div>
                            </div>
                        <p class="desc d-none d-lg-block">{!! $products->description !!}</p>
                        <div class="row mt-5 pb-5 pt-4">
                            <div class="col-6">
                                <div class="select-color-container">
                                    @if(count($products->colors))
                                        <h6><b>{{__('products.pick_color')}}</b></h6>
                                        @foreach($products->colors as $color => $amount)
                                            <label class="color-container">
                                                <input data-slide="{{$loop->index}}" class="product_color" value="{{$color}}" type="radio" name="color">
                                                <span class="checkmark" style="background-color: {{$color}}"></span>
                                            </label>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                            {{--                            @if(!in_array($products->id, [3,4]))--}}
                            <div class="col-6">
                                <div class="quantity-container">
                                    <h6><b>{{__('products.pick_amount')}}</b></h6>
                                    <div class="add-more">
                                        <button class="qt-minus"><i class="fas fa-minus"></i></button>
                                        <span class="qt product_amount">1</span>
                                        <button class="qt-plus"><i class="fas fa-plus"></i></button>
                                    </div>
                                </div>
                            </div>
                            {{--                            @endif--}}

                        </div>
                        @if(auth()->check() && auth()->user()->role == 'user')
                        <div class="d-block d-lg-none add_cart_mob">
                            <a href="{{route('product.addToCart', $products->id)}}" class="main-btn add_to_cart_link text-uppercase">{{__('products.add_to_cart')}}</a>
                        </div>
                            @else
                            <div class="d-block d-lg-none add_cart_mob">
                                <a href="{{route('product.addToCartForGuest', $products->id)}}" class="main-btn add_to_cart_link text-uppercase">{{__('products.add_to_cart')}}</a>
                            </div>
                        @endif
                        <div class="">
                            {{--                            @if(!in_array($products->id, [3,4]))--}}
                            @if(auth()->check() && auth()->user()->role == 'user')
                                <a href="{{route('product.addToCart', $products->id)}}" class="main-btn add_to_cart_link text-uppercase d-none d-lg-block">{{__('products.add_to_cart')}}</a>
                            @else
                                <a href="{{route('product.addToCartForGuest', $products->id)}}" class="main-btn add_to_cart_link text-uppercase d-none d-lg-block">{{__('products.add_to_cart')}}</a>
                            @endif
                            {{--                            @endif--}}
                            @if($products->amazon_url)
                                <a target="_blank" href="{{$products->amazon_url}}" class="amazon_btn"><img src="{{asset('assets/web/images/amazon.png')}}" alt=""></a>
                            @endif
                        </div>
                    </div>
                    <div class="imgs-box d-block d-lg-none">
                        <div class="text">
                            <p class="desc_prod mb-0">
                                {{$products->category_name}}
                            </p>
                            <div class="social-links flex-wrap">
                                <h5 class="my-4 w-100 text-left">{{__('products.share_on')}}</h5>
                                <a href="#0" class="clipboard">
                                    <i class="far fa-copy"></i>
                                </a>
                                <a target="_blank" href="http://twitter.com/share?text={{$products->name}}&url={{route('product.show', $products->id)}}&hashtags=hashtag1,hashtag2,hashtag3">
                                    <i class="fab fa-twitter"></i>
                                </a>
                                <a href="#" target="_blank" >
                                    <i class="fab fa-snapchat-ghost"></i>
                                </a>
                                <a href="#" target="_blank" >
                                    <i class="fab fa-whatsapp"></i>
                                </a>
                                <a href="javascript:window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(location.href),'sharewindow','width=550, height=450, personalbar=0, toolbar=0, scrollbars=1, resizable=!');" >
                                    <i class="fab fa-facebook-f"></i>
                                </a>
                            <!--<div class="fb-share-button" data-href="{{route('product.show', $products->id)}}" data-layout="button" data-size="large">-->
                            <!--    <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u={{route('product.show', $products->id)}}/?hl=ar&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore"><i class="fab fa-facebook-f"></i></a>-->
                                <!--</div>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!--Start single-product-->

    <section class="reviews-sec bg-gray text-center">
        <div class="container">
            @auth()
                <button class="butn color review-btn" data-toggle="modal" data-target="#reviewModal">
                    <span><i class="far fa-comment"></i>  {{__('products.add_review')}} </span>
                </button>
            @else
                <button class="butn color review-btn" data-toggle="modal" data-target="#loginModal">
                    <span><i class="far fa-comment"></i>  {{__('products.pleas_login')}} </span>
                </button>
            @endauth

        </div>
    </section>

    @auth()
        <div class="modal fade reviewModal" id="reviewModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="reviewModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content ">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <div class="modal-body">
                        <div class="review-modal-content">
                            @if(count($purchaseList) && in_array($products->id, $purchaseList))
                                <form class="comment_form">
                                    @csrf
                                    <h5> {{__('products.add_review')}}</h5>
                                    <div class="stars-content">
                                        <div class="star-rating">
                                            <input type="radio" id="5-stars" name="evaluate" value="5" />
                                            <label for="5-stars" class="star">&#9733;</label>
                                            <input type="radio" id="4-stars" name="evaluate" value="4" />
                                            <label for="4-stars" class="star">&#9733;</label>
                                            <input type="radio" id="3-stars" name="evaluate" value="3" />
                                            <label for="3-stars" class="star">&#9733;</label>
                                            <input type="radio" id="2-stars" name="evaluate" value="2" />
                                            <label for="2-stars" class="star">&#9733;</label>
                                            <input type="radio" id="1-star" name="evaluate" value="1" />
                                            <label for="1-star" class="star">&#9733;</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <textarea name="comment" class="form-control" rows="11" placeholder="{{__('products.write_here')}} "></textarea>
                                    </div>
                                    <button type="submit" class="butn review-btn comment_button">
                                        <span><i class="fas fa-paper-plane"></i>  {{__('main.send')}} </span>
                                    </button>
                                </form>
                            @else
                                <div class="alert alert-info text-danger text-center">{{__('products.not_in_shipping_list_or_not_complete')}}</div>
                            @endif
                        </div>

                    </div>

                </div>
            </div>
        </div>
    @else
        <div class="modal fade" id="loginModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="reviewModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl">
                <div class="modal-content">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <div class="modal-body">
                        <section class="register-pg">
                            <div class="container">
                                <div class="inner">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="form-wrapper">
                                                <form method="post" action="{{route('user.doLogin')}}" class="login_form">
                                                    <div class="heading text-center mb-5">
                                                        <h4 class="h4">{{__('main.sign_in_your_account')}}</h4>
                                                        <p class="another-register">{{__('main.not_member')}} <a href="{{route('user.register')}}">{{__('main.sign_up')}}</a></p>
                                                        <img src="{{asset('assets/web/images/icon.svg')}}" alt="" class="logo">
                                                    </div>
                                                    <div class="form-group">
                                                        <input name="email" type="email" class="form-control" autocomplete="off" autofocus required />
                                                        <label class="floating-label">  {{__('users.email')}} </label>
                                                    </div>
                                                    <div class="form-group">
                                                        <input name="password" type="password" class="form-control" id="password" autocomplete="off" autofocus required />
                                                        <label class="floating-label"> {{__('users.password')}} </label>
                                                        <span class="togglePassword"><i class="far fa-eye" id="togglePassword"></i></span>
                                                    </div>
                                                    <div class="text w-100">
                                                        <a class="forget-pass" href="{{route('user.forgetPassword')}}">Forget Password?</a>
                                                    </div>
                                                    <button class="submit-btn login_button">{{__('main.sign_in')}}</button>
                                                </form>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <img src="{{asset('assets/web/images/login.svg')}}" alt="" class="register-img center-vr">
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </section>
                    </div>

                </div>
            </div>
        </div>
    @endauth

    <!--Start video-->
    @if(count($productBlocks))
        @foreach($productBlocks as $block)
            @if($block->video && $block->image)
                <section class="product_details mt-5 product_video">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-7">
                                <div class="info valign main_back">
                                    <div class="cont w-100">
                                        <h5>{{$block->title}}</h5>
                                        <p>{!! stripText($block->description) !!}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-5">
                                <div class="swiper_product">
                                    <div class="vid">
                                        <img src="{{getAgentPhotos($block->image)}}" alt="">
                                        <!--<a href="{{$block->video}}" data-fancybox=""><i class="fas fa-play"></i></a>-->
                                        <a href="#0" class="video-btn" data-toggle="modal" data-src="{{$block->video}}" data-target="#myModal"><i class="fas fa-play"></i></a>

                                        <!-- Modal video -->
                                        <div class="modal fade video_modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
                                            aria-hidden="true">
                                            <div class="modal-dialog modal-dialog-centered" role="document">
                                                <div class="modal-content p-0">

                                                    <div class="modal-body">

                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                        <!-- 16:9 aspect ratio -->
                                                        <div class="embed-responsive embed-responsive-16by9">
                                                            <iframe class="embed-responsive-item"
                                                                src="" id="video"
                                                                allowscriptaccess="always" allow="autoplay"></iframe>
                                                        </div>

                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            @endif
            @if($loop->odd && (!$block->video && $block->image))
                <section class="product_details">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-5">
                                <div class="swiper_product">
                                    <div class="img">
                                        <img src="{{getAgentPhotos($block->image)}}" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-7">
                                <div class="info valign">
                                    <div class="cont w-100">
                                        <h5>{{$block->title}}</h5>
                                        <p>{!! stripText($block->description) !!}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            @endif
            @if($loop->even && (!$block->video && $block->image))
                <section class="product_details">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-7">
                                <div class="info valign main_back">
                                    <div class="cont w-100">
                                        <h5>{{$block->title}}</h5>
                                        <p>{!! stripText($block->description) !!}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-5">
                                <div class="swiper_product">
                                    <div class="img">
                                        <img src="{{getAgentPhotos($block->image)}}" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            @endif
        @endforeach
    @endif

    <!--Start reviews-sec-->
    <section class="reviews-sec">
        <div class="container">
            <h3 class="headline">{{__('products.user_reviews')}} <small>({{count($comments) ?? 0}})</small></h3>
            @if(count($comments))
                <div class="swiper-container reviews-swiper mt-5">
                    <div class="swiper-wrapper">
                        @foreach($comments as $comment)
                            <div class="swiper-slide">
                                <div class="review_card">
                                    <img src="{{$comment->user_photo ? getAgentPhotos($comment->user_photo) : asset('assets/web/images/user.svg')}}" alt="" class="user-img">
                                    <div class="text">
                                        <h6><b>{{$comment->user_name}}</b></h6>
                                        <div class="rate">
                                            <i class="fas fa-star {{abs(round($comment->evaluate)) >= 1 ? 'active' : ''}}"></i>
                                            <i class="fas fa-star {{abs(round($comment->evaluate)) >= 2 ? 'active' : ''}}"></i>
                                            <i class="fas fa-star {{abs(round($comment->evaluate)) >= 3 ? 'active' : ''}}"></i>
                                            <i class="fas fa-star {{abs(round($comment->evaluate)) >= 4 ? 'active' : ''}}"></i>
                                            <i class="fas fa-star {{abs(round($comment->evaluate)) >= 5 ? 'active' : ''}}"></i>
                                        </div>
                                        <p class="p">{{$comment->comment}}</p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
        </div>
    </section>
    @endif
@endsection

@section('inner_js')
    <script src="{{ asset('assets/web/js/lib/toastr.min.js') }}"></script>
    <script>
        let productEvaluateRoute = "{{route('product.evaluate')}}",
            product_id = "{{$products->id}}";
    </script>
    <script src="{{ asset('assets/web/js/product.show.js') }}"></script>

    {{--    <script async defer crossorigin="anonymous" src="{{ asset('assets/web/js/lib/facebook.sdk.js') }}"></script>--}}

    <script>
        var galleryThumbs = new Swiper('.gallery-thumbs', {
            spaceBetween: 10,
            slidesPerView: 3,
            loop: false,
            freeMode: true,
            loopedSlides: 5, //looped slides should be the same
            watchSlidesVisibility: true,
            watchSlidesProgress: true,

        });
        var galleryTop = new Swiper('.gallery-top', {
            spaceBetween: 10,
            loop: true,
            zoom: {
                maxRatio: 5,
            },
            loopedSlides: 5, //looped slides should be the same
            thumbs: {
                swiper: galleryThumbs,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
        var swiper = new Swiper('.swiper_product', {
            slidesPerView: 1,
            // spaceBetween: 30,
            // centeredSlides: true,
            speed: 1000,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: false,
            mousewheel: false,
            keyboard: true,
            autoplay: {
                delay: 2000,
            },
            loop: true,
        });

        var $temp = $("<input>");
        var $url = $(location).attr('href');

        $('.clipboard').on('click', function() {
            $("body").append($temp);
            $temp.val($url).select();
            document.execCommand("copy");
            $temp.remove();
            //   $("p").text("URL copied!");
        });

        $(document).on('click', '.product_color', function(){
            galleryTop.slideTo($(this).data('slide'))
        });

        // window.fbAsyncInit = function() {
        //     FB.init({
        //         appId            : '492310465377163',
        //         autoLogAppEvents : true,
        //         xfbml            : true,
        //         version          : 'v10.0'
        //     });
        // };

    </script>
       <script>
        $(document).ready(function() {
            // Gets the video src from the data-src on each button
            var $videoSrc;
            $('.video-btn').click(function() {
                $videoSrc = $(this).data("src");
            });
            console.log($videoSrc);
            // when the modal is opened autoplay it
            $('#myModal').on('shown.bs.modal', function(e) {
                // set the video src to autoplay and not to show related video. Youtube related video is like a box of chocolates... you never know what you're gonna get
                $("#video").attr('src', $videoSrc + "?autoplay=1&amp;modestbranding=1&amp;showinfo=0");
            })
            // stop playing the youtube video when I close the modal
            $('#myModal').on('hide.bs.modal', function(e) {
                // a poor man's stop video
                $("#video").attr('src', $videoSrc);
            })
            // document ready
        });
    </script>
@endsection