@extends('layout.app')
@section('Title','4D Escape Trade LLC')
@section('content')
    @php
        if (!empty($puzzles->content)) {
            // Decode the 'content' JSON string into an associative array.
            $decodedData = json_decode($puzzles->content, true);
        }
    @endphp
    <div class="preLoader black">
        <img src="{{asset('images/logo.webp')}}" alt="img">
    </div>
    <div class="preLoader white"></div>

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

    <!-- Begin: Main Slider -->
    <div class="innerBan">
        <img src="{{!empty($puzzles) ? asset('cms_images/'.$decodedData['banner_image']) : ''}}" class="w-100" alt="">
        <div class="overlay">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <h2>{{!empty($puzzles) ? $decodedData['banner_title'] : ''}} </h2>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <section class="puzzleSec">
        <div class="container">
            <div class="row ">
                <div class="col-md-12">
                    <div class="puzzlewrap">
                        <h2>{{!empty($puzzles) ? $decodedData['escape_title'] : ''}}</h2>
                        <p>{!! !empty($puzzles) ? $decodedData['escape_des'] : ''  !!}</p>
                        <h2>{{!empty($puzzles) ? $decodedData['custom_title'] : ''}} </h2>
                        <p>{!! !empty($puzzles) ? $decodedData['custom_des'] : ''  !!}</p>
                        <figure>
                            <img src="{{!empty($puzzles) ? asset('cms_images/'.$decodedData['puzzle_image1']) : ''}}" class="img-fluid" alt="">
                        </figure>
                      <div class="text-center">
                      <a href="{{!empty($puzzles) ? $decodedData['puzzle_button_url1'] : ''}}" class="themeBtn">{{!empty($puzzles) ? $decodedData['puzzle_button1'] : ''}}</a>
                      </div>
                        <figure>
                            <img src="{{!empty($puzzles) ? asset('cms_images/'.$decodedData['puzzle_image2']) : ''}}" class="img-fluid" alt="">
                        </figure>
                        <div class="text-center">
                      <a href="{{!empty($puzzles) ? $decodedData['puzzle_button_url2'] : ''}}" class="themeBtn">{{!empty($puzzles) ? $decodedData['puzzle_button2'] : ''}}</a>
                      </div>
                    </div>
                </div>
                <div class="col-md-6 puzlimg">
                    <figure>
                        <img src="{{!empty($puzzles) ? asset('cms_images/'.$decodedData['puzzle_image3']) : ''}}" class="img-fluid" alt="">
                    </figure>
                    <a href="{{!empty($puzzles) ? $decodedData['puzzle_button_url2'] : ''}}" class="themeBtn">{{!empty($puzzles) ? $decodedData['puzzle_button2'] : ''}}</a>
                </div>
                <div class="col-md-6 puzlimg">
                    <figure>
                        <img src="{{!empty($puzzles) ? asset('cms_images/'.$decodedData['puzzle_image4']) : ''}}" class="img-fluid" alt="">
                    </figure>
                    <a href="{{!empty($puzzles) ? $decodedData['puzzle_button_url3'] : ''}}" class="themeBtn">{{!empty($puzzles) ? $decodedData['puzzle_button3'] : ''}}</a>
                </div>
            </div>
        </div>

    </section>



    <section class="onlinepuzzl">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-12">
                    <h2>{{ !empty($puzzles) && isset($decodedData['challenge_title']) ? $decodedData['challenge_title'] : '' }}
                    </h2>
                </div>

                @foreach($challenges as $challenge)
                <div class="col-md-5 imgg2">
                    <figure>
                        <img src="{{asset('/challenge_images/'.$challenge->image ?? '')}}" alt="">
                    </figure>
                </div>
                <div class="col-md-7">
                    <h3>{{$challenge->name ?? ''}}:{{$challenge->title ?? ''}}</h3>
                    <p>{!! $challenge->description ?? ''  !!}</p>
                </div>
                @endforeach

{{--                <div class="col-md-5 imgg2">--}}
{{--                    <figure>--}}
{{--                        <img src="{{asset('images/puzz6.png')}}" alt="">--}}
{{--                    </figure>--}}
{{--                </div>--}}
{{--                <div class="col-md-7">--}}
{{--                    <h3>Puzzle #9: Can You Solve The<br>--}}
{{--                        Hidden Symbol Puzzle?</h3>--}}
{{--                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>--}}
{{--                </div>--}}


{{--                <div class="col-md-5 imgg2">--}}
{{--                    <figure>--}}
{{--                        <img src="{{asset('images/puzz7.png')}}" alt="">--}}
{{--                    </figure>--}}
{{--                </div>--}}
{{--                <div class="col-md-7">--}}
{{--                    <h3>Puzzle #8: Can You Solve The<br>--}}
{{--                        Pentagon Puzzle?</h3>--}}
{{--                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>--}}
{{--                </div>--}}


{{--                <div class="col-md-5 imgg2">--}}
{{--                    <figure>--}}
{{--                        <img src="{{asset('images/puzz8.png')}}" alt="">--}}
{{--                    </figure>--}}
{{--                </div>--}}
{{--                <div class="col-md-7">--}}
{{--                    <h3>Puzzle #7: Can You Solve The<br>--}}
{{--                        Word Lock Puzzle?</h3>--}}
{{--                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>--}}
{{--                </div>--}}

                <div class="col-md-12 orangeclr">
                    <h3>More Escape Room Puzzles and Brainteasers</h3>
                </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">get The News First</h3>--}}
{{--                        <p>Sign Up to recive our email newsletter, and be the first to find out about promotions and giveaways</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