{% load static %}

{% block title %}{% endblock %}
<link rel="stylesheet" href="{% static 'css/style.css' %}">

<!-- Add this inside your login.html or base.html if extended -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">


{% block content %}
<style>
    html, body {
        height: 100%;
        margin: 0;
    }
    body {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f8f9fa;
    }
    .container {
        max-width: 100vw !important;
    }
    .login_logo {
        width: 350px;
        max-width: 100%;
    }
</style>

<div class="container">
    <div class="row min-vh-100 align-items-center justify-content-center g-0">
        <div class="col-lg-10 col-xxl-8 py-3 position-relative">

            {% if messages %}
            <div id="alert-message">
                {% for message in messages %}
                <div class="alert alert-{{ message.tags }}" role="alert">{{ message }}</div>
                {% endfor %}
            </div>
            {% endif %}

            <div class="card overflow-hidden z-1 shadow">
                <div class="card-body p-0">
                    <div class="row g-0 h-100">
                        <!-- Left side: logo -->
                        <div class="col-md-6" style="background-color: #edf2f9;">
                            <div class="d-flex align-items-center justify-content-center h-100">
                                <img class="login_logo" src="{% static 'assets/images/logo.png' %}" alt="Logo">
                            </div>
                        </div>

                        <!-- Right side: form -->
                        <div class="col-md-6 d-flex flex-center">
                            <div class="p-4 p-md-5 flex-grow-1 w-100">
                                <h4 class="mb-4">Login</h4>

                                <form method="post" action="{% url 'login' %}">
                                    {% csrf_token %}

                                    <div class="mb-3">
                                        {{ form.email.label_tag }}
                                        <div class="input-group mb-3">
                                            {{ form.email }}
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        {{ form.password.label_tag }}
                                        <div class="input-group mb-3">
                                            {{ form.password }}
                                            <span class="input-group-text" id="toggle-password">
                                                <span class="far fa-eye"></span>
                                            </span>
                                        </div>
                                    </div>

                                    <div class="row d-flex flex-row-reverse">
                                        <div class="col-auto">
                                            <a class="fs-10" href="{% url 'forgot_password' %}">Forgot Password?</a>
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <button type="submit" class="btn btn-primary d-block w-100 mt-3">Login</button>
                                    </div>
                                </form>

                                {% if otp_sent %}
                                <form method="post" action="{% url 'verify_otp' %}">
                                    {% csrf_token %}
                                    <div class="mb-3">
                                        {{ otp_form.otp.label_tag }}
                                        {{ otp_form.otp }}
                                    </div>
                                    <button type="submit" class="btn btn-primary">Verify</button>
                                </form>
                                {% endif %}
                            </div>
                        </div>

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

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

<script>
    // Hide alert after 4.5s
    setTimeout(() => {
        const alertBox = document.getElementById('alert-message');
        if(alertBox) alertBox.style.display = 'none';
    }, 4500);

    // Toggle password visibility
    document.getElementById('toggle-password')?.addEventListener('click', function() {
        const passwordInput = document.getElementById('id_password');
        const icon = this.querySelector('span');
        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        } else {
            passwordInput.type = 'password';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        }
    });

    function getCookie(name) {
        let cookieValue = null;
        document.cookie.split(';').forEach(cookie => {
        let [key, val] = cookie.trim().split('=');
        if (key === name) cookieValue = decodeURIComponent(val);
        });
        return cookieValue;
    }
    const csrftoken = getCookie('csrftoken');

    $("#forgot-password-form").on('submit', function (e) {
        e.preventDefault();
        fpShowLoader();

        fetch("{% url 'forgot_password' %}", {
        method: "POST",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded",
            "X-CSRFToken": csrftoken,
            "X-Requested-With": "XMLHttpRequest"
        },
        body: $(this).serialize()
        })
        .then(res => res.json())
        .then(data => {
        fpHideLoader();
        if (data.status) {
            window.location.href = '{% url "verify_otp" %}';
        } else {
            Swal.fire('Error!', data.message || 'Something went wrong.', 'error');
        }
        })
        .catch(err => {
        fpHideLoader();
        Swal.fire('Error!', 'An error occurred. Please try again.', 'error');
        });
    });
</script>
{% endblock %}


{% comment %} {% extends "base.html" %} {% endcomment %}
{% comment %} {% load static %}

{% block title %}Login{% endblock %}

{% block content %}
<style>
    html, body {
        height: 100%;
    }
    body {
        display: flex;
        align-items: center;
        padding: 0;
        background-color: #f8f9fa;
    }
    .container {
        max-width: 100vw !important;
    }
    .bg-custom {
        background: transparent;
    }
    .flex-center {
        align-items: center;
        justify-content: center;
    }
    .login_logo {
        width: 400px !important;
    }
    @media(min-width: 1024px) {
        .login_logo { width: 350px !important; }
    }
    @media(max-width: 768px) {
        .login_logo { width: 350px !important; }
    }
    @media(max-width: 400px) {
        .login_logo { width: 200px !important; }
    }
</style>

<div class="container">
    <div class="row min-vh-100 flex-center g-0">
        <div class="col-lg-10 col-xxl-8 py-3 position-relative">

            {% if messages %}
            <div id="alert-message">
                {% for message in messages %}
                <div class="alert alert-{{ message.tags }}" role="alert">{{ message }}</div>
                {% endfor %}
            </div>
            {% endif %}

            <div class="card overflow-hidden z-1">
                <div class="card-body p-0">
                    <div class="row g-0 h-100">
                        <div class="col-md-6" style="background-color: #edf2f9;">
                            <div class="d-flex align-items-center justify-content-center align-self-center h-100">
                                <img class="login_logo" src="{% static 'assets/images/logo.png' %}" alt="Logo">
                            </div>
                            <div class="border-bottom border-200 mb-3"></div>
                        </div>
                        <div class="col-md-6 d-flex flex-center">
                            <div class="p-4 p-md-5 flex-grow-1">
                                <h4 class="display-5">Login</h4>

                                <form method="post" action="{% url 'login' %}">
                                    {% csrf_token %}
                                    <div class="mb-3">
                                        {{ form.username.label_tag }}
                                        {{ form.username }}
                                    </div>

                                    <div class="mb-3">
                                        {{ form.password.label_tag }}
                                        <div class="input-group mb-3">
                                            {{ form.password }}
                                            <span class="input-group-text" id="toggle-password"><span class="far fa-eye"></span></span>
                                        </div>
                                    </div>

                                    <div class="row d-flex flex-row-reverse">
                                        <div class="col-auto">
                                            <a class="fs-10" href="#">Forgot Password?</a>
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <button type="submit" class="btn btn-primary d-block w-100 mt-3">Login</button>
                                    </div>
                                </form>

                                {% comment %} <form method="post" action="{% url 'login' %}">
                                    {% csrf_token %}
                                    {{ form.username.label_tag }}
                                    {{ form.username }}
                                    </div>
                                    <div class="mb-3">
                                        {{ form.password.label_tag }}
                                        <div class="input-group mb-3">
                                            {{ form.password }}
                                            <span class="input-group-text" id="toggle-password"><span class="far fa-eye"></span></span>
                                        </div>
                                    </div>
                                    <div class="row d-flex flex-row-reverse">
                                        <div class="col-auto">
                                            <a class="fs-10" href="#">Forgot Password?</a>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <button type="submit" class="btn btn-primary d-block w-100 mt-3">Login</button>
                                    </div>
                                </form> {% endcomment %}
                            {% comment %} </div> {% endcomment %}

                            <!--<form method="post">
                                {% csrf_token %}
                                <label for="otp">Enter OTP sent to your email</label>
                                <input type="text" name="otp" placeholder="Enter OTP" required>
                                <button type="submit">Verify</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>-->

{% comment %} <script>
    // Hide alert after 4.5s
    setTimeout(() => {
        const alertBox = document.getElementById('alert-message');
        if(alertBox) alertBox.style.display = 'none';
    }, 4500);

    // Toggle password visibility
    document.getElementById('toggle-password').addEventListener('click', function() {
        const passwordInput = document.getElementById('id_password');
        const icon = this.querySelector('span');
        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        } else {
            passwordInput.type = 'password';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        }
    });
</script> {% endcomment %}