{% extends "base_public.html" %}

{% block title %}Registracija{% endblock %}
{% load static %}
{% block extra_css %}
<style>
    .auth-container {
        max-width: 600px;
    }

    .auth-card {
        border-radius: 1rem;
        overflow: hidden;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
        border: none;
    }

    .auth-header {
        background: linear-gradient(135deg, #2c6bed 0%, #1a56db 100%);
        padding: 3rem 2rem;
        text-align: center;
        color: white;
    }

    .auth-logo {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }

    .auth-body {
        padding: 2.5rem;
        background-color: white;
    }

    .form-floating .form-control {
        border-left: 0;
        padding-left: 0;
        border-radius: 0 0.5rem 0.5rem 0;
    }

    .form-floating .input-group-text {
        background: white;
        border-right: 0;
        border-radius: 0.5rem 0 0 0.5rem;
    }

    .password-toggle {
        cursor: pointer;
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
    }

    .auth-footer {
        text-align: center;
        margin-top: 1.5rem;
    }

    .floating-label-group {
        position: relative;
        margin-bottom: 1.5rem;
    }

    .floating-label {
        position: absolute;
        top: 0.5rem;
        left: 3rem;
        color: #94a3b8;
        transition: all 0.2s ease;
        pointer-events: none;
    }

    .form-control:focus~.floating-label,
    .form-control:not(:placeholder-shown)~.floating-label {
        top: -0.5rem;
        left: 0.8rem;
        background: white;
        padding: 0 0.2rem;
        font-size: 0.75rem;
        color: #2c6bed;
    }

    .input-with-icon {
        padding-left: 3rem !important;
    }

    .input-icon {
        position: absolute;
        top: 50%;
        left: 1rem;
        transform: translateY(-50%);
        color: #94a3b8;
        z-index: 10;
    }

    .password-strength {
        height: 4px;
        background: #e2e8f0;
        border-radius: 2px;
        margin-top: 0.5rem;
        overflow: hidden;
    }

    .password-strength-bar {
        height: 100%;
        width: 0%;
        background: #dc3545;
        transition: width 0.3s ease;
    }

    .password-strength-weak .password-strength-bar {
        width: 30%;
        background: #dc3545;
    }

    .password-strength-medium .password-strength-bar {
        width: 60%;
        background: #ffc107;
    }

    .password-strength-strong .password-strength-bar {
        width: 100%;
        background: #198754;
    }

    .password-requirements {
        margin-top: 0.5rem;
        font-size: 0.8rem;
        color: #64748b;
    }

    .requirement {
        display: flex;
        align-items: center;
        margin-bottom: 0.25rem;
    }

    .requirement i {
        margin-right: 0.5rem;
        font-size: 0.7rem;
    }

    .requirement.valid {
        color: #198754;
    }

    .requirement.valid i {
        color: #198754;
    }
</style>
{% endblock %}
{% block content %}
<section class="py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-10 col-lg-8">
                <div class="auth-card">
                    <div class="auth-header">
                        <div class="auth-logo">
                            <i class="bi bi-graph-up"></i>
                        </div>
                        <h2 class="mb-3">Sukurti paskyrą</h2>
                        <p class="mb-0">Prisijunkite prie tūkstančių finansų profesionalų</p>
                    </div>

                    <div class="auth-body">
                        <form method="post" action="{% url 'register' %}">
                            {% csrf_token %}

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-4">
                                        <div class="position-relative">
                                            <div class="input-icon">
                                                <i class="bi bi-person"></i>
                                            </div>
                                            <input type="text" class="form-control input-with-icon" id="id_first_name"
                                                name="first_name" placeholder=" " required>
                                            <label for="id_first_name" class="floating-label">Vardas</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-4">
                                        <div class="position-relative">
                                            <div class="input-icon">
                                                <i class="bi bi-person"></i>
                                            </div>
                                            <input type="text" class="form-control input-with-icon" id="id_last_name"
                                                name="last_name" placeholder=" " required>
                                            <label for="id_last_name" class="floating-label">Pavardė</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-4">
                                <div class="position-relative">
                                    <div class="input-icon">
                                        <i class="bi bi-envelope"></i>
                                    </div>
                                    <input type="email" class="form-control input-with-icon" id="id_email" name="email"
                                        placeholder=" " required>
                                    <label for="id_email" class="floating-label">El. pašto adresas</label>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-4">
                                        <div class="position-relative">
                                            <div class="input-icon">
                                                <i class="bi bi-building"></i>
                                            </div>
                                            <input type="text" class="form-control input-with-icon" id="id_company"
                                                name="company" placeholder=" ">
                                            <label for="id_company" class="floating-label">Įmonė (nebūtina)</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-4">
                                        <div class="position-relative">
                                            <div class="input-icon">
                                                <i class="bi bi-briefcase"></i>
                                            </div>
                                            <input type="text" class="form-control input-with-icon" id="id_position"
                                                name="position" placeholder=" ">
                                            <label for="id_position" class="floating-label">Pareigos (nebūtina)</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-4">
                                        <div class="position-relative">
                                            <div class="input-icon">
                                                <i class="bi bi-lock"></i>
                                            </div>
                                            <input type="password" class="form-control input-with-icon"
                                                id="id_password1" name="password1" placeholder=" " required>
                                            <label for="id_password1" class="floating-label">Slaptažodis</label>
                                            <span class="password-toggle" id="passwordToggle1">
                                                <i class="bi bi-eye"></i>
                                            </span>
                                        </div>
                                        <div class="password-strength" id="passwordStrength">
                                            <div class="password-strength-bar"></div>
                                        </div>
                                        <div class="password-requirements">
                                            <div class="requirement" id="lengthReq">
                                                <i class="bi bi-circle"></i> Bent 8 simboliai
                                            </div>
                                            <div class="requirement" id="numberReq">
                                                <i class="bi bi-circle"></i> Turi skaičių
                                            </div>
                                            <div class="requirement" id="specialReq">
                                                <i class="bi bi-circle"></i> Turi specialų simbolį
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-4">
                                        <div class="position-relative">
                                            <div class="input-icon">
                                                <i class="bi bi-lock"></i>
                                            </div>
                                            <input type="password" class="form-control input-with-icon"
                                                id="id_password2" name="password2" placeholder=" " required>
                                            <label for="id_password2" class="floating-label">Patvirtinkite slaptažodį</label>
                                            <span class="password-toggle" id="passwordToggle2">
                                                <i class="bi bi-eye"></i>
                                            </span>
                                        </div>
                                        <div id="passwordMatch" class="mt-2 small"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="terms" required>
                                    <label class="form-check-label" for="terms">
                                        Sutinku su <a href="#" class="text-decoration-none">Naudojimo sąlygomis</a>
                                        ir <a href="#" class="text-decoration-none">Privatumo politika</a>
                                    </label>
                                </div>
                                
                            </div>

                            <div class="d-grid mb-4">
                                <button class="btn btn-primary btn-lg" type="submit">Sukurti paskyrą</button>
                            </div>

                            <div class="auth-footer">
                                <p class="text-muted">Jau turite paskyrą? <a href="{% url 'login' %}"
                                        class="text-decoration-none fw-medium">Prisijungti</a></p>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Slaptažodžio matomumo perjungimas
        function setupPasswordToggle(inputId, toggleId) {
            const passwordInput = document.getElementById(inputId);
            const passwordToggle = document.getElementById(toggleId);
            const eyeIcon = passwordToggle.querySelector('i');

            passwordToggle.addEventListener('click', function () {
                const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                passwordInput.setAttribute('type', type);

                if (type === 'password') {
                    eyeIcon.classList.remove('bi-eye-slash');
                    eyeIcon.classList.add('bi-eye');
                } else {
                    eyeIcon.classList.remove('bi-eye');
                    eyeIcon.classList.add('bi-eye-slash');
                }
            });
        }

        setupPasswordToggle('id_password1', 'passwordToggle1');
        setupPasswordToggle('id_password2', 'passwordToggle2');

        // Slaptažodžio stiprumo tikrinimas
        const passwordInput = document.getElementById('id_password1');
        const passwordStrength = document.getElementById('passwordStrength');
        const passwordBar = passwordStrength.querySelector('.password-strength-bar');

        const lengthReq = document.getElementById('lengthReq');
        const numberReq = document.getElementById('numberReq');
        const specialReq = document.getElementById('specialReq');

        passwordInput.addEventListener('input', function () {
            const password = this.value;
            let strength = 0;

            // Atstatymas
            passwordStrength.className = 'password-strength';
            lengthReq.className = 'requirement';
            numberReq.className = 'requirement';
            specialReq.className = 'requirement';

            // Ilgis
            if (password.length >= 8) {
                strength += 1;
                lengthReq.classList.add('valid');
                lengthReq.innerHTML = '<i class="bi bi-check-circle"></i> Bent 8 simboliai';
            }

            // Skaičiai
            if (/\d/.test(password)) {
                strength += 1;
                numberReq.classList.add('valid');
                numberReq.innerHTML = '<i class="bi bi-check-circle"></i> Turi skaičių';
            }

            // Specialūs simboliai
            if (/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
                strength += 1;
                specialReq.classList.add('valid');
                specialReq.innerHTML = '<i class="bi bi-check-circle"></i> Turi specialų simbolį';
            }

            // Indikatoriaus atnaujinimas
            if (strength === 0) {
                passwordBar.style.width = '0%';
                passwordBar.style.backgroundColor = '#dc3545';
            } else if (strength === 1) {
                passwordStrength.classList.add('password-strength-weak');
            } else if (strength === 2) {
                passwordStrength.classList.add('password-strength-medium');
            } else if (strength === 3) {
                passwordStrength.classList.add('password-strength-strong');
            }
        });

        // Slaptažodžių sutapimo tikrinimas
        const passwordConfirm = document.getElementById('id_password2');
        const passwordMatch = document.getElementById('passwordMatch');

        function checkPasswordMatch() {
            if (passwordInput.value && passwordConfirm.value) {
                if (passwordInput.value === passwordConfirm.value) {
                    passwordMatch.innerHTML = '<i class="bi bi-check-circle text-success me-1"></i> Slaptažodžiai sutampa';
                    passwordMatch.style.color = '#198754';
                } else {
                    passwordMatch.innerHTML = '<i class="bi bi-exclamation-circle text-danger me-1"></i> Slaptažodžiai nesutampa';
                    passwordMatch.style.color = '#dc3545';
                }
            } else {
                passwordMatch.innerHTML = '';
            }
        }

        passwordInput.addEventListener('input', checkPasswordMatch);
        passwordConfirm.addEventListener('input', checkPasswordMatch);

        // Slankieji etikečių efektai
        const inputs = document.querySelectorAll('.form-control');
        inputs.forEach(input => {
            input.addEventListener('focus', function () {
                this.parentNode.querySelector('.floating-label').classList.add('active');
            });

            input.addEventListener('blur', function () {
                if (!this.value) {
                    this.parentNode.querySelector('.floating-label').classList.remove('active');
                }
            });

            // Inicializacija
            if (input.value) {
                input.parentNode.querySelector('.floating-label').classList.add('active');
            }
        });
    });
</script>
{% endblock %}