{% extends 'base_layout.html' %}
{% load static %}
{% block content %}
    <main>
        <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <h1 class="mt-4">Augšupielādēt Fotoattēlu ZIP Failu</h1>
                        <form id="photoUploadForm" method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        <div class="form-group p-3">
                            <label for="photoZipFile">Izvēlieties ZIP failu:</label>
                            <input type="file" class="form-control-file" id="photoZipFile" name="photoZipFile" accept=".zip" required>
                        </div>
                        <div class="form-group p-3">
                            <label for="missionSelect">Izvēlieties Misiju:</label>
                            <select class="form-control" id="missionSelect" name="missionSelect" required>
                                <option value="" selected disabled>Izvēlieties Misiju</option>
                                {% for mission in missions %}
                                    <option value="{{ mission.id }}">  {{mission.block.name }}: {{ mission.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <button type="button" class="btn btn-primary" onclick="uploadPhotos()">Augšupielādēt Fotoattēlus</button>
                    </form>
                    </div>
                </div>
        </div>
    </main>
    <script>
                function uploadPhotos() {
                    const url = "{% url 'upload_photos' %}";
                    const formData = new FormData();
                    const photoZipFile = document.getElementById('photoZipFile').files[0];
                    formData.append('photoZipFile', photoZipFile);
                    formData.append('missionId', document.getElementById('missionSelect').value);

                    fetch(url, {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'X-CSRFToken': '{{ csrf_token }}'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.error) {
                            alert(data.error);
                        } else {
                            alert('Fotoattēli tika veiksmīgi augšupielādēti!');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                    });
                }
    </script>
{% endblock %}