@extends('front.layout.master')

@section('content')

    
    <main class="main-content">
        <div class="product-wrap">
            <div class="container">
                <div class="g-head">
                    <ul>
                        <li>
                            <a onclick="history.back();">
                                {{ __('messages.home') }}</a>
                        </li>
                        <li>{{$product->name}}</li>
                    </ul>
                </div>
                <div class="row">
                    <div class="col-lg-6 col-12">
                        <div class="product-images">
                            <section class="slider">
                                <div class="slider__flex">
                                    <div class="slider__col">
                                        <div class="slider__prev">
                                            <img src="{{asset('front/images/angle.svg')}}" alt="angle" />
                                        </div>

                                        <div class="slider__thumbs">
                                            <div class="swiper-container">
                                                <div class="swiper-wrapper">
                                                    @if ($product->files->count() > 0)
                                                        @foreach($product->files as $file)
                                                            <div class="swiper-slide">
                                                                <div class="slider__image">
                                                                    <img src="{{asset($file->image)}}" alt="" />
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    @else
                                                        <div class="swiper-slide">
                                                            <div class="slider__image">
                                                                <img src="{{$product->image_path}}" alt="" />
                                                            </div>
                                                        </div>
                                                        {{--                                                        <div class="item">  <img src="{{$product->image_path}}" alt="" /></div>--}}

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

                                        <div class="slider__next">
                                            <img src="{{asset('front/images/angle.svg')}}" alt="angle" />
                                        </div>
                                    </div>
                                    <input type="hidden"  id="priceDis" value="{{$product->discount}}">


                                    <div class="slider__images">
                                        <div class="swiper-container">
                                            <div class="swiper-wrapper">


                                                @if ($product->files->count() > 0)
                                                    @foreach($product->files as $file)
                                                        <div class="swiper-slide zoomable">
                                                            <div class="slider__image">
                                                                <img
                                                                        src="{{asset($file->image)}}"
                                                                        alt=""
                                                                        data-zoom-image="{{asset($file->image)}}"
                                                                        class="zoomable__img"
                                                                />
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                @else

                                                    <div class="swiper-slide zoomable">
                                                        <div class="slider__image">
                                                            <img
                                                                    src="{{$product->image_path}}"
                                                                    alt=""
                                                                    data-zoom-image="{{$product->image_path}}"
                                                                    class="zoomable__img"
                                                            />
                                                        </div>
                                                    </div>

                                                @endif

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>
                    {{--                    @dd($product)--}}
                    <div class="col-lg-5 col-12">
                        <div class="product-infos">
                            <div class="infos-top">
                                <b>{{$product->tager?->name}}</b>
                                <h3>{{$product->name}}</h3>
                                <p>
                                    <span>{{$product->discount}} {{ __('messages.kd') }} </span>
                                    <span class="old"> {{$product->mainprice}} {{ __('messages.kd') }} </span>
                                </p>
                            </div>
{{--                            <div class="infos-extras">--}}
{{--                                <ul>--}}
{{--                                    <li>--}}
{{--                                        <p>--}}
{{--                                            <span>{{$product->Size_guide}}</span>--}}
{{--                                            --}}{{--                                            <span>العرض : 20 سم</span>--}}
{{--                                        </p>--}}
{{--                                        <button--}}
{{--                                                type="button"--}}
{{--                                                data-bs-toggle="modal"--}}
{{--                                                data-bs-target="#sizesModal"--}}
{{--                                        >--}}
{{--                                            {{ __('messages.size_guide') }}--}}
{{--                                        </button>--}}
{{--                                    </li>--}}
{{--                                    <li>--}}
{{--                                        <button--}}
{{--                                                type="button"--}}
{{--                                                data-bs-toggle="modal"--}}
{{--                                                data-bs-target="#giftCardModal"--}}
{{--                                                class="gift-card-btn"--}}
{{--                                        >--}}
{{--                                            {{ __('messages.gift_card') }}--}}
{{--                                            <img src="{{asset('front/images/arrow-left.svg')}}" alt="arrow-left" />--}}
{{--                                        </button>--}}
{{--                                    </li>--}}
{{--                                </ul>--}}
{{--                            </div>--}}
                            <div class="infos-description">
                                {!! $product->content !!}
                            </div>
                            <form action="{{route('addedCart')}}" method="post" id="addedForm" data-id="{{$product->id}}" data-price="{{$product->discount}}">
                                @method('post')
                                @csrf
                                <div class="infos-footer">
                                    @foreach($product->features as $feature)

                                        <h3>
                                            {{$feature->title}}
                                            <span>({{ __('messages.optional') }})</span>
                                        </h3>
                                        <div class="acrylic-wrap" style="    padding: 0px !important;">

                                            @foreach($feature->options as $index => $option)
                                                <label style="    display: flex;align-items: center;justify-content: space-between;box-shadow: 0 3px 16px rgba(0, 0, 0, 0.06);margin-bottom: 20px;border-radius: 10px;background-color: #fff;border: 0;width: 100%;">
                                                    <input  type="radio" class="optionValues" form="addedForm" name="options[{{$feature->id}}]" data-feature_id="{{$feature->id}}" data-value="{{$option->price}}" value="{{$option->id}}" {{$index == 0 ? 'checked' : ''}} />

                                                    <div class="inner" style="    width: 100%;background-color:white">
                                                        <div class="img"><img src="{{$option->image_path}}"></div>
                                                        <div class="info">
                                                            <h4>{{$option->title}}</h4>
                                                            <p>{{$option->price}} <span>{{ __('messages.kd') }}</span></p>
                                                        </div>
                                                    </div>
                                                </label>
                                            @endforeach
                                        </div>
                                    @endforeach
                                </div>

                                <div class="infos-actions">

                                    <button type="submit" data-bs-toggle="modal"
                                            data-bs-target="#cartAddedModal" class="btn addToCart" {{$product->discount == 0 ? "disabled" : ''}} >
                                        {{ __('messages.add_to_cart') }}
                                        <span class="total_price">{{$product->discount}} {{ __('messages.kd') }} </span>
                                    </button>



                                    <div class="qty btn">
                                        <a class="inc qtybutton">
                                            <img src="{{asset('front/images/product-cart-plus.svg')}}" alt="" />
                                        </a>
                                        {{--                                            <input--}}
                                        {{--                                                    type="text"--}}
                                        {{--                                                    value="1"--}}
                                        {{--                                                    name="qtybutton"--}}
                                        {{--                                                    class="plus-minus-box"--}}
                                        {{--                                                    disabled=""--}}
                                        {{--                                            />--}}
                                        <input type="text" form="addedForm" value="1" id="quantaty" name="quantaty" class="plus-minus-box" disabled="">

                                        <a class="dec qtybutton">
                                            <img src="{{asset('front/images/minus.svg')}}" alt="minus" />
                                        </a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    @if($relationProdut->count() > 0)
                        <div class="col-lg-12 col-12">
                            <div class="related-products">
                                <div class="g-head">
                                    <h3>{{ __('messages.related_products') }}</h3>
                                </div>
                                <div class="row">
                                    @foreach($relationProdut as $related)
                                        {{--                                    @dd($related)--}}

                                        <div
                                                class="col-xl-3 col-md-6 col-12"
                                                data-aos="fade-up"
                                                data-aos-duration="1000"
                                                data-aos-delay="100"
                                        >
                                            <div class="product-block">
                                                <div class="block-img">
                                                    <img src="{{$related->image_path}}" alt="product" />
                                                    <a href="{{route('products-details',['id'=> $related->id , 'slug' => str_replace(' ','-',$related->name)])}}"></a>
                                                    <span>
                                      <b>{{$related->prefit_price_discount}}%</b>
                                      <br />
                                                                                      {{ __('messages.discount') }}

                                    </span>
                                                </div>
                                                <div class="block-info">

                                                    <div class="product-name">
                                                        {{--                                            <a href="#">{{$related['name']}}</a>--}}
                                                        <a href="{{route('products-details',['id'=> $related->id , 'slug' => str_replace(' ','-',$related->name)])}}">{{$related->name}}</a>

                                                    </div>
                                                    <div class="product-footer">
                                                        <div class="product-price">
                                                            <span> {{$related->discount}} <b>{{ __('messages.kd') }}</b> </span>
                                                            <span> {{$related->mainprice}}<b>{{ __('messages.kd') }}</b> </span>
                                                        </div>
                                                        <button type="button" class="add-to-fav">
                                                            <img src="{{asset('front/images/heart.svg')}}" alt="heart" />
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach

                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </main>


    <div class="modal fade auth-modal" id="giftCardModal">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>{{ __('messages.gift_card') }}</h4>
                    <button type="button" class="close" data-bs-dismiss="modal">
                        <img src="{{asset('front/images/close-filled.svg')}} " alt="close" />
                    </button>
                </div>
                <div class="gift-form">
                    {{--                    <form id="giftCardForm">--}}
                    <div class="mb-3">
                        <label for="senderName" class="form-label">{{ __('messages.sender_name') }}</label>
                        <input type="text" class="form-control" id="senderName" name="sender_name" />
                    </div>
                    <div class="mb-3">
                        <label for="recipientName" class="form-label">{{ __('messages.recipient_name') }}</label>
                        <input type="text" class="form-control" id="recipientName" name="recipient_name" />
                    </div>
                    <div class="mb-3">
                        <label for="messageText" class="form-label">{{ __('messages.message_text') }}</label>
                        <textarea class="form-control" id="messageText" name="message_text"></textarea>
                    </div>
                    <div class="mb-3">
                        <button type="submit" class="btn btn-primary">{{ __('messages.save') }}</button>
                    </div>
                    {{--                    </form>--}}
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade auth-modal" id="acrylicModal">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>{{ __('messages.gift_card') }}</h4>
                    <button type="button" class="close" data-bs-dismiss="modal">
                        <img src="{{asset('front/images/close-filled.svg')}} " alt="close" />
                    </button>
                </div>
                <div class="acrylic-wrap">
                    {{--                    @dd($product->features)--}}
                    @foreach($product->features as $feature)
                        @foreach($feature->options as $option)
                            <label>
                                <input type="radio" name="acrylic" />
                                <div class="inner">
                                    <div class="img"></div>
                                    <div class="info">
                                        <h4>{{$option->title}}</h4>
                                        <p>{{$option->price}} <span>{{ __('messages.kd') }}</span></p>
                                    </div>
                                </div>
                            </label>
                        @endforeach
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="cartAddedModal">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="cart-added">
                    <button type="button" class="close" data-bs-dismiss="modal">
                        <img src="{{asset('front/images/close-filled.svg')}} " alt="close" />
                    </button>
                    <div class="icon">
                        <img src="{{asset('front/images/check-big.svg')}}" alt="check" />
                    </div>
                    <h4>{{ __('messages.added_success') }}</h4>
                    <div class="actions">
                        <a href="{{url('/')}}" class="btn btn-outline">{{ __('messages.continue_shopping') }}</a>
                        <a href="{{route('get-cart')}}" class="btn">{{ __('messages.order_done') }}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
{{--    <div class="modal fade auth-modal" id="sizesModal">--}}
{{--        <div class="modal-dialog modal-dialog-centered">--}}
{{--            <div class="modal-content">--}}
{{--                <div class="modal-header">--}}
{{--                    <h4>{{ __('messages.size_guide_image') }}</h4>--}}
{{--                    <button type="button" class="close" data-bs-dismiss="modal">--}}
{{--                        <img src="{{asset('front/images/close-filled.svg')}} " alt="close" />--}}
{{--                    </button>--}}
{{--                </div>--}}
{{--                <div class="sizes-wrap">--}}
{{--                    <div class="inner">--}}
{{--                        <img src="{{ $product->image_path_size}}" alt="" style="width: 100%"/>--}}
{{--                    </div>--}}
{{--                    <div class="sizes-footer">--}}
{{--                        <button class="btn">{{ __('messages.save') }}</button>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}



@endsection
@push('js')
    {{--    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"></script>--}}
    {{--    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>--}}
    <script
            type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/elevatezoom/3.0.8/jquery.elevatezoom.min.js"
    ></script>

    <script>
        $(document).ready(function () {
            $(".zoomable__img").elevateZoom({
                zoomType: "window", // "inner" or "lens" or "window"
                lensShape: "square", // "round" or "square"
                lensSize: 10,
                containLensZoom: true,
                responsive: true,
                zoomWindowPosition: 9,
                scrollZoom: true,
                zoomWindowWidth: 400,
                zoomWindowHeight: 400,
                responsive: true,
            });
        });
    </script>

    <script>
        AOS.init();

        document
            .querySelectorAll(".mega-menu .nav-tabs button")
            .forEach(function (everyitem) {
                var tabTrigger = new bootstrap.Tab(everyitem);
                everyitem.addEventListener("mouseenter", function () {
                    tabTrigger.show();
                });
            });

        var swiper = new Swiper(".mySwiper", {
            pagination: {
                el: ".hero-swiper-pagination",
                // dynamicBullets: true,
                clickable: true,
            },
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
        });

        var swiper = new Swiper(".productsSwiper", {
            slidesPerView: 4,
            spaceBetween: 16,
            pagination: {
                el: ".products-swiper-pagination",
                clickable: true,
                // dynamicBullets: true,
            },
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
                pauseOnMouseEnter: true,
            },
            breakpoints: {
                0: {
                    slidesPerView: 1.3,
                    centerSlides: true,
                },
                576: {
                    slidesPerView: 2,
                },
                768: {
                    slidesPerView: 3,
                },
                1024: {
                    slidesPerView: 3,
                },
                1366: {
                    slidesPerView: 4,
                },
                1920: {
                    slidesPerView: 4,
                },
            },
        });

        document.addEventListener("DOMContentLoaded", function () {
            document.addEventListener("click", function (event) {
                const target = event.target;

                // Check if the clicked element is a link with the class 'has-menu-items'
                if (target.matches(".has-menu-items a")) {
                    // Prevent the default link behavior
                    event.preventDefault();

                    // Find the corresponding sub-menu
                    const subMenu = target.nextElementSibling;
                    const sidebar = document.querySelector(".sidebar");

                    // Toggle 'active' class on sub-menu
                    subMenu.classList.add("active");
                }

                // Check if the clicked element is the back button within a sub-menu
                if (target.matches(".back button")) {
                    // Prevent the default button behavior
                    event.preventDefault();

                    // Find the parent sub-menu and remove 'active' class
                    const subMenu = target.closest(".sub-menu");
                    const sidebar = document.querySelector(".sidebar");
                    subMenu.classList.remove("active");
                }
            });

            // Toggle 'active' class on sidebar when menu-trigger is clicked
            const menuTrigger = document.querySelector(".menu-trigger");
            const sidebar = document.querySelector(".sidebar");
            const overlay = document.querySelector(".overlay-s");

            menuTrigger.addEventListener("click", function () {
                sidebar.classList.toggle("active");
                overlay.classList.toggle("active");
            });

            // Remove 'active' class from sidebar when close-trigger is clicked
            const closeTrigger = document.querySelector(".close-trigger");

            closeTrigger.addEventListener("click", function () {
                sidebar.classList.remove("active");
                overlay.classList.remove("active");
            });

            overlay.addEventListener("click", function () {
                sidebar.classList.remove("active");
                overlay.classList.remove("active");
            });
        });

        // any add-to-fav button clicked will add the class 'active' to the button
        document.querySelectorAll(".add-to-fav").forEach(function (button) {
            button.addEventListener("click", function () {
                button.classList.toggle("active");
            });
        });

        // click on filter trigger button will add the class 'active' to the filter sidebar
        document
            .querySelector(".filter-trigger")
            .addEventListener("click", function () {
                const filterSidebar = document.querySelector(".filter-sidebar");
                const overlay = document.querySelector(".overlay-s");

                filterSidebar.classList.add("active");
                overlay.classList.add("active");
            });

        // click on close sidebar button will remove the class 'active' from the sidebar
        document
            .querySelector(".close-sidebar")
            .addEventListener("click", function () {
                const filterSidebar = document.querySelector(".filter-sidebar");
                const overlay = document.querySelector(".overlay-s");

                filterSidebar.classList.remove("active");
                overlay.classList.remove("active");
            });

        // click on overlay will remove the class 'active' from the sidebar
        document
            .querySelector(".overlay-s")
            .addEventListener("click", function () {
                const filterSidebar = document.querySelector(".filter-sidebar");
                const overlay = document.querySelector(".overlay-s");

                filterSidebar.classList.remove("active");
                overlay.classList.remove("active");
            });
    </script>
    <script>
        function handleQtyButtonClick(event) {
            var button = event.currentTarget;
            var input = button.parentElement.querySelector("input");
            var oldValue = parseFloat(input.value);
            var newVal;

            if (button.classList.contains("inc")) {
                newVal = oldValue + 1;
            } else {
                // Don't allow decrementing below zero
                if (oldValue > 0) {
                    newVal = oldValue - 1;
                } else {
                    newVal = 0;
                }
            }

            input.value = newVal;
        }

        // Get all elements with class "qtybutton"
        var qtyButtons = document.querySelectorAll(".qtybutton");

        // Loop through each button and attach the click event listener
        qtyButtons.forEach(function (button) {
            button.addEventListener("click", handleQtyButtonClick);
        });
    </script>
    <script>
        const sliderThumbs = new Swiper(".slider__thumbs .swiper-container", {
            direction: "vertical",
            slidesPerView: 4,
            spaceBetween: 12,
            navigation: {
                nextEl: ".slider__next",
                prevEl: ".slider__prev",
            },
            freeMode: true,
            breakpoints: {
                0: {
                    direction: "horizontal",
                    mousewheel: false,
                },
                991: {
                    direction: "vertical",
                },
            },
        });

        const sliderImages = new Swiper(".slider__images .swiper-container", {
            direction: "vertical",
            slidesPerView: 1,
            spaceBetween: 32,
            mousewheel: false,
            navigation: {
                nextEl: ".slider__next",
                prevEl: ".slider__prev",
            },
            grabCursor: false,
            allowTouchMove: false,
            thumbs: {
                swiper: sliderThumbs,
            },
            breakpoints: {
                0: {
                    direction: "horizontal",
                    mousewheel: false,
                    spaceBetween: 0,
                },
                991: {
                    direction: "vertical",
                },
            },
        });
    </script>
    <script>
        $(function (){
            $('body').on('click','.optionValues',function (e){
                var val = $('.plus-minus-box').val();
                var type = $(this).data('type');
                var countchecks = $(this).data('countchecks');
                var id = $(this).data('id');

                $('.addToCart').removeAttr('disabled');

                if(type == 'multi'){
                    var checked = $("input[id=" + id + "]:checked").length;
                    if(checked > countchecks){
                        toastr.warning("عفوا عدد الخيارات المتاحه لهذه الاضافه " + countchecks);

                        return false;
                    }
                }


                calculate(val);
            });


            $('body').on('click','.qtybutton',function (e){
                var val = $(this).parent().find('.plus-minus-box').val();
                calculate(val);
            })

            @if ($product->features->count() > 0)

            function calculate(val){
                var price = 0;

                $("input[class='optionValues']:checked").each(function ($index) {
                    price+= parseFloat($(this).data('value'));
                });

                var pricetot = val * price + parseFloat($('#priceDis').val());

                // console.log(val , price , parseFloat($('#priceDis').val()) , pricetot)
                $('.total_price').html(pricetot.toFixed(3) + '{{ __('messages.kd') }}');
            }
            @else
            function calculate(val){
                var price = parseFloat($('#priceDis').val());
                $('.total_price').html(val * price + '{{ __('messages.kd') }}');
            }
            @endif



            $('body').on('submit','#addedForm',function (e) {
                e.preventDefault();

                var prodId = $(this).data('id');
                var price = $(this).data('price');
                var url = $(this).attr('action');
                var quantaty = $(this).parent().parent().find('#quantaty').val();



                var formData = new FormData(this);
                formData.append('quantity',quantaty),
                    formData.append('prod_id',prodId),
                    formData.append('price',price)

                // alert(prodId);
                $.ajax({
                    url: url,
                    method: "post",
                    data: formData,
                    dataType: 'json',

                    cache       : false,
                    contentType : false,
                    processData : false,

                    success: function (response) {
                        console.log(response.data.productCount);
                        if (response.status == 'true'){

                            toastr.success("تمت الاضافه بنجاح");
                        }


                        if (response.status == 'success'){
                            toastr.success("تمت التعديل  بنجاح");
                        }


                        $('.cart_count').html(response.data.productCount);

                    },

                });
            });

            $('.owl-carousel').owlCarousel({
                // stagePadding: 50,
                loop:false,
                margin:10,
                nav:false,

                responsive:{
                    0:{
                        items:1
                    },
                    600:{
                        items:1
                    },
                    1000:{
                        items:1
                    }
                }
            })


        });
    </script>

@endpush