{% extends 'manager.html' %}
{% block content %}
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card shadow-lg border-0">
                <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="fas fa-pen-fancy me-2"></i> Redactar Nueva Campaña de Marketing</h5>
                    <span class="badge bg-primary">V&M Calzado</span>
                </div>

                <div class="card-body p-4">
                    <form action="{% url 'enviar_promocion_masiva' %}" method="POST" enctype="multipart/form-data">
                        {% csrf_token %}

                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label class="form-label fw-bold"><i class="fas fa-users me-1"></i> ¿A quién enviamos este correo?</label>
                                <select name="destino" class="form-select border-primary shadow-sm">
                                    <option value="todos">📧 Todos los Clientes</option>
                                    <option value="activos">👧 Clientes Activos (Con Intereses)</option>
                                    <option value="inactivos"> 🧑‍🦲Recuperar Clientes Inactivos (0 Likes)</option>
                                </select>
                                <small class="text-muted">El sistema filtrará automáticamente a los usuarios.</small>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-bold"><i class="fas fa-tag me-1"></i> Asunto del Correo</label>
                                <input type="text" name="asunto" class="form-control border-primary shadow-sm" 
                                       placeholder="Ej: ¡Te extrañamos! Mira nuestros nuevos zapatos..." required>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-bold"><i class="fas fa-align-left me-1"></i> Mensaje Personalizado</label>
                            <textarea name="mensaje" rows="8" class="form-control border-primary shadow-sm" 
                                      placeholder="Escribe aquí el contenido que verán tus clientes..." required></textarea>
                        </div>

                        <div class="mb-4">
                            <label class="form-label fw-bold"><i class="fas fa-file-upload me-1"></i> Adjuntar Catálogo o Foto</label>
                            
                            <div id="drop-zone" class="border border-primary rounded-3 p-5 text-center bg-light" 
                                 style="border-style: dashed !important; border-width: 2px !important; cursor: pointer;">
                                <div class="py-3">
                                    <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-3"></i>
                                    <p class="text-muted fs-5" id="file-name-display">Arrastre y suelte aquí los archivos ...</p>
                                </div>
                                <input type="file" name="adjunto" id="file-input" class="d-none" accept="image/*, .pdf">
                            </div>

                            <div class="mt-3 d-flex gap-2">
                                <button type="button" class="btn btn-outline-secondary" id="btn-quitar">
                                    <i class="fas fa-trash"></i> Quitar
                                </button>
                                <button type="button" class="btn btn-outline-primary" id="btn-subir">
                                    <i class="fas fa-upload"></i> Subir archivo
                                </button>
                                <button type="button" class="btn btn-primary shadow-sm" id="btn-examinar">
                                    <i class="fas fa-folder-open"></i> Examinar ...
                                </button>
                            </div>
                        </div>

                        <hr>
                        <div class="d-flex justify-content-between align-items-center">
                            <a href="{% url 'usuarios_activos' %}" class="btn btn-outline-secondary">
                                <i class="fas fa-arrow-left"></i> Cancelar
                            </a>
                            <button type="submit" class="btn btn-success btn-lg px-5 shadow">
                                <i class="fas fa-paper-plane me-2"></i> Enviar Campaña Ahora
                            </button>
                        </div>
                    </form> </div>
            </div>
            
           
        </div>
    </div>
</div>

<script>
    const dropZone = document.getElementById('drop-zone');
    const fileInput = document.getElementById('file-input');
    const fileNameDisplay = document.getElementById('file-name-display');
    const btnExaminar = document.getElementById('btn-examinar');
    const btnSubir = document.getElementById('btn-subir'); 
    const btnQuitar = document.getElementById('btn-quitar');

    // Manejo de clics
    [dropZone, btnExaminar, btnSubir].forEach(el => {
        el.addEventListener('click', () => fileInput.click());
    });

    fileInput.addEventListener('change', () => {
        if (fileInput.files.length > 0) {
            fileNameDisplay.innerText = "Archivo seleccionado: " + fileInput.files[0].name;
            dropZone.style.backgroundColor = "#e7f3ff";
        }
    });

    // Drag and Drop
    dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropZone.style.border = "2px solid #0d6efd";
        dropZone.style.backgroundColor = "#f8f9fa";
    });

    dropZone.addEventListener('dragleave', () => {
        dropZone.style.backgroundColor = "";
    });

    dropZone.addEventListener('drop', (e) => {
        e.preventDefault();
        fileInput.files = e.dataTransfer.files;
        if (fileInput.files.length > 0) {
            fileNameDisplay.innerText = "Archivo soltado: " + fileInput.files[0].name;
        }
    });

    btnQuitar.addEventListener('click', (e) => {
        e.stopPropagation();
        fileInput.value = "";
        fileNameDisplay.innerText = "Arrastre y suelte aquí los archivos ...";
        dropZone.style.backgroundColor = "";
    });
</script>
{% endblock %}