@extends('layouts.master')
@section('title') User Management @stop
@section('body')
    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <label class="control-label">Role</label>
                <select class="form-control role" name="role">
                    <option value="0">--</option>
                </select>
            </div>
            <div class="form-group">
                <label class="control-label">Name</label>
                <input type="text" class="form-control name clear" name="name">
            </div>
            <div class="form-group">
                <label class="control-label">Email</label>
                <input type="text" class="form-control email clear" name="email">
            </div>
            <div class="form-group">
                <label class="control-label">Password</label>
                <input type="password" class="form-control password clear" name="password">
            </div>
            <div class="form-group">
                <label class="control-labal">Confirm Password</label>
                <input type="password" class="form-control password_confirmation clear" name="password_confirmation">
            </div>


            <div class="form-group saveWrapper" style="display: none;">
                <button class="btn btn-primary save">Save</button>
            </div>
            <div class="form-group updateWrapper" style="display: none;">
                <button class="btn btn-warning clear update">Update</button>
                <button class="btn btn-info cancel">Cancel</button>
            </div>
        </div>
        <div class="col-md-8">
            <div class="form-group">
                <label class="control-label">&nbsp;List of Users</label>
                <div class="table-responsive">
                    <table class="table table-bordered users">
                        <thead>
                        <tr>
                            <th width="80px">#</th>
                            <th>Role</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th class="text-center" width="100px"><i class="fa fa-gear"></i></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <th class="text-center" colspan="5">Sorry, No results found.</th>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

@stop


@section('script')
    <script>
        $(function () {
            var _token = $('meta[name="_token"]').attr('content');

            $(document).ajaxStart(function () {
                $('button').data('loading-text', '...');
                $('button').button('loading');
            }).ajaxStop(function () {
                $('button').button('reset');
            });

            resetForm('save');


            loadRoles(function () {
                loadUserTable();
            });

            function loadRoles(callback) {
                $select = $('.role');
                $.post("{{ url('/user/loadRoles') }}", {_token: _token}, function (e) {
                    var dom = '';
                    if (typeof(e) == 'object' && Object.keys(e).length > 0) {
                        $.each(e, function (i, k) {
                            dom += '<option value="' + k.id + '">' + k.name + '</option>';
                        });
                    }
                    $select.html(dom);
                    if (callback !== undefined && typeof(callback) == 'function') {
                        callback();
                    }
                }, 'json')
            }

            function loadUserTable() {
                var $tbody = $('.users tbody');
                $('.selectedUser').html($('.role option:selected').text());
                $.post("{{ url('/user/loadUsers') }}", {_token: _token}, function (e) {
                    var dom = '';
                    if (typeof(e) == 'object' && Object.keys(e).length > 0) {
                        $.each(e, function (i, k) {

                            var role = Object.keys(k.roles).length > 0 ? k.roles[0] : {id: "", name: "-- not assigned --"};

                            dom += '<tr>';
                            dom += '<td>' + (i + 1) + '</td>';

                            dom += '<td>' + (role.name) + '</td>';

                            dom += '<td>' + (k.name) + '</td>';
                            dom += '<td>' + (k.email) + '</td>';
                            dom += '<td class="text-center"><div class="btn-group">';
                            
                            dom += '<button class="btn btn-sm btn-warning edit" data-id="' + k.id + '" data-role="' + role.id + '" data-name="' + k.name + '" data-email="' + k.email + '"><i class="fa fa-pencil"></i></button>';
                            dom += '<button class="btn btn-sm btn-danger delete" data-id="' + k.id + '"><i class="fa fa-trash"></i></button>';
                            dom += '</div></td>';
                            dom += '</tr>';
                        });
                    } else {
                        dom = '<tr><th class="text-center" colspan="5">Sorry, No results found.</th></tr>';
                    }
                    $tbody.html(dom);
                }, 'json');
            }

            function saveUser(data){
                $.post("{{ url('/user/save') }}", {_token: _token, data: data}, function(e){
                    $.highlightOrThrow(e, function(){
                        resetForm('save');
                        loadUserTable();
                    });
                }, 'json');
            }

            function updateUser(data){
                $.post("{{ url('/user/update') }}", {_token: _token, data: data}, function (e) {
                    $.highlightOrThrow(e, function () {
                        resetForm('save');
                        loadUserTable();
                    });
                }, 'json');
            }

            function deleteUser(id){
                $.post("{{ url('/user/delete') }}", {_token: _token, id: id}, function (e) {
                    $.highlightOrThrow(e, function () {
                        resetForm('save');
                        loadUserTable();
                    });
                }, 'json');
            }


            $(document).on('click', '.edit', function () {
                resetForm('update');

                $('.update').val($(this).data('id'));
                $('.role').val($(this).data('role'));
                $('.name').val($(this).data('name'));
                $('.email').val($(this).data('email'));
            });

            $(document).on('click', '.delete', function () {
                var id = $(this).data('id');

                bootbox.confirm("Are you sure you want to delete this record?", function (r) {
                    if (r) {
                        deleteUser(id);
                    }
                });
            });

            $('.cancel').click(function () {
                resetForm('save');
            });

            $('.save').click(function () {
                var data = {
                    role: $('.role').val(),
                    name: $('.name').val(),
                    email: $('.email').val(),
                    password: $('.password').val(),
                    password_confirmation: $('.password_confirmation').val(),
                };
                saveUser(data);
            });

            $('.update').click(function () {
                console.log("updated");
                var data = {
                    id: $(this).val(),
                    role: $('.role').val(),
                    name: $('.name').val(),
                    email: $('.email').val(),
                    password: $('.password').val(),
                    password_confirmation: $('.password_confirmation').val(),
                };
                updateUser(data);
            });


            function resetForm(method) {
                $('.clear').clear();
                $.clearHighlights();
                if (typeof(method) == 'string' && method.length > 0) {
                    if (method == 'save') {
                        $('.updateWrapper').hide();
                        $('.saveWrapper').show();
                    } else if (method == 'update') {
                        $('.saveWrapper').hide();
                        $('.updateWrapper').show();
                    }
                }
            }

            function deleteVehicle(id) {
                $.post("{{ url('/vehicle/deleteVehicle') }}", {_token: _token, id: id}, function (e) {
                    $.highlightOrThrow(e, function () {
                        resetForm('save');
                        loadVehiclesTable();
                    });
                }, 'json');
            }

            function updateVehicle(data) {
                $.post("{{ url('/vehicle/updateVehicle') }}", {_token: _token, data: data}, function (e) {
                    $.highlightOrThrow(e, function () {
                        resetForm('save');
                        loadVehiclesTable();
                    });
                }, 'json');
            }



        });
    </script>
@stop