
<!DOCTYPE html>
<html>
<?php  
ini_set('upload_max_filesize', '50M');
ini_set('post_max_size', '50M');
ini_set('max_input_time', 300);
ini_set('max_execution_time', 300);
    

?>
<head>
  <!-- <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> -->
  <script src="<?php echo base_url();?>assets/js/jquery-3.1.1.min.js"></script>
 <?php   include('include/common.php');?>  
  <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>assets/css/jquery.dataTables.min.css">
  <script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>assets/css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>assets/css/dataTables.bootstrap4.min.css">
  <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>assets/css/responsive.dataTables.min.css">
  <script type="text/javascript" src="<?php echo base_url();?>assets/js/responsive.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>assets/css/responsive.bootstrap.css">
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>assets/css/responsive.bootstrap.min.css">
<!-- <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap4.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap4.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/responsive/2.2.3/css/responsive.foundation.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/responsive/2.2.3/css/responsive.foundation.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/responsive/2.2.3/css/responsive.jqueryui.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/responsive/2.2.3/css/responsive.jqueryui.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/responsive/2.2.3/css/responsive.semanticui.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/responsive/2.2.3/css/responsive.semanticui.min.css">
   -->


  <script type="text/javascript" src="<?php echo base_url();?>assets/js/dataTables.responsive.js"></script>
<!-- <script type="text/javascript" src="//cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap4.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap4.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/responsive/2.2.3/js/responsive.dataTables.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/responsive/2.2.3/js/responsive.dataTables.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/responsive/2.2.3/js/responsive.foundation.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/responsive/2.2.3/js/responsive.foundation.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/responsive/2.2.3/js/responsive.jqueryui.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/responsive/2.2.3/js/responsive.jqueryui.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/responsive/2.2.3/js/responsive.semanticui.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/responsive/2.2.3/js/responsive.semanticui.min.js"></script> -->

<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>assets/css/buttons.dataTables.min.css">
<script type="text/javascript" src="<?php echo base_url();?>assets/js/buttons.dataTables.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/buttons.colVis.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous">

  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<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>
<link rel="stylesheet" href="https://rawgit.com/ericjgagnon/wickedpicker/master/stylesheets/wickedpicker.css" />
<style type="text/css">
.wickedpicker{

  z-index:3000!important;
}
</style>

