<style type="text/css">
    @media print
    {
        .noprint {display:none;}
    }
</style>
<div class="wrapper">
    <div class="container">
        <!-- Page-Title -->
        <div class="row">
            <div class="col-sm-12">
                <div class="btn-group pull-right m-t-15">
                    <button type="button"  onclick="openaddnew();" class="btn btn-custom waves-effect waves-light" >Add <span class="m-l-5"><i class="fa fa-plus"></i></span></button>
                </div>
                <h4 class="page-title" >Consultant Notes:</h4>
            </div>
        </div>



        <div class="row">
            <div class="col-sm-12">
                <div class="card-box table-responsive">
                    <h4 class="header-title m-t-0 m-b-30">&nbsp;</h4>
                    <table id="datatable-buttons" class="table table-striped table-bordered">
                        <thead>
                            <tr>                          
                                <th>Note ID</th>
                                <th>Customer</th>
                                <th>Note Date</th>                              
                                <th>Created By</th>
                                <th>Note Type</th>
                                <th>Note Status</th>
                                <th>Details</th>                                                     
                                <th class='noprint'>Action</th>
                            </tr>
                            <tr role="row" class="filter">                                        
                                <td width="2%"></td>
                                <td width="10%">
                                    <input type="text" style="width: 100px;" class="form-control form-filter input-sm" name="customer_name">
                                </td>
                                <td width="10%">
                                <input type="text" style="width: 100px;"  class="form-control form-filter input-sm date-picker" name="note_date">
                                </td>
                                <td width="10%">
                                    <input type="text" style="width: 100px;"  class="form-control form-filter input-sm" name="created_by">
                                </td>                                
                                <td width="10%">
                                    <input type="text" style="width: 100px;"  class="form-control form-filter input-sm" name="note_type">
                                </td>                                
                                <td width="10%">
                                    <input name="note_status" style="width: 100px;"  class="form-control form-filter input-sm">
                                </td>
                                <td width="40%">
                                <input name="detail_text" style="width: 200px;"  class="form-control form-filter input-sm">
                                </td>
                             
                                <td width="5%">
                                    <div class="margin-bottom-5">
                                        <button class="btn btn-sm teal-500 filter-submit margin-bottom"><i class="icon-magnifier"></i> Search</button>
                                    </div>                                    
                                    <div class="margin-bottom-5">
                                        <button class="btn btn-sm orange-500 filter-cancel"><i class="icon-refresh"></i> Reset</button>
                                    </div>
                                </td>
                            </tr>
                        </thead>

                        <tbody>
                           
                        </tbody>
                    </table>
                </div>
            </div><!-- end col -->
        </div>
        <!-- end row -->



        <div id="opennewnote" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="opennewnote" aria-hidden="true" style="display: none;">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="custom-width-modalLabel">Select Customer</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                        
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="txtselectcustomer" class="control-label">Customer</label>
                                    <input type="text" class="form-control" placeholder="Customer" id="txtselectcustomer" name="txtselectcustomer">
                                    <input type='hidden' id ='txtcustomer'  name ='txtcustomer_id' >
                                </div> 
                            </div> 
                        
                        </div>
                    </div>

                    <div class="modal-footer">
                            
                            <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
                            <button onclick="opennote();" class="btn btn-custom waves-effect waves-light">Select</button>
                        </div>
                </div>
            </div>
        </div>

   
        <script src="<?php echo base_url(); ?>assets/js/datatable.js"></script>


        <script>
            $(document).ready(function() {

                $("#txtselectcustomer").select2({
                 ajax: {
                   url: '<?php echo base_url();?>customer_controller/searchnameforco',
                   dataType: 'json',
                   quietMillis: 1000,
                   data: function (term, page) {

                     return {
                         customername: term, // search term
                         page_limit: 30, // page size
                         page: page // page number
                     };
                   },
                   results: function (data, page) {

                         var more = (page * 30) < data.length;
                         return {results: data, more: more};
                     }
                   },
                 escapeMarkup: function (m) { return m; }, // let our custom formatter work
                 minimumInputLength: 3,
                 formatResult: function (option) {
                    return option.customer_name + ' ' + option.customer_cell;
                 },
                 formatSelection: function (option) {
                     return option.customer_name ;
                 }
               });

                toastr.options = {
                    "closeButton": true,
                    "debug": true,
                    "newestOnTop": true,
                    "progressBar": true,
                    "positionClass": "toast-bottom-center",
                    "preventDuplicates": true,
                    "onclick": null,
                    "showDuration": "300",
                    "hideDuration": "1000",
                    "timeOut": "5000",
                    "extendedTimeOut": "1000",
                    "showEasing": "swing",
                    "hideEasing": "linear",
                    "showMethod": "fadeIn",
                    "hideMethod": "fadeOut"
                }
                
                jQuery('#txtcustomeranniversary').datepicker({
                    autoclose: true,
                    todayHighlight: true,
                    format: 'yyyy/mm/dd'
                });


                $('#txtdate').datepicker({
                    autoclose: true,
                    todayHighlight: true,
                    format: 'yyyy-mm-dd'
                });
                
                $(".numeric").keypress(function(e) {
                    //if the letter is not digit then display error and don't type anything
                    if (e.which != 13 && e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                        return false;
                    }
                });

                customernoteslist.init();

            });


            var customernoteslist = function () {       
                var initPickers = function () {
                //init date pickers
                    $('.date-picker').datepicker({
                        format: 'yyyy-mm-dd',
                        autoclose: true
                    });
                }         
                var groupColumn = 1;
                var handleCustomerList = function () {
                    var grid = new Datatable();

                    grid.init({
                        src: $("#datatable-buttons"),
                        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: {
                            "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(); ?>customernotes_controller/get_customer_notes_list" // ajax source
                            },
                            "order": [
                                [1, "desc"]
                            ], // set first column as a default sort by asc
                            "columns": [                            
                                {"data": "id_customer_notes"},
                                {"data": "customer_name"},
                                {"data": "note_date"},                                
                                {"data": "created_by"},
                                {"data": "note_type"},
                                {"data": "note_status"},                           
                                {"data": "detail_text"},                                
                                {"data": "action"}
                            ],
                            "columnDefs": [{"sortable": false, "targets": 3}],
                            "responsive":1,                        
                            drawCallback: function (settings) {
                                var api = this.api();
                                var rows = api.rows({ page: 'current' }).nodes();
                                var last = null;
                                var groupbig= null;
    
                                api.rows().every( function () {
                                    var data = this.data();
                                    data.detail_text = '<strong>'+data.detail_text+'</strong>';
                                    console.log(data.detail_text);
                                } );

                                
                                // api.column(groupColumn, { page: 'current' })
                                //     .data()
                                //     .each(function (group, i) {
                                //         if (last !== group) {
                                           
                                //             $(rows)
                                //                 .eq(i)
                                //                 .before(
                                //                     '<tr class="group"><td colspan="12">' + group +'</td></tr>'
                                //                 );
                        
                                //             last = group;
                                //         }
                                //     });
                            }

                        }
                    });


                    // 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("facialActionType", "group_action");
                            grid.setAjaxParam("facialActionName", 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();
                        handleCustomerList();
                    }

                };

            }();
    

            function openaddnew(){

                $("#opennewnote").modal("show");

            }

            function opennote(){

                var data = $("#txtselectcustomer").select2('data');
                    
                var txtcustomer_id = data.id_customers;

                location.href="<?php echo base_url()?>customer_notes/"+txtcustomer_id;
            }
            
        </script>