```blade
<style>
    :root {
        --hotel-navy: #10233f;
        --hotel-navy-dark: #071526;
        --hotel-blue: #183b63;
        --hotel-gold: #c9a227;
        --hotel-gold-light: #e5c766;
        --hotel-cream: #faf8f2;
        --hotel-white: #ffffff;
        --hotel-text: #1f2937;
        --hotel-muted: #6b7280;
        --hotel-border: #e5e7eb;
        --hotel-danger: #dc2626;
        --hotel-success: #15803d;
    }

    * {
        box-sizing: border-box;
    }

    html,
    body {
        margin: 0;
        padding: 0;
        min-height: 100%;
    }

    body {
        font-family:
            "Poppins",
            "Inter",
            ui-sans-serif,
            system-ui,
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            sans-serif;

        background: var(--hotel-cream);
        color: var(--hotel-text);
    }

    /* =========================================================
       PAGE
       ========================================================= */

    .hotel-login-page {
        min-height: 100vh;
        display: flex;
        overflow: hidden;
        background: var(--hotel-cream);
    }

    /* =========================================================
       LEFT HOTEL SHOWCASE
       ========================================================= */

    .hotel-showcase {
        width: 56%;
        min-height: 100vh;
        position: relative;
        overflow: hidden;

        display: flex;
        align-items: center;

        color: white;

        background:
            linear-gradient(
                90deg,
                rgba(7,21,38,.96) 0%,
                rgba(16,35,63,.88) 42%,
                rgba(16,35,63,.45) 100%
            ),
            url("https://arojwhitehouseinn.com/images/appbg.jpeg")
            center center / cover no-repeat;
    }

    .hotel-showcase::after {
        content: "";
        position: absolute;
        inset: 0;

        background:
            radial-gradient(
                circle at 20% 20%,
                rgba(201,162,39,.20),
                transparent 28%
            ),
            radial-gradient(
                circle at 90% 80%,
                rgba(255,255,255,.10),
                transparent 30%
            );

        pointer-events: none;
    }

    /* Decorative circles */

    .hotel-circle {
        position: absolute;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,.15);
        pointer-events: none;
    }

    .hotel-circle.one {
        width: 620px;
        height: 620px;
        top: -310px;
        right: -310px;
    }

    .hotel-circle.two {
        width: 420px;
        height: 420px;
        bottom: -250px;
        left: -200px;
    }

    .hotel-circle.three {
        width: 190px;
        height: 190px;
        bottom: 14%;
        right: 14%;
        border-color: rgba(201,162,39,.35);
    }

    /* =========================================================
       SHOWCASE CONTENT
       ========================================================= */

    .hotel-showcase-content {
        position: relative;
        z-index: 5;

        width: 100%;
        max-width: 720px;

        padding: 70px;
    }

    /* =========================================================
       LOGO
       ========================================================= */

    .hotel-brand {
        display: flex;
        align-items: center;
        gap: 14px;

        margin-bottom: 60px;
    }

    .hotel-logo {
        width: 60px;
        height: 60px;

        border-radius: 15px;

        display: flex;
        align-items: center;
        justify-content: center;

        background:
            linear-gradient(
                145deg,
                var(--hotel-gold),
                #9e7b12
            );

        color: white;

        font-size: 26px;

        box-shadow:
            0 15px 35px rgba(0,0,0,.30);
    }

    .hotel-brand-name {
        font-size: 21px;
        font-weight: 800;
        letter-spacing: .4px;
    }

    .hotel-brand-subtitle {
        display: block;

        margin-top: 2px;

        color: rgba(255,255,255,.60);

        font-size: 10px;

        letter-spacing: 2.5px;

        text-transform: uppercase;
    }

    /* =========================================================
       MAIN TITLE
       ========================================================= */

    .hotel-showcase h1 {
        margin: 0 0 22px;

        max-width: 650px;

        font-family:
            Georgia,
            "Times New Roman",
            serif;

        font-size: clamp(42px, 5vw, 72px);

        line-height: 1.04;

        font-weight: 500;

        letter-spacing: -2px;
    }

    .hotel-showcase h1 span {
        color: var(--hotel-gold-light);
        font-style: italic;
    }

    .hotel-showcase-description {
        max-width: 570px;

        margin: 0 0 42px;

        color: rgba(255,255,255,.72);

        font-size: 15px;

        line-height: 1.9;
    }

    /* =========================================================
       FEATURES
       ========================================================= */

    .hotel-features {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 14px;

        max-width: 590px;
    }

    .hotel-feature {
        display: flex;
        align-items: center;

        gap: 13px;

        padding: 13px 15px;

        border:
            1px solid
            rgba(255,255,255,.12);

        border-radius: 12px;

        background:
            rgba(255,255,255,.055);

        backdrop-filter: blur(10px);

        transition:
            transform .25s ease,
            background .25s ease,
            border-color .25s ease;
    }

    .hotel-feature:hover {
        transform: translateY(-3px);

        background:
            rgba(255,255,255,.10);

        border-color:
            rgba(201,162,39,.45);
    }

    .hotel-feature-icon {
        width: 39px;
        height: 39px;

        flex: 0 0 39px;

        display: flex;
        align-items: center;
        justify-content: center;

        border-radius: 10px;

        background:
            rgba(201,162,39,.15);

        color: var(--hotel-gold-light);

        font-size: 14px;
    }

    .hotel-feature strong {
        display: block;

        font-size: 12px;

        margin-bottom: 3px;
    }

    .hotel-feature span {
        display: block;

        color: rgba(255,255,255,.55);

        font-size: 10px;

        line-height: 1.5;
    }

    /* =========================================================
       RIGHT LOGIN SECTION
       ========================================================= */

    .hotel-login-area {
        width: 44%;
        min-height: 100vh;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 50px 7%;

        background:
            radial-gradient(
                circle at 90% 5%,
                rgba(201,162,39,.07),
                transparent 25%
            ),
            var(--hotel-cream);
    }

    .hotel-login-wrapper {
        width: 100%;
        max-width: 460px;
    }

    /* =========================================================
       TOP NAVIGATION
       ========================================================= */

    .hotel-top-navigation {
        display: flex;
        align-items: center;
        justify-content: space-between;

        margin-bottom: 42px;
    }

    .hotel-mobile-logo {
        display: none;

        color: var(--hotel-navy);

        font-family: Georgia, serif;

        font-size: 22px;
        font-weight: 700;
    }

    .hotel-mobile-logo span {
        color: var(--hotel-gold);
    }

    .hotel-register-text {
        margin-left: auto;

        color: var(--hotel-muted);

        font-size: 12px;
    }

    .hotel-register-text a {
        margin-left: 5px;

        color: var(--hotel-navy);

        font-weight: 800;

        text-decoration: none;
    }

    .hotel-register-text a:hover {
        color: var(--hotel-gold);

        text-decoration: underline;
    }

    /* =========================================================
       LOGIN HEADER
       ========================================================= */

    .hotel-login-header {
        margin-bottom: 27px;
    }

    .hotel-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 7px;

        padding: 7px 12px;

        margin-bottom: 14px;

        border-radius: 999px;

        background:
            rgba(201,162,39,.10);

        color:
            #927014;

        border:
            1px solid
            rgba(201,162,39,.18);

        font-size: 10px;

        font-weight: 800;

        letter-spacing: 1px;

        text-transform: uppercase;
    }

    .hotel-eyebrow i {
        font-size: 8px;
    }

    .hotel-login-header h2 {
        margin: 0 0 8px;

        color: var(--hotel-navy);

        font-family:
            Georgia,
            "Times New Roman",
            serif;

        font-size: 39px;

        font-weight: 500;

        letter-spacing: -1px;
    }

    .hotel-login-header p {
        margin: 0;

        color: var(--hotel-muted);

        font-size: 13px;

        line-height: 1.7;
    }

    /* =========================================================
       STATUS MESSAGE
       ========================================================= */

    .hotel-status-message {
        display: flex;
        align-items: center;
        gap: 9px;

        margin-bottom: 17px;

        padding: 12px 14px;

        border-radius: 10px;

        border: 1px solid #bbf7d0;

        background: #f0fdf4;

        color: #166534;

        font-size: 12px;
    }

    /* =========================================================
       LOGIN CARD
       ========================================================= */

    .hotel-login-card {
        padding: 31px;

        border:
            1px solid
            rgba(17,24,39,.08);

        border-radius: 18px;

        background: white;

        box-shadow:
            0 20px 70px rgba(15,23,42,.08);

        transition:
            box-shadow .3s ease,
            transform .3s ease;
    }

    .hotel-login-card:hover {
        box-shadow:
            0 25px 80px rgba(15,23,42,.11);
    }

    /* =========================================================
       FORM
       ========================================================= */

    .hotel-form-group {
        margin-bottom: 20px;
    }

    .hotel-form-label {
        display: block;

        margin-bottom: 8px;

        color: #374151;

        font-size: 12px;

        font-weight: 700;
    }

    .hotel-required {
        color: var(--hotel-danger);
    }

    .hotel-input-wrapper {
        position: relative;
    }

    .hotel-input-icon {
        position: absolute;

        left: 15px;
        top: 50%;

        transform: translateY(-50%);

        color: #9ca3af;

        pointer-events: none;

        z-index: 2;

        transition:
            color .2s ease;
    }

    .hotel-input-wrapper:focus-within
    .hotel-input-icon {
        color: var(--hotel-gold);
    }

    .hotel-form-control {
        width: 100%;

        min-height: 51px;

        padding:
            12px
            45px
            12px
            43px;

        border:
            1px solid
            var(--hotel-border);

        border-radius: 10px;

        outline: none;

        background: #fff;

        color: #111827;

        font-size: 13px;

        transition:
            border-color .2s ease,
            box-shadow .2s ease,
            background .2s ease;
    }

    .hotel-form-control:hover {
        border-color: #d1d5db;
    }

    .hotel-form-control:focus {
        border-color: var(--hotel-gold);

        background: #fffef9;

        box-shadow:
            0 0 0 4px
            rgba(201,162,39,.11);
    }

    .hotel-form-control::placeholder {
        color: #9ca3af;
    }

    /* =========================================================
       PASSWORD
       ========================================================= */

    .hotel-password-toggle {
        position: absolute;

        right: 8px;
        top: 50%;

        transform: translateY(-50%);

        width: 36px;
        height: 36px;

        border: 0;

        background: transparent;

        color: #9ca3af;

        cursor: pointer;

        border-radius: 8px;

        transition:
            color .2s ease,
            background .2s ease;
    }

    .hotel-password-toggle:hover {
        color: var(--hotel-gold);

        background:
            rgba(201,162,39,.08);
    }

    /* =========================================================
       ERROR
       ========================================================= */

    .hotel-error-message {
        display: flex;
        align-items: center;
        gap: 5px;

        margin-top: 7px;

        color: var(--hotel-danger);

        font-size: 11px;
    }

    /* =========================================================
       OPTIONS
       ========================================================= */

    .hotel-login-options {
        display: flex;

        align-items: center;

        justify-content: space-between;

        margin:
            2px 0
            23px;
    }

    .hotel-remember-me {
        display: flex;

        align-items: center;

        gap: 8px;

        color: #6b7280;

        font-size: 11px;

        cursor: pointer;
    }

    .hotel-remember-me input {
        width: 15px;
        height: 15px;

        accent-color: var(--hotel-gold);

        cursor: pointer;
    }

    .hotel-forgot-password {
        color: var(--hotel-navy);

        font-size: 11px;

        font-weight: 700;

        text-decoration: none;
    }

    .hotel-forgot-password:hover {
        color: var(--hotel-gold);

        text-decoration: underline;
    }

    /* =========================================================
       LOGIN BUTTON
       ========================================================= */

    .hotel-login-button {
        width: 100%;

        min-height: 52px;

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 10px;

        border: 0;

        border-radius: 10px;

        background:
            linear-gradient(
                135deg,
                #c9a227 0%,
                #a98416 100%
            );

        color: white;

        font-size: 13px;

        font-weight: 800;

        letter-spacing: .2px;

        cursor: pointer;

        box-shadow:
            0 10px 25px
            rgba(169,132,22,.22);

        transition:
            transform .2s ease,
            box-shadow .2s ease,
            filter .2s ease;
    }

    .hotel-login-button:hover {
        transform: translateY(-2px);

        filter: brightness(1.05);

        box-shadow:
            0 15px 32px
            rgba(169,132,22,.30);
    }

    .hotel-login-button:active {
        transform: translateY(0);
    }

    .hotel-login-button:disabled {
        opacity: .72;

        cursor: not-allowed;

        transform: none;

        filter: none;
    }

    /* =========================================================
       SPINNER
       ========================================================= */

    .hotel-spinner {
        width: 17px;
        height: 17px;

        border:
            2px solid
            rgba(255,255,255,.35);

        border-top-color: white;

        border-radius: 50%;

        animation:
            hotelSpin .7s linear infinite;
    }

    @keyframes hotelSpin {
        to {
            transform: rotate(360deg);
        }
    }

    /* =========================================================
       SECURITY
       ========================================================= */

    .hotel-security-note {
        display: flex;

        align-items: center;

        justify-content: center;

        gap: 7px;

        margin-top: 20px;

        color: #9ca3af;

        font-size: 10px;
    }

    .hotel-security-note i {
        color: var(--hotel-success);
    }

    /* =========================================================
       DEMO INFO
       ========================================================= */

    .hotel-demo-note {
        display: flex;

        align-items: center;

        gap: 11px;

        margin-top: 17px;

        padding: 12px;

        border-radius: 10px;

        background:
            #faf8f0;

        border:
            1px solid
            rgba(201,162,39,.15);

        color: #756020;

        font-size: 10px;

        line-height: 1.5;
    }

    .hotel-demo-note-icon {
        width: 30px;
        height: 30px;

        flex: 0 0 30px;

        display: flex;

        align-items: center;
        justify-content: center;

        border-radius: 8px;

        background:
            rgba(201,162,39,.12);

        color:
            var(--hotel-gold);
    }

    /* =========================================================
       CREATE ACCOUNT
       ========================================================= */

    .hotel-create-account {
        margin-top: 23px;

        text-align: center;

        color: #6b7280;

        font-size: 11px;
    }

    .hotel-create-account a {
        color: var(--hotel-navy);

        font-weight: 800;

        text-decoration: none;
    }

    .hotel-create-account a:hover {
        color: var(--hotel-gold);

        text-decoration: underline;
    }

    /* =========================================================
       FOOTER
       ========================================================= */

    .hotel-login-footer {
        margin-top: 23px;

        text-align: center;

        color: #9ca3af;

        font-size: 9px;

        line-height: 1.7;
    }

    .hotel-footer-links {
        margin-top: 4px;
    }

    .hotel-footer-links span {
        margin: 0 5px;
    }

    /* =========================================================
       FLOATING DECORATION
       ========================================================= */

    .hotel-floating-dot {
        position: absolute;

        width: 6px;
        height: 6px;

        border-radius: 50%;

        background: var(--hotel-gold);

        opacity: .65;

        animation:
            hotelFloat 5s ease-in-out infinite;
    }

    .hotel-floating-dot.dot-one {
        top: 18%;
        right: 19%;
    }

    .hotel-floating-dot.dot-two {
        top: 67%;
        right: 9%;

        width: 4px;
        height: 4px;

        animation-delay: 1s;
    }

    .hotel-floating-dot.dot-three {
        bottom: 19%;
        left: 18%;

        width: 5px;
        height: 5px;

        animation-delay: 2s;
    }

    @keyframes hotelFloat {
        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-14px);
        }
    }

    /* =========================================================
       RESPONSIVE
       ========================================================= */

    @media (max-width: 1150px) {

        .hotel-showcase {
            width: 50%;
        }

        .hotel-login-area {
            width: 50%;
        }

        .hotel-showcase-content {
            padding: 50px;
        }

        .hotel-showcase h1 {
            font-size: 48px;
        }

        .hotel-features {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 900px) {

        .hotel-showcase {
            width: 43%;
        }

        .hotel-login-area {
            width: 57%;
            padding: 35px;
        }

        .hotel-showcase-content {
            padding: 40px;
        }

        .hotel-showcase h1 {
            font-size: 40px;
        }

        .hotel-showcase-description {
            font-size: 13px;
        }
    }

    @media (max-width: 760px) {

        .hotel-login-page {
            display: block;
        }

        .hotel-showcase {
            display: none;
        }

        .hotel-login-area {
            width: 100%;

            min-height: 100vh;

            padding:
                25px
                18px
                40px;
        }

        .hotel-mobile-logo {
            display: block;
        }

        .hotel-top-navigation {
            margin-bottom: 35px;
        }

        .hotel-login-wrapper {
            max-width: 500px;
            margin: auto;
        }
    }

    @media (max-width: 500px) {

        .hotel-login-area {
            padding:
                20px
                15px
                30px;
        }

        .hotel-login-card {
            padding:
                24px
                18px;

            border-radius: 15px;
        }

        .hotel-login-header h2 {
            font-size: 33px;
        }

        .hotel-login-header p {
            font-size: 12px;
        }

        .hotel-login-options {
            gap: 12px;
        }

        .hotel-register-text {
            font-size: 10px;
        }

        .hotel-form-control {
            min-height: 49px;
        }

        .hotel-login-button {
            min-height: 50px;
        }
    }

    /* =========================================================
       ACCESSIBILITY
       ========================================================= */

    @media (prefers-reduced-motion: reduce) {

        *,
        *::before,
        *::after {
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: .01ms !important;
        }
    }
</style>


<div class="hotel-login-page">


    

    <aside class="hotel-showcase">

        <div class="hotel-circle one"></div>
        <div class="hotel-circle two"></div>
        <div class="hotel-circle three"></div>

        <div class="hotel-floating-dot dot-one"></div>
        <div class="hotel-floating-dot dot-two"></div>
        <div class="hotel-floating-dot dot-three"></div>


        <div class="hotel-showcase-content">


            

            <div class="hotel-brand">

                <div class="hotel-logo">

                    <i class="fa-solid fa-hotel"></i>

                </div>

                <div>

                    <div class="hotel-brand-name">
                        Aroji White House INN
                    </div>

                    <span class="hotel-brand-subtitle">
                        Hotel Management System
                    </span>

                </div>

            </div>


            

            <h1>

                Welcome to
                <span>Aroji Whitehouse INN</span>

            </h1>


            <p class="hotel-showcase-description">

                Manage your hotel operations from one
                powerful workspace. Handle reservations,
                guests, rooms, housekeeping, payments,
                staff and daily hotel operations with ease.

            </p>


            

            <div class="hotel-features">


                <div class="hotel-feature">

                    <div class="hotel-feature-icon">

                        <i class="fa-solid fa-calendar-check"></i>

                    </div>

                    <div>

                        <strong>
                            Reservations
                        </strong>

                        <span>
                            Manage bookings and room availability.
                        </span>

                    </div>

                </div>


                <div class="hotel-feature">

                    <div class="hotel-feature-icon">

                        <i class="fa-solid fa-bed"></i>

                    </div>

                    <div>

                        <strong>
                            Room Management
                        </strong>

                        <span>
                            Monitor rooms, rates and occupancy.
                        </span>

                    </div>

                </div>


                <div class="hotel-feature">

                    <div class="hotel-feature-icon">

                        <i class="fa-solid fa-user-group"></i>

                    </div>

                    <div>

                        <strong>
                            Guest Management
                        </strong>

                        <span>
                            Keep guest information organized.
                        </span>

                    </div>

                </div>


                <div class="hotel-feature">

                    <div class="hotel-feature-icon">

                        <i class="fa-solid fa-broom"></i>

                    </div>

                    <div>

                        <strong>
                            Housekeeping
                        </strong>

                        <span>
                            Coordinate cleaning and room status.
                        </span>

                    </div>

                </div>


                <div class="hotel-feature">

                    <div class="hotel-feature-icon">

                        <i class="fa-solid fa-file-invoice-dollar"></i>

                    </div>

                    <div>

                        <strong>
                            Billing & Payments
                        </strong>

                        <span>
                            Track invoices and guest payments.
                        </span>

                    </div>

                </div>


                <div class="hotel-feature">

                    <div class="hotel-feature-icon">

                        <i class="fa-solid fa-chart-pie"></i>

                    </div>

                    <div>

                        <strong>
                            Hotel Reports
                        </strong>

                        <span>
                            Understand occupancy and revenue.
                        </span>

                    </div>

                </div>


            </div>

        </div>

    </aside>



    

    <main class="hotel-login-area">

        <div class="hotel-login-wrapper">


            

            <div class="hotel-top-navigation">


                <div class="hotel-mobile-logo">

                    Your <span>Hotel</span>

                </div>


                <div></div>


                <div class="hotel-register-text">

                    New hotel?

                    
                        <a href="https://www.businesssuits.barthytechsolutions.com.ng/register">
                            Create account
                        </a>

                    
                </div>


            </div>



            

            <div class="hotel-login-header">


                <div class="hotel-eyebrow">

                    <i class="fa-solid fa-lock"></i>

                    HOTEL STAFF PORTAL

                </div>


                <h2>
                    Welcome back
                </h2>


                <p>
                    Sign in to access your hotel management
                    dashboard and daily operations.
                </p>


            </div>



            

            


            

            <form
                method="POST"
                action="https://www.businesssuits.barthytechsolutions.com.ng/login"
                class="hotel-login-card"
                id="hotelLoginForm"
            >

                <input type="hidden" name="_token" value="zcDizYksBvcSPTjXetLAU1z3OvvlglkSf0iXS58M" autocomplete="off">

                

                <div class="hotel-form-group">

                    <label
                        for="email"
                        class="hotel-form-label"
                    >

                        Email Address

                        <span class="hotel-required">
                            *
                        </span>

                    </label>


                    <div class="hotel-input-wrapper">

                        <i
                            class="fa-solid fa-envelope hotel-input-icon"
                        ></i>


                        <input
                            id="email"
                            name="email"
                            type="email"
                            class="hotel-form-control"
                            value=""
                            placeholder="staff@yourhotel.com"
                            required
                            autofocus
                            autocomplete="username"
                        >

                    </div>


                    
                </div>



                

                <div class="hotel-form-group">

                    <label
                        for="password"
                        class="hotel-form-label"
                    >

                        Password

                        <span class="hotel-required">
                            *
                        </span>

                    </label>


                    <div class="hotel-input-wrapper">

                        <i
                            class="fa-solid fa-lock hotel-input-icon"
                        ></i>


                        <input
                            id="password"
                            name="password"
                            type="password"
                            class="hotel-form-control"
                            placeholder="Enter your password"
                            required
                            autocomplete="current-password"
                        >


                        <button
                            type="button"
                            class="hotel-password-toggle"
                            id="hotelPasswordToggle"
                            aria-label="Show password"
                        >

                            <i class="fa-solid fa-eye"></i>

                        </button>

                    </div>


                    
                </div>



                

                <div class="hotel-login-options">


                    <label
                        for="remember_me"
                        class="hotel-remember-me"
                    >

                        <input
                            id="remember_me"
                            type="checkbox"
                            name="remember"
                        >

                        <span>
                            Keep me signed in
                        </span>

                    </label>



                    
                        <a
                            href="https://www.businesssuits.barthytechsolutions.com.ng/forgot-password"
                            class="hotel-forgot-password"
                        >

                            Forgot password?

                        </a>

                    

                </div>



                

                <button
                    type="submit"
                    class="hotel-login-button"
                    id="hotelLoginButton"
                >

                    <span id="hotelLoginButtonText">
                        Sign in to hotel
                    </span>


                    <i
                        id="hotelLoginButtonIcon"
                        class="fa-solid fa-arrow-right"
                    ></i>

                </button>



                

                <div class="hotel-security-note">

                    <i class="fa-solid fa-shield-halved"></i>

                    <span>
                        Secure hotel management portal
                    </span>

                </div>



                

                <div class="hotel-demo-note">

                    <div class="hotel-demo-note-icon">

                        <i class="fa-solid fa-circle-info"></i>

                    </div>

                    <div>

                        <strong>
                            Need assistance?
                        </strong>

                        <br>

                        Contact your hotel administrator
                        if you are unable to access your account.

                    </div>

                </div>


            </form>



            

            
                <div class="hotel-create-account">

                    Don't have a hotel account?

                    <a href="https://www.businesssuits.barthytechsolutions.com.ng/register">
                        Create one now
                    </a>

                </div>

            


            

            <div class="hotel-login-footer">

                © 2026
                Your Hotel Management System.
                All rights reserved.

                <div class="hotel-footer-links">
                    Secure • Reliable • Professional
                </div>

            </div>


        </div>

    </main>

</div>



<script>

document.addEventListener(
    'DOMContentLoaded',
    function () {


        /* =====================================================
           PASSWORD VISIBILITY
           ===================================================== */

        const passwordToggle =
            document.getElementById(
                'hotelPasswordToggle'
            );

        const password =
            document.getElementById(
                'password'
            );


        if (
            passwordToggle &&
            password
        ) {

            passwordToggle.addEventListener(
                'click',
                function () {

                    const icon =
                        this.querySelector('i');


                    if (
                        password.type ===
                        'password'
                    ) {

                        password.type =
                            'text';

                        icon.classList.remove(
                            'fa-eye'
                        );

                        icon.classList.add(
                            'fa-eye-slash'
                        );

                        this.setAttribute(
                            'aria-label',
                            'Hide password'
                        );

                    } else {

                        password.type =
                            'password';

                        icon.classList.remove(
                            'fa-eye-slash'
                        );

                        icon.classList.add(
                            'fa-eye'
                        );

                        this.setAttribute(
                            'aria-label',
                            'Show password'
                        );

                    }

                }
            );

        }



        /* =====================================================
           LOGIN FORM LOADING STATE
           ===================================================== */

        const form =
            document.getElementById(
                'hotelLoginForm'
            );

        const button =
            document.getElementById(
                'hotelLoginButton'
            );

        const buttonText =
            document.getElementById(
                'hotelLoginButtonText'
            );

        const buttonIcon =
            document.getElementById(
                'hotelLoginButtonIcon'
            );


        if (
            form &&
            button
        ) {

            form.addEventListener(
                'submit',
                function () {

                    button.disabled =
                        true;

                    if (buttonText) {

                        buttonText.textContent =
                            'Signing you in...';

                    }

                    if (buttonIcon) {

                        buttonIcon.className =
                            'hotel-spinner';

                    }

                }
            );

        }



        /* =====================================================
           EMAIL CLEANUP
           ===================================================== */

        const email =
            document.getElementById(
                'email'
            );


        if (email) {

            email.addEventListener(
                'blur',
                function () {

                    this.value =
                        this.value
                            .trim()
                            .toLowerCase();

                }
            );

        }



        /* =====================================================
           ENTER KEY
           ===================================================== */

        if (password) {

            password.addEventListener(
                'keydown',
                function (event) {

                    if (
                        event.key ===
                        'Enter'
                    ) {

                        event.preventDefault();

                        if (form) {
                            form.requestSubmit();
                        }

                    }

                }
            );

        }



        /* =====================================================
           INPUT ANIMATION
           ===================================================== */

        const inputs =
            document.querySelectorAll(
                '.hotel-form-control'
            );


        inputs.forEach(
            function (input) {

                input.addEventListener(
                    'focus',
                    function () {

                        this.parentElement
                            .classList.add(
                                'hotel-input-active'
                            );

                    }
                );


                input.addEventListener(
                    'blur',
                    function () {

                        this.parentElement
                            .classList.remove(
                                'hotel-input-active'
                            );

                    }
                );

            }
        );


    }
);

</script>
```