<!DOCTYPE html>
<html>

<head>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<?php   include('include/common.php');?>  

        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.css"/>
<!-- <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.js"></script> -->
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.4/css/responsive.dataTables.min.css"/>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.js"></script>

<!-- https://code.jquery.com/jquery-3.5.1.js
https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js -->
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.4/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.colVis.min.js"></script>


<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>



<!-- for date picker -->
<!--  <script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>
    <link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" /> -->
<!--     <script src="https://cdn.jsdelivr.net/npm/@dashboardcode/bsmultiselect@0.5.58/dist/js/BsMultiSelect.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@dashboardcode/bsmultiselect@0.5.58/dist/js/BsMultiSelect.esm.min.js"></script> -->
<!--  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@dashboardcode/bsmultiselect@0.5.58/dist/css/BsMultiSelect.min.css"> -->

<!-- <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script> -->

<link href="https://cdn.jsdelivr.net/npm/wickedpicker@0.4.3/dist/wickedpicker.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/wickedpicker@0.4.3/dist/wickedpicker.min.js"></script>
<!-- end for date picker -->



                <script language="JavaScript">
             

                function checkall(source) {
                   
                checkboxes = document.getElementsByName('admincheck');
                    for(var i=0, n=checkboxes.length;i<n;i++) {
                        checkboxes[i].checked = source.checked;
                    }
                }

                function checkToggle(source){
                    if(source.checked==true){
                    // alert("clicked123");
                    // alert("add");
                        action="add";
                        // check status to 1
                    }
                    else{
                      // alert("remove");  
                    // alert(source.data('clickid'));
                      action="remove";
                      // check status to 0
                    }
                    // alert( $(source).attr('data-clickid'));
                    // alert( $(source).val());
                    var personid=$(source).attr('data-clickid');
                    var postData ={
                    'action':action,
                    'personid':personid
                    // 'currentlevel':currentlevel,
                    // 'level1id':split1[1],
                    // 'level2id':split1[2],
                    // 'level3id':split1[3],
                    // 'level4id':split1[4]
                    }
                     var GlobalVariables ={
                      'csrfToken': '123',
                      'baseUrl':'<?php echo base_url();?>',
                      'destUrl':'<?php echo base_url();?>/api/v1/customerend/status',
                      'AJAX_SUCCESS' :'SUCCESS',
                      'AJAX_FAILURE' :'FAILURE'
                     };
                     var postUrl= GlobalVariables.baseUrl +'/api/v1/customerend/status';

                     $.ajax({
                      method: "POST",
                      url: postUrl,
                      dataType: "json",
                     data: postData,
                     success : function(data){

                    // alert("posted");
                    // alert('formsubmit');
                    // alert(data);
                    
                    // alert(data['recordstatus']);
                    // alert(data['msg']);
                    if(data['recordstatus']=="SUCCESS"){
                        $('#feedback').remove();
                        $( '#editmsg' ).append('<p class="text-primary" id="feedback">'+data['msg']+'</p>');
                        // setTimeout(function() {
                        //     location.reload();
                        // }, 3000);
                        // location.reload();

                    }
                      if(data['recordstatus']=="FAILURE"){
                        $('#feedback').remove();
                        $( '#editmsg' ).append('<p class="text-danger"  id="feedback">'+data['msg']+'</p>');
                    //   $( '#modal-bodymsg' ).empty();
                    //   $( '#modal-bodymsg' ).append( '<h5 class="text-center" style="color: #a03d49;">客戶不能增加。</h5> <h5 class="text-center" style="color: #a03d49;">請稍後再嘗試。</h5>' );
                    //   $('#finishModal').modal('show');
                    // }
                      // if (data.AJAX_SUCCESS==GlobalVariables.AJAX_SUCCESS){
                      //     window.location.href=GlobalVariables.destUrl;
                      // } else {
                      //     $('.alert').text("登入錯誤");
                      //    $('.alert').removeClass('hidden');
                      }
                  }
                }); 
                   //end ajax module
                }

                 //show showbrbooking modal
                function showbrbookingdetail($bookingid) {
                        // checkboxes = document.getElementsByName('admincheck');
                        // var favorite = [];
                        // $count=0;
                        // $.each($("input[name='admincheck']:checked"), function(){
                        //     favorite.push($(this).val());
                        //     $count=$count+1;
                        // });
                        // alert(1);
                        // alert("My favourite sports are: " + favorite.join(", "));
                        // document.getElementById("deletenum").innerHTML = $count;

                        //get booking detail

                        //clear input box value

                        //end clear input box value

                        $("#bookingid").val($bookingid);
                        var postData ={
                            'id':$bookingid,
                  
                        }
                     var GlobalVariables ={
                      'csrfToken': '123',
                      'baseUrl':'<?php echo base_url();?>',
                      'destUrl':'<?php echo base_url();?>/api/v1/brbookingend/detail',
                      'AJAX_SUCCESS' :'SUCCESS',
                      'AJAX_FAILURE' :'FAILURE'
                     };
                     var postUrl= GlobalVariables.baseUrl +'/api/v1/brbookingend/detail';

                        //booking detail ajax
                        $.ajax({
                      method: "POST",
                      url: postUrl,
                      dataType: "json",
                     data: postData,
                     success : function(data){

                    // alert("posted");
                    // alert('formsubmit');
                    // alert(data);
                    
                    // alert(data['recordstatus']);
                    // alert(data['msg']);



                    $('#startdate').val(data['startdate']);
                    $('#starttime').val(data['starttime']);
                    $('#endtime').val(data['endtime']);

                    $("#room_id").val(data['room_id']);
                    $("#pic_1").val(data['pic_1']);
                    $("#pic_2").val(data['pic_2']);
                    if(data['pic_marked']==1){
                      $("#pic_marked").attr("checked",true);
                    }
                    else{
                      $("#pic_marked").attr("checked",false);
                    }
                    $("#display_name").val(data['display_name']+"("+data['mobile']+")");
                    $("#remark").val(data['remark']);

                    $("#user_id").val(data['user_id']);
                    if(data['isConfirm']==1){
                      $("#isConfirm").attr("checked",true);
                    }
                    else{
                      $("#isConfirm").attr("checked",false);
                    }
                    
                    //add use service list
                    user_idajax(data['user_id'],$bookingid);
          
                    //end add use service list


                    //add use product list
                    service_ajax($bookingid);
                    //end add use product list

                    

                    
                    if(data['recordstatus']=="SUCCESS"){
                        // $('#feedback').remove();
                        // $( '#editmsg' ).append('<p class="text-primary" id="feedback">'+data['msg']+'</p>');
                        // setTimeout(function() {
                        //     location.reload();
                        // }, 3000);
                        // location.reload();
                        
                    }
                      if(data['recordstatus']=="FAILURE"){
                        // $('#feedback').remove();
                        // $( '#editmsg' ).append('<p class="text-danger"  id="feedback">'+data['msg']+'</p>');
                    //   $( '#modal-bodymsg' ).empty();
                    //   $( '#modal-bodymsg' ).append( '<h5 class="text-center" style="color: #a03d49;">客戶不能增加。</h5> <h5 class="text-center" style="color: #a03d49;">請稍後再嘗試。</h5>' );
                    //   $('#finishModal').modal('show');
                    // }
                      // if (data.AJAX_SUCCESS==GlobalVariables.AJAX_SUCCESS){
                      //     window.location.href=GlobalVariables.destUrl;
                      // } else {
                      //     $('.alert').text("登入錯誤");
                      //    $('.alert').removeClass('hidden');
                      }
                  }
                }); 

                        //end　booking detail ajax



                

                        //end get booking detail



                        $('#bookingModalCenter').modal({
                                            show: true,
                                        }); 
                }//function showdeletemodal() {


                 //booking arrive

                function brbookingarrive($bookingid) {
                      // alert("1123");
                       // $("#bookingid").val($bookingid);
                        var postData ={
                            'id':$bookingid,
                  
                        }
                     var GlobalVariables ={
                      'csrfToken': '123',
                      'baseUrl':'<?php echo base_url();?>',
                      'destUrl':'<?php echo base_url();?>/api/v1/brbookingend/arrive',
                      'AJAX_SUCCESS' :'SUCCESS',
                      'AJAX_FAILURE' :'FAILURE'
                     };
                     var postUrl= GlobalVariables.baseUrl +'/api/v1/brbookingend/arrive';

                        //booking detail ajax
                        $.ajax({
                      method: "POST",
                      url: postUrl,
                      dataType: "json",
                     data: postData,
                     success : function(data){

                    // alert("posted");
                    // alert('formsubmit');
                    // alert(data);
                    
                    // alert(data['recordstatus']);
                    // alert(data['msg']);



                    

                    if(data['recordstatus']=="SUCCESS"){
                       $('#feedback').remove();
                        $( '#editmsg' ).append('<p class="text-primary" id="feedback">'+data['msg']+'</p>');
                        // $('#feedback').remove();
                        // $( '#editmsg' ).append('<p class="text-primary" id="feedback">'+data['msg']+'</p>');
                        setTimeout(function() {
                            location.reload();
                        }, 3000);
                        // location.reload();
                        
                    }
                      if(data['recordstatus']=="FAILURE"){
                        $('#feedback').remove();
                        $( '#editmsg' ).append('<p class="text-danger"  id="feedback">'+data['msg']+'</p>');
                        // $('#feedback').remove();
                        // $( '#editmsg' ).append('<p class="text-danger"  id="feedback">'+data['msg']+'</p>');
                    //   $( '#modal-bodymsg' ).empty();
                    //   $( '#modal-bodymsg' ).append( '<h5 class="text-center" style="color: #a03d49;">客戶不能增加。</h5> <h5 class="text-center" style="color: #a03d49;">請稍後再嘗試。</h5>' );
                    //   $('#finishModal').modal('show');
                    // }
                      // if (data.AJAX_SUCCESS==GlobalVariables.AJAX_SUCCESS){
                      //     window.location.href=GlobalVariables.destUrl;
                      // } else {
                      //     $('.alert').text("登入錯誤");
                      //    $('.alert').removeClass('hidden');
                      }
                  }
                  }); 
                }//function brbookingarrive($bookingid) {
                //end booking arrive


                //checkout function
                function brbookingcheckout($bookingid){
                  $("#checkoutBookingId").val($bookingid);

                    //insert booking item info
                    var GlobalVariables ={
                          'csrfToken': '123',
                          'baseUrl':'<?php echo base_url();?>',
                          'destUrl':'<?php echo base_url();?>/api/v1/brcustomerserviceend/getServiceItemByBooking',
                          'AJAX_SUCCESS' :'SUCCESS',
                          'AJAX_FAILURE' :'FAILURE'
                    };

                      //empty lower select box

                       var prepaidservicessub = document.getElementById('prepaid-services-sub');
                          // alert(city);
                           $(prepaidservicessub).empty();     
           

                      //end empty lower select box

                      var postUrl= GlobalVariables.baseUrl +'/api/v1/brcustomerserviceend/getServiceItemByBooking';  
                      //change select box option  
                         $.ajax({
                                type:'POST',
                                url:postUrl,
                                data:{'booking_id':$bookingid},
                            success:function(data){
                              // alert('empty');
                              // var obj = $.parseJSON(data);
                              var obj =data;
                              // alert('empty2');
                            // var v = data.k; 

                           // the next thing you want to do 
                           // alert(fileid+'-'+items+'Level2');
                           // id='row' + id.toString();
                          // var findname=fileid.toString()+'-'+items.toString()+'-Level2';
                          // var city = document.getElementById(fileid+'-'.items+'Level2');
                          // var city = document.getElementById('5-1-Level2');
                          // var level2box = document.getElementById('level2');
                          // alert(city);
                           // $(level2box).empty();
                          //  $jsondata=json_decode($data);
                          // alert( obj.length);
                          // alert( obj[0]['name']);

                           //added empty select record
                          // $prepaidservicessub.append('<p>'+ obj[i].service_id+'</p>');

                          // $(level2box).append('<option  value=' + '>--- 請選擇居住範圍---'  + '</option>');
                          
                          //end added empty select record    
                          // '<table id="prepaid-services-table" class="display table table1 dataTable no-footer"><thead><tr><th></th><th>服務編號</th><th>服務種類</th><th>服務項目</th><th>工數</th><th>售價</th><th>購買次數</th><th>剩除次數</th><th>沒有積分回贈</th></tr></thead><tbody><tr data-id="7" data-available_qty="10"><td><input class="checkbox-check" type="checkbox" style="position: relative;left: 20px;top: 8px;opacity: 1;"></td><td>T-001</td><td>T - 療程</td><td>皮秒二代(全臉)</td><td>1</td><td>$1,980.00</td><td>10</td><td>10</td><td></td></tr></tbody></table>'
                          if(obj.length==0){
                            var html="沒有任何記錄";
                            $(prepaidservicessub).append(html);
                          }
                          if(obj.length!=0){
                            var html='';
                            html +='<table id="prepaid-services-table" class="display table table1 dataTable no-footer"><thead><tr><th></th><th>服務編號</th><th>服務種類</th><th>服務項目</th><th>工數</th><th>售價</th><th>時間</th><th>購買次數</th><th>剩除次數</th><th>沒有積分回贈</th></tr></thead><tbody>';
                            for (var i = 0; i < obj.length; i++) {
                              // alert(i);
                              // $(prepaidservicessub).append('<p style="color:blue;">'+ obj[i].service_id+'</p>');
                              html+='<tr data-id="'+ obj[i].id+'" ';
                              html+='data-available_qty="'+ obj[i].available_qty+'">';
                              // $(prepaidservicessub).append('<td>');
                              html+='<td>';
                              html+='<input class="selectproduct3" type="checkbox" name="useservice" id="useservice"  value="'+obj[i].id+'" data-price="'+parseInt(obj[i].time)+'" '; 
                              if(obj[i].checkedoption==1){
                                html+=' checked ';
                              }

                              html+='>';
                              // html+='<input class="selectproduct3" type="checkbox" name="useservice" id="useservice" value="'+obj[i].id+'" data-price="'+parseInt(obj[i].time)+'" onclick="add()" >';
                              html+='</td>';
                              html+='<td>';
                              html+=obj[i].code;
                              html+='</td>';

                              if(obj[i].category_id==1){
                                html+='<td>';
                                html+='FT-試做療程';
                                html+='</td>';
                              }
                               if(obj[i].category_id==2){
                                html+='<td>';
                                html+='T-療程';
                                html+='</td>';
                              }
                              html+='<td>';
                              html+=obj[i].name;
                              html+='</td>';
                              html+='<td>';
                              html+=obj[i].work;
                              html+='</td>';
                              html+='<td>';
                              html+=obj[i].price;
                              html+='</td>';
                              html+='<td>';
                              html+=parseInt(obj[i].time);
                              html+=' 分鐘';
                              html+='</td>';
                              html+='<td>';
                              html+=obj[i].purchased_qty;
                              html+='</td>';
                              html+='<td>';
                              html+=obj[i].available_qty;
                              html+='</td>';
                              html+='<td>';
                              if(obj[i].no_credit_rebate==1){
                                
                                html+='<i class="fas fa-check-circle"></i>';
                                
                              }
                              html+='</td>';
                              html+='</tr>';
                            // $(level2box).append('<option  value=' + obj[i].id + '>' + obj[i].chi_name + '</option>');
                            }

                            html+='</tbody></table>';

                            $(prepaidservicessub).append(html);
                            // alert(data);
                            // level3boxajax(fileid+'-'+items+'-Level3', obj[0].id);   
                            // alert('level3'+data);

                          }//if(obj.length!=0){


                      }
                    });
                    //end insert booking item info
                    $('#checkoutModalCenter').modal({
                                            show: true,
                                        }); 
                }//function brbookingcheckout(){

                //end checkout function 


                function user_idajax($id,$bookingid){
              var id = $id;
              // alert(id);
              var res = id.split("-");
              var fileid=res[0];
              var items=res[1];
              // alert("fileid"+fileid);
              // alert("items"+items);
              // var selectedid= $({"#".id}).val();
              // var selectedid=$value;
              // alert(selectedid);
              var GlobalVariables ={
                  'csrfToken': '123',
                  'baseUrl':'<?php echo base_url();?>',
                  'destUrl':'<?php echo base_url();?>/api/v1/brcustomerserviceend/getServiceByBooking',
                  'AJAX_SUCCESS' :'SUCCESS',
                  'AJAX_FAILURE' :'FAILURE'
            };

              //empty lower select box

               var prepaidservicessub = document.getElementById('prepaid-services-sub');
                  // alert(city);
                   $(prepaidservicessub).empty();     
   

              //end empty lower select box

              var postUrl= GlobalVariables.baseUrl +'/api/v1/brcustomerserviceend/getServiceByBooking';  
              //change select box option  
                 $.ajax({
                        type:'POST',
                        url:postUrl,
                        data:{'cust_id':id,'booking_id':$bookingid},
                    success:function(data){
                      // alert('empty');
                      // var obj = $.parseJSON(data);
                      var obj =data;
                      // alert('empty2');
                    // var v = data.k; 

                   // the next thing you want to do 
                   // alert(fileid+'-'+items+'Level2');
                   // id='row' + id.toString();
                  // var findname=fileid.toString()+'-'+items.toString()+'-Level2';
                  // var city = document.getElementById(fileid+'-'.items+'Level2');
                  // var city = document.getElementById('5-1-Level2');
                  // var level2box = document.getElementById('level2');
                  // alert(city);
                   // $(level2box).empty();
                  //  $jsondata=json_decode($data);
                  // alert( obj.length);
                  // alert( obj[0]['name']);

                   //added empty select record
                  // $prepaidservicessub.append('<p>'+ obj[i].service_id+'</p>');

                  // $(level2box).append('<option  value=' + '>--- 請選擇居住範圍---'  + '</option>');
                  
                  //end added empty select record    
                  // '<table id="prepaid-services-table" class="display table table1 dataTable no-footer"><thead><tr><th></th><th>服務編號</th><th>服務種類</th><th>服務項目</th><th>工數</th><th>售價</th><th>購買次數</th><th>剩除次數</th><th>沒有積分回贈</th></tr></thead><tbody><tr data-id="7" data-available_qty="10"><td><input class="checkbox-check" type="checkbox" style="position: relative;left: 20px;top: 8px;opacity: 1;"></td><td>T-001</td><td>T - 療程</td><td>皮秒二代(全臉)</td><td>1</td><td>$1,980.00</td><td>10</td><td>10</td><td></td></tr></tbody></table>'
                  if(obj.length==0){
                    var html="沒有任何記錄";
                    $(prepaidservicessub).append(html);
                  }
                  if(obj.length!=0){
                    var html='';
                    html +='<table id="prepaid-services-table" class="display table table1 dataTable no-footer"><thead><tr><th></th><th>服務編號</th><th>服務種類</th><th>服務項目</th><th>工數</th><th>售價</th><th>時間</th><th>購買次數</th><th>剩除次數</th><th>沒有積分回贈</th></tr></thead><tbody>';
                    for (var i = 0; i < obj.length; i++) {
                      // alert(i);
                      // $(prepaidservicessub).append('<p style="color:blue;">'+ obj[i].service_id+'</p>');
                      html+='<tr data-id="'+ obj[i].id+'" ';
                      html+='data-available_qty="'+ obj[i].available_qty+'">';
                      // $(prepaidservicessub).append('<td>');
                      html+='<td>';
                      html+='<input class="selectproduct3" type="checkbox" name="useservice" id="useservice"  value="'+obj[i].id+'" data-price="'+parseInt(obj[i].time)+'" '; 
                      if(obj[i].checkedoption==1){
                        html+=' checked ';
                      }

                      html+='>';
                      // html+='<input class="selectproduct3" type="checkbox" name="useservice" id="useservice" value="'+obj[i].id+'" data-price="'+parseInt(obj[i].time)+'" onclick="add()" >';
                      html+='</td>';
                      html+='<td>';
                      html+=obj[i].code;
                      html+='</td>';

                      if(obj[i].category_id==1){
                        html+='<td>';
                        html+='FT-試做療程';
                        html+='</td>';
                      }
                       if(obj[i].category_id==2){
                        html+='<td>';
                        html+='T-療程';
                        html+='</td>';
                      }
                      html+='<td>';
                      html+=obj[i].name;
                      html+='</td>';
                      html+='<td>';
                      html+=obj[i].work;
                      html+='</td>';
                      html+='<td>';
                      html+=obj[i].price;
                      html+='</td>';
                      html+='<td>';
                      html+=parseInt(obj[i].time);
                      html+=' 分鐘';
                      html+='</td>';
                      html+='<td>';
                      html+=obj[i].purchased_qty;
                      html+='</td>';
                      html+='<td>';
                      html+=obj[i].available_qty;
                      html+='</td>';
                      html+='<td>';
                      if(obj[i].no_credit_rebate==1){
                        
                        html+='<i class="fas fa-check-circle"></i>';
                        
                      }
                      html+='</td>';
                      html+='</tr>';
                    // $(level2box).append('<option  value=' + obj[i].id + '>' + obj[i].chi_name + '</option>');
                    }

                    html+='</tbody></table>';

                    $(prepaidservicessub).append(html);
                    // alert(data);
                    // level3boxajax(fileid+'-'+items+'-Level3', obj[0].id);   
                    // alert('level3'+data);

                  }//if(obj.length!=0){


              }
            });

          }
        //end user_idajax

        //service_ajax
         function service_ajax($bookingid){
              // var id = $id;
              // alert('service');
              // var res = id.split("-");
              // var fileid=res[0];
              // var items=res[1];
              // alert("fileid"+fileid);
              // alert("items"+items);
              // var selectedid= $({"#".id}).val();
              // var selectedid=$value;
              // alert(selectedid);
              var GlobalVariables ={
                  'csrfToken': '123',
                  'baseUrl':'<?php echo base_url();?>',
                  'destUrl':'<?php echo base_url();?>/api/v1/brservicesend/getAllServicesByBooking',
                  'AJAX_SUCCESS' :'SUCCESS',
                  'AJAX_FAILURE' :'FAILURE'
            };

              //empty lower select box

               var newservicessub = document.getElementById('new-services-sub');
                  // alert(city);
                   $(newservicessub).empty();     
   

              //end empty lower select box

              var postUrl= GlobalVariables.baseUrl +'/api/v1/brservicesend/getAllServicesByBooking';  
              //change select box option  
                 $.ajax({
                        type:'POST',
                        url:postUrl,
                        data:{'booking_id':$bookingid},
                    success:function(data){
                      // alert('empty');
                      // var obj = $.parseJSON(data);
                      var obj =data;
                      // alert('empty2');
                    // var v = data.k; 

                   // the next thing you want to do 
                   // alert(fileid+'-'+items+'Level2');
                   // id='row' + id.toString();
                  // var findname=fileid.toString()+'-'+items.toString()+'-Level2';
                  // var city = document.getElementById(fileid+'-'.items+'Level2');
                  // var city = document.getElementById('5-1-Level2');
                  // var level2box = document.getElementById('level2');
                  // alert(city);
                   // $(level2box).empty();
                  //  $jsondata=json_decode($data);
                  // alert( obj.length);
                  // alert( obj[0]['name']);

                   //added empty select record
                  // $prepaidservicessub.append('<p>'+ obj[i].service_id+'</p>');

                  // $(level2box).append('<option  value=' + '>--- 請選擇居住範圍---'  + '</option>');
                  
                  //end added empty select record    
                  // '<table id="prepaid-services-table" class="display table table1 dataTable no-footer"><thead><tr><th></th><th>服務編號</th><th>服務種類</th><th>服務項目</th><th>工數</th><th>售價</th><th>購買次數</th><th>剩除次數</th><th>沒有積分回贈</th></tr></thead><tbody><tr data-id="7" data-available_qty="10"><td><input class="checkbox-check" type="checkbox" style="position: relative;left: 20px;top: 8px;opacity: 1;"></td><td>T-001</td><td>T - 療程</td><td>皮秒二代(全臉)</td><td>1</td><td>$1,980.00</td><td>10</td><td>10</td><td></td></tr></tbody></table>'
                  if(obj.length==0){
                    var html="沒有任何記錄";
                    $(newservicessub).append(html);
                  }
                  if(obj.length!=0){
                    var html='';
                    html +='<table id="prepaid-services-table" class="display table table1 dataTable no-footer"><thead><tr><th></th><th>服務編號</th><th>服務種類</th><th>服務項目</th><th>工數</th><th>售價</th><th>時間</th><th>沒有積分回贈</th></tr></thead><tbody>';
                    for (var i = 0; i < obj.length; i++) {
                      // alert(i);
                      // $(newservicessub).append('<p style="color:blue;">'+ obj[i].service_id+'</p>');
                      html+='<tr data-id="'+ obj[i].id+'" ';
                      html+='data-available_qty="'+ obj[i].available_qty+'">';
                      // $(newservicessub).append('<td>');
                      html+='<td>';
                      // html+='<input class="selectproduct3"  type="checkbox" name="useproduct" id="useproduct" value="'+obj[i].id+'" data-price="'+parseInt(obj[i].time)+'"  onclick="add()" >';
                      html+='<input class="selectproduct3"  type="checkbox" name="useproduct" id="useproduct" value="'+obj[i].id+'" data-price="'+parseInt(obj[i].time)+'" ';
                      if(obj[i].checkedoption==1){
                        html+=' checked ';
                      }
                      html+='>';

                      html+='</td>';
                      html+='<td>';
                      html+=obj[i].code;
                      html+='</td>';

                      if(obj[i].category_id==1){
                        html+='<td>';
                        html+='FT-試做療程';
                        html+='</td>';
                      }
                       if(obj[i].category_id==2){
                        html+='<td>';
                        html+='T-療程';
                        html+='</td>';
                      }
                      html+='<td>';
                      html+=obj[i].name;
                      html+='</td>';
                      html+='<td>';
                      html+=obj[i].work;
                      html+='</td>';
                      html+='<td>';
                      html+=obj[i].price;
                      html+='</td>';
                      // html+='<td>';
                      // html+=obj[i].purchased_qty;
                      // html+='</td>';
                      // html+='<td>';
                      // html+=obj[i].available_qty;
                      // html+='</td>';
                      html+='<td>';
                      html+=parseInt(obj[i].time);
                      html+=' 分鐘';
                      html+='</td>';
                      html+='<td>';
                      if(obj[i].no_credit_rebate==1){
                        
                        html+='<i class="fas fa-check-circle"></i>';
                        
                      }
                      html+='</td>';
                      html+='</tr>';
                    // $(level2box).append('<option  value=' + obj[i].id + '>' + obj[i].chi_name + '</option>');
                    }

                    html+='</tbody></table>';

                    $(newservicessub).append(html);
                    // alert(data);
                    // level3boxajax(fileid+'-'+items+'-Level3', obj[0].id);   
                    // alert('level3'+data);

                  }//if(obj.length!=0){


              }
            });

          }
        //end service_ajax


                //end show showbrbooking modal  
           
          
                //btnUpdate
          // $( document ).ready(function() {
                   // $("#btnChange").click(function(event) {
                   //  alert("btnChange");
                   // });  
              // });  // $( document ).ready(function() { 
              
      $( document ).ready(function() {  



        $("#btnDelete").click(function(event){
            // alert("close");
            
            $('#deleteModalCenter').modal({
                                            show: true,
                                        }); 
            $('#deleteModalCenter').css('z-index', 2000);
        });
        //delete submit button
        $("#btndeleteSubmit").click(function(event) {
            // alert("1");
          var forcusitem="";
          var passCheck=true;
            //check delete have value
            // var checkboxvalue = $('.checkbox').val();   


            var postData ={
                'bookingid':$('#bookingid').val(),
            }
            var GlobalVariables ={
                  'csrfToken': '123',
                  'baseUrl':'<?php echo base_url();?>',
                  'destUrl':'<?php echo base_url();?>/api/v1/brbookingend/delete',
                  'AJAX_SUCCESS' :'SUCCESS',
                  'AJAX_FAILURE' :'FAILURE'
            };

            event.preventDefault();
            var postUrl= GlobalVariables.baseUrl +'/api/v1/brbookingend/delete';
            //end　check delete have value
            // $('#loading').show();
            $.ajax({
                  method: "POST",
                  url: postUrl,
                  dataType: "json",
                 data: postData,
                 success : function(data){
                  // $('#loading').hide();
                // alert("posted");
                // alert('formsubmit');
                // alert(data);
                
                // alert(data['recordstatus']);
                // alert(data['msg']);
                if(data['recordstatus']=="SUCCESS"){

                    $('#feedback').remove();
                    $( '#deletemsg' ).append('<p class="text-primary" id="feedback">'+data['msg']+'</p>');
                    setTimeout(function() {
                        location.reload();
                    }, 3000);
                    // location.reload();

                }
                  if(data['recordstatus']=="FAILURE"){
                    $('#feedback').remove();
                    $( '#deletemsg' ).append('<p class="text-danger"  id="feedback">'+data['msg']+'</p>');
                //   $( '#modal-bodymsg' ).empty();
                //   $( '#modal-bodymsg' ).append( '<h5 class="text-center" style="color: #a03d49;">客戶不能增加。</h5> <h5 class="text-center" style="color: #a03d49;">請稍後再嘗試。</h5>' );
                //   $('#finishModal').modal('show');
                // }
                  // if (data.AJAX_SUCCESS==GlobalVariables.AJAX_SUCCESS){
                  //     window.location.href=GlobalVariables.destUrl;
                  // } else {
                  //     $('.alert').text("登入錯誤");
                  //    $('.alert').removeClass('hidden');
                  }
              }
            });  

        });  //$("#btndeleteSubmit").click(function(event) {      
        //end delete submit button  

        $("#btnClose").click(function(event){
            // alert("close");
            
            $('#bookingModalCenter').modal('hide');
        });

        $("#btnUpdate").click(function(event) {
          // alert("update");
          var forcusitem="";
          var passCheck=true;


          if($('#startdate').val().length !== 0){
            $("#startdate").addClass(" is-valid ");
            $("#startdate").removeClass(" is-invalid ");
          }
          else{
            if(forcusitem.length===0){
               forcusitem="#startdate";
            }
            passCheck=false;
            $("#startdate").addClass(" is-invalid ");
           $("#startdate").removeClass(" is-valid ");
          }

          if($('#starttime').val().length !== 0){
            $("#starttime").addClass(" is-valid ");
            $("#starttime").removeClass(" is-invalid ");
          }
          else{
            if(forcusitem.length===0){
               forcusitem="#starttime";
            }
            passCheck=false;
            $("#starttime").addClass(" is-invalid ");
           $("#starttime").removeClass(" is-valid ");
          }

          if($('#endtime').val().length !== 0){
            $("#endtime").addClass(" is-valid ");
            $("#endtime").removeClass(" is-invalid ");
          }
          else{
            if(forcusitem.length===0){
               forcusitem="#endtime";
            }
            passCheck=false;
            $("#endtime").addClass(" is-invalid ");
           $("#endtime").removeClass(" is-valid ");
          }



          if($('#room_id').val().length !== 0){
            $("#room_id").addClass(" is-valid ");
            $("#room_id").removeClass(" is-invalid ");
          }
          else{
            if(forcusitem.length===0){
               forcusitem="#room_id";
            }
            passCheck=false;
            $("#room_id").addClass(" is-invalid ");
           $("#room_id").removeClass(" is-valid ");
          }

          if($('#pic_1').val().length !== 0){
            $("#pic_1").addClass(" is-valid ");
            $("#pic_1").removeClass(" is-invalid ");
          }
          else{
            if(forcusitem.length===0){
               forcusitem="#pic_1";
            }
            passCheck=false;
            $("#pic_1").addClass(" is-invalid ");
           $("#pic_1").removeClass(" is-valid ");
          }
          
      
          if(passCheck===false){
           
             $(forcusitem).focus();
          }


        //   alert("1");
          if(passCheck==true){

          
          var GlobalVariables ={
                  'csrfToken': '123',
                  'baseUrl':'<?php echo base_url();?>',
                  // 'destUrl':'<?php echo base_url();?>/api/v1/frontend/add',
                  'AJAX_SUCCESS' :'SUCCESS',
                  'AJAX_FAILURE' :'FAILURE'
            };

            event.preventDefault();
            var postUrl= GlobalVariables.baseUrl +'api/v1/brbookingend/update';
            // var postData ={
            //       'csrfToken' :'',
            //       'custname' : $('#name').val(),
            //       'tel' : $('#tel').val(),
            //       'email' : $('#email').val(),
            //       'wechat' : $('#wechat').val(),
            //       'birthday' : $('#birthday').val(),
            //       // 'selectedBox' :$('.css-checkbox:checked').val()
            //       'selectedBox' :selectBox1

            // }

            //get use service id
            var useserviceboxvalue =  []; 
            $("input:checkbox[id=useservice]:checked").each(function(){
              // alert($(this).val());
               useserviceboxvalue.push( $(this).val() );

            });

            //end get use service id


            //get use product id
            // var checkboxproductvalue =  []; 
            // $("#useproduct").each(function()
            // {
            //   alert($(this).val());
            //     if($(this).is(':checked'))
            //     {
            //       alert($(this).val());
            //        checkboxproductvalue.push( $(this).val() );
            //         // Do stuff with checked box
            //     }
            //     else
            //     {
            //         // Checkbox isn't checked
            //     }
            // })
            var useproductboxvalue =  []; 
            $("input:checkbox[id=useproduct]:checked").each(function(){
              // alert($(this).val());
               useproductboxvalue.push( $(this).val() );

            });
            //end get use service id
            let inputIsConfirm=0;
            if($("input:checkbox[id=isConfirm]").is(':checked')) {
               inputIsConfirm=1;
            }

            let inputpicmarked=0;
            if($("input:checkbox[id=pic_marked]").is(':checked')) {
               inputpicmarked=1;
            }



            var postData ={
                'startdate':$('#startdate').val(),
                'starttime':$('#starttime').val(),
                'endtime':$('#endtime').val(),
                // 'inputadminname':$('#inputadminname').val(),
                'room_id':$('#room_id').val(),
                // 'pic_marked':$('#pic_marked').val(),
                'pic_marked':inputpicmarked,
                'pic_1':$('#pic_1').val(),
                'pic_2':$('#pic_2').val(),
                'remark':$('#remark').val(),
                'useserviceboxvalue':useserviceboxvalue,
                'useproductboxvalue':useproductboxvalue,
                'shopId':<?php echo $this->session->userdata('currentshop');?>,
                'bookingid':$('#bookingid').val(),
                'user_id':$('#user_id').val(),
                'isConfirm':inputIsConfirm,
                // 'zone':$('#level3').val(),
                // 'address':$('#address').val(),
                // 'join_date':$('#datepicker2').val(),
                // 'shop_id':$('#first_registered_tenant_no').val(),
                // 'skin_improve':$('#skin_improve').val(),
                // 'referred_mobile':$('#referred_mobile').val(),
                // 'remark':$('#remark').val(),
                // 'need_purchase_service':$('#need_purchase_service').val(),
                // 'service_id':$('#service_id').val(),
                // 'purchased_date':$('#purchased_date').val(),
                // 'purchased_qty':$('#purchased_qty').val(),
                // 'available_qty':$('#available_qty').val(),
                // 'remark2':$('#remark2').val(),
                //may be added array of selected service

            }

            // alert($('#startdate').val());
            $.ajax({
                  method: "POST",
                  url: postUrl,
                  dataType: "json",
                 data: postData,
                 success : function(data){

                // alert("posted");
                // // alert('formsubmit');
                // alert(data);
                
                // alert(data['recordstatus']);
                // alert(data['msg']);
                if(data['recordstatus']=="SUCCESS"){
                    $('#feedback').remove();
                    $( '#newmsg' ).append('<p class="text-primary" id="feedback">'+data['msg']+'</p>');
                    setTimeout(function() {
                        location.reload();
                    }, 3000);
                    // location.reload();

                }
                  if(data['recordstatus']=="FAILURE"){
                    $('#feedback').remove();
                    $( '#newmsg' ).append('<p class="text-danger"  id="feedback">'+data['msg']+'</p>');
                //   $( '#modal-bodymsg' ).empty();
                //   $( '#modal-bodymsg' ).append( '<h5 class="text-center" style="color: #a03d49;">客戶不能增加。</h5> <h5 class="text-center" style="color: #a03d49;">請稍後再嘗試。</h5>' );
                //   $('#finishModal').modal('show');
                // }
                  // if (data.AJAX_SUCCESS==GlobalVariables.AJAX_SUCCESS){
                  //     window.location.href=GlobalVariables.destUrl;
                  // } else {
                  //     $('.alert').text("登入錯誤");
                  //    $('.alert').removeClass('hidden');
                  }
              }
            });  

            }//if(passCheck==true){
        });//$("#btnUpdate").click(function(event) {

        
    });  // $( document ).ready(function() {
                //end show btnUpdate
                </script>