<script src="<?php echo base_url(); ?>assets/js/wickpicker.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';



                      //clear input form value
                        $('#startdate').val('');
                        $('#starttime').val('');
                        $('#endtime').val('');

                        $("#room_id").val('');
                        $("#pic_1").val('');
                        $("#pic_2").val('');
                        $("#pic_marked").attr("checked",false);

                        $("#display_name").val('');
                        $("#remark").val('');

                        $("#user_id").val('');
                        $("#isConfirm").attr("checked",false);

                      //end clear input form value

                      //double clear below ajax data
                          var prepaidservicessub = document.getElementById('prepaid-services-sub');
                          // alert(city);
                          $(prepaidservicessub).empty();   


                          var newservicessub = document.getElementById('new-services-sub');
                          // alert(city);
                          $(newservicessub).empty();     
   
                      //end double clear below ajax data


                        //booking detail ajax
                        $.ajax({
                      method: "POST",
                      url: postUrl,
                     dataType: "json",
                     data: postData,
                     timeout: 15000,
                     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']);
                    // alert(data['starttime']);
                    starttimePicker.wickedpicker('setTime', 0,  data['starttime']);

                    endtimePicker.wickedpicker('setTime', 0,  data['endtime']);

                    $('#originalendtime').val(data['endtime']); //for reset time

                    $("#room_id").val(data['room_id']);
                    $("#pic_1").val(data['pic_1']);
                    //for change option text

                    // clear name
                    $('#pic_1 > option').each(function() {

                       var current_text=$(this).text();

                          var ret = current_text.replace(" (指定美容師)",'');
                          $(this).text(ret);
                    });
                    // end clear name

                    $('#pic_1 > option').each(function() {
                          // alert($(this).text() + ' ' + $(this).val());
                          var current_text=$(this).text();
                          var current_val=$(this).val();
                          if(current_val==data['prefer_pic']){
                            // var ret = current_text.replace(" (指定美容師)",'');
                            $(this).text(current_text + " (指定美容師)");
                          }
                          
                      });
                    //end for chnage option text
                    $("#pic_2").val(data['pic_2']);

                     // clear name
                    $('#pic_2 > option').each(function() {

                       var current_text=$(this).text();

                          var ret = current_text.replace(" (指定美容師)",'');
                          $(this).text(ret);
                    });
                    // end clear name

                    $('#pic_2 > option').each(function() {
                          // alert($(this).text() + ' ' + $(this).val());
                          var current_text=$(this).text();
                          var current_val=$(this).val();
                          if(current_val==data['prefer_pic']){
                            // var ret = current_text.replace(" (指定美容師)",'');
                            $(this).text(current_text + " (指定美容師)");
                          }
                          
                      });

                    if(data['pic_marked']==1){
                      $("#pic_marked").attr("checked",true);
                    }
                    else{
                      $("#pic_marked").attr("checked",false);
                    }

                    let printname=false;
                    let showname="";
                    if(data['chi_name']!==null && printname===false){
                      printname=true;
                      showname=data['chi_name'];
                    }
                    if(data['display_name']!==null && printname===false){
                       printname=true;
                      showname=data['display_name'];
                    }
                    $("#display_name").val(showname+"("+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

                    //get user point
                    user_pointajax(data['user_id']);
                  //end get user point


                    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() {

                //callout missed booking at 2020-10-05
                function brbookingmissed($bookingid){
                  $("#checkoutBookingId").val($bookingid);
                  $("#missedReservationValue").val('');
                  var labelValue = document.getElementById('missedLabel');



                  $(labelValue).empty();

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

                      $.ajax({
                      method: "POST",
                      url: postUrl,
                     dataType: "json",
                     data: postData,
                     timeout: 15000,
                     success : function(data){
                      $("#missedReservationValue").val(data);
                    // alert("posted");
                    // alert('formsubmit');
                    // alert(data);
                    
                    // alert(data['recordstatus']);
                    // alert(data['msg']);



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

            
                  if(data==0){
                    $(labelValue).append('<label for="inputRePassword" class="col-sm-12 "><span style="color:#7d4495;" >確定失約?</span></label>');
                  
                  }
                  else{
                    $(labelValue).append('<label for="inputRePassword" class="col-sm-12 "><span style="color:#7d4495;" >確定取消失約?</span></label>');
                  }
                  $('#missedModalCenter').modal({
                                            show: true,
                                        }); 

                  }
                  });
                }//function brbookingmissed($bookingid){




                //callout missed booking at 2020-10-05  


                //cancel booking at 2020-10-09
                function cancelbooking($bookingid){
                  $("#checkoutBookingId").val($bookingid);


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

                      $.ajax({
                      method: "POST",
                      url: postUrl,
                     dataType: "json",
                     data: postData,
                     timeout: 15000,
                     success : function(data){
                      //$("#missedReservationValue").val(data);
                    // alert("posted");
                    // alert('formsubmit');
                    // alert(data);
                    
                    // alert(data['recordstatus']);
                    // alert(data['msg']);



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

            
                  
                  if(data==1){
                    // $(labelValue).append('<label for="inputRePassword" class="col-sm-12 "><span style="color:#7d4495;" >確定取消失約?</span></label>');
                    alert('客人已經取消預約');
                  }

                    //check isBooking Returned
                  if(data==0){
                    // $(labelValue).append('<label for="inputRePassword" class="col-sm-12 "><span style="color:#7d4495;" >確定失約?</span></label>');

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

                      $.ajax({
                      method: "POST",
                      url: postUrl,
                     dataType: "json",
                     data: postData,
                     timeout: 15000,
                     success : function(data2){
                          if(data2==true){
                            alert('預約已經簽到');
                          }
                          if(data2==false){
                             $('#cancelModalCenter').modal({
                                            show: true,
                                        }); 
                          }
                     
                      }
                  
                     
                   });
                        
                  }//if(data==0){
                    //end check isBooking Returned
                  }
                   
                  });  

                }
                //end cancel booking at 2020-10-09

                 //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';

                      $('#loading').show();
                        //booking detail ajax
                        $.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();
                        $( '#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 checkOutSub = document.getElementById('check-out-sub');
                  // alert(city);
                   $(checkOutSub).empty();     
   






                     //empty before treatment photo
                      var checkOutPreview = document.getElementById('preview');
                      // alert(city);
                      $(checkOutPreview).empty();
                    //end 


                      //empty after treatment photo
                      var checkOutPreviewAfter = document.getElementById('previewAfter');
                      // alert(city);
                      $(checkOutPreviewAfter).empty();
                    //end



                    //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 style="width: 100%;"><thead><tr style="height: 40px;background-color: #fde9cf; font-size: 17px;"><th style="width: 40%; font-weight: 500;">療程</th><th style="width: 15%; font-weight: 500;">發數</th><th style="width: 15%; font-weight: 500;">度數</th><th style="width: 15%; font-weight: 500;">部位</th><th style="width: 15%; font-weight: 500;">備註</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+='>';
                              // $(prepaidservicessub).append('<td>');
                              html+='<td style="width: 40%; text-align: left;" class="cursor">';
                              html+=obj[i].name;
                              html+='<input type="hidden" name="bookingItems['+i+'][bookingitemid]" value="';
                              html+=obj[i].id;
                              html+='">';
                              html+='</td>';

                              html+='<td style="width: 10%; text-align: left;"><input class="clickable" type="text" name="bookingItems['+i+'][code_1]" style="padding: 0;line-height: initial;min-height: inherit;background: transparent;border: none;outline: none;width: 90%;border-bottom:1px solid;" value="';
                              if(obj[i].code_1!==null){
                                html+=obj[i].code_1;
                              }
                               html+='"></td>';

                               html+='<td style="width: 10%; text-align: left;"><input class="clickable" type="text" name="bookingItems['+i+'][code_2]" style="padding: 0;line-height: initial;min-height: inherit;background: transparent;border: none;outline: none;width: 90%;border-bottom:1px solid;" value="';
                               if(obj[i].code_2!==null){
                                 html+=obj[i].code_2;
                               }
                               html+='"></td>';

                               // area added at 2020-09-02
                                html+='<td style="width: 10%; text-align: left;"><input class="clickable" type="text" name="bookingItems['+i+'][code_area]" style="padding: 0;line-height: initial;min-height: inherit;background: transparent;border: none;outline: none;width: 90%;border-bottom:1px solid;" value="';
                               if(obj[i].code_area!==null){
                                 html+=obj[i].code_area;
                               }
                               html+='"></td>';
                               // end area


                               html+='<td style="width: 40%; text-align: left;"><input class="clickable" type="text" name="bookingItems['+i+'][code_remark]" style="padding: 0;line-height: initial;min-height: inherit;background: transparent;border: none;outline: none;width: 90%;border-bottom:1px solid;" value="';
                               if(obj[i].code_remark!==null){
                                html+=obj[i].code_remark;
                               }
                               html+='"></td>';
                               html+='</tr>';
                              }

                              
                             
                            // $(level2box).append('<option  value=' + obj[i].id + '>' + obj[i].chi_name + '</option>');
                            

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

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

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


                      }
                    });
                    //end insert booking item info

                   

                    //get current preview photo list
                      var GlobalVariables ={
                          'csrfToken': '123',
                          'baseUrl':'<?php echo base_url();?>',
                          'destUrl':'<?php echo base_url();?>/api/v1/brbookingend/getPhotoList',
                          'AJAX_SUCCESS' :'SUCCESS',
                          'AJAX_FAILURE' :'FAILURE'
                    };

                                 //empty lower select box

 
   

                    //end empty lower select box

                      var postUrl= GlobalVariables.baseUrl +'/api/v1/brbookingend/getPhotoList';  
                      //change select box option  
                         $.ajax({
                                type:'POST',
                                url:postUrl,
                                data:{'booking_id':$bookingid,'type':1},
                            success:function(response){

                              for(var index = 0; index < response.length; index++) {
                           var src = response[index]['pathname'];
                           var outputname = response[index]['name'];
                           var id = response[index]['id'];

                           // Add img element in <div id='preview'>
                           // $('#preview').append('<img src="../../'+src+'" width="200px;" height="200px">');
                           // $('#preview').append('<div><img style="border: 1px solid #333;" width="160" height="80" src="../../'+src+'"><a class="photo-name" style="" target="_blank" href="../../'+src+'">'+outputname+'</a><a class="photo-delete clickable" data-photobeforeid="'+id+'" data-fileid="'+id+'">刪除</a></div>');
                           $('#preview').append('<div><img style="border: 1px solid #333;" width="160" height="80" src="../../'+src+'"><a class="photo-name" style="" target="_blank" href="../../'+src+'">'+outputname+'</a><span style="cursor:pointer" data-photobeforeid="'+id+'" onclick="deletephoto('+id+',this)">刪除</span></div><br>');
                         }
                              // 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 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>';
                          //   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+='>';
                          //     // $(prepaidservicessub).append('<td>');
                          //     html+='<td style="width: 40%; text-align: left;" class="cursor">';
                          //     html+=obj[i].name;
                          //     html+='<input type="hidden" name="bookingItems['+i+'][bookingitemid]" value="';
                          //     html+=obj[i].id;
                          //     html+='">;';
                          //     html+='</td>';

                          //     html+='<td style="width: 10%; text-align: left;"><input class="clickable" type="text" name="bookingItems['+i+'][code_1]" style="padding: 0;line-height: initial;min-height: inherit;background: transparent;border: none;outline: none;width: 90%;border-bottom:1px solid;" value="';
                          //     if(obj[i].code_1!==null){
                          //       html+=obj[i].code_1;
                          //     }
                          //      html+='"></td>';

                          //      html+='<td style="width: 10%; text-align: left;"><input class="clickable" type="text" name="bookingItems['+i+'][code_2]" style="padding: 0;line-height: initial;min-height: inherit;background: transparent;border: none;outline: none;width: 90%;border-bottom:1px solid;" value="';
                          //      if(obj[i].code_2!==null){
                          //        html+=obj[i].code_2;
                          //      }
                          //      html+='"></td>';
                          //      html+='<td style="width: 40%; text-align: left;"><input class="clickable" type="text" name="bookingItems['+i+'][code_remark]" style="padding: 0;line-height: initial;min-height: inherit;background: transparent;border: none;outline: none;width: 90%;border-bottom:1px solid;" value="';
                          //      if(obj[i].code_remark!==null){
                          //       html+=obj[i].code_remark;
                          //      }
                          //      html+='"></td>';
                          //      html+='</tr>';
                          //     }

                              
                             
                          //   // $(level2box).append('<option  value=' + obj[i].id + '>' + obj[i].chi_name + '</option>');
                            

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

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

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


                      }
                    });
                    //end get current preview photo list

                    //get preview after photo list
                      
                      var GlobalVariables ={
                          'csrfToken': '123',
                          'baseUrl':'<?php echo base_url();?>',
                          'destUrl':'<?php echo base_url();?>/api/v1/brbookingend/getPhotoList',
                          'AJAX_SUCCESS' :'SUCCESS',
                          'AJAX_FAILURE' :'FAILURE'
                    };

                                 //empty lower select box

  
   

                    //end empty lower select box

                      var postUrl= GlobalVariables.baseUrl +'/api/v1/brbookingend/getPhotoList';  
                      //change select box option  
                         $.ajax({
                                type:'POST',
                                url:postUrl,
                                data:{'booking_id':$bookingid,'type':2},
                            success:function(response){

                              for(var index = 0; index < response.length; index++) {
                           var src = response[index]['pathname'];
                           var outputname = response[index]['name'];
                           var id = response[index]['id'];

                           // Add img element in <div id='preview'>
                           // $('#preview').append('<img src="../../'+src+'" width="200px;" height="200px">');
                           // $('#preview').append('<div><img style="border: 1px solid #333;" width="160" height="80" src="../../'+src+'"><a class="photo-name" style="" target="_blank" href="../../'+src+'">'+outputname+'</a><a class="photo-delete clickable" data-photobeforeid="'+id+'" data-fileid="'+id+'">刪除</a></div>');
                           $('#previewAfter').append('<div><img style="border: 1px solid #333;" width="160" height="80" src="../../'+src+'"><a class="photo-name" style="" target="_blank" href="../../'+src+'">'+outputname+'</a><span style="cursor:pointer" data-photobeforeid="'+id+'" onclick="deletephoto('+id+',this)">刪除</span></div><br>');
                         }
                              // 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 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>';
                          //   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+='>';
                          //     // $(prepaidservicessub).append('<td>');
                          //     html+='<td style="width: 40%; text-align: left;" class="cursor">';
                          //     html+=obj[i].name;
                          //     html+='<input type="hidden" name="bookingItems['+i+'][bookingitemid]" value="';
                          //     html+=obj[i].id;
                          //     html+='">;';
                          //     html+='</td>';

                          //     html+='<td style="width: 10%; text-align: left;"><input class="clickable" type="text" name="bookingItems['+i+'][code_1]" style="padding: 0;line-height: initial;min-height: inherit;background: transparent;border: none;outline: none;width: 90%;border-bottom:1px solid;" value="';
                          //     if(obj[i].code_1!==null){
                          //       html+=obj[i].code_1;
                          //     }
                          //      html+='"></td>';

                          //      html+='<td style="width: 10%; text-align: left;"><input class="clickable" type="text" name="bookingItems['+i+'][code_2]" style="padding: 0;line-height: initial;min-height: inherit;background: transparent;border: none;outline: none;width: 90%;border-bottom:1px solid;" value="';
                          //      if(obj[i].code_2!==null){
                          //        html+=obj[i].code_2;
                          //      }
                          //      html+='"></td>';
                          //      html+='<td style="width: 40%; text-align: left;"><input class="clickable" type="text" name="bookingItems['+i+'][code_remark]" style="padding: 0;line-height: initial;min-height: inherit;background: transparent;border: none;outline: none;width: 90%;border-bottom:1px solid;" value="';
                          //      if(obj[i].code_remark!==null){
                          //       html+=obj[i].code_remark;
                          //      }
                          //      html+='"></td>';
                          //      html+='</tr>';
                          //     }

                              
                             
                          //   // $(level2box).append('<option  value=' + obj[i].id + '>' + obj[i].chi_name + '</option>');
                            

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

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

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


                      }
                    });
                    

                    //end get preview after photo list
                    

                    //check if it need to print invoice
                          var GlobalVariables ={
                          'csrfToken': '123',
                          'baseUrl':'<?php echo base_url();?>',
                          'destUrl':'<?php echo base_url();?>/api/v1/brbookingend/checkBookingInvoice',
                          'AJAX_SUCCESS' :'SUCCESS',
                          'AJAX_FAILURE' :'FAILURE'
                    };

                                 //empty lower select box

  
   

                    //end empty lower select box



                      var postUrl= GlobalVariables.baseUrl +'/api/v1/brbookingend/checkBookingInvoice';  
                      //change select box option  
                         $.ajax({
                          async: false,
                                type:'POST',
                                url:postUrl,
                                data:{'booking_id':$bookingid},
                            success:function(response){

                              if(response==true){
                                  document.querySelector('#btnCheckoutInvoice').style.visibility='visible';
                                  document.querySelector('#btnCustomPointSubmit').style.visibility='visible';
                                  
                              }
                              else{
                                  document.querySelector('#btnCheckoutInvoice').style.visibility='hidden';
                                   document.querySelector('#btnCustomPointSubmit').style.visibility='hidden';
                              }

                      }
                    });
                    //end check 


                    $('#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 wrap responsive" style="width:100%"><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>';
                    html +='<table id="prepaid-services-table" class="table table-responsive table-hover" ><thead><tr><th></th><th>服務編號</th><th>服務種類</th><th>服務項目</th><th>工數</th><th>售價</th><th>時間</th><th>購買次數</th><th>剩除次數</th><th style="width:10%">備註</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)+'" onclick="add()" '; 
                      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>';
                      html+=obj[i].remark;
                      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 wrap responsive" style="width:100%"><thead><tr><th></th><th>服務編號</th><th>服務種類</th><th>服務項目</th><th>工數</th><th>售價</th><th>時間</th><th>沒有積分回贈</th></tr></thead><tbody>';
                    html +='<table id="prepaid-services-table" class="table table-responsive table-hover" style="width:100%"><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)+'" onclick="add()" ';
                      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

         function user_pointajax($id){
              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/brcustomerpointend/getService',
                  '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/brcustomerpointend/getCustPoint';  
              //change select box option  
                 $.ajax({
                        type:'POST',
                        url:postUrl,
                        data:{'cust_id':id},
                    success:function(data){


                      var custpointsub = document.getElementById('custpoint-sub');
                      // alert(city);
                   $(custpointsub).empty(); 



                      // alert('empty');
                      // var obj = $.parseJSON(data);
                      var obj =data;
                      html='客戶積分 沒有積分';
                      if(obj!==null){
                          html='客戶積分 '+obj
                      }
                        
                        $(custpointsub).append(html);
                     


              }
            });

          }    
        //end added for used point 

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

        
        $("#btnCheckoutSubmit").click(function(event){
            // alert("btnCheckoutSubmit");
            // alert($("#checkoutBookingId").val());
            // alert($("input[name=bookingItems]").val());
            // var paymentInvoices = $("[name='bookingItems']").serializeArray();
            //  alert(paymentInvoices);
            //  alert($("[name='bookingItems']"));
            //  var businessHours = $("input[name^='bookingItems']").serializeArray();
            //  alert(businessHours);
            //  var businessHours = {}; //create an object (instead of an array)
            // $("input[name^=bookingItems]").each(function() {
            //     alert($(this).attr('value'));
            //     businessHours[$(this).attr('name')] = $(this).attr('value');
            // });

            // alert($("input[name=bookingItems[0][code_1]]").val());
            // var arr = $('input[name="pname[]"]').map(function () {
            //     return this.value; // $(this).val()
            // }).get();

            //working javascript
            // $('input[name^="bookingItems"]').each(function() {
            //   alert($(this).val());

            // });
            //end 

            //add cancel booking locking,
            //if booking is canceled, it cannot check out 


            var bookingItems = $('input[name^="bookingItems"]').serializeArray();
            var bookingItems2 = JSON.stringify(bookingItems); 
            // var bookingItems2 = JSON.stringify(bookingItems); 
            var bookingid =$("#checkoutBookingId").val();


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

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

                      if(data2==1){
                        alert("客人已經取消預約");
                      }
                      if(data2==0){


            //end added　content




            //check out form
            var postData ={
                            'id':bookingid,
                            'bookingItems':bookingItems2,
                  
                        }
                     var GlobalVariables ={
                      'csrfToken': '123',
                      'baseUrl':'<?php echo base_url();?>',
                      'destUrl':'<?php echo base_url();?>/api/v1/brbookingend/checkout',
                      'AJAX_SUCCESS' :'SUCCESS',
                      'AJAX_FAILURE' :'FAILURE'
                     };
                     var postUrl= GlobalVariables.baseUrl +'/api/v1/brbookingend/checkout';

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

            //end check out form
                  //if(data2==0){
                  }
                }
                  });

        });
        $("#btnCheckoutCloseSubmit").click(function(event){
            
            $('#checkoutModalCenter').modal('hide');
        });
        $("#btnCheckoutInvoice").click(function(event){
          var bookingid =$("#checkoutBookingId").val();
            setTimeout(function(){
            // OK, finished jQuery staff, let's go redirect
              window.location.href = "/at-cms/brinvoiceadmin/add/"+bookingid;
            },500);
        }); 


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

        //missed submit button
        $("#btnmissedSubmit").click(function(event) {
            // alert("1");
          var forcusitem="";
          var passCheck=true;
            //check delete have value
            // var checkboxvalue = $('.checkbox').val();   


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

            event.preventDefault();
            var postUrl= GlobalVariables.baseUrl +'/api/v1/brbookingend/missed';
            //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();
                    $( '#missedmsg' ).append('<p class="text-primary" id="feedback">'+data['msg']+'</p>');
                    setTimeout(function() {
                        location.reload();
                    }, 3000);
                    // location.reload();

                }
                  if(data['recordstatus']=="FAILURE"){
                    $('#feedback').remove();
                    $( '#missedmsg' ).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 missed submit button

        // cancel submit button
          
        $("#btncancelSubmit").click(function(event) {
            // alert("1");
          var forcusitem="";
          var passCheck=true;
            //check delete have value
            // var checkboxvalue = $('.checkbox').val();   


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

            event.preventDefault();
            var postUrl= GlobalVariables.baseUrl +'/api/v1/brbookingend/custcancelbooking';
            //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();
                    $( '#canceledmsg' ).append('<p class="text-primary" id="feedback">'+data['msg']+'</p>');
                    setTimeout(function() {
                        location.reload();
                    }, 3000);
                    // location.reload();

                }
                  if(data['recordstatus']=="FAILURE"){
                    $('#feedback').remove();
                    $( '#canceledmsg' ).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');
                  }
              }
            });  

        });  //$("#btncancelSubmit").click(function(event) {      
        //end cancel 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

                //upload image to server
                $(document).ready(function(){

                  // $('#submitUpload').click(function(){
                 

                  // });

                  });

                   function submitUpload(){

                  

                     var form_data = new FormData();
                     var bookingid =$("#checkoutBookingId").val();
                     // Read selected files
                     var totalfiles = document.getElementById('files').files.length;
                     for (var index = 0; index < totalfiles; index++) {
                        form_data.append("files[]", document.getElementById('files').files[index]);
                     }
                      form_data.append("bookingid",bookingid);
                      form_data.append("type",1);
                     var GlobalVariables ={
                      'csrfToken': '123',
                      'baseUrl':'<?php echo base_url();?>',
                      'destUrl':'<?php echo base_url();?>/api/v1/brbookingend/upload',
                      'AJAX_SUCCESS' :'SUCCESS',
                      'AJAX_FAILURE' :'FAILURE'
                     };
                     var postUrl= GlobalVariables.baseUrl +'/api/v1/brbookingend/upload';
                     // AJAX request
                     $.ajax({
                       url: postUrl, 
                       type: 'post',
                       data: form_data,
                       dataType: 'json',
                       contentType: false,
                       processData: false,
                       success: function (response) {

                         for(var index = 0; index < response.length; index++) {
                           var src = response[index]['path'];
                           var outputname = response[index]['name'];
                           var id = response[index]['id'];

                           // Add img element in <div id='preview'>
                           // $('#preview').append('<img src="../../'+src+'" width="200px;" height="200px">');
                           // $('#preview').append('<div><img style="border: 1px solid #333;" width="160" height="80" src="../../'+src+'"><a class="photo-name" style="" target="_blank" href="../../'+src+'">'+outputname+'</a><a class="photo-delete clickable" data-photobeforeid="'+id+'" data-fileid="'+id+'">刪除</a></div>');
                           $('#preview').append('<div><img style="border: 1px solid #333;" width="160" height="80" src="../../'+src+'"><a class="photo-name" style="" target="_blank" href="../../'+src+'">'+outputname+'</a><span style="cursor:pointer" data-photobeforeid="'+id+'" onclick="deletephoto('+id+',this)">刪除</span></div><br>');
                         }

                       }
                     });

                  }//function submitUpload(){
                //end upload image to server

                //for after treatment photo
                  function submitAfterUpload(){

                  

                     var form_data = new FormData();
                     var bookingid =$("#checkoutBookingId").val();
                     // Read selected files
                     var totalfiles = document.getElementById('afterfiles').files.length;
                     for (var index = 0; index < totalfiles; index++) {
                        form_data.append("files[]", document.getElementById('afterfiles').files[index]);
                     }
                      form_data.append("bookingid",bookingid);
                      form_data.append("type",2);
                     var GlobalVariables ={
                      'csrfToken': '123',
                      'baseUrl':'<?php echo base_url();?>',
                      'destUrl':'<?php echo base_url();?>/api/v1/brbookingend/upload',
                      'AJAX_SUCCESS' :'SUCCESS',
                      'AJAX_FAILURE' :'FAILURE'
                     };
                     var postUrl= GlobalVariables.baseUrl +'/api/v1/brbookingend/upload';
                     // AJAX request
                     $.ajax({
                       url: postUrl, 
                       type: 'post',
                       data: form_data,
                       dataType: 'json',
                       contentType: false,
                       processData: false,
                       success: function (response) {

                         for(var index = 0; index < response.length; index++) {
                           var src = response[index]['path'];
                           var outputname = response[index]['name'];
                           var id = response[index]['id'];

                           // Add img element in <div id='preview'>
                           // $('#preview').append('<img src="../../'+src+'" width="200px;" height="200px">');
                           // $('#preview').append('<div><img style="border: 1px solid #333;" width="160" height="80" src="../../'+src+'"><a class="photo-name" style="" target="_blank" href="../../'+src+'">'+outputname+'</a><a class="photo-delete clickable" data-photobeforeid="'+id+'" data-fileid="'+id+'">刪除</a></div>');
                           $('#previewAfter').append('<div><img style="border: 1px solid #333;" width="160" height="80" src="../../'+src+'"><a class="photo-name" style="" target="_blank" href="../../'+src+'">'+outputname+'</a><span style="cursor:pointer" data-photobeforeid="'+id+'" onclick="deletephoto('+id+',this)">刪除</span></div>');
                         }

                       }
                     });

                  }//function submitAfterUpload(){

                //end for after treatment photo

                //delete photo function
                  
                  function deletephoto($id,identifier){

                      // alert("deletephoto");
                      // alert(identifier);

                     var form_data = new FormData();
                     // var bookingid =$("#checkoutBookingId").val();
                     // // Read selected files
                     // var totalfiles = document.getElementById('files').files.length;
                     // for (var index = 0; index < totalfiles; index++) {
                     //    form_data.append("files[]", document.getElementById('files').files[index]);
                     // }
                      form_data.append("id",$id);
                      // form_data.append("type",1);
                     var GlobalVariables ={
                      'csrfToken': '123',
                      'baseUrl':'<?php echo base_url();?>',
                      'destUrl':'<?php echo base_url();?>/api/v1/brbookingend/deletephoto',
                      'AJAX_SUCCESS' :'SUCCESS',
                      'AJAX_FAILURE' :'FAILURE'
                     };
                     var postUrl= GlobalVariables.baseUrl +'/api/v1/brbookingend/deletephoto';
                     // AJAX request
                     $.ajax({
                       url: postUrl, 
                       type: 'post',
                       data: form_data,
                       dataType: 'json',
                       contentType: false,
                       processData: false,
                       success: function (response) {

                         if(response['recordstatus']=="SUCCESS"){
                          // alert("data-photobeforeid:"+$(identifier).data('photobeforeid'));

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

                      }
                      if(response['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');
                           }

                       }
                     });

                  }//function deletephoto(){

               
                //end delete photo function

                function resettime(){
                  
                  endtimePicker.wickedpicker('setTime', 0,$('#originalendtime').val());

                }

                 function add() {
        // var checked = '';
        // $(':checked').each(function() {
        //   checked += $(this).val() + ',';
        // });
        // console.log(checked);

          var t = $('#starttime').val();
          // alert(t);
                // convert to 24 hours format
          t = t.replace(':', ' ');
          var h = t.split(' ')[0];
          var m = t.split(' ')[1];


          var totalTime=0;



          var theAdd = new Date();

          // Set Hours, minutes, secons and miliseconds
          theAdd.setHours(h,m,00,000);

          $("input:checkbox[id=useservice]:checked").each(function(){
              // alert($(this).val());
               // useproductboxvalue.push( $(this).val() );
               //  $(this).data('price');
                // alert($(this).data('price'));
                totalTime=totalTime+$(this).data('price');
                // alert($("#endtime").val());
                // $("#endtime").val('16:00');
                // $('#endtime').datetimepicker("setDate", "16:00");

                // $("#endtime").wickedpicker({twentyFour: true, now: "17:35"});
                // $("#endtime").wickedpicker('twentyFour', true);
                // $("#endtime").wickedpicker('now', "18:00");
                //  $("#time1").wickedpicker(options2);
                // time1.wickedpicker('setTime',0,  h+':'+m)

                //  var options2 = {
                //   now:  '16:00',
                // };
                // // var time1 = $("#endtime").wickedpicker(options2);
                // // time1.wickedpicker('setTime',0,  '16:00');
                // // $('#endtime').wickedpicker({now: '16'+':'+'00'});
                //  alert ('click')
                // $("#endtime").wickedpicker('twentyFour', true);
                // $("#endtime").wickedpicker('now', "17:35");
                // alert('setted');

                // get time form time1
                // var t = ($('#starttime').wickedpicker('time'));
                // var t = $('#starttime').val();
                // alert(t);
                // // convert to 24 hours format
                // t = t.replace(' : ', ' ');
                // var h = t.split(' ')[0];
                // var m = t.split(' ')[1];
                // var ampm = t.split(' ')[2];
                // if (ampm == 'PM') {
                //   h = parseInt(h) + 12;
                // }
                // set time to time2
                // $('#endtime').wickedpicker({now: h+':'+m});
            });
            $("input:checkbox[id=useproduct]:checked").each(function(){
              totalTime=totalTime+$(this).data('price');
            });
            // alert("totaL");
            // alert(totalTime);

            theAdd.setMinutes(theAdd.getMinutes() + totalTime);

            // alert(theAdd.getHours() + ":" + theAdd.getMinutes());

             endMinutes = theAdd.getMinutes() < 10 ? '0' + theAdd.getMinutes() : theAdd.getMinutes();
             endHours = theAdd.getHours() < 10 ? '0' + theAdd.getHours() : theAdd.getHours();

             // alert(endHours + ":" + endMinutes);
             endtimePicker.wickedpicker('setTime', 0, endHours + ":" + endMinutes);

        }//function add() {

        //added custom point submit

        $(document).ready(function(){

                  $('#btnCustomPointSubmit').click(function(){
                    $( '#custPointmsg' ).empty();
                      customPointCheckout( $("#checkoutBookingId").val());
                      customCustomerPoint( $("#checkoutBookingId").val());
                       $('#submitPointModalCenter').modal('show');
                  });


                    $("#btnUsedPointSubmit").click(function(event){
            // alert("btnCheckoutSubmit");
            // alert($("#checkoutBookingId").val());
            // alert($("input[name=bookingItems]").val());
            // var paymentInvoices = $("[name='bookingItems']").serializeArray();
            //  alert(paymentInvoices);
            //  alert($("[name='bookingItems']"));
            //  var businessHours = $("input[name^='bookingItems']").serializeArray();
            //  alert(businessHours);
            //  var businessHours = {}; //create an object (instead of an array)
            // $("input[name^=bookingItems]").each(function() {
            //     alert($(this).attr('value'));
            //     businessHours[$(this).attr('name')] = $(this).attr('value');
            // });

            // alert($("input[name=bookingItems[0][code_1]]").val());
            // var arr = $('input[name="pname[]"]').map(function () {
            //     return this.value; // $(this).val()
            // }).get();

            //working javascript
            // $('input[name^="bookingItems"]').each(function() {
            //   alert($(this).val());

            // });
            //end 

            var custPointItems = $('input[name^="custpointbookingItems"]').serializeArray();
            var custPointItems2 = JSON.stringify(custPointItems); 
            // var bookingItems2 = JSON.stringify(bookingItems); 
            var bookingid =$("#checkoutBookingId").val();
            //check out form
            var postData ={
                            'id':bookingid,
                            'custPointItems':custPointItems2,
                  
                        }
                     var GlobalVariables ={
                      'csrfToken': '123',
                      'baseUrl':'<?php echo base_url();?>',
                      'destUrl':'<?php echo base_url();?>/api/v1/brbookingend/checkout',
                      'AJAX_SUCCESS' :'SUCCESS',
                      'AJAX_FAILURE' :'FAILURE'
                     };
                     var postUrl= GlobalVariables.baseUrl +'/api/v1/brcustomerusedpointend/checkout';

                        //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();
                        $( '#custPointmsg' ).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();
                        $( '#custPointmsg' ).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');
                      }
                  }
                  }); 

            //end check out form



        });
        $("#btnUsedPointCloseSubmit").click(function(event){
            
            $('#submitPointModalCenter').modal('hide');
        });

        //cancel submit checkout point


        //end custom point submit

        });
         function customPointCheckout($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 checkOutPointSub = document.getElementById('submitpoint-sub');
                  // alert(city);
                   $(checkOutPointSub).empty();     
   


                    //end empty lower select box

                      var postUrl= GlobalVariables.baseUrl +'/api/v1/brcustomerusedpointend/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 style="width: 100%;"><thead><tr style="height: 40px;background-color: #fde9cf; font-size: 17px;"><th style="width: 40%; font-weight: 500;">療程</th><th style="width: 30%; font-weight: 500;">使用積分</th><th style="width: 30%; font-weight: 500;">備註</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+='>';
                              // $(prepaidservicessub).append('<td>');
                              html+='<td style="width: 40%; text-align: left;" class="cursor">';
                              html+=obj[i].name;
                              if(obj[i].point!=null){
                              html+='<br>(積分: '+obj[i].point+')';
                              }
                              html+='<input type="hidden" name="custpointbookingItems['+i+'][bookingitemid]" value="';
                              html+=obj[i].id;
                              html+='">';
                              html+='</td>';

                              html+='<td style="width: 10%; text-align: left;"><input class="clickable" type="text" name="custpointbookingItems['+i+'][code_1]" style="padding: 0;line-height: initial;min-height: inherit;background: transparent;border: none;outline: none;width: 90%;border-bottom:1px solid;" value="';
                              if(obj[i].code_1!==null){
                                html+=obj[i].code_1;
                              }
                               html+='"></td>';


                              


                               html+='<td style="width: 40%; text-align: left;"><input class="clickable" type="text" name="custpointbookingItems['+i+'][code_remark]" style="padding: 0;line-height: initial;min-height: inherit;background: transparent;border: none;outline: none;width: 90%;border-bottom:1px solid;" value="';
                               if(obj[i].code_remark!==null){
                                html+=obj[i].code_remark;
                               }
                               html+='"></td>';
                               html+='</tr>';
                              }

                              
                             
                            // $(level2box).append('<option  value=' + obj[i].id + '>' + obj[i].chi_name + '</option>');
                            

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

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

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


                      }


                    });
        }

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

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

                                 //empty lower select box

                    var checkPointDataSub = document.getElementById('custpointdata-sub');
                  // alert(city);
                   $(checkPointDataSub).empty();     
   


                    //end empty lower select box

                      var postUrl= GlobalVariables.baseUrl +'/api/v1/brcustomerpointend/getCustomerTotalByBookingId';  
                      //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 checkPointDataSub = document.getElementById('custpointdata-sub');
                      // alert(city);
                   $(checkPointDataSub).empty(); 



                      // alert('empty');
                      // var obj = $.parseJSON(data);
                      var obj =data;
                      html='客戶積分 沒有積分';
                      if(obj!==null){
                          html='客戶積分 '+obj
                      }
                        
                        $(checkPointDataSub).append(html);
                     

                      }


                    });
        }
                    //end insert booking item info  
        //submit checkout point 
        


        

                </script>
