<style>
    .overlay {
       
        background-color: rgba(0,0,0,0.1); /* Black background with opacity */
        z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
        cursor: pointer; /* Add a pointer on hover */
      }
      .selected{          
          font-weight: 800;
          font-size:16px;
          
      }
      .selected::after{
          content: "\27BA";
      }
</style>
<script>
    var categories = <?php print_r($service_categories);?>;
</script>
<div class="wrapper" >
    <div class="container" style="margin-top: -50px;">
        <!-- Page-Title -->
        <div class="row">
            <div class="col-sm-12">
                <h4 id="page-title" class="page-title">Hi,</h4>
                <input type="hidden" name="customerid" id="customerid">
                <input type="hidden" name="customername" id="customername">
            </div>
        </div>
        <div class="row" id="divselection">
            <div class="col-sm-12">
                <div class="card-box ">
                    <!-- Search Box -->
                    <div class="row" id="divsearch">
                        <div class="col-lg-12">
                            <div id="searchpanel" >
                                <h4 class="header-title m-t-0 m-b-30">Please Enter Your Cell Number or Name To Begin: </h4>
                                <div class="row">
                                    

                                    <div class="col-lg-5 m-b-30">
                                        <!--Cell Phone Search Form-->
                                        <div id="cellsearchform">
                                            <div class="input-group">
                                                <input type="text" id="cell-search" name="cell-search" class="form-control numeric" placeholder="Cell Phone Search" onchange="newcustomerbtn_show_hide(this.value);">
                                                <span class="input-group-btn">
                                                    <button type="submit" class="btn waves-effect waves-light btn-info" id="btncell-search"><i class="fa fa-phone"></i></button>
                                                </span>
                                            </div>
                                        </div>
                                        <!--End Name Search -->
                                    </div>

                                    <div class="col-lg-5 m-b-30">
                                        <!--Name Search Form-->
                                        <div id="namesearchform">
                                            <div class="input-group">
                                                <input type="text" id="name-search" name="name-search" class="form-control alpha" placeholder="Name Search" onchange="newcustomerbtn_show_hide(this.value);">
                                                <span class="input-group-btn">
                                                    <button type="submit" class="btn waves-effect waves-light btn-pink" id="btnname-search"><i class="fa fa-tag"></i></button>
                                                </span>
                                            </div>
                                        </div>
                                        <!--End Name Search -->
                                    </div>
                                    
                                    <div class="col-lg-2 m-b-30">
                                        <span class="input-group-btn">
                                            <button onclick="clearall();" class="btn waves-effect waves-light btn-default">Clear</button>
                                        </span>
                                    </div>

                                    <div class="col-lg-12">
                                        <div align="center" id="newcustomeradding">
                                            <button type="submit" class="btn waves-effect waves-light btn-custom newcustomeradding"><i class="fa fa-plus"></i> Add Customer</button>
                                        </div>
                                    </div>
                                </div>     
                            </div> 
                        </div>
                    </div>
                    <!-- End Search Box -->
                    
                    <!-- Customer List -->
                <div id="multiplesearch" class="row" style="display:none;">
                    <div class="col-lg-12">
                        <div class="card-box">
                            <div class="pull-right">
                                <button class="btn btn-purple btn-xs w-md m-b-5" onclick="back('#multiplesearch', '#divsearch'); removeNiceScroll(); $('#cell-search').val(''); $('#name-search').val(''); $('#balanceid').html('');"><i class="glyphicon glyphicon-chevron-left"></i> Back</button>
                            </div>
                            <h4 class="header-title m-t-0 m-b-30">Please Select Yourself from the Customer List Below:</h4>
                            <div class="row">
                                <div class="col-md-6">
                                    <div id="customer_list" class="inbox-widget nicescroll" style="height: 250px; overflow: hidden; outline: none;" tabindex="5000">

                                    </div>
                                </div>
                                <div class="col-md-6"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End Customer List -->
                    
                  <!-- Add/View Customer -->
                <div class="row" id="divmain" style="display:none;">
                    <div class="col-lg-12">
                        <div class="card-box">
                            <div class="pull-right">
                                <button onclick="back('#divmain', '#divsearch'); $('#txt-customer-id').val(''); $('#cell-search').val(''); $('#name-search').val(''); $('#balanceid').html('');" class="btn btn-purple btn-xs w-md m-b-5"><i class="glyphicon glyphicon-chevron-left"></i> Back</button>
                            </div>
                            <h4 class="header-title m-t-0 m-b-30">Customer Details:</h4>
                            <div id="customer_alert" class="row" style="display: none">
                                <div id="alert_text" class="alert alert-danger">
                                    <strong>Customer Alert!</strong>
                                </div>
                            </div>
                            <form role="form" id="customerform">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group has-feedback">
                                            <label class="control-label">Reference #</label>
                                            <input readonly="readonly" type="text" id="txt-customer-id" name="txt-customer-id" class="form-control" placeholder="Reference #">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group has-feedback">
                                            <label class="control-label">Name*<span id="customer-color"></span></label>
                                            <input readonly="readonly" type="text" id="txt-customer-name" name="txt-customer-name" class="form-control alpha" placeholder="Name">
                                        </div>
                                    </div>
                                     <div class="col-md-4">
                                        <div class="form-group has-feedback">
                                            <label class="control-label">Cell*</label>
                                            <input readonly="readonly" type="text" id="txt-customer-cell" name="txt-customer-cell" class="form-control numeric" placeholder="Cell Phone">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group has-feedback">
                                            <label class="control-label">Email</label>
                                            <input readonly="readonly" type="email"  id="txt-customer-email" name="txt-customer-email" class="form-control" parsley-type="email" parsley-trigger="change" required placeholder="Email">
                                        </div>
                                    </div>
                                   
                                    <div class="col-md-4">
                                        <div class="form-group has-feedback">
                                            <label class="control-label">Address</label>
                                            <input readonly="readonly" type="text" id="txt-customer-address" name="txt-customer-address"  class="form-control" placeholder="Address">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group ">
                                            <label class="control-label">Birthday</label>
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <select disabled="disabled" id="txt-customer-bday" name="txt-customer-bday" class="form-control">
                                                        <option value=""></option>
                                                    </select>
                                                </div>
                                                <div class="col-md-8">
                                                    <select disabled="disabled" id="txt-customer-bmonth" name="txt-customer-bmonth" 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="col-md-4">
                                        <div class="form-group has-feedback">
                                            <label class="control-label">Profession</label>
                                            <input readonly="readonly" type="text" id="txt-customer-profession" name="txt-customer-profession"  class="form-control" placeholder="Profession">
                                        </div>
                                    </div>
                                    <div class="col-md-4" id="div_careof" style="display:none">
                                        <div class="form-group">
                                            <label class="control-label">Care Of:</label>
                                            <input onchange="oncareofchange();"  type="hidden" id="txt-customer-co" name="txt-customer-co"  class="form-control" >
                                        </div>
                                    </div>
                                    <div class="col-md-4" id="div_careof_display" style="display:block">
                                        <div class="form-group">
                                            <label class="control-label">Care Of:</label>
                                            <input  type="text" id="txt-customer-display" name="txt-customer-display"  class="form-control" >
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="txt-customer-gender" class="control-label">Gender</label>
                                            <select tabindex="2" type="text" class="form-control numeric" placeholder="Gender" id="txt-customer-gender" name="txt-customer-gender">
                                                <option value="F">Female</option>
                                                <option value="M">Male</option>
                                                
                                            </select>
                                        </div> 
                                    </div>
                                </div>
                                <div style="display:none" class="col-lg-4 hidden-md hidden-sm hidden-xs">
                                    <div id = "imgdisplay" style="display:block; text-align: center;">
                                        <img src="<?php echo base_url(); ?>assets/images/users/avatar-1.jpg" id="img-customer" name="img-customer" alt="customer" style="width:100%"/>
                                        <input id="img-customer-file" type="hidden" value="avatar-1.jpg"/>
                                        <br/>
                                        <button onclick="changepic();"  type="button" class="btn btn-sm btn waves-effect w-md waves-success m-b-5">Change</button>
                                    </div>
                                    <div id = "imguploader" style="display:none;">
                                        <input id="img-uploader-customer" name="img-uploader-customer" data-height="300" type="file" class="dropify"  />
                                    </div>
                                </div>
                            </form>
                            <div class="row" style="margin-top: 20px; ">
                                <div class="col-sm-12">
                                    <div class="pull-right">
                                        
                                        <a href="javascript:void(0);" onclick="previousdirect();" class="btn btn-primary btn waves-effect w-md waves-success m-b-5 visit-message">Account</a>
                                        <button id="btnupdate" onclick="addeditcustomer();" type="button" class="btn btn-pink btn waves-effect waves-primary w-md m-b-5"> Add Me To Your Customer List <i class="fa fa-icon fa-smile-o" style="font-size:16px;"></i></button>
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End Add/View Customer -->
                
               
                
                </div>
            </div>
        </div>
        
        
        <div class="row" id="service_select_div" style="display:none;">
            <!--SERVICE TYPE-->
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" >                
               <div class="card-box" >
                    <h4 id='type_heading' class="header-title m-t-0 m-b-30 ">What Type of Service would you like Today?</h4>
                    <div id="type_list" class="inbox-widget nicescroll" style="height: 315px; overflow: hidden; outline: none;" tabindex="5000">

                        <?php foreach($service_types as $st){ ?>
                            <a href="javascript:openCatagories('<?php echo $st['id_service_types']; ?>', '<?php echo $st['flag']; ?>', '<?php echo $st['service_type']; ?>');">
                                <div class="inbox-item">
                                    <div class="inbox-item-img"><img src="<?php echo base_url(). $st['service_type_image'];?>" class="img-circle" alt="" data-pin-nopin="true"></div>
                                    <p class="inbox-item-author service_type"><?php echo $st['service_type'];?></p>
                                    <p class="inbox-item-text"><?php // echo $st['flag'];?></p>
                                    <p class="inbox-item-date"><?php //echo $st['flag'];?></p>
                                </div>
                            </a>
                        <?php } ?>
                    </div>
                    <div class="modal-footer" >
                        <div class="row">
                            <div class="col-md-6 col-sm-6 col-xs-6 text-left"><strong></strong></div>
                            <div class="col-md-6 col-sm-6 col-xs-6 text-right" style="font-weight:bold;"></div>                            
                        </div>
                        <div class="row m-t-5">    
                            <div class="col-md-6 col-sm-6 col-xs-6 text-left">
                                <a onclick="closeServices(); back('#service_select_div', '#divselection');" href="#type_heading" class="btn btn-sm btn-purple">Back</a>
                            </div>
                            <div class="col-md-6 col-sm-6 col-xs-6 text-right">                                
                            </div>
                        </div>                             
                            
                    </div>
                </div>
            </div>
             <!-----END SERVICE TYPES--->
            
            <!-----SERVICE CATEGORIES--->
            <div  class="col-lg-3 col-md-3 col-sm-3 col-xs-12" >
                <div id='categories_div' class="card-box" style="display:none;">
                    <h4 id='category_heading' class="header-title m-t-0 m-b-30">What would you like to get done for your <span id='selected_type' style='text-transform: uppercase;'></span></h4>
                    <div id="categories_list" class="inbox-widget nicescroll" style="height: 315px; overflow: hidden; outline: none;" tabindex="5000">
                       
                    </div>
                    <div class="modal-footer" >
                        <div class="row">
                            <div class="col-md-6 col-sm-6 col-xs-6 text-left"><strong></strong></div>
                            <div class="col-md-6 col-sm-6 col-xs-6 text-right" style="font-weight:bold;"></div>                            
                        </div>
                        <div class="row m-t-5">    
                            <div class="col-md-6 col-sm-6 col-xs-6 text-left">
                                <a onclick='closeCategory();' href="#type_heading" class="btn btn-sm btn-purple">Change Type</a>
                            </div>
                            <div class="col-md-6 col-sm-6 col-xs-6 text-right">                                
                            </div>
                        </div>                             
                            
                    </div>
                </div>
            </div>
            <!-----END SERVICE CATEGORIES--->
            
            <!-----SERVICES--->
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" >
                <div id='services_div'  class="card-box" style="display:none;">
                    <h4 id="service_heading" class="header-title m-t-0 m-b-30">Please choose an option from <span id='selected_category' style='text-transform: uppercase;'></span></h4>
                    <div id="services_list" class="inbox-widget nicescroll" style="height: 315px; overflow: hidden; outline: none;" tabindex="5000">
                       
                        <?php foreach($service_types as $st){ ?>
                            <a href="javascript:openCatagories('<?php echo $st['id_service_types']; ?>');">
                                <div class="inbox-item">
                                    <div class="inbox-item-img"><img src="<?php echo base_url(). $st['service_type_image'];?>" class="img-circle" alt="" data-pin-nopin="true"></div>
                                    <p class="inbox-item-author" ><?php echo $st['service_type'];?></p>
                                    <p class="inbox-item-text"><?php echo $st['flag'];?></p>
                                    <p class="inbox-item-date"><?php echo $st['flag'];?></p>
                                </div>
                            </a>
                        <?php } ?>
                    </div>
                    <div class="modal-footer" >
                        <div class="row">
                            <div class="col-md-6 col-sm-6 col-xs-6 text-left"><strong></strong></div>
                            <div class="col-md-6 col-sm-6 col-xs-6 text-right" style="font-weight:bold;"></div>                            
                        </div>
                        <div class="row m-t-5">    
                            <div class="col-md-6 col-sm-6 col-xs-6 text-left">
                                <a onclick='closeServices();' href="#category_heading" class="btn btn-sm btn-purple">Change Category</a>
                            </div>
                            <div class="col-md-6 col-sm-6 col-xs-6 text-right">
                               
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-----END SERVICES--->
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" >
                <div id='selection_div'  class="card-box"  >
                    <h4 id="selection_heading" class="header-title m-t-0 m-b-30">You Have Selected:</h4>
                    <div id="selection_list" class="inbox-widget nicescroll" style="height: 315px; overflow: hidden; outline: none; padding-right: 10px;" tabindex="5000">
                        
                    </div>
                    <div class="modal-footer" >
                        <div class="row">
                            <div class="col-md-6 col-sm-6 col-xs-6 text-left"><strong>Grand Total</strong></div>
                            <div id ="grandtotal" class="col-md-6 text-right" style="font-weight:bold;"></div>
                            
                        </div>
                        <div class="row m-t-5">    
                            <div class="col-md-6 col-sm-6 col-xs-6 text-left">
                                <a onclick='closeServices();' href="#categories_div" class="btn btn-sm btn-purple">Add More</a>
                            </div>
                            <div class="col-md-6 col-sm-6 col-xs-6 text-right">
                                <button id="btncreatevisits" onclick="create_visit();" class="btn btn-sm btn-pink">I am Done</button>
                            </div>
                        </div>                             
                            
                    </div>
                </div>
            </div>
            
        </div>        
    </div>
    
    
    
    <script>
    
    $(document).ready(function(){
        
        $(".service_type").click(function(e){  
            $("#services_div").slideUp();
            $("#category_heading").removeClass('text-pink');
            $(".service_type").removeClass("selected");
            $(this).addClass("selected");
        });
        
    });
    
    
        function openCatagories(typeid, flag, type){
            
           $("#selected_type").html(type);
           $("#categories_list").html('');
           $("#services_list").html('');
           
            var html  ='';
            for(x=0; x < categories.length; x++){                        
                if(categories[x]['service_type_id']==typeid && categories[x]['flag']==flag){
                    html += '<a href="javascript:openServices(\'' + categories[x]['id_service_category']  + '\', \'' + categories[x]['flag']  + '\', \'' + categories[x]['service_category']  + '\');">';
                    html += '<div class="inbox-item">';
                    html += '<div class="inbox-item-img"><img src="<?php echo base_url();?>'+ categories[x]['service_category_image'] +'" class="img-circle" alt="" data-pin-nopin="true"></div>';    
                    html += '<p class="inbox-item-author service_category">'+ categories[x]['service_category']+ '</p>';

                    html += '</div></a>';
                }
            }
            $("#categories_list").html(html);
            $("#type_heading").addClass('text-pink');
            $(".service_type").addClass('text-pink');
            $("#categories_div").slideDown();

            $(".service_category").click(function(e){  
                $(".service_category").removeClass("selected");
                $(this).addClass("selected");
            });
            jump('category_heading'); 
           
           return false;
        }
        
        
        function openServices(categoryid, flag, category){
            $("#selected_category").html(category);
            $("#services_list").html('');
            $.ajax({
                type: "POST",
                url: "<?php echo base_url();?>service_controller/getServicesByCategory",
                data: {id_service_category: categoryid, flag: flag},
                dataType: "json",
                cache: false,
                async: true,
                success: function (data) {
                    var html  ='';
                    for(x=0; x<data.length; x++){                        
                        
                        html += '<a href="javascript:addService(\'' + data[x]['id_business_services']  + '\',\'' + data[x]['service_name'] + '\',\'' + data[x]['service_rate'] + '\',\'' + data[x]['price'] + '\',\'' + data[x]['flag'] + '\');">';
                        html += '<div class="inbox-item">';
                        
                        html += '<p class="inbox-item-author">'+ data[x]['service_name']+ '</p>';
                        html += '<p class="inbox-item-text">'+ data[x]['service_rate']+ '</p>';
                        html += '<p class="inbox-item-date"></p>';
                        html += '</div></a>';
                    }
                    $("#services_list").html(html);
                    $("#category_heading").addClass('text-pink');
                    $(".service_category").addClass('text-pink');                    
                    $("#services_div").slideDown();
                    jump('service_heading');  
                }
            });
        }
    
        
        function addService(service_id, service_name, service_rate, price, flag){
            
            var i = 0;
            $( "#selection_list .inbox-item").each(function(index) {
                i = index+1;
            });    
            
            var html='';
            
            html += '<div class="inbox-item" row="'+i+'" serviceid= "' + service_id + '" service_name="'+ service_name + '" service_rate="' + price +'" service_flag="' + flag +'">';            
            
            html += '<p class="inbox-item-author service_name text-success" style="width: 50% !important; word-wrap: normal; font-size:14px;">'+ service_name+ '</p>';
            html += '<p class="inbox-item-text text-success" style="font-size:14px;"></p>';
            html += '<p class="inbox-item-date service_rate text-success m-t-5" style="font-size:14px; color:##333333;">'+ service_rate + '<a href="#" class="text-pink" style="font-weight:bold;" onclick="removeService(' + i + ')"> X </a></p>';
            
            html += '</div>';
            
            $("#selection_list").append(html);
            
            
            jump('selection_heading');  
            $("#selection_div").slideDown();
            
            var grandtotal=0;
            $("#selection_list .inbox-item" ).each(function( index ) {
                var rate = $(this).attr('service_rate');
                grandtotal = grandtotal + parseFloat(rate);
                grandtotal = Math.round(grandtotal*100)/100;
            });
            
            $("#grandtotal").html(grandtotal);
            

        }
        
        function removeService(i){
            
            $( "#selection_list .inbox-item").each(function( index ) {
                if($(this).attr("row") == i){
                    $(this).remove();
                }
            });
            
            var grandtotal=0;
            $("#selection_list .inbox-item" ).each(function( index ) {
                var rate = $(this).attr('service_rate');
                grandtotal = grandtotal + parseFloat(rate);
                grandtotal = Math.round(grandtotal*100)/100;
            });
            
            $("#grandtotal").html(grandtotal);
            
        }
        
        function closeServices(){
            
            $(".service_category").removeClass("selected");
            $("#category_heading").removeClass('text-pink');
            $(".service_category").removeClass('text-pink');
            $(".service_category").removeClass("selected");
            jump('category_heading');  
            $("#services_div").slideUp();
            
        }
        function closeCategory(){
            $(".type_category").removeClass("selected");
            $("#type_heading").removeClass('text-pink');
            $(".service_type").removeClass('text-pink');
            $(".service_type").removeClass("selected");
            jump('type_heading');  
            $("#services_div").slideUp();            
            $("#categories_div").slideUp(); 
            
            
        }
        function jump(h){
            //console.log('jumping to ' + h);
            var top = document.getElementById(h).offsetTop; 
            window.scrollTo(0, top);
            
            document.getElementById(h).scrollIntoView(); 
        }
        
    </script>    
    
    
    <script>
    
    $(document).ready(function () {
                 
        hideOpenDivs();
        fillBday();
                
        $("#searchpanel input").keypress(function(e) {
           if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
               var mvar = "#btn" + $(this).attr('id');

               $(mvar).trigger('click');

               return false;
           } else {
               return true;
           }
       });

        $("#btnname-search").on('click', function() {
             general_search("#btnname-search"); return false;
           
        });

        $("#btncell-search").on('click', function() {
            general_search("#btncell-search"); return false;
            
        });

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

       

    });
    
    
    function back(selector1, selector2){
        $(selector1).hide();
        $(selector2).fadeIn();
    }

    function next(selector1, selector2){
        $(selector2).hide();
        $(selector1).fadeIn();
    }

    function hideOpenDivs(){

        if($('#txt-customer-id').val() === ""){

            $("#divmain").hide();
            $("#divsearch").fadeIn();
            $('#multiplesearch').hide();
            $('#blocktime').hide();
            $('#newcustomeradding').hide();
            $('#con-close-modal').hide();
            

        } else{

            $("#divmain").fadeIn();
            $("#divsearch").hide();
            $('#newcustomeradding').hide();
            $('#blocktime').hide();
            $("#divvisit").hide();
            $('#con-close-modal').hide();
            

        }

    }
    
    
    
    function general_search(from){

            var name = $("#name-search").val();
            var cell = $("#cell-search").val();
            var card = $("#card-search").val();
            if(name=='' && cell==''){
                return false;
            }
            
            $(from).html('<i class="fa fa-spin fa-spinner"></i>');
            $('#name-search').prop('readonly', true);
            $('#cell-search').prop('readonly', true);
            $('#card-search').prop('readonly', true);
            
            
                $.ajax({
                    type: 'POST',
                    url: "<?php echo base_url() . 'customer_controller/generalsearch'; ?>",
                    data: {customername: name, customercell: cell, customercard: ''},
                    dataType: "json",
                    cache: false,
                    async: true,
                    success: function(data) {

                        //fillcustomerform(data,'search');
                        $('#btnname-search').html('<i class="fa fa-tag"></i>');
                        $('#btncell-search').html('<i class="fa fa-phone"></i>');

                        $('#name-search').prop('readonly', false);
                        $('#cell-search').prop('readonly', false);
                       fillcustomerform(data);
                    }
                });

        }

        function newcustomerbtn_show_hide(a) {
            if (a === "") {
                $('#newcustomeradding').css('display', 'none');
            }
        }
            
            
        function clearall() {

            clearcustomerform();

            $('#name-search').val('');
            $('#cell-search').val('');
            $('#newcustomeradding').hide();

            $('#multiplesearch').hide();

        }
            
            function fillcustomerform(data) {
                clearcustomerform();
                var mhtml = '';

                if (data.length > 1) {

                    $(".nicescroll_1").niceScroll({cursoropacitymin: 0.5});
                    $(".nicescroll").niceScroll({cursoropacitymin: 0.5});
                    
                    for (x = 0; x < data.length; x++) {
                        mhtml += '<a href="javascript:void(0)" onclick="getbyid(' + data[x]['id_customers'] + ');">';
                        mhtml += '<div class="inbox-item">';
                        mhtml += '<div class="inbox-item-img"><img src="<?php echo base_url(); ?>assets/images/users/' + data[x]['customer_image'] + '" class="img-circle" alt=""></div>';
                        mhtml += '<p class="inbox-item-author">' + data[x]['customer_name'] + '</p>';
                        mhtml += '<p class="inbox-item-text">' + data[x]['customer_cell'] + '</p>';
                        mhtml += '<p class="inbox-item-date">' + data[x]['customer_email'] + '</p>';
                        mhtml += '</div>';
                        mhtml += '</a>';
                    }
                    $("#customer_list").html(mhtml);
                    back("#divsearch", "#multiplesearch");
                } else if (data.length === 1) {
                    $("#page-title").html('Hi '+  data[0]['customer_name']);
                    $("#customerid").val(data[0]['id_customers']);
                    $("#customername").val(data[0]['customer_name']);
                    $("#divselection").slideUp();
                    $("#service_select_div").slideDown();

                    return false;

                    if (data[0]['customer_type'] === "") {
                        $('#customer-color').css({
                            'width': '0px',
                            'height': '0px',
                            'margin-left': '0px',
                            'background': 'transparent'
                        });
                    } else {
                        $('#customer-color').css({
                            'width': '5px',
                            'height': '5px',
                            'margin-left': '5px',
                            'display': 'inline-block',
                            'background': data[0]['customer_type'] === 'green' ? '#31e031' : data[0]['customer_type']
                        });
                    }

                    $('#txt-customer-name').prop('readonly', true);
                    $('#txt-customer-email').prop('readonly', true);
                    $('#txt-customer-cell').prop('readonly', true);
                    $('#txt-customer-address').prop('readonly', true);
                    $('#txt-customer-bday').prop('disabled', true);
                    $('#txt-customer-bmonth').prop('disabled', true);
                    $('#txt-customer-gender').prop('disabled', true);
                    
                    $('#txt-customer-profession').prop('readonly', true);
                    $('#txt-customer-profession').val(data[0]['profession']);

                    $("#txt-customer-id").val(data[0]['id_customers']);
                    $("#txt-customer-name").val(data[0]['customer_name']);
                    $("#txt-customer-cell").val(data[0]['customer_cell']);
                    $("#txt-customer-email").val(data[0]['customer_email']);
                    $("#txt-customer-address").val(data[0]['customer_address']);
                    $("#txt-customer-bday").val(data[0]['customer_birthday']);
                    $("#txt-customer-gender").val(data[0]['customer_gender']);
                    $("#txt-customer-profession").val(data[0]['customer_profession']);
                    //$('#txt-customer-bmonth option[value="' + data[0]['customer_birthmonth'] + '"]').attr("selected", "selected");
                    $('#txt-customer-bmonth').val(data[0]['customer_birthmonth']);
                    $("#img-customer").attr('src', '<?php echo base_url(); ?>assets/images/users/' + data[0]['customer_image']);
                    $("#btnupdate").hide();
                    $("#img-customer-file").val(data[0]['customer_image']);
                    $("#imguploader").hide();
                    $("#imgdisplay").show();

                    $('#multiplesearch').hide();

                    back("#divsearch", "#divmain");

                    localStorage.setItem("customer_id", data[0]['id_customers']);
                    localStorage.setItem("customer_name", data[0]['customer_name']);
                    localStorage.setItem("customer_cell", data[0]['customer_cell']);
                    localStorage.setItem("customer_email", data[0]['customer_email']);
                    
                    fillupdateform(data);
                } else {
                   // $('#newcustomeradding').fadeIn();
                    
                    clearcustomerform();
                    open_new_customer();
                }
            }
            
    function clearcustomerform() {

        if ($("#txt-customer-email").length > 0) {
            mfield = $("#txt-customer-email").parsley();
            window.ParsleyUI.removeError(mfield, 'required');
            window.ParsleyUI.removeError(mfield, 'email');
            $("#txt-customer-email").removeClass('parsley-error');
        }
        if ($("#detail-customer-email").length > 0) {
            mfield = $("#detail-customer-email").parsley();
            window.ParsleyUI.removeError(mfield, 'required');
            window.ParsleyUI.removeError(mfield, 'email');
            $("#detail-customer-email").removeClass('parsley-error');
        }

        //localStorage.setItem("customer_id", "");
        localStorage.setItem("customer_name", "");
        localStorage.setItem("customer_cell", "");
        localStorage.setItem("customer_email", "");

        //$('#name-search').val('');
        $("#txt-customer-id").val('');
        $("#txt-customer-name").val('');
        $("#txt-customer-cell").val('');
        $("#txt-customer-email").val('');
        $("#txt-customer-address").val('');
        $("#txt-customer-profession").val('');
        
        $('#txt-customer-bday option:eq(0)').prop('selected', true);
        $('#txt-customer-bmonth option:eq(0)').prop('selected', true);
        $("#img-customer").attr('src', '<?php echo base_url(); ?>assets/images/users/avatar-1.jpg');
        
        $("#btnupdate").show();
        $("#imguploader").hide();
        $("#imgdisplay").show();
        $("#customer_alert").hide();
    }
    
    function getbyid(customerid) {
        $.ajax({
            type: 'POST',
            //url: 'customer_controller/searchid',
            url: "<?php echo base_url() . 'customer_controller/searchid'; ?>",
            data: {id: customerid},
            dataType: "json",
            cache: false,
            async: true,
            success: function(data) {
                fillcustomerform(data);
                //$("#multiplesearch").slideUp();
            }
        });
        
    }
    
    function fillupdateform(data) {
        if (data[0]['customer_allergies'] != "" || data[0]['customer_alert'] != "") {
            $("#alert_text").html('<strong>Customer Alert! Allergic to :</strong> ' + data[0]['customer_allergies'] + ' | <strong>Other Alerts : </strong>' + data[0]['customer_alert']);
            $("#customer_alert").show();
        }
        var d2 = "";
        var d1 = "";
        if (data[0]['customer_anniversary'] !== "" && data[0]['customer_anniversary'] !== null) {
            var d2 = new Date(Date.parse(data[0]['customer_anniversary']));
            m = d2.getMonth() + 1;
            d1 = d2.getFullYear() + "/" + m + "/" + d2.getDate();
        }

        $("#detail-customer-id").val(data[0]['id_customers']);
        $("#detail-customer-name").val(data[0]['customer_name']);
        $("#detail-customer-cell").val(data[0]['customer_cell']);
        $("#detail-customer-email").val(data[0]['customer_email']);
        $("#detail-customer-address").val(data[0]['customer_address']);
        $("#detail-customer-bday").val(data[0]['customer_birthday']);
        $('#detail-customer-bmonth').val(data[0]['customer_birthmonth']);
        if (d1 !== "") {
            $('#detail-customer-wedding').val(d1);
        }
        $('#detail-customer-phone1').val(data[0]['customer_phone1']);
        $('#detail-customer-phone2').val(data[0]['customer_phone2']);
        $('#detail-customer-allergies').val(data[0]['customer_allergies']);
        $('#detail-customer-alert').val(data[0]['customer_alert']);
        $('#detail-customer-profession').val(data[0]['profession']);

    }
    
    function addeditcustomer() {
        
        //if ($("#btnupdate").text() === "Add New") {

            var customer_name = $("#txt-customer-name").val().trim();
            customer_name = customer_name.split(" ");

            if (customer_name.length > 1) {

                if ($("#txt-customer-name").val() === "" || $("#txt-customer-cell").val() === "") {
                    swal({
                        title: "Add Name and Cell Phone",
                        text: "You forgot to enter the NAME, CELL PHONE of the new customer. Let's start with putting in this mandatory information first.",
                        type: "warning",
                        confirmButtonText: 'OK!'
                    });
                } else {
                    //put values in the add form
                    
                    addnewcustomer();
                }

            } else {

                swal({
                    title: "Please enter your first and last name",
                    text: "",
                    type: "info",
                    confirmButtonText: 'OK!'
                });

            }
        //} else if ($("#btnupdate").text() === "Update") {
            
        //}
    }
    
      
    function hidemultisearch() {
        $("#multiplesearch").slideUp();
    }

    function showcustomerdetails() {
        back("#divmain", "#con-close-modal");
    }
    
    
    
    
    function fillBday() {
        for (x = 1; x <= 31; x++) {
            $("#txt-customer-bday").append('<option value=' + x + '>' + x + '</option>');
            $("#detail-customer-bday").append('<option value=' + x + '>' + x + '</option>');

        }
    }

    
   
    

    function addnewcustomer() {
        var customer_name = $("#txt-customer-name").val();
        var customer_cell = $("#txt-customer-cell").val();
        var customer_careof = $("#txt-customer-co").text();
        var flag = false;
        
         if(customer_cell.length < 10){
             swal({
                        title: "Cell Length",
                        text: 'use 11 digits for cell number',
                        type: "error",
                        confirmButtonText: 'OK!'
                    });
                    return false;
        }
        
        $.ajax({
            type: 'POST',
            url: '<?php echo base_url(); ?>customer_controller/CheckCustomer_Exist',
            data: {customer_name: customer_name, customer_cell: customer_cell},
            async: false,
            success: function(data){
                var exist = data;
                var name = "name "+customer_name.toLowerCase();
                var cell = "cell "+customer_cell;
                if(exist === name){ 
                    swal({
                        title: "Alert",
                        text: "Customer name & Cell number already exists! Add another?",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonClass: "btn-danger",
                        confirmButtonText: "Yes",
                        cancelButtonText: "No",
                        closeOnConfirm: true,
                        closeOnCancel: true
                    },
                    function(isConfirm){
                        if (isConfirm) {
                          sumbit_customer();
                        } else {
                           flag = true;
                        }
                    });
                    
                }else if(exist === cell &&  $("#txt-customer-co").val()==''){ 
                    swal({
                        title: "Alert",
                        text: "Cell number already exists! Use the 'care of' option?",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonClass: "btn-danger",
                        confirmButtonText: "Yes",
                        cancelButtonText: "No",
                        //closeOnConfirm: true,
                        closeOnCancel: true
                    },
                    function(isConfirm){
                        
                        if (isConfirm) {
                          //sumbit_customer();
                          // $("#name-search").val('');
                          
                         // $("#cell-search").val($("#txt-customer-cell").val());
                         // general_search("#btncell-search");
                        } else {
                           flag = true;
                        }
                    });
                   
                } else{
                    sumbit_customer();
                }
               
            }
        });

    }
    function sumbit_customer(){
            $.ajax({
            type: 'POST',
            //url: 'customer_controller/addnew',
            url: "<?php echo base_url() . 'customer_controller/addnew'; ?>",
            data: $("#customerform").serialize(),
            success: function(data) {
                var result = data.split("|");
                if (result[0] === "success") {
                    $("#txt-customer-co").val('');
                    getbyid(result[1]);
                    // Display a success toast, with a title
                    
                    toastr.success('New Customer Created!', 'Cool!');
                } else {

                    swal({
                        title: "Error",
                        text: result[1],
                        type: "error",
                        confirmButtonText: 'OK!'
                    });
                }
            }
        });
    }
    
    
    function open_new_customer(){
            console.log('opening');
            
            
            $('#txt-customer-name').prop('readonly', false);
            $('#txt-customer-email').prop('readonly', false);
            $('#txt-customer-cell').prop('readonly', false);
            $('#txt-customer-address').prop('readonly', false);
            $('#txt-customer-bday').prop('disabled', false);
            $('#txt-customer-bmonth').prop('disabled', false);
            $('#txt-customer-profession').prop('readonly', false);
            $('#txt-customer-gender').prop('disabled', false);
            $('#txt-customer-name').val(ucwords($('#name-search').val()));
            $('#txt-customer-cell').val($('#cell-search').val());
            $('.visit-message').hide();
            
            console.log($('#txt-customer-name').val());
            console.log($('#txt-customer-cell').val());
           back("#divsearch", "#divmain");
        }
    
    
    function create_visit(){
        
       // $("#btncreatevisits").attr('disabled','disabled');
        
        var customer_id = $("#customerid").val();
        var customer_name = $("#customername").val();
        var visit_color='#FDEDEC';
        var visit_status="open";
        var visit_color_type="Light";
        var ed = new Date();
        
        var tempmonth = ed.getMonth() < 9 ? '0' : ''; tempmonth+= parseFloat(ed.getMonth())+1;
        var tempday = ed.getDate() < 10 ? '0' : ''; tempday  += ed.getDate();
        var temphours = ed.getHours() < 10 ? '0' : ''; temphours  += ed.getHours();
        var tempminutes = ed.getMinutes() < 10 ? '0' : ''; tempminutes  += ed.getMinutes();
        var tempseconds = ed.getSeconds() < 10 ? '0' : ''; tempseconds  += ed.getSeconds();
        var start = ed.getFullYear() + '-'+tempmonth+'-'+tempday+' '+temphours+':'+tempminutes+':'+tempseconds;
        
        var ListData;
        ListData = storeOListValues();
        if(Object.keys(ListData).length === 0){
            clearall();
            $("#customerid").val('');
            $("#customername").val('');
            $("#page-title").html('');
            $("#selection_list").html('');
            $("#grandtotal").html('');
            closeCategory();
            back('#service_select_div','#divselection');
            back('#divmain', '#divsearch');
        }else{
            ListData = $.toJSON(ListData);
            $.ajax({
                type: 'POST',
                url: "<?php echo base_url() . 'selfservice_controller/create_booking'; ?>",
                data: {
                    ListData:ListData,                     
                    customer_id:customer_id,
                    customer_name:customer_name,
                    start: start
                    },
                success: function(response) {
                    res=response.split("|");
                    //console.log(res[0]);
                    if(res[0]=="success"){
                        swal({
                            title: "Thank You!",
                            text: res[1],
                            type: "info",
                            confirmButtonText: 'OK!'
                        });
                        clearall();
                        $("#customerid").val('');
                        $("#customername").val('');
                        $("#page-title").html('');
                        $("#selection_list").html('');
                        $("#grandtotal").html('');
                        closeCategory();
                        back('#service_select_div','#divselection');
                        back('#divmain', '#divsearch');
                    } else {
                        swal({
                            title: "Error!",
                            text: res[1],
                            type: "error",
                            confirmButtonText: 'OK!'
                        });
                    }
                }
            });
        }
    }
    
    function storeOListValues()
    {
        var ListData = new Array();

        $('#selection_list .inbox-item').each(function(row, p) {
            ListData[row] = {
                "services": $(this).attr("service_name")
                , "service_id": $(this).attr("serviceid")
                , "service_flag" :$(this).attr("service_flag")
            };
        });
        //ListData.shift();  // first row will be empty - so remove only for tr tables
        return ListData;
    }
    </script>