{% extends "base.html" %}
{% block title %}Sign Up - BanshiX{% endblock %}

{% load django_bootstrap5 static socialaccount %}

{% block extra_css %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
{% endblock %}

{% block extra_js %}
{% providers_media_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Password toggle functionality
    const togglePassword1 = document.getElementById('togglePassword1');
    const togglePassword2 = document.getElementById('togglePassword2');
    const password1 = document.getElementById('{{ form.password1.id_for_label }}');
    const password2 = document.getElementById('{{ form.password2.id_for_label }}');
    const icon1 = document.getElementById('password1Icon');
    const icon2 = document.getElementById('password2Icon');

    if (togglePassword1 && password1) {
        togglePassword1.addEventListener('click', function() {
            const type = password1.getAttribute('type') === 'password' ? 'text' : 'password';
            password1.setAttribute('type', type);
            icon1.className = type === 'password' ? 'bi bi-eye' : 'bi bi-eye-slash';
        });
    }

    if (togglePassword2 && password2) {
        togglePassword2.addEventListener('click', function() {
            const type = password2.getAttribute('type') === 'password' ? 'text' : 'password';
            password2.setAttribute('type', type);
            icon2.className = type === 'password' ? 'bi bi-eye' : 'bi bi-eye-slash';
        });
    }
});
</script>
{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-12 col-md-8 col-lg-6 col-xl-5">
            
            <div class="card shadow-lg border-0 rounded-4 overflow-hidden">
                <div class="card-body p-5">
                    
                    <div class="text-center mb-5">
                        <img src="{% static 'image/WhatsApp Image 2026-04-13 at 16.22.23.jpeg' %}" 
                             alt="BanshiX" class="img-fluid mb-3" style="max-height: 70px;">
                        <h3 class="fw-bold text-primary">Create Your Account</h3>
                        <p class="text-muted">Join BanshiX and start shopping smarter</p>
                    </div>

                    <!-- Social Login -->
                    <div class="mb-4">
                        {% include "socialaccount/snippets/provider_list.html" with process="signup" %}
                    </div>

                    <div class="d-flex align-items-center my-4">
                        <hr class="flex-grow-1">
                        <span class="px-3 text-muted small fw-medium">OR</span>
                        <hr class="flex-grow-1">
                    </div>

                    <!-- Email Signup Form -->
                    <form method="post" novalidate>
                        {% csrf_token %}
                        
                        <!-- Username Field -->
                        <div class="mb-3">
                            <label for="{{ form.username.id_for_label }}" class="form-label fw-semibold">
                                <i class="bi bi-person-fill me-2 text-primary"></i>Username
                            </label>
                            {{ form.username }}
                            {% if form.username.errors %}
                                <div class="text-danger small mt-1">
                                    {{ form.username.errors.0 }}
                                </div>
                            {% endif %}
                        </div>

                        <!-- Email Field -->
                        <div class="mb-3">
                            <label for="{{ form.email.id_for_label }}" class="form-label fw-semibold">
                                <i class="bi bi-envelope-fill me-2 text-primary"></i>Email Address
                            </label>
                            {{ form.email }}
                            {% if form.email.errors %}
                                <div class="text-danger small mt-1">
                                    {{ form.email.errors.0 }}
                                </div>
                            {% endif %}
                        </div>

                        <!-- First Name Field -->
                        <div class="mb-3">
                            <label for="{{ form.first_name.id_for_label }}" class="form-label fw-semibold">
                                <i class="bi bi-person-badge-fill me-2 text-primary"></i>First Name
                            </label>
                            {{ form.first_name }}
                            {% if form.first_name.errors %}
                                <div class="text-danger small mt-1">
                                    {{ form.first_name.errors.0 }}
                                </div>
                            {% endif %}
                        </div>

                        <!-- Last Name Field -->
                        <div class="mb-3">
                            <label for="{{ form.last_name.id_for_label }}" class="form-label fw-semibold">
                                <i class="bi bi-person-badge me-2 text-primary"></i>Last Name
                            </label>
                            {{ form.last_name }}
                            {% if form.last_name.errors %}
                                <div class="text-danger small mt-1">
                                    {{ form.last_name.errors.0 }}
                                </div>
                            {% endif %}
                        </div>

                        <!-- Password Field -->
                        <div class="mb-3">
                            <label for="{{ form.password1.id_for_label }}" class="form-label fw-semibold">
                                <i class="bi bi-lock-fill me-2 text-primary"></i>Password
                            </label>
                            <div class="input-group">
                                {{ form.password1 }}
                                <button class="btn btn-outline-secondary" type="button" id="togglePassword1">
                                    <i class="bi bi-eye" id="password1Icon"></i>
                                </button>
                            </div>
                            {% if form.password1.errors %}
                                <div class="text-danger small mt-1">
                                    {{ form.password1.errors.0 }}
                                </div>
                            {% endif %}
                            <div class="form-text">
                                Password must be at least 8 characters long.
                            </div>
                        </div>

                        <!-- Confirm Password Field -->
                        <div class="mb-4">
                            <label for="{{ form.password2.id_for_label }}" class="form-label fw-semibold">
                                <i class="bi bi-lock-fill me-2 text-primary"></i>Confirm Password
                            </label>
                            <div class="input-group">
                                {{ form.password2 }}
                                <button class="btn btn-outline-secondary" type="button" id="togglePassword2">
                                    <i class="bi bi-eye" id="password2Icon"></i>
                                </button>
                            </div>
                            {% if form.password2.errors %}
                                <div class="text-danger small mt-1">
                                    {{ form.password2.errors.0 }}
                                </div>
                            {% endif %}
                        </div>

                        <!-- Submit Button -->
                        <div class="d-grid mt-4">
                            <button type="submit"
                                    class="btn btn-primary btn-lg rounded-pill fw-semibold shadow-sm py-3">
                                <i class="bi bi-person-plus-fill me-2"></i>
                                Create Account
                            </button>
                        </div>
                    </form>

                    <div class="text-center mt-4">
                        <p class="mb-0 text-muted">
                            Already have an account? 
                            <a href="{% url 'account_login' %}" class="fw-semibold text-decoration-none">Sign in</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}