<?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">APP USERS</h3>

            </div>

            <div class="col-xs-12" style="margin-top: 10px;">
                <p style="float: right; margin-top: 20px;"><button type="button" class="btn btn-cancel" id="btn-clear">Clear 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 Signup Date:</strong> <input type="text" id="date" style="width: 230px;" class="form-control" readonly="" value=""></p>
                <p style="float: right; margin-right: 25px;"> <strong>Subscription type: </strong>
                    <select style="width: 120px;" class="form-control"  id="subscription-type">
                        <option value="">All</option>
                        <option value="1">Active</option>
                        <option value="0">Inactive</option>
                    </select>
                </p>
            </div>

            <div class="card-body no-padding">
                <table class="datatable1 table table-striped primary list-table" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>Username</th>
                            <th>Full Name</th>
                            <th>Phone</th>
                            <th>TMN Credits</th>
                            <th>Remaining Characters</th>
                            <th>Signup Date</th>
                            <th>Is Suggestion Banned</th>
                            <th>Is Referral Banned</th>
                            <!--<th>Last Online At</th>-->
                            <th>View</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": true,
                    "width": "8%"
                }, {
                    "targets": [1],
                    "searchable": true,
                    "orderable": true,
                    "width": "8%"
                },
                {
                    "targets": [2],
                    "searchable": true,
                    "orderable": true,
                    "width": "8%"
                },
                {
                    "targets": [3],
                    "searchable": true,
                    "orderable": true,
                    "width": "8%"
                },
                {
                    "targets": [4],
                    "searchable": true,
                    "orderable": true,
                    "width": "8%"
                },
                {
                    "targets": [5],
                    "searchable": false,
                    "orderable": true,
                    "width": "8%"
                },
                {
                    "targets": [6],
                    "searchable": false,
                    "orderable": false,
                    "width": "8%"
                },
                {
                    "targets": [7],
                    "searchable": false,
                    "orderable": false,
                    "width": "8%"
                },
                {
                    "targets": [8],
                    "searchable": false,
                    "orderable": false,
                    "width": "8%"
                }
            ],
            "bAutoWidth": false,
            "order": [
                [5, "desc"]
            ],
            "ajax": {
                url: "controllers/get_app_users.php", // json datasource
                type: "post", // method  , by default get
                data: {
                    subscription_type: $('#subscription-type').val(),
                    start_date: request_start,
                    end_date: request_end,
                },
                error: function () { // error handling

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



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

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

    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', '.trigger-switch', function () {
        $.ajax({url: 'controllers/update_user_ban_status.php',
            data: {
                status: $(this).is(":checked"),
                id: $(this).attr('data-id'),
                type: 0,
            },
            type: 'post',
            success: function (output) {
                console.log(output);
            }
        });
    });

    $("body").on('click', '.trigger-switch-referal', function () {
        $.ajax({url: 'controllers/update_user_ban_status.php',
            data: {
                status: $(this).is(":checked"),
                id: $(this).attr('data-id'),
                type: 1,
            },
            type: 'post',
            success: function (output) {
                console.log(output);
            }
        });
    });

</script>