{% extends 'base.html' %}
{% block title %}Create Account — Chiez Stores{% endblock %}

{% block extra_css %}
<style>
    .google-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 12px 20px;
        margin-top: 14px;
        border: 1.5px solid #dadce0;
        border-radius: 6px;
        background: #fff;
        color: #3c4043;
        font-family: var(--font-body);
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .google-btn:hover {
        background: #f8f9fa;
        border-color: #c6c6c6;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .google-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .google-btn svg {
        flex-shrink: 0;
    }
    .auth-wrap {
        min-height: 90vh;
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        background: #f9f7f4;
    }

    @media(min-width:900px) {
        .auth-wrap {
            grid-template-columns: 1fr 1fr;
            min-height: 100vh;
        }
    }

    .auth-visual {
        background: var(--black);
        min-height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 48px 40px;
    }

    @media(min-width:900px) {
        .auth-visual {
            min-height: 100vh;
            position: sticky;
            top: 0;
        }
    }

    .auth-visual-title {
        font-family: var(--font-display);
        font-size: 48px;
        font-weight: 300;
        color: #fff;
        line-height: 1.15;
        margin-bottom: 16px;
    }

    .auth-visual-title em {
        font-style: italic;
        color: var(--gold);
    }

    .auth-perks {
        margin-top: 36px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .perk {
        display: flex;
        align-items: center;
        gap: 12px;
        color: rgba(255, 255, 255, .65);
        font-size: 13px;
    }

    .perk i {
        color: var(--gold);
        width: 20px;
        text-align: center;
    }

    .auth-page {
        min-height: calc(100vh - 140px);
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--cream) 0%, #e8ddd0 100%);
        padding: 40px 20px;
    }

    .auth-card {
        background: var(--white);
        border-radius: 6px;
        box-shadow: var(--shadow-lg);
        padding: 50px;
        width: 100%;
        max-width: 480px;
    }

    .auth-logo {
        font-family: var(--font-display);
        font-size: 2rem;
        letter-spacing: 0.15em;
        text-align: center;
        margin-bottom: 6px;
    }

    .auth-logo span {
        color: var(--gold);
    }

    .auth-subtitle {
        text-align: center;
        font-size: 13px;
        color: var(--warm-gray);
        margin-bottom: 32px;
    }

    .auth-title {
        font-family: var(--font-display);
        font-size: 1.8rem;
        font-weight: 300;
        text-align: center;
        margin-bottom: 28px;
    }

    .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .auth-footer {
        text-align: center;
        margin-top: 20px;
        font-size: 13px;
        color: var(--warm-gray);
    }

    .auth-footer a {
        color: var(--gold);
        font-weight: 500;
    }

    .pwd-strength {
        height: 3px;
        border-radius: 2px;
        margin-top: 6px;
        transition: all 0.3s;
    }

    .form-control.is-invalid {
        border-color: #c0392b;
    }

    .field-error {
        display: flex;
        align-items: center;
        gap: 5px;
        margin-top: 5px;
        font-size: 12px;
        color: #c0392b;
        line-height: 1.4;
    }

    .field-error::before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #c0392b;
        flex-shrink: 0;
    }
</style>
{% endblock %}

