<?php
session_start();
require_once('Connections/conexionabm.php');

$alert = null;

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $usuario  = trim($_POST['usuario'] ?? '');
    $password = trim($_POST['password'] ?? '');

    if ($usuario === '' || $password === '') {
        $alert = [
            'icon'  => 'warning',
            'title' => 'Datos incompletos',
            'text'  => 'Por favor ingresa tu usuario y contraseña.'
        ];
    } else {
        $sql = "SELECT idusuario,strnombre,strapellido,strusuario,strpassword,intnivel,fecha_vence,cedula,status
                FROM tblusuario
                WHERE strusuario = ?
                LIMIT 1";
        $stmt = $mysqli->prepare($sql);
        if ($stmt) {
            $stmt->bind_param('s', $usuario);
            $stmt->execute();
            $res = $stmt->get_result();
            $user = $res->fetch_assoc();

            if (!$user) {
                // Usuario no existe
                $alert = [
                    'icon'  => 'error',
                    'title' => 'Usuario no existe',
                    'text'  => 'Verifica tu usuario o regístrate para continuar.'
                ];
            } else {
                // Verificar estado
                if ((string)$user['status'] === '0') {
                    $alert = [
                        'icon'  => 'warning',
                        'title' => 'Usuario deshabilitado',
                        'text'  => 'Tu usuario está deshabilitado. Comunícate con el administrador del sistema.'
                    ];
                } else {
                    // Comparación directa (ajusta a hash si luego encriptas)
                    if ($user['strpassword'] !== $password) {
                        $alert = [
                            'icon'  => 'error',
                            'title' => 'Credenciales incorrectas',
                            'text'  => 'Usuario o contraseña incorrectos.'
                        ];
                    } else {
                        // Login correcto: guardamos datos en sesión
                        $_SESSION['id_cliente']        = $user['idusuario'];
                        $_SESSION['nombre_cliente']    = $user['strnombre'];
                        $_SESSION['apellido_cliente']  = $user['strapellido'];
                        $_SESSION['usuario_cliente']   = $user['strusuario'];
                        $_SESSION['nivel_cliente']     = $user['intnivel'];

						$alert = [
							'icon'     => 'success',
							'title'    => '¡Bienvenido, ' . $user['strnombre'] . '!',
							'text'     => 'Has iniciado sesión correctamente. Ahora puedes realizar la compra que desees.',
							'redirect' => true
						];
                    }
                }
            }
        } else {
            $alert = [
                'icon'  => 'error',
                'title' => 'Error interno',
                'text'  => 'No se pudo procesar el inicio de sesión. Intenta nuevamente.'
            ];
        }
    }
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Iniciar sesión - Supermercado Dragón de Oro</title>
  <style>
    :root{
      --rojo:#ff0000;
      --mamey:#e1552f;
      --mamey-dark:#c14425;
      --gris:#f3f4f6;
      --gris-borde:#e5e7eb;
      --texto:#111827;
      --blanco:#ffffff;
      --header-h:118px;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    body{
      font-family:Arial,sans-serif;
      color:var(--texto);
      background:#F9FBFB;
    }
    header{
      position:fixed;top:0;left:0;right:0;z-index:1000;
      background:var(--blanco);box-shadow:0 1px 6px rgba(0,0,0,.08);
    }
    .topbar{
      background:var(--rojo);color:#fff;
      display:grid;
      grid-template-columns:minmax(0,1.4fr) minmax(0,1.6fr) auto;
      align-items:center;gap:16px;
      padding:6px 24px;font-size:13px;
    }
    .top-left{display:flex;align-items:center;gap:20px;white-space:nowrap;}
    .top-left span{display:flex;align-items:center;gap:6px;}
    .top-search{display:flex;justify-content:center;}
    .top-search input{
      width:100%;max-width:420px;height:30px;
      border-radius:999px;border:none;
      padding:0 14px;font-size:13px;outline:none;color:#111;
    }
    .top-right{display:flex;justify-content:flex-end;gap:14px;font-size:16px;}
    .top-right a{color:#fff;text-decoration:none;}

    .nav-white{
      background:#fff;
      display:flex;align-items:center;justify-content:space-between;
      padding:12px 40px 10px;
    }
    .logo-wrap{display:flex;align-items:center;gap:10px;}
    .logo-wrap img{height:55px;width:auto;display:block;}
    .main-menu{
      display:flex;align-items:center;gap:26px;
      font-size:14px;font-weight:500;
      text-transform:uppercase;letter-spacing:.4px;
    }
    .main-menu a{
      color:#111;text-decoration:none;
      padding-bottom:4px;border-bottom:2px solid transparent;
    }
    .main-menu a:hover,
    .main-menu a.activo{
      color:var(--mamey);border-bottom-color:var(--mamey);
    }
    .cuenta-wrap{position:relative;display:inline-flex;align-items:center;}
    .btn-cuenta{
      background:transparent;border:none;cursor:pointer;
      font:inherit;color:#111;text-transform:uppercase;
      display:flex;align-items:center;gap:4px;
      padding-bottom:4px;border-bottom:2px solid transparent;
    }
    .btn-cuenta:hover{
      color:var(--mamey);border-bottom-color:var(--mamey);
    }
    .dropdown{
      position:absolute;right:0;top:120%;
      width:210px;background:#fff;
      border:1px solid var(--gris-borde);
      border-radius:12px;
      box-shadow:0 16px 35px rgba(0,0,0,.14);
      display:none;overflow:hidden;z-index:1200;
    }
    .dropdown a{
      display:block;padding:10px 14px;
      text-decoration:none;color:#111;
      font-weight:600;font-size:13px;
    }
    .dropdown a:hover{background:#f9fafb;}
    .dropdown .divider{height:1px;background:#e5e7eb;}

    .cart-mini-wrap{
      display:flex;align-items:center;gap:6px;cursor:pointer;
    }
    .cart-mini-wrap img{height:22px;width:auto;display:block;}
    .cart-mini-count{
      font-size:12px;font-weight:700;color:var(--mamey);
    }

    /* CONTENEDOR LOGIN */
    main{
      max-width:1300px;
      margin:0 auto;
      padding:calc(var(--header-h) + 40px) 16px 40px;
      min-height:calc(100vh - var(--header-h) - 180px);
      display:flex;
      justify-content:center;
      align-items:flex-start;
    }
    .login-wrapper{
      width:100%;
      display:flex;
      justify-content:center;
      align-items:center;
    }
    .login-card{
      width:100%;
      max-width:450px;
      background:var(--blanco);
      border-radius:18px;
      padding:24px 22px 22px;
      box-shadow:0 18px 40px rgba(15,23,42,.18);
      border:1px solid var(--gris-borde);

	  /* ANIMACIÓN MÁS MARCADA */
	  opacity:0;                       /* inicia invisible */
	  transform:translateY(200px);     /* inicia más abajo */
  	  animation:slideUp 0.4s ease-out forwards;
      /*animation:slideUp 1s ease-out;*/
    }
    .login-title{
      font-size:20px;
      font-weight:700;
      margin-bottom:4px;
      text-align:center;
      color:#111827;
    }
    .login-sub{
      font-size:13px;
      color:#6b7280;
      margin-bottom:18px;
      text-align:center;
    }
    .form-group{
      margin-bottom:12px;
    }
    .form-group label{
      display:block;
      font-size:13px;
      margin-bottom:4px;
      color:#4b5563;
    }
    .form-group input{
      width:100%;
      padding:12px 10px;
      border-radius:10px;
      border:1px solid var(--gris-borde);
      font-size:14px;
      outline:none;
    }
    .form-group input:focus{
      border-color:var(--mamey);
      box-shadow:0 0 0 1px rgba(225,85,47,.15);
    }
    .btn-login{
      width:100%;
      margin-top:6px;
      background:var(--mamey);
      color:#fff;
      border:none;
      padding:10px 14px;
      font-weight:700;
      font-size:14px;
      border-radius:12px;
      cursor:pointer;
    }
    .btn-login:hover{
      background:var(--mamey-dark);
    }
    .login-extra{
      margin-top:10px;
      font-size:12px;
      color:#6b7280;
      text-align:center;
    }
    .login-extra a{
      color:var(--mamey);
      text-decoration:none;
      font-weight:600;
      cursor:pointer;
    }
    .login-extra a:hover{text-decoration:underline;}

	@keyframes slideUp{
	  from{
		transform:translateY(120px);
		opacity:0;
	  }
	  to{
		transform:translateY(0);
		opacity:1;
	  }
	}
    /*@keyframes slideUp{
      from{
        transform:translateY(40px);
        opacity:0;
      }
      to{
        transform:translateY(0);
        opacity:1;
      }
    }*/

    footer{
      background:#0f172a;color:#e2e8f0;
    }
    .foot-wrap{
      max-width:1300px;margin:0 auto;
      padding:32px 16px 26px;
      display:grid;gap:24px;
      grid-template-columns:2fr 1fr 1.3fr 1.5fr;
      font-size:14px;
    }
    .foot-title{font-weight:800;margin-bottom:10px;}
    .foot-links a{
      display:block;color:#e2e8f0;
      text-decoration:none;padding:4px 0;
      font-size:13px;
    }
    .foot-links a:hover{text-decoration:underline;}
    .boletin input{
      width:100%;height:38px;border-radius:10px;
      border:1px solid #334155;background:#0b1220;
      color:#e2e8f0;padding:0 10px;
      margin-bottom:6px;font-size:13px;
    }
    .btn-sub{
      width:100%;height:38px;border-radius:10px;
      border:none;background:var(--mamey);
      color:#fff;font-weight:700;
      cursor:pointer;font-size:13px;
    }
    .foot-copy{
      border-top:1px solid #1f2937;
      text-align:center;padding:10px;
      font-size:12px;color:#94a3b8;
    }

    @media(max-width:900px){
      .nav-white{
        flex-direction:column;
        align-items:flex-start;
        padding:8px 16px 10px;
      }
      .main-menu{
        flex-wrap:wrap;
        gap:14px;
        margin-top:4px;
        font-size:12px;
      }
      main{
        padding:calc(var(--header-h) + 26px) 12px 32px;
      }
      .foot-wrap{grid-template-columns:1fr 1fr;}
    }
    @media(max-width:560px){
      .foot-wrap{grid-template-columns:1fr;}
    }
  </style>

  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>
<header>
  <div class="topbar">
    <div class="top-left">
      <span>📞 (809) 533-9616</span>
      <span>✉️ info@supermercadodragondeoro.com</span>
    </div>
    <div class="top-search">
      <input type="search" placeholder="Buscar" disabled style="opacity:.3;cursor:not-allowed">
    </div>
    <div class="top-right">
      <a href="#" aria-label="Facebook">f</a>
      <a href="#" aria-label="Instagram">◎</a>
    </div>
  </div>
  <div class="nav-white">
    <div class="logo-wrap">
      <a href="#"><img src="images/logo_dragon1.png" alt="Supermercado Dragón de Oro" onClick="location='index'"></a>
    </div>
    <nav class="main-menu">
      <a href="index.php">Inicio</a>
      <a href="#">Nosotros</a>
      <a href="#">Ofertas</a>
      <a href="#">Contactos</a>
      <div class="cuenta-wrap">
        <button class="btn-cuenta" id="btnCuenta">Mi Cuenta ▾</button>
        <div class="dropdown" id="menuCuenta">
          <a href="login.php">Ingresar</a>
          <div class="divider"></div>
          <a href="registro">Registrarme</a>
        </div>
      </div>
      <div class="cart-mini-wrap" onclick="window.location.href='carrito'">
        <img src="images/carrito_compra4.png" alt="Carrito de compras">
        <div class="cart-mini-count">0</div>
      </div>
    </nav>
  </div>
</header>

<main>
  <div class="login-wrapper">
    <div class="login-card">
      <div class="login-title">Iniciar sesión</div>
      <div class="login-sub">Accede a tu cuenta para comenzar a comprar</div>
     
      <form method="post" autocomplete="off">
        <br/>
        <div class="form-group">
          <input type="text" id="usuario" name="usuario" placeholder="Nombre de usuario" required>
        </div>
        <div class="form-group">
          <input type="password" id="password" name="password" placeholder="Contraseña" required>
        </div>
        <br/>
        <button type="submit" class="btn-login">Ingresar</button>
      </form>
      <div class="login-extra">
        <a id="forgotLink">¿Olvidaste tu contraseña?</a>
      </div>
      <div class="login-extra">
        ¿No tienes cuenta? <a href="registro">Regístrate aquí</a>
      </div>
    </div>
  </div>
</main>

<footer>
  <div class="foot-wrap">
    <div>
      <div class="foot-title">Dragón de Oro</div>
      <div style="line-height:1.6;color:#cbd5e1;">
        Desde 1989 trabajamos para brindar excelencia y atención a nuestros clientes.
      </div>
    </div>
    <div class="foot-links">
      <div class="foot-title">Enlaces directos</div>
      <a href="index.php">Inicio</a>
      <a href="#">Nosotros</a>
      <a href="#">Ofertas</a>
      <a href="#">Contactos</a>
    </div>
    <div class="boletin">
      <div class="foot-title">Suscribirme al boletín</div>
      <input type="text" placeholder="Nombre completo">
      <input type="email" placeholder="Correo electrónico">
      <button class="btn-sub">Suscribirme</button>
    </div>
    <div>
      <div class="foot-title">Contactos</div>
      <div style="font-size:13px;color:#cbd5e1;line-height:1.7;">
        Av. Rómulo Betancourt 1351, Santo Domingo<br>
        (809) 533-9616<br>
        info@supermercadodragondeoro.com
      </div>
      <div class="foot-title" style="margin-top:12px;">Redes Sociales</div>
      <div>Facebook · Instagram</div>
    </div>
  </div>
  <div class="foot-copy">© 2025 Supermercado Dragón de Oro. Todos los derechos reservados.</div>
</footer>

<script>
  // Toggle menú "Mi Cuenta"
  const btnCuenta = document.getElementById('btnCuenta');
  const menuCuenta = document.getElementById('menuCuenta');
  if (btnCuenta && menuCuenta) {
    btnCuenta.addEventListener('click', () => {
      const show = menuCuenta.style.display !== 'block';
      menuCuenta.style.display = show ? 'block' : 'none';
    });
    document.addEventListener('click', e => {
      if (!menuCuenta.contains(e.target) && !btnCuenta.contains(e.target)) {
        menuCuenta.style.display = 'none';
      }
    });
  }

  // Olvidó contraseña → recomendación SweetAlert2
  const forgotLink = document.getElementById('forgotLink');
  if (forgotLink) {
    forgotLink.addEventListener('click', (e) => {
      e.preventDefault();
      Swal.fire({
        icon: 'info',
        title: '¿Olvidaste tu contraseña?',
        html: `
          <p style="font-size:14px;line-height:1.6;">
            Por seguridad, la recuperación de contraseña se realiza a través de nuestro equipo.
            <br><br>
            Comunícate con:
            <br><strong>Soporte Dragón de Oro</strong>
            <br>Tel: (809) 533-9616
            <br>Email: info@supermercadodragondeoro.com
          </p>
        `,
        confirmButtonText: 'Entendido',
        confirmButtonColor: '#e1552f'
      });
    });
  }

  // Mostrar alertas PHP (si hubo error)
	<?php if ($alert): ?>
	Swal.fire({
	  icon: '<?= $alert['icon'] ?>',
	  title: '<?= $alert['title'] ?>',
	  text: '<?= $alert['text'] ?>',
	  confirmButtonColor: '#e1552f'
	}).then((result) => {
	  <?php if (!empty($alert['redirect'])): ?>
		// Después del OK (o cerrar), mandamos al inicio
		window.location.href = 'index.php';
	  <?php endif; ?>
	});
	<?php endif; ?>
</script>
</body>
</html>
