{% load static %}
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>COMEXIGER Admin</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

  <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
        crossorigin="anonymous" />

  <link rel="stylesheet" href="{% static 'plantilla/adminlte4/dist/css/adminlte.min.css' %}">

  <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.bootstrap5.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css">

  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script>
    window.SwalDark = Swal.mixin({
      background: "#000000",
      color: "#ffffff",
      confirmButtonColor: "#FFD700",
      cancelButtonColor: "#6c757d",
      reverseButtons: true
    });
  </script>

  <style>
    .logo-comexiger{
      width: 170px;
      height:auto;
      border-radius:12px;
      display:block;
      margin:12px auto;
    }
    /* ===== FONDO GENERAL ===== */
    body,
    .app-wrapper,
    .app-main,
    .app-content {
      background-color: #ECF0F5 !important;
    }

    /* ===== SIDEBAR IZQUIERDO ===== */
    .app-sidebar {
      background-color: #222D32 !important;
    }

    /* Texto del sidebar */
    .app-sidebar .nav-link,
    .app-sidebar .brand-text,
    .app-sidebar p {
      color: #b8c7ce !important;
    }

    /* Hover en menú */
    .app-sidebar .nav-link:hover {
      background-color: #1e282c !important;
      color: #ffffff !important;
    }

    /* Íconos */
    .app-sidebar .nav-icon {
      color: #b8c7ce !important;
    }

    /* Item activo */
    .app-sidebar .nav-link.active {
      background-color: #1e282c !important;
      color: #ffffff !important;
    }

    /* Línea separadora (si aparece) */
    .app-sidebar hr {
      border-color: rgba(255,255,255,0.1);
    }

  </style>

  {% block head %}{% endblock %}
</head>

<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
<div class="app-wrapper">

  <!-- HEADER -->
  <nav class="app-header navbar navbar-expand bg-primary navbar-dark">
    <div class="container-fluid">

      <!-- botón sidebar -->
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
            <i class="fa-solid fa-bars"></i>
          </a>
        </li>
        <li class="nav-item d-none d-md-inline-block">
          <a href="{% url 'dispo' %}" class="nav-link fw-semibold">CX COMEXIGER</a>
        </li>
      </ul>

      <!-- (opcional) derecha -->
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link" href="{% url 'cerrarsesion' %}">
            <i class="fa-solid fa-right-from-bracket"></i> <span class="d-none d-md-inline">Salir</span>
          </a>
        </li>
      </ul>

    </div>
  </nav>

  <!-- SIDEBAR -->
  <aside class="app-sidebar bg-dark shadow" data-bs-theme="dark">
    <div class="sidebar-brand">
      <a href="{% url 'dispo' %}" class="brand-link">
        <span class="brand-text fw-light">COMEXIGER</span>
      </a>
    </div>

    <div class="sidebar-wrapper">
      <div class="px-3">
        <img src="{% static 'img/logo.jpg' %}" class="logo-comexiger" alt="Logo">
      </div>

      <nav class="mt-2">
        <ul class="nav sidebar-menu flex-column" role="menu">

          <li class="nav-item">
            <a class="nav-link" href="{% url 'usuariore' %}">
              <i class="nav-icon fa-solid fa-shield-halved"></i>
              <p>Administración</p>
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="{% url 'dispo' %}">
              <i class="nav-icon fa-solid fa-table"></i>
              <p>Disponibilidad</p>
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="{% url 'rendimiento' %}">
              <i class="nav-icon fa-solid fa-chart-column"></i>
              <p>Rendimiento</p>
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="{% url 'cerrarsesion' %}">
              <i class="nav-icon fa-solid fa-right-from-bracket"></i>
              <p>Cerrar sesión</p>
            </a>
          </li>

        </ul>
      </nav>
    </div>
  </aside>

  <!-- CONTENIDO -->
  <main class="app-main">
    <div class="app-content p-3">
      {% block body %}{% endblock %}
    </div>
  </main>

  <!-- FOOTER -->
  <footer class="app-footer small">
    <div class="float-end d-none d-sm-inline">COMEXIGER</div>
    <strong>&copy; {{ now|date:"Y" }}.</strong> Todos los derechos reservados.
  </footer>

