<?php include_once "header.php" ?>
<!--

 NOTE: $totalData variable shown in this page was from header.php. So no need repeat code



-->

<style>
  table.dataTable.select tbody tr,
  table.dataTable thead th:first-child {
    cursor: pointer;
  }
</style>

<?php
$error    = ew_RemoveXSS(ew_StripSlashes($_GET['success']));
$ticketID = ew_RemoveXSS(ew_StripSlashes($_GET['ticketID']));

if ($error=='1'){
    if ($ticketID == ""){
        $error = "<div class=\"alert alert-success alert-dismissable\" id=\"success-alert\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\">x</button>Emel berjaya dihantarkan.</div>";
    } else {
        $error = "<div class=\"alert alert-success alert-dismissable\" id=\"success-alert\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\">x</button>Terima Kasih kerana menggunakan sistem ini.<br>Aduan anda telah diterima. Nombor tiket anda ialah <strong>#$ticketID</strong>.<br>Pihak kami akan memproses Aduan anda dalam tempoh 3 hari bekerja.<br><br>Terima Kasih.</div>";
    }
} else if ($error=='2'){
    $error = "<div class=\"alert alert-success alert-dismissable\" id=\"success-alert\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\">x</button>Emel berjaya dihapuskan.</div>";
}
//$error = "<div class=\"alert alert-success alert-dismissable\" id=\"success-alert\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\">x</button>Terima Kasih kerana menggunakan sistem ini.<br>Aduan anda telah diterima. Nombor tiket anda ialah <strong>#$ticketID</strong>.<br>Pihak kami akan memproses Aduan anda dalam tempoh 3 hari bekerja.<br><br>Terima Kasih.</div>";

?>

