base.html

{% load static %}
<!DOCTYPE html>
<html lang="es">
<head>
   <!-- Configuración de Metadatos -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Sistema de Pagos{% endblock %}</title>
<link rel="icon" type="image/x-icon" href="{% static 'favicon.ico' %}">

<!-- Estilos CSS (Cargar primero para evitar parpadeo de estilos) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="{% static 'adminlte/plugins/fontawesome-free/css/all.min.css' %}">
<link rel="stylesheet" href="{% static 'adminlte/dist/css/adminlte.min.css' %}">
<link rel="stylesheet" href="{% static 'css/contratos.css' %}">
<link rel="stylesheet" href="{% static 'css/clientes.css' %}">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css">

<!-- Cargar jQuery de forma eficiente -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    window.jQuery || document.write('<script src="{% static "js/jquery-3.6.0.min.js" %}"><\/script>');
</script>

<!-- Scripts JS con `defer` para mejorar rendimiento -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.13/jspdf.plugin.autotable.min.js" defer></script>

<!-- DataTables con Bootstrap 5 -->
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js" defer></script>
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js" defer></script>


</head>
<body class="hold-transition sidebar-mini">
    <div class="wrapper">
        <!-- Navbar -->
        <nav class="main-header navbar navbar-expand navbar-white navbar-light">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>
                </li>
            </ul>
        </nav>

        <!-- Sidebar -->
        <aside class="main-sidebar sidebar-dark-primary elevation-4">
            <a href="#" class="brand-link">
                <span class="brand-text font-weight-light">Sistema de Pagos</span>
            </a>
            <div class="sidebar">
                <nav class="mt-2">
                    <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu">
                        <!-- Dashboard -->
                        <li class="nav-item">
                            <a href="{% url 'dashboard' %}" class="nav-link">
                                <i class="nav-icon fas fa-home"></i>
                                <p>Dashboard</p>
                            </a>
                        </li>

                        <!-- Zonas y avenidas -->
                        <li class="nav-item">
                            <a href="{% url 'lista_zonas' %}" class="nav-link">
                                <i class="nav-icon fas fa-map-marker-alt"></i>
                                <p>Zonas</p>
                            </a>
                        </li>


                        <!-- Clientes -->
                        <li class="nav-item">
                            <a href="{% url 'cliente_list' %}" class="nav-link">
                                <i class="nav-icon fas fa-users"></i>
                                <p>Clientes</p>
                            </a>
                        </li>

                        <!-- Nuevo Cliente -->
                        <li class="nav-item">
                            <a href="{% url 'crear_cliente' %}" class="nav-link">
                                <i class="nav-icon fas fa-user-plus"></i>
                                <p>Nuevo Cliente</p>
                            </a>
                        </li>


                        <!-- Servicios -->
                        <li class="nav-item">
                            <a href="{% url 'servicios' %}" class="nav-link">
                                <i class="nav-icon fas fa-concierge-bell"></i>
                                <p>Servicios</p>
                            </a>
                        </li>

                        <!-- Menú Contratos -->

                        <li class="nav-item">
                            <a href="{% url 'lista_contratos' %}" class="nav-link">
                                <i class="nav-icon fas fa-file-contract"></i>
                                <p>Contratos</p>
                            </a>
                        </li>

                        <li class="nav-item">
                            <a href="{% url 'crear_contrato' %}" class="nav-link">
                                <i class="nav-icon fas fa-plus-circle"></i>
                                <p>Nuevo Contrato</p>
                            </a>
                        </li>


                        <li class="nav-item">
                            <a href="{% url 'pago_servicios' %}" class="nav-link">
                                <i class="fas fa-cash-register"></i> Cobrar Servicios
                            </a>
                        </li>


                        <!-- Control de Acceso -->
                        <li class="nav-header">CONTROL DE ACCESO</li>

                        <li class="nav-item">
                            <a href="#" class="nav-link">
                                <i class="nav-icon fas fa-user-tie"></i>
                                <p>Empleados</p>
                            </a>
                        </li>
                        {% if request.user.is_superuser %}
                        <li class="nav-item">
                            <a href="{% url 'lista_usuarios' %}" class="nav-link">
                                <i class="nav-icon fas fa-users"></i>
                                <p>Gestión de Usuarios</p>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="{% url 'lista_roles' %}" class="nav-link">
                                <i class="nav-icon fas fa-user-shield"></i>
                                <p>Gestión de Roles</p>
                            </a>
                        </li>
                        {% endif %}

                        <!-- Opción para Cerrar Sesión -->
                        <li class="nav-item">
                            <a href="{% url 'logout' %}" class="nav-link text-danger">
                                <i class="nav-icon fas fa-sign-out-alt"></i>
                                <p>Cerrar Sesión</p>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </aside>

        <!-- Contenido Principal -->
        <div class="content-wrapper">
            <section class="content">
                <div class="container-fluid">
                    {% if messages %}
                    <ul class="messages">
                        {% for message in messages %}
                        <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                    {% block content %}{% endblock %}
                </div>
            </section>
        </div>

        <!-- Footer -->
        <footer class="main-footer">
            <strong>&copy; 2025 Sistema de Pagos.</strong>
        </footer>
    </div>


<!-- AdminLTE -->
<script src="{% static 'adminlte/dist/js/adminlte.min.js' %}"></script>

<!-- jQuery (se asegura de que esté disponible) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    window.jQuery || document.write('<script src="{% static "js/jquery-3.6.0.min.js" %}"><\/script>');
</script>

<!-- Bootstrap (Popper.js ya está incluido) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- DataTables con Bootstrap 5 (versión actualizada) -->
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>

<!-- Scripts personalizados -->
<script src="{% static 'js/contrato.js' %}"></script>
<script src="{% static 'js/clientes.js' %}"></script>
<script src="{% static 'js/pago_servicios.js' %}"></script>


</body>
</html>