{% extends "base.html" %}
{% block title %}Reportes - Metafoliador v2{% endblock %}
{% block breadcrumb %}Reportes{% endblock %}
{% block content %}
<div class="page-header"><h2 class="page-title">Reportes del Sistema</h2>
<button class="btn btn-primary" onclick="openReporteModal()" id="btnNewReporte" style="display:none"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>Nuevo Reporte</button></div>
<div class="card"><div class="card-body"><div class="table-responsive"><table class="table"><thead><tr>
<th data-sort="name" onclick="sortReportes('name')" style="cursor:pointer">Nombre</th><th data-sort="description" onclick="sortReportes('description')" style="cursor:pointer">Descripción</th><th data-sort="type_report" onclick="sortReportes('type_report')" style="cursor:pointer">Tipo</th><th data-sort="active" onclick="sortReportes('active')" style="cursor:pointer">Estado</th><th>Acciones</th>
</tr></thead><tbody id="reportesTable"></tbody></table></div></div></div>
<div id="reporteIframeContainer" style="display:none;margin-top:16px"><div class="card"><div class="card-header" style="display:flex;justify-content:space-between;align-items:center;padding:12px 16px"><h3 id="iframeTitle" style="margin:0">Reporte</h3><button class="btn btn-sm btn-secondary" onclick="closeIframe()">Cerrar</button></div><div class="card-body" style="padding:0"><iframe id="reporteIframe" style="width:100%;height:600px;border:none;margin-top:8px" sandbox="allow-scripts allow-same-origin allow-forms allow-popups"></iframe></div></div></div>
<div class="modal-overlay" id="reporteModalOverlay">
<div class="modal"><div class="modal-header"><h3 id="reporteModalTitle">Nuevo Reporte</h3><button class="modal-close" onclick="closeReporteModal()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button></div>
<div class="modal-body"><form id="reporteForm"><input type="hidden" id="reporteId">
<div class="form-group"><label for="reporteName">Nombre *</label><input type="text" id="reporteName" class="form-control" required></div>
<div class="form-group"><label for="reporteCode">Código *</label><input type="text" id="reporteCode" class="form-control" required></div>
<div class="form-group"><label for="reporteDesc">Descripción</label><textarea id="reporteDesc" class="form-control" rows="2"></textarea></div>
<div class="form-group" id="urlGroup"><label for="reporteUrl">URL del reporte *</label><input type="url" id="reporteUrl" class="form-control" placeholder="https://..."></div>
<div class="form-group"><label class="checkbox-label"><input type="checkbox" id="reporteActive" checked><span>Activo</span></label></div>
</form></div><div class="modal-footer"><button class="btn btn-secondary" onclick="closeReporteModal()">Cancelar</button><button class="btn btn-primary" onclick="saveReporte()">Guardar</button></div></div></div>
{% endblock %}
{% block extra_js %}<script src="/static/js/reportes.js"></script>
<script>document.addEventListener("DOMContentLoaded",function(){if(hasPerm("reportes.create"))document.getElementById("btnNewReporte").style.display="";});</script>{% endblock %}