@extends('layout.master')
@section('content')
    <section class="content pb-5">
        <div class="container-fluid">
            <meta name="csrf-token" content="{!! csrf_token() !!}">
            <div class="row pt-4">
                <div class="col-md-12">
                    <div class="title-section">
                        <p>Settings</p>
                    </div>
                </div>


                <div class="col-md-12 pt-0 pt-sm-4">
                    <div class="title-section">
                        <p>User Role Management <span> Manage Users</span></p>
                    </div>
                </div>
            </div>

            <div class="row pt-0 pt-sm-4">
                <div class="col-md-12">
                          <div class="zone-box">
                        <h5 class="heading mb-0">Add New User</h5>
                        <div class="border-bottom"></div>
                        <p class="f-12">Add a user to your account. An email will be sent to the email address specified with instructions and a temporary password to login.</p>
                        <form id="add_individual_booking" method="post" autocomplete="off" novalidate>
                            @csrf
                            <div class="row">
                                <div class="col-md-5">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group custom-form-group">
                                                <label class="form-label" for="customer">Full Name <span class="text-danger">*</span></label>
                                                <input class="form-control" id="full_name" placeholder="Enter user Full Name" type="text" name="full_name" value="{{old('full_name')}}">
                                                <span id="fullName" style="display: none; color: red;"> </span> 
                                            </div>
                                        </div>

                                        <div class="col-md-12">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="email">Emai ID</label>
                                                <input type="text" id="emailId" class="form-control" name="email" placeholder="Email"  value="{{old('email')}}">
                                                <span id="email" style="display: none; color: red;"> </span>
                                            </div>
                                        </div>

                                        <div class="col-md-12">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="passward">Password</label>
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                        <div class="input-group-text">
                                                            <i class="fa fa-eye f-20 d-none" aria-hidden="true"
                                                                id="open_eye_id" onclick="passwordAgentShowHide(this)"></i>
                                                            <i class="fa fa-eye-slash f-20" aria-hidden="true"
                                                                id="close_eye_id" onclick="passwordAgentShowHide(this)"></i>
                                                        </div>
                                                    </div>
                                                    <input type="password" class="form-control"
                                                        aria-label="Text input with radio button"
                                                        name="password"
                                                        value="{{ old('password') }}" placeholder="Password"
                                                        id="UserPassword">

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

                                       <!--  <div class="col-md-12">
                                            <div class="form-group login-box-label mt-sm-3">
                                                <label class="control-label" for="email">Password</label>
                                                <input type="password" id="UserPassword" class="form-control" name="password" placeholder="Password"  value="" autofocus>
                                                <i class="fa fa-eye f-20 d-none" aria-hidden="true"
                                                id="agent_open_eye_id"
                                                onclick="passwordAgentShowHide(this)"></i>
                                                <i class="fa fa-eye-slash f-20" aria-hidden="true"
                                                id="agent_close_eye_id"
                                                onclick="passwordAgentShowHide(this)"></i>
                                                <span id="password" style="display: none; color: red;"> </span>
                                            </div>
                                        </div>   -->

                                        <div class="col-md-12">
                                            <div class="form-group custom-form-group">
                                                <label class="form-label" for="customer">Module <span class="text-danger">*</span></label>
                                                <select class="form-control module-name" id="module_name" name="module_name[]" multiple>
                                                    <option value="">Select Module</option>
                                                    @foreach($modules as $module)
                                                        <option value="{{$module->id}}">{{$module->name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group custom-form-group mt-2 mb-0">
                                                <button type="button" onclick="save()" class="btn btn-danger btn-block" >Add User</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>


                        <div class="table-responsive">
                                <table class="table table-striped" id="usersListIds" style="width:100% !important">
                                    <thead>
                                        <tr>
                                            <th scope="col">Name</th>
                                            <th scope="col">Email </th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>


                </div>
            </div> 
        </div>
    </section>
    <script type="text/javascript">

        $(document).ready(function() {
            $('.module-name').select2();
        });

       

        function passwordAgentShowHide(e) {
            if (e.getAttribute('id') == 'close_eye_id') {
                $('#close_eye_id').addClass('d-none');
                $('#open_eye_id').removeClass('d-none');
                $('#UserPassword').prop("type", "text");
            } else {
                $('#close_eye_id').removeClass('d-none');
                $('#open_eye_id').addClass('d-none');
                $('#UserPassword').prop("type", "password");
            }

        }


         let example = $("#usersListIds").DataTable({
                "language": {
                    "zeroRecords": "No record(s) found."
                },

                select: {
                    style: 'os',
                    selector: 'td:first-child'
                },
                order: [
                    [1, 'asc']
                ],
                "oLanguage": {

                    "sSearch": "Dynamic Search:"

                },
                processing: true,
                serverSide: true,
                lengthChange: true,
                order: [0, 'asc'],
                searchable: true,
                bStateSave: false,

                ajax: {
                    url: "{{ url('datatable/users-list') }}",
                    data: function(d) {

                    }
                },

                columns: [{
                        data: 'first_name',
                        name: 'first_name',
                        sortable: false,
                        searchable: false
                    },
                    {
                        data: 'email',
                        name: 'email',
                        searchable: true,
                        orderable: false,
                        defaultContent: 'NA'
                    },
                ],
                select: {
                    style: 'multi',
                },
            });


          function save() {
            $('#email').hide();
            $('#fullName').hide();
            let full_name = $('#full_name').val();
            let emailId = $('#emailId').val();
            let UserPassword = $('#UserPassword').val();
            let module_name = $('#module_name').val();
            //console.log(full_name,emailId,UserPassword,module_name);
            let data = {
                '_token': "{{csrf_token()}}",
                'full_name':full_name,
                'email':emailId,
                'modulesId':module_name,
                'password':UserPassword,
            }

            // console.log(data); return false;
            $.ajax({
                url : "{{route('create/manage/user')}}",
                type: 'POST',
                data: data,
                success:function(data) {   

                if (data.status == 'false') {
                   $.each(data.message, function(index, value) {

                    if (index == 'email') {

                        $("#email").show();
                        $("#email").html(value[0].toString());

                        return;

                    }

                    if (index == 'full_name') {

                        $("#fullName").show();
                        $("#fullName").html(value[0].toString());

                          return;

                    }

                    if (index == 'password') {

                        $("#password").show();
                        $("#password").html(value[0].toString());

                          return;

                    }

                });  
               }else {

                 swal({
                        icon: 'success',
                        title: "Updated",
                        text: 'Preferences changes has been updated!.',
                        type: "success",

                        closeOnConfirm: false,
                        showLoaderOnConfirm: true,
                    });
                }

               }
               

                   
            });
            $("#usersListIds").DataTable().draw(true);
        }

        

    </script>
@endsection