<?php
// Listing of active users
include 'header.php';
?>
<style>
    .datatable1 tbody tr{
        cursor: pointer;
    }
</style>
<div class="row">
    <div class="col-xs-12">
        <div class="card">
            <div class="card-header">
                <h3 class="header-title">Winning Results</h3>
            </div>
            <div class="card-body no-padding">
                <div class="" style="margin-top: 10px; padding-left: 15px; padding-right: 15px;"> 
                    <div class="row button-row" style="margin-bottom: 15px; margin-top: 15px;">

                        <div class="col-xs-12 display-flex other-filter">
                           <!--<p style="float: right; margin-top: 20px;"><button type="button" class="btn btn-cancel" id="btn-clear">Clear Filter</button></p>-->                           
                            <p> <strong>Select Language: </strong>
                                <select class="form-control" id="select-language">
                                    <?php
                                    $flag = 1;
                                    include 'controllers/get_category_options.php';
                                    ?>
                                </select>
                            </p>
							 <p><button type="button" class="btn btn-primary" id="btn-filter">Filter</button></p>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class=" datatable1 table table-striped primary " id="tblUser" cellspacing="0" width="100%">
                            <thead>
                                <tr>
									<th></th>
                                    <th>Original Text</th>
                                    <th>Winning Suggestion</th> 
									<th>Language</th>
									<th>Winning Suggestion Neo</th>									
                                    <th>Total Votes</th>
									<th>Winning Suggestion TMN Credits</th>
									<th>Closed At</th>
                                </tr>
                            </thead>
                            <tbody class="team-members">
                            </tbody>

                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<!-- Modal Small Size -->
<div class="modal fade" id="modalUsers" 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">Voted Users</h4>
            </div>
            <div class="modal-body">
                <ul class="user-list"><div class="loader" style="display: block;"></div></ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


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

<script type="text/javascript">

    var colorName = "bg-green";
    var placementFrom = "top";
    var placementAlign = "right";
    var animateEnter = "";
    var animateExit = "";
    var dataTable;
    $(document).ready(function () {

        initialiseDatatable();
        function initialiseDatatable() {
            $('.datatable1').dataTable().fnDestroy();
            $('.directory-list').html('');
            if ($.fn.dataTable.isDataTable('.datatable1')) {
                $('.datatable1').DataTable().clear().destroy();
            }
            dataTable = $('.datatable1').DataTable({
                "oLanguage": {"sLengthMenu": "\_MENU_", 'sSearch': '', 'sSearchPlaceholder': "Search..."},
                "processing": true,
                "bDestroy": true,
                "serverSide": true,
                "bAutoWidth": false,
                "searching": true,
                "destroy": true,
                "columnDefs": [
                    {
						 "targets": [0],
                        "searchable": true,
                        "orderable": false,
                        "data": null,
                        "defaultContent": '',
                        "className": 'details-control',
					}, {
                        "targets": [1],
                        "searchable": true,
                        "orderable": true,
						"data": 'original_message',
						"visible": true,
                    }, {
                        "targets": [2],
                        "searchable": true,
                        "orderable": false,
						"data": 'translated_suggestion',
                        "visible": true,
                    }, {
                        "targets": [3],
                        "searchable": false,
                        "orderable": false,
						"data": 'language',
                        "visible": true,
                    }, {
                        "targets": [4],
                        "searchable": true,
                        "orderable": false,
						"data": 'neo',
                        "visible": true,
						"className": 'neo-td',
                    }, {
                        "targets": [5],
                        "searchable": false,
                        "orderable": true,
						"data": 'total_votes',
                        "visible": true,
					}, {
                        "targets": [6],
                        "searchable": false,
                        "orderable": true,
						"data": 'credits',
                        "visible": true,	
					}, {
                        "targets": [7],
                        "searchable": false,
                        "orderable": true,
						"data": 'updated_at',
                        "visible": true,						
                    }
                ],	
				"columns": [
					{ "width": "2%" },
					{ "width": "32%" },
					{ "width": "32%" },
					{ "width": "2%" },
					{ "width": "10%" },
					{ "width": "2%" },
					{ "width": "5%" },
					{ "width": "5%" },
				 ],				
                "order": [
                    [7, "desc"]
                ],
                "lengthMenu": [[25, 50, 100, 200], [25, 50, 100, 200]],
                "ajax": {
                    url: "controllers/get_voting_report.php", // json datasource
                    type: "post", // method  , by default get
                    data: {
                        category_id: $('#select-language').val(),
                    },
                    error: function () { // error handling
                        $(".team-members").append('<tr><td colspan="9">No data found</td></tr>');
                    }
                }
            });
            $('input[type="search"]').addClass('txt-search');
			displayPageInfo();
        }

        $('.datatable1 tbody').on('click', 'td', function () {
            var tr = $(this).closest('tr');
            var row = dataTable.row(tr);

            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                // Open this row
                row.child(format(row.data())).show();
                tr.addClass('shown');
            }
        });

        function format(d) {
            // `d` is the original data object for the row
            return d.suggestion;
        }

        $("body").on('click', '.total-votes', function () {
			$('.user-list').html('<div class="loader" style="display: block;"></div>');
            $.ajax({url: 'controllers/get_vote_users.php',
                data: {
                    id: $(this).attr('data-id'),
                    tele_id: $(this).attr('data-tele'),
                },
                type: 'post',
                success: function (output) {
                    $('.user-list').html(output);
                }
            });
        });

        $('#btn-filter').on('click', function (e) {
            initialiseDatatable();
        });
    });
	function displayPageInfo() {
		$(".dataTables_info").each(function() {
		  $(this).prependTo($(this).closest(".dataTables_wrapper"));
		});
	}
</script>