<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Registrasi INUFA</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Poppins', sans-serif;
    }
    .login-gradient {
      background: linear-gradient(135deg, #1e3a8a 0%, #0F172A 100%);
    }
    .input-field:focus {
      border-color: #1e3a8a;
      box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.2);
    }
  </style>
</head>
<body class="bg-gray-50 min-h-screen">
  <div class="flex flex-col md:flex-row w-full h-screen">
    
    <!-- Left Panel: Brand & Info -->
    <div class="hidden md:flex md:w-1/2 login-gradient text-white flex-col justify-between p-12">
      <div>
        <h1 class="text-4xl font-bold mb-2">INUFA</h1>
        <p class="text-blue-200">Solusi Perlengkapan Event Terbaik</p>
      </div>
      
      <div class="mb-8">
        <div class="mb-10">
          <img src="{{ asset('assets/images/logo.png') }}" alt="INUFA Logo" class="w-48 mx-auto">
        </div>
        <h2 class="text-2xl font-semibold mb-6">Bergabung dengan INUFA</h2>
        <p class="text-blue-200 leading-relaxed">
          Dengan menjadi bagian dari INUFA, Anda memperoleh akses ke berbagai peralatan acara berkualitas dengan harga terjangkau.
        </p>
        
        <div class="mt-10">
          <div class="flex items-center space-x-3">
            <div class="h-10 w-10 rounded-full bg-blue-700 flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
              </svg>
            </div>
            <span>Pendaftaran mudah dan cepat</span>
          </div>
          <div class="flex items-center space-x-3 mt-3">
            <div class="h-10 w-10 rounded-full bg-blue-700 flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
              </svg>
            </div>
            <span>Akses ke katalog lengkap</span>
          </div>
          <div class="flex items-center space-x-3 mt-3">
            <div class="h-10 w-10 rounded-full bg-blue-700 flex items-center justify-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
              </svg>
            </div>
            <span>Riwayat pemesanan terintegrasi</span>
          </div>
        </div>
      </div>
      
      <div class="text-sm text-blue-200">
        &copy; {{ date('Y') }} INUFA. Hak Cipta Dilindungi.
      </div>
    </div>

    <!-- Right Panel: Form Registrasi -->
    <div class="w-full md:w-1/2 flex items-center justify-center p-6 md:p-10 bg-white">
      <div class="w-full max-w-md">
        <div class="md:hidden flex justify-center mb-6">
          <img src="{{ asset('assets/images/logo.png') }}" alt="INUFA Logo" class="w-32">
        </div>
        
        <h2 class="text-2xl font-bold text-gray-800 mb-1">Daftar Akun</h2>
        <p class="text-gray-600 mb-4 text-sm">Buat akun untuk mengakses layanan INUFA</p>
        
        @if($errors->any())
        <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-4">
          <div class="flex">
            <div class="flex-shrink-0">
              <svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
              </svg>
            </div>
            <div class="ml-3">
              <h3 class="text-sm font-medium text-red-800">
                Terdapat beberapa kesalahan:
              </h3>
              <div class="mt-2 text-sm text-red-700">
                <ul class="list-disc pl-5 space-y-1">
                  @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                  @endforeach
                </ul>
              </div>
            </div>
          </div>
        </div>
        @endif
        
        <form action="{{ route('register.post') }}" method="POST" class="space-y-3">
          @csrf
          @if(request()->has('paket_id'))
            <input type="hidden" name="paket_id" value="{{ request()->paket_id }}">
          @endif

          <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
            <!-- Nama -->
            <div>
              <label for="nama" class="text-xs font-medium text-gray-700 block mb-1">Nama Lengkap</label>
              <div class="relative">
                <span class="absolute inset-y-0 left-2 flex items-center text-gray-500">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                  </svg>
                </span>
                <input type="text" id="nama" name="nama" value="{{ old('nama') }}" placeholder="Masukkan nama lengkap" class="input-field pl-8 pr-3 py-2 w-full rounded-lg border border-gray-300 focus:outline-none text-sm @error('nama') border-red-500 @enderror">
              </div>
            </div>

            <!-- Username -->
            <div>
              <label for="username" class="text-xs font-medium text-gray-700 block mb-1">Username</label>
              <div class="relative">
                <span class="absolute inset-y-0 left-2 flex items-center text-gray-500">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                  </svg>
                </span>
                <input type="text" id="username" name="username" value="{{ old('username') }}" placeholder="Masukkan username" class="input-field pl-8 pr-3 py-2 w-full rounded-lg border border-gray-300 focus:outline-none text-sm @error('username') border-red-500 @enderror">
              </div>
            </div>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
            <!-- Email -->
            <div>
              <label for="email" class="text-xs font-medium text-gray-700 block mb-1">Email</label>
              <div class="relative">
                <span class="absolute inset-y-0 left-2 flex items-center text-gray-500">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                  </svg>
                </span>
                <input type="email" id="email" name="email" value="{{ old('email') }}" placeholder="Masukkan email" class="input-field pl-8 pr-3 py-2 w-full rounded-lg border border-gray-300 focus:outline-none text-sm @error('email') border-red-500 @enderror">
              </div>
            </div>

            <!-- No Telp -->
            <div>
              <label for="no_telp" class="text-xs font-medium text-gray-700 block mb-1">No. Telepon</label>
              <div class="relative">
                <span class="absolute inset-y-0 left-2 flex items-center text-gray-500">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                  </svg>
                </span>
                <input type="text" id="no_telp" name="no_telp" value="{{ old('no_telp') }}" placeholder="Masukkan nomor telepon" class="input-field pl-8 pr-3 py-2 w-full rounded-lg border border-gray-300 focus:outline-none text-sm @error('no_telp') border-red-500 @enderror">
              </div>
            </div>
          </div>

          <!-- Alamat -->
          <div>
            <label for="alamat" class="text-xs font-medium text-gray-700 block mb-1">Alamat</label>
            <div class="relative">
              <span class="absolute top-2 left-2 flex items-center text-gray-500">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
              </span>
              <textarea id="alamat" name="alamat" rows="2" placeholder="Masukkan alamat lengkap" class="input-field pl-8 pr-3 py-2 w-full rounded-lg border border-gray-300 focus:outline-none text-sm @error('alamat') border-red-500 @enderror">{{ old('alamat') }}</textarea>
            </div>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
            <!-- Password -->
            <div>
              <label for="password" class="text-xs font-medium text-gray-700 block mb-1">Password</label>
              <div class="relative">
                <span class="absolute inset-y-0 left-2 flex items-center text-gray-500">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                  </svg>
                </span>
                <input type="password" id="password" name="password" placeholder="Masukkan password" class="input-field pl-8 pr-3 py-2 w-full rounded-lg border border-gray-300 focus:outline-none text-sm @error('password') border-red-500 @enderror">
              </div>
            </div>

            <!-- Konfirmasi Password -->
            <div>
              <label for="password_confirmation" class="text-xs font-medium text-gray-700 block mb-1">Konfirmasi Password</label>
              <div class="relative">
                <span class="absolute inset-y-0 left-2 flex items-center text-gray-500">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                  </svg>
                </span>
                <input type="password" id="password_confirmation" name="password_confirmation" placeholder="Konfirmasi password" class="input-field pl-8 pr-3 py-2 w-full rounded-lg border border-gray-300 focus:outline-none text-sm">
              </div>
            </div>
          </div>

          <!-- Persetujuan -->
          <div class="flex items-start mt-1">
            <input type="checkbox" id="agree" name="agree" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded mt-0.5 @error('agree') border-red-500 @enderror">
            <label for="agree" class="ml-2 block text-xs text-gray-700">
              Saya menyetujui Syarat dan Ketentuan serta Kebijakan Privasi
            </label>
          </div>

          <!-- Tombol Daftar -->
          <button type="submit" class="w-full bg-[#1e3a8a] text-white py-2.5 px-4 rounded-lg font-medium hover:bg-blue-800 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 mt-2">
            Daftar Sekarang
          </button>
        </form>

        <!-- Divider -->
        <div class="flex items-center my-3">
          <div class="flex-grow border-t border-gray-300"></div>
          <span class="flex-shrink mx-3 text-gray-500 text-xs">atau</span>
          <div class="flex-grow border-t border-gray-300"></div>
        </div>

        <!-- Link kembali ke login -->
        <p class="text-center text-gray-600 text-sm">
          Sudah memiliki akun? 
          <a href="{{ route('login') }}" class="font-medium text-blue-700 hover:text-blue-800">
            Masuk sekarang
          </a>
        </p>
      </div>
    </div>
  </div>
</body>
</html>