</head>

<body>

    <!-- admin javascript -->
    
    


    <?php   include('include/header.php');?>
    <div class="wrapper" >
        
        <?php   include('include/sidebar.php');?>


         <!-- loading modal -->
         <style type="text/css">
               /* Start by setting display:none to make this hidden.
                 Then we position it in relation to the viewport window
                 with position:fixed. Width, height, top and left speak
                 for themselves. Background we set to 80% white with
                 our animation centered, and no-repeating */
              .modal3 {
                  display:    none;
                  position:   fixed;
                  z-index:    100000;
                  top:        0;
                  left:       0;
                  height:     100%;
                  width:      100%;
                  background: rgba( 255, 255, 255, .8 ) 
                              url('http://i.stack.imgur.com/FhHRx.gif') 
                              50% 50% 
                              no-repeat;
              }

              /* When the body has the loading class, we turn
                 the scrollbar off with overflow:hidden */
              body.loading2 .modal3 {
                  overflow: hidden;   
              }

              /* Anytime the body has the loading class, our
                 modal element will be visible */
              body.loading2 .modal3 {
                  display: block;
              } 


            </style>
            <!-- loading modal -->
            <div class="modal3" id="loading"><!-- Place at bottom of page --></div>

        <!-- end of loading modal -->

        <!-- submitpoint modal -->
          <div class="modal fade" id="submitPointModalCenter" tabindex="-1" role="dialog" aria-labelledby="checkoutModalCenterTitle" aria-hidden="true" style="z-index:2000;">
            <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:#957c78" class="text-center py-2"><i class="fas fa-plus mr-2" style="color:#957c78"></i>積分使用記錄</h5>
                    <h5><span id="custpointdata-sub"></span></h5>  
                     <div id="submitpoint-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>

                <div class="form-group row">
                        <div class="col-sm-12">

                        <span id="custPointmsg" 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 mt-2" id="btnUsedPointSubmit">儲存</button>
                        <button type="button" class="btn  px-5  custombutton mt-2" id="btnUsedPointCloseSubmit">關閉</button>
                        </div>
                    </div>

              </div>
            </div>
          </div>

        <!-- end submitpoint model -->


        <!-- 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:#957c78" class="text-center py-2"><i class="fas fa-plus mr-2" style="color:#957c78"></i>記錄</h5>
                     <!-- <form id="submitcheckout-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> -->


                     <div id="check-out-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 load content -->
                    <h5 style="color:#957c78" class="text-center py-2"><i class="fas fa-plus mr-2" style="color:#957c78"></i>上傳相片</h5>
                    <span style="width: 40%;font-size: 17px;display: inline-block;">療程前</span>
                    <!-- upload before image -->
                    <form method='post' id="myForm" action='' enctype="multipart/form-data">
                     <input type="file" id='files' name="files[]" multiple onchange="submitUpload()"><br>
                     <!-- <input type="button" id="submitUpload" value='Upload'> -->
                  </form>
                  <!-- Preview -->
                  <div id='preview'></div>


                  <!-- after photo -->
                    <span style="width: 40%;font-size: 17px;display: inline-block;">療程後</span>
                    <!-- upload before image -->
                    <form method='post' id="afterPhoto" action='' enctype="multipart/form-data">
                     <input type="file" id='afterfiles' name="files[]" multiple onchange="submitAfterUpload()"><br>
                     <!-- <input type="button" id="submitUpload" value='Upload'> -->
                  </form>
                  <div id='previewAfter'></div>
                  <!-- end after photo -->


                    <!-- end upload before image -->

   <!--                  <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 mt-2" id="btnCheckoutInvoice">發票</button>
                           <button type="button" class="btn  px-5  custombutton mt-2" id="btnCustomPointSubmit">使用積分</button>
                        <button type="button" class="btn  px-5  custombutton mt-2" id="btnCheckoutSubmit">儲存</button>
                        <button type="button" class="btn  px-5  custombutton mt-2" id="btnCheckoutCloseSubmit">關閉</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 -->

             <!-- cancel modal -->
            <script>
                
            </script>

            <div class="modal fade" id="cancelModalCenter" tabindex="-1" role="dialog" aria-labelledby="cancelModalCenterTitle" 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">
                      <div>
                          確定客人取消預約?
                      </div>
                       
                        
                        <span id="canceledmsg" class="text-center"></span>
                        <!-- <input type="hidden" class="form-control" id="missedReservationValue" placeholder=""> -->
                    </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="btncancelSubmit">確定</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 cancel modal -->


            <!-- missed modal -->
            <script>
                
            </script>

            <div class="modal fade" id="missedModalCenter" tabindex="-1" role="dialog" aria-labelledby="missedModalCenterTitle" 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">
                      <div id="missedLabel">
                      </div>
                       
                        
                        <span id="missedmsg" class="text-center"></span>
                        <input type="hidden" class="form-control" id="missedReservationValue" placeholder="">
                    </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="btnmissedSubmit">確定</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 missed 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:#957c78" class="text-left py-2"><i class="fas fa-plus mr-2" style="color:#957c78"></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 );
               
                     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
   timeSeparator: ':', 
  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,
  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
  show: null, //A function to be called when the Wickedpicker is shown
  clearable: false, //Make the picker's input clearable (has clickable "x")
}; 
                    var starttimePicker = $('#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" />
                  <input id="originalendtime" type="hidden" />
                  <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 );

                       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
   timeSeparator: ':', 
  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,
  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
  show: null, //A function to be called when the Wickedpicker is shown
  clearable: false, //Make the picker's input clearable (has clickable "x")
}; 
                      var endtimePicker=$('#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 -->
            <br>
            <h5><span id="custpoint-sub">
            </span></h5>
            <br>       
                  <!-- prepaid service -->
                     <h5 style="color:#957c78;">預約已購買的服務</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 class="mt-5" style="color:#957c78;">預約新服務</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">
             <?php
              if($this->session->userdata('brbooking_delete')==true){
            ?>
                        <button type="button" class="btn  px-5  custombutton mt-2" id="btnDelete">删除</button>

            <?php
                }//if($this->session->userdata('brbooking_delete')==true){
            ?>
            <?php

                if($this->session->userdata('brbooking_edit')==true){

               ?>
                        <button type="button" class="btn  px-5  custombutton mt-2" id="btnUpdate">確定</button>
            <?php 
                }//if($this->session->userdata('brbooking_edit')==true){

             ?>
                        <button type="button" class="btn  px-5  custombutton mt-2" 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: #ffffff;">
            <div class="title">預約-列表</div>
            <?php 

               //for manager can see other shop but cannot edit
                        $extraPasscheck=false;
                        if($this->session->userdata('shopid')==$currentshop){
                          $extraPasscheck=true;
                        }
                        if($this->session->userdata('shopid')!=$currentshop && ($this->session->userdata('roleId')==6 || $this->session->userdata('roleId')==7 )){
                          $extraPasscheck=true;
                        }
                //end for manager can see other shop but cannot edit


            ?>
            <!-- add button -->
            <div style="" class="menubar2 p-2">
            <?php
              if($this->session->userdata('brbooking_add')==true && $extraPasscheck==true){
            ?>
              <a href="/at-cms/brbookinglist/add">
              <i class="fas fa-plus" style=" display: inline-block;
          /*          border-radius: 10px;
                    box-shadow: 0px 0px 2px #888;*/
                    color: #957c78;
                    padding: 2px 2px;"></i>  
              新增</a>
              <?php
                }// if($this->session->userdata('brbooking_add')==true){
               ?>
            </div>
            <!-- end add button -->
             <!-- <button type="button" class="btn  px-5  custombutton" id="btnChange">btnChange確定</button> -->
            <!-- test datatable -->
               <style type="text/css">
                   /*
                table#book-table.dataTable tbody tr:hover {
                    background-color: #fbeae6;
                  }
                table#book-table.dataTable tbody tr {
                    background-color: #fbeae6;
                  }
    957c78  
    b6a5a2          */
                  table#book-table.dataTable tbody tr:hover{
                    background-color: <?php echo DATATABLE_HOVER;?>;
                  }
                  table#book-table.dataTable tbody tr.odd {
                    background-color: <?php echo DATATABLE_ODD;?>;
                  }
                  table#book-table.dataTable tbody tr.odd:hover {
                    background-color: <?php echo DATATABLE_HOVER;?>;
                  }
   
