{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Register - {{ login_brand_name }}{% endblock %}
{% block body_class %}register-shop-page{% endblock %}
{% block head_extra %}
<link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/static/hil-pages/register.css">
{% endblock %}
{% block content %}
<!-- Animated background -->
<div class="bg-mesh"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>

<!-- Main container -->
<div class="register-shell">

    <!-- Header -->
    <div class="register-header">
<h1 class="brand">Create An Enterprise</h1>
        <p class="subtitle">Join thousands of businesses using our platform. Set up your shop in minutes.</p>
    </div>

    {% if error %}
        <div class="error">{{ error }}</div>
    {% endif %}

    <form method="POST" action="/register" id="register-form">

        <!-- Section 1: Shop Identity -->
        <div class="form-section">
            <h2 class="section-title">
                <span class="icon">🏪</span>
                Shop Identity
            </h2>
            <div class="form-row">
                <div class="form-group">
                    <label for="shop_name">Shop Name</label>
                    <input id="shop_name" name="shop_name" placeholder="e.g. G_velo Shop" required>
                </div>
                <div class="form-group">
<label for="shop_brand">Brand Name</label>
                    <input id="shop_brand" name="shop_brand" placeholder="e.g. Gvelo Brand" required>
                </div>
            </div>
            <div class="form-group">
                <label for="shop_code">Shop Code</label>
                <input id="shop_code" name="shop_code" placeholder="Unique identifier (e.g., shop123)" required>
            </div>
            <div class="form-group">
                <label for="business_type">Business Type</label>
                <input id="business_type" name="business_type" placeholder="e.g. Retail, Wholesale, Beauty & Cosmetics, Restaurant" required>
            </div>
        </div>

        <!-- Section 2: Location & Contact -->
        <div class="form-section">
            <h2 class="section-title">
                <span class="icon">📍</span>
                Location & Contact
            </h2>
            <div class="form-group">
                <label for="address">Shop Address / Location</label>
                <input id="address" name="address" placeholder="Physical address or location" required>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="country">Country</label>
                    <select id="country" name="country" required>
                        <option value="" disabled selected>Select your country</option>
                        {% for country in countries %}
                            <option value="{{ country }}">{{ country }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label for="language">{{ _('Language') }}</label>
                    <select id="language" name="language" required>
                        <option value="" disabled selected>{{ _('App Language') }}</option>
                        {% for lang in languages %}
                            <option value="{{ lang }}">{{ _(lang.title()) }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label for="currency">Currency</label>
                    <select id="currency" name="currency" required>
                        {% for code in currency_codes %}
                            <option value="{{ code }}" {% if code == 'USD' %}selected{% endif %}>{{ code }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label for="phone">Business Phone</label>
                    <input id="phone" name="phone" type="tel" placeholder="+ country code and phone number" required>
                </div>
            </div>
            <div class="form-group">
                <label for="email">Business Email</label>
                <input id="email" name="email" type="email" placeholder="shop@example.com" required>
            </div>
            {% if registration_verification_enabled %}
            <div class="form-group">
                <label>Verification Method</label>
                <div class="verify-options">
                    <label class="verify-option">
                        <input type="radio" name="verification_method" value="email" checked>
                        <span>Email</span>
                    </label>
                    <label class="verify-option">
                        <input type="radio" name="verification_method" value="sms">
                        <span>SMS</span>
                    </label>
                </div>
            </div>
            {% endif %}
            <div class="form-group">
                <label for="owner_name">Owner / Manager Full Name</label>
                <input id="owner_name" name="owner_name" placeholder="Full name of owner or manager" required>
            </div>
        </div>

        <!-- Section 3: Admin Account -->
        <div class="form-section">
            <h2 class="section-title">
                <span class="icon">👤</span>
                Admin Account
            </h2>
            <div class="form-row">
                <div class="form-group">
                    <label for="username">Admin Username</label>
                    <input id="username" name="username" placeholder="Choose a username" required>
                </div>
                <div class="form-group">
                    <label for="password">Admin Password</label>
                    <input id="password" name="password" type="password" placeholder="Minimum 8 characters" required minlength="8">

                </div>
            </div>
            <div class="form-group">
                <label for="confirm-password">Confirm Password</label>
                <input id="confirm-password" name="confirm_password" type="password" placeholder="Re-enter password" required>
            </div>
        </div>

        <!-- Section 4: Terms & Submit -->
        <div class="form-section">
            <div class="checkbox-group">
                <input type="checkbox" id="accept_terms" name="accept_terms" required>
                <label for="accept_terms">I have read and agree to the <a href="/terms" target="_blank">Terms and Conditions</a> and <a href="/privacy" target="_blank">Privacy Policy</a></label>
            </div>
            <div class="submit-section">
<button type="submit" class="submit-btn"><span>Create Enterprise</span></button>
            </div>
        </div>

    </form>

    <!-- Login link -->
    <div class="login-link">
        Already have an account? <a href="/login">Sign in here</a>
    </div>

</div>

<script type="application/json" id="dial-codes-data">
{{ dial_codes | tojson }}
</script>
<script type="application/json" id="country-currency-data">
{{ country_currency_map | tojson }}
</script>
<script>
const dialCodes = JSON.parse(document.getElementById('dial-codes-data').textContent);
const countryCurrencies = JSON.parse(document.getElementById('country-currency-data').textContent);
const countrySelect = document.getElementById('country');
const phoneInput = document.getElementById('phone');
const currencySelect = document.getElementById('currency');

countrySelect.addEventListener('change', function() {
    const country = this.value;
    const dialCode = dialCodes[country];
    const currencyCode = countryCurrencies[country];
    if (dialCode) {
        const currentValue = phoneInput.value.trim();
        if (!currentValue || !currentValue.startsWith('+')) {
            phoneInput.value = dialCode + ' ';
        }
    }
    if (currencyCode && currencySelect.querySelector('option[value="' + currencyCode + '"]')) {
        currencySelect.value = currencyCode;
    }
    phoneInput.focus();
});
</script>
{% endblock %}