@extends('layout.app')
@section('Title','4D Escape Trade LLC')
@section('content')

    @php
        if (!empty($indexContent->content)) {
        // Decode the 'content' JSON string into an associative array.
        $decodedContent = json_decode($indexContent->content, true);
    }
    @endphp
    <div class="preLoader black">
        <img src="{{asset('images/4dlogo.png')}}" alt="img">
    </div>
    <div class="preLoader white"></div>

    <div class="mouse-cursor cursor-outer"></div>
    <div class="mouse-cursor cursor-inner"></div>

    <section class="mainSlider">
        <video playsinline="playsinline" muted="muted" preload="yes" autoplay="autoplay" loop="loop" width="1920">
            <source src="{{!empty($indexContent) ? asset('/cms_images/'.$decodedContent['slider_video']) : ''}}" type="video/mp4">
        </video>
        <a href="#" class="mouse"><img src="{{asset('images/mouse.webp')}}" class="img-fluid bounce-element" alt="img"></a>
        <div class="swiper-container homeSlider">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="slide-inner bg-image">
                        <div class="container">
                            <div class="row align-items-center ">
                                <div class="col-md-8">
                                    <div class="slideContent slideOne">
                                        <h3><span>{{$decodedContent['greeting1'] ?? ''}} </span>{{$decodedContent['slider_title1'] ?? ''}} </h3>
                                        <h2>{{$decodedContent['slider_sub_title1'] ?? ''}}</h2>
                                        <p>{!! $decodedContent['slider_des1'] ?? ''  !!}</p>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="slide-inner bg-image">
                        <div class="container">
                            <div class="row align-items-center ">
                                <div class="col-md-8">
                                    <div class="slideContent slideOne">
                                        <h3><span>{{$decodedContent['greeting2'] ?? ''}}</span>{{$decodedContent['slider_title2'] ?? ''}} </h3>
                                        <h2> {{$decodedContent['slider_sub_title2'] ?? ''}}</h2>
                                        <p>{!! $decodedContent['slider_des2'] ?? ''  !!}</p>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="slide-inner bg-image">
                        <div class="container">
                            <div class="row align-items-center ">
                                <div class="col-md-8">
                                    <div class="slideContent slideOne">
                                        <h3><span>{{$decodedContent['greeting3'] ?? ''}} </span>{{$decodedContent['slider_title3'] ?? ''}}</h3>
                                        <h2> {{$decodedContent['slider_sub_title3'] ?? ''}}</h2>
                                        <p>{!! $decodedContent['slider_des3'] ?? ''  !!}</p>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end swiper-wrapper -->
            <div class="swiper-pagination"></div>
        </div>
    </section>

    <section class="escape">
        <div class="container">
            <h3 class="headingOne" data-aos="fade-down">{{!empty($indexContent) ? $decodedContent['custom_title'] : ''}}</h3>

            <p>{{!empty($indexContent) ? $decodedContent['custom_text'] : ''}} </p>
            <div class="row">
                <div class="col-md-3" data-aos="fade-right">
                    <div class="escape-wrap">
                        <figure>
                            <img src="{{!empty($indexContent) ? asset('cms_images/'.$decodedContent['custom_image1']) : ''}}" alt="" class="img-fluid">
                        </figure>
                        <h3>{{!empty($indexContent) ? $decodedContent['custom_title1'] : ''}}</h3>
                    </div>
                </div>
                <div class="col-md-3" data-aos="fade-right">
                    <div class="escape-wrap">
                        <figure>
                            <img src="{{!empty($indexContent) ? asset('cms_images/'.$decodedContent['custom_image2']) : ''}}" alt="" class="img-fluid">
                        </figure>
                        <h3>{{!empty($indexContent) ? $decodedContent['custom_title2'] : ''}}</h3>
                    </div>
                </div>
                <div class="col-md-3" data-aos="fade-left">
                    <div class="escape-wrap">
                        <figure>
                            <img src="{{!empty($indexContent) ? asset('cms_images/'.$decodedContent['custom_image3']) : ''}}" alt="" class="img-fluid">
                        </figure>
                        <h3>{{!empty($indexContent) ? $decodedContent['custom_title3'] : ''}}</h3>
                    </div>
                </div>
                <div class="col-md-3" data-aos="fade-left">
                    <div class="escape-wrap">
                        <figure>
                            <img src="{{!empty($indexContent) ? asset('cms_images/'.$decodedContent['custom_image4']) : ''}}" alt="" class="img-fluid">
                        </figure>
                        <h3>{{!empty($indexContent) ? $decodedContent['custom_title4'] : ''}}</h3>
                    </div>
                </div>

            </div>
        </div>
    </section>

    <section class="video">
        <div class="container">
            <div class="row">
                <div class="videoImg" data-aos="fade-down">
                    <figure>
                        <img src="{{!empty($indexContent) ? asset('cms_images/'.$decodedContent['custom_youtube_image']) : ''}}" class="img-fluid w-100" alt="img">
                        <a data-fancybox="" href="{{!empty($indexContent) ? $decodedContent['custom_youtube_link'] : ''}}">
                            <div><i class="fab fa-youtube"></i></div>
                        </a>
                    </figure>
                </div>
                <div class="conten-vid" data-aos="fade-right">
                    <h3>{{!empty($indexContent) ? $decodedContent['custom_last_title'] : ''}}</h3>
                    <p>{{!empty($indexContent) ? $decodedContent['custom_last_des'] : ''}}</p>
                    <a href="{{!empty($indexContent) ? $decodedContent['custom_button_url'] : ''}}" class="themeBtn">{{!empty($indexContent) ? $decodedContent['custom_button'] : ''}}</a>
                </div>
            </div>
            <div class="onlinerom">
                <h3 class="headingOne" data-aos="fade-down">{{!empty($indexContent) ? $decodedContent['team_first_title'] : ''}}</h3>
                <p>{{!empty($indexContent) ? $decodedContent['team_text'] : ''}}</p>
                <div class="row">
                    <div class="col-md-4" data-aos="fade-right">
                        <figure><img src="{{!empty($indexContent) ? asset('cms_images/'.$decodedContent['team_image1']) : ''}}" alt=""></figure>
                        <div class="onlinewrap">
                            <h4>{!! !empty($indexContent) ? $decodedContent['team_title1'] : '' !!}</h4>
                        </div>
                    </div>
                    <div class="col-md-4" data-aos="fade-up">
                        <figure><img src="{{!empty($indexContent) ? asset('cms_images/'.$decodedContent['team_image2']) : ''}}" alt=""></figure>
                        <div class="onlinewrap">
                            <h4>{!! !empty($indexContent) ? $decodedContent['team_title2'] : '' !!}</h4>
                        </div>
                    </div>
                    <div class="col-md-4" data-aos="fade-left">
                        <figure><img src="{{!empty($indexContent) ? asset('cms_images/'.$decodedContent['team_image3']) : ''}}" alt=""></figure>
                        <div class="onlinewrap">
                            <h4>{!! !empty($indexContent) ? $decodedContent['team_title3'] : '' !!}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="tesi-detail">
        <div class="container">
            <div class="row">
                <div class="col-md-6" data-aos="fade-right">
                    <h4>{{!empty($indexContent) ? $decodedContent['team_end_title1'] : ''}}</h4>
                    <p>{{!empty($indexContent) ? $decodedContent['team_end_des1'] : ''}}</p>
                    <h4>{{!empty($indexContent) ? $decodedContent['team_end_title2'] : ''}} </h4>
                    <p>{{!empty($indexContent) ? $decodedContent['team_end_des2'] : ''}}</p>
                    <a href="#" class="themeBtn">The Escape Room Concept</a>
                </div>
                <div class="col-md-6" data-aos="fade-left">
                    <figure>
                        <img src="{{!empty($indexContent) ? asset('cms_images/'.$decodedContent['team_image4']) : ''}}" alt="img" class="about1 img-fluid ">
                        <img src="{{!empty($indexContent) ? asset('cms_images/'.$decodedContent['team_image5']) : ''}}" alt="img" class="about2 img-fluid">
                        <img src="{{!empty($indexContent) ? asset('cms_images/'.$decodedContent['team_image6']) : ''}}" alt="img" class="about3 img-fluid">
                        <img src="{{!empty($indexContent) ? asset('cms_images/'.$decodedContent['team_image7']) : ''}}" alt="img" class="about4 img-fluid">
                        <img src="{{!empty($indexContent) ? asset('cms_images/'.$decodedContent['team_image8']) : ''}}" alt="img" class="about5 img-fluid">
                    </figure>
                </div>
            </div>
            <div class="testimonails">
                <h3 class="headingOne" data-aos="fade-down">Testimonials</h3>
                <div class="swiper testislider">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="testimonialBox">
                                <div class="userOne">
                                    <figure><img src="{{asset('images/user1.webp')}}" class="img-fluid" alt="img">
                                    </figure>
                                    <div class="usrContent">
                                        <h2> –Anna Elba- </h2>
                                    </div>
                                </div>
                                <p>Our company has partnered with 4D Escape Trade LLC for the past two years and relies
                                    on them to design, construct and manage the infrastructure for its international
                                    trade show. They oversee our entire tradeshow, and we must say that their services
                                    are exceptional. </p>
                            </div>

                        </div>
                        <div class="swiper-slide">
                            <div class="testimonialBox">
                                <div class="userOne">
                                    <figure><img src="{{asset('images/user1.webp')}}" class="img-fluid" alt="img">
                                    </figure>
                                    <div class="usrContent">
                                        <h2>–Tim Hank- </h2>
                                    </div>
                                </div>
                                <p>The 4D Escape Trade LLC team is hardworking, enthusiastic, talented, and a pleasure
                                    to work with. We contacted them to install an escape room at our facility. They had
                                    completed the job within the deadline. We have just inaugurated our fun space, and
                                    everyone loved it. </p>
                            </div>

                        </div>
                        <div class="swiper-slide">
                            <div class="testimonialBox">
                                <div class="userOne">
                                    <figure><img src="{{asset('images/user1.webp')}}" class="img-fluid" alt="img">
                                    </figure>
                                    <div class="usrContent">
                                        <h2>–Arya John-</h2>
                                    </div>
                                </div>
                                <p>I worked with 4D Escape Trade LLC two months back. They are very dedicated and will
                                    do whatever to keep you satisfied. They know their work well and will make the
                                    procedure easier and hassle-free for you. I would definitely recommend them for
                                    designing and installing themed facilities; they will give their all to satisfy your
                                    needs </p>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="mapSection wow fadeInUp" data-wow-delay="0.5s">
        <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3744744.6253010477!2d-102.56163816871374!3d39.57901766315014!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54eab584e432360b%3A0x1c3bb99243deb742!2sUnited%20States!5e0!3m2!1sen!2s!4v1633689177080!5m2!1sen!2s"
            style="border:0;" allowfullscreen="" loading="lazy"></iframe>
    </section>

    <section class="faq">
        <div class="container">
            <h3 class="headingOne" data-aos="fade-down">Frequently Asked Questions (FAQs)</h3>
            <div class="row">
                <div class="col-md-12" data-aos="fade-right">
                    <div id="accordion">
                        @foreach($faqsCrud as $index => $faq)
                            <div class="card">
                                <div class="card-header" id="heading{{ $index }}">
                                    <h5 class="mb-0">
                                        <button class="btn btn-link" data-toggle="collapse" data-target="#collapse{{ $index }}" data-expanded="{{ $index === 0 ? 'true' : 'false' }}" aria-controls="collapse{{ $index }}">
                                            <span>{{ $faq->question ?? '' }}</span>
                                            <i class="fas {{ $index === 0 ? 'fa-minus' : 'fa-plus' }}" id="icon{{ $index }}"></i>
                                        </button>
                                    </h5>
                                </div>

                                <div id="collapse{{ $index }}" class="collapse {{ $index === 0 ? 'show' : '' }}" aria-labelledby="heading{{ $index }}" data-parent="#accordion">
                                    <div class="card-body">
                                        <p>{!! $faq->answer ?? '' !!}</p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
{{--                        <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>Can you--}}
{{--                                        prepare our escape room according to our preference?--}}