</head>

<body>

    <!-- admin javascript -->
    
    


    <?php   include('include/header.php');?>
    <div class="wrapper" >
        
        <?php   include('include/sidebar.php');?>
        <!-- checkout modal -->
          <script>
                
            </script>

            <div class="modal fade" id="checkoutModalCenter" tabindex="-1" role="dialog" aria-labelledby="checkoutModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered  " role="document" style="max-width: 600px;">
                <div class="modal-content px-3">
                <!-- <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div> -->
                <div class="modal-body "  style="z-index:2000">
                     <h5 style="color:#7d4495" class="text-center py-2"><i class="fas fa-plus mr-2" style="color:#7d4495"></i>記錄</h5>
                     <form>

                    <!-- load content -->
                    <table style="width: 100%;">
                    <thead>
                      <tr style="height: 40px;background-color: #f9cccf; font-size: 17px;">
                        <th style="width: 40%; font-weight: 500;">療程</th>
                        <th style="width: 20%; font-weight: 500;">發數</th>
                        <th style="width: 20%; font-weight: 500;">度數</th>
                        <th style="width: 20%; font-weight: 500;">備註</th>
                      </tr>
                    </thead>
                    <tbody><tr><td style="width: 40%; text-align: left;" class="cursor">皮秒二代(全臉)-試做</td><td style="width: 10%; text-align: left;"><input class="clickable" type="text" name="bookingItemsLog[88][code_1]" style="padding: 0;line-height: initial;min-height: inherit;background: transparent;border: none;outline: none;width: 90%;border-bottom:1px solid;" value="0"></td><td style="width: 10%; text-align: left;"><input class="clickable" type="text" name="bookingItemsLog[88][code_2]" style="padding: 0;line-height: initial;min-height: inherit;background: transparent;border: none;outline: none;width: 90%;border-bottom:1px solid;" value="0"></td><td style="width: 40%; text-align: left;"><input class="clickable" type="text" name="bookingItemsLog[88][remark]" style="padding: 0;line-height: initial;min-height: inherit;background: transparent;border: none;outline: none;width: 90%;border-bottom:1px solid;" value=""></td></tr><tr><td style="width: 40%; text-align: left;" class="cursor">皮秒二代(全面+眼+頸)-試做</td><td style="width: 10%; text-align: left;"><input class="clickable" type="text" name="bookingItemsLog[89][code_1]" style="padding: 0;line-height: initial;min-height: inherit;background: transparent;border: none;outline: none;width: 90%;border-bottom:1px solid;" value="0"></td><td style="width: 10%; text-align: left;"><input class="clickable" type="text" name="bookingItemsLog[89][code_2]" style="padding: 0;line-height: initial;min-height: inherit;background: transparent;border: none;outline: none;width: 90%;border-bottom:1px solid;" value="0"></td><td style="width: 40%; text-align: left;"><input class="clickable" type="text" name="bookingItemsLog[89][remark]" style="padding: 0;line-height: initial;min-height: inherit;background: transparent;border: none;outline: none;width: 90%;border-bottom:1px solid;" value=""></td></tr></tbody>
                  </table>
                    <!-- end load content -->


                   
                    <div class="form-group row">
                        <label for="inputRePassword" class="col-sm-12 "><span style="color:#7d4495;" >確定删除?</span></label>
                        
                        <span id="deletemsg" class="text-center"></span>
                    </div>
                    <!-- <div class="form-group row">
                        <div class="col-sm-12">
                        <p style="font-size: 12px;"><span style="color:#616161">*為必填項目<br>登入名稱為英文字或數字組成(不分大小寫)</span></p>
                        <span id="editmsg" class="text-center"></span>
                         </div>
                    </div> -->
                    <div class="form-group row">
                        <div class="col-sm-12 text-center">
                        <button type="button" class="btn  px-5  custombutton" id="btndeleteSubmit">確定</button>
                        </div>
                    </div>
                    <input type="hidden" class="form-control" id="checkoutBookingId" placeholder="">
                    </form>
                </div>
                <!-- <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div> -->
                </div>
            </div>
            </div>
            <script type="text/javascript">
             


            </script>
        <!-- end checkout modal -->

         <!-- delete modal -->
            <script>
                
            </script>

            <div class="modal fade" id="deleteModalCenter" tabindex="-1" role="dialog" aria-labelledby="deleteModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered  " role="document" style="max-width: 600px;">
                <div class="modal-content px-3">
                <!-- <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div> -->
                <div class="modal-body "  style="z-index:2000">
                     <h5 style="color:#7d4495" class="text-center py-2"><i class="fas fa-plus mr-2" style="color:#7d4495"></i>删除預約</h5>
                     <form>

                   
                    <div class="form-group row">
                        <label for="inputRePassword" class="col-sm-12 "><span style="color:#7d4495;" >確定删除?</span></label>
                        
                        <span id="deletemsg" class="text-center"></span>
                    </div>
                    <!-- <div class="form-group row">
                        <div class="col-sm-12">
                        <p style="font-size: 12px;"><span style="color:#616161">*為必填項目<br>登入名稱為英文字或數字組成(不分大小寫)</span></p>
                        <span id="editmsg" class="text-center"></span>
                         </div>
                    </div> -->
                    <div class="form-group row">
                        <div class="col-sm-12 text-center">
                        <button type="button" class="btn  px-5  custombutton" id="btndeleteSubmit">確定</button>
                        </div>
                    </div>
