{% extends 'shop/base.html' %}
{% block title %}Register - Nana Tradings{% endblock %}

{% block content %}
<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card register-card shadow-lg rounded-4 border-0">
                <!-- ✅ Gradient Header -->
                <div class="card-header text-center bg-gradient register-header">
                    <h3 class="fw-bold register-title">Create Your Account</h3>
                    <p class="small register-subtext">Join us and explore premium dry fruits!</p>
                </div>

                <!-- ✅ Card Body -->
                <div class="card-body p-4">
                    
                    <!-- ✅ Display Django Messages -->
                    {% if messages %}
                        {% for message in messages %}
                            <div class="alert alert-{{ message.tags }}">{{ message }}</div>
                        {% endfor %}
                    {% endif %}

                    <!-- ✅ Registration Form -->
                    <form method="POST" id="registerForm">
                        {% csrf_token %}

                        <!-- Username -->
                        <div class="mb-3">
                            <label for="username" class="form-label fw-bold register-label">Username</label>
                            <div class="input-group">
                                <span class="input-group-text register-icon"><i class="fas fa-user"></i></span>
                                <input type="text" class="form-control register-input" id="username" name="username" placeholder="Enter your username" required>
                            </div>
                            <small class="form-text help-text">Your unique username for logging in.</small>
                        </div>

                        <!-- Email -->
                        <div class="mb-3">
                            <label for="email" class="form-label fw-bold register-label">Email</label>
                            <div class="input-group">
                                <span class="input-group-text register-icon"><i class="fas fa-envelope"></i></span>
                                <input type="email" class="form-control register-input" id="email" name="email" placeholder="Enter your email" required>
                            </div>
                            <small class="form-text help-text">We'll never share your email with anyone.</small>
                        </div>

                        <!-- Password -->
                        <div class="mb-3">
                            <label for="password" class="form-label fw-bold register-label">Password</label>
                            <div class="input-group">
                                <span class="input-group-text register-icon"><i class="fas fa-lock"></i></span>
                                <input type="password" class="form-control register-input" id="password" name="password" placeholder="Create a password" required>
                                <span class="input-group-text password-toggle" onclick="togglePassword('password', 'toggleEye1')">
                                    <i class="fas fa-eye text-gray" id="toggleEye1"></i>
                                </span>
                            </div>
                            <small class="form-text help-text">Must be 8+ characters, include a number & a symbol.</small>
                        </div>

                        <!-- Confirm Password -->
                        <div class="mb-3">
                            <label for="confirm_password" class="form-label fw-bold register-label">Confirm Password</label>
                            <div class="input-group">
                                <span class="input-group-text register-icon"><i class="fas fa-check-circle"></i></span>
                                <input type="password" class="form-control register-input" id="confirm_password" name="confirm_password" placeholder="Confirm your password" required>
                                <span class="input-group-text password-toggle" onclick="togglePassword('confirm_password', 'toggleEye2')">
                                    <i class="fas fa-eye text-gray" id="toggleEye2"></i>
                                </span>
                            </div>
                        </div>

                        <!-- Register Button -->
                        <button type="submit" class="btn register-btn w-100 fw-bold">
                            <i class="fas fa-user-plus me-2"></i> Register
                        </button>
                    </form>
                </div>

                <!-- ✅ Footer Links -->
                <div class="card-footer text-center register-footer rounded-bottom">
                    <p class="mb-1">Already have an account? 
                        <a href="{% url 'login' %}" class="register-link fw-bold"><i class="fas fa-sign-in-alt"></i> Login</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ✅ SweetAlert for Password Validation -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<!-- ✅ JavaScript for Show/Hide Password -->
<script>
    function togglePassword(fieldId, eyeId) {
        let passwordField = document.getElementById(fieldId);
        let toggleEye = document.getElementById(eyeId);

        if (passwordField.type === "password") {
            passwordField.type = "text";
            toggleEye.classList.remove("fa-eye", "text-gray");
            toggleEye.classList.add("fa-eye-slash", "text-orange");
        } else {
            passwordField.type = "password";
            toggleEye.classList.remove("fa-eye-slash", "text-orange");
            toggleEye.classList.add("fa-eye", "text-gray");
        }
    }

    // ✅ Password Match Validation Before Submission
    document.getElementById("registerForm").addEventListener("submit", function(e) {
        let password = document.getElementById("password").value;
        let confirmPassword = document.getElementById("confirm_password").value;

        if (password !== confirmPassword) {
            e.preventDefault();
            Swal.fire({
                icon: "error",
                title: "Password Mismatch!",
                text: "Both passwords must be the same.",
                confirmButtonColor: "#148818"
            });
        }
    });
</script>

<style>
/* 🌟 General Register Page Styles */
.register-card {
    border-radius: 12px;
    transition: all 0.3s ease-in-out;
}

.register-card:hover {
    transform: scale(1.02);
}

/* ✅ Light Mode Header */
.register-header {
    background: linear-gradient(135deg, #148818, #0f6f12);
}

/* ✅ Light Mode Header Text */
.register-title {
    color: #148818 !important;
}

.register-subtext {
    color: #148818 !important;
}

/* ✅ Dark Mode Adjustments */
.dark-mode .register-card {
    background: #2b2b2b;
    color: white;
}

.dark-mode .register-header {
    background: linear-gradient(135deg, #00c853, #008000);
}

/* ✅ Dark Mode Header Text */
.dark-mode .register-title {
    color: white !important;
}

.dark-mode .register-subtext {
    color: #f0f0f0 !important;
}

/* 🎨 Input Styling */
.input-group-text {
    background-color: #148818;
    color: white;
    border: none;
}

.register-input:focus {
    border-color: #148818;
    box-shadow: 0 0 5px rgba(20, 136, 24, 0.5);
}

.dark-mode .register-input {
    background: #333;
    color: white;
    border-color: #00c853;
}

.dark-mode .input-group-text {
    background: #00c853;
    color: black;
}

/* ✅ Help Text for Inputs */
.help-text {
    font-size: 13px;
    color: #148818;
}

.dark-mode .help-text {
    color: #00e676;
}

/* ✅ Register Button */
.register-btn {
    background-color: #148818;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
}

.register-btn:hover {
    background-color: #0f6f12;
}

/* ✅ Footer */
.register-footer {
    background-color: #f8f9fa;
}

.dark-mode .register-footer {
    background: #222;
}

/* ✅ Footer Links */
.register-link {
    color: #148818;
    transition: all 0.3s ease-in-out;
}

.register-link:hover {
    text-decoration: underline;
}

.dark-mode .register-link {
    color: #00e676;
}

</style>
<!-- FontAwesome Icons -->
{% endblock %}