{{--                                        <i class="fas fa-plus"></i>--}}
{{--                                    </button>--}}
{{--                                </h5>--}}
{{--                            </div>--}}
{{--                            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"--}}
{{--                                 data-parent="#accordion">--}}
{{--                                <div class="card-body">--}}
{{--                                    <p>YES! We can design and build any custom trade show or themed facility as per your--}}
{{--                                        choice. Our customer-focused approach has enabled us to meet our client's--}}
{{--                                        diverse design and installation needs proficiently. We can do any--}}
{{--                                        personalization with regard to the flow or design. </p>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        <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>What are the things required to prepare the escape room?--}}
{{--                                        <i class="fas fa-plus"></i>--}}
{{--                                    </button>--}}
{{--                                </h5>--}}
{{--                            </div>--}}
{{--                            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"--}}
{{--                                 data-parent="#accordion">--}}
{{--                                <div class="card-body">--}}
{{--                                    <p>Your escape room should have ER installation, finished wiring based on wiring--}}
{{--                                        schematics provided by our team, and the presence of an Ethernet cable (to the--}}
{{--                                        local network) or 220V line near the Black Box. Moreover, its walls should be--}}
{{--                                        built, and the paint should be finished so the players can enjoy themselves to--}}
{{--                                        their fullest. </p>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        <div class="card ">--}}
{{--                            <div id="headingTwo ">--}}
{{--                                <h5 class="mb-0">--}}
{{--                                    <button class="btn btn-link collapsed" data-toggle="collapse"--}}
{{--                                            data-target="#collapsethree" aria-expanded="false"--}}
{{--                                            aria-controls="collapsethree">--}}
{{--                                        <span></span>Do your charges fixed or negotiable? Is it possible to adjust the--}}
{{--                                        price according to our budget?--}}
{{--                                        <i class="fas fa-plus"></i>--}}
{{--                                    </button>--}}
{{--                                </h5>--}}
{{--                            </div>--}}
{{--                            <div id="collapsethree" class="collapse" aria-labelledby="headingthree"--}}
{{--                                 data-parent="#accordion">--}}
{{--                                <div class="card-body">--}}
{{--                                    <p>Yes! The prices can be reduced or changed, either eliminating or adding some--}}
{{--                                        props, puzzles, or decorations. As we are a one-stop destination to provide--}}
{{--                                        complete services for escape rooms and trade shows, we recommend buying the--}}
{{--                                        complete set in to make it as immersive as possible, as the audience wants the--}}
{{--                                        full effect. </p>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        <div class="card ">--}}
{{--                            <div id="headingTwo ">--}}
{{--                                <h5 class="mb-0">--}}
{{--                                    <button class="btn btn-link collapsed" data-toggle="collapse"--}}
{{--                                            data-target="#collapsefour" aria-expanded="false"--}}
{{--                                            aria-controls="collapsefour">--}}
{{--                                        <span></span>What if something in my escape room breaks down?--}}
{{--                                        <i class="fas fa-plus"></i>--}}
{{--                                    </button>--}}
{{--                                </h5>--}}
{{--                            </div>--}}
{{--                            <div id="collapsefour" class="collapse" aria-labelledby="headingfour"--}}
{{--                                 data-parent="#accordion">--}}
{{--                                <div class="card-body">--}}
{{--                                    <p>In case of any issues with our products, we will assist you in resolving them.--}}
{{--                                        You can demonstrate your issue through video or images. If you have some queries--}}
{{--                                        or concerns about our services or products, you can connect with us at--}}
{{--                                        407-373-4431. If the issue is internal, we will send our team of professionals--}}
{{--                                        who will review and resolve the problem </p>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
                    </div>
                </div>
            </div>
        </div>
    </section>

{{--    <section class="cta">--}}
{{--        <div class="container">--}}
{{--            <div class="row justify-content-between">--}}
{{--                <figure><img src="{{asset('images/cta-afetr.webp')}}" alt="" class="cta-before" data-aos="fade-right">--}}
{{--                </figure>--}}
{{--                <div class="col-md-7" data-aos="fade-left">--}}
{{--                    <div class="form">--}}
{{--                        <h3 class="headingOne">Sign Up for Our Newsletter! </h3>--}}
{{--                        <p>Sign up to stay updated about the latest puzzle and escape room releases and discount--}}
{{--                            codes! </p>--}}
{{--                        <form action="" class="aos-init aos-animate">--}}
{{--                            <input type="email" placeholder="Email address">--}}
{{--                            <button class="btn" type="submit">Sign Up</button>--}}
{{--                        </form>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </section>--}}

@endsection