<style type="text/css">
    @media print
    {
        .noprint {display:none;}
    }
</style>
<div class="wrapper">
    <div class="full-container">
        <!-- Page-Title -->
        <div class="row">
            <div class="col-sm-12">
                <div class="btn-group pull-right m-t-15">
                    
                    
                    
                </div>
            </div>
        </div>
        
        
        <div class="row">            
            <div class="col-md-12">
                <div class="card-box table-responsive">
                    <h4 class="header-title m-t-0 m-b-30">
                        Merge Customers:
                    </h4>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-6">
                                    <h4>Customer You Want To <span style="color:greenyellow; font-weight: 700;">KEEP</span></h4>
                                    
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group ">
                                                <input  type="text" id="txt-customer-keep" id="txt-customer-keep"  onchange='on_customer_keep_change();' placeholder="Change Customer"  class="form-control" style='min-width:210px;' >
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12" >
                                            <table class="table table-responsive" id="table-customer-keep">
                                                <thead>
                                                    <tr>
                                                        <th>Item</th>
                                                        <th>count</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                                
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-6" style="border-left: 1px solid #808080">
                                    <h4>Customer You Want To Merge (will be <span <span style="color:red; font-weight: 700;">REMOVED</span>)</h4>
                                    
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group ">
                                                <input  type="text" id="txt-customer-toremove"  name="txt-customer-toremove" onchange='on_customer_remove_change();' placeholder="Change Customer"  class="form-control" style='min-width:210px;' >
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                             <table class="table table-responsive"  id="table-customer-toremove">
                                                <thead>
                                                    <tr>
                                                        <th>Item</th>
                                                        <th>count</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                                
                                            </table>
                                        </div>
                                    </div>
                                    
                                </div>
                                
                            </div>
                            
                            <div class="row" style="display:none" id="execute-button-row">
                                <div class="pull-left"></div>
                                <div class="pull-right">
                                    <button onclick="openmodal()" class="btn btn-danger waves-effect waves-light">MERGE</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--Add Confirmation Modal-->
