{% extends "layouts/full_base.html" %}

{% load static %}

{% block title %} Login - Adtlas TV {% endblock title %} 

{% block extra_css %} 
<style type="text/css">
    .alert {
        color: #721c24;
        text-align: center;
        margin: 10px 0;
        padding: 10px;
        border-radius: 5px;
    }
    .alert-danger {
        background-color: #f8d7da;
        border: 1px solid #f5c6cb;
    }
    .alert-success {
        background-color: #d4edda;
        border: 1px solid #c3e6cb;
        color: #155724;
    }
    .alert-info {
        background-color: #d1ecf1;
        border: 1px solid #b8daff;
        color: #0c5460;
    }
    
    .remember-me-wrapper {
        display: flex;
        align-items: center;
        margin: 15px 0px 0px 25px;
    }
    
    .remember-me-wrapper input[type="checkbox"] {
        margin-right: 8px;
        width: 16px;
        height: 16px;
    }
    
    .remember-me-wrapper label {
        color: #666;
        font-size: 14px;
        cursor: pointer;
        margin: 5px 0px 0px 10px;
    }
    
    .auth-links {
        margin-top: 20px;
        text-align: center;
    }
    
    .auth-links a {
        color: #007bff;
        text-decoration: none;
        font-size: 14px;
        margin: 0 10px;
    }
    
    .auth-links a:hover {
        text-decoration: underline;
    }
    
    .auth-links .divider {
        color: #ccc;
        margin: 0 5px;
    }
    
    .login-form-footer {
        margin-top: 25px;
        text-align: center;
        border-top: 1px solid #eee;
        padding-top: 20px;
    }
    
    .create-account-link {
        display: inline-block;
        margin-top: 10px;
        padding: 10px 20px;
        background-color: #28a745;
        color: white !important;
        text-decoration: none;
        border-radius: 5px;
        font-size: 14px;
        transition: background-color 0.3s;
    }
    
    .create-account-link:hover {
        background-color: #218838;
        text-decoration: none;
    }
    
    .password-toggle {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        cursor: pointer;
        color: #666;
        font-size: 18px;
    }
    
    .password-wrapper {
        position: relative;
    }
    
    .form-field-wrapper {
        margin-bottom: 15px;
    }
    
    .field-errors {
        color: #dc3545;
        font-size: 12px;
        margin-top: 5px;
    }
    
    .loading-spinner {
        display: none;
        margin-left: 10px;
        font-size: 16px;
    }
    
    .login100-form-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
</style>
{% endblock extra_css %}

{% block content %}
<!-- BACKGROUND-IMAGE -->
<div class="login-img">
    <!-- PAGE -->
    <div class="page">
        <div class="">
            <!-- CONTAINER OPEN -->
            <div class="container-login100">
                <div class="wrap-login100 p-0">
                    <div class="card-body">
                        <form class="login100-form validate-form" method="post" id="loginForm">
                            {% csrf_token %}
                            <span class="login100-form-title">
                                <a href="{% url 'core:landing' %}" class="logo-default">
                                    <img alt="Adtlas Project Logo" class="logo-default" src="{% static 'images/brands/logo_black.png' %}" width="171">
                                </a>
                                <h4 style="margin-top: 15px;">Sign In</h4>
                            </span>
                            <!-- Email Field -->
                            <div class="form-field-wrapper">
                                <div class="wrap-input100 validate-input" data-bs-validate="Email is required">
                                    {{ form.email }}
                                    <span class="focus-input100"></span>
                                    <span class="symbol-input100">
                                        <i class="zmdi zmdi-email" aria-hidden="true"></i>
                                    </span>
                                </div>
                                {% if form.email.errors %}
                                    <div class="field-errors">
                                        {% for error in form.email.errors %}
                                            <div>{{ error }}</div>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                            <!-- Password Field -->
                            <div class="form-field-wrapper">
                                <div class="wrap-input100 validate-input password-wrapper" data-bs-validate="Password is required">
                                    {{ form.password }}
                                    <span class="focus-input100"></span>
                                    <span class="symbol-input100">
                                        <i class="zmdi zmdi-lock" aria-hidden="true"></i>
                                    </span>
                                    <button type="button" class="password-toggle" onclick="togglePassword()">
                                        <i class="zmdi zmdi-eye" id="passwordToggleIcon"></i>
                                    </button>
                                </div>
                                {% if form.password.errors %}
                                    <div class="field-errors">
                                        {% for error in form.password.errors %}
                                            <div>{{ error }}</div>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                            <!-- Remember Me Checkbox -->
                            <div class="form-field-wrapper remember-me-wrapper">
                                {{ form.remember_me }}
                                <label for="{{ form.remember_me.id_for_label }}">
                                    {{ form.remember_me.label }}
                                </label>
                            </div>
                            <!-- Login Button -->
                            <div class="container-login100-form-btn">
                                <button type="submit" class="login100-form-btn btn-primary" id="loginBtn">
                                    Login
                                    <span class="loading-spinner" id="loadingSpinner">
                                        <i class="zmdi zmdi-refresh zmdi-hc-spin"></i>
                                    </span>
                                </button>
                            </div>
                            <!-- Authentication Links -->
                            <div class="auth-links">
                                <a href="{% url 'authentication:password_reset_request' %}">Forgot Password?</a>
                                <span class="divider">|</span>
                                <a href="javascript:void(0);" onclick="showHelpModal();" class="text-primary">Need Help?</a>
                            </div>
                            <!-- Create Account Section -->
                            <div class="login-form-footer">
                                <p class="text-dark mb-2">Don't have an account?</p>
                                <a href="{% url 'authentication:register' %}" class="create-account-link">
                                    <i class="zmdi zmdi-account-add"></i> Create New Account
                                </a>
                            </div>
                            <!-- Footer -->
                            <div class="text-center pt-3">
                                <p class="text-dark mb-0">
                                    Powered by 
                                    <a href="javascript:void(0);" class="text-primary ms-1" >SanoaMedia</a>
                                </p>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- CONTAINER CLOSED -->
        </div>
    </div>
    <!-- End PAGE -->
