{% extends "nbapp_base.html" %}
{% block content %}
{% set urls = { 'enviar': url_for('main.notificaciones_enviar'),} %}
<meta charset="UTF-8">
<!--{#
*************************************
*************************************
*************************************
JAVASCRIPT PARA EVIAR CORREO
*************************************
*************************************
*************************************
#}-->
<script>
    const endpoint = "{{ urls.enviar }}"
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.form-notificacion').forEach(form => {
            form.addEventListener('submit', async function (e) {
                e.preventDefault();
                const boton = form.querySelector('.btn-enviar');
                const textoOriginal = boton.textContent;
                // Feedback inmediato
                boton.textContent = 'Enviando...';
                boton.disabled = true;
                boton.classList.add('opacity-50', 'cursor-not-allowed');
                try {
                    const formData = new FormData(form);
                    const response = await fetch(endpoint, {
                        method: 'POST',
                        body: formData
                    });

                    if (response.ok) {
                        alert('Notificación enviada correctamente');
                    } else {
                        alert('Error al enviar notificación');
                    }
                } catch (err) {
                    alert('Error de red o del servidor');
                } finally {
                    // Restaurar botón
                    boton.textContent = textoOriginal;
                    boton.disabled = false;
                    boton.classList.remove('opacity-50', 'cursor-not-allowed');
                }
            });
        });
    });
