@extends('layouts.web')

@section('content')
<style>
    /* width */
    ::-webkit-scrollbar {
        width: 0px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: #888;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
</style>
<section class="intenal-heading">
    <div class="container">
        <div class="col-12">
            <!-- <h2>Products Details</h2> -->
            <a href="{{ route('homepage') }}">Home</a>> <span>Products Details</span>
        </div>
    </div>
</section>
<!--internal main section-->
<div>
    <section class="internal-main-section">
        <div class="container">
            <div class="row">
                <!--prod details leftside-->
                <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 d-xxl-none d-xl-none d-lg-none d-md-none d-sm-none d-block">
                    <!--Slider5-->
                    <div class="prod-slider mt-2">
                        <div class="row">
                            <div class="">
                                <div id="prods-mob" class="owl-carousel  owl-theme">
                                    @foreach($images as $image)
                                    <div class="item prod-main">
                                        <div class="pic-bg">
                                            @if($image['type']=='I')
                                            <img src="{{ $image['image'] }}">
                                            @else
                                            <video class="img-fluid product-img" title="{{$product->product_code}}" playsinline="" autoplay="autoplay" muted="" loop="" width="100%">
                                                <source src="{{ $image['image'] }}" type="video/mp4">
                                            </video>
                                            @endif
                                        </div>
                                    </div>
                                    @endforeach

                                </div>
                            </div>
                        </div>
                    </div>
                    <!--Slider5-->
                </div>
                <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 d-xxl-block d-xl-block d-lg-block d-md-block d-sm-block d-none">
                    <div class="product-page">
                        <!-- <div class="arow-top"><i class="fa fa-chevron-up" aria-hidden="true"></i></div> -->
                        <div class="thumbnails">
                            @foreach($images as $key=>$image)
                            <div class="thumb {!! ($key==0) ? 'active' : '' !!}">
                                @if($image['type']=='I')
                                <a class="thumb-pic" href="{!! $image['image'] !!}" data-type="I">
                                    <img class="img-fluid" src="{!! $image['image'] !!}" alt="{{ $image['image'] }}">
                                </a>
                                @else
                                <a class="thumb-pic" href="{!! $image['image'] !!}" data-type="V">
                                    <img class="img-fluid" src="{!! $images[0]['image'] !!}" alt="{{ $images[0]['image'] }}">
                                    <i class="play-video-icon fa fa-play-circle-o" aria-hidden="true"></i>
                                </a>
                                @endif
                            </div>
                            @endforeach

                        </div>
                        <!-- <div class="arow-down"><i class="fa fa-chevron-down" aria-hidden="true"></i></div>      -->
                        <div class="img-display">
                            <span class="zoom">
                                <img class="img-fluid" src="{!! $images[0]['image'] !!}" alt="">
                            </span>

                            <div class="video-div d-none">
                                <video class="img-fluid product-img" title="{{$product->product_code}}" playsinline="" autoplay="autoplay" muted="" loop="" width="100%">
                                    <source src="{{ $images[1]['image'] }}" type="video/mp4">
                                </video>
                            </div>
                        </div>



                    </div>
                </div>
                <!--prod details leftside end-->
                <!--prod details rightside-->
                <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                    <div class="prod-detail-content">
                        <!-- <span class="in-stock">In Stock</span> -->
                        <h2>{{ $product->product_code }}</h2>
                        <p>{{ $category->name }} <span>
                                <div class="line-b"></div>
                                <h3 class="prod-price">${{ $variation->price }}</h3>
                                <p>{!! $variation->description !!}</p>
                                <a class="buy-prod" href="{{ route('bookAppointment') }}">
                                    <!-- <i class="fa fa-shopping-cart"></i>  -->
                                    Book Appointment</a>
                                <!-- <div class="wishlist">
                                    <a href="#">
                                        <i class="fa fa-heart"></i> Add to Wishlist</a>
                                </div> -->
                                <div class="prod-card">
                                    <ul>
                                        @isset($product->brand)
                                        <li>Designer: {{ $product->brand->name }}</li>
                                        @endisset
                                        @isset($product->fabric)
                                        <li>Fabric: {{ $product->fabric->name }}</li>
                                        @endisset
                                        @isset($product->silhouette)
                                        <li>Style: {{ implode(',',$product->silhouette->pluck('name')->toArray()) }}</li>
                                        @endisset
                                        @isset($variation->color)
                                        <li>Color: {{ $variation->color->name }}</li>
                                        @endisset
                                        {{-- @isset($product->sizes)
                                        <li class="filter-size d-flex mt-2"> Sizes: &nbsp;
                                            <ul class="ms-2">
                                                @foreach($product->sizes as $size)
                                                <li><a href="javascript:void(0)">{{$size->size}} </a></li>
                                        @endforeach
                                    </ul>
                                    </li>
                                    @endisset
                                    --}}
                                    <hr />
                                    <li class="mt-3">Description: {!! $product->description !!}</li>
                                    </ul>
                                </div>
                    </div>
                </div>
                <!--prod details leftside end-->
            </div>
        </div>
        {{--
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <ul class="nav nav-tabs prod-detail-tabs" id="myTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Description</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="information-tab" data-bs-toggle="tab" data-bs-target="#information" type="button" role="tab" aria-controls="information" aria-selected="false">Information</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="reviews-tab" data-bs-toggle="tab" data-bs-target="#reviews" type="button" role="tab" aria-controls="reviews" aria-selected="false">Reviews</button>
                            </li>
                        </ul>
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">

                                <div class="description-prod">

                                    {!! $product->description !!}
                                </div>
                            </div>
                            <div class="tab-pane fade" id="information" role="tabpanel" aria-labelledby="information-tab">
                                <div class="mt-3 informantion-main">
                                    <table class="table table-bordered">
                                        <tbody>
                                            <tr>
                                                <th scope="row">Stand Up</th>
                                                <td>35″L x 24″W x 37-45″H(front to back wheel)</td>
                                            </tr>
                                            <tr>
                                                <th scope="row">Folded (W/O Wheels)</th>
                                                <td>32.5″L x 18.5″W x 16.5″H</td>
                                            </tr>
                                            <tr>
                                                <th scope="row">Folded (W/ Wheels)</th>
                                                <td>32.5″L x 24″W x 18.5″H</td>
                                            </tr>
                                            <tr>
                                                <th scope="row">Door Pass Through</th>
                                                <td>24</td>
                                            </tr>
                                            <tr>
                                                <th scope="row">Frame</th>
                                                <td>Aluminum</td>
                                            </tr>
                                            <tr>
                                                <th scope="row">Weight (W/O Wheels)</th>
                                                <td>20 LBS</td>
                                            </tr>
                                            <tr>
                                                <th scope="row">Weight Capacity</th>
                                                <td>60 LBS</td>
                                            </tr>
                                            <tr>
                                                <th scope="row">Width</th>
                                                <td>24″</td>
                                            </tr>
                                            <tr>
                                                <th scope="row">Handle Height (Ground To Handle)</th>
                                                <td>37-45″</td>
                                            </tr>
                                            <tr>
                                                <th scope="row">Seat Back Height</th>
                                                <td>21.5″</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="reviews" role="tabpanel" aria-labelledby="reviews-tab">
                                <div class="reviews-main">
                                    <div class="row">
                                        <div class="col-xxl-1 col-xl-1 col-lg-1 col-md-2 col-sm-2 col-3">
                                            <img class="img-fluid" src="imgs/user1.jpg" alt="">
                                        </div>
                                        <div class="col-xxl-11 col-xl-11 col-lg-11 col-md-10 col-sm-10 col-9">
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <h4>Linda Heyes <span>June 6, 2023</span>
                                            </h4>
                                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="reviews-main">
                                    <div class="row">
                                        <div class="col-xxl-1 col-xl-1 col-lg-1 col-md-2 col-sm-2 col-3">
                                            <img class="img-fluid" src="imgs/user2.jpg" alt="">
                                        </div>
                                        <div class="col-xxl-11 col-xl-11 col-lg-11 col-md-10 col-sm-10 col-9">
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <h4>Linda Heyes <span>June 6, 2023</span>
                                            </h4>
                                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="reviews-main">
                                    <div class="row">
                                        <div class="col-xxl-1 col-xl-1 col-lg-1 col-md-2 col-sm-2 col-3">
                                            <img class="img-fluid" src="imgs/user3.jpg" alt="">
                                        </div>
                                        <div class="col-xxl-11 col-xl-11 col-lg-11 col-md-10 col-sm-10 col-9">
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <h4>Linda Heyes <span>June 6, 2023</span>
                                            </h4>
                                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="reviews-main">
                                    <div class="row">
                                        <div class="col-xxl-1 col-xl-1 col-lg-1 col-md-2 col-sm-2 col-3 ">
                                            <img class="img-fluid" src="imgs/user4.jpg" alt="">
                                        </div>
                                        <div class="col-xxl-11 col-xl-11 col-lg-11 col-md-10 col-sm-10 col-9">
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <h4>Linda Heyes <span>June 6, 2023</span></h4>
                                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>

                                        </div>
                                        <div class="rating-form">
                                            <div class="row">
                                                <p>Your email address will not be published. Required fields are marked *</p>
                                                <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                                                    <input type="text" class="form-control" placeholder="Name*">
                                                </div>
                                                <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                                                    <input type="email" class="form-control" placeholder="Email*">
                                                </div>
                                                <div class="col-xxl-12 mt-3">
                                                    <div class="rating-star">Your rating* : <a href="#"><i class="fa fa-star" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-star" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-star" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-star" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-star" aria-hidden="true"></i></a> </div>
                                                </div>
                                                <div class="col-xxl-12 mt-3">
                                                    <textarea class="form-control" placeholder="Your Review*" rows="5"></textarea>
                                                </div>
                                                <div class="col-12">
                                                    <button type="button" class="btn btn-primary submit-b">Submit</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            --}}
</div>
</section>
{{--
<section class="details-sliders">
    <div class="container">
        <div class="row">

            <!--Slider5-->
            <div class="prod-slider mt-2">
                <h3 class="i-heading">You may also like…</h3>
                <div class="row">
                    <div class="">
                        <div id="like-prod-slider" class="owl-carousel  owl-theme">
                            <div class="item prod-main">
                                <div class="pic-bg">
                                    <!--on hover start -->
                                    <div class="prod-opt">
                                        <div class="prod-icons">
                                            <h2><a href="#"><i class="fa fa-heart"></i></a></h2>
                                            <h2><a href="#"><i class="fa fa-exchange"></i></a> </h2>
                                            <h2><a href="#"><i class="fa fa-eye"></i></a> </h2>
                                        </div>
                                        <div class="add-cart">
                                            <a href="#"> Appointment</a>
                                        </div>
                                    </div>
                                    <!--on hover start -->
                                    <img src="imgs/prod6.jpg">
                                </div>
                            </div>
                            <div class="item prod-main">
                                <div class="pic-bg">
                                    <!--on hover start -->
                                    <div class="prod-opt">
                                        <div class="prod-icons">
                                            <h2><a href="#"><i class="fa fa-heart"></i></a></h2>
                                            <h2><a href="#"><i class="fa fa-exchange"></i></a> </h2>
                                            <h2><a href="#"><i class="fa fa-eye"></i></a> </h2>
                                        </div>
                                        <div class="add-cart">
                                            <a href="#"> Appointment</a>
                                        </div>
                                    </div>
                                    <!--on hover start -->
                                    <img src="imgs/prod5.jpg">
                                </div>
                            </div>
                            <div class="item prod-main">
                                <div class="pic-bg">
                                    <!--on hover start -->
                                    <div class="prod-opt">
                                        <div class="prod-icons">
                                            <h2><a href="#"><i class="fa fa-heart"></i></a></h2>
                                            <h2><a href="#"><i class="fa fa-exchange"></i></a> </h2>
                                            <h2><a href="#"><i class="fa fa-eye"></i></a> </h2>
                                        </div>
                                        <div class="add-cart">
                                            <a href="#"> Appointment</a>
                                        </div>
                                    </div>
                                    <!--on hover start -->
                                    <img src="imgs/prod4.jpg">
                                </div>
                            </div>
                            <div class="item prod-main">
                                <div class="pic-bg">
                                    <!--on hover start -->
                                    <div class="prod-opt">
                                        <div class="prod-icons">
                                            <h2><a href="#"><i class="fa fa-heart"></i></a></h2>
                                            <h2><a href="#"><i class="fa fa-exchange"></i></a> </h2>
                                            <h2><a href="#"><i class="fa fa-eye"></i></a> </h2>
                                        </div>
                                        <div class="add-cart">
                                            <a href="#"> Appointment</a>
                                        </div>
                                    </div>
                                    <!--on hover start -->
                                    <img src="imgs/prod3.jpg">
                                </div>
                            </div>
                            <div class="item prod-main">
                                <div class="pic-bg">
                                    <!--on hover start -->
                                    <div class="prod-opt">
                                        <div class="prod-icons">
                                            <h2><a href="#"><i class="fa fa-heart"></i></a></h2>
                                            <h2><a href="#"><i class="fa fa-exchange"></i></a> </h2>
                                            <h2><a href="#"><i class="fa fa-eye"></i></a> </h2>
                                        </div>
                                        <div class="add-cart">
                                            <a href="#"> Appointment</a>
                                        </div>
                                    </div>
                                    <!--on hover start -->
                                    <img src="imgs/prod1.jpg">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--Slider5-->
        </div>
    </div>
</section>

<div class="container">
    <div class="bottom-line"></div>
</div>

 <section class="details-sliders">
    <div class="container">
        <div class="row">
            <!--Slider5-->
            <div class="prod-slider mt-2">
                <h3 class="i-heading">Related Products</h3>
                <div class="row">
                    <div class="">
                        <div id="related-prod-slider" class="owl-carousel  owl-theme">
                            <div class="item prod-main">
                                <div class="pic-bg">
                                    <!--on hover start -->
                                    <div class="prod-opt">
                                        <div class="prod-icons">
                                            <h2><a href="#"><i class="fa fa-heart"></i></a></h2>
                                            <h2><a href="#"><i class="fa fa-exchange"></i></a> </h2>
                                            <h2><a href="#"><i class="fa fa-eye"></i></a> </h2>
                                        </div>
                                        <div class="add-cart">
                                            <a href="#"> Appointment</a>
                                        </div>
                                    </div>
                                    <!--on hover start -->
                                    <img src="imgs/prod9.jpg">
                                </div>
                            </div>
                            <div class="item prod-main">
                                <div class="pic-bg">
                                    <!--on hover start -->
                                    <div class="prod-opt">
                                        <div class="prod-icons">
                                            <h2><a href="#"><i class="fa fa-heart"></i></a></h2>
                                            <h2><a href="#"><i class="fa fa-exchange"></i></a> </h2>
                                            <h2><a href="#"><i class="fa fa-eye"></i></a> </h2>
                                        </div>
                                        <div class="add-cart">
                                            <a href="#"> Appointment</a>
                                        </div>
                                    </div>
                                    <!--on hover start -->
                                    <img src="imgs/prod10.jpg">
                                </div>
                            </div>
                            <div class="item prod-main">
                                <div class="pic-bg">
                                    <!--on hover start -->
                                    <div class="prod-opt">
                                        <div class="prod-icons">
                                            <h2><a href="#"><i class="fa fa-heart"></i></a></h2>
                                            <h2><a href="#"><i class="fa fa-exchange"></i></a> </h2>
                                            <h2><a href="#"><i class="fa fa-eye"></i></a> </h2>
                                        </div>
                                        <div class="add-cart">
                                            <a href="#"> Appointment</a>
                                        </div>
                                    </div>
                                    <!--on hover start -->
                                    <img src="imgs/prod11.jpg">
                                </div>
                            </div>
                            <div class="item prod-main">
                                <div class="pic-bg">
                                    <!--on hover start -->
                                    <div class="prod-opt">
                                        <div class="prod-icons">
                                            <h2><a href="#"><i class="fa fa-heart"></i></a></h2>
                                            <h2><a href="#"><i class="fa fa-exchange"></i></a> </h2>
                                            <h2><a href="#"><i class="fa fa-eye"></i></a> </h2>
                                        </div>
                                        <div class="add-cart">
                                            <a href="#"> Appointment</a>
                                        </div>
                                    </div>
                                    <!--on hover start -->
                                    <img src="imgs/prod12.jpg">
                                </div>
                            </div>
                            <div class="item prod-main">
                                <div class="pic-bg">
                                    <!--on hover start -->
                                    <div class="prod-opt">
                                        <div class="prod-icons">
                                            <h2><a href="#"><i class="fa fa-heart"></i></a></h2>
                                            <h2><a href="#"><i class="fa fa-exchange"></i></a> </h2>
                                            <h2><a href="#"><i class="fa fa-eye"></i></a> </h2>
                                        </div>
                                        <div class="add-cart">
                                            <a href="#"> Appointment</a>
                                        </div>
                                    </div>
                                    <!--on hover start -->
                                    <img src="imgs/prod13.jpg">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--Slider5-->
        </div>
    </div>
</section> --}}
@endsection
@push('scripts')
<script type="text/javascript" src="{{ asset('js/jquery.themepunch.tools.min.js') }}?v=15"></script>
<script type="text/javascript" src="{{ asset('js/jquery.themepunch.revolution.min.js') }}?v=15"></script>
<script src="{{ asset('js/zoom.js') }}"></script>
<script>
    $(function() {
        $('.arow-down').on('click', function() {
            $(".thumb.active").next('.thumb').find('a').trigger("click");
        });
        $('.arow-top').on('click', function() {
            $(".thumb.active").prev('.thumb').find('a').trigger("click");
        });
        $('.zoom').zoom();
        $('.thumb').on('click', 'a', function(e) {
            e.preventDefault();
            var thumb = $(e.delegateTarget);
            type = $(this).attr('data-type');
            if (!thumb.hasClass('active')) {
                thumb.addClass('active').siblings().removeClass('active');
                if (type == "I") {
                    $('.zoom').removeClass('d-none');
                    $('.video-div').addClass('d-none');
                    $('.zoom').zoom({
                        url: this.href
                    }).find('img').attr('src', this.href);
                } else {
                    $('.zoom').addClass('d-none');
                    $('.video-div').removeClass('d-none');
                }
            }
        });
    });
</script>
<script>
    $(document).ready(function() {
        var owl = $('#prods-mob');
        owl.owlCarousel({
            margin: 10,
            nav: true,
            loop: true,
            autoplay: true,
            autoPlayTimeout: 1,
            autoplaySpeed: 2000,
            responsive: {
                0: {
                    items: 1
                },
                500: {
                    items: 1
                },
                576: {
                    items: 1
                },
                600: {
                    items: 1
                },
                768: {
                    items: 1
                },
                992: {
                    items: 1
                },
                1200: {
                    items: 1
                }
            }
        })
        $(".owl-prev").html('<i class="fa fa-arrow-left" aria-hidden="true"></i>');
        $(".owl-next").html('<i class="fa fa-arrow-right" aria-hidden="true"></i>');
    })
    $(document).ready(function() {
        var owl = $('#like-prod-slider');
        owl.owlCarousel({
            margin: 10,
            nav: true,
            loop: true,

            responsive: {
                0: {
                    items: 1
                },
                500: {
                    items: 1
                },
                576: {
                    items: 1
                },
                600: {
                    items: 2
                },
                768: {
                    items: 3
                },
                992: {
                    items: 4
                },
                1200: {
                    items: 4
                }
            }
        })
        $(".owl-prev").html('<i class="fa fa-arrow-left" aria-hidden="true"></i>');
        $(".owl-next").html('<i class="fa fa-arrow-right" aria-hidden="true"></i>');
    })
    $(document).ready(function() {
        var owl = $('#related-prod-slider');
        owl.owlCarousel({
            margin: 10,
            nav: false,
            loop: true,

            responsive: {
                0: {
                    items: 1
                },
                500: {
                    items: 1
                },
                576: {
                    items: 1
                },
                600: {
                    items: 2
                },
                768: {
                    items: 3
                },
                992: {
                    items: 4
                },
                1200: {
                    items: 4
                }
            }
        })
        $(".owl-prev").html('<i class="fa fa-arrow-left" aria-hidden="true"></i>');
        $(".owl-next").html('<i class="fa fa-arrow-right" aria-hidden="true"></i>');

        height=$('.product-page').height();

        $('.thumbnails').css({'height': height});
    })
</script>
@endpush