{# templates/macros.html #}
<!--{#
..######...#######..##........#######..########..........########...#######..########..........########..####....###.....######.
.##....##.##.....##.##.......##.....##.##.....##.........##.....##.##.....##.##.....##.........##.....##..##....##.##...##....##
.##.......##.....##.##.......##.....##.##.....##.........##.....##.##.....##.##.....##.........##.....##..##...##...##..##......
.##.......##.....##.##.......##.....##.########..........########..##.....##.########..........##.....##..##..##.....##..######.
.##.......##.....##.##.......##.....##.##...##...........##........##.....##.##...##...........##.....##..##..#########.......##
.##....##.##.....##.##.......##.....##.##....##..........##........##.....##.##....##..........##.....##..##..##.....##.##....##
..######...#######..########..#######..##.....##.#######.##.........#######..##.....##.#######.########..####.##.....##..######.
#}-->
{% macro color_por_dias(dias) %}
{% if dias <= 29 %} bg-teal-200 {% elif dias <=59 %} bg-yellow-200 {% elif dias <=89 %} bg-orange-200 {% else %}
    bg-red-200 {% endif %} {% endmacro %} <!--{# █ █ ▄ ▄ ▄▄ ▄▄▄ ▄ ▄▄ ▄▄▄█ ▄▄▄ ▄ ▄▄ ▄▄▄█ ▄▄▄ ▄▄█▄▄ ▄▄▄ █▀ ▀ █▀ █ █▀ █ █▀
    ▀█ █▀ █ █▀ ▀ █▀ ▀█ ▀ █ █ █▀ █ █ █▀▀▀▀ █ █ █ █ █▀▀▀▀ █ █ █ ▄▀▀▀█ █ █▀▀▀▀ █ ▀█▄▄▀ █ █ ▀█▄██ ▀█▄▄▀ █ ▀█▄██ ▀▄▄▀█ ▀▄▄
    ▀█▄▄▀ ▀▀▀▀▀▀ #}-->
    {% macro render_date(label, name, fecha) %}
    <div>
        <label class="block font-medium text-gray-700" for="fecha">{{ label }}</label>
        <input class="w-full border border-gray-300 rounded px-2 py-1" type="date" name="{{ name }}"
            value="{{ fecha or '' }}" required />
    </div>
    {% endmacro %}

    <!--{#
.####.##....##.########..##.....##.########
..##..###...##.##.....##.##.....##....##...
..##..####..##.##.....##.##.....##....##...
..##..##.##.##.########..##.....##....##...
..##..##..####.##........##.....##....##...
..##..##...###.##........##.....##....##...
.####.##....##.##.........#######.....##...
#}-->
    {% macro render_input(label, name, value='', type='text', placeholder='', required=True) %}
    <div>
        <label class="block font-medium text-gray-700" for="{{ name }}">{{ label }}</label>
        <input class="w-full border border-gray-300 rounded px-2 py-1" type="{{ type }}" name="{{ name }}"
            id="{{ name }}" value="{{ value }}" placeholder="{{ placeholder }}" {% if required %}required{% endif %}>
    </div>
    {% endmacro %}
    <!--{#
..######..########.##.......########..######..########
.##....##.##.......##.......##.......##....##....##...
.##.......##.......##.......##.......##..........##...
..######..######...##.......######...##..........##...
.......##.##.......##.......##.......##..........##...
.##....##.##.......##.......##.......##....##....##...
..######..########.########.########..######.....##...
#}-->
    {% macro render_select(label, name, items, selected_value) %}
    <div>
        <label class="block font-medium text-gray-700" for="{{ name }}">{{ label }}</label>
        <select class="w-full border border-gray-300 rounded px-2 py-1" name="{{ name }}" required>
            {% for key, val in items.items() %}
            <option value="{{ key }}" title="{{ key }} : {{ val.title }}" {% if selected_value==key|string %}selected{%
                endif %}>
                {{ val.desc }}
            </option>
            {% endfor %}
        </select>
    </div>
    {% endmacro %}
    <!-- {#
..######..##.....##.########..##.....##.####.########....########..##.....##.########.########..#######..##....##
.##....##.##.....##.##.....##.###...###..##.....##.......##.....##.##.....##....##.......##....##.....##.###...##
.##.......##.....##.##.....##.####.####..##.....##.......##.....##.##.....##....##.......##....##.....##.####..##
..######..##.....##.########..##.###.##..##.....##.......########..##.....##....##.......##....##.....##.##.##.##
.......##.##.....##.##.....##.##.....##..##.....##.......##.....##.##.....##....##.......##....##.....##.##..####
.##....##.##.....##.##.....##.##.....##..##.....##.......##.....##.##.....##....##.......##....##.....##.##...###
..######...#######..########..##.....##.####....##.......########...#######.....##.......##.....#######..##....##
#} -->
    {% macro render_submit_button(label) %}
    <div class="text-center">
        <button class="bg-gray-700 hover:bg-gray-800 text-white font-bold py-2 px-4 rounded shadow" type="submit"
            onclick="return confirm('Esta operación puede tomar tiempo ¿Desea continuar?')">
            {{ label }}
        </button>
    </div>
    {% endmacro %}
    <!-- {#
.##....##..#######.....########.....###....########....###...
.###...##.##.....##....##.....##...##.##......##......##.##..
.####..##.##.....##....##.....##..##...##.....##.....##...##.
.##.##.##.##.....##....##.....##.##.....##....##....##.....##
.##..####.##.....##....##.....##.#########....##....#########
.##...###.##.....##....##.....##.##.....##....##....##.....##
.##....##..#######.....########..##.....##....##....##.....##
#} -->
    {% macro render_no_data() %}
    <div class="text-center text-red-600 font-semibold mt-6 text-xl">
        [{{ datetime.now().strftime('%H:%M:%S') }}] No se encontró data con los parámetros seleccionados.
    </div>
    {% endmacro %}
    <!-- {#
                          █                                              ▀    ▀▀█   
  ▄ ▄▄   ▄▄▄   ▄ ▄▄    ▄▄▄█   ▄▄▄    ▄ ▄▄          ▄▄▄   ▄▄▄▄▄   ▄▄▄   ▄▄▄      █   
  █▀  ▀ █▀  █  █▀  █  █▀ ▀█  █▀  █   █▀  ▀        █▀  █  █ █ █  ▀   █    █      █   
  █     █▀▀▀▀  █   █  █   █  █▀▀▀▀   █            █▀▀▀▀  █ █ █  ▄▀▀▀█    █      █   
  █     ▀█▄▄▀  █   █  ▀█▄██  ▀█▄▄▀   █            ▀█▄▄▀  █ █ █  ▀▄▄▀█  ▄▄█▄▄    ▀▄▄ 
                                          ▀▀▀▀▀▀                                    
#} -->
    {% macro render_email(email, nro_marcas) %}
    {% if email %}
    {% set pdf_urls = email.pdf_url or [] %}
    <details class="mb-3">
        <summary class="cursor-pointer font-semibold text-blue-700">Email ({{ nro_marcas }}M)</summary>
        <form class="mt-2 form-notificacion">
            <textarea name="pdf" class="hidden">{{ email.pdf }}</textarea>
            {% for url in pdf_urls %}
            <input type="hidden" name="pdf_url" value="{{ url }}">
            {% endfor %}
            <input type="hidden" id="from" name="from" value="{{ email.from }}">
            <input type="hidden" id="bcc" name="bcc" value="{{ email.bcc }}">
            <textarea name="body" class="hidden">{{ email.rendered_html }}</textarea>

            <div class="space-y-4 text-sm mt-4">
                <div>
                    <label for="to" class="block font-medium text-gray-700">To</label>
                    <input class="w-full border border-gray-300 rounded px-2 py-1" type="text" id="to" name="to"
                        value="{{ email.to }}">
                </div>
                <div>
                    <label for="cc" class="block font-medium text-gray-700">Cc</label>
                    <input class="w-full border border-gray-300 rounded px-2 py-1" type="text" id="cc" name="cc"
                        value="{{ email.cc }}">
                </div>
                <div>
                    <label for="subject" class="block font-medium text-gray-700">Subject</label>
                    <input class="w-full border border-gray-300 rounded px-2 py-1" type="text" id="subject"
                        name="subject" value="{{ email.subject }}">
                </div>
                {% if pdf_urls %}
                <div>
                    <label class="block font-medium text-gray-700">Attachments</label>
                    <ol class="list-decimal list-inside space-y-1">
                        {% for url in pdf_urls %}
                        {% set clean_url = url.replace('%5C', '/').replace('\\', '/').replace('%20', ' ') %}
                        <li>
                            <a class="text-blue-600 hover:underline break-words" href="{{ url }}" target="_blank">
                                {{ clean_url.rsplit('/', 1)[-1] }}
                            </a>
                        </li>
                        {% endfor %}
                    </ol>
                </div>
                {% endif %}
            </div>

            <hr class="my-4 border-gray-300">

            <div class="text-sm text-gray-800 bg-gray-50 p-3 rounded border border-gray-200">
                {{ email.rendered_html | safe }}
            </div>

            <div class="text-center mt-4">
                <button class="btn-enviar bg-gray-700 hover:bg-gray-800 text-white font-bold py-2 px-4 rounded shadow"
                    type="submit" onclick="return confirm('Esta operación puede tomar tiempo ¿Desea continuar?')">
                    Enviar
                </button>
            </div>
        </form>
    </details>
    {% endif %}
    {% endmacro %}
    <!-- {#
.##.....##.########.##.....##.##................##..........##..######...#######..##....##
.##.....##....##....###...###.##...............##...........##.##....##.##.....##.###...##
.##.....##....##....####.####.##..............##............##.##.......##.....##.####..##
.#########....##....##.###.##.##.............##.............##..######..##.....##.##.##.##
.##.....##....##....##.....##.##............##........##....##.......##.##.....##.##..####
.##.....##....##....##.....##.##...........##.........##....##.##....##.##.....##.##...###
.##.....##....##....##.....##.########....##...........######...######...#######..##....##
#} -->
    {% macro render_html_json(html, json) %}
    <details class="mb-3">
        <summary class="cursor-pointer font-semibold text-blue-700">
            Ver HTML y JSON
        </summary>
        <div class="ml-4 mt-2 space-y-2">
            <details>
                <summary class="cursor-pointer text-blue-600 font-medium">HTML</summary>
                <pre
                    class="whitespace-pre-wrap text-sm bg-gray-100 p-3 rounded border border-gray-200 overflow-x-auto mt-1">
         {{ html | e }}
            </pre>
            </details>
            <details>
                <summary class="cursor-pointer text-blue-600 font-medium">JSON</summary>
                <pre
                    class="whitespace-pre-wrap text-sm bg-gray-100 p-3 rounded border border-gray-200 overflow-x-auto mt-1">
        {{ json | tojson(indent=2) }}
      </pre>
            </details>
        </div>
    </details>
    {% endmacro %}
    <!--{#
..######..##.......####.########.##....##.########.########.......##.########..########...#######..########.....
.##....##.##........##..##.......###...##....##....##............##..##.....##.##.....##.##.....##.##.....##....
.##.......##........##..##.......####..##....##....##...........##...##.....##.##.....##.##.....##.##.....##....
.##.......##........##..######...##.##.##....##....######......##....########..########..##.....##.########.....
.##.......##........##..##.......##..####....##....##.........##.....##........##...##...##.....##.##...........
.##....##.##........##..##.......##...###....##....##........##......##........##....##..##.....##.##........###
..######..########.####.########.##....##....##....########.##.......##........##.....##..#######..##........###
#}-->
    {% macro render_cliente_propietarios(i, cliente, propietarios) %}
    </details>
    <h2 class="text-2xl font-bold text-gray-800 mb-4 text-center">Notificación #{{ i }}</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">{{ cliente }}</span>
        </div>

        {% set lista = propietarios or [] %}
        {% set plural = lista|length > 1 %}

        {% if lista %}
        <div>
            <span class="block text-sm font-semibold text-gray-600">
                {{ "Solicitantes | Propietarios" if plural else "Solicitante | Propietario" }}
            </span>
            {% for p in lista %}
            <span class="block text-xl font-bold">
                {{ loop.index ~ '. ' if plural else '' }}{{ p.nombre }}
            </span>
            {% endfor %}
        </div>
        {% endif %}

    </div>
    {% endmacro %}
    <!--{#
.##.....##....###....########...######.....###.....######.
.###...###...##.##...##.....##.##....##...##.##...##....##
.####.####..##...##..##.....##.##........##...##..##......
.##.###.##.##.....##.########..##.......##.....##..######.
.##.....##.#########.##...##...##.......#########.......##
.##.....##.##.....##.##....##..##....##.##.....##.##....##
.##.....##.##.....##.##.....##..######..##.....##..######.
#}-->
    {% macro render_marcas(marcas) %}
    {% if marcas %}
    {% set total = marcas | length %}
    <details class="mb-3">
        <summary class="cursor-pointer font-semibold text-blue-700">
            {{ 'Marca' if total == 1 else 'Marcas' }} ({{ total }})
        </summary>

        {% for marca in 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 %}
            {% set value_str = value|string %}
            {% if value_str | trim %}
            <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_str }}
                {% endif %}
            </div>
            {% endif %}
            {% endfor %}
        </div>
        {% endfor %}
    </details>
    {% endif %}
    {% endmacro %}
    <!--{#
.########....###.....######..########.##.....##.########.....###.....######.
.##.........##.##...##....##....##....##.....##.##.....##...##.##...##....##
.##........##...##..##..........##....##.....##.##.....##..##...##..##......
.######...##.....##.##..........##....##.....##.########..##.....##..######.
.##.......#########.##..........##....##.....##.##...##...#########.......##
.##.......##.....##.##....##....##....##.....##.##....##..##.....##.##....##
.##.......##.....##..######.....##.....#######..##.....##.##.....##..######.
#}-->
    {% macro render_facturas(facturas) %}
    {% if facturas %}
    <details class="mb-3">
        <summary class="cursor-pointer font-semibold text-blue-700">
            {{ 'Factura' if facturas|length == 1 else 'Facturas' }} ({{ facturas|length }})
        </summary>

        {% for f in facturas %}
        {% set dias_int = f.get('dias_vencido') if f.get('dias_vencido') is number else 0 %}

        {% set color_class = '' %}
        {% if dias_int > 0 %}
        {% if dias_int <= 30 %} {% set color_class='bg-green-100' %} {% elif dias_int <=60 %} {% set
            color_class='bg-yellow-100' %} {% elif dias_int <=90 %} {% set color_class='bg-orange-100' %} {% else %} {%
            set color_class='bg-red-100' %} {% endif %} {% endif %} <div
            class="mb-4 p-4 border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200 {{ color_class }}">
            <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 %}
    {% endmacro %}
    <!--{#
.########.##....##.##.....##.####....###....########......######...#######..########..########..########..#######.
.##.......###...##.##.....##..##....##.##...##.....##....##....##.##.....##.##.....##.##.....##.##.......##.....##
.##.......####..##.##.....##..##...##...##..##.....##....##.......##.....##.##.....##.##.....##.##.......##.....##
.######...##.##.##.##.....##..##..##.....##.########.....##.......##.....##.########..########..######...##.....##
.##.......##..####..##...##...##..#########.##...##......##.......##.....##.##...##...##...##...##.......##.....##
.##.......##...###...##.##....##..##.....##.##....##.....##....##.##.....##.##....##..##....##..##.......##.....##
.########.##....##....###....####.##.....##.##.....##.....######...#######..##.....##.##.....##.########..#######.
#}-->
    {% macro javascript_enviar_correo() %}
    <script>
        const endpoint = "{{ url_for('main.enviar_correo') }}"
        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>
    {% endmacro %}