<!-- Full Width Column -->
<div class="content-wrapper">
    <div class="container">
        <!-- Content Header (Page header) -->
        <section class="content-header">
          <h1>
            Maklum Balas
            <small><?php echo $totalData;?> mesej baru</small>
          </h1>
          <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i>Laman Utama</a></li>
            <li class="active">Maklum Balas</li>
          </ol>
        </section>

        <!-- Main content -->
        <section class="content">
          <div class="row">
            <div class="col-md-3">
              <a href="mailbox-compose.php" class="btn btn-primary btn-block margin-bottom">Karang</a>

              <div class="box box-solid">
                <div class="box-header with-border">
                  <h3 class="box-title">Folders</h3>

                  <div class="box-tools">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                    </button>
                  </div>
                </div>
                <div class="box-body no-padding">
                  <ul class="nav nav-pills nav-stacked">
                    <li class="active"><a href="#"><i class="fa fa-inbox"></i> Maklum Balas
                      <span class="label label-primary pull-right"><?php echo $totalData;?></span></a></li>
                    <!--<li><a href="#"><i class="fa fa-envelope-o"></i> Sent</a></li>-->
                  </ul>
                </div>
                <!-- /.box-body -->
              </div>

            </div>
            <!-- /.col -->
            <div class="col-md-9">
              <div class="box box-primary">
                <div class="box-header with-border">
                  <h3 class="box-title">Maklum Balas</h3>
                  <!--
                  <div class="box-tools pull-right">
                    <div class="has-feedback">
                      <input type="text" class="form-control input-sm" placeholder="Search Mail">
                      <span class="glyphicon glyphicon-search form-control-feedback"></span>
                    </div>
                  </div>
                  -->
                  <!-- /.box-tools -->
                </div>
                <!-- /.box-header -->
                <form id="maildelete-form" action="mailbox-delete.php" role="form" method="POST">
                <div class="box-body">
                  <div id="error">
                      <?php echo $error; ?>
                  </div>
                  <div class="mailbox-controls">
                    <!-- Check all button -->
                    <!--<button type="button" class="btn btn-default btn-sm checkbox-toggle"><i class="fa fa-square-o"></i>
                    </button>-->
                    <div class="btn-group">
                      <!--<button type="submit" class="btn btn-default btn-sm"><i class="fa fa-trash-o"></i></button>-->
                      <!--<button type="button" class="btn btn-default btn-sm"><i class="fa fa-reply"></i></button>-->
                    </div>
                    <!-- /.btn-group -->
                    <!--<button type="button" class="btn btn-default btn-sm"><i class="fa fa-refresh"></i></button>-->
                    <!--
                    <div class="pull-right">
                      1-50/200
                      <div class="btn-group">
                        <button type="button" class="btn btn-default btn-sm"><i class="fa fa-chevron-left"></i></button>
                        <button type="button" class="btn btn-default btn-sm"><i class="fa fa-chevron-right"></i></button>
                      </div>

                    </div>
                    -->
                    <!-- /.pull-right -->
                  </div>
                  <div class="mailbox-messages">
                      <table id="mailbox" class="table table-hover table-striped display select responsive nowrap"  width="100%" cellspacing="0">
                        <thead>
                          <tr>
                            <th><input name="select_all" value="1" type="checkbox"></th>
                            <th class="mailbox-star"></th>
                            <th class="mailbox-id">ID</th>
                            <th class="mailbox-name">Dari</th>
                            <th class="mailbox-name">Kepada</th>
                            <th class="mailbox-subject">Subjek</th>
                            <th class="mailbox-date">Tarikh Terima</th>
                          </tr>
                        </thead>
                        <tfoot>
                          <tr>
                            <th><input name="select_all" value="1" type="checkbox"></th>
                            <th class="mailbox-star"></th>
                            <th class="mailbox-id">ID</th>
                            <th class="mailbox-name">Dari</th>
                            <th class="mailbox-name">Kepada</th>
                            <th class="mailbox-subject">Subjek</th>
                            <th class="mailbox-date">Tarikh Terima</th>
                          </tr>
                        </tfoot>
                      </table>

                  </div>
                  <!-- /.mail-box-messages -->
                </div>
                <!-- /.box-body -->
                <div class="box-footer no-padding">
                  <div class="mailbox-controls">
                    <!-- Check all button -->
                    <!--<button type="button" class="btn btn-default btn-sm checkbox-toggle"><i class="fa fa-square-o"></i>
                    </button>-->
                    <div class="btn-group">
                      <!--<button type="submit" class="btn btn-default btn-sm"><i class="fa fa-trash-o"></i></button>-->
                      <!--<button type="button" class="btn btn-default btn-sm"><i class="fa fa-reply"></i></button>-->
                    </div>
                    <!-- /.btn-group -->
                    <!--<button type="button" class="btn btn-default btn-sm"><i class="fa fa-refresh"></i></button>-->
                    <!--
                    <div class="pull-right">
                      1-50/200
                      <div class="btn-group">
                        <button type="button" class="btn btn-default btn-sm"><i class="fa fa-chevron-left"></i></button>
                        <button type="button" class="btn btn-default btn-sm"><i class="fa fa-chevron-right"></i></button>
                      </div>

                    </div>
                    -->
                    <!-- /.pull-right -->
                  </div>
                </div>
                </form>
              </div>
              <!-- /. box -->
            </div>
            <!-- /.col -->
          </div>
          <!-- /.row -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
</div>

<?php include_once "footer.php" ?>

