pedidosClientes/templates/mobile_upload.html

{% extends 'base.html' %}

{% block title %}Subir Albarán{% endblock %}

{% block extra_css %}
<style>
    .upload-container {
        max-width: 600px;
        margin: 2rem auto;
        background: white;
        padding: 2rem;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .upload-area {
        border: 2px dashed #3498db;
        border-radius: 8px;
        padding: 3rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s;
        background: #f8f9fa;
    }
    
    .upload-area:hover {
        background: #e9ecef;
        border-color: #2980b9;
    }
    
    .upload-area.dragover {
        background: #d4edda;
        border-color: #27ae60;
    }
    
    .upload-icon {
        font-size: 3rem;
        color: #3498db;
        margin-bottom: 1rem;
    }
    
    .file-input {
        display: none;
    }
    
    .preview-image {
        max-width: 100%;
        max-height: 400px;
        margin-top: 1rem;
        border-radius: 4px;
    }
    
    .btn-upload {
        margin-top: 1rem;
        width: 100%;
    }
    
    .status-message {
        margin-top: 1rem;
        padding: 1rem;
        border-radius: 4px;
        display: none;
    }
    
    .status-message.success {
        background: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }
    
    .status-message.error {
        background: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }
</style>
{% endblock %}

{% block content %}
<div class="upload-container">
    <h2 style="margin-bottom: 2rem;">Subir Albarán</h2>
    
    <div class="upload-area" id="upload-area">
        <div class="upload-icon">📄</div>
        <p>Arrastra una imagen aquí o haz clic para seleccionar</p>
        <p style="font-size: 0.9rem; color: #7f8c8d; margin-top: 0.5rem;">
            Formatos soportados: JPG, PNG, PDF
        </p>
        <input type="file" id="file-input" class="file-input" accept="image/*,.pdf">
    </div>
    
    <div id="preview-container" style="display: none;">
        <img id="preview-image" class="preview-image" alt="Vista previa">
        <button class="btn btn-primary btn-upload" onclick="uploadFile()">Subir Albarán</button>
    </div>
    
    <div id="status-message" class="status-message"></div>
</div>
{% endblock %}

{% block extra_js %}
<script>
const API_BASE = '/api';
let selectedFile = null;

const uploadArea = document.getElementById('upload-area');
const fileInput = document.getElementById('file-input');
const previewContainer = document.getElementById('preview-container');
const previewImage = document.getElementById('preview-image');
const statusMessage = document.getElementById('status-message');

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

uploadArea.addEventListener('dragover', (e) => {
    e.preventDefault();
    uploadArea.classList.add('dragover');
});

uploadArea.addEventListener('dragleave', () => {
    uploadArea.classList.remove('dragover');
});

uploadArea.addEventListener('drop', (e) => {
    e.preventDefault();
    uploadArea.classList.remove('dragover');
    const files = e.dataTransfer.files;
    if (files.length > 0) {
        handleFile(files[0]);
    }
});

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

function handleFile(file) {
    selectedFile = file;
    
    if (file.type.startsWith('image/')) {
        const reader = new FileReader();
        reader.onload = (e) => {
            previewImage.src = e.target.result;
            previewContainer.style.display = 'block';
        };
        reader.readAsDataURL(file);
    } else if (file.type === 'application/pdf') {
        previewImage.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2VjZjBmMSIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTgiIGZpbGw9IiM3ZjhjOGQiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj5QREY8L3RleHQ+PC9zdmc+';
        previewContainer.style.display = 'block';
    }
}

function uploadFile() {
    if (!selectedFile) return;
    
    const formData = new FormData();
    formData.append('archivo', selectedFile);
    
    statusMessage.style.display = 'none';
    const btn = document.querySelector('.btn-upload');
    btn.disabled = true;
    btn.textContent = 'Subiendo...';
    
    fetch(`${API_BASE}/albaranes/upload/`, {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        statusMessage.className = 'status-message success';
        statusMessage.textContent = 'Albarán subido y procesado correctamente';
        statusMessage.style.display = 'block';
        
        // Reset
        setTimeout(() => {
            selectedFile = null;
            fileInput.value = '';
            previewContainer.style.display = 'none';
            statusMessage.style.display = 'none';
            btn.disabled = false;
            btn.textContent = 'Subir Albarán';
        }, 3000);
    })
    .catch(error => {
        statusMessage.className = 'status-message error';
        statusMessage.textContent = 'Error al subir el albarán: ' + error.message;
        statusMessage.style.display = 'block';
        btn.disabled = false;
        btn.textContent = 'Subir Albarán';
    });
}
</script>
{% endblock %}