
<form style="text-align:left" class="form-inline" action="{{route('insert')}}" method="POST">
<input type = "hidden" name = "_token" value = "<?php echo csrf_token(); ?>">
<div class="col-lg-12">
<div class="thumbnail">

    <div class="row">
    <div class="col">
        <div class="controls">
            <input id="name" name="name" class="form-control" type="text" placeholder="請輸入姓名" class="input-large" required="">
        </div>
    </div>
 
    <div class="col">
    <div class="controls">
            <input id="age" name="age" class="form-control" type="text" placeholder="請輸入年齡" class="input-large" required="">
        </div>
      
    </div>

    <select class="form-control mx-sm-2 mb-1" id="sex" name="sex">
    <option >男</option>
    <option >女</option>
    </select>
    <select class="form-control mx-sm-2 mb-1" id="work" name="work">
    <option>後端</option>
    <option>前台</option>
    <option>設計</option>
    <option>項目</option>
    </select>
    <div class="col">
      <input id=phone name=phone type="text" class="form-control" placeholder="請輸入手機號碼">
    </div>
    <div class="col">
  
    <button type="submit" class="btn btn-primary">新增</button>
    </div>

    <div class="col">
   
    <input class="form-control" id="myInput" type="text" placeholder="Search..">

    </div>

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


		
<div class="col-lg-13">
 
<div class="thumbnail">
<table class="table  table-dark table-striped" id= "table-id" style="text-align:center">
	
<thead>
       <tr>
         <th>ID</th>
         <th>姓名</th>
         <th>年齡</th>
         <th>性別</th>
         <th>職業</th>
         <th>電話</th>
         <th>編輯</th> 
       </tr>
     </thead>
     <tbody id="myTable">
     @foreach ($people as $peoples) 
         <tr>
         <td >{{$peoples->id}}</td>
         <td>{{$peoples->name}}</td>
         <td>{{$peoples->age}}</td>
         <td>{{$peoples->sex}}</td>
         <td>{{$peoples->work}}</td>
         <td>{{$peoples->phone}}</td>
         <td>
         <form action="{{route('delete')}}" method="POST">     
         <input type = "hidden" name = "_token" value = "<?php echo csrf_token(); ?>">

         <button type="submit" class="btn btn-primary" value="{{$peoples->id}}" name='delete'>刪除</button>
         <button type="button" class="btnSelect  btn btn-danger " value="{{$peoples->id}}" name='update' data-toggle="modal" data-target="#exampleModalLong1">修改</button></td>
         </tr>
         </form>
 
   @endforeach
     </tbody>
</table>


<!-- Modal -->
<div class="modal fade" id="exampleModalLong1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">修改</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>


      <div class="modal-body">
      
          <form class="form-horizontal" action="{{route('update')}}" method="post">
          <input type = "hidden" name = "_token" value = "<?php echo csrf_token(); ?>">
          <fieldset>
						<!-- Sign Up Form -->
						<!-- Text input-->
            <div class="control-group">
							<label class="control-label" >ＩＤ：
							<div class="controls">
							<input id="id1" name="id1" class="form-control" type="text"  class="input-large" required="" readonly="readonly">
							</div>
						</div>

						<div class="control-group">
							<label class="control-label">姓名：
							<div class="controls">
							<input id="name1" name="name1" class="form-control" type="text"  class="input-large" required="">
							</div>
						</div>
					  
						<!-- Text input-->
						<div class="control-group">
							<label class="control-label">年齡： 
							<div class="controls">
								<input id="age1" name="age1" class="form-control" type="text"  class="input-large" required="">
							</div>
						</div>

						<!-- Text input-->
						<div class="control-group">
							<label class="control-label" >性別： 
								<input id="sex1" name="sex1" class="form-control" type="text"  class="input-large" required="">
						</div>
						<!-- Text input-->
						<div class="control-group">
							<label class="control-label">職業：
								<input  id="work1" name="work1" class="form-control" type="text" class="input-large" required="">
            </div>
            <!-- Text input-->
            <div class="control-group">
							<label class="control-label" >電話： 
								<input  id="phone1" name="phone1" class="form-control" type="text" class="input-large" required="">
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-primary" >Save changes</button>
            </div>
          </form>
          </div>
    </div>
  </div>
</div>


<div class="container" >
  <div class="form-group" style="position:absolute;right:0px;">
  <h3>每頁</h3> 	<!--		Show Numbers Of Rows 		-->
    <select class="form-control mx-sm-2 mb-1" name="state" id="maxRows">
        <option value="5000">All</option>
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="15">15</option>
        <option value="20">20</option>
        <option value="50">50</option>
      </select>
      <h3>筆</h3> 
			  	
      <!--		Start Pagination -->
      <div class='pagination-container' style="text-align:right">
      <nav>
      <ul class="pagination page-item" >
      <li data-page="prev">
      <span style="border-top-left-radius: 5px;border-bottom-left-radius: 5px;"> < <span class="sr-only">(current)</span></span>
      </li>

      <li data-page="next" id="prev">
      <span style="border-top-right-radius: 5px;border-bottom-right-radius: 5px;"> > <span class="sr-only">(current)</span></span>
      </li>
      </ul>
      </nav>
      </div> <!--		end Pagination -->
        

    </div>
  </div> <!-- 		End of Container -->

