<?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">Top languages with signup</h3>
            </div>
			<div class="col-xs-12 mt-3 mb-3 display-flex index-filter">  
				<p><strong>Select Date:</strong> <input type="text" id="date" class="form-control date-range-input" readonly="" value=""></p>
				<p class="p-button mobile-left"><button type="button" class="btn btn-primary" id="btn-filter">Filter</button></p>
				<p class="p-button mobile-right"><button type="button" class="btn btn-cancel" id="btn-clear">Clear Filter</button></p>
            </div>
            <div class="card-body no-padding">
                <table class="datatable1 table table-striped primary list-table" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>Language Name</th>
							<th>Users</th>
                        </tr>
                    </thead>
                    <tbody class="admin-user">
                        <?php // include 'controllers/get_articles_list.php';  ?>
                    </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 Language</h4>
            </div>
            <div class="modal-body sh-add-user-body">
                <form role="form" >
                    <div class="form-group" style="position: relative;">
                        <label>Language: </label>
                        <input class="form-control" type="text" required name="category" id="category" placeholder="Enter Language">
                        <span class="error-message">Fill this correctly</span>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-save btn-success">Save</button>
            </div>
        </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">Language Category</h4>
            </div>
            <div class="modal-body sh-add-user-body">
                <form role="form" >
                    <input type="hidden" id="inpu-id-hidden" >
                    <div class="form-group" style="position: relative;">
                        <label>Language: </label>
                        <input class="form-control" type="text" required name="category-update" id="category-update" placeholder="Enter category">
                        <span class="error-message">Fill this correctly</span>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-update btn-success">Update</button>
            </div>
        </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 request_start = '';
    var request_end = '';
	updateConfig();	
    function updateConfig() {
        var options = {};
        options.linkedCalendars = true;
        options.autoUpdateInput = true;
        options.showCustomRangeLabel = false;
        options.alwaysShowCalendars = true;
//        options.startDate = moment().startOf('week').add(1, 'days');
//        options.endDate = moment().endOf('week').add(1, 'days');
        options.startDate = false;
        options.endDate = false;
        options.opens = "left";

        options.locale = {
            direction: 'ltr',
            format: 'DD MMM, YYYY',
            separator: ' - ',
            applyLabel: 'Apply',
            cancelLabel: 'Cancel',
            fromLabel: 'From',
            toLabel: 'To',
            customRangeLabel: 'Custom',
            daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
            monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
            firstDay: 1
        };

        options.ranges = {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'This Week': [moment().startOf('week').add(1, 'days'), moment().endOf('week').add(1, 'days')],
            'Last Week': [moment().startOf('week').subtract(6, 'days'), moment().endOf('week').subtract(6, 'days')],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
            'This Year': [moment().startOf('year'), moment().endOf('year')],
            'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')]
        };



        $('#date').daterangepicker(options, function (start, end, label) {
            request_start = start.format('YYYY-MM-DD');
            request_end = end.format('YYYY-MM-DD');
            console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
        });

        $('#date').val('');
    }
	
	$("body").on('click', '#btn-clear', function () {
        $('#date').val('');
        request_start = '';
        request_end = '';
		$("#language_id").val(0);
        initialiseDatatable();
    });
	
    $('#btn-filter').on('click', function (e) {
        initialiseDatatable();
    });
    $("body").on('click', '.sh-delete', function () {
        $("#inp-id-hidden").val($(this).parent().attr('data-id'));
        $('#modal-delete').modal('show');

    });

    $("body").on('click', '.btn-multi-delete', function () {
        $('#modal-multi-delete').modal('show');
    });


    initialiseDatatable();

    function initialiseDatatable() {
        $('.datatable1').dataTable().fnDestroy();
        $('.admin-user').html('');
        $.ajax({url: 'controllers/get_statistics_list.php',
           data: {
                start_date: request_start,
                end_date: request_end,
				type: 0,
            },
            type: 'post',
            success: function (output) {
                $('.admin-user').html(output);
                enableButton();

                var datatable = $('.datatable1').DataTable({
                    "dom": '<"top"fl<"clear">>rt<"bottom"ip<"clear">>',
                    "oLanguage": {
                        "sSearch": "",
                        "sLengthMenu": "_MENU_"
                    },
                    "initComplete": function initComplete(settings, json) {
                        $('div.dataTables_filter input').attr('placeholder', 'Search...');
                    },
					"order": [[ 1, 'DESC' ]],
					"lengthMenu": [[20, 50, 100, -1], [20, 50, 100, "All"]]
                });
                $('#DataTables_Table_0_filter input').addClass('form-control').addClass('input-sm');
				displayPageInfo();
            }
        });
		
    }

    $('.btn-delete').click(function () {
        $.ajax({url: 'controllers/delete_language.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();

                    showNotification(colorName, "Deleted successfully ", placementFrom, placementAlign, animateEnter, animateExit);
                    initialiseDatatable();
                }
            }
        });
    });

    $(".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_language.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();
                    }
                }
            });
        }
    });

    $("body").on('click', '.btn-save', function () {
        $(".error-message").css("display", "none");
        var error = 0;
        var filter = /^([a-zA-Z0-9_\.\-]{2,30})+\@(([a-zA-Z0-9\-]{2,40})+\.)+([a-zA-Z0-9]{2,4})+$/;


        if ($("#category").val() == "") {
            $("#category").siblings(".error-message").css("display", "block");
            error = 1;
        }

        if (error == 0) {
            $.ajax({url: 'controllers/add_language.php',
                data: {
                    name: $('#category').val().trim(),
                },
                type: 'post',
                dataType: 'JSON',
                success: function (output) {
                    console.log(output.status);
                    if (output.status == "200") {
                        $('#category').val('');
                        $('#modal-add').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);
                    }
                }
            });
        }
    });


    $("body").on('click', '.sh-edit', function () {
        $("#inpu-id-hidden").val($(this).parent().attr('data-id'));
        $("#category-update").val($(this).parent().attr('data-name'));
    });


    $("body").on('click', '.btn-update', function () {
        $(".error-message").css("display", "none");
        var error = 0;
        if ($("#category-update").val() == "") {
            $("#category-update").siblings(".error-message").css("display", "block");
            error = 1;
        }


        if (error == 0) {
            $.ajax({url: 'controllers/add_language.php',
                data: {
                    id: $('#inpu-id-hidden').val(),
                    name: $('#category-update').val(),
                },
                type: 'post',
                dataType: 'JSON',
                success: function (output) {
                    console.log(output.status);
                    if (output.status == "200") {
                        $("#category-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);
                    }
                }
            });
        }
    });
	function displayPageInfo() {
		$(".dataTables_info").each(function() {
		  $(this).prependTo($(this).closest(".dataTables_wrapper"));
		});
	}
</script>