@extends('layouts.app')
@section('title', 'Tambah Petugas')
@section('content')

<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 style="color:#334155; font-weight:600;">Tambah Petugas Baru</h4>
    <a href="{{ route('users.index') }}" class="btn btn-secondary btn-sm">Kembali</a>
</div>

<div class="card shadow-sm" style="border:none; border-radius:10px; max-width:600px;">
    <div class="card-body">
        <form action="{{ route('users.store') }}" method="POST">
            @csrf
            <div class="mb-3">
                <label class="form-label text-muted small fw-bold">Nama Lengkap <span class="text-danger">*</span></label>
                <input type="text" name="nama" class="form-control" value="{{ old('nama') }}">
                @error('nama')<small class="text-danger">{{ $message }}</small>@enderror
            </div>
            <div class="mb-3">
                <label class="form-label text-muted small fw-bold">Username Login <span class="text-danger">*</span></label>
                <input type="text" name="username" class="form-control" value="{{ old('username') }}">
                @error('username')<small class="text-danger">{{ $message }}</small>@enderror
            </div>
            <div class="mb-3">
                <label class="form-label text-muted small fw-bold">Password <span class="text-danger">*</span></label>
                <input type="password" name="password" class="form-control">
                @error('password')<small class="text-danger">{{ $message }}</small>@enderror
                <small class="text-muted">Minimal 5 karakter</small>
            </div>
            <div class="mb-4">
                <label class="form-label text-muted small fw-bold">Role Akses <span class="text-danger">*</span></label>
                <select name="role" class="form-select">
                    <option value="petugas" {{ old('role') == 'petugas' ? 'selected' : '' }}>Petugas Biasa</option>
                    <option value="admin" {{ old('role') == 'admin' ? 'selected' : '' }}>Admin</option>
                </select>
                @error('role')<small class="text-danger">{{ $message }}</small>@enderror
            </div>
            <hr>
            <button type="submit" class="btn btn-primary px-4">Simpan Petugas</button>
            <a href="{{ route('users.index') }}" class="btn btn-light border">Batal</a>
        </form>
    </div>
</div>

@endsection