<script type="text/javascript" language="javascript" >
    function updateDataTableSelectAllCtrl(table){
       var $table             = table.table().node();
       var $chkbox_all        = $('tbody input[type="checkbox"]', $table);
       var $chkbox_checked    = $('tbody input[type="checkbox"]:checked', $table);
       var chkbox_select_all  = $('thead input[name="select_all"]', $table).get(0);
       var chkbox_select_all2 = $('tfoot input[name="select_all"]', $table).get(0);

       // If none of the checkboxes are checked
       if($chkbox_checked.length === 0){
          chkbox_select_all.checked = false;
          chkbox_select_all2.checked = false;
          if('indeterminate' in chkbox_select_all){
             chkbox_select_all.indeterminate = false;
          }
          if('indeterminate' in chkbox_select_all2){
             chkbox_select_all2.indeterminate = false;
          }

       // If all of the checkboxes are checked
       } else if ($chkbox_checked.length === $chkbox_all.length){
          chkbox_select_all.checked = true;
          chkbox_select_all2.checked = true;
          if('indeterminate' in chkbox_select_all){
             chkbox_select_all.indeterminate = false;
          }
          if('indeterminate' in chkbox_select_all2){
             chkbox_select_all2.indeterminate = false;
          }

       // If some of the checkboxes are checked
       } else {
          chkbox_select_all.checked = true;
          chkbox_select_all2.checked = true;
          if('indeterminate' in chkbox_select_all){
             chkbox_select_all.indeterminate = true;
             $('tfoot input[name="select_all"]').iCheck('indeterminate');
          }
          if('indeterminate' in chkbox_select_all2){
             chkbox_select_all2.indeterminate = true;
             $('tfoot input[name="select_all"]').iCheck('indeterminate');
          }
       }
    }

    $(document).ready(function() {
        // $('#mailbox').on('draw.dt', function () {
            // $('.mailbox-messages input[type="checkbox"]').iCheck({
              // checkboxClass: 'icheckbox_flat-blue',
              // radioClass: 'iradio_flat-blue'
            // });
        // });
        var rows_selected = [];
        var dataTable = $('#mailbox').DataTable( {
            "processing": true,
            "serverSide": true,
            "lengthMenu": [ 5, 10, 25, 50 ],
            //"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
            "sDom": "<'row'<'col-sm-6'l><'col-sm-6'<'box-tools pull-right'<'has-feedback'f>>>><'row'<'col-sm-12't>><'row'<'col-sm-5'i><'col-sm-7'p>>",
            "oLanguage": { "sSearch": 'Search<span class="glyphicon glyphicon-search form-control-feedback"></span>' },
            "ajax":{
                url :"ajax_mailbox.php", // json datasource
                type: "post",  // method  , by default get
                error: function(){  // error handling
                    alert("Opps.. There's an error! Couldn't retrieve data at the moment..");

                }
            },
            'columnDefs': [{
                            'targets':    0,
                            'searchable': false,
                            'orderable':  false,
                            'width':      '1%',
                            'className':  'dt-body-center',
                            'render': function (data, type, full, meta){
                                         return '<input type="checkbox">';
                                     }
                           },
                           {
                             'targets': 1,
                             'searchable': false,
                             'orderable': false,
                           },
                           {
                            'targets': 5,
                            'render': $.fn.dataTable.render.ellipsis(35)
                           }
                          ],
            //'order': ([[1, 'asc'],[2, 'desc']]),
            'order': ([6, 'desc']),
            'rowCallback': function(row, data, dataIndex){
               // Get row ID
               var rowId = data[0];

               // If row ID is in the list of selected row IDs
               if($.inArray(rowId, rows_selected) !== -1){
                  $(row).find('input[type="checkbox"]').prop('checked', true);
                  $(row).addClass('selected');
               }
            }
        });



        // Handle click on checkbox
        $('#mailbox tbody').on('click', 'input[type="checkbox"]', function(e){
           var $row = $(this).closest('tr');

           // Get row data
           var data = dataTable.row($row).data();

           // Get row ID
           var rowId = data[0];

           // Determine whether row ID is in the list of selected row IDs
           var index = $.inArray(rowId, rows_selected);

           // If checkbox is checked and row ID is not in list of selected row IDs
           if(this.checked && index === -1){
              rows_selected.push(rowId);

           // Otherwise, if checkbox is not checked and row ID is in list of selected row IDs
           } else if (!this.checked && index !== -1){
              rows_selected.splice(index, 1);
           }

           if(this.checked){
              $row.addClass('selected');
           } else {
              $row.removeClass('selected');
           }

           // Update state of "Select all" control
           updateDataTableSelectAllCtrl(dataTable);

           // Prevent click event from propagating to parent
           e.stopPropagation();
        });

        // Handle click on table cells with checkboxes
        $('#mailbox').on('click', 'tbody td, thead th:first-child', function(e){
           $(this).parent().find('input[type="checkbox"]').trigger('click');
           //$(this).parent().find('input[type="checkbox"]').iCheck('toggle');

        });

        // Handle click on "Select all" control
        $('thead  input[name="select_all"], tfoot input[name="select_all"]', dataTable.table().container()).on('click', function(e){
           if(this.checked){
              $('#mailbox tbody input[type="checkbox"]:not(:checked)').trigger('click');
              //$('#mailbox tbody input[type="checkbox"]:not(:checked)').iCheck('toggle');
           } else {
              $('#mailbox tbody input[type="checkbox"]:checked').trigger('click');
              //$('#mailbox tbody input[type="checkbox"]:checked').iCheck('toggle');
           }

           // Prevent click event from propagating to parent
           e.stopPropagation();
        });

        // Handle table draw event
        dataTable.on('draw', function(){
           // Update state of "Select all" control
           updateDataTableSelectAllCtrl(dataTable);
        });

        // $('#mailbox').on('draw.dt', function () {
            // // $('.mailbox-messages input[type="checkbox"]').iCheck({
              // // checkboxClass: 'icheckbox_flat-blue',
              // // radioClass: 'iradio_flat-blue'
            // // });

            // $('input[type=checkbox]').iCheck({
              // checkboxClass: 'icheckbox_flat-blue',
              // radioClass: 'iradio_flat-blue'
            // });

        // });



        // auto-hide success msg
        $("#success-alert").fadeTo(6000, 1000).slideUp(1000, function(){
            $("#success-alert").alert('close');
        });

        // retrieve the user id of the row click and pass the variable "userID"
        // $('#useraccount tbody').on('click', 'button', function(e) {
            // data = dataTable.row( $(this).parents('tr') ).data();
            // userID = data[1];
        // });


        // Handle form submission event
        $('#maildelete-form').on('submit', function(e){
            var form = this;
            if (typeof rows_selected !== 'undefined' && rows_selected.length > 0) {

                var result = confirm("Confirm to delete?");
                if (result) {
                    // Iterate over all selected checkboxes
                    $.each(rows_selected, function(index, rowId){
                       // Create a hidden element
                       $(form).append(
                           $('<input>')
                              .attr('type', 'hidden')
                              .attr('name', 'id[]')
                              .val(rowId)
                       );
                    });
                } else {
                    e.preventDefault();
                }

            } else {
                e.preventDefault();
            }

        });



    });

