@extends('layouts.app')

@section('content')
<h1 class="page-header">Users Management</h1>
<div class="panel panel-inverse border-0">
    <div class="panel-heading">Add New User</div>
    <form action="{{ route('user.store') }}" method="POST">
        @csrf
        <div class="panel-body">
            <div class="row my-4">
                <label for="username" class="col-form-label col-md-3">Username</label>
                <div class="col-md-9">
                    <input type="text" id="name" name="username" value="{{ old('username') }}" class="form-control @error('username') is-invalid @enderror">
                    @error('username')
                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                    @enderror
                </div>
            </div>
            <div class="row my-4">
                <label class="col-form-label col-md-3" for="password">Password</label>
                <div class="col-md-9">
                    <input type="password" name="password" class="form-control @error('password') is-invalid @enderror" id="password">
                    @error('password')
                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                    @enderror
                </div>
            </div>
            <div class="row mb-4">
                <label class="col-form-label col-md-3" for="password_confirmation">Confirm Password</label>
                <div class="col-md-9">
                    <input type="password" name="password_confirmation" class="form-control @error('password_confirmation') is-invalid @enderror" id="password_confirmation">
                    @error('password_confirmation')
                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                    @enderror
                </div>
            </div>
            <hr>
            <div class="row my-4">
                <label for="name" class="col-form-label col-md-3">Nama</label>
                <div class="col-md-9">
                    <input type="text" id="name" name="name" value="{{ old('name') }}" class="form-control @error('name') is-invalid @enderror">
                    @error('name')
                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                    @enderror
                </div>
            </div>
            <div class="row my-4">
                <label for="staff_id" class="col-form-label col-md-3">Staff ID</label>
                <div class="col-md-9">
                    <input type="text" id="name" name="staff_id" value="{{ old('staff_id') }}" class="form-control @error('staff_id') is-invalid @enderror">
                    @error('staff_id')
                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                    @enderror
                </div>
            </div>
            <div class="row mb-4">
                <label for="email" class="col-form-label col-md-3">Email</label>
                <div class="col-md-9">
                    <input type="text" id="email" name="email" value="{{ old('email') }}" class="form-control @error('email') is-invalid @enderror">
                    @error('email')
                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                    @enderror
                </div>
            </div>
            <div class="row mb-4">
                <label for="roles" class="col-form-label col-md-3">Role</label>
                <div class="col-md-9">
                    <select name="roles[]" id="roles" class="form-select @error('roles') is-invalid @enderror text-capitalize" multiple>
                        <option value="">--Select--</option>
                        @foreach ($roles as $item)
                            <option value="{{ $item->id }}" @selected($item->id == old('roles'))>{{ $item->name }}</option>
                        @endforeach
                    </select>
                    @error('roles')
                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                    @enderror
                </div>
            </div>
        </div>
        <div class="panel-footer text-end">
            <a href="{{ route('user.index') }}" class="btn btn-white">Back</a>
            <button type="submit" class="btn btn-primary">Register New User</button>
        </div>
    </form>
</div>
@endsection