
<div class="row grid-margin">
    <div class="col-md-6">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Groups</h4>
                <p class="card-description">List of Groups</p>
                <div id="group_grid"></div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">SubGroups</h4>
                <p class="card-description">List of SubGroups</p>
                <label class="control-label">Parent Group</label>
                <select class='form-control' id="parent_group" onchange="loadSubGroup()">
                    <?php 
                        foreach($groups as $value)
                        {
                            echo "<option value='{$value["id"]}'>{$value["group_name"]}</option>";
                        }
                    ?>
                </select>
                <br/>
                <div id="subgroup_grid">
                </div>
            </div>
        </div>
    </div>
</div>
<script>
$(function() {

    $("#group_grid").jsGrid({
        height: "400px",
        width: "100%",
        inserting: true,
        editing: true,
        sorting: true,
        paging: true,
        autoload: true,
        pageSize: 10,
        pageButtonCount: 2,
        deleteConfirm: "Do you really want to delete client?",
        controller: {
            loadData: function(filter) {
                return $.ajax({
                    type: "GET",
                    url: "<?=site_url()?>/group/get_groups",
                    data: filter
                });
            },
            insertItem: function(item) {
                if(item.group_name == ''){

                }else{
                    return $.ajax({
                        type: "POST",
                        url: "<?=site_url()?>/group/add_group",
                        data: item,
                        success: function(res) {
                            location.reload();
                        }
                    });
                }
                
            },
            updateItem: function(item) {
                return $.ajax({
                    type: "POST",
                    url: "<?=site_url()?>/group/update_group",
                    data: item,
                    success: function(res) {
                        location.reload();
                    }
                });
            },
            deleteItem: function(item) {
                return $.ajax({
                    type: "POST",
                    url: "<?=site_url()?>/group/delete_group",
                    data: item,
                    success: function(res) {
                        location.reload();
                    }
                });
            }
        },
        fields: [
            { name: "id", title: "No", type: "number", editing: false, width: 50, inserting: false },
            { name: "group_name", title: "Name", type: "text", width: 150, validate: "required"},
            { type: "control" }
        ]
    });

    $("#subgroup_grid").jsGrid({
        height: "400px",
        width: "100%",
        inserting: true,
        editing: true,
        sorting: true,
        paging: true,
        autoload: true,
        pageSize: 10,
        pageButtonCount: 2,
        deleteConfirm: "Do you really want to delete client?",
        controller: {
            loadData: function(filter) {
                var parent_id = $("#parent_group").val();
                return $.ajax({
                    type: "GET",
                    url: "<?=site_url()?>/group/get_subgroups/" + parent_id,
                    data: filter
                });
            },
            insertItem: function(item) {
                var parent_id = $("#parent_group").val();
                return $.ajax({
                    type: "POST",
                    url: "<?=site_url()?>/group/add_subgroup/" + parent_id,
                    data: item
                });
            },
            updateItem: function(item) {
                var parent_id = $("#parent_group").val();
                return $.ajax({
                    type: "POST",
                    url: "<?=site_url()?>/group/update_subgroup/" + parent_id,
                    data: item
                });
            },
            deleteItem: function(item) {
                var parent_id = $("#parent_group").val();
                return $.ajax({
                    type: "POST",
                    url: "<?=site_url()?>/group/delete_subgroup/" + parent_id,
                    data: item
                });
            }
        },
        fields: [
            { name: "id", title: "No", type: "number", editing: false, width: 50, inserting: false },
            { name: "group_name", title: "Name", type: "text", width: 150, validate: "required"},
            { type: "control" }
        ]
    });
});

function loadSubGroup(){
    $("#subgroup_grid").jsGrid("loadData");
}

</script>