</script>

<!-- Page Script -->
<script>
  $(function () {
    // $('#mailbox').on('draw.dt', function () {
        // $('.mailbox-messages input[type="checkbox"]').iCheck({
          // checkboxClass: 'icheckbox_flat-blue',
          // radioClass: 'iradio_flat-blue'
        // });
    // });

    // //Enable iCheck plugin for checkboxes
    // //iCheck for checkbox and radio inputs
    // $('.mailbox-messages input[type="checkbox"]').iCheck({
      // checkboxClass: 'icheckbox_flat-blue',
      // radioClass: 'iradio_flat-blue'
    // });

    //Enable check and uncheck all functionality
    // $(".checkbox-toggle").click(function () {
      // var clicks = $(this).data('clicks');
      // if (clicks) {
        // //Uncheck all checkboxes
        // $(".mailbox-messages input[type='checkbox']").iCheck("uncheck");
        // $(".fa", this).removeClass("fa-check-square-o").addClass('fa-square-o');
      // } else {
        // //Check all checkboxes
        // $(".mailbox-messages input[type='checkbox']").iCheck("check");
        // $(".fa", this).removeClass("fa-square-o").addClass('fa-check-square-o');
      // }
      // $(this).data("clicks", !clicks);
    // });

    // //Handle starring for glyphicon and font awesome
    // $(".mailbox-star").click(function (e) {
      // e.preventDefault();
      // //detect type
      // var $this = $(this).find("a > i");
      // var glyph = $this.hasClass("glyphicon");
      // var fa = $this.hasClass("fa");

      // //Switch states
      // if (glyph) {
        // $this.toggleClass("glyphicon-star");
        // $this.toggleClass("glyphicon-star-empty");
      // }

      // if (fa) {
        // $this.toggleClass("fa-check-circle");
        // $this.toggleClass("fa-check-circle-o");
      // }
    // });

  });
</script>
