@extends('components.home')


@section('themeStylesheet')
    <style>
        {{ $themeStylesheet }}
    </style>
@endsection


@section('brandThemeOverrideSettings')
    <style>
        {{ $brandThemeOverrideSettings }}
    </style>
@endsection


@section('brandBackground')
    @if($brandBackground!=='' && !empty($brandBackground))
        style="background-image:url('{{ $brandBackground }}');"
    @endif
@endsection


@section('content')

    <!-- If we have a Pendng Order, let's give the user a way to see the order -->
    @if($hasPendingOrder)
        <div class="row mx-0 py-2 pending-order--wrapper text-center w-100"
             x-data
             x-on:click="pageLoader=true,window.location.href = '/pendingOrder@php
                    echo \App\Http\Controllers\Controller::urlParameters()
                 @endphp';">

            <div class="col-12">
                <i class="far fa-clock mr-2"></i>You have a pending order -
                <span style="text-decoration: underline;">View Order Details</span>
            </div>

            @if($isCurbsideEnabled)
            <!-- If we have Curbside enabled, let's show a button -->
            <livewire:Button
                text="Curbside Pickup"
                class="curbside--button btn-primary w-auto px-5 py-2 mt-3"
                icon="<i class='fas fa-person-carry'></i>"
            />
            @endif
        </div>
    @endif


    @if($translationEnabled)
        <div class="position-absolute top-0 end-0 p-2 d-flex gap-2" style="z-index:10;">
            @livewire('TranslateOptions')
        </div>
    @endif


    <style>
        /* ===== SCROLLING BACKGROUND ===== */
        .newspaper-scroll {
            position: fixed;
            top: 80px; /* height of logo area */
            bottom: 0px; /* height of footer */
            left: 0;
            right: 0;
            overflow-y: auto;
            z-index: 1;
            padding: 0px;
            background: #f5f1e8; /* newspaper tone */
        }

        /* ===== TWO COLUMN NEWSPAPER ===== */
        .newspaper-columns {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .newspaper-columns .column {
            font-family: "Times New Roman", Georgia, serif;
            font-size: 16px;
            line-height: 1.6;
        }

        /* Optional newspaper texture */
        .newspaper-scroll {
            background:#fbf7f4;
            /*background-image: url('https://portal.orderupapps.live/storage/raOmakZMLZYjg8gXHA1L5zcQG0DKyG/paperbg.jpg');
            background-repeat: repeat;
            background-attachment: scroll;
            background-position: bottom center;*/
        }

        /* ===== FIXED LOGO ===== */
        .brand-log-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 10;
            background: #111111;
            padding: 5px;
            text-align: center;
            height: 80px;
        }

        .brand-logo {
            height: auto;
            width: 100%;
            margin-top: 5px;
        }

        /* ===== FIXED FOOTER ===== */
        .footer-home {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 10;
            background: #fff;
        }

        .newspaper-scroll h1 {
            font-family: Georgia, "Times New Roman", serif;
            text-align: center;
            font-size: 32px;
            letter-spacing: 1px;
            margin-bottom: 5px;
        }

        .article-subtitle {
            text-align: center;
            font-size: 12px;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 15px;
            font-style: italic;
        }

        .article-divider {
            border: none;
            border-top: 2px solid #000;
            margin: 15px 0 25px;
        }

        .newspaper-scroll h3 {
            font-family: Georgia, serif;
            margin-bottom: 10px;
            font-size: 19px;
        }

        .newspaper-scroll p {
            margin-bottom: 14px;
        }

        @media (max-width: 313px) {
            .newspaper-columns {
                grid-template-columns: 1fr;
            }
        }
    </style>


    {{-- SCROLLING BACKGROUND GOES HERE--}}
    <section class="newspaper-scroll">

        <div style="border-bottom:#111111 7px solid;height: 0;margin: 12px 0;"></div>
        <div style="border-bottom:#111111 3px solid;height: 0;margin: 12px 0;"></div>

        <div class="article-header px-3 mt-4">
            <h1>TURNING FROWNS UPSIDE DOWN</h1>
            <p class="article-subtitle">
                How our motto keeps us <br>centered on our mission
            </p>
        </div>

        <div class="newspaper-columns p-3">

            <!-- LEFT COLUMN -->
            <div class="column" style="text-align: justify;">
                <p>
                    Hosanna’s was born through a God-given idea with a vision of being able
                    to serve and love on our community. Everything about Hosanna’s has been
                    built around the question: <em>how can we do this in a way that will give
                        someone a reason to smile?</em>
                <!--</p>

                <p>-->
                    Every item that is placed on our menu is intentionally created in a way
                    that can be topped in front of our customers. Our goal is to bring even
                    the smallest bit of joy to each person who orders. Our motto,
                    <strong>“turning frowns upside down,”</strong> has kept us centered on our mission.
                <!--</p>

                <p>-->
                    One of our fan-favorite drinks is our s’mores coffee, which we use a torch
                    to toast a marshmallow in front of you. We aspire to give everyone a
                    reason to smile and hope that each person leaves feeling a little happier
                    than when they arrived.
                </p>

                <img src="https://portal.orderupapps.live/storage/raOmakZMLZYjg8gXHA1L5zcQG0DKyG/npimg-2.jpg" style="width: 100%;max-width: 400px;" >
            </div>

            <!-- RIGHT COLUMN -->
            <div class="column" style="text-align: justify;">
                <img src="https://portal.orderupapps.live/storage/raOmakZMLZYjg8gXHA1L5zcQG0DKyG/npimg-1.jpg" style="width: 100%;max-width: 400px; margin-bottom: 12px;" >

                <h3>Joy? What’s that?</h3>

                <p>
                    Unlike temporary moments of pleasure, joy is often described as a deeper,
                    more lasting emotion arising from a sense of well-being or meaningful
                    connections with others.
                <!--</p>

                <p>-->
                    It is the warm, uplifting feeling experienced when good things happen,
                    like achieving a goal, spending time with loved ones, or witnessing a
                    beautiful moment — like watching a drink being topped in front of you.
                <!--</p>

                <p>-->
                    While happiness can be a temporary reaction to external circumstances,
                    joy can be present even during difficult times, acting as an internal
                    source of strength and resilience.
                <!--</p>

                <p>-->
                    Although we may be in the coffee business, our main focus lies elsewhere.
                    We don’t just serve drinks — we create experiences that leave people smiling.
                </p>
            </div>

        </div>

        <div style="height: 200px;"></div>

    </section>



    <div>
        <div class="brand-log-wrapper w-100 mt-0">
            <img class="brand-logo" src="{{ $brandLogo }}">
        </div>
    </div>








    <div class="footer-home">



            <div>
                <livewire:selfie-with-your-meal-modal />
            </div>


           <div>
            <livewire:bubble-notification />
        </div>

        <!-- If we have a home-page message to display, let's show it here -->
        @if($showHomeInfoWrapper)
            <div class="home-info-wrapper row mx-0 px-1">

                <div class="home-info col-12 p-3">
                    @if(!$isLocationOpen)
                        @if(empty($locationClosedMessages))
                            Sorry, we are closed :(
                        @else
                            {!! $locationClosedMessages !!}
                        @endif
                    @else
                        {!! $locationHomePageMessages !!}
                    @endif
                </div>



                <!-- If location is closed, But Active, let's show a
                button so the customer can at least see the menu -->
                @if(!$isLocationOpen && $isLocationActive)
                    @if($hasEvents)
                        <!-- View Events -->
                        <div class="row m-0 pt-0 pb-2 view-events-button"
                             x-data
                             x-on:click="pageLoader=true,window.location.href = '/events@php
                            echo \App\Http\Controllers\Controller::urlParameters()
                         @endphp';">
                            <div class="col-12 text-center">
                                <i class="fas fa-gifts mr-2"></i> <span style="text-decoration: underline">{{ $viewOurUpcomingEvents }}</span>
                            </div>
                        </div>
                    @endif

                        <div class="col-12 text-center py-2 px-1">
                            <livewire:Button
                                :text="$buttonText_viewMenu"
                                class="footer-home--button btn-primary"
                                :icon="$buttonIcon_viewMenu"
                                targetUrl="menu"
                            />
                        </div>

                @endif
            </div>
        @endif





        <!-- If location is Active && OPEN Let's show the 'Footer' -->
        @if($isLocationOpen && $isLocationActive)
            @php
                $colSpace = $displayLocationButton ? '6' : '12';
            @endphp
            <div class="row m-0 px-1 footer-home--button-wrapper">

                @if($hasEvents)
                    <!-- View Events -->
                    <div class="row m-0 pt-2 pb-2 view-events-button"
                         x-data
                         x-on:click="pageLoader=true,window.location.href = '/events@php
                            echo \App\Http\Controllers\Controller::urlParameters()
                         @endphp';">
                        <div class="col-12 text-center">
                            <i class="fas fa-gifts mr-2"></i> <span style="text-decoration: underline">{{ $viewOurUpcomingEvents }}</span>
                        </div>
                    </div>
                @endif

                <div class="col-{{$colSpace}} text-center py-2 px-1">
                    <livewire:Button
                        :text="$buttonText_orderNow"
                        class="footer-home--button btn-primary"
                        :icon="$buttonIcon_orderNow"
                        :targetUrl="$buttonTarget_orderNow"
                    />
                </div>
                @if($displayLocationButton)
                    <div class="col-6 text-center py-2 px-1">
                        <livewire:Button
                            :text="$buttonText_ourLocation"
                            class="footer-home--button btn-secondary"
                            :icon="$buttonIcon_ourLocation"
                            xon="addressMap=!addressMap;loadGoogleMapsScript(initLocationMap)"
                        />
                    </div>
                @endif
            </div>
        @endif



        <!-- If this location has multiple Locations, we should show a button to change location -->
        @if($brandHasMultipleLocations)
            <div class="row m-0 py-2 change-location-wrapper">
                <div class="col-6 text-left text-truncate" style="padding-top: 3px;">
                    <i class="fas fa-map-marker-alt mr-2"></i> {{ $locationDisplayName }}
                </div>
                <div class="col-6 text-right" style="text-align: right;">
                    <a href="#" id="clearLocationCookie" class="btn btn-primary" style="font-size: 12px;"><i class="fad fa-exchange-alt mr-2"></i> Change Location</a>
                </div>
            </div>
        @endif





        <!-- If this app is under some maintenance, let's let the customers know -->
        @if($underMaintenance)
            <div class="row m-0 py-2 under-maintenance-wrapper text-center">
                <div class="col-12">
                    <i class="far fa-construction"></i> Under Maintenance - Please do not order
                </div>
            </div>
        @endif

    </div>



    {{--
        Check if we require customers to login/create account
    --}}
    @if($loginRequired)
        <livewire:CreateAccountOnFirstLoad
            :brandLogo="$brandLogo"
        />
    @endif










    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const clearBtn = document.querySelector("#clearLocationCookie");

            if (clearBtn) {
                clearBtn.addEventListener("click", function () {
                    document.cookie = "savedLocation_{{ $_GET['directory'] }}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC; SameSite=Lax";

                    $(".pageLoader-wrapper").removeClass('is-hidden');

                    const loader = document.querySelector(".pageLoader-wrapper");
                    if (loader) {
                        loader.style.display = "block";
                    }

                    const redirectURL = `{{ env('APP_URL') }}/?directory={{ $_GET['directory'] }}{!! session()->has('sessionToken') ? '&sessionToken='.session('sessionToken') : '' !!}&clearLocationSession=true`;
                    window.location.href = redirectURL;
                });
            }
        });
    </script>



@endsection