<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sistema POS | Iniciar Sesión</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <!-- icheck bootstrap -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/icheck-bootstrap/3.0.1/icheck-bootstrap.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/css/adminlte.min.css">
  <!-- Pattern Lock CSS -->
  <link rel="stylesheet" href="<?= base_url() . RECURSOS ?>css/pattern.styl.css">
  
  <style>
    .login-page {
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 20px 0;
    }
    .login-box {
      width: 450px;
    }
    .card-modern {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
      overflow: hidden;
    }
    .card-header-modern {
      background: #fff;
      padding: 40px 20px 20px;
      border: none;
    }
    .logo-container {
      width: 100px;
      height: 100px;
      background: #f8fafc;
      border-radius: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }
    .brand-title {
      font-size: 2.5rem;
      font-weight: 800;
      color: #1e293b;
      letter-spacing: -1.5px;
      margin-bottom: 0;
    }
    .brand-accent {
      color: #2563eb;
    }
    .login-input {
      height: 55px;
      border-radius: 14px;
      border: 2px solid #f1f5f9;
      padding: 0 20px;
      font-weight: 600;
      transition: all 0.3s ease;
    }
    .login-input:focus {
      border-color: #2563eb;
      box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
    }
    .input-group-text {
      background: transparent;
      border: none;
      color: #94a3b8;
    }
    .btn-login {
      height: 55px;
      border-radius: 14px;
      background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
      border: none;
      font-weight: 700;
      letter-spacing: 0.5px;
      box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3);
      transition: all 0.3s ease;
    }
    .btn-login:hover {
      transform: translateY(-2px);
      box-shadow: 0 15px 20px -5px rgba(37, 99, 235, 0.4);
    }
    .user-avatar-polleria {
      width: 80px;
      height: 80px;
      background: #fff;
      border-radius: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      border: 1px solid #e2e8f0;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
      overflow: hidden;
    }
    .user-card {
      cursor: pointer;
      transition: all 0.3s ease;
      padding: 20px;
      border-radius: 20px;
      border: 1px solid transparent;
    }
    .user-card:hover {
      background: #f8fafc;
      border-color: #e2e8f0;
      transform: translateY(-5px);
    }
  </style>
