@extends('front.layout.app')
@section('title', 'Product Page')
@section('content')
    <section class="inner-banner">
        <img src="{{ asset('front/assets/images/inner-bg.webp') }}" alt="image" class="img-fluid w-100 h-100">
        <div class="container">
            <div class="inner-banner__content">
                <div class="row">
                    <div class="col-lg-6">
                        <h1 class="font-bold">Product Page</h1>
                        <p>
                            It is a long established fact that a reader will be distracted by the readable content of a
                            page when looking at its layout.
                        </p>
                        <div class="btn-group">
                            <a href="about.php" class="themeBtn">Learn More</a>
                            <a href="contact.php" class="themeBtn">Contact Us</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="inner-banner__bottom">
            <div class="container">
                <ul class="bottom__links d-flex align-items-center justify-content-start">
                    <li><a href="{{ route('front.index') }}"><span><i class="fas fa-home"></i></span> Home</a></li>
                    <li><a href=""><span><i class="fas fa-angle-right"></i></span> Cart</a></li>
                </ul>
            </div>
        </div>
    </section>

    @if ($find)
        <section class="product-detail padd-y">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <div class="swiper productSlider">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <figure class="productSlider-img">
                                        <img src="{{ $find->productImage('product_image') }}" alt="image"
                                            class="img-fluid">
                                    </figure>
                                </div>
                                <div class="swiper-slide">
                                    <figure class="productSlider-img">
                                        <img src="{{ $find->productImage('product_image') }}" alt="image"
                                            class="img-fluid">
                                    </figure>
                                </div>
                                <div class="swiper-slide">
                                    <figure class="productSlider-img">
                                        <img src="{{ $find->productImage('product_image') }}" alt="image"
                                            class="img-fluid">
                                    </figure>
                                </div>
                                <div class="swiper-slide">
                                    <figure class="productSlider-img">
                                        <img src="{{ $find->productImage('product_image') }}" alt="image"
                                            class="img-fluid">
                                    </figure>
                                </div>
                            </div>
                        </div>
                        <div thumbsSlider="" class="swiper thumbproductSlider">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <figure class="thumbproductSlider-img">
                                        <img src="{{ $find->productImage('product_image') }}" alt="image"
                                            class="img-fluid">
                                    </figure>
                                </div>
                                <div class="swiper-slide">
                                    <figure class="thumbproductSlider-img">
                                        <img src="{{ $find->productImage('product_image') }}" alt="image"
                                            class="img-fluid">
                                    </figure>
                                </div>
                                <div class="swiper-slide">
                                    <figure class="thumbproductSlider-img">
                                        <img src="{{ $find->productImage('product_image') }}" alt="image"
                                            class="img-fluid">
                                    </figure>
                                </div>
                                <div class="swiper-slide">
                                    <figure class="thumbproductSlider-img">
                                        <img src="{{ $find->productImage('product_image') }}" alt="image"
                                            class="img-fluid">
                                    </figure>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="product-main">
                            <h3> {{ $find->name }}</h3>
                            <div class="product-review">
                                {{-- <ul class="review-stars">
                                    <li><i class="fas fa-star"></i></li>
                                    <li><i class="fas fa-star"></i></li>
                                    <li><i class="fas fa-star"></i></li>
                                    <li><i class="fas fa-star"></i></li>
                                    <li><i class="fas fa-star"></i></li>
                                </ul> --}}
                                <div class="review-content">
                                    {{-- <p>288 reviews</p>
                                <p>100ml</p> --}}
                                </div>
                            </div>
                            <h4>$ {{ $find->price }}</h4>
                            <div class="product-content">
                                <p>
                                    {{ $find->description }}
                                    {{-- Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum
                                is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende
                                drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te
                                maken. --}}
                                </p>
                                {{-- <a href="">Read more...</a> --}}
                            </div>
                            <div class="product-btn">
                                {{-- <select>
                                <option value="100ml">100ml</option>
                                <option value="100ml">100ml</option>
                                <option value="100ml">100ml</option>
                            </select> --}}
                                <div class="numberone d-flex">
                                    <span class="minus"><i class="fas fa-minus"></i></span>
                                    <input class="in-num" name="quantity" value="1" type="number" min="1"
                                        readonly>
                                    <span class="plus"><i class="fas fa-plus"></i></span>
                                </div>
                                @if (Auth::check() && Auth::user()->hasRole('user'))
                                    <a class="themeBtn add_to_cart_btn">Add to cart</a>
                                @endif
                            </div>
                            <input type="hidden" value="{{ $find->id }}" id="product_id">
                            <input type="hidden" value="{{ $find->price }}" id="price">
                            <input type="hidden" value="{{ $find->description }}" id="description">
                            <input type="hidden" value="{{ $find->name }}" id="name">
                            <div class="product-wishlist">
                                <a href=""><span><i class="far fa-heart"></i></span> Add to wishlist</a>
                                <p><span><i class="fas fa-arrow-circle-left"></i></span> 30 days money back guarantee</p>
                            </div>
                        </div>
                        {{-- <ul class="product-tab-nav nav nav-pills" id="pills-tab" role="tablist">
                            @if ($find->details == 1)
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="pills-details-tab" data-toggle="pill"
                                        data-bs-target="#pills-details" type="button" role="tab"
                                        aria-controls="pills-details" aria-selected="true">Details</button>
                                </li>
                            @endif

                            @if ($find->packaging == 1)
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-packaging-tab" data-toggle="pill"
                                        data-bs-target="#pills-packaging" type="button" role="tab"
                                        aria-controls="pills-packaging" aria-selected="false">Packaging</button>
                                </li>
                            @endif
                            @if ($find->shipping_details == 1)
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-shipping-tab" data-toggle="pill"
                                        data-bs-target="#pills-shipping" type="button" role="tab"
                                        aria-controls="pills-shipping" aria-selected="false">Shipping details</button>
                                </li>
                            @endif

                        </ul>
                        <div class="product-tab-content tab-content" id="pills-tabContent">
                            <div class="tab-pane fade show active" id="pills-details" role="tabpanel"
                                aria-labelledby="pills-details-tab">
                                <div id="accordion">
                                    @if ($find->heading1)
                                        <div class="card">
                                            <div id="headingOne ">
                                                <h5 class="mb-0 ">
                                                    <button class="btn btn-link" data-toggle="collapse"
                                                        data-target="#collapseOne" aria-expanded="true"
                                                        aria-controls="collapseOne"><span></span>
                                                        {{ $find->heading1 }} KEY FEATURES
                                                        <i class="fas fa-angle-up"></i>
                                                    </button>
                                                </h5>
                                            </div>
                                            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                                                data-parent="#accordion">
                                                <div class="card-body">
                                                    <p>
                                                        {{ $find->description1 ?? '' }}
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    @endif

                                    <div class="card">
                                        <div id="headingTwo ">
                                            <h5 class="mb-0">
                                                <button class="btn btn-link collapsed" data-toggle="collapse"
                                                    data-target="#collapseTwo" aria-expanded="false"
                                                    aria-controls="collapseTwo">
                                                    <span></span>
                                                    INGREDIENTS
                                                    <i class="fas fa-angle-up"></i>
                                                </button>
                                            </h5>
                                        </div>
                                        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
                                            data-parent="#accordion">
                                            <div class="card-body">
                                                <p>
                                                    Lorem Ipsum is slechts een proeftekst uit het drukkerij- en
                                                    zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze
                                                    bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak
                                                    met letters nam en ze door elkaar husselde om een font-catalogus te
                                                    maken.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card">
                                        <div id="headingThree">
                                            <h5 class="mb-0">
                                                <button class="btn btn-link collapsed" data-toggle="collapse"
                                                    data-target="#collapsethree" aria-expanded="false"
                                                    aria-controls="collapsethree">
                                                    <span></span>
                                                    HOW TO USE
                                                    <i class="fas fa-angle-up"></i>
                                                </button>
                                            </h5>
                                        </div>
                                        <div id="collapsethree" class="collapse" aria-labelledby="headingthree"
                                            data-parent="#accordion">
                                            <div class="card-body">
                                                <p>
                                                    Lorem Ipsum is slechts een proeftekst uit het drukkerij- en
                                                    zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze
                                                    bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak
                                                    met letters nam en ze door elkaar husselde om een font-catalogus te
                                                    maken.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card">
                                        <div id="headingfour">
                                            <h5 class="mb-0">
                                                <button class="btn btn-link collapsed" data-toggle="collapse"
                                                    data-target="#collapsefour" aria-expanded="false"
                                                    aria-controls="collapsefour">
                                                    <span></span>
                                                    QUALITY
                                                    <i class="fas fa-angle-up"></i>
                                                </button>
                                            </h5>
                                        </div>
                                        <div id="collapsefour" class="collapse" aria-labelledby="headingfour"
                                            data-parent="#accordion">
                                            <div class="card-body">
                                                <p>
                                                    Lorem Ipsum is slechts een proeftekst uit het drukkerij- en
                                                    zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze
                                                    bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak
                                                    met letters nam en ze door elkaar husselde om een font-catalogus te
                                                    maken.
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pills-packaging" role="tabpanel"
                                aria-labelledby="pills-packaging-tab">

                            </div>
                            <div class="tab-pane fade" id="pills-shipping" role="tabpanel"
                                aria-labelledby="pills-shipping-tab">

                            </div>
                        </div> --}}
                    </div>
                </div>
            </div>
        </section>
    @endif
@endsection