/*  table#book-table.dataTable tbody tr:hover > .sorting_1 {
    background-color: <?php echo DATATABLE_ODD;?>;
  }*/
             table#book-table.dataTable tbody tr:hover > .sorting_1 {
    background-color: <?php echo DATATABLE_HOVER;?>;
  }      


  table#book-table.dataTable tbody tr.odd > .sorting_1 {
    background-color: <?php echo DATATABLE_ODD;?>;
  }      
   table#book-table.dataTable tbody tr.even > .sorting_1 {
    background-color: <?php echo DATATABLE_EVEN;?>;
  }   

  table#book-table.dataTable tbody tr.even:hover > .sorting_1 {
    background-color: <?php echo DATATABLE_HOVER;?>;
  }    

  table#book-table.dataTable tbody tr.odd:hover > .sorting_1 {
    background-color: <?php echo DATATABLE_HOVER;?>;
  }       

table.dataTable thead th {
    position: relative;
    background-image: none !important;
}

  a, a:hover, a:focus{
    text-decoration: none!important;
    color: #000000;
  }

  
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
    position: absolute !important;
    top: 12px !important;
    right: 8px !important;
    display: block !important;
    font-family: FontAwesome !important;
}
table.dataTable thead th.sorting:after {
    content: "\f0dc" !important;
    color: #ddd !important;
    font-size: 0.8em !important;
    padding-top: 0.12em !important;
}
table.dataTable thead th.sorting_asc:after {
    content: "\f0de" !important;
    color: #e97358 !important;
}
table.dataTable thead th.sorting_desc:after {
    content: "\f0dd" !important;
    color: #e97358 !important;
}    
table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before {
  background-color: #4dac47;

}
/*  table#book-table.dataTable.order-column.stripe tbody tr.odd>.sorting_1{
    background-color: #fbeae6;
  }      


table.dataTable td.sorting_1{ background-color: white; border:1px lightgrey; }
    table.dataTable td{ background-color: white;  border:1px lightgrey;}
    table.dataTable tr.odd { background-color: white;  border:1px lightgrey;}
    table.dataTable tr.even{ background-color: white; border:1px lightgrey; }*/

            </style>
             <style type="text/css">

  
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
    position: absolute !important;
    top: 12px !important;
    right: 8px !important;
    display: block !important;
    font-family: FontAwesome !important;
}
table.dataTable thead th.sorting:after {
    content: "\f0dc" !important;
    color: #ddd !important;
    font-size: 0.8em !important;
    padding-top: 0.12em !important;
}
table.dataTable thead th.sorting_asc:after {
    content: "\f0de" !important;
    color: #e97358 !important;
}
table.dataTable thead th.sorting_desc:after {
    content: "\f0dd" !important;
    color: #e97358 !important;
}    
table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before {
  background-color: #4dac47;

}
            </style>
            <table id="book-table" class="display responsive nowrap table table-bordered table-striped table-hover  " style="width:100%">
         
            <!-- <table id="book-table" class="display responsive nowrap"  width="100%"> -->
            <thead>
            <tr><td style="border-bottom: 1px solid #dbd0ce;width: 20px;"><span class="tabletextcolor">ID</span></td><td style="border-bottom: 1px solid #dbd0ce;width: 150px;"><span class="tabletextcolor">預約日期</span></td><td style="border-bottom: 1px solid #dbd0ce;"><span class="tabletextcolor">客戶名稱</span></td><td style="border-bottom: 1px solid #dbd0ce;"><span class="tabletextcolor">美容<br>師1</span></td><td style="border-bottom: 1px solid #dbd0ce;"><span class="tabletextcolor">美容<br>師2</span></td><td style="border-bottom: 1px solid #dbd0ce;"><span class="tabletextcolor">房間</span></td><td style="border-bottom: 1px solid #dbd0ce;width:5%;"><span class="tabletextcolor">服務內容</span></td><td style="border-bottom: 1px solid #dbd0ce;"><span class="tabletextcolor">創建日期</span></td>
              <td style="border-bottom: 1px solid #dbd0ce;text-align: center;"><span class="tabletextcolor">失<br>約</span></td><td style="border-bottom: 1px solid #dbd0ce;text-align: center;"><span class="tabletextcolor">客<br>人<br>取<br>消</span></td><td style="border-bottom: 1px solid #dbd0ce;text-align: center;"><span class="tabletextcolor">確<br>定</span></td><td style="border-bottom: 1px solid #dbd0ce;"><span class="tabletextcolor">報<br>到</span></td><td style="border-bottom: 1px solid #dbd0ce;"><span class="tabletextcolor">報<br>走</span></td><td style="border-bottom: 1px solid #dbd0ce;"><span class="tabletextcolor">出單</span></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');

                      $bookingdatetime = $bookingrow['starttime']->format('Y-m-d H:i:s');
                      $new_date = date("Y-m-d", strtotime($bookingdatetime));
                      echo $new_date;
                      $start_time = date("H:i", strtotime($bookingdatetime));
                      echo "<br>";
                      echo $start_time;
                    ?>
                    <?php echo ' - ';?>
                    <?php 
                    // echo $bookingrow['endtime']->format('Y-m-d H:i:s');
                      $bookingendtime = $bookingrow['endtime']->format('Y-m-d H:i:s');
                       $end_time = date("H:i", strtotime($bookingendtime));
                      echo $end_time;  
                    ?>

                   
                </td>
                <td>
                    <?php 
                    // var_dump($bookingrow['customersrow']);
                    $showname="";
                    if(!empty($bookingrow['customersrow']->display_name)){
                      $showname=$bookingrow['customersrow']->display_name;
                    }
                    elseif(!empty($bookingrow['customersrow']->chi_name)){
                      $showname=$bookingrow['customersrow']->chi_name;
                    }

                    echo $showname."<br>(".$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 style="text-align:center;">
                     <?php 
                     if($bookingrow['missedReservation']==0){
                      // echo '<i class="fas fa-times"></i>';
                      echo '<b>✕</b>';
                     }
                     ?>

                     <?php
                      if($bookingrow['missedReservation']==1){
                      // echo '<i class="fas fa-check"></i>';
                      echo '<b>✓</b>';
                     }
                     ?>
                     
                </td>
                 <td style="text-align:center;">
                     <?php 
                     if($bookingrow['isCancel']==0){
                      // echo '<i class="fas fa-times"></i>';
                      echo '<b>✕</b>';
                     }
                     ?>

                     <?php
                      if($bookingrow['isCancel']==1){
                      // echo '<i class="fas fa-check"></i>';
                      echo '<b>✓</b>';
                     }
                     ?>
                     
                </td>
                <td style="text-align:center;">
                     <?php 
                     if($bookingrow['isConfirm']==0){
                      // echo '<i class="fas fa-times"></i>';
                      echo '<b>✕</b>';
                     }
                     ?>

                     <?php
                      if($bookingrow['isConfirm']==1){
                      // echo '<i class="fas fa-check"></i>';
                      echo '<b>✓</b>';
                     }
                     ?>
                     
                </td>
                <td  style="text-align:center;">
                     <?php 
                     if($bookingrow['isArrive']==0){
                      //echo '<i class="fas fa-times"></i>';
                       echo '<b>✕</b>';
                     }
                     ?>

                     <?php
                      if($bookingrow['isArrive']==1){
                      //echo '<i class="fas fa-check"></i>';
                      echo '<b>✓</b>';
                     }
                     ?>
                     
                </td>
                <td  style="text-align:center;">
                     <?php 
                     // if(empty($bookingrow['out_time'])){

                      if($bookingrow['isReturn']==0){
                       //echo '<i class="fas fa-times"></i>';
                       echo '<b>✕</b>';
                      }
                     // }
                     ?>

                     <?php
                      // if(!empty($bookingrow['out_time'])){
                     if($bookingrow['isReturn']==1){
                      //echo '<i class="fas fa-check"></i>';
                      echo '<b>✓</b>';
                     }
                     ?>
                     
                </td>
                <td>
                <?php
                  if($this->session->userdata('brbooking_access')==true || $this->session->userdata('brbooking_edit')==true || $this->session->userdata('brbooking_delete')==true){
                ?>
                    <a
                      href="#" onclick="showbrbookingdetail(<?php echo $bookingrow['id'];?>);"
                      >詳情</a>
                 <?php
                  }//if($this->session->userdata('brbooking_access')==true){
                ?>      


                     <br>
                <?php
                  // if($this->session->userdata('brbooking_edit')==true && $extraPasscheck==true){
                  if($this->session->userdata('brbooking_access')==true && $extraPasscheck==true){
                ?>
                    <?php
                      //if($bookingrow['missedReservation']==0){
                    ?>
                      <a
                      href="#" onclick="brbookingmissed(<?php echo $bookingrow['id'];?>);"
                      title="失約"
                      >失約</a>
                    <?php
                     // }//if($bookingrow['missedReservation']==0){  
                    ?>
                <?php
                  }//if($this->session->userdata('brbooking_edit')==true){
                ?>
                 <br>
                <?php
                  // if($this->session->userdata('brbooking_edit')==true && $extraPasscheck==true){
                  if($this->session->userdata('brbooking_access')==true && $extraPasscheck==true){
                ?>
                    <?php
                      //if($bookingrow['missedReservation']==0){
                    ?>
                      <a
                      href="#" onclick="cancelbooking(<?php echo $bookingrow['id'];?>);" 
                      title="客人取消"
                      >取消</a>
                    <?php
                     // }//if($bookingrow['missedReservation']==0){  
                    ?>
                <?php
                  }//if($this->session->userdata('brbooking_edit')==true){
                ?>
                      <br>
                <?php
                  // if($this->session->userdata('brbooking_edit')==true && $extraPasscheck==true){
                  if($this->session->userdata('brbooking_access')==true && $extraPasscheck==true){
                ?>
                    <?php
                      if($bookingrow['isArrive']==0){
                    ?>
                      <a
                      href="#" onclick="brbookingarrive(<?php echo $bookingrow['id'];?>);"
                      >報到</a>
                    <?php
                      }//if($bookingrow['isArrive']==0){  
                    ?>
                <?php
                  }//if($this->session->userdata('brbooking_edit')==true){
                ?>
                    <br>
                  <?php
                  // if($this->session->userdata('brbooking_edit')==true && $extraPasscheck==true){
                  if($this->session->userdata('brbooking_access')==true && $extraPasscheck==true){
                ?>
                    <?php
                      // if($bookingrow['isReturn']==0){
                    ?>
                      <a
                      href="#" onclick="brbookingcheckout(<?php echo $bookingrow['id'];?>);"
                      >報走</a>
                    <?php
                      // }//if($bookingrow['isArrive']==0){  
                    ?>
                   <?php
                  }//if($this->session->userdata('brbooking_edit')==true){
                ?>
                </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( {
        "autoWidth":true,
        "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>