@extends('layouts.main')
@section('title', 'Add New User')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="/">Home</a></li>
    <li class="breadcrumb-item"><a href="{{ route('users') }}">Users</a></li>
    <li class="breadcrumb-item active">Add User</li>
@endsection

@section('content')

    <script src="{{ env('APP_PREFIX') }}/js/user.js"></script>

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">

                    <form class="form-horizontal" role="form" action="{{ route('add.user') }}" method="post" enctype="multipart/form-data" autocomplete="off">

                        @csrf

                        <div class="card mt-1 mb-4">
                            <div class="card-header bg-dark py-3 text-white">
                                <h3 class="card-title mb-0 text-white">User Information</h3>
                            </div>
                        </div>


                        <div class="row">

                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label for="name" class="control-label">Full Name <span class="text-danger">*</span></label>
                                    <input type="text" value="{{ old('name') }}" class="form-control @error('name') parsley-error @enderror" id="name" name="name" autocomplete="off" required>

                                    @error('name')
                                    <ul class="parsley-errors-list">
                                        <li class="">{{ $message }}</li>
                                    </ul>
                                    @enderror

                                </div>
                            </div>

                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label for="email" class="control-label">Email <span class="text-danger">*</span></label>
                                    <input type="email" id="email" value="{{ old('email') }}" class="form-control @error('email') parsley-error @enderror" name="email" autocomplete="off" required>

                                    <small id="username_hints" class="form-text">
                                        <i id="username_hints_icon" class=""></i>
                                        <span id="username_hints_label"></span>
                                    </small>

                                    @error('email')
                                    <ul class="parsley-errors-list">
                                        <li class="">{{ str_replace("email","username",$message) }}</li>
                                    </ul>
                                    @enderror

                                </div>
                            </div>

                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label for="password" class="control-label">Password <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="password" name="password" value="{{ randomString() }}" required>
                                </div>
                            </div>

                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label for="role" class="control-label">Role <span class="text-danger">*</span></label>

                                    <select class="form-control" id="role" name="role">
                                        @foreach($roles as $role)
                                            <option value="{{ $role->role_name }}" {{ old('role')==$role->role_name?'selected':'' }}>{{ camelize($role->role_name) }}</option>
                                        @endforeach
                                    </select>

                                </div>
                            </div>

                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label for="phone" class="control-label">Phone No <span class="text-danger">*</span></label>
                                    <input type="text" value="{{ old('phone') }}" class="form-control @error('phone') parsley-error @enderror" id="phone" name="phone" autocomplete="off" required>

                                    @error('phone')
                                    <ul class="parsley-errors-list">
                                        <li class="">{{ $message }}</li>
                                    </ul>
                                    @enderror

                                </div>
                            </div>

                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label for="user_status" class="control-label">Status</label>
                                    <select class="form-control" id="user_status" name="status">
                                        <option value="1" {{ old('status')=='1'?'selected':'' }}>Active</option>
                                        <option value="0" {{ old('status')=='0'?'selected':'' }}>Inactive</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label for="designation_id" class="control-label">Designation</label>

                                    <select class="form-control" id="designation_id" name="designation_id">
                                        <option value="0">None</option>
                                        @foreach($designations as $designation)
                                            <option value="{{ $designation->designation_id }}" {{ old('designation_id')==$designation->designation_id?'selected':'' }}>{{ $designation->designation_name }}</option>
                                        @endforeach
                                    </select>

                                </div>
                            </div>

                            <div class="col-lg-12">
                                <div class="form-group no-margin">
                                    <label for="address" class="control-label">Address</label>
                                    <textarea class="form-control" id="address" name="address" autocomplete="off">{{ old('address') }}</textarea>
                                </div>
                            </div>

                            <div class="col-lg-12">
                                <div class="form-group mb-0">
                                    <label>User Image</label>
                                    <div class="input-group">
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" accept="image/*" name="user_img">
                                            <label class="custom-file-label" for="user_img">Choose file</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="row">
                            <div class="col-lg-12 mt-4">
                                <button type="submit" class="btn btn-block btn-lg btn-blue waves-effect waves-light">Save Changes</button>
                            </div>
                        </div>

                    </form>

                </div>
            </div>
        </div>
    </div>

@endsection