<?php
// 1. Jalankan session sekali saja di baris paling atas
session_start();

// 2. Konfigurasi error reporting
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

// 3. Panggil file fungsi (cukup sekali, pastikan path-nya benar)
require_once 'function.php'; // atau '../inc/function.php' tergantung posisi file ini

// 4. Cek apakah user sudah terlanjur login
if (isset($_SESSION['email']) && isset($_SESSION['role'])) {
    if ($_SESSION['role'] == "Admin" || $_SESSION['role'] == "1") {
        header("location: ../admin/index.php");
        exit;
    } elseif ($_SESSION['role'] == "Petugas" || $_SESSION['role'] == "2") {
        header("location: ../pages/petugas/index.php");
        exit;
    } elseif ($_SESSION['role'] == "Pengawas" || $_SESSION['role'] == "3") {
        header("location: ../pages/pengawas/index.php");
        exit;
    }
}

// 5. Proses saat tombol registrasi ditekan
if (isset($_POST["registrasi"])) {
    $password         = $_POST["password"];
    $confirm_password = $_POST["confirm_password"];
    
    if ($password !== $confirm_password) {
        echo "<script>
            alert('Password yang Anda masukkan tidak sesuai!');
        </script>";
    } else {
        // Jalankan fungsi registrasi
        $result = registrasi($_POST);

        if ($result > 0) {
            echo "<script>
                alert('User admin baru berhasil ditambahkan!');
                document.location.href='login.php';
            </script>";
        } else {
            echo "<script>alert('Gagal menambahkan user!');</script>";
        }
    }
}

// 6. Autonumber untuk ID User
$id_autonumber = "";
try {
    if (function_exists('autonumber')) {
        $id_autonumber = autonumber('tbl_users', 'id_user', 7, 'ADM');
    }
} catch (Exception $e) {
    $id_autonumber = "ADM0000001";
}
?>

<!DOCTYPE html>
<html lang="id" class="h-full">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Sign Up - Keen</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://unpkg.com/lucide@latest"></script>
  <style>
    body { font-family: 'Inter', sans-serif; }
  </style>
</head>
<body class="h-full w-full bg-gray-100 font-sans antialiased">

  <div class="w-full h-full min-h-screen flex flex-col md:flex-row">
    
    <div 
      class="w-full md:w-3/5 min-h-[250px] md:min-h-full bg-cover bg-center relative"
      style="background-image: url('https://i.pinimg.com/736x/dd/f1/1c/ddf11c706f09c81d9dd71a2e87af8f4a.jpg');" 
    >
      <div class="absolute inset-0 bg-black/10"></div>
    </div>

    <div class="w-full md:w-2/5 bg-white p-8 md:p-12 flex flex-col justify-between border-l border-gray-200">
      
      <div class="max-w-sm w-full mx-auto my-auto">
        
        <div class="text-center mb-6">
          <h1 class="text-3xl font-bold text-gray-900">Sign Up</h1>
          <p class="text-xs text-gray-400 mt-1">Your Social Campaigns</p>
          <span class="inline-block text-xs text-gray-400 mt-4">Or with email</span>
        </div>

        <form method="POST" action="" class="flex flex-col gap-3">
          
          <div>
            <label class="block text-xs text-gray-500 mb-1 font-medium">ID User</label>
            <input 
              type="hidden" 
              name="id_user"
              class="w-full px-4 py-3 text-sm bg-gray-50 border border-gray-300 rounded-xl focus:outline-none focus:border-blue-500 focus:bg-white transition" 
              value="<?= $id_autonumber; ?>"
              readonly
            />
          </div>

          <div>
            <label class="block text-xs text-gray-500 mb-1 font-medium">Email</label>
            <input 
              type="email" 
              name="email"
              placeholder="Masukkan Email" 
              class="w-full px-4 py-3 text-sm bg-gray-50 border border-gray-300 rounded-xl focus:outline-none focus:border-blue-500 focus:bg-white transition" 
              required
            />
          </div>

          <div>
            <label class="block text-xs text-gray-500 mb-1 font-medium">Password</label>
            <input 
              type="password" 
              name="password"
              placeholder="Isi Password" 
              class="w-full px-4 py-3 text-sm bg-gray-50 border border-gray-300 rounded-xl focus:outline-none focus:border-blue-500 focus:bg-white transition" 
              required
            />
          </div>

          <div>
            <label class="block text-xs text-gray-500 mb-1 font-medium">Konfirmasi Password</label>
            <div class="relative">
              <input 
                type="password" 
                name="confirm_password"
                placeholder="Confirm Password" 
                class="w-full px-4 py-3 text-sm bg-gray-50 border border-gray-300 rounded-xl focus:outline-none focus:border-blue-500 focus:bg-white transition pr-10" 
                required
              />
              <button type="button" class="absolute right-3 top-3.5 text-gray-400 hover:text-gray-600">
                <i data-lucide="eye-off" class="w-4 h-4"></i>
              </button>
            </div>
          </div>

          <p class="text-[11px] text-gray-400 pl-1 leading-tight mt-1">
            Gunakan 8 karakter atau lebih dengan kombinasi huruf & angka.
          </p>

          <div class="flex items-center gap-2 my-1">
            <input 
              type="checkbox" 
              id="terms" 
              name="terms"
              class="w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500 cursor-pointer"
              required
            />
            <label for="terms" class="text-xs text-gray-500 cursor-pointer">
              I Accept the <a href="#" class="text-blue-600 font-semibold hover:underline">Terms</a>
            </label>
          </div>

          <button 
            type="submit" 
            name="registrasi"
            class="w-full bg-[#0066FF] hover:bg-blue-700 text-white font-medium py-3 rounded-xl text-sm transition shadow-md hover:shadow-lg mt-2"
          >
            Sign up
          </button>
        </form>
              
        <div class="text-center mt-6">
          <p class="text-xs text-gray-400">
            Already have an Account? 
            <a href="login.php" class="text-blue-600 font-semibold hover:underline">Login</a>
          </p>
        </div>
      </div>

      <div class="flex justify-center gap-6 text-xs text-blue-500 pt-6">
        <a href="#" class="hover:underline">Terms</a>
        <a href="#" class="hover:underline">Plans</a>
        <a href="#" class="hover:underline">Contact Us</a>
      </div>

    </div>

  </div>

  <script>
    lucide.createIcons();
  </script>
</body>
</html>