{% extends "macros/base.html" %}
{% from 'macros/modals.html' import confirm_modal, scanner_modal %}

{% block title %}Ventas{% endblock %}

{% block head %}
<!--HEAD-->
{% endblock %}

{% block content %}

<div class="row g-3">

    <div class="col-md-4">
        <div class="discord-card p-3 mb-3">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0 fw-bold">Registrar Movimiento</h5>
                <button class="btn btn-sm btn-outline-secondary" onclick="clearDicomForm()" title="Limpiar Formulario">
                    <i class="bi bi-eraser"></i> Nuevo
                </button>
            </div>
            <div class="mb-2">
                <label class="small text-muted mb-1">Nombre del Cliente</label>
                <input type="text" id="dicom-name" class="form-control" placeholder="Ej: Doña Juanita">
            </div>
            <div class="mb-2">
                <label class="small text-muted mb-1">Monto (CLP)</label>
                <input type="number" id="dicom-amount" class="form-control" placeholder="Ej: 5000">
            </div>

            <div class="mb-3">
                <label class="small text-muted mb-1">Nota (Opcional)</label>
                <input type="text" id="dicom-notes" class="form-control" placeholder="Ej: Pan y bebida"
                    onkeydown="if(event.key === 'Enter') submitDicom('add')">
            </div>

            <div class="mb-4">
                <label class="small text-muted mb-1">Foto / Comprobante</label>
                <div class="input-group">
                    <input type="text" id="dicom-image-url" class="form-control" placeholder="URL de imagen" readonly>
                    <input type="file" id="dicom-camera-input" accept="image/*" capture="environment" style="display: none;"
                        onchange="handleDicomUpload(this)">
                    <button class="btn btn-outline-secondary" type="button"
                        onclick="document.getElementById('dicom-camera-input').click()">
                        <i class="bi bi-camera"></i>
                    </button>
                </div>
                <div id="dicom-img-preview-container" class="mt-2 d-none">
                    <img id="dicom-img-preview" src="" class="img-thumbnail" style="max-height: 100px;">
                </div>
            </div>

            <div class="d-flex flex-column gap-2">
                <button class="btn btn-danger py-2 fw-bold" onclick="submitDicom('add')">
                    <i class="bi bi-cart-plus me-1"></i> Fiar (Sumar Deuda)
                </button>
                <button class="btn btn-success py-2 fw-bold" onclick="submitDicom('pay')">
                    <i class="bi bi-cash-coin me-1"></i> Abonar (Restar Deuda)
                </button>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="discord-card p-3">

            <div class="position-relative mb-3">
                <input type="text" id="dicom-search" class="form-control ps-5"
                    placeholder="Buscar cliente por nombre..." onkeyup="filterDicom()">
                <i class="bi bi-search position-absolute top-50 start-0 translate-middle-y ms-3 text-muted"></i>
            </div>

            <div class="table-responsive">
                <table class="table mb-0" id="dicom-table">
                    <thead>
                        <tr>
                            <th>Foto</th>
                            <th>Nombre</th>
                            <th>Deuda Total</th>
                            <th>Última Nota</th>
                            <th>Actualizado</th>
                            <th class="text-end">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for d in debtors %}
                        <tr>
                            <td>
                                {% if d[5] %}
                                <img src="{{ d[5] }}" class="rounded" style="width: 40px; height: 40px; object-fit: cover; cursor: pointer;" 
                                    onclick="window.open(this.src, '_blank')">
                                {% else %}
                                <div class="bg-secondary rounded" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; opacity: 0.3;">
                                    <i class="bi bi-image text-white"></i>
                                </div>
                                {% endif %}
                            </td>
                            <td class="fw-bold">{{ d[1] }}</td>
                            <td class="fw-bold price-cell" data-value="{{ d[2] }}"></td>
                            <td class="text-muted small">{{ d[3] }}</td>
                            <td class="text-muted small">{{ d[4] }}</td>
                            <td class="text-end">
                                <button class="btn btn-sm btn-outline-secondary" onclick="selectClient('{{ d[1] }}')"
                                    title="Seleccionar">
                                    <i class="bi bi-pencil"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-danger ms-1"
                                    onclick="forgiveDebt({{ d[0] }}, '{{ d[1] }}')" title="Eliminar Registro">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>
