<!DOCTYPE html>
<html>

<head>

<?php   include('include/common.php');?>  
</head>

<body>

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

          //add control
        $("#btnSubmit").click(function(event) {
          var forcusitem="";
          var passCheck=true;

            alert('1');
          // if($('#inputcompanyname').val().length !== 0){
          //   $("#inputcompanyname").addClass(" is-valid ");
          //   $("#inputcompanyname").removeClass(" is-invalid ");
          // }
          // else{
          //   if(forcusitem.length===0){
          //      forcusitem="#inputcompanyname";
          //   }
          //   passCheck=false;
          //   $("#inputcompanyname").addClass(" is-invalid ");
          //  $("#inputcompanyname").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($('#inputloginname').val().length !== 0){
          //   $("#inputloginname").addClass(" is-valid ");
          //   $("#inputloginname").removeClass(" is-invalid ");
          // }
          // else{
          //   if(forcusitem.length===0){
          //      forcusitem="#inputloginname";
          //   }
          //   passCheck=false;
          //   $("#inputloginname").addClass(" is-invalid ");
          //  $("#inputloginname").removeClass(" is-valid ");
          // }

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

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

       


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

          
          var GlobalVariables ={
                  'csrfToken': '123',
                  'baseUrl':'http://notesvision.at-webs.hk',
                  'destUrl':'http://notesvision.at-webs.hk/api/v1/fileend/add',
                  'AJAX_SUCCESS' :'SUCCESS',
                  'AJAX_FAILURE' :'FAILURE'
            };

            event.preventDefault();
            var postUrl= GlobalVariables.baseUrl +'/api/v1/fileend/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 fd = new FormData(document.getElementById("fileinfo"));
            fd.append("label", "WEBUPLOAD");

            var postData ={
                'inputcompanyname':$('#inputcompanyname').val(),
                'inputfullname':$('#inputfullname').val(),
                'inputtel':$('#inputtel').val(),
                // 'inputadminname':$('#inputadminname').val(),
                'inputloginname':$('#inputloginname').val(),
                'inputPassword':$('#inputPassword').val()
            }
 
            $.ajax({
                  method: "POST",
                  url: postUrl,
                  dataType: "json",
                 data: fd,
                 processData: false,  // tell jQuery not to process the data
                  contentType: false,
                 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) {

        
        //edit submit button
        
        $("#btneditSubmit").click(function(event) {
          var forcusitem="";
          var passCheck=true;

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

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

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

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

          

       


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

          
          var GlobalVariables ={
                  'csrfToken': '123',
                  'baseUrl':'http://notesvision.at-webs.hk',
                  'destUrl':'http://notesvision.at-webs.hk/api/v1/frontend/edit',
                  'AJAX_SUCCESS' :'SUCCESS',
                  'AJAX_FAILURE' :'FAILURE'
            };

            event.preventDefault();
            var postUrl= GlobalVariables.baseUrl +'/api/v1/frontend/edit';
            // 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 ={
                'inputcompanynameedit':$('#inputcompanynameedit').val(),
                'inputfullnameedit':$('#inputfullnameedit').val(),
                'inputteledit':$('#inputteledit').val(),
                'inputloginnameedit':$('#inputloginnameedit').val(),
                'inputPasswordedit':$('#inputPasswordedit').val(),
                'inputadminid':$('#inputadminid').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();
                    $( '#editmsg' ).append('<p class="text-primary" id="feedback">'+data['msg']+'</p>');
                    setTimeout(function() {
                        location.reload();
                    }, 3000);
                    // location.reload();

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

            }//if(passCheck==true){
        });  //$("#btneditSubmit").click(function(event) {  
        //end edit submit button


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

            var checkboxvalue =  [];    
            // $("input.checkbox[type=checkbox]:checked").each(function(i){
            //     alert(i.value );
            // checkboxvalue.push( i.value );
            // }); 

            $('input.checkbox:checkbox:checked').each(function () {

                // alert($(this).val());
                checkboxvalue.push( $(this).val() );

            });
            var postData ={
                'inputdeletecheckboxvalue':checkboxvalue
            }
            var GlobalVariables ={
                  'csrfToken': '123',
                  'baseUrl':'http://notesvision.at-webs.hk',
                  'destUrl':'http://notesvision.at-webs.hk/api/v1/frontend/delete',
                  'AJAX_SUCCESS' :'SUCCESS',
                  'AJAX_FAILURE' :'FAILURE'
            };

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

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

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


        //Pop up edit box
        // $( "#deletebutton" ).click(function() {
        //     $('#editModalCenter').modal({
        //         show: true,
        //     }); 

        // });
        // $('#myform').on('submit', function(ev) {
        //     $('#my-modal').modal({
        //         show: 'false'
        //     }); 


        //     var data = $(this).serializeObject();
        //     json_data = JSON.stringify(data);
        //     $("#results").text(json_data); 
        //     $(".modal-body").text(json_data); 

            // $("#results").text(data);

            // ev.preventDefault();
        // });
        //end pop up edit box

        //get edit modal data
    $('#editModalCenter').on('show.bs.modal', function (e) {        
		var user_id = $(e.relatedTarget).data('user_id'); 
        var GlobalVariables ={
                  'csrfToken': '123',
                  'baseUrl':'http://notesvision.at-webs.hk',
                  'destUrl':'http://notesvision.at-webs.hk/api/v1/frontend/getadmindata',
                  'AJAX_SUCCESS' :'SUCCESS',
                  'AJAX_FAILURE' :'FAILURE'
            };
       

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


                        $("#inputcompanynameedit").val(result[0].companyName);
                        $("#inputfullnameedit").val(result[0].fullName);
                        $("#inputteledit").val(result[0].tel);
                        $("#inputloginnameedit").val(result[0].login);


                        // $("#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 get edit modal data    

       


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



         //show edit modal
         function showeditmodal($id) {

            
            var GlobalVariables ={
                    'csrfToken': '123',
                    'baseUrl':'http://notesvision.at-webs.hk',
                    'destUrl':'http://notesvision.at-webs.hk/api/v1/frontend/getadmindata',
                    'AJAX_SUCCESS' :'SUCCESS',
                    'AJAX_FAILURE' :'FAILURE'
                };
                     
            $.ajax(
            {            
                type : 'POST',            
                url  : GlobalVariables.destUrl, //Here you will fetch records     
                dataType: "json", 
                data    : 'user_id='+ $id, //Pass $user_id            
                success : function(result) 
                        { 

                            $("#inputcompanynameedit").val(result[0].companyName);
                        $("#inputfullnameedit").val(result[0].fullName);
                        $("#inputteledit").val(result[0].tel);
                            // $("#inputadminnameedit").val(result[0].fullName);
                            $("#inputloginnameedit").val(result[0].login);
                            $("#inputadminid").val($id);
                            
                            $('#editModalCenter').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

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

        //end control

        
    </script>  
    <!-- end admin javascript -->


    <?php   include('include/header.php');?>
    <div class="wrapper" >
        
        <?php   include('include/sidebar.php');?>
        <!-- Page Content  -->
        <div id="content" style="background-color: #e5e5e5;">

            <!-- pop up add modal  -->
            <!-- Button trigger modal -->
            <!-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
            Launch demo modal
            </button> -->

            <!-- add Modal -->
           <script>
              function myFunction() {
                var x = document.getElementById("myInput");
                if (x.type === "password") {
                    x.type = "text";
                } else {
                    x.type = "password";
                }
                }
              updateList = function() {
      var input = document.getElementById('file');
      var output = document.getElementById('fileList');
      var children = "";
      for (var i = 0; i < input.files.length; ++i) {
          children += '<li>' + input.files.item(i).name + '</li>';
      }
      output.innerHTML = '<ul>'+children+'</ul>';
  }
            </script>

            <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered  " role="document" style="max-width: 600px;">
                <div class="modal-content px-3">
                <!-- <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div> -->
                <div class="modal-body ">
                     <h5 style="color:#7d4495" class="text-center py-2"><i class="fas fa-plus mr-2" style="color:#7d4495"></i>新增用戶</h5>
                     <form method="post" id="fileinfo" name="fileinfo" >

                      <input type="file" multiple
                          name="file[]" 
                          id="file" 
                          onchange="javascript:updateList()" />

    <p>Selected files:</p>

    <div id="fileList"></div>

                    <div class="form-group row">
                        <label for="inputcompanyname" 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="inputcompanyname" placeholder="請填寫機構名稱">
                        
                            <div class="valid-feedback">正確</div>
                            <div class="invalid-feedback">没有资料</div>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="inputfullname" 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="inputfullname" placeholder="請填寫聯絡人名稱">
                        
                            <div class="valid-feedback">正確</div>
                            <div class="invalid-feedback">没有资料</div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="inputtel" 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="inputtel" placeholder="請填寫聯絡電話">
                        
                            <div class="valid-feedback">正確</div>
                            <div class="invalid-feedback">没有资料</div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="inputloginname" 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="inputloginname" placeholder="請填寫登入名稱">
                            <div class="valid-feedback">正確</div>
                            <div class="invalid-feedback">没有资料</div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="inputPassword" class="col-sm-3 col-form-label"><span style="color:#7d4495;" >登入密碼</span></label>
                        <div class="col-sm-9">
                        <!-- <input type="password" class="form-control" id="inputPassword" placeholder="請填寫登入密碼">
                        <div class="input-group">
                        <input type="password" class="form-control pwd" value="iamapassword">
                        <span class="input-group-btn">
                            <button class="btn btn-default reveal" type="button"><i class="glyphicon glyphicon-eye-open"></i></button>
                        </span>          
                        </div>   -->
                         <!-- password field -->
                         <div class="input-group ">
                            <input type="password" class="form-control" id="inputPassword" placeholder="請填寫登入密碼">
                            <div class="input-group-append form-password-icon">
                            <span class="input-group-text "><i class="fas fa-eye-slash"></i></span>
                            <div class="valid-feedback">正確</div>
                            <div class="invalid-feedback">没有资料</div>
                            </div>
                        </div>
                         <!-- end password field -->
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="inputRePassword" class="col-sm-3 col-form-label"><span style="color:#7d4495;" >重新輸入密碼</span></label>
                        <div class="col-sm-9">
                        <!-- <input type="password" class="form-control" id="inputRePassword" placeholder="請重新輸入密碼"> -->
                        <!-- password field -->
                        <div class="input-group ">
                            <input type="password" class="form-control" id="inputRePassword" placeholder="請重新輸入密碼">
                            <div class="input-group-append form-password-icon">
                            <span class="input-group-text "><i class="fas fa-eye-slash"></i></span>
                            <div class="valid-feedback">正確</div>
                            <div class="invalid-feedback">没有资料或密碼和登入密碼不同</div>
                            </div>
                        </div>
                         <!-- end password field -->
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-12">
                        <p style="font-size: 12px;"><span style="color:#616161">*為必填項目<br>登入名稱為英文字或數字組成(不分大小寫)</span></p>
                        <span id="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>
                </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 pop up add modal -->

            <!-- edit modal -->
            <script>
                
            </script>

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


                     <div class="form-group row">
                        <label for="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="inputcompanynameedit" 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">
                        <label for="inputPasswordedit" class="col-sm-3 col-form-label"><span style="color:#7d4495;" >登入密碼</span></label>
                        <div class="col-sm-9">
                        <!-- <input type="password" class="form-control" id="inputPassword" placeholder="請填寫登入密碼">
                        <div class="input-group">
                        <input type="password" class="form-control pwd" value="iamapassword">
                        <span class="input-group-btn">
                            <button class="btn btn-default reveal" type="button"><i class="glyphicon glyphicon-eye-open"></i></button>
                        </span>          
                        </div>   -->
                         <!-- password field -->
                         <div class="input-group ">
                            <input type="password" class="form-control" id="inputPasswordedit" placeholder="請填寫登入密碼">
                            <div class="input-group-append form-password-icon">
                            <span class="input-group-text "><i class="fas fa-eye-slash"></i></span>
                            <div class="valid-feedback">正確</div>
                            <div class="invalid-feedback">没有资料</div>
                            </div>
                        </div>
                         <!-- end password field -->
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="inputRePassword" class="col-sm-3 col-form-label"><span style="color:#7d4495;" >重新輸入密碼</span></label>
                        <div class="col-sm-9">
                        <!-- <input type="password" class="form-control" id="inputRePassword" placeholder="請重新輸入密碼"> -->
                        <!-- password field -->
                        <div class="input-group ">
                            <input type="password" class="form-control" id="inputRePasswordedit" placeholder="請重新輸入密碼">
                            <div class="input-group-append form-password-icon">
                            <span class="input-group-text "><i class="fas fa-eye-slash"></i></span>
                            <div class="valid-feedback">正確</div>
                            <div class="invalid-feedback">没有资料或密碼和登入密碼不同</div>
                            </div>
                        </div>
                         <!-- end password field -->
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-12">
                        <p style="font-size: 12px;"><span style="color:#616161">*為必填項目<br>登入名稱為英文字或數字組成(不分大小寫)</span></p>
                        <span id="editmsg" class="text-center"></span>
                         </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-12 text-center">
                        <button type="button" class="btn  px-5  custombutton" id="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 edit modal -->

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

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

                   
                    <div class="form-group row">
                        <label for="inputRePassword" class="col-sm-12 "><span style="color:#7d4495;" >確定删除</span><span id="deletenum" style="color:#7d4495;"></span><span style="color:#7d4495;" >個用戶?</span></label>
                        
                        <span id="deletemsg" class="text-center"></span>
                    </div>
                    <!-- <div class="form-group row">
                        <div class="col-sm-12">
                        <p style="font-size: 12px;"><span style="color:#616161">*為必填項目<br>登入名稱為英文字或數字組成(不分大小寫)</span></p>
                        <span id="editmsg" class="text-center"></span>
                         </div>
                    </div> -->
                    <div class="form-group row">
                        <div class="col-sm-12 text-center">
                        <button type="button" class="btn  px-5  custombutton" id="btndeleteSubmit">確定</button>
                        </div>
                    </div>
                    <input type="hidden" class="form-control" id="inputadminid" placeholder="">
                    </form>
                </div>
                <!-- <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div> -->
                </div>
            </div>
            </div>
            <!-- end delete modal -->    
            <style>
            .customsearch:hover{
                background-color: #e2e6ea;      
            }
            </style>
            <!-- top menu bar -->
            <div class="container-fluid py-2" style="background-color: #f8f9fa;">

            <span class="form-inline">
            <button type="button" class="btn btn-light" data-toggle="modal" data-target="#exampleModalCenter">
            <i class="fas fa-plus mr-2" style="color:#7d4495"></i>    
            <span style="color:#616161">新增筆記</span></button>

            <button type="button" class="btn btn-light" id="deletebutton" onclick="showdeletemodal()" data-toggle="" data-target="">
            <i class="fas fa-trash-alt mr-2" style="color:#7d4495"></i>   
            <span style="color:#616161">删除筆記</span></button>

            <div class="input-group ">
            <input type="search" placeholder="  快速搜尋 " aria-describedby="button-addon5" class="form-control" style="width:360px;">
            <div class="input-group-append">
              <button id="button-addon5" type="submit" class="btn btn-outline-secondary customsearch"><i class="fa fa-search" style="color:#7d4495"></i></button>
            </div>
            </div>
            


            <div class="input-group ml-auto mr-3">
                <label style="color:#616161">每頁顯示</label>
                <script type="text/javascript">
                function changePerpageHandler(event) {
                    // alert(  event.target.value );
                    window.location='<?php echo $base_url;?>'+'/'+ <?php echo $page;?>+'/'+event.target.value;
                }

            
            </script>
            <select class="custom-select mr-sm-2 " id="inlineFormCustomSelect"  onchange="changePerpageHandler(event);">
        <option value="10" <?php if($perpage=="10"){echo "selected";}?>>10</option>
        <option value="20" <?php if($perpage=="20"){echo "selected";}?>>20</option>
        <option value="50" <?php if($perpage=="50"){echo "selected";}?>>50</option>
        <option value="100"<?php if($perpage=="100"){echo "selected";}?>>100</option>
      </select>
                <label style="color:#616161">個結果(共<?php echo $total_rows;?>個)</label>
            </div>
            <?php
            // echo "total_rows";
            // echo $total_rows;
            // echo "perpage";
            // echo $perpage;  
            // echo "choice";
            // echo $choice=$total_rows/$perpage;  
            // echo "ceil choice";
            // echo ceil($choice);
            // echo "num_links";
            // echo $num_links;   
?>

            <div class="input-group ">
            <?php

            $previouspage=$page-1;
            if($previouspage<0){
                $previouspage=0;
            }
            $previousurl=$base_url."/".$previouspage."/".$perpage;
      ?>
            <button type="button" class="btn btn-light" onClick="window.location='<?php echo $previousurl;?>';"><span style="color:#616161">上一頁</span></button>
            <script type="text/javascript">
                function changeEventHandler(event) {
                    // alert(  event.target.value );
                    window.location='<?php echo $base_url;?>'+'/'+ event.target.value+'/'+<?php echo $perpage;?>;
                }

            
            </script>
  
            <select class="custom-select mr-sm-2" id="inlineFormCustomSelect" onchange="changeEventHandler(event);">
        <?php 
            for($i=0;$i<$num_links;$i++){

                if($page==$i){
        ?>
                <option value="<?php echo $i?>" selected><?php echo $i+1?></option>
        <?php            
                }
                else{
        ?>
                    <option value="<?php echo $i?>"><?php echo $i+1?></option>
        <?php 
                }
        ?>
                
                
        <?php
            }//for($i=0;$i<$num_links;$i++){

        ?>

        <!-- <option selected>1</option>
        <option value="1">2</option>
        <option value="2">3</option>
        <option value="3">4</option> -->
      </select>
      <?php

            $nextpage=$page+1;
            if($nextpage>$num_links-1){
                $nextpage=$num_links-1;
            }
            $nexturl=$base_url."/".$nextpage."/".$perpage;
      ?>
      <button type="button" class="btn btn-light" onClick="window.location='<?php echo $nexturl;?>';"><span style="color:#616161">下一頁</span></button>
            </div>

            </span>

          </div>
            <!-- end top menu bar -->
            <br>
           
            <!-- <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container-fluid">

                    <button type="button" id="sidebarCollapse" class="btn btn-info">
                        <i class="fas fa-align-left"></i>
                        <span>Toggle Sidebar</span>
                    </button>
                    <button class="btn btn-dark d-inline-block d-lg-none ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <i class="fas fa-align-justify"></i>
                    </button>

                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="nav navbar-nav ml-auto">
                            <li class="nav-item active">
                                <a class="nav-link" href="#">Page<?php echo $title;?></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Page</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Page</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Page</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav> -->

            <!-- body content -->
            <style>
                .levleonetext{
                    text-align: center;
                }
                .tablerowoddbg{
                    background-color: #f1ebf5;
                }
                .levleonetext span{
                    color:#616161;
                }
            </style>
            <div class="container-fluid py-2" style="background-color: #ffffff;min-height:80vh">
            <h2 style="color:#7d4495;">筆記管理</h2>


            
                <script language="JavaScript">
                function checkall(source) {
                   
                checkboxes = document.getElementsByName('admincheck');
                    for(var i=0, n=checkboxes.length;i<n;i++) {
                        checkboxes[i].checked = source.checked;
                    }
                }
                </script>   
                <!-- new table -->  
                <table class="table table-bordered table-sm   ">
                <thead class="">
                    <tr>
                        <th class="levleonetext" >

                            <input type="checkbox" class="checkbox1" id="exampleCheck1" onClick="checkall(this)">
                           


                        </th>
                        <th class="levleonetext"><span style="color:#7d4495;">筆記名稱</span></th>
                        <th class="levleonetext"><span style="color:#7d4495;">筆記種類</span></th>
                        <th class="levleonetext"><span style="color:#7d4495;" class="">文件夾位置</span></th>
                        <th class="levleonetext"><span style="color:#7d4495;">更新時間</span></th>
                        <th class="levleonetext"><span style="color:#7d4495;">更新時間<i class="fas fa-arrow-down ml-2"></i></span></th>
                        <th class="levleonetext"><span style="color:#7d4495;">編輯</span></th>
                    </tr>
                </thead>
                <?php
                $i=1;
                foreach($record as $row)
                {
                ?>
                <tbody>
                    <tr class="tablerowoddbg ">
                        <td class="levleonetext"> <input type="checkbox" class="checkbox" id="admincheck" name="admincheck" value="<?php echo  $row->id; ?>"></td>
                        <td class="levleonetext"><span><?php echo $row->companyName;?></span></td>
                        <td class="levleonetext"><span><?php echo $row->fullName;?></span></td>
                        <td class="levleonetext"><span><?php echo $row->tel;?></span></td>
                        <td class="levleonetext"><span><?php echo $row->login;?></span></td>
                        <td class="levleonetext"><span><?php echo $row->update_time;?></span></td>
                        <!-- <td class="levleonetext"><a onclick="showeditmodal(<?php echo  $row->id; ?>);" href="#editModalCenter" class="open-edit_user" data-toggle="modal" data-user_id="<?php echo  $row->id; ?>"><i class="fas fa-pencil-alt" style="color:#7d4495"></i></a></td> -->
                        <td class="levleonetext"><a href="javascript:void(0)" onclick="showeditmodal(<?php echo  $row->id; ?>);" ><i class="fas fa-pencil-alt" style="color:#7d4495"></i></a></td>
                    </tr>
                </tbody>
                <?php
                 $i++;
                }
                ?>
                </table>
                <!-- end new table -->
                
                <!-- body table -->
                <!-- <table class="table table-bordered table-sm   ">
                <thead class="">
                    <tr>
                        <th class="levleonetext" >

                            <input type="checkbox" class="checkbox" id="exampleCheck1">
                           


                        </th>
                        <th class="levleonetext"><span style="color:#7d4495;">管理員姓名</span></th>
                        <th class="levleonetext"><span style="color:#7d4495;">登入名稱</span></th>
                        <th class="levleonetext"><span style="color:#7d4495;" class="">更新時間<i class="fas fa-arrow-down ml-2"></i></span></th>
                        <th class="levleonetext"><span style="color:#7d4495;">編輯</span></th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="tablerowoddbg ">
                        <td class="levleonetext"> <input type="checkbox" class="checkbox" id="exampleCheck1"></td>
                        <td class="levleonetext"><span>Amy AU</span></td>
                        <td class="levleonetext"><span>Admin1</span></td>
                        <td class="levleonetext"><span>2020-03-14 10:24:26</span></td>
                        <td class="levleonetext"><i class="fas fa-pencil-alt" style="color:#7d4495"></i></td>
                    </tr>
                </tbody>
                <tbody>
                    <tr class="">
                        <td class="levleonetext"> <input type="checkbox" class="checkbox" id="exampleCheck1"></td>
                        <td class="levleonetext"><span>Amy AU</span></td>
                        <td class="levleonetext"><span>Admin1</span></td>
                        <td class="levleonetext"><span>2020-03-14 10:24:26</span></td>
                        <td class="levleonetext"><i class="fas fa-pencil-alt" style="color:#7d4495"></i></td>
                    </tr>
                </tbody>
                <tbody>
                    <tr class="clickable tablerowoddbg" data-toggle="collapse" data-target="#group-of-rows-1" aria-expanded="false" aria-controls="group-of-rows-1" style="">
                        <td class="levleonetext"> <input type="checkbox" class="checkbox" id="exampleCheck1"></td>
                        <td class="levleonetext">Amy AU</td>
                        <td class="levleonetext">Admin1</td>
                        <td class="levleonetext">2020-03-14 10:24:26</td>
                        <td class="levleonetext"><i class="fas fa-pencil-alt" style="color:#7d4495"></i></td>
                    </tr>
                </tbody>
                <tbody id="group-of-rows-1" class="collapse">
                    <tr class="table-warning">
                        <td><i class="fa fa-folder-open"></i> child row</td>
                        <td>data 1</td>
                        <td>data 1</td>
                        <td>data 1</td>
                        <td>data</td>
                    </tr>
                    <tr class="table-warning">
                        <td><i class="fa fa-folder-open"></i> child row</td>
                        <td>data 1</td>
                        <td>data 1</td>
                        <td>data 1</td>
                        <td>data</td>
                    </tr>
                </tbody>
                <tbody>
                    <tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-2" aria-expanded="false" aria-controls="group-of-rows-2">
                        <td><i class="fa fa-folder"></i></td>
                        <td>data</td>
                        <td>data</td>
                        <td>data</td>
                        <td>data</td>
                    </tr>
                </tbody>
                <tbody id="group-of-rows-2" class="collapse">
                    <tr class="table-warning">
                        <td><i class="fa fa-folder-open"></i> child row</td>
                        <td>data 2</td>
                        <td>data 2</td>
                        <td>data 2</td>
                        <td>data</td>
                    </tr>
                    <tr class="table-warning">
                        <td><i class="fa fa-folder-open"></i> child row</td>
                        <td>data 2</td>
                        <td>data 2</td>
                        <td>data 2</td>
                        <td>data</td>
                    </tr>
                </tbody>
            </table>   -->
                <!-- end body table -->
            </div>    
            <!-- end body content -->

            <!-- <table class="table table-bordered table-sm mx-2 ">
    <thead class="thead-dark">
        <tr>
            <th>Column</th>
            <th>管理員姓名</th>
            <th>登入名稱</th>
            <th>更新時間<i class="fas fa-arrow-down"></i></th>
        </tr>
    </thead>
    <tbody>
        <tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-1" aria-expanded="false" aria-controls="group-of-rows-1">
            <td><i class="fa fa-folder"></i></td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
    </tbody>
    <tbody id="group-of-rows-1" class="collapse">
        <tr class="table-warning">
            <td><i class="fa fa-folder-open"></i> child row</td>
            <td>data 1</td>
            <td>data 1</td>
            <td>data 1</td>
        </tr>
        <tr class="table-warning">
            <td><i class="fa fa-folder-open"></i> child row</td>
            <td>data 1</td>
            <td>data 1</td>
            <td>data 1</td>
        </tr>
    </tbody>
    <tbody>
        <tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-2" aria-expanded="false" aria-controls="group-of-rows-2">
            <td><i class="fa fa-folder"></i></td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
    </tbody>
    <tbody id="group-of-rows-2" class="collapse">
        <tr class="table-warning">
            <td><i class="fa fa-folder-open"></i> child row</td>
            <td>data 2</td>
            <td>data 2</td>
            <td>data 2</td>
        </tr>
        <tr class="table-warning">
            <td><i class="fa fa-folder-open"></i> child row</td>
            <td>data 2</td>
            <td>data 2</td>
            <td>data 2</td>
        </tr>
    </tbody>
</table> -->
            <!-- <h2>Collapsible Sidebar Using Bootstrap 41</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <div class="line"></div>

            <h2>Lorem Ipsum Dolor</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <div class="line"></div>

            <h2>Lorem Ipsum Dolor</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <div class="line"></div>

            <h3>Lorem Ipsum Dolor</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> -->
        </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>