<!--                     <input type="hidden" class="form-control" id="inputadminid" placeholder=""> -->
                    </form>
                </div>
                <!-- <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div> -->
                </div>
            </div>
            </div>
            <script type="text/javascript">
             


            </script>
            <!-- end delete modal -->


        <!-- booking modal -->
            <script>
                
            </script>

            <div class="modal fade" id="bookingModalCenter" tabindex="-1" role="dialog" aria-labelledby="deleteModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered  " role="document" style="max-width: 800px;">
                <div class="modal-content px-3">
                <!-- <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div> -->
                <div class="modal-body ">
                     <h5 style="color:#7d4495" class="text-left py-2"><i class="fas fa-plus mr-2" style="color:#7d4495"></i>詳情</h5>
                     <form>

                   <div class="form-group row">
                    <label for="isConfirm" class="col-sm-2 col-form-label">確定預約</label>
                    <div class="col-sm-10">
                      <input type="checkbox" id="isConfirm" name="isConfirm" value="ture">
                      <div class="valid-feedback">正確</div>
                      <div class="invalid-feedback">没有资料</div>
                    </div>
                  </div>
                  <!-- old form content -->
                   <div class="form-group row">
              <label for="inputPassword" class="col-sm-2 col-form-label">開始日期*</label>
              <div class="col-sm-10">
                  <!-- date picker -->
                  <!-- dob readonly="true" -->
                  <input id="startdate" width="276" name="startdate" />
                  <script>
                      // $('#startdate').datepicker({
                          // uiLibrary: 'bootstrap4',
                          // format: 'yyyy-mm-dd'
                      // });
                  </script>
                  <!-- end date picker -->
                  
                  <div class="valid-feedback">正確</div>
                  <div class="invalid-feedback">没有资料</div>
              </div>
            </div>  
            <div class="form-group row">
              <label for="username" class="col-sm-2 col-form-label">開始時間*</label>
              <div class="col-sm-10">
                <input id="starttime" width="276" />
                  <script>
                      // $('#timepicker').timepicker({
                      //     uiLibrary: 'bootstrap4',
                      // });

                      var options = {
            
                       now: '<?php
                       date_default_timezone_set("Asia/Hong_Kong");
                      // date_default_timezone_set("Asia/Hongkong"); 
                      // ini_set('date.timezone','Asia/Hongkong');
                       echo date('H');?>:00', //hh:mm 24 hour format only, defaults to current time
                      twentyFour: true,  //Display 24 hour format, defaults to false
                      upArrow: 'wickedpicker__controls__control-up',  //The up arrow class selector to use, for custom CSS
                      downArrow: 'wickedpicker__controls__control-down', //The down arrow class selector to use, for custom CSS
                      close: 'wickedpicker__close', //The close class selector to use, for custom CSS
                      hoverState: 'hover-state', //The hover state class to use, for custom CSS
                      title: '', //The Wickedpicker's title,
                      showSeconds: false, //Whether or not to show seconds,
                      timeSeparator: ' : ', // The string to put in between hours and minutes (and seconds)
                      secondsInterval: 15, //Change interval for seconds, defaults to 1,
                      minutesInterval: 15, //Change interval for minutes, defaults to 1
                      beforeShow: null, //A function to be called before the Wickedpicker is shown
                      afterShow: null, //A function to be called after the Wickedpicker is closed/hidden
                      show: null, //A function to be called when the Wickedpicker is shown
                      clearable: false, //Make the picker's input clearable (has clickable "x")
                    };
                     
                    // $('#starttime').wickedpicker(options );
                  </script>
                <div class="valid-feedback">正確</div>
                <div class="invalid-feedback">没有资料</div>
              </div>
            </div>
            <div class="form-group row">
              <label for="chi_name" class="col-sm-2 col-form-label">結束時間*</label>
              <div class="col-sm-10">
                  <input id="endtime" width="276" />
                  <script>
                      // $('#timepicker2').timepicker({
                      //     uiLibrary: 'bootstrap4',
                      // });
                      var options2 = {

                       now: '<?php
                       date_default_timezone_set("Asia/Hong_Kong");
                      // date_default_timezone_set("Asia/Hongkong"); 
                      // ini_set('date.timezone','Asia/Hongkong');
                       echo (date('H')+1);?>:00', //hh:mm 24 hour format only, defaults to current time
                      twentyFour: true,  //Display 24 hour format, defaults to false
                      upArrow: 'wickedpicker__controls__control-up',  //The up arrow class selector to use, for custom CSS
                      downArrow: 'wickedpicker__controls__control-down', //The down arrow class selector to use, for custom CSS
                      close: 'wickedpicker__close', //The close class selector to use, for custom CSS
                      hoverState: 'hover-state', //The hover state class to use, for custom CSS
                      title: '', //The Wickedpicker's title,
                      showSeconds: false, //Whether or not to show seconds,
                      timeSeparator: ' : ', // The string to put in between hours and minutes (and seconds)
                      secondsInterval: 15, //Change interval for seconds, defaults to 1,
                      minutesInterval: 15, //Change interval for minutes, defaults to 1
                      beforeShow: null, //A function to be called before the Wickedpicker is shown
                      afterShow: null, //A function to be called after the Wickedpicker is closed/hidden
                      show: null, //A function to be called when the Wickedpicker is shown
                      clearable: false, //Make the picker's input clearable (has clickable "x")
                    };
                      // $('#endtime').wickedpicker(options2 );
                  </script>
                <div class="valid-feedback">正確</div>
                <div class="invalid-feedback">没有资料</div>

                <button type="button" class="btn btn-primary" onclick="resettime()">重設結束時間</button>
              </div>
            </div>

              <div class="form-group row">
              <label for="display_name" class="col-sm-2 col-form-label">現在客戶</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="display_name" name="display_name" placeholder="輸入中文名稱" value="" readonly    <?php
                
               
              ?>>
                <div class="valid-feedback">正確</div>
                <div class="invalid-feedback">没有资料</div>
              </div>
            </div>

             <div class="form-group row">
              <label for="room_id" class="col-sm-2 col-form-label">房間*</label>
              <div class="col-sm-10">
                <select class="chosen" style="width:300px;" id="room_id" name="room_id">
                <option value>--</option>
                <?php foreach ($roomlist as $roomsrow){
                ?>
                  <option value="<?php echo $roomsrow->id;?>"><?php
                  
                    echo $roomsrow->name;

                  
                   ?></option> 
                <?php
                }//php foreach ($customers as $customerrow){ ?>
                  

                </select>
                
                <script type="text/javascript">
                // $(".room_id").chosen({search_contains: true});
                </script>
                <div class="valid-feedback">正確</div>
                <div class="invalid-feedback">没有资料或密碼和登入密碼不同</div>
              </div>
            </div>


            <div class="form-group row">
              <label for="pic_marked" class="col-sm-2 col-form-label">指定美容師</label>
              <div class="col-sm-10">
                <input type="checkbox" id="pic_marked" name="pic_marked" value="ture">
                <div class="valid-feedback">正確</div>
                <div class="invalid-feedback">没有资料</div>
              </div>
            </div>
             <div class="form-group row">
              <label for="pic_1" class="col-sm-2 col-form-label">美容師*</label>
              <div class="col-sm-10">
                
                 <select class="chosen" style="width:300px;" id="pic_1" name="pic_1">
                <option value>--</option>
             <?php foreach ($therapistlist as $therapistrow){
                ?>
                  <option value="<?php echo $therapistrow->id;?>"><?php
                  
                    echo $therapistrow->username;

                  
                   ?></option> 
                <?php
                }//php foreach ($customers as $customerrow){ ?> 
                  

                </select>
                <div class="valid-feedback">正確</div>
                <div class="invalid-feedback">没有资料</div>
              </div>
            </div>

             <div class="form-group row">
              <label for="pic_2" class="col-sm-2 col-form-label">美容師2*</label>
              <div class="col-sm-10">
                
                 <select class="chosen" style="width:300px;" id="pic_2" name="pic_2">
                <option value>--</option>
        <?php foreach ($therapistlist as $therapistrow){
                ?>
                  <option value="<?php echo $therapistrow->id;?>"><?php
                  
                    echo $therapistrow->username;

                  
                   ?></option> 
                <?php
                }//php foreach ($customers as $customerrow){ ?> 
                  

                </select>
                <div class="valid-feedback">正確</div>
                <div class="invalid-feedback">没有资料</div>
              </div>
            </div>


            <div class="form-group row">
              <label for="remark" class="col-sm-2 col-form-label">備註</label>
              <div class="col-sm-10">
                <textarea  type="text" class="form-control" id="remark" name="remark" rows="4" cols="50" placeholder="輸入備註"></textarea>
              </div>
            </div>
                  <!-- end old form content -->

                  <!-- prepaid service -->
                     <h5>預約已購買的服務</h5>
             <div id="prepaid-services-sub">
              <!-- <p style="color:blue;">1</p> -->
             <!--  <table id="prepaid-services-table" class="display table table1 dataTable no-footer"><thead><tr><th></th><th>服務編號</th><th>服務種類</th><th>服務項目</th><th>工數</th><th>售價</th><th>購買次數</th><th>剩除次數</th><th>沒有積分回贈</th></tr></thead><tbody><tr data-id="7" data-available_qty="10"><td><input class="checkbox-check" type="checkbox" style="position: relative;left: 20px;top: 8px;opacity: 1;"></td><td>T-001</td><td>T - 療程</td><td>皮秒二代(全臉)</td><td>1</td><td>$1,980.00</td><td>10</td><td>10</td><td></td></tr></tbody></table> -->

            </div>

                  <!-- end prepaid service -->


                  <!-- service list -->

                  <h5>預約新服務</h5>
                 <div id="new-services-sub">
                  請先選擇客戶
                  <!-- <p style="color:blue;">1</p> -->
                 <!--  <table id="prepaid-services-table" class="display table table1 dataTable no-footer"><thead><tr><th></th><th>服務編號</th><th>服務種類</th><th>服務項目</th><th>工數</th><th>售價</th><th>購買次數</th><th>剩除次數</th><th>沒有積分回贈</th></tr></thead><tbody><tr data-id="7" data-available_qty="10"><td><input class="checkbox-check" type="checkbox" style="position: relative;left: 20px;top: 8px;opacity: 1;"></td><td>T-001</td><td>T - 療程</td><td>皮秒二代(全臉)</td><td>1</td><td>$1,980.00</td><td>10</td><td>10</td><td></td></tr></tbody></table> -->

                </div>

                <div class="tab-content" id="services-tab-content">
              <div class="tab-pane fade active in" id="prepaid-services" role="tabpanel" aria-labelledby="prepaid-services-tab">
                請先選擇客戶
              </div>
            </div>

                  <!-- end service list -->



                    <!-- <div class="form-group row">
                        <label for="inputRePassword" class="col-sm-12 "><span style="color:#7d4495;" >確定删除</span><span id="deletenum" style="color:#7d4495;"></span><span style="color:#7d4495;" >個門店?</span></label>
                        
                        <span id="deletemsg" class="text-center"></span>
                    </div> -->
                    <!-- <div class="form-group row">
                        <div class="col-sm-12">
                        <p style="font-size: 12px;"><span style="color:#616161">*為必填項目<br>登入名稱為英文字或數字組成(不分大小寫)</span></p>
                        <span id="editmsg" class="text-center"></span>
                         </div>
                    </div> -->
                    <div class="form-group row">
                        <div class="col-sm-12 text-center">
                        <button type="button" class="btn  px-5  custombutton" id="btnDelete">删除</button>
                        <button type="button" class="btn  px-5  custombutton" id="btnUpdate">確定</button>
                        <button type="button" class="btn  px-5  custombutton" id="btnClose">關閉</button>
                        </div>
                    </div>
                    <input type="hidden" class="form-control" id="bookingid" placeholder="">
                    <input type="hidden" class="form-control" id="user_id" placeholder="">
                    </form>
                </div>
                <!-- <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div> -->
                </div>
            </div>
            </div>
            <script type="text/javascript">
             


            </script>
        <!-- end booking modal --> 

        <!-- Page Content  -->
        <div id="content" style="background-color: #e5e5e5;">

            <!-- add button -->

            <a href="/at-cms/brbookinglist/add">新增</a>
            <!-- end add button -->
             <!-- <button type="button" class="btn  px-5  custombutton" id="btnChange">btnChange確定</button> -->
            <!-- test datatable -->
            <table id="book-table" class="display responsive wrap table table-bordered table-striped table-hover  ">
         
            <!-- <table id="book-table" class="display responsive nowrap"  width="100%"> -->
            <thead>
            <tr><td>ID</td><td>預約日期及時間</td><td>客戶名稱及電話</td><td>美容師1</td><td>美容師2</td><td>房間</td><td>服務內容</td><td>創建日期</td><td>確定</td><td>報到</td><td>報走</td><td>出單</td><td></td></tr>

            </thead>
            <tbody>

            <?php 

            foreach ($bookingdata as $bookingrow) {


            ?>
              <tr>
                <td>
                    <?php 
                    // var_dump($bookingrow);
                    echo $bookingrow['id'];?>
                </td>
                <td>
                    <?php echo $bookingrow['starttime']->format('Y-m-d H:i:s');?>
                </td>
                <td>
                    <?php echo $bookingrow['customersrow']->chi_name."(".$bookingrow['customersrow']->mobile.")";?>
                </td>
                <td>
                    <?php if(!empty($bookingrow['pic_1name'])){echo $bookingrow['pic_1name'];}?>
                </td>
                <td>
                    <?php if(!empty($bookingrow['pic_2name'])){echo $bookingrow['pic_2name'];}?>
                </td>
                <td>
                    <?php echo $bookingrow['roomname'];?>
                </td>
                <td>
                    <?php echo $bookingrow['bookingitemsname'];?>
                </td>
                <td>
                    <?php echo date('Y-m-d', $bookingrow['create_time']);?>
                    
                </td>
                <td>
                     <?php 
                     if($bookingrow['isConfirm']==0){
                      echo '<i class="fas fa-times"></i>';
                     }
                     ?>

                     <?php
                      if($bookingrow['isConfirm']==1){
                      echo '<i class="fas fa-check"></i>';
                     }
                     ?>
                     
                </td>
                <td>
                     <?php 
                     if($bookingrow['isArrive']==0){
                      echo '<i class="fas fa-times"></i>';
                     }
                     ?>

                     <?php
                      if($bookingrow['isArrive']==1){
                      echo '<i class="fas fa-check"></i>';
                     }
                     ?>
                     
                </td>
                <td>
                     <?php 
                     if(empty($bookingrow['out_time'])){
                      echo '<i class="fas fa-times"></i>';
                     }
                     ?>

                     <?php
                      if(!empty($bookingrow['out_time'])){
                      echo '<i class="fas fa-check"></i>';
                     }
                     ?>
                     
                </td>
                <td>
                   
                    <a
                      href="#" onclick="showbrbookingdetail(<?php echo $bookingrow['id'];?>);"
                      >詳情</a>
                      <br>
                    <?php
                      if($bookingrow['isArrive']==0){
                    ?>
                      <a
                      href="#" onclick="brbookingarrive(<?php echo $bookingrow['id'];?>);"
                      >報到</a>
                    <?php
                      }//if($bookingrow['isArrive']==0){  
                    ?>
                    <br>
                    <?php
                      if($bookingrow['isReturn']==0){
                    ?>
                      <a
                      href="#" onclick="brbookingcheckout(<?php echo $bookingrow['id'];?>);"
                      >報走</a>
                    <?php
                      }//if($bookingrow['isArrive']==0){  
                    ?>
                </td>
                <td>
                    
                </td>
              </tr>
            <?php
            }//foreach ($bookingdata as $bookingrow) {
            ?>
            <?php  //foreach ($customers as $customersrow) {
            ?>
                  <!--   <tr><td><?php echo $customersrow->code;?></td><td><?php echo $customersrow->chi_name;?></td><td><?php echo $customersrow->eng_firstname;?></td><td><?php echo $customersrow->eng_lastname;?></td><td><?php 
                    if($customersrow->gender==0){
                         echo "女";
                    }
                    if($customersrow->gender==1){
                         echo "男";
                    }
                    ?></td><td><?php echo $customersrow->dob;?>
                    </td><td><?php echo $customersrow->mobile;?></td><td><a href="/at-cms/customeradmin/detail/<?php echo $customersrow->id;?>">詳情</a></td><td><a href="/at-cms/customeradmin/edit/<?php echo $customersrow->id;?>">編輯</a></td><td>
                    <input type="checkbox" <?php
                        if($customersrow->status=="1"){
                            echo "checked";
                        }
                      ?> data-toggle="toggle" id="checkstatus<?php echo $customersrow->id;?>"  name="checkstatus<?php echo $customersrow->id;?>" class="togglenewclass" data-clickid="<?php echo $customersrow->id;?>"  onchange="checkToggle(this)">    
                    </td></tr> -->



            <?php 
                 //  }//foreach ($employee as $row) {
            ?>


                        
            </tbody>
            </table>

            <script type="text/javascript">
$(document).ready(function() {
    $('#book-table').DataTable( {
        "order": [[ 0, "desc" ]],
         dom: 'Bfrtip',
        buttons: [
            // 'colvis'
        ]
    }

        );
});
</script>
            <!-- end test datatable -->
        </div>
    </div>


    <script type="text/javascript">
        $(document).ready(function () {
            $('#sidebarCollapse').on('click', function () {
                $('#sidebar').toggleClass('active');
            });

            // password click
            bootstrapRevealPassword();

// Plugin to integrate in your javascript file
            function bootstrapRevealPassword() {
            $('[data-password]').closest('.form-group').addClass('position-relative').append('<span class="form-password-icon"><i class="material-icons">visibility_off</i></span>');

            $('.form-password-icon').on('click', function() {
                var clicks = $(this).data('clicks');
                if (clicks) {
                // odd clicks
                $(this).html('<span class="input-group-text "><i class="fas fa-eye-slash"></i></span>').prevAll(':input').attr('type', 'password');
                } else {
                // even clicks
                $(this).html('<span class="input-group-text "><i class="fas fa-eye"></i></span>').prevAll(':input').attr('type', 'text');
                }
                $(this).data("clicks", !clicks);
            });
            }

            // end password click

        });
    </script>
</body>

</html>