html a modal intento 1

templates/admin_rendiciones.html

@@ -1,15 +1,16 @@
 {% extends "macros/base.html" %}
-
+{% from 'macros/modals.html' import view_rendicion_modal %}
 
 {% block title %}Historial de Rendiciones{% endblock %}
 
 {% block head %}
-<!-- HEAD -->
 {% endblock %}
 
 {% block content %}
 <h2 class="mb-4">Historial de Rendiciones</h2>
 
+{{ view_rendicion_modal() }}
+
 <div class="card shadow-sm">
     <div class="card-body p-0">
         <table class="table table-striped table-hover mb-0">
@@ -34,7 +35,14 @@
                     <td class="align-middle">${{ "{:,.0f}".format(r[5]).replace(',', '.') }}</td>
                     <td class="align-middle text-danger">${{ "{:,.0f}".format(r[6]).replace(',', '.') }}</td>
                     <td class="text-end">
-                        <a href="{{ url_for('view_rendicion', id=r[0]) }}" class="btn btn-sm btn-primary">Ver Detalle</a>
+                        <button type="button" 
+                                class="btn btn-sm btn-primary" 
+                                data-bs-toggle="modal" 
+                                data-bs-target="#viewRendicionModal"
+                                data-url="{{ url_for('view_rendicion', id=r[0]) }}"
+                                data-id="{{ r[0] }}">
+                            Ver Detalle
+                        </button>
                     </td>
                 </tr>
                 {% else %}
@@ -47,3 +55,34 @@
     </div>
 </div>
 {% endblock %}
+
+{% block scripts %}
+<script>
+    const viewModal = document.getElementById('viewRendicionModal');
+    if (viewModal) {
+        viewModal.addEventListener('show.bs.modal', function (event) {
+            const button = event.relatedTarget;
+            const url = button.getAttribute('data-url');
+            const id = button.getAttribute('data-id');
+            
+            const title = viewModal.querySelector('#rendicionModalTitle');
+            const body = viewModal.querySelector('#rendicionModalBody');
+            
+            title.textContent = `Detalle de Rendición #${id}`;
+            body.innerHTML = '<div class="text-center py-5"><div class="spinner-border text-primary" role="status"></div></div>';
+            
+            fetch(url)
+                .then(response => response.text())
+                .then(html => {
+                    const parser = new DOMParser();
+                    const doc = parser.parseFromString(html, 'text/html');
+                    const content = doc.querySelector('.row').outerHTML;
+                    body.innerHTML = content;
+                })
+                .catch(err => {
+                    body.innerHTML = '<div class="alert alert-danger">Error al cargar los detalles.</div>';
+                });
+        });
+    }
+</script>
+{% endblock %}

templates/macros/modals.html

@@ -116,3 +116,26 @@
     </div>
 </div>
 {% endmacro %}
+
+{% macro view_rendicion_modal() %}
+<div class="modal fade" id="viewRendicionModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-xl modal-dialog-scrollable">
+        <div class="modal-content">
+            <div class="modal-header bg-dark text-white">
+                <h5 class="modal-title" id="rendicionModalTitle">Detalle de Rendición</h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body" id="rendicionModalBody">
+                <div class="text-center py-5">
+                    <div class="spinner-border text-primary" role="status">
+                        <span class="visually-hidden">Cargando</span>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
+            </div>
+        </div>
+    </div>
+</div>
+{% endmacro %}