{% macro confirm_modal(id, title, button_class, button_text, onclick_fn) %}
<div class="modal fade" id="{{ id }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ title }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                {{ caller() }}
                <div class="d-grid gap-2 mt-3">
                    <button class="btn {{ button_class }}" onclick="{{ onclick_fn }}">
                        {{ button_text }}
                    </button>
                    <button class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endmacro %}

{% macro scanner_modal() %}
<div class="modal fade" id="scannerModal" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Escanear Código</h5>
                <button type="button" class="btn-close" onclick="stopScanner()" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3 d-flex align-items-end gap-2">
                    <div class="flex-grow-1">
                        <label class="form-label small text-muted">Seleccionar Cámara:</label>
                        <select id="camera-select" class="form-select form-select-sm" onchange="switchCamera(this.value)">
                            <option value="">Cargando cámaras...</option>
                        </select>
                    </div>
                    <button id="torch-btn" class="btn btn-outline-secondary btn-sm" onclick="toggleTorch()" style="height: 31px; min-width: 40px; display: none;"></button>
                </div>
                <div id="reader" style="width: 100%; border-radius: 8px; overflow: hidden;"></div>
            </div>
        </div>
    </div>
</div>
{% endmacro %}

{% macro render_receipt(id_suffix="") %}
<div id="receipt-print-zone{{ id_suffix }}" class="d-none d-print-block">
    <style>
        @media print {
            /* Tell the browser this is a continuous 80mm thermal roll */
            @page {
                margin: 0;
                size: 80mm auto; 
            }

            /* Nuke the rest of the layout from the document flow so it takes up 0 height */
            nav, .discord-card, .modal, .row {
                display: none !important;
            }
            
            body * { 
                visibility: hidden; 
            }

            /* Resurrect the receipt and put it in the top left corner */
            #receipt-print-zone{{ id_suffix }}, #receipt-print-zone{{ id_suffix }} * { 
                visibility: visible; 
            }
            #receipt-print-zone{{ id_suffix }} {
                position: absolute; 
                left: 0; 
                top: 0; 
                width: 80mm;
                padding: 2mm 5mm; 
                margin: 0; 
                display: block !important;
                font-family: 'Courier New', Courier, monospace; 
                font-size: 10px; 
                color: #000;
            }
        }
        
        .receipt-table { width: 100%; border-collapse: collapse; font-family: monospace; font-size: 12px; }
        .receipt-header { text-align: center; margin-bottom: 10px; border-bottom: 1px dashed #000; padding-bottom: 5px; }
        .receipt-total-row { border-top: 1px dashed #000; margin-top: 5px; padding-top: 5px; font-weight: bold; }
    </style>

    <div class="receipt-header">
        <h3 style="margin: 0; font-weight: 800;">SekiPOS</h3>
        <div style="font-size: 10px; margin-bottom: 5px;" id="receipt-type{{ id_suffix }}">Comprobante de Venta</div>
        <div style="font-size: 11px; font-weight: bold;">
            Ticket Nº <span id="receipt-ticket-id{{ id_suffix }}"></span>
        </div>
        <div id="receipt-date{{ id_suffix }}" style="font-size: 11px;"></div>
    </div>

    <table class="receipt-table">
        <thead>
            <tr>
                <th style="width: 15%; text-align: left;">Cant</th>
                <th style="width: 60%; padding-left: 5px; text-align: left;">Desc</th>
                <th style="width: 25%; text-align: right;">Total</th>
            </tr>
        </thead>
        <tbody id="receipt-items-print{{ id_suffix }}"></tbody>
    </table>

    <div class="receipt-total-row d-flex justify-content-between">
        <span>TOTAL:</span>
        <span id="receipt-total-print{{ id_suffix }}"></span>
    </div>

    <div id="receipt-payment-info{{ id_suffix }}">
        <div class="d-flex justify-content-between">
            <span>RECIBIDO:</span>
            <span id="receipt-paid-print{{ id_suffix }}"></span>
        </div>
        <div class="d-flex justify-content-between">
            <span>VUELTO:</span>
            <span id="receipt-change-print{{ id_suffix }}"></span>
        </div>
    </div>

    <div style="text-align: center; margin-top: 20px; font-size: 10px;">¡Gracias por su compra!</div>
</div>
{% endmacro %}