{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign In — SwiftPOS</title>
    <meta name="description" content="Sign in to SwiftPOS — Nigeria's smartest cloud-based POS system for retail and SMEs.">
    <link rel="icon" type="image/x-icon" href="{% static 'core/icons/favicon.ico' %}">

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@700;800;900&display=swap" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- SwiftPOS base tokens -->
    <link rel="stylesheet" href="{% static 'css/style.css' %}?v=12">
    <!-- Auth styles -->
    <link rel="stylesheet" href="{% static 'css/auth.css' %}?v=5">

    {% if recaptcha_enabled %}
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    {% endif %}
</head>
<body class="auth-body">

{% block content %}
<div class="w-100 d-flex flex-column align-items-center">
    <div class="auth-split">
        <!-- ── LEFT: FORM PANEL ── -->
        <div class="auth-form-panel">
            <div class="auth-form-inner">
                <!-- Brand row -->
                <a href="/" class="auth-brand-row">
                    <img src="{% static 'core/icons/icon-192.png' %}"
                         alt="SwiftPOS"
                         class="auth-brand-logo"
                         onerror="this.style.display='none'">
                    <span class="auth-brand-name">Swift<span>POS</span></span>
                </a>

                <h2 class="auth-form-title">Welcome back</h2>
                <p class="auth-form-sub">Sign in to manage your sales, inventory, and reports.</p>

                <!-- Messages -->
                {% if messages %}
                    {% for message in messages %}
                    <div class="auth-alert auth-alert-{{ message.tags|default:'info' }}">
                        <i class="fas fa-{% if 'success' in message.tags %}check-circle{% elif 'error' in message.tags or 'danger' in message.tags %}exclamation-circle{% elif 'warning' in message.tags %}exclamation-triangle{% else %}info-circle{% endif %}"></i>
                        <span>{{ message }}</span>
                    </div>
                    {% endfor %}
                {% endif %}

                <!-- Non-field errors -->
                {% if form.non_field_errors %}
                <div class="auth-alert auth-alert-error">
                    <i class="fas fa-triangle-exclamation"></i>
                    <div>
                        {% for error in form.non_field_errors %}
                        <div>{{ error }}</div>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                <!-- Form -->
                <form method="post" id="loginForm" novalidate data-offline="true" data-offline-type="login">
                    {% csrf_token %}

                    <!-- Username -->
                    <div class="auth-field">
                        <label class="auth-label" for="id_username">Username or Email</label>
                        <div class="auth-input-wrap">
                            <input type="text"
                                   name="username"
                                   id="id_username"
                                   class="auth-input {% if form.username.errors %}is-error{% endif %}"
                                   placeholder="e.g. cashier01"
                                   autofocus
                                   required
                                   autocomplete="username"
                                   value="{% if form.username.value %}{{ form.username.value }}{% endif %}">
                            <i class="fas fa-user auth-input-icon"></i>
                        </div>
                        {% if form.username.errors %}
                        <div class="auth-field-error">
                            <i class="fas fa-circle-exclamation"></i>
                            {{ form.username.errors.0 }}
                        </div>
                        {% endif %}
                    </div>

                    <!-- Password -->
                    <div class="auth-field">
                        <label class="auth-label" for="id_password">
                            Password
                            <a href="{% url 'password_reset' %}">Forgot password?</a>
                        </label>
                        <div class="auth-input-wrap">
                            <input type="password"
                                   name="password"
                                   id="id_password"
                                   class="auth-input {% if form.password.errors %}is-error{% endif %}"
                                   placeholder="Enter your password"
                                   required
                                   autocomplete="current-password"
                                   style="padding-right: 2.8rem;">
                            <i class="fas fa-lock auth-input-icon"></i>
                            <button type="button" class="auth-input-eye" id="togglePassword" aria-label="Toggle password visibility">
                                <i class="fas fa-eye" id="eyeIcon"></i>
                            </button>
                        </div>
                        {% if form.password.errors %}
                        <div class="auth-field-error">
                            <i class="fas fa-circle-exclamation"></i>
                            {{ form.password.errors.0 }}
                        </div>
                        {% endif %}
                    </div>

                    <!-- Options row -->
                    <div class="auth-options">
                        <label class="auth-check-label">
                            <input type="checkbox" class="auth-check" id="rememberMe" value="1">
                            Keep me signed in
                        </label>
                    </div>

                    <!-- reCAPTCHA -->
                    {% if recaptcha_enabled %}
                    <div class="auth-recaptcha">
                        <div class="g-recaptcha" data-sitekey="{{ recaptcha_site_key }}"></div>
                    </div>
                    {% endif %}

                    <!-- Submit -->
                    <button type="submit" class="auth-submit-btn" id="loginBtn">
                        Sign in to SwiftPOS
                    </button>
                </form>

                <!-- Footer link -->
                <div class="auth-footer-link">
                    Don't have an account?
                    <a href="/register/">Create an account</a>
                </div>

            </div>
        </div>

        <!-- ── RIGHT: HERO PANEL ── -->
        <div class="auth-hero" aria-hidden="true">
            <!-- Brand header in hero -->
            <a href="/" class="auth-hero-brand">
                <img src="{% static 'core/icons/icon-192.png' %}"
                     alt="SwiftPOS"
                     class="auth-hero-brand-logo"
                     onerror="this.style.display='none'">
                <span class="auth-hero-brand-name">Swift<span>POS</span></span>
            </a>

            <!-- Centered CSS Graphic (matches user screenshot) -->
            <div class="auth-hero-graphic-container">
                <div class="auth-hero-circle-bg">
                    <!-- Float badges representing app connections -->
                    <div class="auth-floating-badge badge-pos-1"><i class="fas fa-barcode"></i></div>
                    <div class="auth-floating-badge badge-pos-2"><i class="fas fa-boxes-stacked"></i></div>
                    <div class="auth-floating-badge badge-pos-3"><i class="fas fa-chart-line"></i></div>
                    
                    <!-- Center mock preview window -->
                    <div class="auth-mock-dashboard-card">
                        <div class="auth-mock-header"></div>
                        <div class="auth-mock-row">
                            <div class="auth-mock-avatar"></div>
                            <div class="auth-mock-line"></div>
                        </div>
                        <div class="auth-mock-row">
                            <div class="auth-mock-avatar" style="background:#def7ec;"></div>
                            <div class="auth-mock-line-short"></div>
                        </div>
                        <div class="auth-mock-row" style="margin-bottom:0;">
                            <div class="auth-mock-avatar" style="background:#fde8e8;"></div>
                            <div class="auth-mock-line"></div>
                        </div>
                    </div>

                    <!-- Beautiful connective paths inside the circle -->
                    <svg class="auth-graphic-svg" viewBox="0 0 280 280">
                        <path d="M 60 70 Q 140 140 140 140" stroke="rgba(255, 255, 255, 0.15)" stroke-width="2" fill="none" />
                        <path d="M 50 180 Q 140 140 140 140" stroke="rgba(255, 255, 255, 0.15)" stroke-width="2" fill="none" />
                        <path d="M 200 220 Q 140 140 140 140" stroke="rgba(255, 255, 255, 0.15)" stroke-width="2" fill="none" />
                    </svg>
                </div>
            </div>

            <!-- Onboarding Text -->
            <div class="auth-hero-body">
                <h3 class="auth-hero-title">Connect with every branch</h3>
                <p class="auth-hero-sub">Everything you need in an easily customizable live dashboard.</p>

                <!-- Slider dots -->
                <div class="auth-slider-dots">
                    <span class="auth-slider-dot active"></span>
                    <span class="auth-slider-dot"></span>
                    <span class="auth-slider-dot"></span>
                </div>
            </div>
        </div>
    </div>

    <!-- Copyright outside the card -->
    <div class="auth-page-footer">
        &copy; {% now "Y" %} SwiftPOS — All rights reserved
    </div>
</div>
{% endblock %}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Password toggle
const toggleBtn = document.getElementById('togglePassword');
const pwInput   = document.getElementById('id_password');
const eyeIcon   = document.getElementById('eyeIcon');
if (toggleBtn && pwInput) {
    toggleBtn.addEventListener('click', () => {
        const isPassword = pwInput.type === 'password';
        pwInput.type = isPassword ? 'text' : 'password';
        eyeIcon.className = isPassword ? 'fas fa-eye-slash' : 'fas fa-eye';
    });
}

// Submit button state
document.getElementById('loginForm')?.addEventListener('submit', function () {
    const btn = document.getElementById('loginBtn');
    if (btn) {
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Signing in…';
        btn.disabled = true;
    }
});
</script>

</body>
</html>
