@extends('website.includes.master')

@section('title')
    Product Detail
@endsection

@section('content')

    <!-- Start Bradcaump area -->
    {{--    <div class="ht__bradcaump__area"--}}
    {{--         style="background: rgba(0, 0, 0, 0) url({{ URL::asset('website/images/bg/4.jpg') }}) no-repeat scroll center center / cover ;">--}}
    {{--        <div class="ht__bradcaump__wrap">--}}
    {{--            <div class="container">--}}
    {{--                <div class="row">--}}
    {{--                    <div class="col-xs-12">--}}
    {{--                        <div class="bradcaump__inner">--}}
    {{--                            <nav class="bradcaump-inner">--}}
    {{--                                <a class="breadcrumb-item" href="{{ route('/') }}">Home</a>--}}
    {{--                                <span class="brd-separetor"><i class="zmdi zmdi-chevron-right"></i></span>--}}
    {{--                                <a class="breadcrumb-item" href="{{ route('shop') }}">Products</a>--}}
    {{--                                <span class="brd-separetor"><i class="zmdi zmdi-chevron-right"></i></span>--}}
    {{--                                <span class="breadcrumb-item active">Lamp</span>--}}
    {{--                            </nav>--}}
    {{--                        </div>--}}
    {{--                    </div>--}}
    {{--                </div>--}}
    {{--            </div>--}}
    {{--        </div>--}}
    {{--    </div>--}}
    <!-- End Bradcaump area -->
    <!-- Start Product Details Area -->
    <section class="htc__product__details bg__white ptb--100 pt-5">
        <!-- Start Product Details Top -->
        <div class="htc__product__details__top">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 col-lg-5 col-sm-12 col-xs-12">
                        <div class="htc__product__details__tab__content">
                            <!-- Start Product Big Images -->
                            <div class="product__big__images">
                                <div class="portfolio-full-image tab-content">
                                    <div role="tabpanel" class="tab-pane fade show active" id="img-tab-1">
                                        <img src="{{ URL::asset('website/images/product-2/big-img/1.jpg') }}"
                                             alt="full-image">
                                    </div>
                                    <div role="tabpanel" class="tab-pane fade" id="img-tab-2">
                                        <img src="{{ URL::asset('website/images/product-2/big-img/2.jpg') }}"
                                             alt="full-image">
                                    </div>
                                    <div role="tabpanel" class="tab-pane fade" id="img-tab-3">
                                        <img src="{{ URL::asset('website/images/product-2/big-img/3.jpg') }}"
                                             alt="full-image">
                                    </div>
                                    <div role="tabpanel" class="tab-pane fade" id="img-tab-4">
                                        <img src="{{ URL::asset('website/images/product-2/big-img/3.jpg') }}"
                                             alt="full-image">
                                    </div>
                                    <div role="tabpanel" class="tab-pane fade" id="img-tab-5">
                                        <img src="{{ URL::asset('website/images/product-2/big-img/3.jpg') }}"
                                             alt="full-image">
                                    </div>
                                </div>
                            </div>
                            <!-- End Product Big Images -->
                            <!-- Start Small images -->
                            <ul class="product__small__images nav navs-tab flex-nowrap" role="tablist">
                                <li role="presentation" class="pot-small-img">
                                    <a class="active" href="#img-tab-1" role="tab" data-bs-toggle="tab">
                                        <img src="{{ URL::asset('website/images/product-2/sm-img-3/1.jpg') }}"
                                             alt="small-image">
                                    </a>
                                </li>
                                <li role="presentation" class="pot-small-img">
                                    <a href="#img-tab-2" role="tab" data-bs-toggle="tab">
                                        <img src="{{ URL::asset('website/images/product-2/sm-img-3/2.jpg') }}"
                                             alt="small-image">
                                    </a>
                                </li>
                                <li role="presentation" class="pot-small-img">
                                    <a href="#img-tab-3" role="tab" data-bs-toggle="tab">
                                        <img src="{{ URL::asset('website/images/product-2/sm-img-3/3.jpg') }}"
                                             alt="small-image">
                                    </a>
                                </li>
                                <li role="presentation" class="pot-small-img">
                                    <a href="#img-tab-4" role="tab" data-bs-toggle="tab">
                                        <img src="{{ URL::asset('website/images/product-2/sm-img-3/3.jpg') }}"
                                             alt="small-image">
                                    </a>
                                </li>
                                <li role="presentation" class="pot-small-img">
                                    <a href="#img-tab-5" role="tab" data-bs-toggle="tab">
                                        <img src="{{ URL::asset('website/images/product-2/sm-img-3/3.jpg') }}"
                                             alt="small-image">
                                    </a>
                                </li>
                            </ul>
                            <!-- End Small images -->
                        </div>
                    </div>
                    <div class="col-md-12 col-lg-7 col-sm-12 col-xs-12 smt-40 xmt-40">
                        <div class="ht__product__dtl">
                            <h2>jean shirt to sassy girl</h2>
                            <br>
                            <ul class="pro__prize">
                                <li class="old__prize">
                                    <del>$82.5</del>
                                </li>
                                <li>$75.2</li>
                            </ul>
                            <div class="ht__pro__desc">
                                <div class="sin__desc">
                                    <p><span>Availability:</span> In Stock</p>
                                </div>
                                <div class="sin__desc align--left mb-3">
                                    <p><span>Tags:</span></p>
                                    <ul class="pro__cat__list">
                                        <li><a href="#">Fashion,</a></li>
                                        <li><a href="#">Accessories,</a></li>
                                        <li><a href="#">Women,</a></li>
                                        <li><a href="#">Men</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="row my-3">
                                <div class="col-md-2 col-6 mb-3">
                                    <select name="" class="form-control">
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5</option>
                                    </select>
                                </div>
                                <div class="col-md-10 col-6">
                                    <div class="sin__desc align--left" style="margin-top: 4px !important;">
                                        <ul class="pro__color">
                                            <li class="red"><a href="#">red</a></li>
                                            <li class="green"><a href="#">green</a></li>
                                            <li class="balck"><a href="#">balck</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-md-12 col-12"><a href="" class="btn btn-dark MyHover My30Radius">Add
                                        to
                                        cart</a></div>
                            </div>

                            <div class="row">

                                <div class="col-md-12 mt-4">
                                    <h2>
                                        Product Details
                                    </h2>
                                </div>

                                <div class="col-md-12">
                                    <p class="pro__info">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
                                        diam
                                        nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
                                        wisi
                                        enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
                                        nisl ut
                                        aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
                                        vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
                                        facilisis at
                                        vero eros et accumsan Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                                        sed
                                        diam
                                        nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
                                        wisi
                                        enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
                                        nisl ut
                                        aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
                                        vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
                                        facilisis at
                                        vero eros et accumsan</p>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Product Details Top -->
    </section>
    <!-- End Product Details Area -->
    <!-- Start Product Description -->
    <section class="htc__produc__decription bg__white">
        <div class="container">

            <div class="row">
                <hr>
                <div class="col-xs-12">
                    <div class="ht__pro__details__content">
                        <!-- Start Single Content -->
                        <div role="tabpanel" class="pro__single__content">
                            <div class="pro__tab__content__inner">
                                <h4 class="ht__pro__title">Description</h4>
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                                    euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
                                    minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
                                    aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
                                    vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
                                    at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
                                    delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta
                                    nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
                                    possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit
                                    eorum claritatem</p>
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                                    euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Duis autem vel eum
                                    iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
                                    dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
                                    qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
                                    facilisi.</p>
                                <h4 class="ht__pro__title">Standard Featured</h4>
                                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                                    euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
                                    minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
                                    aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
                                    vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
                                    at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
                                    delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta
                                    nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer
                                    possim assum. Typi non habent claritatem insitam; est usus legentis in</p>
                            </div>
                        </div>
                        <!-- End Single Content -->
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Product Description -->
    <!-- Start Product Area -->
    <section class="htc__product__area--2 pb--100 product-details-res">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <div class="section__title--2 text-center">
                        <h2 class="title__line">Related Products</h2>
                        <p>But I must explain to you how all this mistaken idea</p>
                    </div>
                </div>
            </div>
            <div class="product__wrap clearfix">
                <div class="row">
                    <!-- Start Single Product -->
                    <div class="col-md-3 col-6">
                        <div class="category">
                            <div class="ht__cat__thumb">
                                <a href="{{ route('product_detail') }}">
                                    <img src="{{ URL::asset('website/images/product/1.jpg') }}" alt="product images">
                                </a>
                            </div>
                            <div class="fr__hover__info">
                                <ul class="product__action">


                                    <li><a href="{{ route('product_detail') }}"><i class="icon-handbag icons"></i></a>
                                    </li>


                                </ul>
                            </div>
                            <div class="fr__product__inner">
                                <h4><a href="{{ route('product_detail') }}">Largest Water Pot</a></h4>
                                <ul class="fr__pro__prize">
                                    <li class="old__prize">
                                        <del>$30.3</del>
                                    </li>
                                    <li>$25.9</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- End Single Product -->
                    <!-- Start Single Product -->
                    <div class="col-md-3 col-6">
                        <div class="category">
                            <div class="ht__cat__thumb">
                                <a href="{{ route('product_detail') }}">
                                    <img src="{{ URL::asset('website/images/product/2.jpg') }}" alt="product images">
                                </a>
                            </div>
                            <div class="fr__hover__info">
                                <ul class="product__action">


                                    <li><a href="{{ route('product_detail') }}"><i class="icon-handbag icons"></i></a>
                                    </li>


                                </ul>
                            </div>
                            <div class="fr__product__inner">
                                <h4><a href="{{ route('product_detail') }}">Chair collection</a></h4>
                                <ul class="fr__pro__prize">
                                    <li class="old__prize">
                                        <del>$30.3</del>
                                    </li>
                                    <li>$25.9</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- End Single Product -->
                    <!-- Start Single Product -->
                    <div class="col-md-3 col-6">
                        <div class="category">
                            <div class="ht__cat__thumb">
                                <a href="{{ route('product_detail') }}">
                                    <img src="{{ URL::asset('website/images/product/3.jpg') }}" alt="product images">
                                </a>
                            </div>
                            <div class="fr__hover__info">
                                <ul class="product__action">


                                    <li><a href="{{ route('product_detail') }}"><i class="icon-handbag icons"></i></a>
                                    </li>


                                </ul>
                            </div>
                            <div class="fr__product__inner">
                                <h4><a href="{{ route('product_detail') }}">dummy Product name</a></h4>
                                <ul class="fr__pro__prize">
                                    <li class="old__prize">
                                        <del>$30.3</del>
                                    </li>
                                    <li>$25.9</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- End Single Product -->
                    <!-- Start Single Product -->
                    <div class="col-md-3 col-6">
                        <div class="category">
                            <div class="ht__cat__thumb">
                                <a href="{{ route('product_detail') }}">
                                    <img src="{{ URL::asset('website/images/product/4.jpg') }}" alt="product images">
                                </a>
                            </div>
                            <div class="fr__hover__info">
                                <ul class="product__action">


                                    <li><a href="{{ route('product_detail') }}"><i class="icon-handbag icons"></i></a>
                                    </li>


                                </ul>
                            </div>
                            <div class="fr__product__inner">
                                <h4><a href="{{ route('product_detail') }}">Largest Water Pot</a></h4>
                                <ul class="fr__pro__prize">
                                    <li class="old__prize">
                                        <del>$30.3</del>
                                    </li>
                                    <li>$25.9</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- End Single Product -->
                </div>
            </div>
        </div>
    </section>
    <!-- End Product Area -->

@endsection