
<div class="wrapper">
    <div class="container" style="width:100%">
        <!-- Page-Title -->
        <div class="row">
            <div class="col-lg-12">
                <div class="card-box">
                    <!--Start list Table-->
                    <div class="row m-b-30">
                        <h4 class="header-title m-t-0 m-b-30">Whatsapp Message Log:</h4>
                        <div class="table-container">
                            <div class="table-actions-wrapper ">
                                
                            </div>

                            <table id="loadedlist" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                                <thead>
                                    <tr>
                                        <th width="5%">ID</th>
                                        <th width="30%">Message</th>
                                        <th width="10%">Receiver</th>
                                        <th width="20%">Date Created</th>
                                        <th width="20%">Date Sent</th>
                                        <th width="20%">Using</th>
                                        <th width="20%">Receipt</th>
                                        <th width="15%"></th>
                                    </tr>
                                    <tr role="row" class="filter">
                                        <td width="2%"></td>
                                        <td width="10%">
                                            <input type="text" class="form-control form-filter input-sm" name="text_msg">
                                        </td>
                                        <td width="5%">
                                            <input type="text" class="form-control form-filter input-sm" name="receiver" />
                                        </td>
                                        <td width="8%">
                                            <input type="text" class="form-control form-filter input-sm date-picker" name="created_on">
                                        </td>
                                        <td width="8%">
                                            <input type="text" class="form-control form-filter input-sm date-picker" name="sent_on">
                                        </td>
                                        <td width="10%">
                                            <input name="msg_type" class="form-control form-filter input-sm"/>
                                        </td>
                                        <td width="10%">
                                            <input name="receipt_url" class="form-control form-filter input-sm"/>
                                        </td>

                                        <td width="15%">
                                            <div class="margin-bottom-5">
                                                <button class="btn btn-sm teal-500 filter-submit margin-bottom"><i class="icon-magnifier"></i> Search</button>
                                            </div>
                                            <button class="btn btn-sm orange-500 filter-cancel"><i class="icon-refresh"></i> Reset</button>
                                        </td>
                                    </tr>
                                </thead>
                                <tbody>
                                  
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!--End list Table-->

                </div>
            </div>
        </div> 
    </div>
    
    <script src="<?php echo base_url(); ?>assets/js/datatable.js"></script>
    <script>
     jQuery(document).ready(function () {
         loglist.init();
         
       
          
    });
   
    
        var loglist = function () {
          var initPickers = function () {
            //init date pickers
                $('.date-picker').datepicker({
                    autoclose: true,
                    todayHighlight: true,
                    format: 'yyyy-mm-dd'
                });
            }

            var handleLog = function () {
                var grid = new Datatable();

                grid.init({
                    src: $("#loadedlist"),
                    onSuccess: function (grid) {
                        // execute some code after table records loaded
                    },
                    onError: function (grid) {
                        // execute some code on network or other general error  
                        console.log(grid);
                    },
                    loadingMessage: 'Loading...',
                    dataTable: {// here you can define a typical datatable settings from http://datatables.net/usage/options 
                        // Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
                        // setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: js/datatable.js). 
                        // So when dropdowns used the scrollable div should be removed. 
                        "dom": "<'row'<'col-md-8 col-sm-12'li><'col-md-4 col-sm-12'<'table-group-actions pull-right'>>r>t<'row'<'col-md-12 col-sm-12'><'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'p><'col-md-12 col-sm-12'i>>",
                        "lengthMenu": [
                            [10, 20, 50, 100, 150, -1],
                            [10, 20, 50, 100, 150, "All"] // change per page values here
                        ],
                        "pageLength": 10, // default record count per page
                        "pagingType": "full_numbers",
                        "stateSave":"true",
                        "ajax": {
                            "url": "<?php echo base_url(); ?>wa_controller/get_wa_log" // ajax source
                        },
                        "order": [
                            [3, "desc"]
                        ], // set first column as a default sort by asc
                        "columns": [
                           
                            {"data": "id_wa"},
                            {"data": "text_msg"},
                            {"data": "receiver"},
                            {"data": "created_on"},
                            {"data": "sent_on"},
                            {"data": "msg_type"},
                            {"data": "receipt_url"},
                            {"data": "btn"}
                        ],
                        "columnDefs": [{"sortable": false, "targets": 5}, {className: "cellnumber", "targets": [ 2 ]}],
                       "initComplete": function(settings, json) {
                           jQuery('.smsresend').click(function(e){
                               var clickedCell= $(e.target).closest('tr').find('.cellnumber').text();
                               console.log(clickedCell);
                           });
                       },
                        "rowCallback": function( row, data, index ) {
                            if(data.sent_on != ''){
                                $('td:eq(7)', row).html( '<form method="Post" action="<?php echo base_url('wa_controller/resend_msg'); ?>"><input type="hidden" name="csrf_test_name" id="sms_csrf" value="' + $('#cook').val() + '"/><input type="hidden" name="id_wa" value="'+ data.id_wa +'"/><button class="btn btn-pink btn-sm smsresend">Resend</button></form>' );
                            }
                          }
                    }
                });


                // handle group actionsubmit button click
                grid.getTableWrapper().on('click', '.table-group-action-submit', function (e) {
                    e.preventDefault();
                    var action = $(".table-group-action-input", grid.getTableWrapper());
                    if (action.val() !== "" && grid.getSelectedRowsCount() > 0) {
                        grid.setAjaxParam("customActionType", "group_action");
                        grid.setAjaxParam("customActionName", action.val());
                        grid.setAjaxParam("id", grid.getSelectedRows());
                        grid.getDataTable().ajax.reload();
                        grid.clearAjaxParams();
                    } else if (action.val() == "") {
                        swal({
                            title: "Please select an action",
                            text: "",
                            type: "warning",
                            confirmButtonText: 'OK!'
                        });
                        
                    } else if (grid.getSelectedRowsCount() === 0) {
                         swal({
                            title: "No record selected",
                            text: "",
                            type: "danger",
                            confirmButtonText: 'OK!'
                        });
                    }
                });
            }
            return {
                //main function to initiate the module
                init: function () {

                    initPickers();                    
                    handleLog();
                     
                    
                }

            };

        }();


        


</script>