<?php
session_start();

require_once '../../Controlador/Utilidades/Conexion_BD.php';
require_once '../../Controlador/Utilidades/Permisos.php';
require_once '../../Controlador/Ctrl_Administrador/MySQL_Mostrar_Usuarios.php';

$conn = new Conexion_BD();
$MostrarUsuarios = new MostrarUsuarios($conn);
$users = $MostrarUsuarios->ObtenerTodosLosUsuarios();
$conn->closeConnection();

/* ---------- Permisos ---------- */
$tienePermisoAgregar   = tienePermiso('usuarios', 'puede_agregar');
$tienePermisoEditar    = tienePermiso('usuarios', 'puede_editar');
$tienePermisoEliminar  = tienePermiso('usuarios', 'puede_eliminar');
$tienePermisoReportes  = tienePermiso('usuarios', 'puede_reportes');
$tienePermisoEstado    = tienePermiso('usuarios', 'puede_estado');

/* ---------- Mapeos de estado ---------- */
$estado_labels = [
  'activo'     => 'Activ@',
  'inactivo'   => 'Inactiv@',
  'suspendido' => 'Suspendid@',
  'bloqueado'  => 'Bloquead@'
];
$estado_badges = [
  'activo'     => 'bg-success',
  'inactivo'   => 'bg-secondary',
  'suspendido' => 'bg-warning',
  'bloqueado'  => 'bg-danger'
];

function e($v)
{
  return htmlspecialchars($v ?? '', ENT_QUOTES, 'UTF-8');
}
?>
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>TSGJ - Tabla de Usuarios</title>
  <link rel="icon" href="../../Modelo/Archivos_Media/Color_LogoTipo.png" type="image/png" />

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

  <!-- DataTables (SOLO CORE, sin Buttons) -->
  <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css" />
  <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.dataTables.min.css" />
  <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>

  <!-- SweetAlert -->
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

  <!-- Boxicons -->
  <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />

  <!-- Bootstrap + estilos -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="../../Modelo/Archivos_CSS/Style_table_Gestion.css" />
</head>

