<!DOCTYPE html>
<html>

<head>

<?php include 'include/common.php';?>





<!-- <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> -->

<link rel="stylesheet" href="https://rawgit.com/ericjgagnon/wickedpicker/master/stylesheets/wickedpicker.css" />

<script src="<?php echo base_url(); ?>assets/js/wickpicker.js" /></script>
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/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> -->
<script src="<?php echo base_url(); ?>assets/js/bootstrap-select.min.js"></script>

 <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" />



</head>

<body>

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


        //for default loading service data
        service_ajax();
        //end for defalt loading service data

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

          //check selected customer mobile or inputed customer name and mobile
          if($('#user_id').val().length !== 0 || ($('#display_name').val().length !== 0 && $('#mobile').val().length !== 0)){
            if($('#user_id').val().length !== 0){
              $("#user_id").addClass(" is-valid ");
              $("#user_id").removeClass(" is-invalid ");
            }
            if($('#display_name').val().length !== 0 && $('#mobile').val().length !== 0){
              $("#display_name").addClass(" is-valid ");
              $("#display_name").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_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($('#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 ");
          // }

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

            // }

            //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 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(),
                'user_id':$('#user_id').val(),
                'display_name':$('#display_name').val(),
                'mobile':$('#mobile').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'); ?>,
                // '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();
                        location.href = '/at-cms/brbookingnew?date='+$('#startdate').val();
                    }, 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();
          preferpic_ajax($(this).val()); //for prefer beautician

           //get user point
            user_pointajax($(this).val());
          //end get user point

        });





        //for changing the booking time

          $("input:checkbox[id=useproduct]:checked").change(function() {
            // var totalPrice = 0;
            alert('132');
            // $('.selectproduct3:checked').each(function() {
            //   // totalPrice += $(this).data('price') * $(this).next('input').val();
            //   alert($(this).data('price'));
            // });

            // $('.price').html(totalPrice);
          });

          // $('#useservice').click(function(){
          //     if($(this).is(':checked')){
          //         alert('It has been checked!');
          //     } else {
          //         alert('Our checkbox is not checked!');
          //     }
          // });
        //end for changing the booking time



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


          // function toggleCheckbox(element){
          //    // alert("clicked");
          //    element.checked = !element.checked;
          //    $("#rememberMember").prop("checked", true);
          // }



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

                      if(obj[i].category_id==1){
                        html+='<td>';
                        html+='FT-試做療程';
                        html+='</td>';
                      }
                       if(obj[i].category_id==2){
                        html+='<td>';
                        html+='T-療程';
                        html+='</td>';
                      }
                      html+='<td>';
                      html+=obj[i].name;
                      html+='</td>';
                      html+='<td>';
                      html+=obj[i].work;
                      html+='</td>';
                      html+='<td>';
                      html+=obj[i].price;
                      html+='</td>';
                      html+='<td>';
                      html+=parseInt(obj[i].time);
                      html+=' 分鐘';
                      html+='</td>';
                      html+='<td>';
                      html+=obj[i].purchased_qty;
                      html+='</td>';
                      html+='<td>';
                      html+=obj[i].available_qty;
                      html+='</td>';
                      html+='<td>';
                      if(obj[i].remark!=null){
                        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(){
              // 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',
                  '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';
              // var postUrl= GlobalVariables.baseUrl +'/api/v1/brservicesend/getAllServices';
              var postUrl= GlobalVariables.baseUrl +'/api/v1/brservicesend/getAllServicesWithConvert';
              //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><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()" >';
                      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].point!==null){
                        html+=obj[i].point;
                      }
                      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 preferpic_ajax($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/brcustomerserviceend/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/brcustomerend/getPreferPic';
              //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;


                      if(obj!==null){
                         $("#pic_1").val(obj);
                         var current_text = $("#pic_1 :selected").text();
                         $("#pic_1 :selected").text(current_text + " (指定美容師)");

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

                        });

                         //end set pic 2

                       }//if(obj!==null){
                       else{
                        $('#pic_1 > option').each(function() {
                          // alert($(this).text() + ' ' + $(this).val());
                          var current_text=$(this).text();

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

                       }
                      // alert(obj);
                      // 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 prefer_ajax

        //added for used point

              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

         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");
          endtimePicker.wickedpicker('setTime', 0,  '<?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');
        }

        //end time reset function
        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() {

      </script>



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

        <?php include 'include/sidebar.php';?>
        <!-- Page Content  -->
        <div id="content" style="background-color: #ffffff;">

             <?php

//for manager can see other shop but cannot edit -old
//for manager can see other shop change to can edit right at 2021-03-31
$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 || $this->session->userdata('roleId') == 5 || $this->session->userdata('roleId') == 3 || $this->session->userdata('roleId') == 1)) {
	$extraPasscheck = true;
}
//end for manager can see other shop but cannot edit

