<?php
// Articles Listing page
include 'header.php';
?>

<div class="row">
    <div class="col-xs-12">
        <div class="card">
            <div class="card-header">
                <h3 class="header-title">GROUPS</h3>
            </div>
            <div class="card-body">
                <div class="row button-row" style=" padding-left: 15px; padding-right: 15px; margin-top: 15px;">
                    <div class="col-sm-12">
                        <button type="button" class="btn btn btn-success btn-add-user"  data-toggle="modal" data-target="#modal-add">Add</button>
                        <button type="button" class="btn btn-danger btn-multi-delete" data-toggle="modal" data-target="#modal-multi-delete" disabled>Delete</button>
                    </div>
                </div>


                <table class="datatable1 table table-striped primary list-table" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th class="remove checkbox-td"><input type="checkbox" class="sh-checkbox-all"></th>
                            <th>Title</th>
                            <th>Username</th>
                            <th>Image</th>
                            <th>Edit</th>
                            <th>Delete</th>
                        </tr>
                    </thead>
                    <tbody class="admin-user">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!--Popup for Delete Single Admin Entry-->
<div class="modal fade" id="modal-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" >
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Delete Entry</h4>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this entry? </p>
                <input type="hidden" id="inp-id-hidden" >
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
                <button type="button" class="btn btn-delete btn-primary">Yes</button>
            </div>
        </div>
    </div>
</div>

<!--Popup for Delete Single Admin Entry-->
<div class="modal fade" id="modal-multi-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Delete Entry</h4>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this multiple entry? </p>
                <input type="hidden" id="inp-id-hidden" >
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
                <button type="button" class="btn btn-multi-delete-yes btn-primary">Yes</button>
            </div>
        </div>
    </div>
</div>


<!-- Modal Large Size -->
<div class="modal fade" id="modal-add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Add</h4>
            </div>
            <form class="add-form">
                <div class="modal-body sh-add-user-body">
                    <div class="form-group" style="position: relative;">
                        <label>Title: </label>
                        <input class="form-control" type="text" required name="title" id="title" placeholder="Enter title">
                        <span class="error-message">Fill this correctly</span>
                    </div>
                    <div class="form-group" style="position: relative;">
                        <label>Username: </label>
                        <input class="form-control" type="text" required name="qualification" id="qualification" placeholder="Enter username. Ex:android-test">
                        <span class="error-message">Fill this correctly</span>
                    </div>

                    <div class="fileupload fileupload-new" data-provides="fileupload">
                        <label style="text-align: left; width: 100%; display: inline-block; float: left; font-weight: normal;" class="control-label">Image:</label>
                        <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"><img src="images/placeholder.jpg"  alt="Placeholder" id="product-image"/></div>
                        <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 145px; line-height: 10px;"></div>
                        <div>
                            <span class="btn btn-default btn-file"><span class="fileupload-new fs2 color-1">Upload Photo</span><span class="fileupload-exists">Change</span><input type="file" id="upload-img" accept="image/*" onchange="" class="upload-img" name="upload-img"/></span>
                            <a href="#" class="btn btn-default fileupload-exists" data-dismiss="fileupload">Remove</a>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-save btn-success">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Large Size -->
<div class="modal fade" id="modal-update" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Update</h4>
            </div>
            <form class="edit-form">
                <div class="modal-body sh-add-user-body">
                    <input type="hidden" id="inpu-id-hidden" >
                    <div class="form-group" style="position: relative;">
                        <label>Title: </label>
                        <input class="form-control" type="text" required name="title-update" id="title-update" placeholder="Enter title">
                        <span class="error-message">Fill this correctly</span>
                    </div>
                    <div class="form-group" style="position: relative;">
                        <label>Username: </label>
                        <input class="form-control" type="text" required name="qualification-update" id="qualification-update" placeholder="Enter username. Ex:android-test">
                        <span class="error-message">Fill this correctly</span>
                    </div>

                    <div class="fileupload fileupload-new" data-provides="fileupload">
                        <label style="text-align: left; width: 100%; display: inline-block; float: left; font-weight: normal;" class="control-label">Image:</label>
                        <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"><img src="images/placeholder.jpg"  alt="Placeholder" id="product-image1"/></div>
                        <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 145px; line-height: 10px;"></div>
                        <div>
                            <span class="btn btn-default btn-file"><span class="fileupload-new fs2 color-1">Upload Photo</span><span class="fileupload-exists">Change</span><input type="file" id="upload-img" accept="image/*" onchange="" class="upload-img" name="upload-img"/></span>
                            <a href="#" class="btn btn-default fileupload-exists" data-dismiss="fileupload">Remove</a>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-update btn-success">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>


<?php include 'footer.php'; ?>

