{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block extrastyle %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% static 'css/admin_custom.css' %}">
{% endblock %}

{% block breadcrumbs %}
<div class="breadcrumbs">
    <a href="{% url 'admin:index' %}">Home</a> &rsaquo;
    <a href="{% url 'admin:events_gallery_changelist' %}">Galleries</a> &rsaquo;
    Bulk Upload
</div>
{% endblock %}

{% block content %}
<div id="content-main" class="model-gallery bulk-upload">
    <div class="module">
        <h2>Bulk Upload Images</h2>
        <form method="post" enctype="multipart/form-data" class="bulk-upload-form">
            {% csrf_token %}
            <div class="form-row">
                <label for="event">Select Event:</label>
                <select name="event" id="event" required>
                    <option value="">---------</option>
                    {% for event in events %}
                        <option value="{{ event.id }}" data-status="{{ event.status }}">
                            {{ event.title }} 
                            {% if event.status == 'upcoming' %}(Upcoming){% endif %}
                            {% if event.status == 'ongoing' %}(Ongoing){% endif %}
                            {% if event.status == 'archived' %}(Archived){% endif %}
                        </option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-row">
                <label for="images">Select Images:</label>
                <input type="file" name="images" id="images" multiple accept="image/*" required>
                <div class="upload-progress" style="display: none;">
                    <div class="progress-bar" style="width: 0%;"></div>
                </div>
                <div class="upload-status" style="display: none;"></div>
            </div>
            <div class="submit-row">
                <input type="submit" value="Upload Images" class="default">
                <a href="../" class="closelink">Cancel</a>
            </div>
        </form>
    </div>
</div>

{% block extrajs %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('.bulk-upload-form');
    const fileInput = document.getElementById('images');
    const progressBar = document.querySelector('.upload-progress');
    const progressBarInner = document.querySelector('.progress-bar');
    const statusDiv = document.querySelector('.upload-status');
    const submitButton = form.querySelector('input[type="submit"]');

    fileInput.addEventListener('change', function() {
        if (this.files.length > 0) {
            submitButton.value = `Upload ${this.files.length} Image${this.files.length > 1 ? 's' : ''}`;
        } else {
            submitButton.value = 'Upload Images';
        }
    });

    form.addEventListener('submit', function(e) {
        e.preventDefault();
        progressBar.style.display = 'block';
        statusDiv.style.display = 'block';
        statusDiv.className = 'upload-status';
        statusDiv.textContent = 'Uploading...';
        
        const formData = new FormData(this);
        const xhr = new XMLHttpRequest();
        
        xhr.upload.addEventListener('progress', function(e) {
            if (e.lengthComputable) {
                const percentComplete = (e.loaded / e.total) * 100;
                progressBarInner.style.width = percentComplete + '%';
            }
        });

        xhr.addEventListener('load', function() {
            if (xhr.status === 200) {
                statusDiv.className = 'upload-status success';
                statusDiv.textContent = 'Upload successful!';
                setTimeout(() => window.location.href = '../', 1500);
            } else {
                statusDiv.className = 'upload-status error';
                statusDiv.textContent = 'Upload failed. Please try again.';
            }
        });

        xhr.addEventListener('error', function() {
            statusDiv.className = 'upload-status error';
            statusDiv.textContent = 'Upload failed. Please try again.';
        });

        xhr.open('POST', window.location.href, true);
        xhr.send(formData);
    });
});
</script>
{% endblock %}
{% endblock %}