@extends('layouts.admin')
@section('title','Users')
@section('page_title','')

@section('page_level_css')
<link href="{{asset('assets/vendors/custom/datatables/datatables.bundle.css')}}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
<div class="kt-content kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor pt-2" id="kt_content">

    <!-- begin:: Content -->
    <div class="kt-container kt-container--fluid kt-grid__item kt-grid__item--fluid">

        <!-- begin:: Page -->
        <div class="kt-grid kt-grid--ver kt-grid--root ">
            <div class="top_main_title">
                <div class="labpair-title">
                    <p>
                        <span class="title">USER MANAGEMENT</span>
                    </p>
                </div>
            </div>
        </div>
        <!-- end:: Page -->

        <div class="inner-main-section mt-3 pt-3">

            <div class="row">
                <div class="col-12">
                    <div class="example-preview">
                        <ul class="nav nav-pills mb-0 pl-md-5" id="myTab1" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active">
                                    <span class="nav-text">User Management</span>
                                </a>
                            </li>
                        </ul>
                        <div class="tab-content" id="myTabContent1">
                            <div class="tab-pane fade show active" id="home-1" role="tabpanel" aria-labelledby="home-tab-1">
                                <div class="info-section">
                                    <p>
                                        <strong>EXPLANATION:</strong>
                                        Use this component to create and manage Users withing LabPair.
                                        There are three possible "roles" withing the application.
                                        These include "Senior Administrator", "Administrator" and "Manager".
                                        "Senior Administrators" have complete access to all components in the application, including but not limited to, User Management, Reports and Content controls.
                                        "Administrators" have access to all components except USER MANAGEMENT and FEE MANAGEMENT. "Managers" are, in effect,
                                        individuals who have access to the administrator interface, except for User Management and any excluded components.
                                    </p>
                                </div>

                                <div class="some-custom-datatable">
                                    <div class="kt-portlet__body">
                                        <!--begin: Datatable -->
                                        <div class="row">
                                            @php
                                            $url = getAURL('users');
                                            if(isset($data->id)) {$url = getAURL('users/' . $data->id);}
                                            @endphp
                                            <div class="col-lg-5 custom-height-manage">
                                                <div class="bg-white w-100 h-100">
                                                    <div class="managment-form">
                                                        <div class="dark-title">
                                                            <h5>Add / Edit Users (All Fields Mandatory)</h5>
                                                        </div>
                                                        <form class="kt-form kt-form--label-right" id="addEditForm" method="POST" action="{{$url}}" enctype="multipart/form-data">
                                                            @csrf
                                                            @if(isset($data->id))
                                                            {{ method_field('PUT') }}
                                                            @endif
                                                            <div class="form-group">
                                                                <div class="label col-lg-5">
                                                                    <label>First Name:</label>
                                                                </div>
                                                                <div class="input-group col-lg-7">
                                                                    <input type="text" class="form-control inputModule" placeholder="{{\Config::get('app.mandatory')}}" name="name" id="name" value="{{$data->name ?? ''}}">
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <div class="label col-lg-5">
                                                                    <label>Last Name:</label>
                                                                </div>
                                                                <div class="input-group col-lg-7">
                                                                    <input type="text" class="form-control inputModule" placeholder="{{\Config::get('app.mandatory')}}" name="last_name" id="last_name" value="{{$data->last_name ?? ''}}">
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <div class="label col-lg-5">
                                                                    <label>Email:</label>
                                                                </div>
                                                                <div class="input-group col-lg-7">
                                                                    <input type="email" class="form-control w-100 inputModule" placeholder="{{\Config::get('app.mandatory')}}" name="email" id="email" value="{{$data->email ?? ''}}">
                                                                    <div class="field-instruction w-100">
                                                                        <span>
                                                                            Email address always represents the User's "User Name"
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <div class="label col-lg-5">
                                                                    <label>Password:</label>
                                                                </div>
                                                                <div class="input-group col-lg-7">
                                                                    <input type="password" class="form-control w-100" name="password" id="password">
                                                                    @if(! isset($data->id))
                                                                    <div class="field-instruction w-100">
                                                                        <span>
                                                                            Password must be a minimum of (10) characters, and must contain (2) capital letters, and exactly (3) digits.
                                                                            <br><br>
                                                                            Example 1 : {{randomPasswordORCode(rand(10, 16), 3, 3, 3, 2)}}<br>
                                                                            Example 2 : {{randomPasswordORCode(rand(10, 16), 3, 3, 3, 2)}}
                                                                        </span>
                                                                    </div>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                            @isset($data->id)
                                                            <div class="form-group">
                                                                <div class="label col-lg-5">
                                                                    <label>Re-type Password:</label>
                                                                </div>
                                                                <div class="input-group col-lg-7">
                                                                    <input type="password" class="form-control w-100" name="password_confirmation" id="password_confirmation">
                                                                    <div class="field-instruction w-100">
                                                                        <span>
                                                                            Password must be a minimum of (10) characters, and must contain (2) capital letters, and exactly (3) digits.
                                                                            <br><br>
                                                                            Example 1 : {{randomPasswordORCode(rand(10, 16), 3, 3, 3, 2)}}<br>
                                                                            Example 2 : {{randomPasswordORCode(rand(10, 16), 3, 3, 3, 2)}}
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            @endisset
                                                            <div class="form-group">
                                                                <div class="label col-lg-5">
                                                                    <label>Role:</label>
                                                                </div>
                                                                <div class="input-group col-lg-7">
                                                                    <select class="form-control inputModule" name="role" id="role">
                                                                        <option></option>
                                                                        <option value="SuperAdmin" {{(isset($data->role) && $data->role == 'SuperAdmin') ? 'selected' : ''}}>Super Admin</option>
                                                                        <option value="Admin" {{(isset($data->role) && $data->role == 'Admin') ? 'selected' : ''}}>Administrator</option>
                                                                        <option value="Manager" {{(isset($data->role) && $data->role == 'Manager') ? 'selected' : ''}}>Manager</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <div class="label col-lg-5">
                                                                    <label>Status:</label>
                                                                </div>
                                                                <div class="input-group col-lg-7">
                                                                    <select class="form-control inputModule" name="status" id="status">
                                                                        <option></option>
                                                                        <option value="Active" {{(isset($data->status) && $data->status == 'Active') ? 'selected' : ''}}>Active</option>
                                                                        <option value="Inactive" {{(isset($data->status) && $data->status == 'Inactive') ? 'selected' : ''}}>Inactive</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <div class="label col-lg-5">
                                                                    <label></label>
                                                                </div>
                                                                <div class="input-group col-lg-7">
                                                                    <div class="submit-btn d-block w-100">
                                                                        <input type="submit" class="btn btn-primary w-100 d-block formSubmitButton" value="{{(isset($data->id)) ? 'Update User' : 'Add New User'}}">
                                                                        @isset($data->id)
                                                                        <button type="button" class="btn btn-danger w-100 d-block mt-1 delete" data-target="#showDeleteModel" data-toggle="modal"  data-id="{{$data->id}}" >Delete User</button>
                                                                        @endisset
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>

                                                </div>
                                            </div>
                                            <div class="col-lg-7 custom-height-manage">
                                                <div class="bg-white adding-table w-100 h-100 th-white">
                                                    <div class="kt-portlet kt-portlet--mobile mb-0 h-100">
                                                        <div class="kt-portlet__body data-table-list p-0 h-100">
                                                            <table class="table table-striped" id="dataTableList">
                                                                <thead>
                                                                    <tr>
                                                                        <th scope="col">User</th>
                                                                        <th scope="col">First Name</th>
                                                                        <th scope="col">Last Name</th>
                                                                        <th scope="col">Role</th>
                                                                        <th scope="col">Status</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>

                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--end: Datatable -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="showDeleteModel" role="dialog" data-backdrop="false">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content dark-color">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalDeleteHerderTitle"></h5>
                    <button type="button" class="close deleteModelHide" data-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <div class="modal-body gray-background">
                    <div class="kt-section__body">
                        <div class="text-center max-width-560">
                            <div class="icon text-center mb-4" id="modalDeleteIcon"><i class="fas fa-exclamation-triangle"></i></div>
                            <h3 id="modalDeleteTitle"></h3>
                            <p id="modalDeleteDescription"></p>
                        </div>
                        <div class="btn-group d-flex align-items-center justify-content-center mt-4 mb-4">
                            <div class="button mr-2 ml-2">
                                <button type="button" class="btn btn-primary btn-wide yes-sure" data-id="{{$data->id ?? ''}}" id="confirmDeleteTitle"></button>
                            </div>
                            <div class="button mr-2 ml-2">
                                <button type="button" class="btn btn-primary btn-wide" data-dismiss="modal" aria-label="Close" id="cancelDeleteTitle"></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- end:: Content -->
    <button type="button" class="showDeleteModel" data-toggle="modal" data-target="#showDeleteModel" style="display: none;">Show Delete Model</button>
</div>

@endsection

@section('page_level_js')
<script src="{{asset('assets/js/admin/user.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/vendors/custom/datatables/datatables.bundle.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/js/demo1/pages/crud/datatables/basic/paginations.js')}}" type="text/javascript"></script>
@endsection

@push('footerscript')
<script>
@if (isset($data->id))
    var ex = ['password', 'password_confirmation'];
@endif
    $(document).on("blur", '#addEditForm .inputModule', function () {
checkRequired(ex);
});
$(document).on("change", '#addEditForm select.inputModule', function () {
    checkRequired(ex);
});
checkRequired(ex);
</script>
@endpush