<script type="text/javascript">
    var placementFrom = "top";
    var placementAlign = "right";
    var animateEnter = "";
    var animateExit = "";
    var colorName = "bg-green";
    var dataTable;

    initialiseDatatable();

    function initialiseDatatable() {
        $('.datatable1').dataTable().fnDestroy();
        $('.directory-list').html('');
        if ($.fn.dataTable.isDataTable('.datatable1')) {
            $('.datatable1').DataTable().clear().destroy();
        }
        dataTable = $('.datatable1').DataTable({
            language: {
                searchPlaceholder: "Search"
            },
            "processing": true,
            "stateSave": true,
            "bDestroy": true,
            "serverSide": true,
            "bAutoWidth": false,
            "searching": true,
            "destroy": true,
            "columnDefs": [
                {
                    "targets": [0],
                    "searchable": false,
                    "orderable": false,
                    "visible": true,
                }, {
                    "targets": [1],
                    "searchable": true,
                    "orderable": true,
                    "visible": true,
                }, {
                    "targets": [2],
                    "searchable": true,
                    "orderable": true,
                    "visible": true,
                }, {
                    "targets": [3],
                    "searchable": false,
                    "orderable": false,
                    "visible": true,
                }, {
                    "targets": [4],
                    "searchable": false,
                    "orderable": false,
                    "visible": true,
                }
            ],
            "order": [
                [1, "desc"]
            ],
            "lengthMenu": [[50, 100, 200, -1], [50, 100, 200, "All"]],
            "ajax": {
                url: "controllers/get_groups.php", // json datasource
                type: "post", // method  , by default get
                data: {
                },
                error: function () { // error handling
                    $(".team-members").append('<tr><td colspan="8">No data found</td></tr>');
                }
            }
        });
        $('input[type="search"]').addClass('txt-search');
    }

    $('.btn-delete').click(function () {
        $.ajax({url: 'controllers/delete_group.php',
            data: {
                id: $("#inp-id-hidden").val(),
                type: 0
            },
            type: 'post',
            dataType: 'JSON',
            success: function (output) {
                if (output.status == "200") {
                    $('#modal-delete').modal('hide');
                    $('.modal-backdrop').remove();
                    $('.sh-delete1').filter(
                            function () {
                                if ($(this).parent('a').data("id") == $("#inp-id-hidden").val()) {
                                    $(this).closest('tr').remove();
                                }
                            }
                    );
                    showNotification(colorName, "Deleted successfully ", placementFrom, placementAlign, animateEnter, animateExit);
                }
            }
        });
    });

    $(".sh-checkbox-all").change(function () {
        if (this.checked) {
            $(".sh-checkbox").prop("checked", true);
            $(".btn-multi-delete").attr('disabled', false);
        } else {
            $(".sh-checkbox").prop("checked", false);
            $(".btn-multi-delete").prop('disabled', true);
            $(".sh-checkbox-all").prop("checked", false);
        }
    });

    $("body").on('change', '.sh-checkbox', function () {
        if (!this.checked) {
            $(".sh-checkbox-all").prop("checked", false);
        }
        $(".btn-multi-delete").attr('disabled', true);
        enableButton();
    });

    function enableButton() {
        $(".btn-multi-delete").attr('disabled', true);
        $(".sh-checkbox").each(function () {
            if ($(this).prop("checked") == true) {
                $(".btn-multi-delete").attr('disabled', false);
            }
        });
    }

    $("body").on('click', '.btn-multi-delete-yes', function () {

        var selchDeleteBox = []; // initialize empty array 
        $(".multiDelete:checked").each(function () {
            selchDeleteBox.push($(this).val());
        });
        if (selchDeleteBox.length > 0)
        {
            $.ajax({url: 'controllers/delete_group.php',
                data: {
                    id: selchDeleteBox,
                    type: 1,
                },
                type: 'post',
                dataType: 'JSON',
                success: function (output) {
//                        console.log(output.status);
                    if (output.status == "200") {
                        $('#modal-multi-delete').modal('hide');
                        $('.modal-backdrop').remove();
                        showNotification(colorName, "Deleted successfully", placementFrom, placementAlign, animateEnter, animateExit);
                        initialiseDatatable();
                    }
                }
            });
        }
    });


    $(".add-form").submit(function (e) {
        $(".error-message").css("display", "none");
        var error = 0;
        if ($("#title").val() == "") {
            $("#title").siblings(".error-message").css("display", "block");
            error = 1;
        }
        if ($("#qualification").val() == "") {
            $("#qualification").siblings(".error-message").css("display", "block");
            error = 1;
        }

        if (error == 0) {
            $(".add-form").prop('disabled', true);
            $('.loader-img').show();
            var dataimg = new FormData(this);

            dataimg.append('title', $('#title').val().trim());
            dataimg.append('name', $('#qualification').val().trim());

            $.ajax({url: 'controllers/group.php',
                type: 'post',
                data: dataimg,
                processData: false,
                contentType: false,
                dataType: 'JSON',
                success: function (output) {
                    console.log(output);
                    $('.loader-img').hide();
                    if (output.status == 200) {
                        $('#title').val('');
                        $('#qualification').val('');
                        $('#qualification').val('');
                        $('.fileupload-exists').trigger('click');
                        $('#modal-add').modal('hide');
                        $('.modal-backdrop').remove();

                        showNotification(colorName, output.msg, placementFrom, placementAlign, animateEnter, animateExit);
                        initialiseDatatable();
                    } else {
                        showNotification("bg-orange", output.message, placementFrom, placementAlign, animateEnter, animateExit);
                    }
                }
            });
        }

        e.preventDefault();
    });


