<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hospitality Group CRM - Login</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .login-container {
            background: white;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            max-width: 900px;
            width: 100%;
        }

        .login-left {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 3rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .login-right {
            padding: 3rem;
        }

        .logo {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 1rem;
        }

        .subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
            margin-bottom: 2rem;
        }

        .venue-card {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 10px;
            padding: 1rem;
            margin-bottom: 0.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .venue-card:hover,
        .venue-card.selected {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }

        .venue-card i {
            margin-right: 0.5rem;
        }

        .form-control:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }

        .btn-login {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            padding: 0.75rem 2rem;
            border-radius: 25px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .btn-login:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }

        .demo-credentials {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 1rem;
            margin-top: 1rem;
        }

        .demo-credentials h6 {
            color: #495057;
            margin-bottom: 0.5rem;
        }

        .demo-credentials small {
            color: #6c757d;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="login-container">
                    <div class="row g-0">
                        <!-- Left Panel -->
                        <div class="col-lg-5 login-left">
                            <div>
                                <div class="logo">
                                    <i class="fas fa-hotel"></i> Hospitality Group
                                </div>
                                <div class="subtitle">
                                    CRM & Loyalty Hub
                                </div>
                                <p class="mb-4">
                                    Manage guest experiences across Seven Hotel, City Center Hotel, and Coral Bay Resort with our comprehensive loyalty platform.
                                </p>

                                <h6 class="mb-3">Select Your Venue</h6>
                                <div id="venueSelector">
                                    <div class="venue-card selected" data-venue="seven">
                                        <i class="fas fa-hotel"></i> Seven Hotel
                                    </div>
                                    <div class="venue-card" data-venue="city_center">
                                        <i class="fas fa-building"></i> City Center Hotel
                                    </div>
                                    <div class="venue-card" data-venue="coral_bay">
                                        <i class="fas fa-umbrella-beach"></i> Coral Bay Resort
                                    </div>
                                    <div class="venue-card" data-venue="la_taverna">
                                        <i class="fas fa-utensils"></i> La Taverna
                                    </div>
                                    <div class="venue-card" data-venue="rayes">
                                        <i class="fas fa-moon"></i> Rayes
                                    </div>
                                    <div class="venue-card" data-venue="taiga_sky">
                                        <i class="fas fa-glass-martini-alt"></i> Taiga Sky
                                    </div>
                                    <div class="venue-card" data-venue="trabouche">
                                        <i class="fas fa-water"></i> Trabouche
                                    </div>
                                    <div class="venue-card" data-venue="coral_bay_beach">
                                        <i class="fas fa-sun"></i> Coral Bay Beach
                                    </div>
                                    <div class="venue-card" data-venue="coral_bay_pool">
                                        <i class="fas fa-swimming-pool"></i> Coral Bay Pool
                                    </div>
                                    <div class="venue-card" data-venue="jetskis">
                                        <i class="fas fa-ship"></i> Jetskis
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Right Panel -->
                        <div class="col-lg-7 login-right">
                            <h3 class="mb-4">Welcome Back</h3>
                            <p class="text-muted mb-4">Sign in to access your CRM dashboard</p>

                            <form id="loginForm">
                                <div class="mb-3">
                                    <label for="username" class="form-label">Username</label>
                                    <input type="text" class="form-control" id="username" name="username" required>
                                </div>

                                <div class="mb-3">
                                    <label for="password" class="form-label">Password</label>
                                    <input type="password" class="form-control" id="password" name="password" required>
                                </div>

                                <div class="mb-3 form-check">
                                    <input type="checkbox" class="form-check-input" id="remember">
                                    <label class="form-check-label" for="remember">Remember me</label>
                                </div>

                                <button type="submit" class="btn btn-primary btn-login w-100 mb-3" id="loginBtn">
                                    <i class="fas fa-sign-in-alt"></i> Sign In
                                </button>
                            </form>

                            <!-- Demo Credentials -->
                            <div class="demo-credentials">
                                <h6><i class="fas fa-info-circle"></i> Demo Credentials</h6>
                                <div class="row">
                                    <div class="col-6">
                                        <small><strong>Reception:</strong><br>reception / password</small>
                                    </div>
                                    <div class="col-6">
                                        <small><strong>Admin:</strong><br>admin / password</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Venue selection
        document.querySelectorAll('.venue-card').forEach(card => {
            card.addEventListener('click', function() {
                document.querySelectorAll('.venue-card').forEach(c => c.classList.remove('selected'));
                this.classList.add('selected');
            });
        });

        // Login form submission
        document.getElementById('loginForm').addEventListener('submit', function(e) {
            e.preventDefault();

            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const selectedVenue = document.querySelector('.venue-card.selected').dataset.venue;

            // Show loading state
            const loginBtn = document.getElementById('loginBtn');
            const originalText = loginBtn.innerHTML;
            loginBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Signing in...';
            loginBtn.disabled = true;

            // Simulate login (in real app, this would be an API call)
            setTimeout(() => {
                // Simple demo validation
                if ((username === 'reception' && password === 'password') ||
                    (username === 'admin' && password === 'password')) {

                    // Store user session (in real app, this would be JWT token)
                    localStorage.setItem('user', JSON.stringify({
                        username: username,
                        role: username === 'admin' ? 'admin' : 'reception',
                        venue: selectedVenue
                    }));

                    // Redirect to dashboard
                    window.location.href = '/dashboard';
                } else {
                    alert('Invalid credentials. Use demo credentials shown below.');
                    loginBtn.innerHTML = originalText;
                    loginBtn.disabled = false;
                }
            }, 1000);
        });

        // Auto-fill demo credentials on click
        document.querySelectorAll('.demo-credentials small').forEach(el => {
            el.style.cursor = 'pointer';
            el.addEventListener('click', function() {
                const text = this.textContent;
                if (text.includes('reception')) {
                    document.getElementById('username').value = 'reception';
                    document.getElementById('password').value = 'password';
                } else if (text.includes('admin')) {
                    document.getElementById('username').value = 'admin';
                    document.getElementById('password').value = 'password';
                }
            });
        });
    </script>
</body>
</html>
