@extends('layouts.master')
@section('title') @lang('translation.form-layouts') @endsection
@section('content')
    @component('components.breadcrumb')
        @slot('li_1') Forms @endslot
        @slot('title') Create User @endslot
    @endcomponent

    <div class="row">
        <div class="col-xxl-6">
            <div class="card">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1">Create New User</h4>
                </div><!-- end card header -->
                <div class="card-body">
                   <div class="live-preview">
                        <form action="{{ route('users.store') }}" method="POST" autocomplete="off">
                            @csrf

                            <!-- Name -->
                            <div class="row mb-3">
                                <div class="col-lg-3">
                                    <label for="name" class="form-label">Name</label>
                                </div>
                                <div class="col-lg-9">
                                    <input id="name" name="name" type="text" 
                                    class="form-control @error('name') is-invalid @enderror"  
                                    placeholder="Enter your name"  
                                    value="{{ old('name') }}" 
                                    onkeydown="return /[a-z ]/i.test(event.key)" 
                                    required autofocus>
                                    @error('name')
                                        <span class="invalid-feedback" role="alert"></span>
                                            <strong>{{ $message }}</strong>
                                    @enderror
                                </div>
                            </div>


                            <!-- Email -->
                            <div class="row mb-3">
                                <div class="col-lg-3">
                                    <label for="email" class="form-label">Email</label>
                                </div>
                                <div class="col-lg-9">
                                    <input id="email" name="email" type="email" 
                                    class="form-control @error('email') is-invalid @enderror"  
                                    placeholder="Enter your email"  
                                    value="{{ old('email') }}" 
                                    required autofocus>
                                    @error('email')
                                        <span class="invalid-feedback" role="alert"></span>
                                            <strong>{{ $message }}</strong>
                                    @enderror
                                </div>
                            </div>

                            <!-- Password -->
                            <div class="row mb-3">
                                <div class="col-lg-3">
                                    <label for="password" class="form-label">Password</label>
                                </div>
                                <div class="col-lg-9">
                                    <input id="password" name="password" type="password" 
                                    class="form-control @error('password') is-invalid @enderror"  
                                    placeholder="Enter your password"  
                                    value="{{ old('password') }}" 
                                    required autofocus>
                                    @error('password')
                                        <span class="invalid-feedback" role="alert"></span>
                                            <strong>{{ $message }}</strong>
                                    @enderror
                                </div>
                            </div>

                            <!-- Confirm Password -->
                            <div class="row mb-3">
                                <div class="col-lg-3">
                                    <label for="password_confirmation" class="form-label">Confirm Password</label>
                                </div>
                                <div class="col-lg-9">
                                    <input id="password_confirmation" name="password_confirmation" type="password" 
                                    class="form-control @error('password_confirmation') is-invalid @enderror"  
                                    placeholder="Confirm your password"  
                                    value="{{ old('password_confirmation') }}" 
                                    required autofocus>
                                    @error('password_confirmation')
                                        <span class="invalid-feedback" role="alert"></span>
                                            <strong>{{ $message }}</strong>
                                    @enderror
                                </div>
                            </div>

                            
                            <!-- Status -->
                            <div class="row mb-3">
                                <div class="col-lg-3">
                                    <label for="status" class="form-label">Select Status</label>
                                </div>
                                <div class="col-lg-9">
                                    <select class="form-select" data-choices data-choices-sorting="true" >
                                                <option value="1" {{ old('status') == '1' ? 'selected' : '' }}>Yes</option>
                                            <option value="0" {{ old('status') == '0' ? 'selected' : '' }}>No</option> 
                                    </select>    
                                </div>
                            </div>

                            <!-- Assign Role -->

                            <div class="row mb-3">
                                <div class="col-lg-3">
                                    <label for="roles" class="form-label">Assign Role</label>
                                </div>
                                <div class="col-lg-9">
                                        @foreach ($roles as $role)
                                        <input class="form-check-input"  
                                        type="checkbox" 
                                        name="roles[]" 
                                        value="{{ $role->name }}" 
                                        id="role_{{ $role->id }}" 
                                        {{ in_array($role->name, old('roles', [])) ? 'checked' : '' }}>

                                        <label class="form-check-label" for="role_{{ $role->id }}"> {{ ucfirst($role->name) }} </label><br>
                                        @endforeach
                                    </select>
                                </div>
                            </div>


                            <!-- Assign Permissions -->

                            <div class="row mb-3">
                                <div class="col-lg-3">
                                    <label for="permissions" class="form-label">Assign Permissions</label>
                                </div>
                                <div class="col-lg-9">
                                        @foreach ($permissions as $permission)
                                        <input class="form-check-input"  
                                        type="checkbox" 
                                        name="permissions[]" 
                                        value="{{ $permission->name }}" 
                                        id="permission_{{ $permission->id }}" 
                                        {{ in_array($permission->name, old('permissions', [])) ? 'checked' : '' }}>

                                        <label class="form-check-label" for="permission_{{ $permission->id }}"> {{ ucfirst($permission->name) }} </label><br>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                           
                            
                            <div class="text-end">
                                <a href="{{ route('users.index') }}" class="btn btn-danger">Cancel</a>
                                <button type="submit" class="btn btn-primary">Add User</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div><!--end row-->


@endsection