{% block content %}
<div class="auth-wrap">
    <div class="auth-visual">
        <div>
            <div class="auth-visual-title">Join<br><em>Chiez</em><br>Stores</div>
            <p style="color:rgba(255,255,255,.5);font-size:13px;max-width:320px;line-height:1.7;">
                Create your free account and unlock the best of Nigerian fashion delivered to your door.
            </p>
            <div class="auth-perks">
                <div class="perk"><i class="fas fa-truck"></i> Free delivery on orders over ₦25,000</div>
                <div class="perk"><i class="fas fa-heart"></i> Save your favourite items to Wishlist</div>
                <div class="perk"><i class="fas fa-box"></i> Track your orders in real time</div>
                <div class="perk"><i class="fas fa-tag"></i> Exclusive member discounts & offers</div>
                <div class="perk"><i class="fas fa-undo"></i> Easy 7-day returns on all orders</div>
            </div>
        </div>
    </div>

    <div class="auth-page">
        <div class="auth-card">
            <div class="auth-logo">Chiez<span>.</span></div>
            <div class="auth-subtitle">Join thousands of fashion lovers</div>
            <div class="auth-title">Create Account</div>

            <form method="POST">
                {% csrf_token %}
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">First Name</label>
                        <input type="text" name="first_name"
                            class="form-control {% if errors.first_name %}is-invalid{% endif %}"
                            placeholder="John" value="{{ form_data.first_name|default:'' }}">
                        {% if errors.first_name %}
                        <span class="field-error">{{ errors.first_name }}</span>
                        {% endif %}
                    </div>
                    <div class="form-group">
                        <label class="form-label">Last Name</label>
                        <input type="text" name="last_name"
                            class="form-control {% if errors.last_name %}is-invalid{% endif %}"
                            placeholder="Doe" value="{{ form_data.last_name|default:'' }}">
                        {% if errors.last_name %}
                        <span class="field-error">{{ errors.last_name }}</span>
                        {% endif %}
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">Username</label>
                    <input type="text" name="username"
                        class="form-control {% if errors.username %}is-invalid{% endif %}"
                        placeholder="@username" value="{{ form_data.username|default:'' }}">
                    {% if errors.username %}
                    <span class="field-error">{{ errors.username }}</span>
                    {% endif %}
                </div>

                <div class="form-group">
                    <label class="form-label">Email Address</label>
                    <input type="email" name="email"
                        class="form-control {% if errors.email %}is-invalid{% endif %}"
                        placeholder="you@example.com" value="{{ form_data.email|default:'' }}">
                    {% if errors.email %}
                    <span class="field-error">{{ errors.email }}</span>
                    {% endif %}
                </div>

                <div class="form-group">
                    <label class="form-label">Password</label>
                    <div style="position:relative">
                        <input type="password" name="password1" id="pw1"
                            class="form-control {% if errors.password1 %}is-invalid{% endif %}"
                            placeholder="Min. 8 characters" onkeyup="checkStrength()"
                            style="padding-right:44px">
                        <button type="button" onclick="togglePwd('pw1','eye1')"
                            style="position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--warm-gray);font-size:14px">
                            <i class="fas fa-eye" id="eye1"></i>
                        </button>
                    </div>
                    <div class="pwd-strength" id="pwStrength" style="background:var(--light-gray)"></div>
                    {% if errors.password1 %}
                    <span class="field-error">{{ errors.password1 }}</span>
                    {% endif %}
                </div>

                <div class="form-group">
                    <label class="form-label">Confirm Password</label>
                    <input type="password" name="password2"
                        class="form-control {% if errors.password2 %}is-invalid{% endif %}"
                        placeholder="Repeat password">
                    {% if errors.password2 %}
                    <span class="field-error">{{ errors.password2 }}</span>
                    {% endif %}
                </div>

                <div style="display:flex;align-items:flex-start;gap:10px;margin-bottom:20px">
                    <input type="checkbox" required style="margin-top:3px;accent-color:var(--gold)">
                    <span style="font-size:12px;color:var(--warm-gray)">
                        I agree to the <a href="#" style="color:var(--gold)">Terms of Service</a>
                        and <a href="#" style="color:var(--gold)">Privacy Policy</a>
                    </span>
                </div>

                <button type="submit" class="btn btn-primary btn-full btn-lg">Create Account</button>
            </form>

            <div style="display:flex;align-items:center;gap:12px;margin:20px 0">
                <div style="flex:1;height:1px;background:var(--light-gray)"></div>
                <span style="font-size:12px;color:var(--warm-gray)">or</span>
                <div style="flex:1;height:1px;background:var(--light-gray)"></div>
            </div>

            <a href="{% url 'users:google_auth' %}" class="google-btn" id="googleSignInBtn">
                <svg width="18" height="18" viewBox="0 0 48 48">
                    <path fill="#EA4335"
                        d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" />
                    <path fill="#4285F4"
                        d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z" />
                    <path fill="#FBBC05"
                        d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" />
                    <path fill="#34A853"
                        d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.18 1.48-4.97 2.31-8.16 2.31-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" />
                </svg>
                <span id="googleBtnText">Continue with Google</span>
            </a>

            <div class="auth-footer">
                Already have an account? <a href="{% url 'users:login' %}">Sign in →</a>
            </div>

        </div>{# end auth-card #}
    </div>{# end auth-page #}
</div>{# end auth-wrap #}

<script src="https://accounts.google.com/gsi/client" async></script>



<script>
    function togglePwd(id, iconId) {
        const input = document.getElementById(id);
        const icon  = document.getElementById(iconId);
        input.type  = input.type === 'password' ? 'text' : 'password';
        icon.className = input.type === 'password' ? 'fas fa-eye' : 'fas fa-eye-slash';
    }

    function checkStrength() {
        const pw  = document.getElementById('pw1').value;
        const bar = document.getElementById('pwStrength');
        let strength = 0;
        if (pw.length >= 8)          strength++;
        if (/[A-Z]/.test(pw))        strength++;
        if (/[0-9]/.test(pw))        strength++;
        if (/[^A-Za-z0-9]/.test(pw)) strength++;
        const colors = ['#e74c3c', '#e67e22', '#f1c40f', '#2ecc71'];
        const widths = ['25%', '50%', '75%', '100%'];
        if (pw.length === 0) {
            bar.style.background = 'var(--light-gray)';
            bar.style.width      = '100%';
            return;
        }
        bar.style.background = colors[strength - 1] || '#e74c3c';
        bar.style.width      = widths[strength - 1] || '10%';
    }
</script>

{% endblock %}