{% extends "base.html" %}
{% load static %}

{% block title %}{% if object %}Edit{% else %}Create{% endif %} Squad | Roster{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="dashboard-section text-center mb-5">
                <h1 class="welcome-header">{% if object %}Refine your Squad{% else %}Start a new Squad{% endif %}</h1>
                <p class="text-muted">Set the coordination and goals for your team.</p>
            </div>

            <div class="card border-0 shadow-soft p-4 p-lg-5" style="border-radius: 24px;">
                <form method="POST" enctype="multipart/form-data">
                    {% csrf_token %}
                    
                    <div class="row g-4">
                        <div class="col-12">
                            <label class="form-label fw-bold small">Squad Name</label>
                            <input type="text" name="name" class="form-control px-4 py-3 bg-light border-0" value="{{ form.name.value|default:'' }}" required placeholder="e.g. Apex Predators: Ranked Climb">
                        </div>

                        <div class="col-12">
                            <label class="form-label fw-bold small">Description & Goals</label>
                            <textarea name="description" class="form-control px-4 py-3 bg-light border-0" rows="5" required placeholder="What are the goals of this squad? Who are you looking for?">{{ form.description.value|default:'' }}</textarea>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-bold small">Squad Type</label>
                            <select name="group_type" class="form-select px-4 py-3 bg-light border-0" required id="id_group_type">
                                {% for code, label in form.fields.group_type.choices %}
                                <option value="{{ code }}" {% if form.group_type.value == code %}selected{% endif %}>{{ label }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-bold small">Intent Type</label>
                            <select name="intent_type" class="form-select px-4 py-3 bg-light border-0" required>
                                {% for code, label in form.fields.intent_type.choices %}
                                <option value="{{ code }}" {% if form.intent_type.value == code %}selected{% endif %}>{{ label }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="col-12">
                            <label class="form-label fw-bold small">Focus Game / Title (Optional)</label>
                            <input type="text" name="focus_game" class="form-control px-4 py-3 bg-light border-0" value="{{ form.focus_game.value|default:'' }}" placeholder="e.g. Apex Legends, Valorant, Tournament Prep">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-bold small">Visibility</label>
                            <select name="visibility" class="form-select px-4 py-3 bg-light border-0" required>
                                {% for code, label in form.fields.visibility.choices %}
                                <option value="{{ code }}" {% if form.visibility.value == code %}selected{% endif %}>{{ label }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-bold small">Capacity (Optional)</label>
                            <input type="number" name="capacity" class="form-control px-4 py-3 bg-light border-0" value="{{ form.capacity.value|default:'' }}" placeholder="e.g. 5">
                            <small class="text-muted extra-small">Small Squads are capped at 12 by default.</small>
                        </div>

                        <div class="col-12" id="mastermind_schedule_div" style="display: none;">
                            <label class="form-label fw-bold small">Practice Schedule (Required for Pro Squads)</label>
                            <textarea name="recurring_schedule" class="form-control px-4 py-3 bg-light border-0" rows="2" placeholder="e.g. Every Mon/Wed/Fri at 8 PM EST">{{ form.recurring_schedule.value|default:'' }}</textarea>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-bold small">Location Scope</label>
                            <select name="location_scope" class="form-select px-4 py-3 bg-light border-0" required>
                                {% for code, label in form.fields.location_scope.choices %}
                                <option value="{{ code }}" {% if form.location_scope.value == code %}selected{% endif %}>{{ label }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-bold small">Cover Image</label>
                            <input type="file" name="cover_image" class="form-control px-4 py-3 bg-light border-0">
                        </div>

                        <div class="col-12 pt-4">
                            <div class="d-flex gap-3 justify-content-center">
                                <a href="{% url 'groups:hub' %}" class="btn btn-outline-cg px-5 py-3">Cancel</a>
                                <button type="submit" class="btn btn-primary-cg px-5 py-3">{% if object %}Save Changes{% else %}Launch Squad{% endif %}</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const typeSelect = document.getElementById('id_group_type');
        const scheduleDiv = document.getElementById('mastermind_schedule_div');
        
        function toggleSchedule() {
            if (typeSelect.value === 'mastermind') {
                scheduleDiv.style.display = 'block';
            } else {
                scheduleDiv.style.display = 'none';
            }
        }
        
        typeSelect.addEventListener('change', toggleSchedule);
        toggleSchedule(); // Initial state
    });
</script>
{% endblock %}
