{{-- resources/views/livewire/register.blade.php --}}
<div class="min-h-screen bg-gradient-to-br from-orange-50 via-amber-50 to-yellow-50 flex items-center justify-center px-4">
  <div class="w-full max-w-lg">
    <div class="bg-white/95 backdrop-blur rounded-2xl shadow-xl border border-amber-100 overflow-hidden">
      <!-- Brand / Header -->
      <div class="px-8 pt-8">
        <div class="flex items-center justify-center gap-4">
          <img src="{{ asset('assets/pemkot.png') }}" alt="Logo Pemerintah Kota" class="h-12 w-12 object-contain" />
          <img src="{{ asset('assets/pendidikan.png') }}" alt="Logo Dinas Pendidikan" class="h-12 w-12 object-contain" />
        </div>

        <h1 class="mt-3 text-center text-lg sm:text-xl font-bold text-gray-800 leading-snug tracking-wide">
          KONSELING <span class="hidden sm:inline">•</span> SMP NEGERI 4 AMBON
        </h1>
        <p class="mt-1 text-center text-sm text-gray-500">Isikan data di bawah untuk membuat akun</p>
      </div>

      @if (session('success'))
        <div class="px-8 mt-4">
          <div class="mb-3 rounded-lg bg-green-50 border border-green-200 text-green-700 text-sm px-3 py-2">
            {{ session('success') }}
          </div>
        </div>
      @endif

      <!-- Error alerts -->
      <div class="px-8 mt-2 space-y-2">
        @error('nama')         <div class="rounded-lg bg-red-50 border border-red-200 text-red-700 text-sm px-3 py-2">{{ $message }}</div> @enderror
        @error('nomor_hp')     <div class="rounded-lg bg-red-50 border border-red-200 text-red-700 text-sm px-3 py-2">{{ $message }}</div> @enderror
        @error('nomor_induk')  <div class="rounded-lg bg-red-50 border border-red-200 text-red-700 text-sm px-3 py-2">{{ $message }}</div> @enderror
        @error('kelas_id')     <div class="rounded-lg bg-red-50 border border-red-200 text-red-700 text-sm px-3 py-2">{{ $message }}</div> @enderror
        @error('foto')         <div class="rounded-lg bg-red-50 border border-red-200 text-red-700 text-sm px-3 py-2">{{ $message }}</div> @enderror
      </div>

      <!-- Form -->
      <form wire:submit.prevent="register" class="px-8 pb-8 pt-2 space-y-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">Nama Lengkap</label>
          <input
            type="text"
            wire:model.defer="nama"
            class="w-full rounded-xl border border-gray-300 focus:border-orange-500 focus:ring-orange-500 p-3 text-gray-800 placeholder-gray-400"
            placeholder="Nama lengkap"
          />
        </div>

        <div class="grid sm:grid-cols-2 gap-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Nomor HP (WA)</label>
            <input
              type="text"
              wire:model.defer="nomor_hp"
              class="w-full rounded-xl border border-gray-300 focus:border-orange-500 focus:ring-orange-500 p-3 text-gray-800 placeholder-gray-400"
              placeholder="08xxxxxxxxxx"
            />
            <p class="text-[11px] text-gray-500 mt-1">Nomor HP harus unik & aktif WhatsApp.</p>
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">NISN</label>
            <input
              type="text"
              wire:model.defer="nomor_induk"
              class="w-full rounded-xl border border-gray-300 focus:border-orange-500 focus:ring-orange-500 p-3 text-gray-800 placeholder-gray-400"
              placeholder="Masukkan NISN yang terdaftar"
            />
            <p class="text-[11px] text-gray-500 mt-1">NISN akan menjadi nomor induk akun Anda.</p>
          </div>
        </div>

        <div class="grid sm:grid-cols-2 gap-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Kelas (opsional)</label>
            <select
              wire:model.defer="kelas_id"
              class="w-full rounded-xl border border-gray-300 focus:border-orange-500 focus:ring-orange-500 p-3 text-gray-800"
            >
              <option value="">— Pilih Kelas —</option>
              @foreach ($kelasList as $k)
                <option value="{{ $k->id }}">{{ $k->nama }}</option>
              @endforeach
            </select>
          </div>

          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Foto (opsional)</label>
            <input
              type="file"
              wire:model="foto"
              accept="image/*"
              class="w-full rounded-xl border border-gray-300 focus:border-orange-500 focus:ring-orange-500 p-3 text-gray-800"
            />
          </div>
        </div>

        <button
          type="submit"
          wire:loading.attr="disabled"
          class="w-full inline-flex items-center justify-center rounded-xl bg-orange-600 text-white font-medium py-3 hover:bg-orange-700 transition shadow-sm disabled:opacity-60 disabled:cursor-not-allowed"
        >
          <span wire:loading.remove>Daftarkan Akun</span>
          <span wire:loading>Memproses…</span>
        </button>

        <div class="text-center text-xs text-gray-500 mt-2">
          Sudah punya akun?
          <a href="{{ route('login') }}" class="text-orange-600 hover:underline">Masuk di sini</a>
        </div>
      </form>
    </div>
  </div>
</div>