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

$provincias = [];

$sqlProv = "SELECT descripcion FROM provincias ORDER BY descripcion";
if ($resProv = $mysqli->query($sqlProv)) {
    while ($rowProv = $resProv->fetch_assoc()) {
        $provincias[] = $rowProv['descripcion'];
    }
    $resProv->free();
}

$alert = null;

$email = $pass = $pass2 = $nombre = $apellido = $cedula = $direccion = $provincia = $telefono = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $email      = trim($_POST['email'] ?? '');
    $pass       = trim($_POST['password'] ?? '');
    $pass2      = trim($_POST['password2'] ?? '');
    $nombre     = trim($_POST['nombre'] ?? '');
    $apellido   = trim($_POST['apellido'] ?? '');
    $cedula     = trim($_POST['cedula'] ?? '');
    $direccion  = trim($_POST['direccion'] ?? '');
    $provincia  = trim($_POST['provincia'] ?? '');
    $telefono   = trim($_POST['telefono'] ?? '');

    if ($email === '' || $pass === '' || $pass2 === '' || $nombre === '') {
        $alert = [
            'icon'  => 'warning',
            'title' => 'Campos requeridos',
            'text'  => 'Completa al menos Email, Contraseña, Confirmar y Nombre.'
        ];
    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $alert = [
            'icon'  => 'warning',
            'title' => 'Email no válido',
            'text'  => 'Por favor ingresa un correo electrónico válido.'
        ];
    } elseif ($pass !== $pass2) {
        $alert = [
            'icon'  => 'error',
            'title' => 'Contraseñas no coinciden',
            'text'  => 'Verifica que la contraseña y la confirmación sean iguales.'
        ];
    } else {
        $sqlCheck = "SELECT idusuario FROM tblusuario WHERE strusuario = ? OR email = ? LIMIT 1";
        $stmtCheck = $mysqli->prepare($sqlCheck);
        if ($stmtCheck) {
            $stmtCheck->bind_param('ss', $email, $email);
            $stmtCheck->execute();
            $resCheck = $stmtCheck->get_result();
            if ($resCheck->fetch_assoc()) {
                $alert = [
                    'icon'  => 'error',
                    'title' => 'Usuario ya registrado',
                    'text'  => 'El correo ingresado ya está registrado. Intenta iniciar sesión.'
                ];
            } else {
                $fecha_vence = date('Y-m-d', strtotime('+1 year'));
                $intnivel    = 1;
                $status      = 1;

                $sqlIns = "INSERT INTO tblusuario 
                    (strnombre, strapellido, strusuario, strpassword, intnivel, fecha_vence, cedula, status, telefono, direccion, email, provincia)
                    VALUES (?,?,?,?,?,?,?,?,?,?,?,?)";

                $stmtIns = $mysqli->prepare($sqlIns);
                if ($stmtIns) {
                    $stmtIns->bind_param(
                        'ssssississss',
                        $nombre,
                        $apellido,
                        $email,      
                        $pass,       
                        $intnivel,
                        $fecha_vence,
                        $cedula,
                        $status,
                        $telefono,
                        $direccion,
                        $email,      
                        $provincia
                    );

                    if ($stmtIns->execute()) {
                        $alert = [
                            'icon'           => 'success',
                            'title'          => 'Registro completado',
                            'text'           => 'Tu cuenta ha sido creada correctamente. Ahora debes iniciar sesión para realizar tus compras.',
                            'redirectLogin'  => true
                        ];
                    } else {
                        $alert = [
                            'icon'  => 'error',
                            'title' => 'Error al registrar',
                            'text'  => 'Ocurrió un error al guardar tus datos. Intenta nuevamente.'
                        ];
                    }
                } else {
                    $alert = [
                        'icon'  => 'error',
                        'title' => 'Error interno',
                        'text'  => 'No se pudo preparar el registro. Intenta más tarde.'
                    ];
                }
            }
        } else {
            $alert = [
                'icon'  => 'error',
                'title' => 'Error interno',
                'text'  => 'No se pudo verificar el usuario. Intenta más tarde.'
            ];
        }
    }
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Registro - 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 REGISTRO */
    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;
    }
    .reg-wrapper{
      width:100%;
      display:flex;
      justify-content:center;
      align-items:center;
    }
	.reg-card{
	  width:100%;
	  max-width:650px;
	  background:var(--blanco);
	  border-radius:18px;
	  padding:22px 22px 24px;
	  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(180px);     /* inicia más abajo */
	  animation:slideUp 0.6s ease-out forwards;
	}
    .reg-title{
      font-size:20px;
      font-weight:700;
      margin-bottom:4px;
      text-align:center;
      color:#111827;
    }
    .reg-sub{
      font-size:13px;
      color:#6b7280;
      margin-bottom:16px;
      text-align:center;
    }
    .section-title{
      margin:12px -22px 8px;
      padding:6px 22px;
      background:#f3f4f6;
      font-weight:600;
      font-size:13px;
      color:#374151;
    }
    .form-row{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }
    .form-group{
      margin-bottom:10px;
    }
    .form-group label{
      display:block;
      font-size:12px;
      margin-bottom:3px;
      color:#4b5563;
    }
    .form-group input,
    .form-group select{
      width:100%;
      padding:10px 9px;
      border-radius:8px;
      border:1px solid var(--gris-borde);
      font-size:13px;
      outline:none;
    }
	/*.form-group input:hover{
		border:6px solid #FFF4F4;
	}*/
    .form-group input:focus,
    .form-group select:focus{
      border-color:var(--mamey);
      box-shadow:0 0 0 1px rgba(225,85,47,.12);
    }
    .btn-reg{
      width:100%;
      margin-top:10px;
      background:var(--mamey);
      color:#fff;
      border:none;
      padding:10px 14px;
      font-weight:700;
      font-size:14px;
      border-radius:12px;
      cursor:pointer;
    }
    .btn-reg:hover{background:var(--mamey-dark);}
    .reg-extra{
      margin-top:10px;
      font-size:12px;
      color:#6b7280;
      text-align:center;
    }
    .reg-extra a{
      color:var(--mamey);
      text-decoration:none;
      font-weight:600;
    }
    .reg-extra a:hover{text-decoration:underline;}

	@keyframes slideUp{
	  from{
		transform:translateY(120px);
		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;}
      .reg-card{max-width:100%;}
    }
    @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">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">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="reg-wrapper">
    <div class="reg-card">
      <div class="reg-title">Crear cuenta</div>
      <div class="reg-sub">Regístrate para realizar tus compras en línea.</div>

      <div class="section-title">Información de ingreso</div>
      <br/>
      <form method="post" autocomplete="off">
        <div class="form-group">
          <label for="email">Email o nombre de usuario</label>
          <input type="email" id="email" name="email" required value="<?= htmlspecialchars($email) ?>">
        </div>
        <br/>
        <div class="form-row">
          <div class="form-group">
            <label for="password">Contraseña</label>
            <input type="password" id="password" name="password" value="<?= htmlspecialchars($pass) ?>" required>
          </div>
          <div class="form-group">
            <label for="password2">Confirmar</label>
            <input type="password" id="password2" name="password2" value="<?= htmlspecialchars($pass2) ?>" required>
          </div>
        </div>

        <div class="section-title">Información de facturación</div>
        <div class="form-row">
          <div class="form-group">
            <label for="nombre">Nombre</label>
            <input type="text" id="nombre" name="nombre" value="<?= htmlspecialchars($apellido) ?>" required>
          </div>
          <div class="form-group">
            <label for="apellido">Apellido</label>
            <input type="text" id="apellido" name="apellido" value="<?= htmlspecialchars($apellido) ?>" required>
          </div>
        </div>
        <div class="form-group">
          <label for="cedula">Cédula</label>
          <input type="text" id="cedula" name="cedula" value="<?= htmlspecialchars($cedula) ?>">
        </div>
        <div class="form-group">
          <label for="direccion">Dirección</label>
          <input type="text" id="direccion" name="direccion" value="<?= htmlspecialchars($direccion) ?>" required>
        </div>
        <div class="form-row">
            <div class="form-group">
              <label for="provincia">Provincia</label>
                <select required id="provincia" name="provincia">
                  <option value="">Seleccione una provincia</option>
                  <?php foreach ($provincias as $prov): ?>
                    <option value="<?= htmlspecialchars($prov) ?>"
                      <?= ($provincia === $prov) ? 'selected' : '' ?>>
                      <?= htmlspecialchars($prov) ?>
                    </option>
                  <?php endforeach; ?>
                </select>

            </div>

          <div class="form-group">
            <label for="telefono">Teléfono</label>
            <input type="text" id="telefono" name="telefono">
          </div>
        </div>

        <button type="submit" class="btn-reg">Registrarme</button>
      </form>

      <div class="reg-extra">
        ¿Ya tienes cuenta? <a href="login">Ingresa 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">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';
      }
    });
  }

  // SweetAlert según $alert
  <?php if ($alert): ?>
  Swal.fire({
    icon: '<?= $alert['icon'] ?>',
    title: '<?= $alert['title'] ?>',
    text: '<?= $alert['text'] ?>',
    confirmButtonColor: '#e1552f'
  }).then((result) => {
    <?php if (!empty($alert['redirectLogin'])): ?>
      window.location.href = 'login';
    <?php endif; ?>
  });
  <?php endif; ?>
</script>
</body>
</html>