</div>

<script>
  // ==========================
  // ALERTAS GLOBAL COMEXIGER
  // ==========================

  window.alertaConfirmar = function({
    titulo = "¿Confirmar acción?",
    html = "Esta acción no se puede deshacer.",
    confirmText = "<i class='fas fa-check me-2'></i>Confirmar",
    cancelText = "<i class='fas fa-times me-2'></i>Cancelar",
    confirmColor = "#dc3545",
    icon = "warning",
  } = {}) {
    return Swal.fire({
      title: titulo,
      html: `
        <div class="text-center py-3">
          <i class="fas fa-triangle-exclamation fa-4x text-warning mb-4"></i>
          <div class="text-muted mt-3">${html}</div>
        </div>
      `,
      icon,
      showCancelButton: true,
      confirmButtonText: confirmText,
      cancelButtonText: cancelText,
      confirmButtonColor: confirmColor,
      cancelButtonColor: "#6c757d",
      reverseButtons: true,
      customClass: {
        confirmButton: 'btn btn-lg btn-danger',
        cancelButton: 'btn btn-lg btn-secondary'
      }
    });
  };


  window.alertaCargando = function(titulo="Procesando...", texto="Por favor espera") {
    Swal.fire({
      title: titulo,
      text: texto,
      allowOutsideClick: false,
      didOpen: () => Swal.showLoading(),
      background: "#ffffff"
    });
  };

  window.alertaExito = function(mensaje="La operación se realizó correctamente") {
    Swal.fire({
      title: "Éxito",
      html: `
        <div class="text-center py-3">
          <i class="fas fa-check-circle fa-4x text-success mb-4"></i>
          <p class="text-muted mt-3">${mensaje}</p>
        </div>
      `,
      confirmButtonText: "<i class='fas fa-check me-2'></i>Aceptar",
      confirmButtonColor: "#27ae60",
      customClass: { confirmButton: "btn btn-lg btn-success" }
    });
  };

  window.alertaError = function(mensaje="Ocurrió un problema, inténtalo nuevamente") {
    Swal.fire({
      title: "Error",
      html: `
        <div class="text-center py-3">
          <i class="fas fa-times-circle fa-4x text-danger mb-4"></i>
          <p class="text-muted mt-3">${mensaje}</p>
        </div>
      `,
      confirmButtonText: "<i class='fas fa-times me-2'></i>Cerrar",
      confirmButtonColor: "#e74c3c",
      customClass: { confirmButton: "btn btn-lg btn-danger" }
    });
  };

  
  window.alertaInfo = function(mensaje="") {
    Swal.fire({
      title: "Aviso",
      html: `
        <div class="text-center py-3">
          <i class="fas fa-circle-info fa-4x text-primary mb-4"></i>
          <p class="text-muted mt-3">${mensaje}</p>
        </div>
      `,
      confirmButtonText: "<i class='fas fa-check me-2'></i>Aceptar",
      confirmButtonColor: "#3498db",
      customClass: { confirmButton: "btn btn-lg btn-primary" }
    });
  };
</script>
{% if messages %}
  {% for mensaje in messages %}
    <script>
      {% if "success" in mensaje.tags %}
        alertaExito("{{ mensaje|escapejs }}");
      {% elif "error" in mensaje.tags %}
        alertaError("{{ mensaje|escapejs }}");
      {% elif "warning" in mensaje.tags %}
        alertaInfo("{{ mensaje|escapejs }}");
      {% else %}
        alertaInfo("{{ mensaje|escapejs }}");
      {% endif %}
    </script>
  {% endfor %}
{% endif %}




<!-- SCRIPTS -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<script src="{% static 'plantilla/adminlte4/dist/js/adminlte.min.js' %}"></script>

<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>

<script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>

<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>

{% block extra_scripts %}{% endblock %}
</body>
</html>
