@extends('layouts.admin')
@section('title', 'Tambah User')
@section('page-title', 'Tambah User')

@section('content')
<div class="page-header">
    <div class="page-header-left">
        <div class="breadcrumb">
            <a href="{{ route('admin.dashboard') }}">Dashboard</a>
            <span class="breadcrumb-sep">›</span>
            <a href="{{ route('admin.users.index') }}">User</a>
            <span class="breadcrumb-sep">›</span>
            <span>Tambah</span>
        </div>
        <h1 class="page-header-title">Tambah User Baru</h1>
    </div>
</div>

<div class="card" style="max-width:700px;">
    <div class="card-body">
        <form method="POST" action="{{ route('admin.users.store') }}">
            @csrf

            <div class="form-section">
                <div class="form-section-title">Informasi Akun</div>
                <div class="form-row form-row-2">
                    <div class="form-group mb-0">
                        <label class="form-label">Nama Lengkap <span class="required">*</span></label>
                        <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                            value="{{ old('name') }}" placeholder="Nama lengkap">
                        @error('name')<span class="invalid-feedback">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-group mb-0">
                        <label class="form-label">Username <span class="required">*</span></label>
                        <input type="text" name="username" class="form-control @error('username') is-invalid @enderror"
                            value="{{ old('username') }}" placeholder="Min. 5 karakter">
                        @error('username')<span class="invalid-feedback">{{ $message }}</span>@enderror
                    </div>
                </div>
                <div class="form-group" style="margin-top:16px;">
                    <label class="form-label">Email</label>
                    <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                        value="{{ old('email') }}" placeholder="Opsional">
                    @error('email')<span class="invalid-feedback">{{ $message }}</span>@enderror
                </div>
                <div class="form-row form-row-2">
                    <div class="form-group mb-0">
                        <label class="form-label">Password <span class="required">*</span></label>
                        <input type="password" name="password" class="form-control @error('password') is-invalid @enderror"
                            placeholder="Min. 8 karakter">
                        @error('password')<span class="invalid-feedback">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-group mb-0">
                        <label class="form-label">Konfirmasi Password <span class="required">*</span></label>
                        <input type="password" name="password_confirmation" class="form-control" placeholder="Ulangi password">
                    </div>
                </div>
            </div>

            <div class="form-section">
                <div class="form-section-title">Role & Status</div>
                <div class="form-row form-row-2">
                    <div class="form-group mb-0">
                        <label class="form-label">Role <span class="required">*</span></label>
                        <select name="role" id="roleSelect" class="form-select @error('role') is-invalid @enderror" onchange="handleRoleChange(this.value)">
                            <option value="">— Pilih Role —</option>
                            <option value="admin"    {{ old('role')==='admin'    ? 'selected' : '' }}>Admin</option>
                            <option value="petugas"  {{ old('role')==='petugas'  ? 'selected' : '' }}>Petugas</option>
                            <option value="operator" {{ old('role')==='operator' ? 'selected' : '' }}>Operator</option>
                        </select>
                        @error('role')<span class="invalid-feedback">{{ $message }}</span>@enderror
                    </div>
                    <div class="form-group mb-0">
                        <label class="form-label">Status <span class="required">*</span></label>
                        <select name="status" class="form-select @error('status') is-invalid @enderror">
                            <option value="">— Pilih Status —</option>
                            <option value="aktif"    {{ old('status')==='aktif'    ? 'selected' : '' }}>Aktif</option>
                            <option value="pending"  {{ old('status')==='pending'  ? 'selected' : '' }}>Pending</option>
                            <option value="nonaktif" {{ old('status')==='nonaktif' ? 'selected' : '' }}>Nonaktif</option>
                        </select>
                        @error('status')<span class="invalid-feedback">{{ $message }}</span>@enderror
                    </div>
                </div>
            </div>

            {{-- Operator: pilih desa --}}
            <div class="form-section" id="operatorSection" style="display:none;">
                <div class="form-section-title">Wilayah Operator</div>
                <div class="form-group mb-0">
                    <label class="form-label">Desa / Kelurahan <span class="required">*</span></label>
                    <select name="desa_id" class="form-select @error('desa_id') is-invalid @enderror">
                        <option value="">— Pilih Desa —</option>
                        @foreach($desas as $desa)
                        <option value="{{ $desa->id }}" {{ old('desa_id')==$desa->id ? 'selected' : '' }}>
                            {{ $desa->nama }} ({{ $desa->kecamatan?->nama }})
                        </option>
                        @endforeach
                    </select>
                    @error('desa_id')<span class="invalid-feedback">{{ $message }}</span>@enderror
                </div>
            </div>

            {{-- Petugas: pilih kecamatan --}}
            <div class="form-section" id="petugasSection" style="display:none;">
                <div class="form-section-title">Wilayah Petugas</div>
                <div class="form-group mb-0">
                    <label class="form-label">Kecamatan yang Ditangani</label>
                    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-top:4px;">
                        @foreach($kecamatans as $kec)
                        <label style="display:flex;align-items:center;gap:8px;font-size:.86rem;cursor:pointer;">
                            <input type="checkbox" name="kecamatan[]" value="{{ $kec->id }}"
                                {{ in_array($kec->id, old('kecamatan', [])) ? 'checked' : '' }}
                                style="accent-color:var(--primary);width:16px;height:16px;">
                            {{ $kec->nama }}
                        </label>
                        @endforeach
                    </div>
                </div>
            </div>

            <div style="display:flex;gap:8px;margin-top:4px;">
                <button type="submit" class="btn btn-primary">Simpan User</button>
                <a href="{{ route('admin.users.index') }}" class="btn btn-outline">Batal</a>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
function handleRoleChange(role) {
    document.getElementById('operatorSection').style.display = role === 'operator' ? 'block' : 'none';
    document.getElementById('petugasSection').style.display  = role === 'petugas'  ? 'block' : 'none';
}
// Run on load untuk old() values
handleRoleChange(document.getElementById('roleSelect').value);
</script>
@endpush
@endsection