{% extends 'base.html' %}
{% load static %}

{% block title %}PDV{% endblock %}

{% block full_content %}
<link rel="stylesheet" href="{% static 'css/login.css' %}?v=3">

<div class="login-screen">
    <div class="login-shell">
        <!-- Painel esquerdo: apresentação do sistema -->
        <div class="login-brand d-none d-lg-flex">
            <h2 class="brand-title">PDV</h2>
            <p class="brand-sub">Sistema de Gest&acirc;o Comercial</p>
            <div class="brand-divider"></div>
            <div class="brand-taglines">
                <p>Mais agilidade nas vendas.</p>
                <p>Mais controle no seu neg&oacute;cio.</p>
            </div>

            <div class="brand-art" aria-hidden="true">
                <img src="{% static 'login/ilustracao-caixa.svg' %}" alt="" loading="lazy">
            </div>

            <div class="brand-features">
                <div class="feature-item">
                    <span class="feature-icon"><i class="bi bi-cart3"></i></span>
                    <span>Vendas mais r&aacute;pidas</span>
                </div>
                <div class="feature-item">
                    <span class="feature-icon"><i class="bi bi-bar-chart"></i></span>
                    <span>Gest&atilde;o simplificada</span>
                </div>
                <div class="feature-item">
                    <span class="feature-icon"><i class="bi bi-gear"></i></span>
                    <span>Seu neg&oacute;cio sempre no controle</span>
                </div>
            </div>

            <div class="brand-security">
                <span class="security-pill"><i class="bi bi-shield-lock-fill"></i> Acesso seguro e confi&aacute;vel</span>
            </div>
        </div>

        <!-- Painel direito: formulário de login -->
        <div class="login-form-wrap">
            <div class="brand-mobile">
                <h2>PDV</h2>
                <p>Sistema de Gest&acirc;o Comercial</p>
            </div>

            <div class="form-title">
                <h1>Entrar no sistema</h1>
                <p>Use suas credenciais para continuar.</p>
            </div>

            {% if messages %}
                {% for message in messages %}
                    {% if message.tags == 'error' %}
                        <div class="alert alert-danger alert-dismissible fade show login-alert" role="alert">
                    {% else %}
                        <div class="alert alert-success alert-dismissible fade show login-alert" role="alert">
                    {% endif %}
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                {% endfor %}
            {% endif %}

            <form method="post">
                {% csrf_token %}

                <div class="mb-3">
                    <label for="username" class="form-label login-label">Usu&aacute;rio</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="bi bi-person"></i></span>
                        <input type="text" class="form-control login-input" id="username" name="username"
                               placeholder="Digite seu usu&aacute;rio" required autofocus autocomplete="username">
                    </div>
                </div>

                <div class="mb-4">
                    <label for="password" class="form-label login-label">Senha</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="bi bi-lock"></i></span>
                        <input type="password" class="form-control login-input" id="password" name="password"
                               placeholder="Digite sua senha" required autocomplete="current-password">
                        <button type="button" class="btn toggle-senha" id="btn-toggle-senha"
                                aria-label="Mostrar senha" title="Mostrar / ocultar senha">
                            <i class="bi bi-eye" id="icone-senha"></i>
                        </button>
                    </div>
                </div>

                <button type="submit" class="btn btn-login">
                    <i class="bi bi-box-arrow-in-right me-2"></i> Entrar
                </button>
            </form>

            <div class="login-rodape">
                <i class="bi bi-shield-check me-1"></i> PDV &middot; Sistema de Gest&atilde;o Comercial
            </div>

            <div class="suporte-box">
                <a href="https://wa.me/5534999382133?text=Ol%C3%A1%2C%20preciso%20de%20suporte%20do%20PDV!"
                   target="_blank" class="suporte-whats">
                    <span class="suporte-icone"><i class="bi bi-whatsapp"></i></span>
                    <span class="suporte-textos">
                        <span class="suporte-numero">34 99938-2133</span>
                        <span class="suporte-nome">Jhonatan Palmer &middot; Suporte</span>
                    </span>
                </a>
                <div class="suporte-divisor"></div>
                <div class="suporte-credito">
                    <i class="bi bi-code-square me-1"></i>
                    Desenvolvido por
                    <a href="https://palmersistemas.com.br/" target="_blank" class="link-palmer">Palmer Sistemas</a>
                </div>
                <div class="suporte-cidade"><i class="bi bi-geo-alt me-1"></i>Iturama - MG</div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var inputSenha = document.getElementById('password');
    var btnToggle = document.getElementById('btn-toggle-senha');
    var icone = document.getElementById('icone-senha');

    if (btnToggle && inputSenha) {
        btnToggle.addEventListener('click', function () {
            var mostrar = inputSenha.type === 'password';
            inputSenha.type = mostrar ? 'text' : 'password';
            icone.className = mostrar ? 'bi bi-eye-slash' : 'bi bi-eye';
            inputSenha.focus();
        });
    }
});
</script>
{% endblock %}