@extends('layouts.app')

@section('content')


<div class="col-12 col-md-12 ">
    <h1 class="h1">Add New User</h1>
        <form class="marketplace mt-5" id="myForm" action="{{route('staff.store')}}" method="post" enctype="multipart/form-data" autocomplete="off">
        @csrf
            <div class="d-flex flex-wrap justify-content-between">
                <div class="input-group first">
                    <input class="input form-control @error('agent_id') is-invalid @enderror" type="text" name="agent_id" id="agent_id" placeholder="Add Name" value="{{ old('agent_id') }}" required readonly />
                    <label for="input">Agent ID</label>
                    @error('agent_id')
                        <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            <div class="d-flex flex-wrap justify-content-between">
                <div class="input-group first">
                    <input class="input form-control @error('name') is-invalid @enderror" type="text" name="name" id="username" placeholder="Add Name" value="{{ old('name') }}" required onkeyup="getAgentId()" autocomplete="off"/>
                    <label for="input">User Name</label>
                    @error('name')
                        <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>
                <div class="input-group last">
                    <input class="input form-control @error('email') is-invalid @enderror" type="email" name="email" id="add-title" placeholder="Add Email" value="{{ old('email') }}" required/>
                    <label for="input">User Email</label>
                    @error('email')
                        <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            <div class="d-flex flex-wrap justify-content-between">
                <div class="input-group first password-toggle">
                    <input class="input form-control @error('password') is-invalid @enderror" type="password" name="password" id="password" placeholder="Add Password" value="{{ old('password') }}" required/>
                    <i class="fa-solid fa-eye-slash" id="passwordToggle" onclick="togglePassword()"></i>
                    <label for="input">Set Password</label>
                    @error('password')
                        <div class="text-danger">{{ $message }}</div>
                    @enderror
                </div>
                <div class="input-group last">
                    <select name="role_id" class="input" id="select_role" required>
                        @foreach($userRoles as $role)
                            <option value="{{ $role->id }}" data-value="{{ $role->role_name }}">{{ $role->role_name }}</option>
                        @endforeach
                    </select>
                    <label for="input">User Role</label>
                </div>
            </div>
            <div class="input-group submit submit-container">
                <input class="submit" type="submit" name="submit" value="Add User" />
            </div>
        </form>
</div>

@endsection