<?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">USER SUGGESTIONS</h3>

            </div>

            <div class="col-xs-12" style="margin-top: 10px;">
                <button type="button" class="btn btn-primary btn-excel" style="margin-right: 20px; float: left; margin-top: 20px;">Export to excel</button>

                <p style="float: right; margin-top: 20px;"><button type="button" class="btn btn-cancel" id="btn-clear">Remove Filter</button></p>
                <p style="float: right; margin-top: 20px;  margin-right: 25px;"><button type="button" class="btn btn-primary" id="btn-filter">Filter</button></p>
                <p style="float: right; margin-right: 25px;"> <strong>Select Date:</strong> <input type="text" id="date" style="width: 230px;" class="form-control" readonly="" value=""></p>
            </div>

            <div class="card-body no-padding">
                <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>Username</th>
                            <th>Full Name</th>
                            <th>Original message</th>
                            <th>Translated message</th>
                            <th>User Suggestion</th>
                            <th>Language</th>
                            <th>Date</th>
                        </tr>
                    </thead>
                    <tbody class="admin-user">
                    </tbody>
                </table>

            </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 = '';
//    loadAdminUsers();

    initialiseDatatable();

    function initialiseDatatable() {
        $('.datatable1').dataTable().fnDestroy();
        $('.admin-user').html('');

        var dataTable = $('.list-table').DataTable({
            "processing": true,
            "serverSide": true,
            "columnDefs": [{
                    "targets": [0],
                    "searchable": true,
                    "orderable": false,
//                    "width": "8%"
                }, {
                    "targets": [1],
                    "searchable": true,
                    "orderable": false,
//                    "width": "8%"
                },
                {
                    "targets": [2],
                    "searchable": true,
                    "orderable": false,
//                    "width": "8%"
                },
                {
                    "targets": [3],
                    "searchable": true,
                    "orderable": false,
//                    "width": "8%"
                },
                {
                    "targets": [4],
                    "searchable": true,
                    "orderable": false,
//                    "width": "8%"
                },
                {
                    "targets": [5],
                    "searchable": false,
                    "orderable": false,
//                    "width": "8%"
                },
                {
                    "targets": [6],
                    "searchable": false,
                    "orderable": true,
//                    "width": "8%"
                },
                {
                    "targets": [7],
                    "searchable": false,
                    "orderable": true,
//                    "width": "8%"
                }
            ],
            responsive: true,
            "bAutoWidth": false,
            "order": [
                [7, "desc"]
            ],
            "ajax": {
                url: "controllers/get_user_suggestions.php", // json datasource
                type: "post", // method  , by default get
                data: {
                    start_date: request_start,
                    end_date: request_end,
                },
                error: function () { // error handling

                }
            },
            "drawCallback": function (settings) {
            }
        });
		displayPageInfo();
    }

    $('#btn-filter').on('click', function (e) {
        initialiseDatatable();
    });

    $("body").on('click', '#btn-clear', function () {
        $('#date').val('');
        request_start = '';
        request_end = '';
        initialiseDatatable();
    });

    $(".sh-checkbox-all").change(function () {
        if (this.checked) {
            $(".sh-checkbox").prop("checked", true);
            $(".btn-excel").attr('disabled', false);
        } else {
            $(".sh-checkbox").prop("checked", false);
            $(".btn-excel").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-excel").attr('disabled', true);
    });


    $("body").on('click', '.btn-excel', function () {
        var id = "";
        $(".sh-checkbox").each(function () {
            if (this.checked) {
                id = id + $(this).attr('data-id') + ',';
            }
        });

        if (id != "") {
            window.location = "controllers/print.php?id=" + id;
        } else {
            showNotification(colorName, "No data selected", placementFrom, placementAlign, animateEnter, animateExit);
        }
    });


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

    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('');
    }
	function displayPageInfo() {
		$(".dataTables_info").each(function() {
		  $(this).prependTo($(this).closest(".dataTables_wrapper"));
		});
	}
</script>