<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-facial btn-primary waves-effect waves-light" >Add <span class="m-l-5"><i class="fa fa-plus"></i></span></button>
                </div>
                <h4 class="page-title" >Facial Records</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 >ID</th>
                                <th>Customer</th>
                                <th>Facial Name</th>
                                <th>Exfoliant</th>
                                <th>Mask</th>
                                <th>Cleanser</th>
                                <th>Date</th>
                                <th>Time</th>
                                <th>Charge</th>
                                <th>Remarks</th>
                                <th class='noprint'>Action</th>
                            </tr>
                            <tr role="row" class="filter">                                        
                                <td width="2%"></td>
                                <td width="20%">
                                    <input type="text" style="width: 100px;" class="form-control form-filter input-sm" name="customer">
                                </td>
                                <td width="20%">
                                <input type="text" style="width: 100px;"  class="form-control form-filter input-sm" name="facial">
                                </td>
                                <td width="10%">
                                    <input type="text" style="width: 100px;"  class="form-control form-filter input-sm" name="exfoliant">
                                </td>
                                <td width="10%">
                                    <input type="text" style="width: 100px;"  class="form-control form-filter input-sm" name="mask">
                                </td>
                                
                                <td width="10%">
                                    <input type="text" style="width: 100px;"  class="form-control form-filter input-sm" name="cleanser">
                                </td>                                
                                <td width="10%">
                                    <input name="date" style="width: 100px;"  class="form-control form-filter input-sm date-picker">
                                </td>
                                <td width="5%">
                                   
                                </td>
                                <td></td>                                
                                <td width="5%">
                                    <input name="remarks" style="width: 100px;"  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 -->

        <!--Modals-->

        <!--Add Facial Modal-->
        <div id="addlist" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="addlist" aria-hidden="true" style="display: none;">
            <div class="modal-dialog">
                <div class="modal-content">
                    <form id="addlistForm" action="<?php echo base_url("service_controller/facial_record_add"); ?>" method="POST">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h4 class="modal-title" id="facial-width-modalLabel">Add a Facial Record</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="txtselectcustomer" class="control-label">Customer</label>
                                                    <input onchange="oncustomerchange();" type="text" class="form-control" placeholder="Customer" id="txtselectcustomer" name="txtselectcustomer">
                                                    <input type='hidden' id ='txtcustomer'  name ='txtcustomer_id' >
                                                </div> 
                                        </div> 
                                    </div>


                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="txtdate" class="control-label">Date</label>
                                                <input type="text" class="form-control" placeholder="Date" id="txtdate" name="txtdate">
                                            </div> 
                                        </div> 
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="txtexfoliant" class="control-label">Exfoliant</label>
                                                <input type="text" class="form-control" placeholder="Exfoliant" id="txtexfoliant" name="txtexfoliant">
                                            </div> 
                                        </div> 
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="txtcleanser" class="control-label">Cleanser</label>
                                                <input type="text" class="form-control" placeholder="Cleanser" id="txtcleanser" name="txtcleanser">
                                            </div> 
                                        </div> 
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="txtcharge" class="control-label">Charge</label>
                                                <input type="text" class="form-control numeric" placeholder="Charge" id="txtcharge" name="txtcharge">
                                            </div> 
                                        </div> 
                                    </div>

                                    

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="txttime" class="control-label">Duration (minutes)</label>
                                                <input type="text" class="form-control numeric" placeholder="Time" id="txttime" name="txttime">
                                            </div> 
                                        </div> 
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="txtmask" class="control-label">Mask</label>
                                                <input type="text" class="form-control" placeholder="Mask" id="txtmask" name="txtmask">
                                            </div> 
                                        </div> 
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="txtfacial" class="control-label">Facial name</label>
                                                <input type="text" class="form-control" placeholder="Flash" id="txtfacial" name="txtfacial">
                                            </div> 
                                        </div> 
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="txtremarks" class="control-label">Remarks</label>
                                        <textarea id="txtremarks" name="txtremarks" class="form-control"></textarea>
                                    </div> 
                                </div> 
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-facial waves-effect waves-light">Save</button>
                        </div>
                    </form>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
        <!--End Facial Modal-->

        <!--Edit Service Category Modal-->
        <div id="edittype" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="edit$records" aria-hidden="true" style="display: none;">
            <div class="modal-dialog">
                <div class="modal-content">
                    <form id="editlistForm" action="<?php echo base_url("service_controller/facial_record_update"); ?>" method="POST">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h4 class="modal-title" id="facial-width-modalLabel">Update a Facial Record</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="txteditcustomer" class="control-label">customer</label>
                                                <input id="txteditcustomer" name="txteditcustomer" class="form-control">
                                                <input type="hidden" id="txteditcustomerid" name="txteditcustomerid" class="form-control">
                                            </div> 
                                        </div> 
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="txteditdate" class="control-label">Date</label>
                                                <input type="text" class="form-control" placeholder="Date" id="txteditdate" name="txteditdate">
                                            </div> 
                                        </div> 
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="txteditexfoliant" class="control-label">Exfoliant</label>
                                                <input type="text" class="form-control" placeholder="Exfoliant" id="txteditexfoliant" name="txteditexfoliant">
                                            </div> 
                                        </div> 
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="txteditmask" class="control-label">Mask</label>
                                                <input type="text" class="form-control" placeholder="Mask" id="txteditmask" name="txteditmask">
                                            </div> 
                                        </div> 
                                    </div>
                                    
                                </div>
                                <div class="col-lg-6">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="txteditcharge" class="control-label">Charge</label>
                                                <input type="text" class="form-control numeric" placeholder="Charge" id="txteditcharge" name="txteditcharge">
                                            </div> 
                                        </div> 
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="txtedittime" class="control-label">Duration (minutes)</label>
                                                <input type="text" class="form-control numeric" placeholder="Time" id="txtedittime" name="txtedittime">
                                            </div> 
                                        </div> 
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="txteditcleanser" class="control-label">Cleanser</label>
                                                <input type="text" class="form-control " placeholder="Cleasner" id="txteditcleanser" name="txteditcleanser">
                                            </div> 
                                        </div> 
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="txteditfacial" class="control-label">Facial name</label>
                                                <input type="text" class="form-control" placeholder="Flash" id="txteditfacial" name="txteditfacial">
                                            </div> 
                                        </div> 
                                    </div>
                                </div>
                            </div>
                                                        
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="txteditremarks" class="control-label">Remarks</label>
                                        <textarea id="txteditremarks" name="txteditremarks" class="form-control"></textarea>
                                    </div> 
                                </div> 
                            </div>
                        </div>
                        <div class="modal-footer">
                            <input type="hidden" name="idfacial_record" id="idfacial_record"  />
                            <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-facial waves-effect waves-light">Save</button>
                        </div>
                    </form>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
        <!--End Edit Service Category Modal-->
        
        <!--Add Facial Modal-->
        <div id="addcustomer" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="addcustomer" 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="facial-width-modalLabel">Add a new customer</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="txtcustomername" class="control-label">Name</label>
                                            <input tabindex="1" type="text" class="form-control" placeholder="customer Name" id="txtcustomername" name="txtcustomername">
                                        </div> 
                                    </div> 
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="txtcustomerphone1" class="control-label">Phone 1</label>
                                            <input tabindex="3" type="text" class="form-control numeric" placeholder="customer Phone 1" id="txtcustomerphone1" name="txtcustomerphone1">
                                        </div> 
                                    </div> 
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="txtcustomertype" class="control-label">Type</label>
                                            <select tabindex="5" name="txtcustomertype" id="txtcustomertype" class="form-control">
                                                <option disabled selected value="">Select type</option>
                                                <option value="red">Red</option>
                                                <option value="green">Green</option>
                                                <option value="blue">Blue</option>
                                            </select>
                                        </div> 
                                    </div> 
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="txtcustomercell" class="control-label">Cell</label>
                                            <input tabindex="2" type="text" class="form-control numeric" placeholder="customer Cell" id="txtcustomercell" name="txtcustomercell">
                                        </div> 
                                    </div> 
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="txtcustomerphone2" class="control-label">Phone 2</label>
                                            <input tabindex="4" type="text" class="form-control numeric" placeholder="customer Phone 2" id="txtcustomerphone2" name="txtcustomerphone2">
                                        </div> 
                                    </div> 
                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="txtcustomeremail" class="control-label">Email</label>
                                            <input tabindex="6" type="email" class="form-control" placeholder="customer Email" id="txtcustomeremail" name="txtcustomeremail">
                                        </div> 
                                    </div> 
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-12">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="txtcustomeraddress" class="control-label">Address</label>
                                            <input tabindex="7" type="text" class="form-control " placeholder="customer Address" id="txtcustomeraddress" name="txtcustomeraddress">
                                        </div> 
                                    </div> 
                                </div>
                            </div>
                        </div>
                        <div class="row m-b-5">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="col-sm-12">
                                        <label for="txtcustomeranniversary" class="control-label">Wedding Anniversary</label>
                                    </div>
                                    <div class="col-sm-12">
                                        <div class="input-group">
                                            <input tabindex="8" type="text" class="form-control" placeholder="yyyy/mm/dd" id="txtcustomeranniversary" name="txtcustomeranniversary">
                                            <span class="input-group-addon bg-info b-0 text-white"><i class="ti ti-calendar"></i></span>
                                        </div><!-- input-group -->
                                    </div>
                                </div>                                
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <div class="col-lg-12">
                                        <label for="txtcustomerbirthday" class="control-label">Birthday</label>
                                    </div>
                                    <div class="col-lg-4">
                                        <select tabindex="9" id="txtcustomerbirthday" name="txtcustomerbirthday" class="form-control">
                                            <option value=""></option>
                                        </select>
                                    </div>
                                    <div class="col-lg-8">
                                        <select tabindex="10" id="txtcustomerbirthmonth" name="txtcustomerbirthmonth" class="form-control">
                                            <option value=""></option>
                                            <option value="January">January</option>
                                            <option value="February">February</option>
                                            <option value="March">March</option>
                                            <option value="April">April</option>
                                            <option value="May">May</option>
                                            <option value="June">June</option>
                                            <option value="July">July</option>
                                            <option value="August">August</option>
                                            <option value="September">September</option>
                                            <option value="October">October</option>
                                            <option value="November">November</option>
                                            <option value="December">December</option>
                                        </select>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="txtcustomerallergies" class="control-label text-danger">Allergies Alert</label>
                                            <input tabindex="11" type="text" class="form-control " placeholder="Note down any allergies the customer may have" id="txtcustomerallergies" name="txtcustomerallergies">
                                        </div> 
                                    </div> 
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="txtcustomeralert" class="control-label text-warning">customer Alert</label>
                                            <input tabindex="12" type="text" class="form-control " placeholder="Note down any other alerts you want to get when the customer visits . . ." id="txtcustomeralert" name="txtcustomeralert">
                                        </div> 
                                    </div> 
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
                        <button tabindex="13" onclick="addnew();" type="button" class="btn btn-facial waves-effect waves-light">Save</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
        <!--End Facial Modal-->
        <script src="<?php echo base_url(); ?>assets/js/datatable.js"></script>


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

                

                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'
                });
                
                $('#txteditdate').datepicker({
                    autoclose: true,
                    todayHighlight: true,
                    format: 'yyyy-mm-dd'
                });

                $("#txttime1").datetimepicker({
                    format: 'HH:mm:00',
                    enabledHours: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
                    allowInputToggle: true,
                    stepping: 15
                });
                
                $("#txtedittime11").datetimepicker({
                    format: 'HH:mm:00',
                    enabledHours: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
                    allowInputToggle: true,
                    stepping: 15
                });

                

                $('#addlistForm').on('submit', function(e) {
                    e.preventDefault();

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

                    var txtcustomer_id = data.id_customers;
                    var txtcustomer = data.customer_name;
                    
                    $.ajax({
                        url: $(this).attr('action') || window.location.pathname,
                        type: "POST",
                        data: {txtcustomer_id: txtcustomer_id, txtcustomer: txtcustomer, txttime: $('#txttime').val(), txtcharge: $('#txtcharge').val(), txtremarks: $('#txtremarks').val(), txtdate: $('#txtdate').val(), txtexfoliant: $('#txtexfoliant').val(), txtmask: $('#txtmask').val(), txtcleanser: $('#txtcleanser').val(), txtfacial: $('#txtfacial').val()},
                        success: function(data) {
                            var result = data.split("|");
                            if (result[0] === "success") {
                                toastr.success('Facial record added');
                                location.reload();
                            } 
                        },
                        error: function(jXHR, textStatus, errorThrown) {
                        
                        }
                    });
                });
                
                $('#editlistForm').on('submit', function(e) {
                    e.preventDefault();
                  

                    var txtcustomer_id = $("#txteditcustomerid").val();
                    var txtcustomer =  $("#txteditcustomer").val();
                    
                    $.ajax({
                        url: $(this).attr('action') || window.location.pathname,
                        type: "POST",
                        data: {idfacial_record: $('#idfacial_record').val(), txtcustomer_id: txtcustomer_id, txtcustomer: txtcustomer, txttime: $('#txtedittime').val(), txtcharge: $('#txteditcharge').val(), txtremarks: $('#txteditremarks').val(), txtdate: $('#txteditdate').val(), txtexfoliant: $('#txteditexfoliant').val(), txtmask: $('#txteditmask').val(), txtcleanser: $('#txteditcleanser').val(), txtfacial: $('#txteditfacial').val()},
                        success: function(data) {
                            //console.log(data);
                            var result = data.split("|");
                            if (result[0] === "success") {
                                toastr.success('Facial record updated');
                                location.reload();
                            } 
                        },
                        error: function(jXHR, textStatus, errorThrown) {
                        
                        }
                    });
                });
                
                $(".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;
                    }
                });

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

                faciallist.init();

            });


            var faciallist = function () {       
                var initPickers = function () {
                //init date pickers
                    $('.date-picker').datepicker({
                        format: 'yyyy-mm-dd',
                        autoclose: true
                    });
                }         
                var handleFacials = 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(); ?>service_controller/get_facial_list_ajax" // ajax source
                            },
                            "order": [
                                [1, "desc"]
                            ], // set first column as a default sort by asc
                            "columns": [                            
                                {"data": "id"},
                                {"data": "customer"},
                                {"data": "facial"},
                                {"data": "exfoliant"},
                                {"data": "mask"},
                                {"data": "cleanser"},                           
                                {"data": "date"},
                                {"data": "time"},
                                {"data": "charge"},
                                {"data": "remarks"},
                                {"data": "action"}
                            ],
                            "columnDefs": [{"sortable": false, "targets": 3}],
                            "responsive":1

                        }
                    });


                    // 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();
                        handleFacials();
                    }

                };

            }();



            function openaddnew() {
                $("#addlist").modal('show');
            }
            
            function openupdate(id_facial_record) {
                
                $.ajax({
                    type: 'POST',
                    url: '<?php echo base_url(); ?>service_controller/edit_facial_record',
                    data: {id_facial_record: id_facial_record},
                    dataType: "json",
                    cache: false,
                    async: true,
                    success: function(data){
                        
                        
                        $('#txteditcustomer').val(data.customer);
                        $('#txteditcustomerid').val(data.customer_id);
                        

                        $("#txteditdate").val(data.date);
                        $("#txtedittime").val(data.time);
                        $("#txteditexfoliant").val(data.exfoliant);
                        $("#txteditmask").val(data.mask);
                        $("#txteditcleanser").val(data.cleanser);
                        $("#txteditremarks").val(data.remarks);
                        $("#txteditcharge").val(data.charge);
                        $("#txteditfacial").val(data.facial);

                        $('#idfacial_record').val(id_facial_record);

                        $("#edittype").modal('show');
                        
                    }
                });
            }
            
            function Not_Found(){
                var $not_found = '<div>customer not found <a class="btn btn-primary btn-sm" href="#" onclick="return myClick()"><span class="sp">Add customer</span></a></div>';
                return $not_found;
            }
            
            function myClick(){
               $('.sp').html('<i class="fa fa-spin fa-spinner" aria-hidden="true"></i>');
            setTimeout(function(){
                
                $("#addlist").modal('hide');
                $('.select2-drop').css('display',"none");
            }, 1000);
            
            setTimeout(function(){
                //$('#addlist').addClass('fa fa-spinner');
                $("#addcustomer").modal('show');
            }, 1500);
                
            }
            
            function addnew() {
                if ($("#txtcustomername").val() !== "") {
                    $("#txtcustomername").val(ucwords($("#txtcustomername").val()));
                    var customer_name = $("#txtcustomername").val().trim();
                    customer_name = customer_name.split(" ");
                    
                    if(customer_name.length > 1){
                        $.ajax({
                            type: 'POST',
                            url: 'customer_controller/add_customer',
                            data: {customer_name: $("#txtcustomername").val(), customer_cell: $("#txtcustomercell").val(), customer_phone1: $("#txtcustomerphone1").val(), customer_phone2: $("#txtcustomerphone2").val(), customer_address: $("#txtcustomeraddress").val(), customer_birthday: $("#txtcustomerbirthday").val(), customer_birthmonth: $("#txtcustomerbirthmonth").val(), customer_email: $("#txtcustomeremail").val(), customer_anniversary: $("#txtcustomeranniversary").val(), customer_allergies: $("#txtcustomerallergies").val(), customer_alert: $("#txtcustomeralert").val(), customer_type: $("#txtcustomertype").val()},
                            success: function(data) {
                                console.log(data);
                                var result = data.split("|");
                                if (result[0] === "success") {
                                    toastr.success(data, 'New customer Added');
                                    location.reload();
                                }
                            }
                        });
                    } else{
                        swal({
                            title: "Please enter customer's last name also!",
                            text: "",
                            type: "error",
                            confirmButtonText: 'OK!'
                        });
                    }
                }
            }
            

            function oncustomerchange(){
                var data = $("#txtselectcustomer").select2('data');
                 
                $("#txtcustomer").val(data.id_customers);
                
            }
            
        </script>