{% extends 'base.html' %}
{% load humanize %}

{% block content %}
<section class="page-view active">
    <div class="view-header" style="margin-bottom: 2rem;">
        <div class="view-title">
            <h2 style="margin:0; color:var(--efintel-petroleum); display:flex; align-items:center; gap:0.5rem;"><i data-lucide="calculator" style="color:var(--efintel-blue);"></i> Simulador F29 (IVA y Retenciones)</h2>
            <p style="margin-top:0.25rem; font-size:0.9rem; color:var(--efintel-gray);">Calcula la declaración mensual conectándose a la Tax API, utilizando gastos y compras pagadas del mes.</p>
        </div>
    </div>

    <div class="data-card" style="margin-bottom: 2rem;">
        <form method="get" id="f29-form" style="display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap;">
            <div class="form-group" style="margin-bottom: 0;">
                <label style="font-size: 0.8rem; font-weight: 600;">Mes</label>
                <select name="month" class="form-control" onchange="this.form.submit()">
                    {% for m in months %}
                        <option value="{{ m }}" {% if m == month %}selected{% endif %}>{{ m }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group" style="margin-bottom: 0;">
                <label style="font-size: 0.8rem; font-weight: 600;">Año</label>
                <select name="year" class="form-control" onchange="this.form.submit()">
                    {% for y in years %}
                        <option value="{{ y }}" {% if y == year %}selected{% endif %}>{{ y }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group" style="margin-bottom: 0;">
                <label style="font-size: 0.8rem; font-weight: 600;">Ventas Netas Proyectadas (CLP)</label>
                <input type="number" name="ventas_netas" class="form-control" value="{{ ventas_netas|stringformat:"i" }}" style="width: 200px;">
            </div>
            <div class="form-group" style="margin-bottom: 0;">
                <label style="font-size: 0.8rem; font-weight: 600;">Ventas Exentas (CLP)</label>
                <input type="number" name="ventas_exentas" class="form-control" value="{{ ventas_exentas|stringformat:"i" }}" style="width: 150px;">
            </div>
            <div class="form-group" style="margin-bottom: 0;">
                <label style="font-size: 0.8rem; font-weight: 600;">Tasa PPM (ej: 0.01 = 1%)</label>
                <input type="number" step="0.001" name="tasa_ppm" class="form-control" value="{{ tasa_ppm }}" style="width: 100px;">
            </div>
            <button type="submit" class="btn-primary" style="height: 42px;"><i data-lucide="refresh-cw" style="width:16px;"></i> Simular</button>
        </form>
    </div>

    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
        <div class="data-card">
            <h3 style="margin-top:0; color:var(--efintel-petroleum); font-size:1.1rem; border-bottom: 1px solid var(--efintel-border); padding-bottom: 0.5rem;"><i data-lucide="database"></i> Datos Obtenidos del ERP</h3>
            <ul style="list-style: none; padding: 0; margin-top: 1rem;">
                <li style="display:flex; justify-content:space-between; padding: 0.5rem 0; border-bottom: 1px dashed var(--efintel-border);">
                    <span style="color:var(--efintel-gray);">Total Compras Netas (Pagadas):</span>
                    <strong style="font-family:var(--font-mono);">${{ compras_netas|floatformat:"0"|intcomma }}</strong>
                </li>
                <li style="display:flex; justify-content:space-between; padding: 0.5rem 0; border-bottom: 1px dashed var(--efintel-border);">
                    <span style="color:var(--efintel-gray);">Total Retenciones Boletas (Pagadas):</span>
                    <strong style="font-family:var(--font-mono);">${{ retenciones_honorarios|floatformat:"0"|intcomma }}</strong>
                </li>
            </ul>
            <div style="margin-top: 1rem; font-size: 0.8rem; color:var(--efintel-gray); background: #f8fafc; padding: 0.8rem; border-radius: 4px;">
                <i data-lucide="info" style="width:14px; vertical-align:middle;"></i> Sólo se incluyen Órdenes de Compra y Erogaciones en estado <strong>LIBERADO_PAGADO</strong>.
            </div>
        </div>

        <div class="data-card" style="background: #f0fdf4; border: 1px solid #bbf7d0;">
            <h3 style="margin-top:0; color:var(--efintel-success); font-size:1.1rem; border-bottom: 1px solid #bbf7d0; padding-bottom: 0.5rem;"><i data-lucide="file-check-2"></i> Resultado Simulación F29</h3>
            <ul style="list-style: none; padding: 0; margin-top: 1rem;">
                <li style="display:flex; justify-content:space-between; padding: 0.5rem 0; border-bottom: 1px dashed #bbf7d0;">
                    <span>Débito Fiscal (IVA Ventas):</span>
                    <strong style="font-family:var(--font-mono);">${{ simulation.iva_debito|floatformat:"0"|intcomma }}</strong>
                </li>
                <li style="display:flex; justify-content:space-between; padding: 0.5rem 0; border-bottom: 1px dashed #bbf7d0;">
                    <span>Crédito Fiscal (IVA Compras):</span>
                    <strong style="font-family:var(--font-mono);">${{ simulation.iva_credito|floatformat:"0"|intcomma }}</strong>
                </li>
                <li style="display:flex; justify-content:space-between; padding: 0.5rem 0; border-bottom: 1px dashed #bbf7d0;">
                    <span style="color:var(--efintel-petroleum);">PPM a Pagar:</span>
                    <strong style="font-family:var(--font-mono);">${{ simulation.ppm_a_pagar|floatformat:"0"|intcomma }}</strong>
                </li>
                <li style="display:flex; justify-content:space-between; padding: 0.5rem 0; border-bottom: 1px dashed #bbf7d0;">
                    <span style="color:var(--efintel-petroleum);">Retenciones a Pagar:</span>
                    <strong style="font-family:var(--font-mono);">${{ simulation.total_retenciones_honorarios|floatformat:"0"|intcomma }}</strong>
                </li>
                <li style="display:flex; justify-content:space-between; padding: 0.5rem 0; border-bottom: 1px dashed #bbf7d0;">
                    <span style="color:var(--efintel-gray);">Remanente Siguiente Mes:</span>
                    <strong style="font-family:var(--font-mono);">${{ simulation.remanente_siguiente_mes|floatformat:"0"|intcomma }}</strong>
                </li>
                <li style="display:flex; justify-content:space-between; padding: 1rem 0 0 0; margin-top: 0.5rem; font-size: 1.2rem;">
                    <strong style="color:var(--efintel-petroleum);">Total A Pagar F29:</strong>
                    <strong style="font-family:var(--font-mono); color:var(--efintel-success);">${{ simulation.total_a_pagar|floatformat:"0"|intcomma }}</strong>
                </li>
            </ul>
            <div style="margin-top: 1rem; font-size: 0.75rem; color:var(--efintel-gray);">
                <i data-lucide="check-circle" style="width:12px; vertical-align:middle;"></i> {{ simulation.nota|default:"Cálculo validado correctamente." }}
            </div>
        </div>
    </div>
</section>
{% endblock %}