<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ hotelName() }}</title>
    <!-- Bootstrap 5 & Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary-green: #1a936f;
            --secondary-green: #88d498;
            --light-green: #c6dabf;
            --dark-green: #114b5f;
            --accent-gold: #d4a373;
            --accent-sand: #f3e9d2;
            --deep-charcoal: #2d3e3f;
            --soft-white: #fefcf7;
            --super-admin-purple: #6f2c91;
            --super-admin-glow: #9b4dff;
        }

        body {
            font-family: 'Segoe UI', Roboto, system-ui, sans-serif;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            position: relative;
            margin: 0;
        }

        body::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: radial-gradient(var(--light-green) 1px, transparent 1px);
            background-size: 30px 30px;
            opacity: 0.2;
            pointer-events: none;
        }

        .cover-card {
            background-color: rgba(255, 255, 255, 0.75);
            backdrop-filter: blur(4px);
            border-radius: 42px;
            box-shadow: 0 30px 60px -10px rgba(17, 75, 95, 0.3), 0 18px 36px -18px rgba(0, 0, 0, 0.2);
            width: 100%;
            max-width: 1400px;
            border: 1px solid rgba(255, 255, 255, 0.6);
            padding: 3rem 2.5rem;
            transition: all 0.3s;
        }

        .welcome-panel {
            background: linear-gradient(135deg, var(--dark-green) 0%, var(--primary-green) 100%);
            border-radius: 32px;
            padding: 3rem 2.5rem;
            color: white;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            box-shadow: 0 25px 40px -15px rgba(26, 147, 111, 0.5);
            border: 1px solid rgba(255,255,255,0.15);
        }

        .welcome-panel h1 {
            font-weight: 700;
            font-size: 2.8rem;
            letter-spacing: -0.5px;
            line-height: 1.2;
            margin-bottom: 1.2rem;
        }

        .welcome-panel .lead {
            font-size: 1.25rem;
            font-weight: 400;
            opacity: 0.9;
            margin-bottom: 2rem;
            max-width: 85%;
        }

        .feature-list {
            list-style: none;
            padding: 0;
            margin: 0 0 2rem 0;
        }

        .feature-list li {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 1rem;
            font-size: 1.1rem;
        }

        .feature-list i {
            color: var(--secondary-green);
            font-size: 1.4rem;
            width: 28px;
            text-align: center;
        }

        .stats-mini {
            display: flex;
            gap: 20px;
            margin-top: 2rem;
            font-size: 0.9rem;
        }

        .stats-mini span {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .login-panel {
            background: var(--soft-white);
            border-radius: 32px;
            padding: 3rem 2.5rem;
            box-shadow: 0 15px 30px -10px rgba(0,0,0,0.05);
            border: 1px solid rgba(0,0,0,0.03);
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
        }

        .brand-mini {
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--dark-green);
            font-weight: 600;
            font-size: 1.15rem;
            margin-bottom: 1.5rem;
            letter-spacing: 0.3px;
        }

        .brand-mini-logo {
            width: 64px;
            height: auto;
            flex-shrink: 0;
            object-fit: contain;
            border-radius: 0;
            background: transparent;
            padding: 0;
            filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.12));
        }

        .login-panel h2 {
            font-weight: 700;
            color: var(--dark-green);
            margin-bottom: 0.3rem;
            font-size: 2rem;
        }

        /* Secret Director Button - Entry Point */
        .secret-director-entry {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: rgba(26, 147, 111, 0.1);
            border: 1px solid rgba(26, 147, 111, 0.2);
            color: var(--primary-green);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 1.3rem;
            z-index: 10;
            opacity: 0.6;
        }

        .secret-director-entry:hover {
            opacity: 1;
            background: var(--primary-green);
            color: white;
            transform: scale(1.1);
            box-shadow: 0 5px 15px rgba(26, 147, 111, 0.3);
        }

        /* SUPER ADMIN BUTTON - HIDDEN BY DEFAULT - ACTIVATED BY SECRET KEY SEQUENCE */
        .super-admin-entry {
            position: absolute;
            bottom: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            border-radius: 16px;
            background: linear-gradient(135deg, var(--super-admin-purple), #4a1d66);
            color: white;
            display: none; /* HIDDEN by default */
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 1.5rem;
            z-index: 10;
            box-shadow: 0 4px 15px rgba(111, 44, 145, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.2);
            animation: subtlePulse 2s infinite;
        }

        .super-admin-entry.visible {
            display: flex; /* Show when visible class is added */
        }

        .super-admin-entry:hover {
            transform: scale(1.1) rotate(5deg);
            background: linear-gradient(135deg, #8a3cc7, var(--super-admin-purple));
            box-shadow: 0 8px 25px rgba(155, 77, 255, 0.5);
        }

        .super-admin-tooltip {
            position: absolute;
            right: 60px;
            bottom: 20px;
            background: var(--deep-charcoal);
            color: white;
            padding: 8px 15px;
            border-radius: 30px;
            font-size: 0.85rem;
            white-space: nowrap;
            opacity: 0;
            transform: translateX(10px);
            transition: all 0.3s;
            pointer-events: none;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            display: none; /* Hidden by default */
        }

        .super-admin-tooltip.visible {
            display: block; /* Show when visible class is added */
        }

        .super-admin-entry:hover + .super-admin-tooltip {
            opacity: 1;
            transform: translateX(0);
        }

        @keyframes subtlePulse {
            0% { box-shadow: 0 4px 15px rgba(111, 44, 145, 0.3); }
            50% { box-shadow: 0 8px 25px rgba(155, 77, 255, 0.6); }
            100% { box-shadow: 0 4px 15px rgba(111, 44, 145, 0.3); }
        }

        /* Password Field with Eye Icon */
        .password-field-wrapper {
            position: relative;
        }

        .password-toggle {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: #999;
            cursor: pointer;
            z-index: 10;
            transition: color 0.2s;
            font-size: 1.1rem;
        }

        .password-toggle:hover {
            color: var(--primary-green);
        }

        /* Director Login Modal */
        .director-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
            z-index: 9999;
            align-items: center;
            justify-content: center;
        }

        .director-modal.show {
            display: flex;
        }

        .director-modal-content {
            background: white;
            border-radius: 32px;
            padding: 2.5rem;
            max-width: 400px;
            width: 90%;
            position: relative;
            animation: modalSlideIn 0.3s ease;
            box-shadow: 0 30px 60px rgba(17, 75, 95, 0.3);
            border: 1px solid var(--light-green);
        }

        .director-modal-header {
            text-align: center;
            margin-bottom: 2rem;
        }

        .director-modal-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
            border-radius: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            font-size: 2.5rem;
            color: white;
            box-shadow: 0 10px 25px rgba(26, 147, 111, 0.4);
        }

        .director-modal h3 {
            color: var(--dark-green);
            font-weight: 700;
            margin-bottom: 0.5rem;
            font-size: 1.8rem;
        }

        .director-login-btn {
            background: linear-gradient(90deg, var(--dark-green), var(--primary-green));
            color: white;
            border: none;
            padding: 16px;
            border-radius: 20px;
            font-weight: 700;
            width: 100%;
            transition: all 0.3s;
            margin-top: 1.5rem;
            font-size: 1.1rem;
            box-shadow: 0 8px 20px rgba(26, 147, 111, 0.3);
        }

        .director-login-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 30px rgba(26, 147, 111, 0.4);
            background: linear-gradient(90deg, #0e3f4f, #137b5e);
        }

        /* SUPER ADMIN MODAL */
        .super-admin-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(8px);
            z-index: 10000;
            align-items: center;
            justify-content: center;
        }

        .super-admin-modal.show {
            display: flex;
        }

        .super-admin-modal-content {
            background: linear-gradient(145deg, #ffffff, #f3fbf8);
            border-radius: 32px;
            padding: 2.5rem;
            max-width: 450px;
            width: 90%;
            position: relative;
            animation: modalSlideIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            box-shadow: 0 40px 80px rgba(17, 75, 95, 0.25);
            border: 1px solid rgba(26, 147, 111, 0.2);
        }

        .super-admin-modal-header {
            text-align: center;
            margin-bottom: 2rem;
        }

        .super-admin-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
            border-radius: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            font-size: 2.5rem;
            color: white;
            box-shadow: 0 10px 25px rgba(26, 147, 111, 0.35);
            transform: rotate(0deg);
            transition: transform 0.3s;
        }

        .super-admin-modal-content:hover .super-admin-icon {
            transform: rotate(5deg) scale(1.05);
        }

        .super-admin-modal h3 {
            color: var(--dark-green);
            font-weight: 800;
            margin-bottom: 0.5rem;
            font-size: 1.8rem;
        }

        .super-admin-modal p {
            color: #6c757d;
            font-size: 0.95rem;
        }

        .super-admin-badge {
            background: linear-gradient(135deg, #e8f7f1, #d7f0e7);
            color: var(--dark-green);
            padding: 8px 16px;
            border-radius: 30px;
            display: inline-block;
            font-size: 0.8rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            border: 1px solid rgba(26, 147, 111, 0.2);
        }

        .super-admin-login-btn {
            background: linear-gradient(90deg, var(--dark-green), var(--primary-green));
            color: white;
            border: none;
            padding: 16px;
            border-radius: 20px;
            font-weight: 700;
            width: 100%;
            transition: all 0.3s;
            margin-top: 1.5rem;
            font-size: 1.1rem;
            box-shadow: 0 8px 20px rgba(26, 147, 111, 0.35);
        }

        .super-admin-login-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 30px rgba(17, 75, 95, 0.35);
            background: linear-gradient(90deg, #0e3f4f, #137b5e);
        }

        @keyframes modalSlideIn {
            from {
                transform: translateY(-50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .director-modal-close {
            position: absolute;
            top: 15px;
            right: 15px;
            background: none;
            border: none;
            font-size: 1.5rem;
            color: #999;
            cursor: pointer;
            transition: color 0.2s;
            z-index: 10;
        }

        .director-modal-close:hover {
            color: var(--dark-green);
        }

        .role-selector {
            margin-bottom: 2rem;
        }

        .role-selector label {
            font-weight: 600;
            color: var(--dark-green);
            margin-bottom: 0.8rem;
            display: block;
        }

        .role-options {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            margin-bottom: 1rem;
        }

        .role-btn {
            background: white;
            border: 1px solid #d0e0d0;
            border-radius: 12px;
            padding: 12px 8px;
            color: var(--deep-charcoal);
            font-weight: 500;
            font-size: 0.9rem;
            transition: all 0.2s;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            text-align: center;
        }

        .role-btn i {
            font-size: 1.3rem;
            color: var(--primary-green);
        }

        .role-btn:hover {
            border-color: var(--primary-green);
            background: #e8f5e8;
            transform: translateY(-2px);
        }

        .role-btn.active {
            background: linear-gradient(145deg, var(--primary-green), var(--dark-green));
            border-color: var(--dark-green);
            color: white;
        }

        .role-btn.active i {
            color: white;
        }

        .form-floating {
            margin-bottom: 1.2rem;
        }

        .form-control:focus {
            border-color: var(--primary-green);
            box-shadow: 0 0 0 0.25rem rgba(26, 147, 111, 0.2);
        }

        .btn-login {
            background: linear-gradient(90deg, var(--dark-green) 0%, var(--primary-green) 100%);
            border: none;
            color: white;
            font-weight: 600;
            padding: 14px 20px;
            border-radius: 60px;
            width: 100%;
            font-size: 1.1rem;
            transition: all 0.2s;
            margin: 20px 0 15px 0;
            box-shadow: 0 8px 18px -6px rgba(26, 147, 111, 0.4);
        }

        .btn-login:hover {
            transform: translateY(-2px);
            background: linear-gradient(90deg, #0e3f4f 0%, #137b5e 100%);
            box-shadow: 0 12px 24px -8px #114b5f;
        }

        .forgot-link {
            color: var(--dark-green);
            text-decoration: none;
            font-weight: 500;
            font-size: 0.9rem;
            transition: 0.2s;
            border-bottom: 1px dashed transparent;
        }

        .forgot-link:hover {
            color: var(--primary-green);
            border-bottom-color: var(--primary-green);
        }

        .signup-prompt {
            color: #4a5c5c;
            font-size: 0.95rem;
            margin-top: 0.5rem;
            text-align: center;
        }

        .signup-prompt a {
            color: var(--primary-green);
            font-weight: 600;
            text-decoration: none;
            border-bottom: 1px solid var(--light-green);
        }

        .signup-prompt a:hover {
            color: var(--dark-green);
        }

        .alert-message {
            margin-bottom: 1.5rem;
            border-radius: 12px;
            border: none;
        }

        .loading-spinner {
            display: none;
            width: 20px;
            height: 20px;
            border: 2px solid #ffffff;
            border-top: 2px solid transparent;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-left: 10px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Secret key sequence counter display */
        .secret-key-counter {
            position: fixed;
            bottom: 20px;
            left: 20px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 15px;
            border-radius: 30px;
            font-size: 0.85rem;
            z-index: 10001;
            display: none;
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255,255,255,0.2);
        }

        .secret-key-counter.show {
            display: block;
        }

        @media (max-width: 992px) {
            .cover-card { padding: 2rem 1.5rem; }
            .welcome-panel { padding: 2rem 1.8rem; }
            .welcome-panel h1 { font-size: 2.3rem; }
            .role-options { grid-template-columns: repeat(2, 1fr); }
        }

        @media (max-width: 768px) {
            body { align-items: flex-start; }
            .welcome-panel { margin-bottom: 25px; }
            .login-panel { padding: 2rem 1.5rem; }
            .welcome-panel .lead { max-width: 100%; }
            .role-options { grid-template-columns: 1fr; }
        }
    </style>
</head>
<body>
    <div class="cover-card">
        <div class="container-fluid g-4">
            <div class="row g-5 align-items-stretch">
                <!-- LEFT COVER / WELCOME PANEL -->
                <div class="col-lg-7 d-flex">
                    <div class="welcome-panel w-100">
                        <h1>Welcome to<br>WEPESI HOTEL MANAGEMENT SOULTION</h1>
                        <p class="lead">All‑in‑one hospitality command center — elegant, fast, and intuitive.</p>
                        
                        <ul class="feature-list">
                            <li><i class="fa-regular fa-circle-check"></i> Rooms · reservations · guests</li>
                            <li><i class="fa-regular fa-circle-check"></i> Frontdesk · housekeeping · maintenance</li>
                            <li><i class="fa-regular fa-circle-check"></i> Inventory · accounts · HR & documents</li>
                            <li><i class="fa-regular fa-circle-check"></i> Real‑time reports & smart insights</li>
                        </ul>

                        
                    </div>
                </div>

                <!-- RIGHT LOGIN PANEL -->
                <div class="col-lg-5 d-flex">
                    <div class="login-panel w-100">

                        <!-- SUPER ADMIN BUTTON - HIDDEN BY DEFAULT -->
                        <div class="super-admin-entry" onclick="openSuperAdminModal()" id="superAdminBtn">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <div class="super-admin-tooltip" id="superAdminTooltip">Super Admin Access</div>

                        <!-- Secret key sequence counter (hidden by default) -->
                        <div class="secret-key-counter" id="secretKeyCounter">
                            <i class="fas fa-key me-2"></i>
                            <span id="keySequenceDisplay">0/5</span>
                        </div>

                        <div class="brand-mini">
                            <img src="{{ asset('images/wepesi-logo.png') }}" alt="" class="brand-mini-logo" width="64" height="64" aria-hidden="true">
                            <span>WEPESI HOTEL MANAGEMENT SOULTION · version 2.0</span>
                        </div>

                        <h2>Staff Login</h2>

                        <!-- Session Status -->
                        @if (session('status'))
                            <div class="alert alert-success alert-message" role="alert">
                                <i class="fas fa-check-circle me-2"></i>
                                {{ session('status') }}
                            </div>
                        @endif

                        <!-- Validation Errors -->
                        @if ($errors->any())
                            <div class="alert alert-danger alert-message" role="alert">
                                <i class="fas fa-exclamation-circle me-2"></i>
                                <ul class="mb-0 ps-3">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <!-- Custom Alert Container -->
                        <div id="customAlert" class="alert alert-message" style="display: none;" role="alert">
                            <i class="fas me-2" id="alertIcon"></i>
                            <span id="alertText"></span>
                        </div>

                        <!-- Role Selection -->
                        <div class="role-selector">
                            <label><i class="fa-regular fa-id-card me-1"></i> Select your role</label>
                            <div class="role-options">
                                <div class="role-btn" data-role="director" onclick="selectRole('director')">
                                    <i class="fas fa-crown"></i>
                                    <span>Director</span>
                                </div>
                                <div class="role-btn" data-role="manager" onclick="selectRole('manager')">
                                    <i class="fas fa-user-tie"></i>
                                    <span>Manager</span>
                                </div>
                                <div class="role-btn" data-role="front_desk" onclick="selectRole('front_desk')">
                                    <i class="fas fa-concierge-bell"></i>
                                    <span>Front Desk</span>
                                </div>
                                <div class="role-btn" data-role="housekeeping" onclick="selectRole('housekeeping')">
                                    <i class="fas fa-broom"></i>
                                    <span>Housekeeping</span>
                                </div>
                                <div class="role-btn" data-role="food_beverage" onclick="selectRole('food_beverage')">
                                    <i class="fas fa-utensils"></i>
                                    <span>Food & Beverage</span>
                                </div>
                                <div class="role-btn" data-role="accountant" onclick="selectRole('accountant')">
                                    <i class="fas fa-calculator"></i>
                                    <span>Accountant</span>
                                </div>
                            </div>
                            <input type="hidden" name="selected_role" id="selected_role" value="">
                        </div>

                        <!-- Login Form -->
                        <form method="POST" action="{{ route('login') }}" id="loginForm">
                            @csrf
                            <input type="hidden" name="role" id="role_input" value="">

                            <div class="form-floating mb-3">
                                <input type="email" class="form-control @error('email') is-invalid @enderror" 
                                       id="email" name="email" placeholder="name@example.com" 
                                       value="{{ old('email') }}" required autocomplete="email" autofocus>
                                <label for="email"><i class="fa-regular fa-envelope me-1 text-secondary"></i> Email address</label>
                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <div class="form-floating mb-2 password-field-wrapper">
                                <input type="password" class="form-control @error('password') is-invalid @enderror" 
                                       id="password" name="password" placeholder="Password" required autocomplete="current-password">
                                <label for="password"><i class="fa-regular fa-key me-1 text-secondary"></i> Password</label>
                                <button type="button" class="password-toggle" onclick="togglePasswordVisibility('password')">
                                    <i class="fa-regular fa-eye" id="passwordToggleIcon"></i>
                                </button>
                                @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="remember" style="color: #3d5a5a;">
                                        Stay signed in
                                    </label>
                                </div>
                            </div>

                            <button type="submit" class="btn-login" id="loginButton">
                                <span>Log in to dashboard</span>
                                <span class="loading-spinner" id="loginSpinner"></span>
                            </button>

                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-12 text-center">
                <span class="text-muted small opacity-50">
                    <i class="fa-regular fa-copyright"></i> {{ date('Y') }} {{ hotelName() }} – serene operations, elevated stays.
                </span>
            </div>
        </div>
    </div>

    <!-- SUPER ADMIN MODAL -->
    <div class="super-admin-modal" id="superAdminModal">
        <div class="super-admin-modal-content">
            <button class="director-modal-close" onclick="closeSuperAdminModal()">
                <i class="fas fa-times"></i>
            </button>
            
            <div class="super-admin-modal-header">
                <div class="super-admin-icon">
                    <i class="fas fa-shield-halded"></i>
                </div>
                <h3>Super Admin</h3>
                <div class="super-admin-badge">
                    <i class="fas fa-crown me-1"></i> System Administrator
                </div>
                <p>Access the central command center to manage all hotels, subscriptions, and system settings</p>
            </div>
            
            <!-- Super Admin Login Form -->
            <form method="POST" action="{{ route('super.admin.login') }}" id="superAdminLoginForm">
                @csrf
                
                <div class="form-floating mb-3">
                    <input type="email" class="form-control" id="super_admin_email" name="email" placeholder="admin@{{ request()->getHost() }}" required>
                    <label for="super_admin_email"><i class="fa-regular fa-envelope me-1 text-secondary"></i> Admin Email</label>
                </div>
                
                <div class="form-floating mb-3 password-field-wrapper">
                    <input type="password" class="form-control" id="super_admin_password" name="password" placeholder="Password" required>
                    <label for="super_admin_password"><i class="fa-regular fa-key me-1 text-secondary"></i> Admin Password</label>
                    <button type="button" class="password-toggle" onclick="togglePasswordVisibility('super_admin_password')">
                        <i class="fa-regular fa-eye" id="superAdminPasswordToggleIcon"></i>
                    </button>
                </div>
                
                <div class="form-check mb-3">
                    <input class="form-check-input" type="checkbox" name="remember" id="super_admin_remember">
                    <label class="form-check-label" for="super_admin_remember">
                        Keep me signed in
                    </label>
                </div>
                
                <button type="submit" class="super-admin-login-btn" id="superAdminLoginBtn">
                    <i class="fas fa-sign-in-alt me-2"></i>
                    <span>Access Super Admin Dashboard</span>
                    <span class="loading-spinner" id="superAdminLoginSpinner"></span>
                </button>
            </form>

            <div class="text-center mt-4">
                <small class="text-muted">
                    <i class="fas fa-database me-1"></i> Manage Hotels · Subscriptions · System Settings
                </small>
            </div>

        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Secret key sequence for Super Admin button
        let keySequence = [];
        const SECRET_CODE = ['s', 'u', 'p', 'e', 'r']; // Type "super" to reveal
        let timeoutId = null;

        // Role Selection
        function selectRole(role) {
            document.querySelectorAll('.role-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            document.querySelector(`[data-role="${role}"]`).classList.add('active');
            document.getElementById('selected_role').value = role;
            document.getElementById('role_input').value = role;
            localStorage.setItem('selectedRole', role);
        }

        // Password Visibility Toggle
        function togglePasswordVisibility(fieldId) {
            const passwordField = document.getElementById(fieldId);
            let toggleIcon;
            
            if (fieldId === 'password') {
                toggleIcon = document.getElementById('passwordToggleIcon');
            } else if (fieldId === 'super_admin_password') {
                toggleIcon = document.getElementById('superAdminPasswordToggleIcon');
            }
            
            if (passwordField.type === 'password') {
                passwordField.type = 'text';
                toggleIcon.classList.remove('fa-eye');
                toggleIcon.classList.add('fa-eye-slash');
            } else {
                passwordField.type = 'password';
                toggleIcon.classList.remove('fa-eye-slash');
                toggleIcon.classList.add('fa-eye');
            }
        }

        // SUPER ADMIN MODAL FUNCTIONS
        function openSuperAdminModal() {
            const modal = document.getElementById('superAdminModal');
            modal.classList.add('show');
            document.body.style.overflow = 'hidden';
            
            // Add animation effect to button
            const btn = document.getElementById('superAdminBtn');
            btn.style.animation = 'none';
            btn.offsetHeight; // Trigger reflow
            btn.style.animation = 'subtlePulse 0.5s';
        }

        function closeSuperAdminModal() {
            const modal = document.getElementById('superAdminModal');
            modal.classList.remove('show');
            document.body.style.overflow = '';
        }

        // Function to reveal Super Admin button
        function revealSuperAdminButton() {
            const superAdminBtn = document.getElementById('superAdminBtn');
            const superAdminTooltip = document.getElementById('superAdminTooltip');
            
            superAdminBtn.classList.add('visible');
            superAdminTooltip.classList.add('visible');
            
            // Show confirmation message
            showCustomAlert('Super Admin access enabled!', 'success');
            
            // Hide the counter
            document.getElementById('secretKeyCounter').classList.remove('show');
            
            // Reset sequence
            keySequence = [];
        }

        // Load saved role on page load
        document.addEventListener('DOMContentLoaded', function() {
            const savedRole = localStorage.getItem('selectedRole') || 'manager';
            selectRole(savedRole);
            
            const rememberedEmail = localStorage.getItem('rememberedEmail');
            if (rememberedEmail) {
                document.getElementById('email').value = rememberedEmail;
                document.getElementById('remember').checked = true;
            }
            
            // Check for URL parameters
            const urlParams = new URLSearchParams(window.location.search);
            
            if (urlParams.get('verified') === 'success') {
                showCustomAlert('Email verified successfully! Please log in.', 'success');
            }
            
            if (urlParams.get('registered') === 'success') {
                showCustomAlert('Registration successful! Please check your email for verification.', 'success');
            }
            
            if (urlParams.get('error') === 'invalid_credentials') {
                showCustomAlert('Invalid email or password.', 'danger');
            }
            
            // Secret key sequence listener for Super Admin button
            document.addEventListener('keydown', function(e) {
                // Only track if not in input field
                if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
                    return;
                }

                const key = e.key.toLowerCase();
                
                // Only track letter keys
                if (key.length === 1 && key.match(/[a-z]/i)) {
                    // Clear previous timeout
                    if (timeoutId) {
                        clearTimeout(timeoutId);
                    }

                    // Add key to sequence
                    keySequence.push(key);
                    
                    // Keep only last 5 keys
                    if (keySequence.length > 5) {
                        keySequence.shift();
                    }

                    // Show counter if sequence started
                    if (keySequence.length > 0) {
                        const counterEl = document.getElementById('secretKeyCounter');
                        counterEl.classList.add('show');
                        
                        // Build display string
                        let displayStr = '';
                        for (let i = 0; i < 5; i++) {
                            if (i < keySequence.length) {
                                displayStr += '●';
                            } else {
                                displayStr += '○';
                            }
                        }
                        document.getElementById('keySequenceDisplay').innerHTML = displayStr + ' ' + keySequence.length + '/5';
                    }

                    // Check if sequence matches secret code
                    if (keySequence.length === 5) {
                        let matches = true;
                        for (let i = 0; i < 5; i++) {
                            if (keySequence[i] !== SECRET_CODE[i]) {
                                matches = false;
                                break;
                            }
                        }
                        
                        if (matches) {
                            revealSuperAdminButton();
                        } else {
                            // Wrong sequence, reset after showing error
                            showCustomAlert('Invalid sequence', 'warning');
                            keySequence = [];
                            document.getElementById('secretKeyCounter').classList.remove('show');
                        }
                    }

                    // Set timeout to clear sequence after 3 seconds of inactivity
                    timeoutId = setTimeout(() => {
                        keySequence = [];
                        document.getElementById('secretKeyCounter').classList.remove('show');
                    }, 3000);
                }
            });
        });

        // Close modal when clicking outside
        window.addEventListener('click', function(e) {
            const superAdminModal = document.getElementById('superAdminModal');
            
            if (e.target === superAdminModal) {
                closeSuperAdminModal();
            }
        });

        // Close modal with Escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeSuperAdminModal();
            }
        });

        // Form submission handling for main login
        document.getElementById('loginForm').addEventListener('submit', function(e) {
            const role = document.getElementById('selected_role').value;
            
            if (!role) {
                e.preventDefault();
                showCustomAlert('Please select your role before logging in.', 'warning');
                return false;
            }
            
            const email = document.getElementById('email').value.trim();
            const password = document.getElementById('password').value;
            
            if (!email || !password) {
                e.preventDefault();
                showCustomAlert('Please fill in all fields.', 'warning');
                return false;
            }
            
            if (!isValidEmail(email)) {
                e.preventDefault();
                showCustomAlert('Please enter a valid email address.', 'warning');
                return false;
            }
            
            document.getElementById('loginButton').disabled = true;
            document.getElementById('loginSpinner').style.display = 'inline-block';
            
            if (document.getElementById('remember').checked) {
                localStorage.setItem('rememberedEmail', email);
            } else {
                localStorage.removeItem('rememberedEmail');
            }
        });

        // SUPER ADMIN login form submission
        document.getElementById('superAdminLoginForm').addEventListener('submit', function(e) {
            const email = document.getElementById('super_admin_email').value.trim();
            const password = document.getElementById('super_admin_password').value;
            
            if (!email || !password) {
                e.preventDefault();
                showCustomAlert('Please fill in all fields.', 'warning');
                return false;
            }
            
            if (!isValidEmail(email)) {
                e.preventDefault();
                showCustomAlert('Please enter a valid email address.', 'warning');
                return false;
            }
            
            // Show loading state
            document.getElementById('superAdminLoginBtn').disabled = true;
            document.getElementById('superAdminLoginSpinner').style.display = 'inline-block';
            
            // Form will submit normally
            return true;
        });

        // Email validation
        function isValidEmail(email) {
            const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return re.test(email);
        }

        // Custom alert function
        function showCustomAlert(message, type = 'info') {
            const alertDiv = document.getElementById('customAlert');
            const alertIcon = document.getElementById('alertIcon');
            const alertText = document.getElementById('alertText');
            
            alertDiv.className = `alert alert-${type} alert-message`;
            
            const icons = {
                'success': 'fa-check-circle',
                'danger': 'fa-exclamation-circle',
                'warning': 'fa-exclamation-triangle',
                'info': 'fa-info-circle'
            };
            
            alertIcon.className = `fas ${icons[type] || icons.info} me-2`;
            alertText.textContent = message;
            alertDiv.style.display = 'block';
            
            setTimeout(() => {
                alertDiv.style.display = 'none';
            }, 5000);
        }

        // Email input validation
        document.getElementById('email').addEventListener('input', function() {
            if (this.value && !isValidEmail(this.value)) {
                this.classList.add('is-invalid');
            } else {
                this.classList.remove('is-invalid');
            }
        });

        // Keyboard shortcut: Ctrl+Alt+L to focus login form
        document.addEventListener('keydown', function(e) {
            if (e.ctrlKey && e.altKey && e.key === 'l') {
                e.preventDefault();
                document.getElementById('email').focus();
            }
        });

        // Prevent double form submission
        let mainFormSubmitted = false;
        document.getElementById('loginForm').addEventListener('submit', function(e) {
            if (mainFormSubmitted) {
                e.preventDefault();
                return false;
            }
            mainFormSubmitted = true;
        });

        let superAdminFormSubmitted = false;
        document.getElementById('superAdminLoginForm').addEventListener('submit', function(e) {
            if (superAdminFormSubmitted) {
                e.preventDefault();
                return false;
            }
            superAdminFormSubmitted = true;
        });

        // Handle browser back/forward cache
        window.addEventListener('pageshow', function(event) {
            if (event.persisted) {
                window.location.reload();
            }
        });
    </script>
</body>
</html>