{% extends "layouts/base.html" %}
{% block title %}Register - TryoutPro{% endblock %}
{% block auth_content %}
<form method="POST" action="{{ url_for('auth.register') }}" class="auth-form" id="register-form">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
    <div class="form-group">
        <label for="full_name"><i class="fas fa-id-card"></i> Full Name</label>
        <input type="text" id="full_name" name="full_name" placeholder="Enter your full name" required>
    </div>
    <div class="form-group">
        <label for="username"><i class="fas fa-user"></i> Username</label>
        <input type="text" id="username" name="username" placeholder="Choose a username" required>
    </div>
    <div class="form-group">
        <label for="email"><i class="fas fa-envelope"></i> Email</label>
        <input type="email" id="email" name="email" placeholder="Enter your email" required>
    </div>
    <div class="form-group">
        <label for="phone"><i class="fas fa-phone"></i> Phone (Optional)</label>
        <input type="tel" id="phone" name="phone" placeholder="Enter your phone number">
    </div>

    <hr class="section-divider">
    <h4 class="section-title"><i class="fas fa-gamepad"></i> E-Sports Profile</h4>
    <p class="text-muted small">Select the games you play and provide your gamertag for each.</p>

    <div class="form-group" id="games-container">
        <label><i class="fas fa-headset"></i> Games You Play</label>
        {% for game in esport_games %}
        <div class="game-entry">
            <label class="checkbox-label">
                <input type="checkbox" name="games" value="{{ game }}" class="game-checkbox" data-game="{{ game }}">
                <span>{{ game }}</span>
            </label>
            <div class="gamertag-input" id="gamertag-group-{{ game | replace(' ', '_') }}" style="display:none; margin-top: 4px; margin-left: 20px;">
                <input type="text" name="gamertag_{{ game }}" id="gamertag_{{ game | replace(' ', '_') }}"
                       placeholder="Enter your {{ game }} gamertag" class="gamertag-field"
                       data-game="{{ game }}">
            </div>
        </div>
        {% endfor %}
        <small class="form-text text-muted">Check each game you play, then enter your gamertag for that game.</small>
    </div>

    <div class="form-group">
        <label for="discord_username"><i class="fab fa-discord"></i> Discord Username</label>
        <input type="text" id="discord_username" name="discord_username" placeholder="e.g. YourName#1234">
    </div>

    <hr class="section-divider">
    <div class="form-group">
        <label for="password"><i class="fas fa-lock"></i> Password</label>
        <input type="password" id="password" name="password" placeholder="Create a password" required minlength="6">
    </div>
    <div class="form-group">
        <label for="confirm_password"><i class="fas fa-check-circle"></i> Confirm Password</label>
        <input type="password" id="confirm_password" name="confirm_password" placeholder="Confirm your password" required>
    </div>

    <div class="form-group">
        <label for="captcha_answer">
            <i class="fas fa-shield-alt"></i> Security Check: {{ captcha.question }}
        </label>
        <input type="text" id="captcha_answer" name="captcha_answer" placeholder="Enter the answer" required>
    </div>

    <button type="submit" class="btn btn-primary btn-block">Create Account</button>
    <p class="auth-link">Already have an account? <a href="{{ url_for('auth.login') }}">Sign in</a></p>
</form>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const checkboxes = document.querySelectorAll('.game-checkbox');
    const form = document.getElementById('register-form');

    checkboxes.forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
            const game = this.dataset.game.replace(/ /g, '_');
            const gamertagGroup = document.getElementById('gamertag-group-' + game);
            const gamertagField = document.getElementById('gamertag_' + game);

            if (this.checked) {
                gamertagGroup.style.display = 'block';
                gamertagField.setAttribute('required', 'required');
            } else {
                gamertagGroup.style.display = 'none';
                gamertagField.removeAttribute('required');
                gamertagField.value = '';
            }
        });

        // Initialize on page load (in case of form re-render after validation error)
        const game = checkbox.dataset.game.replace(/ /g, '_');
        const gamertagGroup = document.getElementById('gamertag-group-' + game);
        if (checkbox.checked) {
            gamertagGroup.style.display = 'block';
        }
    });

    form.addEventListener('submit', function(e) {
        const checkedGames = document.querySelectorAll('.game-checkbox:checked');
        let allFilled = true;

        checkedGames.forEach(function(checkbox) {
            const game = checkbox.dataset.game.replace(/ /g, '_');
            const gamertagField = document.getElementById('gamertag_' + game);
            if (!gamertagField || !gamertagField.value.trim()) {
                allFilled = false;
                gamertagField.style.borderColor = '#dc3545';
            } else {
                gamertagField.style.borderColor = '';
            }
        });

        if (!allFilled) {
            e.preventDefault();
            alert('Please enter a gamertag for each game you selected.');
        }
    });
});
</script>
{% endblock %}