<div id="confimationModal" class="modal fadein" tabindex="-1" role="dialog" aria-labelledby="confimationModal" 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">Confirm You Selection</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <p style="font-size: 14px">This will REMOVE the Customer <span class="text-danger" style="font-weight:700" id="modal-customer-toremove"></span></p>
                        <p style="font-size: 14px">and MOVE all INVOICES, VISITS Etc. to Customer <span style="font-weight:700" class="text-success" id="modal-customer-keep"></span></p>
                    </div> 
                </div> 
            </div>
            <div class="modal-footer">
                <div class="row">
                    <div class="pull-left" style="text-align: right">
                        
                    </div>
                    <div class="pull-right" style="text-align: left">
                        <button onclick="update_data();" class="btn btn-primary  waves-effect waves-light" >CONFIRM</button>
                        <button  data-dismiss="modal" aria-hidden="true" class="btn btn-danger waves-effect waves-light">CANCEL</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script>

    $(document).ready(function () {

        customer_keep_select();
        customer_toremove_select();
    });
    
    function customer_keep_select() {
        $("#txt-customer-keep").select2({
            placeholder: "Change Customer",
            containerCssClass : "alphanumeric",
            initSelection: function(element, callback) {},
            ajax: {
                url: '<?php echo base_url(); ?>customer_controller/searchwithcell',
                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: 5,
            formatResult: function (option) {
                return option.id + " |  " +option.customer_name + " |  " + option.customer_cell;
            },
            formatSelection: function (option) {

                return option.id + " |  " +option.customer_name + " | " + option.customer_cell;
            }
        });
        
    }

    function customer_toremove_select() {
        $("#txt-customer-toremove").select2({
            placeholder: "Change Customer",
            containerCssClass : "alphanumeric",
            initSelection: function(element, callback) {},
            ajax: {
                url: '<?php echo base_url(); ?>customer_controller/searchwithcell',
                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: 5,
            formatResult: function (option) {
                return option.id + " |  " + option.customer_name + "  " + option.customer_cell;
            },
            formatSelection: function (option) {

                return option.id + " |  " +option.customer_name + "  " + option.customer_cell;
            }
        });
        
    }



    function on_customer_keep_change(){
        
        var data = $("#txt-customer-keep").select2('data');
        var id_customers = data.id_customers;
        
        $.ajax({
            type: 'POST',
            //url: 'Scheduler_controller/getAllStaff',
            url: '<?php echo base_url() . 'customer_controller/get_customer_counts'; ?>',
            data: {customer_id: id_customers},
            dataType: "json",
            cache: false,
            async: true,
            success: function (response) {
               
                var html='';
                html+='<tr>';
                html+='<td>Invoices</td>';
                html+='<td>'+ response.invoices.mCount +'</td>';
                html+='</tr>';
                html+='<tr>';
                html+='<td>Visits</td>';
                html+='<td>'+ response.visits.mCount +'</td>';
                html+='</tr>';
                html+='<tr>';
                html+='<td>Account Vouchers</td>';
                html+='<td>'+ response.account_vouchers.mCount +'</td>';
                html+='</tr>';
                html+='<tr>';
                html+='<td>Gift Vouchers</td>';
                html+='<td>'+ response.order_vouchers.mCount +'</td>';                
                html+='</tr>';
                html+='<tr>';
                html+='<td>Order Vouchers</td>';
                html+='<td>'+ response.customer_orders.mCount +'</td>';                
                html+='</tr>';
                html+='<tr>';
                html+='<td>Color Records</td>';
                html+='<td>'+ response.color_records.mCount +'</td>';                
                html+='</tr>';
                 html+='<tr>';
                html+='<td>EyeLash Records</td>';
                html+='<td>'+ response.eyelashes_record.mCount +'</td>';                
                html+='</tr>';
                 html+='<tr>';
                html+='<td>Facial Records</td>';
                html+='<td>'+ response.facial_records.mCount +'</td>';                
                html+='</tr>';  
                
                $("#table-customer-keep tbody").html(html);
                
                var dataremove = $("#txt-customer-toremove").select2('data');
                var id_customer_remove = null;
                if(dataremove !== null){id_customer_remove=dataremove.id_customers;}
                
                if(id_customers !== null && id_customer_remove !== null){
                    $("#execute-button-row").show();
                }else{
                    $("#execute-button-row").hide();
                }
            }
        });
    }


    function on_customer_remove_change(){
        
        var data = $("#txt-customer-toremove").select2('data');
        var id_customers = data.id_customers;
        
        $.ajax({
            type: 'POST',
            //url: 'Scheduler_controller/getAllStaff',
            url: '<?php echo base_url() . 'customer_controller/get_customer_counts'; ?>',
            data: {customer_id: id_customers},
            dataType: "json",
            cache: false,
            async: true,
            success: function (response) {
                 var html='';
                html+='<tr>';
                html+='<td>Invoices</td>';
                html+='<td>'+ response.invoices.mCount +'</td>';
                html+='</tr>';
                html+='<tr>';
                html+='<td>Visits</td>';
                html+='<td>'+ response.visits.mCount +'</td>';
                html+='</tr>';
                html+='<tr>';
                html+='<td>Account Vouchers</td>';
                html+='<td>'+ response.account_vouchers.mCount +'</td>';
                html+='</tr>';
                html+='<tr>';
                html+='<td>Gift Vouchers</td>';
                html+='<td>'+ response.order_vouchers.mCount +'</td>';                
                html+='</tr>';
                html+='<tr>';
                html+='<td>Order Vouchers</td>';
                html+='<td>'+ response.customer_orders.mCount +'</td>';                
                html+='</tr>';
                html+='<tr>';
                html+='<td>Color Records</td>';
                html+='<td>'+ response.color_records.mCount +'</td>';                
                html+='</tr>';
                 html+='<tr>';
                html+='<td>EyeLash Records</td>';
                html+='<td>'+ response.eyelashes_record.mCount +'</td>';                
                html+='</tr>';
                 html+='<tr>';
                html+='<td>Facial Records</td>';
                html+='<td>'+ response.facial_records.mCount +'</td>';                
                html+='</tr>';
                
                $("#table-customer-toremove tbody").html(html);
                
                
                var datakeep = $("#txt-customer-keep").select2('data');
                var id_customer_keep = null;
                if(datakeep !== null){id_customer_keep=datakeep.id_customers;}
               
                if(id_customers !== null && id_customer_keep !== null){
                    $("#execute-button-row").show();
                }else{
                    $("#execute-button-row").hide();
                }
            }
        });
    }

    function openmodal(){
        var datakeep = $("#txt-customer-keep").select2('data');
        var id_customer_keep = datakeep.id_customers;
        var customer_keep = datakeep.customer_name;
        var cell_keep = datakeep.customer_cell;
        
        var dataremove = $("#txt-customer-toremove").select2('data');
        var id_customer_remove = dataremove.id_customers;
        var customer_remove = dataremove.customer_name;
        var cell_remove = dataremove.customer_cell;
        
        $("#modal-customer-toremove").html(id_customer_remove + " | " + customer_remove + " | " +cell_remove);
        $("#modal-customer-keep").html(id_customer_keep + " | " + customer_keep + " | " + cell_keep);
        
        $("#confimationModal").modal('show');
        
    }
    
    
    function update_data(){
     
        var datakeep = $("#txt-customer-keep").select2('data');
        var id_customer_keep = datakeep.id_customers;
        var customer_keep = datakeep.customer_name;
        var cell_keep = datakeep.customer_cell;
        
        var dataremove = $("#txt-customer-toremove").select2('data');
        var id_customer_remove = dataremove.id_customers;
        var customer_remove = dataremove.customer_name;
        var cell_remove = dataremove.customer_cell;
        
        if(id_customer_keep == id_customer_remove){
            swal("SAME CUSTOMER!", "Same customer selected in both options.", "info");
            return false;
        }
        
         $.ajax({
            type: 'POST',
            //url: 'Scheduler_controller/getAllStaff',
            url: '<?php echo base_url() . 'customer_controller/merge_customer_data'; ?>',
            data: {id_customer_keep:  id_customer_keep, id_customer_remove: id_customer_remove },
            dataType: "text",
            cache: false,
            async: true,
            success: function (response) {
                
                if(response=="success"){
                    swal("Merged!", "Customers Merged.", "success");
                    $("#confimationModal").modal('hide');
                    location.reload();                    
                }else {
                    swal("Error!", "Customers Not Merged Properly.", "error");
                    //location.reload();
                     $("#confimationModal").modal('hide');                    
                }
            },
            error: function(request, status, error){
                swal("Error!", request.responseText, "error");
            }
        });
     
        
    }
    
</script>