{% extends "base.html" %}
{% load static %}
{% block title %}
    {{ title }} - Hackathon
{% endblock title %}
{% block content %}
    {% include "includes/sidenav.html" %}
    <div class="container mx-auto px-4 py-8">
        <div class="max-w-3xl mx-auto">
            <h1 class="text-3xl font-bold mb-6 text-gray-800">{{ title }}</h1>
            <div class="bg-white rounded-lg shadow p-6">
                <form method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    {% if form.non_field_errors %}
                        <div class="mb-4 p-4 bg-red-100 text-red-700 rounded-lg">{{ form.non_field_errors }}</div>
                    {% endif %}
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                        <!-- Name -->
                        <div class="col-span-2">
                            <label for="{{ form.name.id_for_label }}"
                                   class="block text-sm font-medium text-gray-700 mb-1">
                                Name <span class="text-red-500">*</span>
                            </label>
                            {{ form.name }}
                            {% if form.name.errors %}<p class="mt-1 text-sm text-red-600">{{ form.name.errors.0 }}</p>{% endif %}
                        </div>
                        <!-- Organization -->
                        <div class="col-span-2 md:col-span-1">
                            <label for="{{ form.organization.id_for_label }}"
                                   class="block text-sm font-medium text-gray-700 mb-1">
                                Organization <span class="text-red-500">*</span>
                            </label>
                            {{ form.organization }}
                            {% if form.organization.errors %}<p class="mt-1 text-sm text-red-600">{{ form.organization.errors.0 }}</p>{% endif %}
                            <p class="mt-1 text-xs text-gray-500">Only organizations where you are an admin or manager are shown.</p>
                        </div>
                        <!-- Banner Image -->
                        <div class="col-span-2 md:col-span-1">
                            <label for="{{ form.banner_image.id_for_label }}"
                                   class="block text-sm font-medium text-gray-700 mb-1">Banner Image</label>
                            {{ form.banner_image }}
                            {% if form.banner_image.errors %}<p class="mt-1 text-sm text-red-600">{{ form.banner_image.errors.0 }}</p>{% endif %}
                            <p class="mt-1 text-xs text-gray-500">Recommended size: 1200x400 pixels</p>
                        </div>
                        <!-- Start Time -->
                        <div>
                            <label for="{{ form.start_time.id_for_label }}"
                                   class="block text-sm font-medium text-gray-700 mb-1">
                                Start Time <span class="text-red-500">*</span>
                            </label>
                            {{ form.start_time }}
                            {% if form.start_time.errors %}<p class="mt-1 text-sm text-red-600">{{ form.start_time.errors.0 }}</p>{% endif %}
                        </div>
                        <!-- End Time -->
                        <div>
                            <label for="{{ form.end_time.id_for_label }}"
                                   class="block text-sm font-medium text-gray-700 mb-1">
                                End Time <span class="text-red-500">*</span>
                            </label>
                            {{ form.end_time }}
                            {% if form.end_time.errors %}<p class="mt-1 text-sm text-red-600">{{ form.end_time.errors.0 }}</p>{% endif %}
                        </div>
                        <!-- Registration Open -->
                        <div>
                            <div class="flex items-center">
                                {{ form.registration_open }}
                                <label for="{{ form.registration_open.id_for_label }}"
                                       class="ml-2 block text-sm font-medium text-gray-700">Registration Open</label>
                            </div>
                            {% if form.registration_open.errors %}
                                <p class="mt-1 text-sm text-red-600">{{ form.registration_open.errors.0 }}</p>
                            {% endif %}
                        </div>
                        <!-- Max Participants -->
                        <div>
                            <label for="{{ form.max_participants.id_for_label }}"
                                   class="block text-sm font-medium text-gray-700 mb-1">Max Participants</label>
                            {{ form.max_participants }}
                            {% if form.max_participants.errors %}
                                <p class="mt-1 text-sm text-red-600">{{ form.max_participants.errors.0 }}</p>
                            {% endif %}
                            <p class="mt-1 text-xs text-gray-500">Leave blank for unlimited</p>
                        </div>
                        <!-- Description -->
                        <div class="col-span-2">
                            <label for="{{ form.description.id_for_label }}"
                                   class="block text-sm font-medium text-gray-700 mb-1">
                                Description <span class="text-red-500">*</span>
                            </label>
                            {{ form.description }}
                            {% if form.description.errors %}<p class="mt-1 text-sm text-red-600">{{ form.description.errors.0 }}</p>{% endif %}
                        </div>
                        <!-- Rules -->
                        <div class="col-span-2">
                            <label for="{{ form.rules.id_for_label }}"
                                   class="block text-sm font-medium text-gray-700 mb-1">Rules</label>
                            {{ form.rules }}
                            {% if form.rules.errors %}<p class="mt-1 text-sm text-red-600">{{ form.rules.errors.0 }}</p>{% endif %}
                        </div>
                        <!-- Repositories -->
                        <div class="col-span-2">
                            <label for="{{ form.repositories.id_for_label }}"
                                   class="block text-sm font-medium text-gray-700 mb-1">Repositories</label>
                            {{ form.repositories }}
                            {% if form.repositories.errors %}<p class="mt-1 text-sm text-red-600">{{ form.repositories.errors.0 }}</p>{% endif %}
                            <p class="mt-1 text-xs text-gray-500">
                                Select the repositories that will be part of this hackathon. Pull requests to these repositories during the hackathon period will be counted.
                            </p>
                            <div id="repositories-loading" class="mt-2 hidden">
                                <p class="text-sm text-gray-600">Loading repositories...</p>
                            </div>
                            <div id="no-repositories-message" class="mt-2 hidden">
                                <p class="text-sm text-red-600">
                                    No repositories found for this organization. Please add repositories to the organization first.
                                </p>
                            </div>
                        </div>
                        <!-- Sponsorship Section -->
                        <div class="col-span-2 mt-4 pt-4 border-t border-gray-200">
                            <h3 class="text-lg font-medium text-gray-800 mb-4">Sponsorship Information</h3>
                            <!-- Sponsor Note -->
                            <div class="mb-4">
                                <label for="{{ form.sponsor_note.id_for_label }}"
                                       class="block text-sm font-medium text-gray-700 mb-1">Sponsorship Note</label>
                                {{ form.sponsor_note }}
                                {% if form.sponsor_note.errors %}<p class="mt-1 text-sm text-red-600">{{ form.sponsor_note.errors.0 }}</p>{% endif %}
                                <p class="mt-1 text-xs text-gray-500">
                                    Provide information about sponsorship opportunities for this hackathon. This will be displayed on the hackathon page.
                                </p>
                            </div>
                            <!-- Sponsor Link -->
                            <div>
                                <label for="{{ form.sponsor_link.id_for_label }}"
                                       class="block text-sm font-medium text-gray-700 mb-1">Sponsorship Link</label>
                                {{ form.sponsor_link }}
                                {% if form.sponsor_link.errors %}<p class="mt-1 text-sm text-red-600">{{ form.sponsor_link.errors.0 }}</p>{% endif %}
                                <p class="mt-1 text-xs text-gray-500">
                                    Link to sponsorship information or application form. This will be displayed as a "Become a Sponsor" button.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="flex justify-end space-x-4">
                        <a href="{% url 'hackathons' %}"
                           class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#e74c3c]">
                            Cancel
                        </a>
                        <button type="submit"
                                class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[#e74c3c] hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#e74c3c]">
                            {{ submit_text }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock content %}
{% block scripts %}
    <script>
    $(document).ready(function() {
        // Function to fetch repositories for an organization
        function fetchRepositories(organizationId) {
            if (!organizationId) {
                $('#repositories-loading').hide();
                $('#no-repositories-message').hide();
                $('#id_repositories').empty();
                return;
            }

            $('#repositories-loading').show();
            $('#no-repositories-message').hide();
            $('#id_repositories').empty();

            // Use the new API endpoint
            $.ajax({
                url: `/api/v1/organizations/${organizationId}/repositories/`,
                method: 'GET',
                success: function(data) {
                    $('#repositories-loading').hide();
                    
                    if (data.length === 0) {
                        $('#no-repositories-message').show();
                    } else {
                        $('#no-repositories-message').hide();
                        
                        // Add repositories to select
                        data.forEach(function(repo) {
                            let option = new Option(repo.name, repo.id);
                            $('#id_repositories').append(option);
                        });
                        
                        // If editing, restore selected repositories
                        {% if form.instance.pk %}
                        let selectedRepos = [{% for repo in form.instance.repositories.all %}{{ repo.id }}{% if not forloop.last %},{% endif %}{% endfor %}];
                        $('#id_repositories').val(selectedRepos);
                        {% endif %}
                    }
                },
                error: function() {
                    $('#repositories-loading').hide();
                    $('#no-repositories-message').show().text('Error loading repositories. Please try again.');
                }
            });
        }

        // Listen for changes on the organization select
        $('#id_organization').change(function() {
            let organizationId = $(this).val();
            fetchRepositories(organizationId);
        });

        // Initial load of repositories if organization is selected
        let initialOrganizationId = $('#id_organization').val();
        if (initialOrganizationId) {
            fetchRepositories(initialOrganizationId);
        }
    });
    </script>
{% endblock scripts %}