</div>
{% endblock %}

{% block scripts %}
<script>
    const clp = new Intl.NumberFormat('es-CL', { style: 'currency', currency: 'CLP', minimumFractionDigits: 0 });

    // Smart color formatting for the debt column
    document.querySelectorAll('.price-cell').forEach(td => {
        const val = parseFloat(td.getAttribute('data-value'));
        td.innerText = clp.format(val);

        // Reversing the logic: Negative is debt (red), Positive is credit (green)
        if (val < 0) {
            td.classList.add('text-danger');
        } else if (val > 0) {
            td.classList.add('text-success');
        } else {
            td.classList.add('text-muted');
        }
    });

    function compressImage(file, maxWidth, quality) {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = event => {
                const img = new Image();
                img.src = event.target.result;
                img.onload = () => {
                    const canvas = document.createElement('canvas');
                    let width = img.width;
                    let height = img.height;
                    if (width > maxWidth) {
                        height = Math.round((height * maxWidth) / width);
                        width = maxWidth;
                    }
                    canvas.width = width;
                    canvas.height = height;
                    const ctx = canvas.getContext('2d');
                    ctx.drawImage(img, 0, 0, width, height);
                    canvas.toBlob(blob => resolve(blob), 'image/jpeg', quality);
                };
            };
        });
    }

async function handleDicomUpload(input) {
    const name = document.getElementById('dicom-name').value;
    if (!name) {
        alert("Primero ingresa un nombre para asociar la foto.");
        input.value = '';
        return;
    }

    const file = input.files[0];
    if (!file) return;

    try {
        const compressedBlob = await compressImage(file, 800, 0.7);
        const formData = new FormData();
        // Use a unique name for the file based on the debtor
        formData.append('image', compressedBlob, `debt_${name}_${Date.now()}.jpg`);
        formData.append('barcode', `debt_${name}`); // Reusing the barcode field as a prefix

        const res = await fetch('/upload_image', { method: 'POST', body: formData });
        const data = await res.json();

        if (res.ok) {
            document.getElementById('dicom-image-url').value = data.image_url;
            document.getElementById('dicom-img-preview').src = data.image_url;
            document.getElementById('dicom-img-preview-container').classList.remove('d-none');
        }
    } catch (e) {
        alert("Error procesando imagen.");
    }
}

    function filterDicom() {
        const q = document.getElementById('dicom-search').value.toLowerCase();
        document.querySelectorAll('#dicom-table tbody tr').forEach(row => {
            const name = row.cells[0].innerText.toLowerCase();
            row.style.display = name.includes(q) ? '' : 'none';
        });
    }

    // Just pre-fills the form so you don't accidentally click the wrong action
    function selectClient(name) {
        document.getElementById('dicom-name').value = name;
        document.getElementById('dicom-amount').focus();
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    async function submitDicom(action) {
        const name = document.getElementById('dicom-name').value;
        const amount = document.getElementById('dicom-amount').value;
        const notes = document.getElementById('dicom-notes').value;
        const image_url = document.getElementById('dicom-image-url').value; // Added

        if (!name || amount <= 0) {
            alert('Ingresa un nombre y monto válido.');
            return;
        }

        try {
            const res = await fetch('/api/dicom/update', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ name, amount, notes, action, image_url }) // Added image_url
            });
            if (res.ok) window.location.reload();
        } catch (e) { alert("Error de conexión."); }
    }

    // UPDATE your existing clearDicomForm
    function clearDicomForm() {
        document.getElementById('dicom-name').value = '';
        document.getElementById('dicom-amount').value = '';
        document.getElementById('dicom-notes').value = '';
        document.getElementById('dicom-image-url').value = ''; // Added
        document.getElementById('dicom-img-preview-container').classList.add('d-none'); // Added
        document.getElementById('dicom-name').focus();
    }

    async function forgiveDebt(id, name) {
        if (!confirm(`¿Estás seguro de que quieres eliminar completamente a ${name} del registro?`)) return;

        const res = await fetch(`/api/dicom/${id}`, { method: 'DELETE' });
        if (res.ok) window.location.reload();
    }
</script>
{% endblock %}