//    $("body").on('click', '.btn-save', function () {
//        $(".error-message").css("display", "none");
//        var error = 0;
//
//        if (error == 0) {
//            $.ajax({url: 'controllers/group.php',
//                data: {
//                    title: $('#title').val().trim(),
//                    name: $('#qualification').val().trim(),
//                },
//                type: 'post',
//                dataType: 'JSON',
//                success: function (output) {
//                    console.log(output.status);
//                    if (output.status == "200") {
//                        $('#title').val('');
//                        $('#qualification').val('');
//                        $('#modal-add').modal('hide');
//                        $('.modal-backdrop').remove();
//                        showNotification(colorName, output.msg, placementFrom, placementAlign, animateEnter, animateExit);
//                        initialiseDatatable();
//                    } else {
//                        showNotification('bg-orange', output.msg, placementFrom, placementAlign, animateEnter, animateExit);
//                    }
//                }
//            });
//        }
//    });

    $("body").on('click', '.sh-edit', function () {
        $("#inpu-id-hidden").val($(this).attr('data-id'));
        $("#qualification-update").val($(this).attr('data-name'));
        $("#title-update").val($(this).attr('data-title'));
        $('#product-image1').attr("src", $(this).attr('data-image'));
    });

    $("body").on('click', '.sh-delete1', function () {
        $("#inp-id-hidden").val($(this).parent().attr('data-id'));
    });

//    $("body").on('click', '.btn-update', function () {
//        $(".error-message").css("display", "none");
//        var error = 0;
//        if ($("#title-update").val() == "") {
//            $("#title-update").siblings(".error-message").css("display", "block");
//            error = 1;
//        }
//        if ($("#qualification-update").val() == "") {
//            $("#qualification-update").siblings(".error-message").css("display", "block");
//            error = 1;
//        }
//        if (error == 0) {
//            $.ajax({url: 'controllers/group.php',
//                data: {
//                    id: $('#inpu-id-hidden').val(),
//                    title: $('#title-update').val(),
//                    name: $('#qualification-update').val(),
//                },
//                type: 'post',
//                dataType: 'JSON',
//                success: function (output) {
//                    console.log(output.status);
//                    if (output.status == "200") {
//                        $("#title-update").val("");
//                        $("#qualification-update").val("");
//                        $('#modal-update').modal('hide');
//                        $('.modal-backdrop').remove();
//                        showNotification(colorName, output.msg, placementFrom, placementAlign, animateEnter, animateExit);
//                        initialiseDatatable();
//                    } else if (output.status == "400") {
//                        showNotification(colorName, output.msg, placementFrom, placementAlign, animateEnter, animateExit);
//                    } else if (output.status == "300") {
//                        showNotification(colorName, output.msg, placementFrom, placementAlign, animateEnter, animateExit);
//                    }
//                }
//            });
//        }
//    });


    $(".edit-form").submit(function (e) {
        $(".error-message").css("display", "none");
        var error = 0;
        if ($("#title-update").val() == "") {
            $("#title-update").siblings(".error-message").css("display", "block");
            error = 1;
        }
        if ($("#qualification-update").val() == "") {
            $("#qualification-update").siblings(".error-message").css("display", "block");
            error = 1;
        }

        if (error == 0) {
            $(".edit-form").prop('disabled', true);
            $('.loader-img').show();
            var dataimg = new FormData(this);

            dataimg.append('title', $('#title-update').val().trim());
            dataimg.append('name', $('#qualification-update').val().trim());
            dataimg.append('id', $('#inpu-id-hidden').val().trim());

            $.ajax({url: 'controllers/group.php',
                type: 'post',
                data: dataimg,
                processData: false,
                contentType: false,
                dataType: 'JSON',
                success: function (output) {
                    console.log(output);
                    $('.loader-img').hide();
                    if (output.status == 200) {
                        $('#title-update').val('');
                        $('#qualification-update').val('');
                        $('.fileupload-exists').trigger('click');
                        $('#modal-update').modal('hide');
                        $('.modal-backdrop').remove();

                        showNotification(colorName, output.msg, placementFrom, placementAlign, animateEnter, animateExit);
                        initialiseDatatable();
                    } else {
                        showNotification("bg-orange", output.message, placementFrom, placementAlign, animateEnter, animateExit);
                    }
                }
            });
        }

        e.preventDefault();
    });


</script>