{% extends 'base.html' %}

{% block title %}File Upload{% endblock %}

{% block content %}
    <div class="bg-white p-10 rounded-lg shadow-lg w-11/12 md:w-1/2 lg:w-1/3 mx-auto">
        <h2 class="text-2xl font-bold mb-6 text-gray-800 text-center">Upload CSV File</h2>

        <form id="uploadForm" enctype="multipart/form-data" class="space-y-6">
            <div>
                <label for="fileInput" class="block text-sm font-medium text-gray-700 mb-2">Choose CSV File</label>
                <input type="file" name="file" id="fileInput" accept=".csv"
                       class="w-full border border-gray-300 p-3 rounded-lg focus:outline-none focus:ring focus:ring-blue-400">
            </div>

            <button type="submit"
                    class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-400">
                Upload
            </button>
        </form>

        <!-- Error Display -->
        <div id="errorSection" class="hidden mt-4 bg-red-100 border border-red-400 text-red-700 p-4 rounded-lg">
            <strong class="font-bold">Error:</strong>
            <ul id="errorList" class="mt-2 list-disc list-inside"></ul>
        </div>

        <!-- Success Message -->
        <div id="successSection" class="hidden mt-4 bg-green-100 border border-green-400 text-green-700 p-4 rounded-lg">
            <strong class="font-bold">Success:</strong>
            <span id="successMessage" class="block mt-2"></span>
        </div>
    </div>

    <script>
        const form = document.getElementById('uploadForm');
        const fileInput = document.getElementById('fileInput');
        const errorSection = document.getElementById('errorSection');
        const errorList = document.getElementById('errorList');
        const successSection = document.getElementById('successSection');
        const successMessage = document.getElementById('successMessage');

        form.addEventListener('submit', async function (e) {
            e.preventDefault();

            // Clear previous messages
            errorList.innerHTML = '';
            successMessage.innerHTML = '';
            errorSection.classList.add('hidden');
            successSection.classList.add('hidden');

            const formData = new FormData();
            formData.append('file', fileInput.files[0]);

            try {
                const response = await fetch('', {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-CSRFToken': '{{ csrf_token }}',
                    }
                });

                const result = await response.json();

                if (response.ok && result.status === 'success') {
                    successMessage.innerText = result.message;
                    successSection.classList.remove('hidden');
                } else if (response.status === 400 && result.status === 'error') {
                    // Handle form errors from the backend
                    if (Array.isArray(result.errors)) {
                        result.errors.forEach(errorObj => {
                            for (const [field, messages] of Object.entries(errorObj)) {
                                messages.forEach(message => {
                                    const li = document.createElement('li');
                                    li.textContent = `${field}: ${message}`;
                                    errorList.appendChild(li);
                                });
                            }
                        });
                    } else {
                        const li = document.createElement('li');
                        li.textContent = result.errors;
                        errorList.appendChild(li);
                    }

                    errorSection.classList.remove('hidden');
                }
            } catch (error) {
                // Handle unexpected errors
                const li = document.createElement('li');
                li.textContent = 'An unexpected error occurred. Please try again.';
                errorList.appendChild(li);
                errorSection.classList.remove('hidden');
            }
        });
    </script>
{% endblock %}