@extends('frontend.layout.app')
@section('content')
    <!--Start breadcrumb area paroller-->
    <section class="breadcrumb-area">
        <div class="breadcrumb-area-bg"
            style="background-image: url({{ asset('frontend/images/breadcrumb/breadcrumb-1.jpg') }});"></div>
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="inner-content text-center">
                        <div class="title">
                            <h2>Product Details</h2>
                        </div>
                        <div class="breadcrumb-menu">
                            <ul>
                                <li><a href="{{ route('front.index') }}">Home</a></li>
                                <li><i class="fa fa-angle-right" aria-hidden="true"></i></li>
                                <li class="active">Product Details</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--End breadcrumb area-->

    <!--Start Product Details Area-->
    <section class="product-details-area">
        <div class="container">
            @if (Session::has('success'))
                <div class="alert alert-success alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <strong>{{ Session::get('success') }}</strong>
                </div>
            @endif
            <div class="row">
                <div class="col-xl-6">
                    <div class="product-details-image-box">
                        <div class="product-details-main-image">
                            <ul class="bxslider">
                                <li>
                                    <div class="single-box clearfix">
                                        <div class="img-holder">
                                            <img src="{{ asset('/storage/product/' . $product_data->image) }}"
                                                alt="Awesome Image">
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="slider-pager">
                            <ul class="thumb-box">
                                @foreach ($product_data->gallery ?? [] as $key => $image)
                                    <li>
                                        <a class="active" data-slide-index="{{ $key + 1 }}" href="#">
                                            <div class="thumb-image">
                                                <img src="{{ asset('storage/product_gallery/' . $image) }}"
                                                    alt="Awesome Thumb Image">
                                            </div>
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-xl-6">
                    <div class="product-details-content-box">
                        <div class="top">
                            <div class="rate-box">
                                <div class="current-rate">
                                    <h3>Rs. {{ $product_data->price }}</h3>
                                </div>
                                <div class="old-rate">
                                    <del>Rs. {{ $product_data->dis_price }}</del>
                                </div>
                            </div>
                            <div class="review-box">
                                <ul>
                                    <li><i class="fa fa-star"></i></li>
                                    <li><i class="fa fa-star"></i></li>
                                    <li><i class="fa fa-star"></i></li>
                                    <li><i class="fa fa-star"></i></li>
                                    <li><i class="fa fa-star"></i></li>
                                </ul>
                            </div>
                        </div>
                        <div class="product-title">
                            <h2>{{ $product_data->name }}</h2>
                        </div>
                        <div class="product-description">
                            <p>{{ $product_data->description }}</p>
                        </div>
                        <div class="product-info">
                            <ul>
                                <li>
                                    <div class="inner">
                                        <div class="icon">
                                            <span class="icon-delivery-truck"><span class="path1"></span><span
                                                    class="path2"></span><span class="path3"></span><span
                                                    class="path4"></span><span class="path5"></span><span
                                                    class="path6"></span><span class="path7"></span><span
                                                    class="path8"></span><span class="path9"></span><span
                                                    class="path10"></span></span>
                                        </div>
                                        <div class="title">
                                            <h4>Fast & On time<br> Delivery</h4>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="inner">
                                        <div class="icon">
                                            <span class="icon-vision"><span class="path1"></span><span
                                                    class="path2"></span><span class="path3"></span><span
                                                    class="path4"></span><span class="path5"></span><span
                                                    class="path6"></span><span class="path7"></span><span
                                                    class="path8"></span><span class="path9"></span><span
                                                    class="path10"></span><span class="path11"></span></span>
                                        </div>
                                        <div class="title">
                                            <h4>COD<br> Available</h4>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="inner">
                                        <div class="icon">
                                            <span class="icon-diamond"><span class="path1"></span><span
                                                    class="path2"></span><span class="path3"></span><span
                                                    class="path4"></span><span class="path5"></span><span
                                                    class="path6"></span><span class="path7"></span><span
                                                    class="path8"></span><span class="path9"></span><span
                                                    class="path10"></span><span class="path11"></span><span
                                                    class="path12"></span><span class="path13"></span><span
                                                    class="path14"></span></span>
                                        </div>
                                        <div class="title">
                                            <h4>Quality<br> Gurantee</h4>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="product-details-cart-box clearfix">
                            <div class="inner">
                                <div class="button-box">
                                    <button type="button" class="btn-one" data-toggle="modal" data-target="#myModal">
                                        <span class="round"></span>
                                        <span class="txt">Enquiry Now</span>
                                    </button>
                                </div>
                            </div>
                            <!-- The Modal -->
                            <div class="modal" id="myModal">
                                <div class="modal-dialog">
                                    <div class="modal-content">

                                        <!-- Modal Header -->
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        </div>

                                        <!-- Modal body -->
                                        <div class="modal-body">
                                            <div class="contact-style1_form">
                                                <div class="contact-form">
                                                    <form action="{{ route('front.product-enquiry') }}"
                                                        class="default-form2" method="POST">
                                                        @csrf
                                                        <div class="row">
                                                            <div class="col-xl-12">
                                                                <div class="input-box-form">
                                                                    <input type="hidden" name="product"
                                                                        value="{{ $product_data->id }}">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-xl-12">
                                                                <div class="input-box-form">
                                                                    <input type="text" name="name" value=""
                                                                        required placeholder="Full Name">
                                                                    <div class="icon">
                                                                        <i class="fa fa-user" aria-hidden="true"></i>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-xl-12">
                                                                <div class="input-box-form">
                                                                    <input type="email" name="email" value=""
                                                                        required placeholder="Email">
                                                                    <div class="icon">
                                                                        <i class="fa fa-envelope" aria-hidden="true"></i>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-xl-12">
                                                                <div class="input-box-form">
                                                                    <input type="text" name="phone" value=""
                                                                        required placeholder="Phone">
                                                                    <div class="icon">
                                                                        <i class="fa fa-phone" aria-hidden="true"></i>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-xl-12">
                                                                <div class="input-box-form two">
                                                                    <textarea name="message" placeholder="Enter your message..." required></textarea>
                                                                    <div class="icon">
                                                                        <i class="fa fa-text-width"
                                                                            aria-hidden="true"></i>
                                                                    </div>
                                                                </div>
                                                                <div class="button-box">
                                                                    <button type="submit" class="btn-one">
                                                                        <span class="round"></span>
                                                                        <span class="txt">Send Message</span>
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Modal footer -->
                                        <div class="modal-footer">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="coupon-code-box">
                            <h6>Contact: <span>+{{ websiteSetupValue('whats_app_number') }}</span></h6>
                        </div>
                    </div>
                </div>
            </div>
            <div class="related-product-box">
                <div class="shop-page-title">
                    <h2>Related Products</h2>
                </div>
                <div class="row">
                    <!--Start Single Shop Item-->
                    @foreach ($products as $product)
                        <div class="col-xl-4 col-lg-6 col-md-6">
                            <div class="single-shop-item single-shop-item--style2">
                                <div class="single-shop-item_inner">
                                    <div class="img-holder">
                                        <img src="{{ asset('/storage/product/' . $product->image) }}" alt="">
                                    </div>
                                    <div class="title-holder">
                                        <h3><a
                                                href="{{ route('front.product-detail', $product->slug) }}">{{ $product->name }}</a>
                                        </h3>
                                        <h6>Rs. {{ $product->price }}</h6>
                                        <p>{{ $product->getCategory->name }}</p>
                                        <div class="btn-box">
                                            <a class="btn-one"
                                                href="{{ route('front.product-detail', $product->slug) }}">
                                                <div class="round"></div>
                                                <span class="txt">View Details</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                    <!--End Single Shop Item-->
                </div>
            </div>
        </div>
    </section>
    <!--End Product Details Area-->
@endsection