<!DOCTYPE html>
<html>

<head>

<?php   include('include/common.php');?>  
 <script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>
    <link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
      
 



<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script> -->

<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css"> -->

<!-- Latest compiled and minified JavaScript -->
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script> -->

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/i18n/defaults-*.min.js"></script> -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/@dashboardcode/bsmultiselect@0.5.58/dist/js/BsMultiSelect.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@dashboardcode/bsmultiselect@0.5.58/dist/js/BsMultiSelect.esm.min.js"></script>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@dashboardcode/bsmultiselect@0.5.58/dist/css/BsMultiSelect.min.css">

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

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

</head>

<body>

    <!-- admin javascript -->
     <script type="text/javascript">
      $( document ).ready(function() {




        //add control
        $("#btnSubmit").click(function(event) {
          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($('#user_id').val().length !== 0){
            $("#user_id").addClass(" is-valid ");
            $("#user_id").removeClass(" is-invalid ");
          }
          else{
            if(forcusitem.length===0){
               forcusitem="#user_id";
            }
            passCheck=false;
            $("#user_id").addClass(" is-invalid ");
           $("#user_id").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_marked').val().length !== 0){
            $("#pic_marked").addClass(" is-valid ");
            $("#pic_marked").removeClass(" is-invalid ");
          }
          else{
            if(forcusitem.length===0){
               forcusitem="#pic_marked";
            }
            passCheck=false;
            $("#pic_marked").addClass(" is-invalid ");
           $("#pic_marked").removeClass(" is-valid ");
          }
          

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

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

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

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

          

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

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

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


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

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

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


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

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




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

            // }
            var postData ={
                'startdate':$('#startdate').val(),
                'starttime':$('#starttime').val(),
                'endtime':$('#endtime').val(),
                // 'inputadminname':$('#inputadminname').val(),
                'user_id':$('#user_id').val(),
                'room_id':$('#room_id').val(),
                'pic_marked':$('#pic_marked').val(),
                'pic_1':$('#pic_1').val(),
                'pic_2':$('#pic_2').val(),
                'remark':$('#remark').val(),
                // '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){
        });//$("#btnSubmit").click(function(event) {

        //end add control


         $( ".level1select" ).change(function() {
          // alert( "Handler for .change() called." );
          level1boxajax($(this).attr("id"),$(this).val());
        });
          
          $( ".level2select" ).change(function() {
          // alert( "Handler for .change() called." );
          level2boxajax($(this).attr("id"),$(this).val());
        });

          $( ".level3select" ).change(function() {
          // alert( "Handler for .change() called." );
          $('#address').val($("#area1 option:selected").text()+$(this).val());
        });
        

          $( ".user_idselect" ).change(function() {
          // alert( "Handler for .change() called." );
          // user_idajax($(this).attr("id"),$(this).val());
          user_idajax($(this).val());
          service_ajax();
        });


        });// $( document ).ready(function() {


          function user_idajax($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/customerserviceend/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/customerserviceend/getService';  
              //change select box option  
                 $.ajax({
                        type:'POST',
                        url:postUrl,
                        data:{'cust_id':id},
                    success:function(data){
                      // alert('empty');
                      // var obj = $.parseJSON(data);
                      var obj =data;
                      // alert('empty2');
                    // var v = data.k; 

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

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

                  // $(level2box).append('<option  value=' + '>--- 請選擇居住範圍---'  + '</option>');
                  
                  //end added empty select record    
                  // '<table id="prepaid-services-table" class="display table table1 dataTable no-footer"><thead><tr><th></th><th>服務編號</th><th>服務種類</th><th>服務項目</th><th>工數</th><th>售價</th><th>購買次數</th><th>剩除次數</th><th>沒有積分回贈</th></tr></thead><tbody><tr data-id="7" data-available_qty="10"><td><input class="checkbox-check" type="checkbox" style="position: relative;left: 20px;top: 8px;opacity: 1;"></td><td>T-001</td><td>T - 療程</td><td>皮秒二代(全臉)</td><td>1</td><td>$1,980.00</td><td>10</td><td>10</td><td></td></tr></tbody></table>'
                  if(obj.length==0){
                    var html="沒有任何記錄";
                    $(prepaidservicessub).append(html);
                  }
                  if(obj.length!=0){
                    var html='';
                    html +='<table id="prepaid-services-table" class="display table table1 dataTable no-footer"><thead><tr><th></th><th>服務編號</th><th>服務種類</th><th>服務項目</th><th>工數</th><th>售價</th><th>購買次數</th><th>剩除次數</th><th>沒有積分回贈</th></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 type="checkbox" name="useservice[]" name="useservice[]" value="'+obj[i].id+'">';
                      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>';
                      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(){
              // 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/servicesend/getAllServices',
                  '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/servicesend/getAllServices';  
              //change select box option  
                 $.ajax({
                        type:'POST',
                        url:postUrl,
                        data:'',
                    success:function(data){
                      // alert('empty');
                      // var obj = $.parseJSON(data);
                      var obj =data;
                      // alert('empty2');
                    // var v = data.k; 

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

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

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

              //empty lower select box

               var level2box = document.getElementById('level2');
                  // alert(city);
                   $(level2box).empty();     
   

              //end empty lower select box

              var postUrl= GlobalVariables.baseUrl +'/api/v1/livingareaend/getSecondZone';  
              //change select box option  
                 $.ajax({
                        type:'POST',
                        url:postUrl,
                        data:{'zone_id':selectedid},
                    success:function(data){
                      // alert('empty');
                      var obj = $.parseJSON(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  
                  $(level2box).append('<option  value=' + '>--- 請選擇居住範圍---'  + '</option>');
                  
                  //end added empty select record    
                  

                  for (var i = 0; i < obj.length; i++) {

                  $(level2box).append('<option  value=' + obj[i].id + '>' + obj[i].chi_name + '</option>');
                  }
                  // alert(data);
                  // level3boxajax(fileid+'-'+items+'-Level3', obj[0].id);   
                  // alert('level3'+data);
              }
            });

          }
        //end level1boxajax

        //level2ajax
        function level2boxajax($id,$value){
              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/livingareaend/getThirdZone',
                  'AJAX_SUCCESS' :'SUCCESS',
                  'AJAX_FAILURE' :'FAILURE'
            };

              //empty lower select box

               var level3box = document.getElementById('level3');
                  // alert(city);
                   $(level3box).empty();     
   

              //end empty lower select box

              var postUrl= GlobalVariables.baseUrl +'/api/v1/livingareaend/getThirdZone';  
              //change select box option  
                 $.ajax({
                        type:'POST',
                        url:postUrl,
                        data:{'zone_id':selectedid},
                    success:function(data){
                      // alert('empty');
                      var obj = $.parseJSON(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 level3box = document.getElementById('level3');
                  // alert(city);
                   $(level3box).empty();
                  //  $jsondata=json_decode($data);
                  // alert( obj.length);
                  // alert( obj[0]['name']);

                   //added empty select record  
                  $(level3box).append('<option  value=' + '>--- 請選擇居住範圍---'  + '</option>');
                  
                  //end added empty select record    
                  

                  for (var i = 0; i < obj.length; i++) {

                  $(level3box).append('<option  value=' + obj[i] + '>' + obj[i] + '</option>');
                  }
                  // alert(data);
                  // level3boxajax(fileid+'-'+items+'-Level3', obj[0].id);   
                  // alert('level3'+data);
              }
            });

          }

        //end level2ajax



        //time reset function
        function resettime(){


          // 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")
          //           };
                     
          //           $('#timepicker').wickedpicker(options );
          // alert("reset time");
                        // $('#timepicker1').wickedpicker({ now: "12:35" });  
          // var timepicker = document.getElementById('timepicker');
          // var timepicker2 = document.getElementById('timepicker2');
          // timepicker.val("<?php  
          //             date_default_timezone_set('Asia/Hong_Kong');
          //             // date_default_timezone_set("Asia/Hongkong"); 
          //             // ini_set('date.timezone','Asia/Hongkong');
          //             echo date('H');
          // ?>:00");
          //  timepicker2.val("<?php  
          //             date_default_timezone_set('Asia/Hong_Kong');
          //             // date_default_timezone_set("Asia/Hongkong"); 
          //             // ini_set('date.timezone','Asia/Hongkong');
          //             echo date('H');
          // ?>:00");
        }

        //end time reset function


        //check in
         function check_in($id,$user_id){
              // 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 postData ={
                    'id':$id,
                    'user_id':$user_id
                    // '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/bookinglistend/checkin',
                  '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/bookinglistend/checkin';  
              //change select box option  
                 $.ajax({
                        type:'POST',
                        url:postUrl,
                        data:postData,
                    success:function(data){
                      alert('報到成功');
                      // 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>'
                  


              }
            });

          }
        
        // end check in

        // check out
         function check_out($id,$user_id){
              // 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 postData ={
                    'id':$id,
                    'user_id':$user_id
                    // '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/bookinglistend/checkout',
                  '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/bookinglistend/checkout';  
              //change select box option  
                 $.ajax({
                        type:'POST',
                        url:postUrl,
                        data:postData,
                    success:function(data){
                      alert('報走成功');
                      // 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>'
                  


              }
            });

          }
        
        
        //end check out

        //show edit modal

    function SomeDeleteRowFunction(o) {
     //no clue what to put here?
     var p=o.parentNode.parentNode;
         p.parentNode.removeChild(p);
    }


         function showpaymentmodal($id) {

            
            var GlobalVariables ={
                    'csrfToken': '123',
                    'baseUrl':'<?php echo base_url();?>',
                    // 'destUrl':'http://bora5.at/api/v1/folderend/getadmindata',
                    'AJAX_SUCCESS' :'SUCCESS',
                    'AJAX_FAILURE' :'FAILURE'
                };

            event.preventDefault();         
            var postUrl= GlobalVariables.baseUrl +'api/v1/bookinglistend/listbooking';    

             var postData ={
                'id':$id,
                // 'starttime':$('#starttime').val(),
                // 'endtime':$('#endtime').val(),
                // // 'inputadminname':$('#inputadminname').val(),
                // 'user_id':$('#user_id').val(),
                // 'room_id':$('#room_id').val(),
                // 'pic_marked':$('#pic_marked').val(),
                // 'pic_1':$('#pic_1').val(),
                // 'pic_2':$('#pic_2').val(),
                // 'remark':$('#remark').val(),
                // '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

            }


            $.ajax(
            {            
                type : 'POST',            
                url  : postUrl, //Here you will fetch records     
                dataType: "json", 
                data    : postData, //Pass $user_id            
                success : function(result) 
                          { 


                            //add json content

                            // var json = $.parseJSON(result);
                            var json = JSON.parse(JSON.stringify(result));
                            var wrapper = $(".container1");
                            for (var i=0;i<json.length;++i) {
                            $(wrapper).append('<div><input type="text" name="mytext[]" value="'+result[i].name+'"/><a href="#" class="delete">Delete</a>1</div>');
                            }//for (var i=0;i<json.length;++i) {

                            var table = document.getElementById("container2");
                            var rowCount = table.rows.length;
                            // var row = table.insertRow(rowCount); 
                            var row; 
                            var cell1;
                            var cell2;
                            var cell3;
                            var cell4;
                            var cell5;
                            var cell6;
                            var element2;
                            var element3;
                            var element4;
                            var element5;
                        

                            for (var i=0;i<json.length;++i) {  
                            
                            row = table.insertRow(1);
                            cell1 = row.insertCell(0);
                            cell2 = row.insertCell(1);
                            cell3 = row.insertCell(2);
                            cell4 = row.insertCell(3);
                            cell5 = row.insertCell(4);
                            cell6 = row.insertCell(5);
                            cell1.innerHTML = result[i].name;

                            // cell2.innerHTML = '<INPUT type="text" id="qty1" name="qty[]"/>';  
                            element2 = document.createElement("input");
                            element2.type = "text";
                            element2.name = "qty[]";
                            element2.id = "qty"+rowCount;
                            element2.onkeyup=function() {calc(rowCount-1);}
                            cell2.appendChild(element2);

                            // cell3.innerHTML = '<INPUT type="text" id="cost1" name="cost[]"/>';
                            element3 = document.createElement("input");
                            element3.type = "text";
                            element3.name = "cost[]";
                            element3.id = "cost"+rowCount;
                            element3.onkeyup=function() {calc(rowCount-1);}
                            cell3.appendChild(element3);


                            // cell4.innerHTML = '<INPUT type="text" id="discount1" name="discount[]"/>';
                            element4 = document.createElement("input");
                            element4.type = "text";
                            element4.name = "discount[]";
                            element4.id = "discount"+rowCount;
                            element4.onkeyup=function() {calc(rowCount-1);}
                            cell4.appendChild(element4);


                            // cell5.innerHTML = '<INPUT type="text" id="price1"   name="price[]"/>';
                            element5 = document.createElement("input");
                            element5.type = "text";
                            element5.name = "price[]";
                            element5.id = "price"+rowCount;
                            element5.onkeyup=function() {calc(rowCount-1);}
                            cell5.appendChild(element5);


                            cell6.innerHTML ='<input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)">';
                              rowCount=rowCount+1;
                             }//for (var i=0;i<json.length;++i) {
                            //end add json content

                            // alert("1");
                            $("#inputfoldernameedit").val(result.booking_status);
                        // $("#inputfullnameedit").val(result[0].fullName);
                        // $("#inputteledit").val(result[0].tel);
                        //     // $("#inputadminnameedit").val(result[0].fullName);
                        //     $("#inputloginnameedit").val(result[0].login);
                            $("#inputadminid").val($id);
                          
                            $('#paymentModalCenter').modal({
                                show: true,
                            }); 


                            // $("#inputadminnameedit").val('123');
    //            alert('success'+result); 
    //                         alert(result[0]);
    //                         var obj = jQuery.parseJSON( '{ "name": "John" }' );
    // alert( obj.name );
    //                         var json = $.parseJSON(result);
    //                         //now json variable contains data in json format
    //                         //let's display a few items
    //                         for (var i=0;i<json.length;++i)
    //                         {
    //                             alert(json[0]);
    //                         }
                            // $('.fetched_user').html(result); //Show fetched data from database
                        },
                error   : function(result) 
                        { 
                            alert('error'+result); 
                        }
            });     
           
        }
       
        //end show edit modal

      </script>
    


    <?php   include('include/header.php');?>
    <div class="wrapper" >
        
        <?php   include('include/sidebar.php');?>
        <!-- payment modal center -->
        <div class="modal fade" id="paymentModalCenter" tabindex="-1" role="dialog" aria-labelledby="editModalCenterTitle" aria-hidden="true">
            <!-- for dynamic form content -->
            <script type="text/javascript">
               $(document).ready(function() {
                  var max_fields = 10;
                  var wrapper = $(".container2");
                  var add_button = $(".add_form_field");

                  var x = 1;
                  $(add_button).click(function(e) {
                      e.preventDefault();
                      if (x < max_fields) {
                          x++;
                          $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="delete">Delete</a></div>'); //add input box
                      } else {
                          alert('You Reached the limits')
                      }
                  });

                  $(wrapper).on("click", ".delete", function(e) {
                      e.preventDefault();
                      $(this).parent('div').remove();
                      x--;
                  })
              }); 


               //invoice calculator
               function calc(idx) {
                // alert(idx+":"+price);  
                // var price = parseFloat(document.getElementById("cost"+idx).value)* parseFloat(document.getElementById("qty"+idx).value);
                var discount;
                
                if (document.getElementById("discount"+idx).value == "") {
                  // it is empty
                  discount=1;
                }
                else{
                   if(document.getElementById("discount"+idx).value<=100){
                    //max discount
                      discount=document.getElementById("discount"+idx).value/100;
                   }
                   else{
                     //larger than 100
                     discount=100;
                   }
                   
                }
                // alert(discount);

                var price = parseFloat(document.getElementById("cost"+idx).value)* parseFloat(document.getElementById("qty"+idx).value)*discount;
                 
                document.getElementById("price"+idx).value= isNaN(price)?"0.00":price.toFixed(2);
                //added calculate total
                 totalIt();
                //end added calculate total
              }

              function totalIt() {
                var qtys = document.getElementsByName("qty[]");
                var total=0;
                for (var i=1;i<=qtys.length;i++) {
                  // calc(i);  
                  var price = parseFloat(document.getElementById("price"+i).value);
                  total += isNaN(price)?0:price;
                }
                document.getElementById("total").value=isNaN(total)?"0.00":total.toFixed(2);                        
              }      

              // window.onload=function() {
              //   document.getElementsByName("qty[]")[0].onkeyup=function() {calc(1)};
              //   document.getElementsByName("cost[]")[0].onkeyup=function() {calc(1)};
              // }

              var rowCount =0;
                  function addRow(tableID) {

                      var table = document.getElementById(tableID);

                      var rowCount = table.rows.length;
                      var row = table.insertRow(rowCount);

                      var cell1 = row.insertCell(0);
                      var element1 = document.createElement("input");
                      element1.type = "checkbox";
                      element1.name = "chk[]";
                      cell1.appendChild(element1);

                      var cell2 = row.insertCell(1);
                      cell2.innerHTML = rowCount;

                      var cell3 = row.insertCell(2);
                      var element3 = document.createElement("input");
                      element3.type = "text";
                      element3.name = "item[]";
                      element3.required = "required";
                      cell3.appendChild(element3);

                      var cell4 = row.insertCell(3);
                      var element4 = document.createElement("input");
                      element4.type = "text";
                      element4.name = "qty[]";
                      element4.id = "qty"+rowCount;
                      element4.onkeyup=function() {calc(rowCount);}
                      cell4.appendChild(element4);

                      var cell5 = row.insertCell(4);
                      var element5 = document.createElement("input");
                      element5.type = "text";
                      element5.name = "cost[]";
                      element5.id = "cost"+rowCount;
                      element5.onkeyup=function() {calc(rowCount);}
                      cell5.appendChild(element5);

                      var cell6 = row.insertCell(5);
                      var element6 = document.createElement("input");
                      element6.type = "text";
                      element6.name = "price[]";
                      element6.id = "price"+rowCount
                      cell6.appendChild(element6);



                  }

                  function deleteRow(tableID) {
                      try {
                      var table = document.getElementById(tableID);
                      var rowCount = table.rows.length;

                      for(var i=0; i<rowCount; i++) {
                          var row = table.rows[i];
                          var chkbox = row.cells[0].childNodes[0];
                          if(null != chkbox && true == chkbox.checked) {
                              table.deleteRow(i);
                              rowCount--;
                              i--;
                          }


                      }
                      }catch(e) {
                          alert(e);
                      }
                  }


               //end invoice calculator


            </script>

            <!-- end for dynamic form content -->
            <div class="modal-dialog modal-dialog-centered  " role="document" style="max-width: 800px;">
                <div class="modal-content px-3">
                <!-- <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div> -->
                <div class="modal-body ">
                     <h5 style="color:#7d4495" class="text-center py-2">銷售</h5>
                     <form>

                     <table id="container2">
                      <tr>
                        <td style="width: 40%;text-align: left;">
                          項目
                        </td>
                        <td style="width: 14%;text-align: left;">
                          收費($)
                        </td>
                        <td style="width: 14%;text-align: left;">
                          數量
                        </td>
                        <td style="width: 14%;text-align: left;">
                          折扣(%)
                        </td>
                        <td style="width: 14%;text-align: left;">
                          實價($)
                        </td>
                         <td style="width: 4%;text-align: left;">
                        
                        </td>
                      </tr>
                     </table> 
                     total: <input type="text" readonly="readonly" id="total" />
                      <!-- test container -->
                      <div class="container1">
                        <button class="add_form_field">Add New Field &nbsp; 
                          <span style="font-size:16px; font-weight:bold;">+ </span>
                        </button>
                        <div><input type="text" name="mytext[]"></div>
                    </div>
                    <!-- end test container -->
                    

                     <div class="form-group row">
                        <label for="inputcompanynameedit" class="col-sm-3 col-form-label"><span style="color:#7d4495;" >分類名稱</span></label>
                        <div class="col-sm-9">
                        <input type="text" class="form-control" id="inputfoldernameedit" placeholder="請填寫分類名稱">
                        
                            <div class="valid-feedback">正確</div>
                            <div class="invalid-feedback">没有资料</div>
                        </div>
                    </div>

                    <!-- <div class="form-group row">
                        <label for="inputfullnameedit" class="col-sm-3 col-form-label"><span style="color:#7d4495;" >聯絡人名稱</span></label>
                        <div class="col-sm-9">
                        <input type="text" class="form-control" id="inputfullnameedit" placeholder="請填寫聯絡人名稱">
                        
                            <div class="valid-feedback">正確</div>
                            <div class="invalid-feedback">没有资料</div>
                        </div>
                    </div> -->

                  <!--   <div class="form-group row">
                        <label for="inputteledit" class="col-sm-3 col-form-label"><span style="color:#7d4495;" >聯絡電話</span></label>
                        <div class="col-sm-9">
                        <input type="text" class="form-control" id="inputteledit" placeholder="請填寫聯絡電話">
                        
                            <div class="valid-feedback">正確</div>
                            <div class="invalid-feedback">没有资料</div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="inputloginnameedit" class="col-sm-3 col-form-label"><span style="color:#7d4495;" >登入名稱</span></label>
                        <div class="col-sm-9">
                        <input type="text" class="form-control" id="inputloginnameedit" placeholder="請填寫登入名稱">
                            <div class="valid-feedback">正確</div>
                            <div class="invalid-feedback">没有资料</div>
                        </div>
                    </div> -->
                  
                    <div class="form-group row">
                        <div class="col-sm-12 text-center">
                        <button type="button" class="btn  px-5  custombutton" id="btneditSubmit">確定</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>
 


        <!-- end payment modal center -->


        <!-- Page Content  -->
        <div id="content" style="background-color: #e5e5e5;">
          <h5>預約內容</h5>

           <a href="/at-cms/employeeadmin">返回</a>
           <h5>基本資料</h5>
            <!-- add button -->
            
            <!-- input form -->
            <form>

              
            <div class="form-group row">
              <label for="inputPassword" class="col-sm-2 col-form-label">開始日期*1</label>
              <div class="col-sm-10">
                  <!-- date picker -->
                  <!-- dob readonly="true" -->



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

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

                <button type="button" class="btn btn-primary" onclick="resettime()">重設結束時間</button>
              </div>
            </div>
            <div class="form-group row">
              <label for="eng_firstname" class="col-sm-2 col-form-label">客戶手機號碼*</label>
              <div class="col-sm-10">
                <select class="chosen user_idselect" style="width:300px;" id="user_id" name="user_id">
                <option value>--</option>
                <?php foreach ($customers as $customerrow){
                ?>
                  <option value="<?php echo $customerrow->id;?>" <?php 
                    if($bookingdetails->user_id==$customerrow->id){
                      echo "selected";
                    }

                  ?>><?php
                   $name="";
                   $printname=false;
                   if(!empty($customerrow->chi_name) && $printname==false){
                    $printname=true;
                    $name=$customerrow->chi_name;
                   }
                  echo $name;
                  if(!empty($customerrow->mobile)){
                    echo " ";
                    echo "(";
                    echo $customerrow->mobile;
                    echo ")";
                  }
                  
                   ?></option> 
                <?php
                }//php foreach ($customers as $customerrow){ ?>
                  

                </select>
                
                <script type="text/javascript">
                $("#user_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="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 ($rooms as $roomsrow){
                ?>
                  <option value="<?php echo $roomsrow->id;?>" <?php 
                    if($bookingdetails->room_id==$roomsrow->id){
                      echo "selected";
                    }

                  ?>><?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" <?php 
                    if($bookingdetails->pic_marked==1){
                      echo "checked";
                    }

                  ?>>
                <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 ($therapist as $therapistrow){
                ?>
                  <option value="<?php echo $therapistrow->id;?>" <?php 
                    if($bookingdetails->pic_1==$therapistrow->id){
                      echo "selected";
                    }

                  ?>><?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 ($therapist as $therapistrow){
                ?>
                  <option value="<?php echo $therapistrow->id;?>"
<?php 
                    if($bookingdetails->pic_2==$therapistrow->id){
                      echo "selected";
                    }

                  ?>
                    ><?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="輸入備註"><?php
                  
                    echo $bookingdetails->remark;

                  
                   ?></textarea>
              </div>
            </div>


         


                           
            


            <div class="form-group row">
                        <div class="col-sm-12">
                        <p style="font-size: 12px;"><span style="color:#616161">*為必填項目</span></p>
                        <span id="newmsg" 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="btnSubmit">確定</button>
                        </div>
            </div>
          </form>
          <!-- end input form -->
           
            <!-- end add button -->
            <!-- bottom button -->
            <div class="container">
              <div class="row">
                <div class="col-12">
                    <!-- <button type="button" onclick="foo()">Click Me</button> -->
                    <button type="button" class="btn  px-5  custombutton" id="btnSubmit" onclick="check_in(<?php echo $bookingdetails->id;?>,<?php echo $bookingdetails->user_id;?>)">報到</button>
                    <button type="button" class="btn  px-5  custombutton" id="btnSubmit" onclick="check_out(<?php echo $bookingdetails->id;?>,<?php echo $bookingdetails->user_id;?>)">報走</button>
                    <a href="javascript:void(0)" onclick="showpaymentmodal(<?php echo   $bookingdetails->id; ?>);" >
                    <button type="button" class="btn  px-5  custombutton" id="btnSubmit">開單</button>
                    </a>
                </div>
              </div>
            </div>
            <!-- end bottom button -->
            
        </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>