@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="index.php">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">
                                            <img src="{{ $image }}">
                                        </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' : '' !!}">
                                <a class="thumb-pic" href="{!! $image !!}">
                                    <img class="img-fluid" src="{!! $image !!}" alt="{{ $image }}">
                                </a>
                            </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] !!}" alt="">
                            </span>
                        </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
                                    </ul>
                                </div>
                    </div>
                </div>
                <!--prod details leftside end-->
            </div>
        </div>
        <section class="mt-3">
            <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">
                                    <p class="mt-2">Vestibulum eu quam nec neque pellentesque efficitur id eget nisl. Proin porta est convallis lacus blandit pretium sed non enim. Maecenas lacinia non orci at aliquam. Donec finibus, urna bibendum ultricies laoreet, augue eros luctus sapien, ut euismod leo tortor ac enim. In hac habitasse platea dictumst.</p>
                                    <p class="mt-2">Vestibulum eu quam nec neque pellentesque efficitur id eget nisl. Proin porta est convallis lacus blandit pretium sed non enim. Maecenas lacinia non orci at aliquam. Donec finibus, urna bibendum ultricies laoreet, augue eros luctus sapien, ut euismod leo tortor ac enim. In hac habitasse platea dictumst.</p>
                                    <p>Shimmery ballgown wedding dress with strapless neckline</p>
                                    <ul>
                                        <li>Category: Maggie Sottero</li>
                                        <li>Tags: Ball Gown, curve, strapless</li>
                                    </ul>
                                </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>
                                        <!--rating-form start-->
                                        <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>
                                        <!--rating-form end-->
                                    </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);
            if (!thumb.hasClass('active')) {
                thumb.addClass('active').siblings().removeClass('active');
                $('.zoom').zoom({
                    url: this.href
                }).find('img').attr('src', this.href);
            }
        });
    });
</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>');
    })
</script>
@endpush