</head>
<body class="hold-transition login-page">
<div class="login-box">
  <!-- Standard Login -->
  <div id="login-section" class="card card-modern">
    <div class="card-header-modern text-center">
      <div class="logo-container">
        <?php 
        $logo_login = (isset($empresa) && $empresa->logo && $empresa->logo != '5dda8da7287e07792b4ce7094f1270c6.png') 
                      ? base_url() . 'files/Setting/' . $empresa->logo 
                      : base_url() . 'assets/adminlte/logo/logo.png';
        ?>
        <img src="<?= $logo_login ?>" alt="Logo" style="width: 85%; height: 85%; object-fit: contain;">
      </div>
      <h1 class="brand-title">Pollería<span class="brand-accent">POS</span></h1>
      <p class="text-muted mt-2">Bienvenido, ingresa tus datos</p>
    </div>

    <div class="card-body px-4 pb-4">
      <?php if(validation_errors()): ?>
        <div class="alert alert-danger border-0 rounded-lg" style="background: #fee2e2; color: #991b1b;">
          <i class="fas fa-exclamation-circle mr-2"></i> <?= validation_errors(); ?>
        </div>
      <?php endif; ?>

      <form action="<?= base_url() ?>login" method="post">
        <div class="form-group mb-4">
          <div class="input-group">
            <input type="text" name="usuario" class="form-control login-input" placeholder="Nombre de usuario" required autofocus>
          </div>
        </div>
        <div class="form-group mb-4">
          <div class="input-group">
            <input type="password" name="password" class="form-control login-input" placeholder="Contraseña" required>
          </div>
        </div>
        <div class="row align-items-center mb-4">
          <div class="col-7">
            <div class="icheck-primary">
              <input type="checkbox" id="remember">
              <label for="remember" class="text-muted small">Mantener sesión iniciada</label>
            </div>
          </div>
          <div class="col-5">
            <button type="submit" class="btn btn-primary btn-block btn-login">INGRESAR</button>
          </div>
        </div>
      </form>

      <div class="text-center mt-4 pt-4 border-top">
        <p class="text-muted small mb-3">O ingresa de forma rápida</p>
        <button type="button" onclick="showUserSelection()" class="btn btn-block btn-outline-primary" style="border-radius: 12px; height: 45px; font-weight: 600;">
          <i class="fas fa-braille mr-2"></i> ACCESO POR PATRÓN
        </button>
      </div>
    </div>
  </div>

  <!-- User Selection -->
  <div id="user-selection" class="card card-modern" style="display: none;">
    <div class="card-header-modern text-center">
      <h3 class="brand-title" style="font-size: 1.8rem;">Elige tu <span class="brand-accent">Usuario</span></h3>
    </div>
    <div class="card-body px-4 pb-4">
      <div class="row text-center">
        <?php if(isset($soporte) && $soporte): ?>
          <div class="col-6 mb-3">
            <div class="user-card" onclick="startPattern('<?= $soporte->id ?>', '<?= $soporte->nombre ?>')">
              <div class="user-avatar-polleria" style="background: #eff6ff;">
                <i class="fas fa-headset fa-2x text-primary"></i>
              </div>
              <p class="mt-3 mb-0 text-dark font-weight-bold" id="nombre_completo<?= $soporte->id ?>"><?= $soporte->nombre ?></p>
              <small class="text-muted">Soporte Técnico</small>
            </div>
          </div>
        <?php endif; ?>
        
        <?php foreach($usuarios as $u): ?>
          <div class="col-6 mb-3">
            <div class="user-card" onclick="startPattern('<?= $u->id ?>', '<?= $u->nombre ?>')">
              <div class="user-avatar-polleria">
                <img src="<?= base_url() ?>assets/adminlte/logo/logo.png" alt="User" style="width: 100%; height: 100%; object-fit: contain;">
              </div>
              <p class="mt-3 mb-0 text-dark font-weight-bold" id="nombre_completo<?= $u->id ?>"><?= $u->nombre ?></p>
              <small class="text-muted"><?= $u->usuario ?></small>
            </div>
          </div>
        <?php endforeach; ?>
      </div>
      <div class="text-center mt-4">
        <button type="button" onclick="showLogin()" class="btn btn-sm btn-link text-muted">Volver al login estándar</button>
      </div>
    </div>
  </div>

  <!-- Pattern Lock Section -->
  <div id="pattern-section" class="card card-modern" style="display: none;">
    <div class="card-header-modern text-center">
        <h3 class="brand-title user-lock-p" style="font-size: 1.8rem;">Usuario</h3>
    </div>
    <div class="card-body px-4 pb-4">
        <!-- Hidden datetime for script compatibility -->
        <div class="mhn-ui-date-time d-none">
            <div class="mhn-ui-day"></div>
            <div class="mhn-ui-date"></div>
            <div class="mhn-ui-time"></div>
        </div>
        
        <div class="mhn-lock-wrap" style="background: transparent;">
            <div class="mhn-lock-title text-muted" data-title="Dibuja tu patrón" style="font-weight: 600;">Dibuja tu patrón</div>
            <div class="mhn-lock"></div>
        </div>
        <div class="text-center mt-4 pt-4 border-top">
            <button type="button" onclick="showUserSelection()" class="btn btn-sm btn-outline-secondary" style="border-radius: 10px;">
              <i class="fas fa-user-friends mr-2"></i> Cambiar de usuario
            </button>
        </div>
    </div>
  </div>

</div>

<input type="hidden" id="url" value="<?= base_url() ?>login">
<input type="hidden" id="codigo" value="">

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
  <script src="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/js/adminlte.min.js"></script>
  
  <!-- favicon dinámico -->
  <script>
    (function() {
      var iconPath = '<?= base_url() ?>assets/adminlte/logo/logo.png';
      var link = document.createElement('link');
      link.type = 'image/png';
      link.rel = 'icon';
      link.href = iconPath;
      document.getElementsByTagName('head')[0].appendChild(link);
      
      var linkShortcut = document.createElement('link');
      linkShortcut.rel = 'shortcut icon';
      linkShortcut.href = iconPath;
      document.getElementsByTagName('head')[0].appendChild(linkShortcut);
    })();
  </script>

<!-- Pattern Lock JS (Bundled version) -->
<script src="<?= base_url() . RECURSOS ?>js/pattern.script.js"></script>

<script>
    function showUserSelection() {
        $('#login-section').hide();
        $('#pattern-section').hide();
        $('#user-selection').fadeIn();
    }

    function showLogin() {
        $('#user-selection').hide();
        $('#pattern-section').hide();
        $('#login-section').fadeIn();
    }

    function startPattern(id, nombre) {
        $('#codigo').val(id);
        $('.user-lock-p').text(nombre);
        $('#user-selection').hide();
        $('#pattern-section').fadeIn();
        
        // El script pattern.script.js maneja mhnUI.lock()
        // Pero necesitamos asegurarnos de que se inicialice correctamente al mostrarse
        if (typeof mhnUI !== 'undefined') {
            mhnUI.lock();
        }
    }
</script>
</body>
</html>