<script>
getPagination('#table-id');
					//getPagination('.table-class');
					//getPagination('table');

		  /*					PAGINATION 
		  - on change max rows select options fade out all rows gt option value mx = 5
		  - append pagination list as per numbers of rows / max rows option (20row/5= 4pages )
		  - each pagination li on click -> fade out all tr gt max rows * li num and (5*pagenum 2 = 10 rows)
		  - fade out all tr lt max rows * li num - max rows ((5*pagenum 2 = 10) - 5)
		  - fade in all tr between (maxRows*PageNum) and (maxRows*pageNum)- MaxRows 
		  */
		 
	function getPagination (table){

        		var lastPage = 1 ; 

		  $('#maxRows').on('change',function(evt){
		  	//$('.paginationprev').html('');						// reset pagination 


		lastPage = 1 ; 
         $('.pagination').find("li").slice(1, -1).remove();
		  	var trnum = 0 ;									// reset tr counter 
		  	var maxRows = parseInt($(this).val());			// get Max Rows from select option

		  	if(maxRows == 5000 ){

		  		$('.pagination').hide();
		  	}else {
		  		
		  		$('.pagination').show();
		  	}

		  	var totalRows = $(table+' tbody tr').length;		// numbers of rows 
			 $(table+' tr:gt(0)').each(function(){			// each TR in  table and not the header
			 	trnum++;									// Start Counter 
			 	if (trnum > maxRows ){						// if tr number gt maxRows
			 		
			 		$(this).hide();							// fade it out 
			 	}if (trnum <= maxRows ){$(this).show();}// else fade in Important in case if it ..
			 });											//  was fade out to fade it in 
			 if (totalRows > maxRows){						// if tr total rows gt max rows option
			 	var pagenum = Math.ceil(totalRows/maxRows);	// ceil total(rows/maxrows) to get ..  
			 												//	numbers of pages 
			 	for (var i = 1; i <= pagenum ;){			// for each page append pagination li 
			 	$('.pagination #prev').before('<li data-page="'+i+'">\
								      <span>'+ i++ +'<span class="sr-only">(current)</span></span>\
								    </li>').show();
			 	}											// end for i 
			} 												// end if row count > max rows
			$('.pagination [data-page="1"]').addClass('active'); // add active class to the first li 
			$('.pagination li').on('click',function(evt){		// on click each page
				evt.stopImmediatePropagation();
				evt.preventDefault();
				var pageNum = $(this).attr('data-page');	// get it's number

				var maxRows = parseInt($('#maxRows').val());			// get Max Rows from select option

				if(pageNum == "prev" ){
					if(lastPage == 1 ){return;}
					pageNum  = --lastPage ; 
				}
				if(pageNum == "next" ){
					if(lastPage == ($('.pagination li').length -2) ){return;}
					pageNum  = ++lastPage ; 
				}

				lastPage = pageNum ;
				var trIndex = 0 ;							// reset tr counter
				$('.pagination li').removeClass('active');	// remove active class from all li 
				$('.pagination [data-page="'+lastPage+'"]').addClass('active');// add active class to the clicked 
				// $(this).addClass('active');					// add active class to the clicked 
				 $(table+' tr:gt(0)').each(function(){		// each tr in table not the header
				 	trIndex++;								// tr index counter 
				 	// if tr index gt maxRows*pageNum or lt maxRows*pageNum-maxRows fade if out
				 	if (trIndex > (maxRows*pageNum) || trIndex <= ((maxRows*pageNum)-maxRows)){
				 		$(this).hide();		
				 	}else {$(this).show();} 				//else fade in 
				 }); 										// end of for each tr in table
					});										// end of on click pagination list

		}).val(5).change();

												// end of on select change 
								// END OF PAGINATION 
	}	
</script>
 <script>
 $(document).ready(function(){
   $("#myInput").on("keyup", function() {
     var value = $(this).val().toLowerCase();
     $("#myTable tr").filter(function() {
       $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
     });
   });
 });
 </script>
 
 <script>
 $(document).ready(function(){

// code to read selected table row cell data (values).
$("#myTable").on('click','.btnSelect',function(){
     // get the current row
     var currentRow=$(this).closest("tr"); 
     
     var col0=currentRow.find("td:eq(0)").html();
     var col1=currentRow.find("td:eq(1)").html(); // get current row 2nd table cell TD value
     var col2=currentRow.find("td:eq(2)").html(); // get current row 3rd table cell  TD value
     var col3=currentRow.find("td:eq(3)").html();
     var col4=currentRow.find("td:eq(4)").html();
     var col5=currentRow.find("td:eq(5)").html();
   
     $('#id1').val(col0);
     $('#name1').val(col1);
     $('#age1').val(col2);
     $('#sex1').val(col3);
     $('#work1').val(col4);
     $('#phone1').val(col5);


});
});
</script>