?>

          <div class="title">創建預約</div>

          <div style="" class="menubar2  p-2">
           <a href="/at-cms/brbookingnew?date=<?php echo $pickeddate; ?>&mode=d&resource=<?php echo $pickedresource; ?>"> <i class="fas fa-chevron-left" style=" display: inline-block;
/*  border-radius: 10px;
  box-shadow: 0px 0px 2px #888;*/
  color: #e67358;
  padding: 2px 2px;"></i>返回</a>
          </div>
           <h5>基本資料</h5>
            <!-- add button -->

            <!-- input form -->
            <form>


            <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 class="form-control" id="startdate" width="276" name="startdate" value="<?php if (!empty($pickeddate)) {echo $pickeddate;}?>"/>
                  <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" />
                    <?php
//show picked time
$firstHour = substr($pickedtime, 0, 2);
$secondMin = substr($pickedtime, -2);
if ($firstHour < 13) {
	$startHour = 11;
} elseif ($firstHour < 15) {
	$startHour = 13;
} elseif ($firstHour < 17) {
	$startHour = 15;
} elseif ($firstHour < 19) {
	$startHour = 17;
} elseif ($firstHour <= 24) {
	$startHour = 19;
}
?>
                  <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 $startHour;?>: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")
                    // };
                     var options = {
  now:  '<?php
date_default_timezone_set("Asia/Hong_Kong");
// date_default_timezone_set("Asia/Hongkong");
// ini_set('date.timezone','Asia/Hongkong');
echo $startHour;?>: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" />
                  <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 ($startHour+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")
                    // };

                     var options2 = {
  now:  '<?php
date_default_timezone_set("Asia/Hong_Kong");
// date_default_timezone_set("Asia/Hongkong");
// ini_set('date.timezone','Asia/Hongkong');
echo ($startHour + 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="user_id" 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"> -->
                <select  class="user_idselect selectpicker form-control"  data-live-search="true" data-width="auto" id="user_id" name="user_id" >
                <option value>--</option>
                <?php foreach ($customerlist as $customerrow) {
	?>
                  <option value="<?php echo $customerrow->id; ?>"><?php
$name = "";
	$printname = false;
	if (!empty($customerrow->chi_name) && $printname == false) {
		$printname = true;
		$name = $customerrow->chi_name;
	}
	if (!empty($customerrow->display_name) && $printname == false) {
		$printname = true;
		$name = $customerrow->display_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>

            <?php
if ($pagemethod == "add") {
	?>
            <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="<?php
if ($pagemethod == "add") {
		echo
			"";
	}

	?>" <?php

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

            <?php

}
?>

            <?php
if ($pagemethod == "add") {
	?>
            <div class="form-group row">
              <label for="mobile" class="col-sm-2 col-form-label">客戶電話</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="mobile" name="mobile" placeholder="輸入客戶電話" value="<?php
if ($pagemethod == "add") {
		echo
			"";
	}

	?>" <?php

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

            <?php

}
?>

            <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 form-control" style="width:auto;" id="room_id" name="room_id">
                <option value>--</option>
                <?php foreach ($roomlist as $roomsrow) {
	?>
                  <option value="<?php echo $roomsrow->id; ?>" <?php if ($roomsrow->name == $pickedresourceName && $pickedresource == 'room') {
		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">
                <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 form-control" style="width:auto;" id="pic_1" name="pic_1">
                <option value>--</option>
                <?php foreach ($therapistlist as $therapistrow) {
	?>
                  <option value="<?php echo $therapistrow->id; ?>"
                     <?php if ($therapistrow->username == $pickedresourceName && $pickedresource == 'pic') {
		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 form-control" style="width:auto;" 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>









            <div class="form-group row">
                        <div class="col-sm-12">
                        <p style="font-size: 12px;"><span style="color:#616161">*為必填項目</span></p>

                         </div>
            </div>

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

            </div>


            <br>
            <h5><span id="custpoint-sub">
            </span></h5>
            <br>

             <h5>預約新服務</h5>
              <span class="d-block d-md-block">
                <div class="input-group   mt-1 mr-3 ml-auto  " style="float: right;">
                <input type="search" id="myInput" placeholder="  輸入關鍵字搜尋" aria-describedby="button-addon5" class="form-control " style="max-width:80vw;" onkeyup="myFunction()">
                <div class="input-group-append">
                  <button id="button-addon5" type="submit" class="btn btn-outline-secondary customsearch"><svg class="svg-inline--fa fa-search fa-w-16" style="color: #e67358;" aria-hidden="true" data-prefix="fa" data-icon="search" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg><!-- <i class="fa fa-search" style="color:#7d4495"></i> --></button>
                </div>
                </div>
            </span>
                      <script>

                      function myFunction() {
                        var input, filter, table, tr, td, i, txtValue,find;
                        input = document.getElementById("myInput");
                        filter = input.value.toUpperCase();
                        table = document.getElementById("prepaid-services-table");
                        tr = table.getElementsByTagName("tr");
                        for (i = 1; i < tr.length; i++) {
                          td1 = tr[i].getElementsByTagName("td")[1];
                          td2 = tr[i].getElementsByTagName("td")[2];
                          td3 = tr[i].getElementsByTagName("td")[3];
                          td4 = tr[i].getElementsByTagName("td")[4];
                          td5 = tr[i].getElementsByTagName("td")[5];
                          td6 = tr[i].getElementsByTagName("td")[6];
                          find=false;
                          if (td1) {
                            txtValue = td1.textContent || td1.innerText;
                            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                              find=true;
                              // tr[i].style.display = "";
                            } else {
                              //tr[i].style.display = "none";
                            }
                          }
                          if (td2) {
                            txtValue = td2.textContent || td2.innerText;
                            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                              find=true;
                              // tr[i].style.display = "";
                            } else {
                              //tr[i].style.display = "none";
                            }
                          }
                          if (td3) {
                            txtValue = td3.textContent || td3.innerText;
                            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                              find=true;
                              // tr[i].style.display = "";
                            } else {
                              //tr[i].style.display = "none";
                            }
                          }
                          if (td4) {
                            txtValue = td4.textContent || td4.innerText;
                            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                              find=true;
                              // tr[i].style.display = "";
                            } else {
                              //tr[i].style.display = "none";
                            }
                          }
                          if (td5) {
                            txtValue = td5.textContent || td5.innerText;
                            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                              find=true;
                              // tr[i].style.display = "";
                            } else {
                              //tr[i].style.display = "none";
                            }
                          }
                          if (td6) {
                            txtValue = td6.textContent || td6.innerText;
                            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                              find=true;
                              // tr[i].style.display = "";
                            } else {
                              //tr[i].style.display = "none";
                            }
                          }
                          if(find===true){
                            tr[i].style.display = "";
                          }else{
                             tr[i].style.display = "none";
                          }
                        }
                      }
                      </script>
                      <!-- end search row -->

             <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>




            <div class="form-group row">
                        <div class="col-sm-12 text-center">
                          <span id="newmsg" class="text-center"></span>
                        </div>
                        <div class="col-sm-12 text-center">
                           <?php

if ($this->session->userdata('brbooking_add') == true && $extraPasscheck == true) {
	?>
                        <button type="button" class="btn  px-5  custombutton" id="btnSubmit">確定</button>
                        <?php
} //if( $extraPasscheck==true){
?>
                        </div>
            </div>
          </form>
          <!-- end input form -->

            <!-- end add 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>