@extends('admin.layouts.master')

@section('css')
    <!-- DataTables -->
    <link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
@endsection
@section('title')
    {{'Manage Users'}}
@endsection
@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Manage Users</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Users</a></li>
                        <li class="breadcrumb-item active">Manage Users</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="col-sm-9">
                                        <h3 class="card-title">List of User</h3>
                                    </div>
                                    @can('create-users')
                                        <div class="col-sm-3 float-right">
                                            <button class="btn ml-auto" id="createNewUser"
                                                    style="background: #1e7e34; color: white"><i
                                                    class="fa fa-plus"></i>&nbsp;Add User
                                            </button>
                                            <button class="btn ml-auto" id="importNewUser"
                                                    style="background: #1e7e34; color: white"><i
                                                    class="fa fa-plus"></i>&nbsp;Import Users
                                            </button>
                                        </div>
                                    @endcan
                                </div>
                            </div>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <div id="example1_wrapper" class="dataTables_wrapper dt-bootstrap4">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <table id="dataTable" class="table table-striped table-bordered">
                                            <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Username</th>
                                                <th>Name</th>
                                                <th>Email</th>
                                                 <th>Roles</th>
                                                <th width="280px">Action</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
        {{-- create/update user modal--}}
        <div class="modal fade" id="userModel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div id="spiner">

                    </div>
                    <form id="userForm" name="userForm" class="form-horizontal">
                        <div class="modal-header">
                            <h4 class="modal-title" id="modelHeading"></h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <input type="hidden" name="user_id" id="user_id">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <label for="username" class="control-label">Username</label>
                                        <input type="text" class="form-control" id="username" name="username"
                                               placeholder="Username"
                                               value="" maxlength="50" required="" autocomplete="off">
                                    </div>
                                    <div class="col-sm-6">
                                        <label for="first_name" class="control-label">First Name</label>
                                        <input type="text" class="form-control" id="first_name" name="first_name"
                                               placeholder="First Name"
                                               value="" maxlength="50" required="" autocomplete="off">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <label for="middle_name" class="control-label">Midlle Name</label>
                                        <input type="text" class="form-control" id="middle_name" name="middle_name"
                                               placeholder="Middle Name"
                                               value="" maxlength="50" required="" autocomplete="off">
                                    </div>
                                    <div class="col-sm-6">
                                        <label for="last_name" class="control-label">Last Name</label>
                                        <input type="text" class="form-control" id="last_name" name="last_name"
                                               placeholder="Last Name"
                                               value="" maxlength="50" required="" autocomplete="off">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <label class="control-label">Email</label>
                                        <input type="email" class="form-control" id="email" name="email"
                                               placeholder="Email"
                                               value="" maxlength="50" required="" autocomplete="off">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <label class="control-label">Password</label>
                                        <input type="password" class="form-control" id="password" name="password"
                                               placeholder="Password"
                                               value="" maxlength="50" required="" autocomplete="off">
                                    </div>
                                    <div class="col-sm-6">
                                        <label class="control-label">Confirm Password</label>
                                        <input type="password" class="form-control" id="confirm-password"
                                               name="confirm-password"
                                               placeholder="Confirm Password"
                                               value="" maxlength="50" required="" autocomplete="off">
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">Roles</label>
                                <div class="col-sm-12">
                                    @foreach($roles as $role)
                                        <div class="form-check">
                                            <input value="{{$role->id}}" name="roles[]" id="roles{{$role->id}}"
                                                   class="form-check-input" type="checkbox">
                                            <label class="form-check-label">{{ucfirst($role->name)}}</label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <div class="alert alert-danger alert-dismissible" style="display: none">

                            </div>
                        </div>
                        <div class="modal-footer justify-content-between">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary" id="saveBtn"
                                    style="background: #1e7e34; color: white">Save
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- create/update user modal--}}
        <div class="modal fade" id="importUserModel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div id="spiner2">

                    </div>
                    <form id="importUserForm" name="importUserForm" enctype="multipart/form-data">
                        <div class="modal-header">
                            <h4>Import Users</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <!-- <label for="customFile">Custom File</label> -->

                                <div class="custom-file">
                                    <input type="file" class="custom-file-input" id="file"
                                           name="file">
                                    <label class="custom-file-label" for="file">Please upload a
                                        valid excel
                                        file.</label>
                                </div>
                            </div>
                            <div class="alert alert-danger alert-dismissible" style="display: none">

                            </div>
                        </div>
                        <div class="modal-footer justify-content-between">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button class="btn btn-primary" id="btn-import" style="background: #1e7e34; color: white">
                                Import User Data
                            </button>
                            <a class="btn btn-warning" href="{{ route('admin.users.export') }}"><i
                                    class="fa fa-download"></i>&nbsp;Download Template</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('js')
    <!-- DataTables -->
    <script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
    <script>
        $(function () {
            bsCustomFileInput.init();
        });
    </script>
    <script type="text/javascript">
        $(function () {

            //ajax setup
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // datatable
            var table = $('#dataTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ url('users') }}",
                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false},
                    {data: 'username', name: 'username'},
                    {data: 'full_name', name: 'full_name'},
                    {data: 'email', name: 'email'},
                    {data: 'roles', name: 'roles'},
                    {data: 'actions', name: 'actions', orderable: false, searchable: false},
                ]
            });

            // create new user
            $('#createNewUser').click(function () {
                $('#saveBtn').html("Create");
                $('#user_id').val('');
                $('#userForm').trigger("reset");
                $('.modal-title').html("Create New User");
                $('.alert-danger').html('');
                $('.alert-danger').hide();
                $('#userModel').modal('show');
            });

            // import new user
            $('#importNewUser').click(function () {
                $('#importUserForm').trigger("reset");
                $('#importUserModel').modal('show');
            });

            // create or update user
            $('#saveBtn').click(function (e) {
                e.preventDefault();
                // disabled the submit button
                $("#saveBtn").prop("disabled", true);
                $.ajax({
                    data: $('#userForm').serialize(),
                    url: "{{ url('users') }}",
                    type: "POST",
                    dataType: "json",
                    beforeSend: function () {
                        $('.alert-danger').html('');
                        $('.alert-danger').hide();
                        $('#spiner').html('<div class="overlay d-flex justify-content-center align-items-center">\n' +
                            '                        <i class="fas fa-2x fa-sync fa-spin"></i>\n' +
                            '                    </div>');
                        $("#saveBtn").prop("disabled", true);// disable button
                    },
                    success: function (data) {
                        $('#spiner').html('');
                        $("#saveBtn").prop("disabled", false);// disable button
                        if (data.type === 'success') {
                            Swal.fire({
                                position: 'top-center',
                                icon: 'success',
                                title: data.message
                               // showConfirmButton: false,
                               // timer: 3000
                            });
                            $('#userForm').trigger("reset");
                            $('#userModel').modal('hide');
                            table.draw();
                            $('#saveBtn').html('Save');
                        } else if (data.type === 'error') {
                            if (data.errors) {
                                $('.alert-danger').show();
                                $.each(data.errors, function (key, value) {
                                    $('.alert-danger').append('<p class="mb-0">' + value + '</p>');
                                });
                            }
                            Swal.fire({
                                title: 'Error saving data!',
                                text: 'Try again',
                                icon: 'error'
                                //showConfirmButton: false,
                               // timer: 3000
                            })
                        }
                    }
                });
            });

            // import users
            $('#btn-import').click(function (e) {
                e.preventDefault();
                // Get form
                var form = $('#importUserForm')[0];
                // Create an FormData object
                var formdata = new FormData(form);
                // disabled the submit button
                $("#btn-import").prop("disabled", true);
                $.ajax({
                    data: formdata,
                    url: "{{ route('admin.users.upload') }}",
                    type: "POST",
                    processData: false,
                    contentType: false,
                    beforeSend: function () {
                        $('.alert-danger').html('');
                        $('.alert-danger').hide();
                        $('#spiner2').html('<div class="overlay d-flex justify-content-center align-items-center">\n' +
                            '                        <i class="fas fa-2x fa-sync fa-spin"></i>\n' +
                            '                    </div>');
                        $("#saveBtn").prop("disabled", true);// disable button
                    },
                    success: function (data) {
                        $('#spiner2').html('');
                        $("#btn-import").prop("disabled", false);// disable button
                        if (data.type === 'success') {
                            Swal.fire({
                                position: 'top-center',
                                icon: 'success',
                                title: data.message
                                //showConfirmButton: false,
                                //timer: 3000
                            });
                            $('#importUserForm').trigger("reset");
                            $('#importUserModel').modal('hide');
                            table.draw();
                         } else if (data.type === 'error') {
                            if (data.errors) {
                                $('.alert-danger').show();
                                $.each(data.errors, function (key, value) {
                                    $('.alert-danger').append('<p class="mb-0">' + value + '</p>');
                                });
                            }
                            Swal.fire({
                                title: 'Error saving data!',
                                text: 'Try again',
                                icon: 'error'
                                //showConfirmButton: false,
                                //timer: 3000
                            })
                        }
                    },
                    error: function (data) {
                        $('#spiner2').html('');
                        Swal.fire({
                            title: 'Error saving data!',
                            text: 'Try again',
                            icon: 'error'
                           // showConfirmButton: false
                            //timer: 3000
                        })
                    }
                });
            });

            // edit user
            $('body').on('click', '.editUser', function () {
                var user_id = $(this).data('id');
                 $('#userForm').trigger("reset");
                $.get("{{ url('users') }}" + '/' + user_id + '/edit', function (data) {
                    $('.modal-title').html("Edit User");
                    $('#saveBtn').html('Update');
                    $('.alert-danger').html('');
                    $('.alert-danger').hide();
                    $('#userModel').modal('show');
                    $('#user_id').val(data.user.id);
                    $('#first_name').val(data.user.first_name);
                    $('#middle_name').val(data.user.middle_name);
                    $('#last_name').val(data.user.last_name);
                     $('#username').val(data.user.username);
                    $('#email').val(data.user.email);
                    $('#password').val(data.user.password);

                    $.each(data.roles, function (name, value) {
                        $("#roles" + value.id).prop('checked', true);
                    });
                })
            });

            // delete user
            $('body').on('click', '.deleteUser', function () {
                var user_id = $(this).data("id");
                Swal.fire({
                    title: "Are you sure?",
                    text: "Deleted data cannot be recovered!!",
                    icon: 'warning',
                    type: "warning",
                    showCancelButton: true,
                    closeOnConfirm: false,
                    showLoaderOnConfirm: true,
                    confirmButtonClass: "btn-danger",
                    confirmButtonText: "Delete",
                    cancelButtonText: "Cancel"
                }).then((result) => {
                    if (result.value) {
                        $.ajax({
                            type: "DELETE",
                            url: "{{ url('users') }}" + '/' + user_id,
                            beforeSend: function () {
                                $('.alert-danger').html('');
                                $('.alert-danger').hide();
                                $('#spiner').html('<div class="overlay d-flex justify-content-center align-items-center">\n' +
                                    '                        <i class="fas fa-2x fa-sync fa-spin"></i>\n' +
                                    '                    </div>');
                             },
                            success: function (data) {
                                $('#spiner').html('');
                                if (data.type === 'success') {
                                    Swal.fire({
                                        title: 'Deleted!',
                                        text: 'Successfully Deleted',
                                        icon: 'success'
                                       // showConfirmButton: false,
                                       // timer: 1500
                                    })
                                    table.draw();
                                } else if (data.type === 'danger') {
                                    Swal.fire({
                                        title: 'Error deleting!',
                                        text: 'Try again',
                                        icon: 'error'
                                       // showConfirmButton: false,
                                        //timer: 1500
                                    })
                                }
                            },
                            error: function (data) {
                                $('#spiner').html('');
                                Swal.fire({
                                    title: 'Error deleting!',
                                    text: 'Try again',
                                    icon: 'error'
                                    //showConfirmButton: false,
                                   // timer: 1500
                                })
                            }
                        });
                    }
                })
            });
        });


    </script>
@endsection