@extends('layouts/app')
@section('css')
<style type="text/css" nonce="{{ csp_nonce() }}">
.toggle-password-eye {
    float: right;
    top: -30px;
    right: 10px;
    position: relative;
    cursor: pointer;
}
</style>
@stop
@section('content')
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h4 class="card-title" >Add User</h4>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item">Administrator</li>
                    <li class="breadcrumb-item"><a href="{{route('administrator.user')}}">Users</a></li>
                </ol>
            </div>
        </div>
    </div>
</div>
<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card card-secondary">
                    @if(Session::has('error'))
                    <div class="alert alert-danger">
                        <h5><i class="icon fas fa-x"></i> Errors!</h5>
                        @foreach(Session::get('error') as $err)
                        {{ $err }}<br>
                        @endforeach
                        @php
                        Session::forget('error');
                        @endphp
                    </div>
                    @endif    
                    <div class="card-header">
                        <a href="{{route('administrator.user')}}" class="card-title left-btn" ><i class="fa fa-chevron-circle-left"></i></a>
                    </div>

                    <div class="card-body">
                        <form action="{{ route('administrator.storeUser') }}" method="post">
                            @csrf
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="user_name">Username</label>
                                        <span class="text-red">*</span>
                                        <input type="text" class="form-control @error('user_name') is-invalid @enderror" value="{{ old('user_name') }}" id="user_name" name="user_name" placeholder="Enter Username">
                                        @if ($errors->has('user_name'))
                                        <span class="text-danger">{{ $errors->first('user_name') }}</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="name">Full Name</label>
                                        <span class="text-red">*</span>
                                        <input type="text" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" id="name" name="name" placeholder="Enter Full Name">
                                        @if ($errors->has('name'))
                                        <span class="text-danger">{{ $errors->first('name') }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="email">Email</label>
                                        <span class="text-red">*</span>
                                        <input type="text" class="form-control @error('email') is-invalid @enderror" value="{{ old('email') }}" id="email" name="email" placeholder="Enter Email">
                                        @if ($errors->has('email'))
                                        <span class="text-danger">{{ $errors->first('email') }}</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="password">Password</label>
                                        <span class="text-red">*</span>
                                        <input type="password" autocomplete="new-password" class="form-control" value="{{ old('password') }}" id="password" name="password" placeholder="Enter Password">
                                        @if ($errors->has('password'))
                                        <span class="text-danger">{{ $errors->first('password') }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="password_confirmation">Password Confirmation</label>
                                        <span class="text-red">*</span>
                                        <input type="password" class="form-control" value="{{ old('password_confirmation') }}" id="password_confirmation" name="password_confirmation" placeholder="Password Retype">
                                        @if ($errors->has('password_confirmation'))
                                        <span class="text-danger">{{ $errors->first('password_confirmation') }}</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="role">User Role</label>
                                        <span class="text-red">*</span>
                                        <select class="form-control @error('role') is-invalid @enderror" id="role" name="role">
                                            <option value="">Select Role</option>
                                            @foreach($roles as $role)
                                            <option value="{{ $role->id }}">{{ $role->name }}</option>
                                            @endforeach
                                        </select>
                                        @if ($errors->has('role'))
                                        <span class="text-danger">{{ $errors->first('role') }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="branches">Allowed Branches</label>
                                        <span class="text-red">*</span>
                                        <select id="branches" class="form-control select2-multiple" name="branches[]" multiple="multiple">
                                            @foreach($branches as $branch)
                                            <option value="{{ $branch->id }}">{{ $branch->code }}</option>
                                            @endforeach
                                        </select>                        
                                        @if ($errors->has('branches'))
                                        <span class="text-danger">{{ $errors->first('branches') }}</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
@endsection
@section('js')
<script nonce="{{ csp_nonce() }}">
    $('#branches').select2({
        placeholder: "Select",
        allowClear: true
    });

    const togglePasswordEye = '<i class="fa fa-eye toggle-password-eye"></i>';
    const togglePasswordEyeSlash = '<i class="fa fa-eye-slash toggle-password-eye"></i>';

    $(togglePasswordEyeSlash).insertAfter('input[type=password]');
    $('input[type=password]').addClass('hidden-pass-input')    
    
    $('body').on('click', '.toggle-password-eye', function (e) {
        let password = $(this).prev('.hidden-pass-input');

        if (password.attr('type') === 'password') {
            password.attr('type', 'text');
            $(this).addClass('fa-eye').removeClass('fa-eye-slash');
        } else {
            password.attr('type', 'password');
            $(this).addClass('fa-eye-slash').removeClass('fa-eye');
        }
    })    
</script>
@stop