@extends('frontend.layouts.main')
@section('main-container')
    <section class="product-detail-section">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="product-about-block-new">
                        <div class="breadcrumb-div">
                            <nav aria-label="breadcrumb" style="--bs-breadcrumb-divider: '>';">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="{{ route('frontend.index') }}"
                                            class="breadcrumb-item-link fs-5 text-dark fw-bloder">Home</a></li>
                                    <li class="breadcrumb-item active fs-5 text-dark fw-bloder" aria-current="page">
                                        {{ Str::words($products->product_name, $words = 3, $end = '...') }} </li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-----footer start here -->
    <section class="product-slider">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="product-head pb-3">
                        <h4> {{ $products->product_name }}
                        </h4>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8">
                    <div class="product_slider">
                        <div class="swiper-slide object_fit">
                            <img src="{{ asset($products->avatar) }}" alt="">
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="mb-3">
                        <!-- <span class="amount-price-new"> Rs. 15,999.00 </span> -->
                        <div class="content-detail">
                            <div class="d-flex align-items-center py-2 px-2 border_top">
                                <span>{!! $products->short_description !!}</span>
                                </span>
                            </div>

                            <!-- <div class="d-flex align-items-center py-2 px-2 border_bottom">
                                <span class="product-subtitle">Viewing Angle
                                </span>
                                <span class="product-subtitle-new"> 360 degrees

                                </span>
                            </div>
                            <div class="d-flex align-items-center py-2 px-2 border_bottom">
                                <span class="product-subtitle">Night Vision Range
                                </span>
                                <span class="product-subtitle-new"> 30 feet

                                </span>
                            </div>
                            <h5 class="view_more"> View More</h5> -->
                        </div>
                    </div>
                    <a href="#" class="slider_btn" tabindex="-1" class="btn btn-primary mt-2" data-bs-toggle="modal"
                    data-bs-target="#exampleModal">Get Free Quote</a>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="product_description">
                        <h4 class="category_title pb-1">About this item </h4>
                        <p class="panel_title w-70 mb-0 p-0">{!! $products->description !!}</p>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </section>
    <section class="banner-image pt-3">
        <div class="container">
            <div class="row">
                @foreach ($products->ProductImagesByID as $image)
                    <div class="col-md-6">
                        <div class="banner_image pb-md-0 pb-3 mb-3">
                            <img src="{{ asset($image->thumbnail) }}" class="img-fluid" alt="{{ $products->product_name }}">
                        </div>
                    </div>
                @endforeach

            </div>
        </div>
    </section>
    {{-- <section class="service-section section-block">
        <div class="container">
            <div class="row pb-md-5">
                <div class="col-md-12">
                    <div class="d-flex justify-content-center">
                        <div class="section-haeder text-center">
                            <h3 class="category-head p-0"> Product Feature </h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-md-3 pb-md-4 pb-3">
                    <div class="service-box">
                        <div class="service-box-icon pb-4">
                            <span class="service-icon card-bg1">
                                <i class="fa-solid fa-face-smile text-white fs-2"></i>
                            </span>
                        </div>
                        <div class="service-box-content">
                            <h4 class="category_title m-0"> 7+ Years experience in display
                            </h4>
                            <p class="panel_title">
                                7+ years of hands-on experience in designing and delivering display products that exceed
                                customer expectations
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 pb-md-4 pb-3">
                    <div class="service-box">
                        <div class="service-box-icon pb-4">
                            <span class="service-icon card-bg2">
                                <i class="fa-solid fa-award text-white fs-2"></i>
                            </span>
                        </div>
                        <div class="service-box-content">
                            <h4 class="category_title m-0"> Onsite Service <br> Warranty
                            </h4>
                            <p class="panel_title">
                                7+ years of hands-on experience in designing and delivering display products that exceed
                                customer expectations
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 pb-md-4 pb-3">
                    <div class="service-box">
                        <div class="service-box-icon pb-4">
                            <span class="service-icon card-bg3"><i
                                    class="fa-solid fa-location-dot text-white fs-2"></i></span>
                        </div>
                        <div class="service-box-content">
                            <h4 class="category_title m-0"> Service on 14,000 <br> pincodes
                            </h4>
                            <p class="panel_title">
                                7+ years of hands-on experience in designing and delivering display products that exceed
                                customer expectations
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 pb-md-4 pb-3">
                    <div class="service-box">
                        <div class="service-box-icon pb-4">
                            <span class="service-icon card-bg3"><i
                                    class="fa-solid fa-location-dot text-white fs-2"></i></span>
                        </div>
                        <div class="service-box-content">
                            <h4 class="category_title m-0"> Service on 14,000 <br> pincodes
                            </h4>
                            <p class="panel_title">
                                7+ years of hands-on experience in designing and delivering display products that exceed
                                customer expectations
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 pb-md-4 pb-3">
                    <div class="service-box">
                        <div class="service-box-icon pb-4">
                            <span class="service-icon card-bg1">
                                <i class="fa-solid fa-face-smile text-white fs-2"></i>
                            </span>
                        </div>
                        <div class="service-box-content">
                            <h4 class="category_title m-0"> 4mm Toughen Glass
                            </h4>
                            <p class="panel_title">
                                4mm tempered glass: durable, strong, safe for various applications.


                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 pb-md-4 pb-3">
                    <div class="service-box">
                        <div class="service-box-icon pb-4">
                            <span class="service-icon card-bg2">
                                <i class="fa-solid fa-award text-white fs-2"></i>
                            </span>
                        </div>
                        <div class="service-box-content">
                            <h4 class="category_title m-0"> Moving Wheels
                            </h4>
                            <p class="panel_title">
                                Moving wheels on a Digital standee increase its mobility, making it easy to move around
                                without lifting it or damaging the surface underneath.


                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 pb-md-4 pb-3">
                    <div class="service-box">
                        <div class="service-box-icon pb-4">
                            <span class="service-icon card-bg3"><i
                                    class="fa-solid fa-location-dot text-white fs-2"></i></span>
                        </div>
                        <div class="service-box-content">
                            <h4 class="category_title m-0"> Strong Matalic Body

                            </h4>
                            <p class="panel_title">
                                Tough, metallic exterior built for durability and strength.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 pb-md-4 pb-3">
                    <div class="service-box">
                        <div class="service-box-icon pb-4">
                            <span class="service-icon card-bg3"><i
                                    class="fa-solid fa-location-dot text-white fs-2"></i></span>
                        </div>
                        <div class="service-box-content">
                            <h4 class="category_title m-0"> Easy to Installation
                            </h4>
                            <p class="panel_title">
                                Easy installation saves time and effort for both the user and the provider. It allows
                                the user to quickly start using the product or service, resulting in increased
                                productivity

                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section> --}}
    <section class="faq-section">
        <div class="container">
            <div class="row pb-md-5">
                <div class="col-md-12">
                    <div class="d-flex justify-content-center">
                        <div class="section-haeder text-center">
                            <h3 class="category-head pb-md-0 mb-3"> Frequently Asked Questions
                            </h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <div class="accordion-div">
                        <div class="accordion accordion-flush" id="accordionFlushExample">
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="flush-headingOne">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#flush-collapseOne" aria-expanded="false"
                                        aria-controls="flush-collapseOne">
                                        <span class="category_title">What is a digital standee?</span>
                                    </button>
                                </h2>
                                <div id="flush-collapseOne" class="accordion-collapse collapse"
                                    aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body">
                                        <p class="panel_title">A digital standee is a modern form of advertising and
                                            marketing tool that consists of a digital screen with dynamic content that
                                            displays multimedia messages such as images, videos, and animations to
                                            attract and engage customers.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="flush-headingTwo">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#flush-collapseTwo" aria-expanded="false"
                                        aria-controls="flush-collapseTwo">
                                        <span class="category_title">How are digital standees powered?</span>
                                    </button>
                                </h2>
                                <div id="flush-collapseTwo" class="accordion-collapse collapse"
                                    aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body">
                                        <p class="panel_title">Digital standees are powered by electricity and need to
                                            be connected to a power source to function. Most digital standees come with
                                            a built-in battery backup that enables them to continue displaying content
                                            during power outages.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="flush-headingThree">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#flush-collapseThree" aria-expanded="false"
                                        aria-controls="flush-collapseThree">
                                        <span class="category_title">What types of content can be displayed on a digital
                                            standee?</span>
                                    </button>
                                </h2>
                                <div id="flush-collapseThree" class="accordion-collapse collapse"
                                    aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body">
                                        <p class="panel_title">Digital standees can display a wide range of content such
                                            as images, videos, animations, slideshows, and even live streaming events.
                                            The content can be customized to match the needs of the business or event.
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="flush-headingfour">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#flush-collapsefour" aria-expanded="false"
                                        aria-controls="flush-collapsefour">
                                        <span class="category_title">What are the benefits of using a digital
                                            standee?</span>
                                    </button>
                                </h2>
                                <div id="flush-collapsefour" class="accordion-collapse collapse"
                                    aria-labelledby="flush-headingfour" data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body">
                                        <p class="panel_title">The benefits of using a digital standee include
                                            attracting more customers, enhancing brand awareness, creating an engaging
                                            and immersive experience, increasing sales and revenue, and reducing costs
                                            associated with traditional marketing methods.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title category_title" id="exampleModalLabel">Enquiry Now</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form action="{{ route('frontend.product-detail.store' , $products->slug, $products->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="modal-form">
                            <div class="row pb-2">
                                <div class="col-12">
                                    <input type="hidden" id="product_id" name="product_id" value="{{ $products->id }}"/>
                                    <div class="mb-3">
                                        <label for="user_name" class="form-label label_text">First Name
                                        </label>
                                        <input type="text" class="form-control form_box_new" name="user_name" id="user_name"
                                            placeholder="Enter your Name">
                                    </div>
                                </div>
                            </div>
                            <div class="row pb-2">
                                <div class="col-12">
                                    <div class="mb-3">
                                        <label for="phone_number" class="form-label label_text">Phone Number
                                            *
                                        </label>
                                        <input type="number" name="phone_number" class="form-control form_box_new" id="phone_number"
                                            placeholder="Enter your Number">
                                    </div>
                                </div>
                            </div>
                            <div class="row pb-3">
                                <div class="col-12">
                                    <div class="mb-3">
                                        <label for="message" class="form-label label_text">Message
                                        </label>
                                        <textarea class="form-control form_box_new_" name="message" id="message" rows="3" placeholder="Write Your Message"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="row pb-3">
                            <div class="col-12">
                                <button class=" btn btn-primary slider_btn" type="submit"  value="submit">View Detail</button>
                            </div>
                            </div>
                        </div>
                    </form>
                    
                </div>
            </div>
        </div>
    </div>
@endsection