{% extends 'theme/dashborad_base.html' %}

{% block dashboard_content %}
<div class="max-w-2xl">
    <h1 class="text-2xl lg:text-3xl font-semibold font-poppins text-primary-dark mb-2">Order Enquiry</h1>
    <p class="text-secondary font-poppins mb-8">Upload your order enquiry Excel sheet and we'll review it shortly.</p>

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 lg:p-8">
        <form method="post" enctype="multipart/form-data">
            {% csrf_token %}

            <div class="mb-6">
                <label class="block text-sm font-medium font-poppins text-primary-dark mb-2">
                    Upload Excel File <span class="text-red-500">*</span>
                </label>
                
                <div id="drop-zone" class="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center hover:border-primary transition cursor-pointer">
                    <input type="file" name="excel_file" id="excel_file" accept=".xlsx,.xls" class="hidden" required>
                    
                    <div id="upload-prompt">
                        <svg class="w-12 h-12 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                        </svg>
                        <p class="text-primary-dark font-medium font-poppins mb-1">Click to upload or drag and drop</p>
                        <p class="text-secondary text-sm font-poppins">Excel files only (.xlsx, .xls)</p>
                    </div>
                    
                    <div id="file-info" class="hidden">
                        <svg class="w-12 h-12 text-green-500 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        <p id="file-name" class="text-primary-dark font-medium font-poppins mb-1"></p>
                        <button type="button" id="remove-file" class="text-red-500 text-sm font-poppins hover:text-red-700">Remove file</button>
                    </div>
                </div>
                
                {% if form.excel_file.errors %}
                <p class="mt-2 text-sm text-red-600 font-poppins">{{ form.excel_file.errors.0 }}</p>
                {% endif %}
            </div>

            <div class="mb-8">
                <label class="block text-sm font-medium font-poppins text-primary-dark mb-2">
                    Additional Notes <span class="text-secondary">(Optional)</span>
                </label>
                {{ form.notes }}
                <p class="mt-2 text-xs text-secondary font-poppins">Add any special requirements or comments about your order.</p>
            </div>

            <div class="flex items-center gap-4">
                <button type="submit" class="px-8 py-3 bg-primary text-accent font-medium font-poppins rounded-lg hover:bg-primary-dark transition">
                    Submit Enquiry
                </button>
                <a href="{% url 'dashboard:my_orders' %}" class="px-8 py-3 bg-gray-100 text-secondary font-medium font-poppins rounded-lg hover:bg-gray-200 transition">
                    Cancel
                </a>
            </div>
        </form>
    </div>

    <div class="mt-8 bg-blue-50 border border-blue-200 rounded-xl p-6">
        <h3 class="text-blue-800 font-semibold font-poppins mb-2">Need Help?</h3>
        <p class="text-blue-700 text-sm font-poppins mb-4">Make sure your Excel file includes the following columns:</p>
        <ul class="text-blue-700 text-sm font-poppins space-y-1 list-disc list-inside">
            <li>Part Number</li>
            <li>Part Name / Description</li>
            <li>Quantity Required</li>
            <li>Vehicle Model (if applicable)</li>
        </ul>
    </div>
</div>

<script>
    const dropZone = document.getElementById('drop-zone');
    const fileInput = document.getElementById('excel_file');
    const uploadPrompt = document.getElementById('upload-prompt');
    const fileInfo = document.getElementById('file-info');
    const fileName = document.getElementById('file-name');
    const removeFile = document.getElementById('remove-file');

    dropZone.addEventListener('click', () => fileInput.click());

    dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropZone.classList.add('border-primary', 'bg-primary/5');
    });

    dropZone.addEventListener('dragleave', () => {
        dropZone.classList.remove('border-primary', 'bg-primary/5');
    });

    dropZone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropZone.classList.remove('border-primary', 'bg-primary/5');
        
        const files = e.dataTransfer.files;
        if (files.length && (files[0].name.endsWith('.xlsx') || files[0].name.endsWith('.xls'))) {
            fileInput.files = files;
            showFileInfo(files[0].name);
        }
    });

    fileInput.addEventListener('change', (e) => {
        if (e.target.files.length) {
            showFileInfo(e.target.files[0].name);
        }
    });

    removeFile.addEventListener('click', (e) => {
        e.stopPropagation();
        fileInput.value = '';
        hideFileInfo();
    });

    function showFileInfo(name) {
        uploadPrompt.classList.add('hidden');
        fileInfo.classList.remove('hidden');
        fileName.textContent = name;
    }

    function hideFileInfo() {
        uploadPrompt.classList.remove('hidden');
        fileInfo.classList.add('hidden');
        fileName.textContent = '';
    }
</script>
{% endblock %}