</div>

<!-- Help Modal -->
<div class="modal fade" id="helpModal" tabindex="-1" aria-labelledby="helpModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="helpModalLabel">Login Help</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <h6>Having trouble logging in?</h6>
                <ul>
                    <li>Make sure you're using the correct email address</li>
                    <li>Check that your password is correct (case-sensitive)</li>
                    <li>If you forgot your password, click "Forgot Password?" link</li>
                    <li>Ensure your account is not locked due to failed attempts</li>
                </ul>
                <hr>
                <h6>Need to create an account?</h6>
                <p>Click the "Create New Account" button below the login form.</p>
                <hr>
                <h6>Still need help?</h6>
                <p>
                    Contact our support team at 
                    <a href="mailto:support@adtlas.tv">support@adtlas.tv</a>
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- BACKGROUND-IMAGE CLOSED -->
{% endblock content %}

{% block extra_js %}

<script>
    function togglePassword() {
        const passwordField = document.getElementById('{{ form.password.id_for_label }}');
        const toggleIcon = document.getElementById('passwordToggleIcon');
        
        if (passwordField.type === 'password') {
            passwordField.type = 'text';
            toggleIcon.classList.remove('zmdi-eye');
            toggleIcon.classList.add('zmdi-eye-off');
        } else {
            passwordField.type = 'password';
            toggleIcon.classList.remove('zmdi-eye-off');
            toggleIcon.classList.add('zmdi-eye');
        }
    }
    
    function showHelpModal() {
        const helpModal = new bootstrap.Modal(document.getElementById('helpModal'));
        helpModal.show();
    }
    
    // Form submission with loading state
    document.getElementById('loginForm').addEventListener('submit', function(e) {
        const submitBtn = document.getElementById('loginBtn');
        const loadingSpinner = document.getElementById('loadingSpinner');
        
        submitBtn.disabled = true;
        loadingSpinner.style.display = 'inline-block';
        
        // Re-enable button after 10 seconds as fallback
        setTimeout(function() {
            submitBtn.disabled = false;
            loadingSpinner.style.display = 'none';
        }, 10000);
    });
    
    // Auto-focus on first empty field
    document.addEventListener('DOMContentLoaded', function() {
        const emailField = document.getElementById('{{ form.email.id_for_label }}');
        const passwordField = document.getElementById('{{ form.password.id_for_label }}');
        
        if (emailField && emailField.value === '') {
            emailField.focus();
        } else if (passwordField && passwordField.value === '') {
            passwordField.focus();
        }
    });
    
    // Enhanced form validation
    document.getElementById('loginForm').addEventListener('submit', function(e) {
        const email = document.getElementById('{{ form.email.id_for_label }}').value;
        const password = document.getElementById('{{ form.password.id_for_label }}').value;
        
        // Basic client-side validation
        if (!email || !password) {
            e.preventDefault();
            alert('Please fill in all required fields.');
            return false;
        }
        
        // Email format validation
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(email)) {
            e.preventDefault();
            alert('Please enter a valid email address.');
            return false;
        }
    });
    
    // Remember me info tooltip
    document.addEventListener('DOMContentLoaded', function() {
        const rememberMeLabel = document.querySelector('label[for="{{ form.remember_me.id_for_label }}"]');
        if (rememberMeLabel) {
            rememberMeLabel.title = 'Keep me logged in for 30 days';
        }
    });
</script>
<script> 
    // Auto-display messages on page load
    document.addEventListener('DOMContentLoaded', function() {
        const messageElements = document.querySelectorAll('.message-data [data-type]');
        
        messageElements.forEach(function(element, index) {
            const type = element.getAttribute('data-type');
            const title = element.getAttribute('data-title') || getMessageTitle(type);
            const message = element.getAttribute('data-message');
            
            // Delay each message slightly to avoid overlap
            setTimeout(function() {
                showSweetAlert(type, title, message);
            }, index * 500);
        });
    });

    function getMessageTitle(type) {
        const titles = {
            'success': 'Success!',
            'error': 'Error!',
            'danger': 'Error!',
            'warning': 'Warning!',
            'info': 'Information',
            'debug': 'Debug'
        };
        return titles[type] || 'Message';
    }

    function showSweetAlert(type, title, text) {
        const typeMap = {
            'success': 'success',
            'error': 'error',
            'danger': 'error',
            'warning': 'warning',
            'info': 'info',
            'debug': 'info'
        };
        
        const alertType = typeMap[type] || 'info';
        
        Swal.fire({
            icon: alertType,
            title: title,
            text: text,
            position: 'top-end',
            timer: 120000, // 2 minutes
            timerProgressBar: true,
            toast: true,
            showConfirmButton: false,
            showCloseButton: true,
            didOpen: function(toast) {
                toast.addEventListener('mouseenter', Swal.stopTimer);
                toast.addEventListener('mouseleave', Swal.resumeTimer);
            }
        });
    }
</script>
{% endblock extra_js %}