<body>

  <div class="container">
    <h2 class="my-4">Tabla Gestión de Usuarios</h2>
  </div>

  <div class="button-borders">
    <?php if ($tienePermisoAgregar): ?>
      <button class="button-name btn-add" type="button" onclick="location.href='Adm_Formulario_Registro.php'">
        Agregar Nuevo Usuario +
      </button>
    <?php endif; ?>
    <button class="button-name" id="btnActualizarUsuarios" type="button">Actualizar</button>
  </div>

  <!-- Botón SOLO visible en móviles -->
  <div class="d-md-none text-center my-3">
    <button class="btn btn-primary" id="toggleViewBtn" type="button">Ver como tabla</button>
  </div>

  <!-- ===================== TABLA (≥768px) ===================== -->
  <div class="table-wrapper d-none d-md-block" id="tablaResponsive">
    <table id="tablaUsuarios" class="display nowrap" style="width:100%">
      <thead class="table-primary">
        <tr>
          <th>ID</th>
          <th>Usuario</th>
          <th>Contraseña</th>
          <th class="text-start">Nombre(s)</th>
          <th class="text-start">Apellido(s)</th>
          <th class="text-start">Correo Electrónico</th>
          <th>Teléfono</th>
          <th class="text-start">Cargo</th>
          <th class="text-center">Estado</th>
          <th class="text-center">Opciones</th>
        </tr>
      </thead>
      <tbody>
        <?php foreach ($users as $u): ?>
          <?php
          $estado = strtolower($u['estado']);
          $label  = $estado_labels[$estado] ?? ucfirst($estado);
          $badge  = $estado_badges[$estado] ?? 'bg-dark';
          $motivo = e($u['motivo_estado'] ?? '');
          $fdesde = e($u['fecha_estado_desde'] ?? '');
          ?>
          <tr>
            <td><?= (int) $u['id_usuario'] ?></td>
            <td><?= e($u['usuario']) ?></td>
            <td>******</td>
            <td class="text-start"><?= e($u['nombre']) ?></td>
            <td class="text-start"><?= e($u['apellido']) ?></td>
            <td class="text-start"><?= e($u['correo']) ?></td>
            <td class="text-center"><?= e($u['telefono']) ?></td>
            <td class="text-start"><?= e($u['cargo_usuario']) ?></td>
            <td class="text-center">
              <span class="badge <?= $badge ?> cambiar-estado-usuario" role="button"
                data-id="<?= (int) $u['id_usuario'] ?>"
                data-estado="<?= e($estado) ?>"
                data-motivo="<?= $motivo ?>"
                data-fecha-desde="<?= $fdesde ?>"
                data-modulo="usuarios"
                title="<?= $fdesde ? 'Desde: ' . $fdesde : '' ?>">
                <?= $label ?>
              </span>
            </td>
            <td class="text-center">
              <?php if ($tienePermisoEditar): ?>
                <a href="Adm_Editar_Usuario.php?id=<?= (int) $u['id_usuario'] ?>" class="btn-edit">
                  <i class="bx bx-edit bx-sm text-primary"></i>
                </a>
              <?php endif; ?>
              <?php if ($tienePermisoEliminar): ?>
                <a href="../../Controlador/Ctrl_Administrador/MySQL_Borrar_Usuario.php?id=<?= (int) $u['id_usuario'] ?>"
                  class="btn-delete">
                  <i class="bx bx-trash bx-sm text-danger"></i>
                </a>
              <?php endif; ?>
              <?php if (strtolower($u['cargo_usuario'] ?? '') === 'supervisor'): ?>
                <a href="#" class="btn-permisos" data-id="<?= (int) $u['id_usuario'] ?>">
                  <i class="bx bx-lock bx-sm text-warning"></i>
                </a>
              <?php endif; ?>
            </td>
          </tr>
        <?php endforeach; ?>
      </tbody>
    </table>
  </div>

  <!-- ===================== TARJETAS (<768px) ===================== -->
  <div id="tarjetasResponsive" class="d-md-none">
    <?php foreach ($users as $u): ?>
      <?php
      $estado = strtolower($u['estado']);
      $label  = $estado_labels[$estado] ?? ucfirst($estado);
      $badge  = $estado_badges[$estado] ?? 'bg-dark';
      $motivo = e($u['motivo_estado'] ?? '');
      $fdesde = e($u['fecha_estado_desde'] ?? '');
      ?>
      <div class="card-driver mb-3 shadow-sm">
        <h5><?= e($u['nombre']) . ' ' . e($u['apellido']) ?></h5>
        <p><strong>Usuario:</strong> <?= e($u['usuario']) ?></p>
        <p><strong>Correo:</strong> <?= e($u['correo']) ?></p>
        <p><strong>Teléfono:</strong> <?= e($u['telefono']) ?></p>
        <p><strong>Cargo:</strong> <?= e($u['cargo_usuario']) ?></p>
        <p class="mb-2">
          <strong>Estado:</strong>
          <span class="badge <?= $badge ?> cambiar-estado-usuario" role="button"
            data-id="<?= (int) $u['id_usuario'] ?>"
            data-estado="<?= e($estado) ?>"
            data-motivo="<?= $motivo ?>"
            data-fecha-desde="<?= $fdesde ?>"
            data-modulo="usuarios"
            title="<?= $fdesde ? 'Desde: ' . $fdesde : '' ?>">
            <?= $label ?>
          </span>
        </p>
        <?php if ($motivo): ?>
          <p class="mb-1"><strong>Motivo:</strong> <?= $motivo ?></p>
        <?php endif; ?>
        <div class="btn-group w-100 mt-2">
          <?php if ($tienePermisoEditar): ?>
            <a href="Adm_Editar_Usuario.php?id=<?= (int) $u['id_usuario'] ?>" class="btn btn-primary btn-sm w-50">Editar</a>
          <?php endif; ?>
          <?php if ($tienePermisoEliminar): ?>
            <a href="../../Controlador/Ctrl_Administrador/MySQL_Borrar_Usuario.php?id=<?= (int) $u['id_usuario'] ?>"
              class="btn btn-danger btn-sm w-50">Eliminar</a>
          <?php endif; ?>
        </div>
        <?php if (strtolower($u['cargo_usuario'] ?? '') === 'supervisor'): ?>
          <a href="#" class="btn btn-warning btn-sm mt-2 w-100 btn-permisos"
            data-id="<?= (int) $u['id_usuario'] ?>">Permisos</a>
        <?php endif; ?>
      </div>
    <?php endforeach; ?>
  </div>

  <!-- ===================== MODAL PERMISOS ===================== -->
  <div class="modal fade" id="modalPermisos" tabindex="-1" aria-labelledby="modalPermisosLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
      <div class="modal-content rounded-4 shadow">
        <div class="modal-header bg-primary text-white">
          <h5 class="modal-title" id="modalPermisosLabel">
            <i class='bx bx-lock-alt me-2'></i> Asignar Permisos
          </h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
        </div>
        <div class="modal-body p-4">
          <form id="formPermisos">
            <input type="hidden" name="id_usuario" id="permiso_id_usuario">
            <div class="table-responsive">
              <table class="table table-bordered align-middle text-center">
                <thead class="table-light">
                  <tr>
                    <th>Módulo</th>
                    <th>Agregar</th>
                    <th>Editar</th>
                    <th>Eliminar</th>
                    <th>Reportes</th>
                    <th>Movimientos</th> <!-- NUEVA COLUMNA -->
                    <th>Estado</th>
                  </tr>
                </thead>
                <tbody>
                  <?php
                  $modulos = [
                    'vehiculos'           => 'Vehículos',
                    'choferes'            => 'Conductores',
                    'grifos'              => 'Grifos',
                    'control_combustible' => 'Control Combustible',
                    'rutas'               => 'Rutas',
                    'repuestos'           => 'Repuestos'   // NUEVO MÓDULO
                  ];

                  foreach ($modulos as $key => $modulo) {
                    echo "<tr>";
                    echo "<td class='text-start fw-semibold'>{$modulo}</td>";

                    // Agregar
                    echo "<td><input type='checkbox' class='form-check-input' name='permisos[{$key}][agregar]' value='1'></td>";

                    // Editar
                    echo "<td><input type='checkbox' class='form-check-input' name='permisos[{$key}][editar]' value='1'></td>";

                    // Eliminar
                    echo "<td><input type='checkbox' class='form-check-input' name='permisos[{$key}][eliminar]' value='1'></td>";

                    // Reportes
                    echo "<td><input type='checkbox' class='form-check-input' name='permisos[{$key}][reportes]' value='1'></td>";

                    // Movimientos: solo aplica a REPUESTOS
                    if ($key === 'repuestos') {
                      echo "<td><input type='checkbox' class='form-check-input' name='permisos[{$key}][movimientos]' value='1'></td>";
                    } else {
                      echo "<td></td>";
                    }

                    // Estado → no para control_combustible, rutas ni repuestos
                    if (in_array($key, ['control_combustible', 'rutas', 'repuestos'])) {
                      echo "<td></td>";
                    } else {
                      echo "<td><input type='checkbox' class='form-check-input' name='permisos[{$key}][estado]' value='1'></td>";
                    }

                    echo "</tr>";
                  }
                  ?>
                </tbody>
              </table>
            </div>
            <div class="mt-4 text-end">
              <button type="submit" class="btn btn-primary px-4">
                <i class='bx bx-save me-1'></i> Guardar Permisos
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- ===================== MODAL CAMBIO ESTADO (con fecha) ===================== -->
  <div class="modal fade" id="modalEstadoUsuario" tabindex="-1" aria-labelledby="modalEstadoUsuarioLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content rounded-4 shadow">
        <div class="modal-header bg-primary text-white">
          <h5 class="modal-title" id="modalEstadoUsuarioLabel">
            <i class='bx bx-refresh me-2'></i> Cambiar Estado de Usuario
          </h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" id="estado_id_usuario">

          <div class="mb-3">
            <label for="nuevo_estado" class="form-label">Nuevo estado</label>
            <select id="nuevo_estado" class="form-select">
              <option value="activo">Activ@</option>
              <option value="inactivo">Inactiv@</option>
              <option value="suspendido">Suspendid@</option>
              <option value="bloqueado">Bloquead@</option>
            </select>
          </div>

          <div class="row g-2">
            <div class="col-md-6" id="grp_fecha_cambio" style="display:none;">
              <label for="fecha_cambio" class="form-label">Fecha de cambio</label>
              <input type="date" id="fecha_cambio" class="form-control">
            </div>
            <div class="col-md-6" id="grp_fecha_regreso" style="display:none;">
              <label for="fecha_regreso" class="form-label">Fecha de regreso a ACTIVO</label>
              <input type="date" id="fecha_regreso" class="form-control">
            </div>
          </div>

          <div class="mb-3 mt-2" id="motivo_container" style="display:none;">
            <label for="motivo_estado" class="form-label">Motivo</label>
            <input type="text" id="motivo_estado" class="form-control" maxlength="255" placeholder="Describa el motivo">
          </div>

          <div class="text-end">
            <button id="btnGuardarEstado" class="btn btn-primary" type="button">
              <i class="bx bx-save me-1"></i> Guardar
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

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

  <!-- Notificaciones y módulos -->
  <script src="../../Modelo/Archivos_JS/Notifi_Editar_Usuario.js"></script>
  <script src="../../Modelo/Archivos_JS/Notifi_Eliminar_Usuario.js"></script>
  <script src="../../Modelo/Archivos_JS/DataTable_Usuarios.js"></script>
  <script src="../../Modelo/Archivos_JS/Permisos_Usuarios.js"></script>
  <script src="../../Modelo/Archivos_JS/Gestion_Usuarios.js"></script>

  <!-- Variables globales para JS -->
  <script>
    window.usuariosData        = <?= json_encode($users, JSON_UNESCAPED_UNICODE) ?>;
    window.tienePermisoReportes = <?= $tienePermisoReportes ? 'true' : 'false' ?>;
    window.puedeEditar          = <?= $tienePermisoEditar ? 'true' : 'false' ?>;
    window.puedeEliminar        = <?= $tienePermisoEliminar ? 'true' : 'false' ?>;
    window.puedeEstadoUsuarios  = <?= $tienePermisoEstado ? 'true' : 'false' ?>;
    window.empresaInfo = {
      nombre: 'TRANSPORTES Y SERVICIOS GENERALES JULIA EIRL',
      ruc: '20526269510',
      usuario: <?= json_encode($_SESSION['usuario'] ?? 'Desconocido', JSON_UNESCAPED_UNICODE) ?>,
      cargo: <?= json_encode($_SESSION['rol'] ?? 'Desconocido', JSON_UNESCAPED_UNICODE) ?>
    };
  </script>
</body>

</html>
