@extends('layout.layout')

@php
    $title = 'Tambah Petugas';
    $subTitle = 'Buat Akun Petugas Baru';
@endphp

@section('content')
<div class="max-w-3xl mx-auto">
    <div class="card border-0 shadow-sm">
        <div class="card-header px-6 py-4 border-b">
            <h6 class="text-lg font-semibold text-neutral-800">Form Akun Petugas</h6>
        </div>
        <div class="card-body p-6">
            <form action="{{ route('DataPetugas.store') }}" method="POST">
                @csrf
                <div class="grid grid-cols-1 gap-5">
                    {{-- Nama --}}
                    <div>
                        <label class="block font-semibold text-sm mb-2 text-neutral-600">Nama Lengkap Petugas <span class="text-danger-600">*</span></label>
                        <input type="text" name="name" class="form-control w-full rounded-lg" value="{{ old('name') }}" required placeholder="Contoh: Budi Setiawan">
                        @error('name') <small class="text-danger-600">{{ $message }}</small> @enderror
                    </div>

                    {{-- Email --}}
                    <div>
                        <label class="block font-semibold text-sm mb-2 text-neutral-600">Email (Username Login) <span class="text-danger-600">*</span></label>
                        <input type="email" name="email" class="form-control w-full rounded-lg" value="{{ old('email') }}" required placeholder="email@pamsimas.com">
                    </div>

                    {{-- Password --}}
                    <div>
                        <label class="block font-semibold text-sm mb-2 text-neutral-600">Password Awal <span class="text-danger-600">*</span></label>
                        <input type="password" name="password" class="form-control w-full rounded-lg" required placeholder="Minimal 6 karakter">
                        <small class="text-neutral-400 italic">Berikan password ini kepada petugas agar mereka bisa login.</small>
                    </div>

                    {{-- Dusun (Dropdown) ✅ TAMBAH --}}
                    <div>
                        <label class="block font-semibold text-sm mb-2 text-neutral-600">Dusun <span class="text-danger-600">*</span></label>
                        <select name="dusun" class="form-control w-full rounded-lg form-select" required>
                            <option value="" disabled selected>Pilih Dusun</option>
                            <option value="Dusun Krajan" {{ old('dusun') == 'Dusun Krajan' ? 'selected' : '' }}>Dusun Krajan</option>
                            <option value="Dusun Karangsari" {{ old('dusun') == 'Dusun Karangsari' ? 'selected' : '' }}>Dusun Karangsari</option>
                            <option value="Dusun Kasengan" {{ old('dusun') == 'Dusun Kasengan' ? 'selected' : '' }}>Dusun Kasengan</option>
                            <option value="Dusun Trogo" {{ old('dusun') == 'Dusun Trogo' ? 'selected' : '' }}>Dusun Trogo</option>
                            <option value="Dusun Karang Paiton" {{ old('dusun') == 'Dusun Karang Paiton' ? 'selected' : '' }}>Dusun Karang Paiton</option>
                        </select>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        {{-- No HP --}}
                        <div>
                            <label class="block font-semibold text-sm mb-2 text-neutral-600">No. WhatsApp</label>
                            <input type="text" name="phone_number" class="form-control w-full rounded-lg" value="{{ old('phone_number') }}" placeholder="0812...">
                        </div>
                        {{-- Alamat --}}
                        <div>
                            <label class="block font-semibold text-sm mb-2 text-neutral-600">Alamat (RT/RW)</label>
                            <input type="text" name="address" class="form-control w-full rounded-lg" value="{{ old('address') }}" placeholder="Contoh: RT 02 RW 03">
                        </div>
                    </div>

                    <div class="flex justify-end gap-3 mt-4">
                        <a href="{{ route('DataPetugas') }}" class="px-6 py-2 border rounded-lg hover:bg-gray-50">Batal</a>
                        <button type="submit" class="px-6 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition">Simpan Akun Petugas</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection