@extends('layouts.auth')
@section('title', 'Daftar Akun Operator')

@section('content')
<form method="POST" action="{{ route('register.store') }}">
    @csrf

    <div class="form-group">
        <label class="form-label">Nama Lengkap</label>
        <div class="input-wrap">
            <span class="input-icon">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="16" height="16"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" /></svg>
            </span>
            <input type="text" name="name"
                class="form-control @error('name') is-invalid @enderror"
                placeholder="Nama lengkap" value="{{ old('name') }}" autofocus>
        </div>
        @error('name')<span class="invalid-feedback">{{ $message }}</span>@enderror
    </div>

    <div class="form-group">
        <label class="form-label">Username</label>
        <div class="input-wrap">
            <span class="input-icon">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="16" height="16"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25" /></svg>
            </span>
            <input type="text" name="username"
                class="form-control @error('username') is-invalid @enderror"
                placeholder="Min. 5 karakter" value="{{ old('username') }}">
        </div>
        @error('username')<span class="invalid-feedback">{{ $message }}</span>@enderror
    </div>

    <div class="form-group">
        <label class="form-label">
            Email
            <span style="color:var(--gray-400);font-weight:400;text-transform:none;font-size:.72rem;">(opsional)</span>
        </label>
        <div class="input-wrap">
            <span class="input-icon">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="16" height="16"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" /></svg>
            </span>
            <input type="email" name="email"
                class="form-control @error('email') is-invalid @enderror"
                placeholder="Alamat email" value="{{ old('email') }}">
        </div>
        @error('email')<span class="invalid-feedback">{{ $message }}</span>@enderror
    </div>

    {{-- Pilih Desa --}}
    <div class="form-group">
        <label class="form-label">Desa / Kelurahan</label>
        <div class="input-wrap">
            <span class="input-icon">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="16" height="16"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75" /></svg>
            </span>
            <select name="desa_id"
                class="form-control @error('desa_id') is-invalid @enderror"
                style="background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:right 10px center;background-size:14px;padding-right:32px;appearance:none;-webkit-appearance:none;">
                <option value="">— Pilih Desa / Kelurahan —</option>
                @foreach($desas as $desa)
                <option value="{{ $desa->id }}"
                    {{ old('desa_id') == $desa->id ? 'selected' : '' }}>
                    {{ $desa->nama }}
                    @if($desa->kecamatan)
                        ({{ $desa->kecamatan->nama }})
                    @endif
                </option>
                @endforeach
            </select>
        </div>
        @error('desa_id')<span class="invalid-feedback">{{ $message }}</span>@enderror
        <p style="font-size:.72rem;color:var(--gray-400);margin-top:4px;padding-left:1px;">
            Setiap desa/kelurahan hanya dapat memiliki satu akun operator.
        </p>
    </div>

    <div class="form-group">
        <label class="form-label">Password</label>
        <div class="input-wrap">
            <span class="input-icon">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="16" height="16"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" /></svg>
            </span>
            <input type="password" name="password"
                class="form-control @error('password') is-invalid @enderror"
                placeholder="Min. 8 karakter">
        </div>
        @error('password')<span class="invalid-feedback">{{ $message }}</span>@enderror
    </div>

    <div class="form-group">
        <label class="form-label">Konfirmasi Password</label>
        <div class="input-wrap">
            <span class="input-icon">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="16" height="16"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" /></svg>
            </span>
            <input type="password" name="password_confirmation"
                class="form-control"
                placeholder="Ulangi password">
        </div>
    </div>

    {{-- Info status pending --}}
    <div style="background:#fef3c7;border:1px solid #fcd34d;border-radius:6px;padding:10px 12px;margin-bottom:16px;display:flex;gap:8px;align-items:flex-start;">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="#92400e" width="15" height="15" style="flex-shrink:0;margin-top:1px;">
            <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
        </svg>
        <p style="font-size:.75rem;color:#92400e;line-height:1.45;">
            Akun baru akan berstatus <strong>Pending</strong> dan perlu diaktifkan oleh Administrator sebelum dapat digunakan.
        </p>
    </div>

    <button type="submit" class="btn-auth">Daftar sebagai Operator</button>
</form>
@endsection

@section('footer')
<div class="auth-footer">
    Sudah punya akun? <a href="{{ route('login') }}">Masuk di sini</a>
</div>
@endsection