</script>
<!--{#
*************************************
*************************************
*************************************
LISTAR RESUMEN DE PARAMETROS 
*************************************
*************************************
*************************************
#}-->
<section class="border border-gray-300 rounded-md p-4 my-6 shadow-md max-w-xl mx-auto">
    <div class="text-2xl text-gray-800 mb-4 text-center">
        nro: <strong>{{ nro }}</strong> - fecha: <strong>{{ fecha }}</strong> - estilo: <strong>{{ estilo }}</strong>
    </div>
</section>
{% for d in data %}
<section class="border border-gray-300 rounded-md p-4 my-6 shadow-md max-w-xl mx-auto">
    <!--{#
    *************************************
    *************************************
    *************************************
    HEADER
    *************************************
    *************************************
    *************************************
    #}-->
    <h2 class="text-2xl font-bold text-gray-800 mb-4 text-center">Notificación #{{ loop.index }}</h2>
    <div class="space-y-2 text-gray-800 text-center">
        <div>
            <span class="block text-sm font-semibold text-gray-600">Cliente</span>
            <span class="block text-xl font-bold">{{ d.cliente }}</span>
        </div>
        <div>
            <span class="block text-sm font-semibold text-gray-600">
                {% if (d.propietarios or []) | length > 1 %}
                Solicitantes | Propietarios
                {% elif (d.propietarios or []) | length == 1 %}
                Solicitante | Propietario
                {% endif %}
                {% for p in d.propietarios %}
                <span class="block text-xl font-bold">
                    {% if (d.propietarios or []) | length > 1 %}
                    {{ loop.index }}. {{ p.nombre }}
                    {% else %}
                    {{ p.nombre }}
                    {% endif %}
                </span>
                {% endfor %}
            </span>
        </div>
    </div>
    <!--{#
    *************************************
    *************************************
    *************************************
    EMAIL
    *************************************
    *************************************
    *************************************
    #}-->
    <details class="mb-3">
        <summary class="cursor-pointer font-semibold text-blue-700">Email</summary>
        <form class="mt-2 form-notificacion">
            <textarea name="pdf" class="hidden">{{ d.pdf }}</textarea>
            {% for url in d.pdf_url %}
            <input type="hidden" name="pdf_url" value="{{ url }}">
            {% endfor %}
            <textarea name="body" class="hidden">{{ d.rendered_html }}</textarea>
            <button
                class="btn-enviar block mx-auto mt-2 bg-gray-700 hover:bg-gray-800 text-white font-bold py-1 px-4 rounded-lg shadow"
                type="submit"
                onclick="return confirm('Recuerde que esta operación puede tomar considerable tiempo ¿Desea continuar?')">
                Enviar
            </button>
            <div class="space-y-4 text-sm mt-4">
                <div>
                    <label for="to" class="block font-medium text-gray-700">To</label>
                    <input type="text" id="to" name="to" value="{{ d.to | map(attribute='email') | join('; ') }}"
                        class="w-full border border-gray-300 rounded px-2 py-1">
                </div>
                <div>
                    <label for="cc" class="block font-medium text-gray-700">Cc</label>
                    <input type="text" id="cc" name="cc" value="{{ d.cc | map(attribute='email') | join('; ') }}"
                        class="w-full border border-gray-300 rounded px-2 py-1">
                </div>
                <div>
                    <label for="subject" class="block font-medium text-gray-700">Subject</label>
                    <input type="text" id="subject" name="subject" value="{{ d.subject }}"
                        class="w-full border border-gray-300 rounded px-2 py-1">
                </div>
            </div>
        </form>
        <hr class="my-4 border-gray-300">
        <div class="text-sm text-gray-800 bg-gray-50 p-3 rounded border border-gray-200">
            {{ d.rendered_html | safe }}
        </div>
    </details>
    <!--{#
    *************************************
    *************************************
    *************************************
    MARCAS
    *************************************
    *************************************
    *************************************
    #}-->
    {% if d.marcas and d.marcas | length > 0 %}
    <details class="mb-3">
        <summary class="cursor-pointer font-semibold text-blue-700">
            {{ 'Marca' if d.marcas | length == 1 else 'Marcas' }} ({{ d.marcas | length }})
        </summary>
        {% for marca in d.marcas %}
        <div
            class="mb-4 p-4 border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200">
            <div class="mb-2 font-semibold text-sm text-blue-800">
                Marca {{ loop.index }}
            </div>
            {% for key, value in marca | dictsort %}
            {% if value and value | trim != '' %}
            {% set value_str = value|string %}
            <div class="mb-2 text-sm text-gray-800">
                {% if value_str.startswith('https://') and (value_str.endswith('.jpg') or value_str.endswith('.png')) %}
                <strong>{{ key | replace('_', ' ') }}:</strong><br>
                <a href="{{ value_str }}" target="_blank" class="inline-block mt-1">
                    <img src="{{ value_str }}" alt="{{ key }}"
                        style="max-width:150px; max-height:150px; height:auto; width:auto; border: 1px solid #ccc; border-radius: 4px;">
                </a>
                {% else %}
                <strong>{{ key | replace('_', ' ') }}:</strong> {{ value }}
                {% endif %}
            </div>
            {% endif %}
            {% endfor %}
        </div>
        {% endfor %}
    </details>
    {% endif %}
    <!--
    {#
    {% if d.marcas and d.marcas | length > 0 %}
    <details class="mb-3">
        <summary class="cursor-pointer font-semibold text-blue-700">
            {{ 'Marca' if d.marcas | length == 1 else 'Marcas' }} ({{ d.marcas | length }})
        </summary>

        {% for marca in d.marcas %}
        <div
            class="mb-4 p-4 border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200">
            {% for key, value in marca.items() %}
            {% if value and value | trim != '' %}
            <div class="flex flex-col mb-2">
                <span class="font-bold text-gray-700 text-sm uppercase tracking-wide">
                    {{ key | replace('_', ' ') }}:
                </span>
                {% set value_str = value|string %}
                {% if value_str.startswith('https://') and (value_str.endswith('.jpg') or value_str.endswith('.png')) %}
                <a href="{{ value_str }}" target="_blank" class="inline-block mt-1">
                    <img src="{{ value_str }}" alt="{{ key }}" class="max-w-xs max-h-64 rounded shadow">
                </a>
                {% else %}
                <span class="text-gray-900 text-base break-words">{{ value }}</span>
                {% endif %}
            </div>
            {% endif %}
            {% endfor %}
        </div>
        {% endfor %}
    </details>
    {% endif %}
    {% if d.facturas and d.facturas | length > 0 %}
    <details class="mb-3">
        <summary class="cursor-pointer font-semibold text-blue-700">
            {{ 'Factura' if d.facturas | length == 1 else 'Facturas' }} ({{ d.facturas | length }})
        </summary>
        <div class="mt-2 space-y-1">
            <div class="overflow-x-auto">
                <table class="min-w-full text-sm text-gray-800 border border-gray-300 rounded-lg overflow-hidden">
                    <thead class="bg-gray-100 text-left text-xs font-semibold uppercase tracking-wider">
                        <tr>
                            {% for key in d.facturas[0].keys() %}
                            <th class="px-4 py-2 border-b">{{ key | replace('_', ' ') }}</th>
                            {% endfor %}
                        </tr>
                    </thead>
                    <tbody>
                        {% for f in d.facturas %}
                        <tr class="hover:bg-gray-50">
                            {% for key, value in f.items() %}
                            {% set bg_class = '' %}
                            {% if f.estado == 'POR COBRAR' and (key == 'estado' or key == 'dias_vencido') %}
                            {% if f.dias_vencido > 90 %}
                            {% set bg_class = 'bg-red-500 text-white' %}
                            {% elif f.dias_vencido > 60 %}
                            {% set bg_class = 'bg-orange-400' %}
                            {% elif f.dias_vencido > 30 %}
                            {% set bg_class = 'bg-yellow-200' %}
                            {% else %}
                            {% set bg_class = 'bg-green-300' %}
                            {% endif %}
                            {% endif %}
                            <td class="px-4 py-2 border-b {{ bg_class }}">{{ value }}</td>
                            {% endfor %}
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </details>
    {% endif %}
    #}-->
    <!-- {#
    *************************************
    *************************************
    *************************************
    FACTURAS
    *************************************
    *************************************
    *************************************
    #} -->
    {% if d.facturas and d.facturas | length > 0 %}
    <details class="mb-3">
        <summary class="cursor-pointer font-semibold text-blue-700">
            {{ 'Factura' if d.facturas | length == 1 else 'Facturas' }} ({{ d.facturas | length }})
        </summary>
        {% for f in d.facturas %}
        {% set dias = f.get('dias_vencido') %}
        {% set dias_int = dias if dias is number else 0 %}
        <div class="mb-4 p-4 border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200
        {% if dias_int > 0 %}
            {% if dias_int <= 30 %} bg-green-100
            {% elif dias_int <= 60 %} bg-yellow-100
            {% elif dias_int <= 90 %} bg-orange-100
            {% else %} bg-red-100
            {% endif %}
        {% endif %}">
            <div class="flex flex-col space-y-1 text-sm text-gray-800">
                <div>
                    <strong>Factura</strong>&nbsp;{{ loop.index }}&nbsp;
                    <strong>No.:</strong>&nbsp;{{ f.nro }}&nbsp;
                    <strong>Fecha:</strong>&nbsp;{{ f.fecha }}
                </div>
                <div>
                    <strong>Estado:</strong> {{ f.estado }}
                    {% if dias_int > 0 %}
                    ({{ dias_int }} días)
                    {% endif %}
                </div>
                <div><strong>Cliente:</strong>&nbsp;{{ f.cliente }}</div>
                <div><strong>Resumen:</strong>&nbsp;{{ f.resumen }}</div>
            </div>
        </div>
        {% endfor %}
    </details>
    {% endif %}
    <!-- {#
    *************************************
    *************************************
    *************************************
    ATTACHMENTS
    *************************************
    *************************************
    *************************************
    #} -->
    {% if d.pdf_url and d.pdf_url | length > 0 %}
    <details class="mb-3">
        <summary class="cursor-pointer font-semibold text-blue-700">
            {{ 'Attachment' if d.pdf_url | length == 1 else 'Attachments' }} ({{ d.pdf_url | length }})
        </summary>
        <div class="mt-2 space-y-1">
            {% for url in d.pdf_url %}
            <a class="text-blue-600 hover:underline block break-all text-sm" href="{{ url }}" target="_blank">
                {{ url }}
            </a>
            {% endfor %}
        </div>
    </details>
    {% endif %}
    <!-- {#
    *************************************
    *************************************
    *************************************
    JSON
    *************************************
    *************************************
    *************************************
    #} -->
    <details class="mb-3">
        <summary class="cursor-pointer font-semibold text-blue-700">JSON</summary>
        <pre class="whitespace-pre-wrap text-sm bg-gray-100 p-3 rounded border border-gray-200 mt-2">
            {{ d | tojson(indent=2) | safe  }}
        </pre>
    </details>
    <!-- {#
    *************************************
    *************************************
    *************************************
    HTML
    *************************************
    *************************************
    *************************************
    #} -->
    <details class="mb-3">
        <summary class="cursor-pointer font-semibold text-blue-700">HTML</summary>
        <pre class="whitespace-pre-wrap text-sm bg-gray-100 p-3 rounded border border-gray-200 mt-2">
            {{ d.rendered_html }}
        </pre>
    </details>
</section>
{% endfor %}
{% endblock %}