{% extends "base.html" %}

{% block title %}Login | NailTech Nation{% endblock %}

{% block content %}
<div class="auth-page">
    <div class="container">
        <div class="auth-container">
            <h1 class="auth-title">Welcome Back!</h1>
            <p class="auth-subtitle">Choose your login type</p>
            
            <!-- Tab Switcher -->
            <div class="auth-tabs">
                <button class="auth-tab active" onclick="switchTab('client')">Client</button>
                <button class="auth-tab" onclick="switchTab('technician')">Technician</button>
                <button class="auth-tab" onclick="switchTab('admin')">Admin</button>
            </div>
            
            <!-- Client Login Form -->
            <form method="POST" class="auth-form" id="clientForm">
                <input type="hidden" name="login_type" value="client">
                
                <div class="form-group">
                    <label>Phone Number</label>
                    <input type="tel" name="phone" placeholder="0712345678" required 
                           pattern="[0-9]{10}" maxlength="10" oninput="validatePhoneInput(this)">
                </div>
                
                <button type="submit" class="btn btn-primary btn-block">Login</button>
                
                <p class="auth-footer">
                    Don't have an account? 
                    <a href="{{ url_for('auth.register') }}">Register here</a>
                </p>
            </form>
            
            <!-- Technician Login Form -->
            <form method="POST" class="auth-form" id="technicianForm" style="display: none;">
                <input type="hidden" name="login_type" value="technician">
                
                <div class="form-group">
                    <label>Phone Number</label>
                    <input type="tel" name="tech_phone" placeholder="0712345678" required 
                           pattern="[0-9]{10}" maxlength="10">
                </div>
                
                <div class="form-group">
                    <label>Access Code</label>
                    <input type="text" name="access_code" placeholder="Enter 6-digit code" required 
                           maxlength="6" style="text-transform: uppercase;">
                </div>
                
                <button type="submit" class="btn btn-primary btn-block">Login</button>
            </form>
            
            <!-- Admin Login Form -->
            <form method="POST" class="auth-form" id="adminForm" style="display: none;">
                <input type="hidden" name="login_type" value="admin">
                
                <div class="form-group">
                    <label>Email</label>
                    <input type="email" name="admin_email" placeholder="admin@nailtechnation.com" required>
                </div>
                
                <div class="form-group">
                    <label>Password</label>
                    <input type="password" name="admin_password" placeholder="Enter password" required>
                </div>
                
                <button type="submit" class="btn btn-primary btn-block">Login</button>
            </form>
        </div>
    </div>
</div>

<style>
.auth-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding: 3rem 0;
}

.auth-container {
    max-width: 450px;
    margin: 0 auto;
    background: white;
    padding: 3rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.auth-title {
    text-align: center;
    margin-bottom: 0.5rem;
}

.auth-subtitle {
    text-align: center;
    color: var(--light-text);
    margin-bottom: 2rem;
}

.auth-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.auth-tab {
    flex: 1;
    padding: 0.75rem;
    background: var(--bg-light);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 500;
    transition: var(--transition);
}

.auth-tab.active {
    background: var(--bg-gradient);
    color: white;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.form-group input {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--bg-light);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    transition: var(--transition);
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary-pink);
}

.btn-block {
    width: 100%;
}

.auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    color: var(--light-text);
}
</style>

<script>
function switchTab(type) {
    // Hide all forms
    document.getElementById('clientForm').style.display = 'none';
    document.getElementById('technicianForm').style.display = 'none';
    document.getElementById('adminForm').style.display = 'none';
    
    // Remove active class from all tabs
    document.querySelectorAll('.auth-tab').forEach(tab => {
        tab.classList.remove('active');
    });
    
    // Show selected form and activate tab
    if (type === 'client') {
        document.getElementById('clientForm').style.display = 'block';
        document.querySelectorAll('.auth-tab')[0].classList.add('active');
    } else if (type === 'technician') {
        document.getElementById('technicianForm').style.display = 'block';
        document.querySelectorAll('.auth-tab')[1].classList.add('active');
    } else if (type === 'admin') {
        document.getElementById('adminForm').style.display = 'block';
        document.querySelectorAll('.auth-tab')[2].classList.add('active');
    }
}
</script>
{% endblock %}