<?php
// Listing of active users
include 'header.php';
?>

<div class="row">
    <div class="col-xs-12">
        <div class="card">
            <div class="card-header display-flex flex-jsb">
                <h3 class="header-title">Sentences</h3>				
				<?php /*<a class="btn btn-primary btn-sm m-0" href="sample.csv" download>Sample File <i class="fa fa-cloud-download" aria-hidden="true"></i></a>*/?>
				
            </div>
            <div class="card-body no-padding">				
                <div class="row button-row" style=" padding-left: 15px; padding-right: 15px; margin-bottom: 25px; margin-top: 15px;">  
                    <div class="col-xs-12 display-flex other-filter other mt-10">
						<div class="display-flex-other other align-end">
						<p> <button type="button" class="btn btn-danger btn-multi-delete" disabled>Delete</button></p>    
						<p> <strong>Select Status: </strong>
                            <select class="form-control" id="select-status">
								<option value="">All</option>
                                <option value="0">Inactive</option>
								<option value="1">Pending</option>
								<option value="2">Voting</option>
								<option value="3">Closed</option>
                            </select>
                        </p>
						</div>						
						<div class="display-flex-other other align-end">						
                        <p> <strong>Select Language: </strong>
                            <select class="form-control" id="select-language">
                                <?php
                                $flag = 1;
								$zulu = 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>
                <div class="" style="margin-top: 10px; padding-left: 15px; padding-right: 15px;">     
                    <div class="table-responsive">
                        <table class=" datatable1 table table-striped primary " id="tblUser" cellspacing="0" width="100%">
                            <thead>
                                <tr>
                                    <th class="remove checkbox-td"><input type="checkbox" class="sh-checkbox-all" style="margin-bottom: 2px;"></th>
                                    <th>Original Text</th>
                                    <th>Translated text</th>
									<th>Votes</th>
                                    <th>Suggestions</th>
                                    <th>Status</th>
                                    <th>Created at</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody class="team-members">
                            </tbody>

                        </table>
                    </div>
                </div>
            </div>
        </div>
		<div class="loader"></div>
    </div>
</div>
<!-- Modal Small Size -->
<div class="modal fade" id="modal-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <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><span class="sr-only">Close</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" class="form-control" id="inpUserId" >
            </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" aria-hidden="true">
    <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 entries? </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 Small Size -->
<div class="modal fade" id="modal-info" 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">Discarded entries</h4>
            </div>
            <div class="modal-body" id="info-table">

            </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 = "";
    $(document).ready(function () {

        initialiseDatatable();
        function initialiseDatatable() {
			$('.loader').show();
            $('.datatable1').dataTable().fnDestroy();
            $('.directory-list').html('');
            if ($.fn.dataTable.isDataTable('.datatable1')) {
                $('.datatable1').DataTable().clear().destroy();
            }
            var 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": 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": true,
                        "visible": true,
					 }, {
                        "targets": [5],
                        "searchable": false,
                        "orderable": true,
                        "visible": true,
                    }, {
                        "targets": [6],
                        "searchable": false,
                        "orderable": true,
                        "visible": true,                   
					}, {
                        "targets": [7],
                        "searchable": false,
                        "orderable": false,
                        "visible": true, 						
                    }                           
                ],
				"columns": [
					{ "width": "2%" },
					{ "width": "35%" },
					{ "width": "35%" },
					{ "width": "4%" },
					{ "width": "4%" },
					{ "width": "2%" },
					{ "width": "5%" },
					{ "width": "5%" },
				 ],
                "order": [
                    [4, "desc"]
                ],
                "lengthMenu": [[25, 50, 100, 200], [25, 50, 100, 200]],
                "ajax": {
                    url: "controllers/get_sentence_list_marketplace.php", // json datasource
                    type: "post", // method  , by default get
                    data: {
                        category_id: $('#select-language').val(),
						status: $('#select-status').val(),
                    },
                    error: function () { // error handling
                        $(".team-members").append('<tr><td colspan="9">No data found</td></tr>');
                    }
                }
            });
            $('input[type="search"]').addClass('txt-search');
			displayPageInfo();
			$('.loader').hide();
        }

        $(".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', function () {
            $('#modal-multi-delete').modal('show');
        });

        $("body").on('click', '.sh-delete', function () {
            $("#inpUserId").val($(this).parent().attr('data-id'));
            $('#modal-delete').modal('show');

        });

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

        $('.btn-delete').click(function () {
            $.ajax({url: 'controllers/delete_suggestion_marketplace.php',
                data: {
                    id: $("#inpUserId").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();
                        $(".btn-multi-delete").attr('disabled', true);
                    }
                }
            });
        });

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

        $("body").on('click', '#btn-clear', function () {
            $('#select-language').val('');
			$('#select-status').val('');
            initialiseDatatable();
        });
    });
	function displayPageInfo() {
		$(".dataTables_info").each(function() {
		  $(this).prependTo($(this).closest(".dataTables_wrapper"));
		});
	}
</script>