@extends('layouts.app')
@section('title', session('company_code') . ' Elite System')

@section('body')
	<section>
		<div class="row">
			<div class="col-xs-3">
				<div class="form-group">
					<label>LASTNAME</label>
					<div>
						<input type="text" class="form-control" id="lastname">		
					</div>
				</div>
			</div>
			<div class="col-xs-3">
				<div class="form-group">
					<label>FIRSTNAME</label>
					<div>
						<input type="text" class="form-control" id="firstname">		
					</div>
				</div>
			</div>
			<div class="col-xs-3">
				<div class="form-group">
					<label>MIDDLENAME</label>
					<div>
						<input type="text" class="form-control" id="middlename">		
					</div>
				</div>
			</div>						
		</div>
		<div class="row">
			<div class="col-xs-12">
				<button class="btn btn-primary" id="btnPost">Post</button>
				<button class="btn btn-success" id="btnGet">Get</button>
				<button class="btn btn-warning" id="btnAll">All</button>
			</div>		
		</div>

		<div>
			
			<table class="table table-condensed" id="users">
				<thead>
					<tr style="background-color: #fff;">
						<th>ID</th>
						<th>Lastname</th>
						<th>Firstname</th>
						<th>Middlename</th>
					</tr>
				</thead>
				<tbody>
					
				</tbody>
			</table>

		</div>
	</section>
@endsection

@section('scripts')
	<script type="text/javascript">
		$(document).ready(function(){
			$("#btnPost").click(function(){
				var $lastname   = $("#lastname")  .val();
				var $firstname  = $("#firstname") .val();
				var $middlename = $("#middlename").val();

				var $data = {
					lastname   : $lastname,
					firstname  : $firstname,
					middlename : $middlename
				};

				$.ajax({
					url 	: $app_url + "/jayrick/post",
					type 	: "POST",
					data 	: JSON.stringify($data),
					success : function(response){
						console.log(response);
					},
					error : function(){
						console.log("error posting");
					}
				});
			});

			$("#btnGet").click(function(){
				$.ajax({
					url 	: $app_url + "/jayrick/getOne",
					type 	: "GET",
					data 	: { 
						user_id  : 1
					},
					success : function(response){
						$("#lastname").val(response.lastname);
						$("#firstname").val(response.firstname);
						$("#middlename").val(response.middlename);
					},
					error : function(){
						console.log("error fetching");
					}
				});
			});

			$("#btnAll").click(function(){
				$.ajax({
					url 	: $app_url + "/jayrick/getAll",
					type 	: "GET",
					data 	: { 
						
					},
					success : function(response){
						console.log(response);
						$.each(response, function(index){
							var $user = response[index];
							$("#users > tbody").append("<tr>"
															+"<td>"
																+ $user.id
															+"</td>"
															+"<td>"
																+ $user.lastname
															+"</td>"
															+"<td>"
																+ $user.firstname
															+"</td>"
															+"<td>"
																+ $user.middlename
															+"</td>"									
														+"</tr>");																				
						});
					},
					error : function(){
						console.log("error fetching");
					}
				});				
			});
		});
	</script>
@endsection