@extends('layouts.authenticated')
@section('title','Users')
@section('users','active')
@section('maintenance','menu-open')
@section('style')
    <style>
        th {
            white-space: nowrap;
        }

        .dt-buttons {
            margin-bottom: 1rem;
        }

        .btn-add, .btn-export {
            background: #007bff;
            border-color: #007bff;
        }

        /* .dataTables_filter {
             float: left;
         }
         .dataTables_length {
             float: right;
         }*/

    </style>
@endsection
@section('content')
    <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
    <div class="wrapper">
        <section class="content-header">
        </section>
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card card-cyan">
                            <div class="card-header">
                                <h3 class="card-title"><i class="fas fa-users"></i> Users</h3>
                            </div>
                            <div class="card-body">
                                <div id="tableActions">

                                </div>
                                {{--<input type="hidden" name="_token" value="{{ csrf_token() }}">--}}
                                <table class="table stripe row-border order-column" id="user-table"
                                       style="width: 100%;height: 100%">
                                    <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Username</th>
                                        <th>Display Name</th>
                                        <th>Email</th>
                                        <th>User Role</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <div id="modal-add" class="modal fade">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"><i class="fas fa-user-plus" style="color: #17a2b8"></i> Add User</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="form-add">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <div class="form-group col-sm-12">
                            <label for="Username">Username</label>
                            <input type="text" data-label="Username" name="username" id="username-create"
                                   class="form-control input-create"
                                   placeholder="Username" required="" value="{{ old('username') }}">
                        </div>
                        <div class="form-group col-sm-12">
                            <label for="Username">Display Name</label>
                            <input type="text" data-label="Display Name" name="display_name" id="display-name-create"
                                   class="form-control input-create"
                                   placeholder="Display Name" required="" value="{{ old('display_name') }}">
                        </div>
                        <div class="form-group col-sm-12">
                            <label for="Email Address">Email Address</label>
                            <input type="text" data-label="Email" name="email" class="form-control input-create"
                                   placeholder="Email Address" required="" value="{{ old('emailaddress') }}">
                        </div>
                        <div class="form-group col-sm-12">
                            <label for="User type">User type:</label>
                            <select name="role" data-label="Role" class="form-control input-create drp-usertype">
                                <option value='' hidden>Select roles</option>
                                @foreach($data['roles'] as $role)
                                    <option value={{$role->id}}>{{$role->description}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-sm-12">
                            <label for="Location">Password</label>
                            <input type="password" data-label="Password" name="password"
                                   class="form-control input-create password"
                                   placeholder="Password" required="">
                        </div>
                        <div class="form-group col-sm-12">
                            <label for="Location">Confirm Password</label>
                            <input type="password" data-label="Confirm Password" name="password_confirmation"
                                   class="form-control input-create confirm-password"
                                   placeholder="Confirm Password" required="">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-success btn-confirm">Confirm</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <div id="modal-edit" class="modal fade">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"><i class="fas fa-pen" style="color: #17a2b8"></i> Edit User</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="form-edit">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <input name="_method" type="hidden" value="PUT">
                        <input name="id" type="hidden" id="user-id">
                        <div class="form-group col-sm-12">
                            <label for="Username">Username</label>
                            <input type="text" data-label="Username" name="username" id="username"
                                   class="form-control input-update"
                                   placeholder="Username" required="" value="{{ old('username') }}">
                        </div>
                        <div class="form-group col-sm-12">
                            <label for="Username">Display Name</label>
                            <input type="text" data-label="Display Name" name="display_name" id="display-name-update"
                                   class="form-control input-update"
                                   placeholder="Display Name" required="" value="{{ old('display_name') }}">
                        </div>
                        <div class="form-group col-sm-12">
                            <label for="Email Address">Email Address</label>
                            <input type="text" data-label="Email" name="email" id="email"
                                   class="form-control input-update"
                                   placeholder="Email Address" required="" value="{{ old('emailaddress') }}">
                        </div>
                        <div class="form-group col-sm-12">
                            <label for="User type">User type:</label>
                            <select id="role" data-label="Role" name="role"
                                    class="form-control input-update drp-usertype-update">
                                @foreach($data['roles'] as $role)
                                    <option value="{{$role->id}}">{{$role->description}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-sm-12">
                            <label for="Location">Password <label class="text-muted">(optional)</label></label>
                            <input type="password" data-label="Password" name="password"
                                   class="form-control update-password"
                                   placeholder="Password">
                        </div>
                        <div class="form-group col-sm-12">
                            <label for="Location">Confirm Password <label
                                    class="text-muted">(optional)</label></label>
                            <input type="password" data-label="Confirm Password" name="password_confirmation"
                                   class="form-control update-confirm-password"
                                   placeholder="Confirm Password">
                        </div>
                        <div class="form-group col-sm-12">
                            <div class="custom-control custom-switch custom-switch-off-danger custom-switch-on-success">
                                <input type="hidden" id="edit_is_active" name="status">
                                <input type="checkbox" class="custom-control-input" id="edit_toogle_is_active">
                                <label class="custom-control-label" for="edit_toogle_is_active">Toggle this to
                                    Active/Deactivate</label>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success btn-update">Update</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <div id="modal-delete" class="modal fade">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Edit User</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete the selected Users?</p>
                    <input type="hidden" value="" id="delete-user-id">
                </div>
                <div class="modal-footer">
                    <input type="hidden" name="_method" value="delete"/>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-success btn-deactivate">Deactivate</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>


@endsection
@section('customjs')
    <script type="text/javascript">
        $(document).ready(function () {
            $.fn.DataTable.ext.pager.simple_numbers = function (page, pages) {
                var numbers = [];
                //  var buttons = $.fn.DataTable.ext.pager.numbers_length;
                var buttons = 3;
                var half = Math.floor(buttons / 2);
                var _range = function (len, start) {
                    var end;

                    if (typeof start === "undefined") {
                        start = 0;
                        end = len;

                    } else {
                        end = start;
                        start = len;
                    }
                    var out = [];
                    for (var i = start; i < end; i++) {
                        out.push(i);
                    }

                    return out;
                };

                if (pages <= buttons) {
                    numbers = _range(0, pages);

                } else if (page <= half) {
                    numbers = _range(0, buttons);

                } else if (page >= pages - 1 - half) {
                    numbers = _range(pages - buttons, pages);

                } else {
                    numbers = _range(page - half, page + half + 1);
                }

                numbers.DT_el = 'span';
                return ['first', 'previous', numbers, 'next', 'last'];
            };

            $('#user-table').dataTable({
                language: {
                    paginate: {
                        previous: 'Prev',
                    }
                },
                mark: true,
                scrollY: "500px",
                scrollX: true,
                scrollCollapse: true,
                paging: true,
                ajax: "get-users",
                error: function (xhr) {
                    Command: toastr["info"]("Session timeout detected.", "Session Timeout!")
                    setTimeout(function (e) {
                        window.location.href = "/"
                    }, 3000)
                },
                columns: [
                    {data: "id"},
                    {data: "username"},
                    {data: "display_name"},
                    {data: "email"},
                    {data: "description"},
                    {
                        data: "is_active",
                        render: function (data, type, row) {
                            var status;
                            if (data == 1) {
                                status = 'Active'
                            } else {
                                status = 'Deactivated'
                            }
                            return '<td>' + status + '</td>';
                        }
                    },
                    {
                        data: "id",
                        render: function (data, type, row) {
                            return '<div class="btn-group">' +
                                '<button class="btn btn-primary btn-sm btn-flat btn-edit" data-toggle="modal" data-username="' + row['username'] + '" data-toggle="tooltip" title="Update Record"><i class="fas fa-pen"></i></button>' +
                                /*'<button class="btn btn-danger btn-sm btn-delete" data-toggle="modal" data-target="#modal-delete" value="' + row['id'] + '" data-toggle="tooltip" title="Delete Record"><i class="fas fa-trash"></i></button>' +*/
                                '</div>';

                        }
                    },
                ],
                columnDefs: [
                    {className: "dt-nowrap", targets: [5]},
                    {orderable: false, targets: 6},
                ],
                order: [[2, 'asc']],
                buttons: [{
                    text: '<i class="fas fa-plus-square" data-toggle="tooltip" title="Add User"/></i> Add',
                    className: "btn-add btn-flat",
                    autoClose: 'true',
                    action: function (e, dt, node, config) {
                        $('#modal-add').modal('show')
                    }
                }, {
                    text: '<i class="fas fa-file-export" data-toggle="tooltip" title="Send Email"/></i> Export',
                    extend: 'collection',
                    className: "btn-export btn-flat",
                    buttons:
                        [{
                            extend: "pdf",
                            className: "btn-primary",
                            text: '<i class="fas fa-file-pdf" data-toggle="tooltip" title="Export to PDF"/></i> .pdf',
                            exportOptions: {
                                columns: [0, 1, 2, 3, 4, 5]
                            }
                        }, {
                            extend: "csv",
                            className: "btn-primary",
                            text: '<i class="fas fa-file-excel" data-toggle="tooltip" title="Export to CSV"/></i> .csv',
                            exportOptions: {
                                columns: [0, 1, 2, 3, 4, 5]
                            }
                        }],
                }],
                /*      "dom":
                          "<'row'<'col-sm-5'B>>" +
                          "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
                          "<'row'<'col-sm-12'rt>>" +
                          "<'row'<'col-sm-5'i><'col-sm-7'p>>",*/
                "dom":
                    "<'row'<'col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12'B>>" +
                    "<'row'<'col-xs-6 col-sm-6'l><'col-xs-6 col-sm-6'f>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-5'i><'col-sm-7'p>>",
            });

            /* $('div.toolbar').html('<div class="input-group"><a class="btn btn-info btn-add" data-toggle="modal" data-target="#modal-add" data-toggle="tooltip" title="Add Record"><span style="color: white;">Add User</span></a></div>');*/

            $(document).on('click', '.btn-delete', function (e) {
                $('#delete-user-id').val($(this).attr('value'));
            })

            $(document).on('click', '.btn-edit', function (e) {
                $('.update-confirm-password').val('').css('border', '')
                $('.update-password').val('').css('border', '')
                $('.input-update').css('border', '')
                var currentRow = $(this).closest("tr");
                var id = currentRow.find("td:eq(0)").text();
                var username = currentRow.find("td:eq(1)").text();
                var display_name = currentRow.find("td:eq(2)").text();
                var email = currentRow.find("td:eq(3)").text();
                var role = currentRow.find("td:eq(4)").text();
                var is_active = currentRow.find("td:eq(5)").text();
                if ($('#userId').val() == id) {
                    $("#role").prop('disabled', true)
                } else {
                    $("#role").prop('disabled', false)
                }
                $('#user-id').val(id)
                $('#username').val(username)
                $('#email').val(email)
                $('#display-name-update').val(display_name)
                $("#status option").each(function () {
                    this.selected = (this.text == is_active);
                });
                $("#role option").each(function () {
                    this.selected = (this.text == role);
                });
                $('#edit_toogle_is_active').prop('checked', is_active == 'Active' ? true : false)

                $('#modal-edit').modal('show')
            })

            $('.btn-add').click(function (e) {
                $('.input-create').val('')
                $('.input-create').css('border', '')
            })

            $('.btn-deactivate').click(function (e) {
                $.ajax({
                    url: 'users/' + $('#delete-user-id').val(),
                    type: 'POST',
                    data: {
                        '_token': $('#_token').val(),
                        '_method': 'delete'
                    },
                    dataType: 'html',
                    beforeSend: function () {
                    },
                    success: function () {
                        Command: toastr["warning"]("Deactivated!")
                        $('#user-table').DataTable().ajax.reload();
                    },
                    complete: function () {
                        $('#modal-delete').modal('hide')
                    },
                    error: function (xhr) {
                        Command: toastr["info"]("Session timeout detected.", "Session Timeout!")
                        setTimeout(function (e) {
                            window.location.href = "/"
                        }, 3000)
                    },
                });
            })

            $('.btn-confirm').click(function (e) {
                var password, confirm_password, error = false, required = []
                confirm_password = $('.input-create.confirm-password').val()
                password = $('.input-create.password').val()
                $('.input-create').each(function (e) {
                    if ($(this).val() == '') {
                        if ($('.drp-usertype').val() == 1 || $('.drp-usertype').val() == 2) {
                            if ($(this).attr('name') != 'location') {
                                $(this).css('border', '1px solid red')
                                error = true;
                                required.push($(this).data('label') + " is required");
                            } else {
                                $(this).css('border', '')
                            }
                        } else {
                            $(this).css('border', '1px solid red')
                            error = true;
                            required.push($(this).data('label') + " is required");
                        }
                    } else {
                        if ($(this).attr('name') == 'email') {
                            var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                            if (!regex.test($(this).val())) {
                                $(this).css('border', '1px solid red')
                                error = true;
                                required.push($(this).data('label') + " is not valid");
                            }
                        } else {
                            $(this).css('border', '')
                        }
                    }
                })


                if (!error) {
                    if (password.length >= 5) {
                        if (password != confirm_password) {
                            error = true;
                            required.push('Password and Confirm Password do not match');
                            $('.input-create').each(function (e) {
                                if ($(this).attr('name') == 'password' || $(this).attr('name') == 'password_confirmation') {
                                    $(this).css('border', '1px solid red')
                                }
                            })
                        } else {
                            $('.input-create').each(function (e) {
                                if ($(this).attr('name') == 'password' || $(this).attr('name') == 'password_confirmation') {
                                    $(this).css('border', '')
                                }
                            })
                        }
                    } else {
                        error = true;
                        required.push('Password must be at least 5 characters');
                        $('.input-create').each(function (e) {
                            if ($(this).attr('name') == 'password' || $(this).attr('name') == 'password_confirmation') {
                                $(this).css('border', '1px solid red')
                            }
                        })
                    }
                }
                if (error) {
                    Command: toastr["error"](required.join("<br>"), "Failed!")
                } else {
                    $.ajax({
                        url: 'users',
                        type: 'POST',
                        data: $('#form-add').serialize(),
                        beforeSend: function () {

                        },
                        success: function (response) {
                            if (response == 'success') {
                                Command: toastr["success"]("Success!")
                                $('#user-table').DataTable().ajax.reload();
                                $('#modal-add').modal('hide')
                                $('#username-create').css('border', '')
                            } else {
                                $('#username-create').css('border', '1px solid red')
                                Command: toastr["error"]("Username already exist!")
                            }
                        },
                        error: function (xhr) {
                            Command: toastr["info"]("Session timeout detected.", "Session Timeout!")
                            setTimeout(function (e) {
                                window.location.href = "/"
                            }, 3000)
                            //Command: toastr["error"]("Income file seems not from eric system or manual modification detected", "Failed!")
                        },
                    });
                }
            })

            $('.btn-update').click(function (e) {
                var password, confirm_password, error = false, required = []
                confirm_password = $('.update-confirm-password')
                password = $('.update-password')
                $('.input-update').each(function (e) {
                    if ($(this).val() == '') {
                        if ($('.drp-usertype-update').val() == 1 || $('.drp-usertype-update').val() == 2) {
                            if ($(this).attr('name') != 'location') {
                                $(this).css('border', '1px solid red')
                                error = true;
                                required.push($(this).data('label') + " is required");
                            } else {
                                $(this).css('border', '')
                            }
                        } else {
                            $(this).css('border', '1px solid red')
                            error = true;
                            required.push($(this).data('label') + " is required");
                        }
                    } else {
                        if ($(this).attr('name') == 'email') {
                            var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                            if (!regex.test($(this).val())) {
                                $(this).css('border', '1px solid red')
                                error = true;
                                required.push($(this).data('label') + " is not valid");
                            }
                        } else {
                            $(this).css('border', '')
                        }
                    }
                })

                if (!error) {
                    if (password.val().length != 0 || confirm_password.val().length != 0) {
                        if (password.val().length >= 5) {
                            if (password.val() != confirm_password.val()) {
                                error = true;
                                required.push('Password and Confirm Password do not match');
                                password.css('border', '1px solid red')
                                confirm_password.css('border', '1px solid red')
                            } else {
                                password.css('border', '')
                                confirm_password.css('border', '')
                            }
                        } else {
                            error = true;
                            required.push('Password must be at least 5 characters');
                            password.css('border', '1px solid red')
                            confirm_password.css('border', '1px solid red')
                        }
                    } else {
                        password.css('border', '')
                        confirm_password.css('border', '')
                    }
                }

                if (error) {
                    Command: toastr["error"](required.join("<br>"), "Failed!")
                } else {
                    $('#edit_toogle_is_active').is(':checked') ? $('#edit_is_active').val(1) : $('#edit_is_active').val(0)
                    $.ajax({
                        url: 'users/' + $('#user-id').val(),
                        type: 'PUT',
                        data: $('#form-edit').serialize(),
                        beforeSend: function () {
                        },
                        success: function (response) {
                            if (response == 'success') {
                                Command: toastr["success"]("Success!")
                                $('#user-table').DataTable().ajax.reload();
                                $('#modal-edit').modal('hide')
                                $('#username').css('border', '')
                            } else {
                                $('#username').css('border', '1px solid red')
                                Command: toastr["error"]("Username already exist!")
                            }
                        },
                        complete: function () {
                        },
                        error: function (xhr) {
                            Command: toastr["info"]("Session timeout detected.", "Session Timeout!")
                            setTimeout(function (e) {
                                window.location.href = "/"
                            }, 3000)
                        },
                    });
                }
            })
        })
    </script>
@endsection