@extends('layouts.admin')

@section('page-header')
Role Add
@endsection


@section('content')
<form>
<div class="admin-form" style="max-width:800px;">
	<div class="panel">
		<div class="form-inline panel-body p25">

			<div class="section row mb10">
				<label for="grade_id" class="field-label col-sm-4 text-right">Classification</label>
				<div class="col-sm-8">
					<select id="grade_id" class="form-control">
					<option value="">Classification</option>
					<option value="7">AnB Member</option>
					<option value="8">Program Manager</option>
					<option value="9">Translator</option>
					<option value="10">SA</option>
					<option value="20">Admin</option>
					@if($auth->grade_id >= 21)
					<option value="21">Super Admin</option>
					@endif
					</select>
				</div>
			</div>

			<div class="section row mb10">
				<label for="email" class="field-label col-sm-4 text-right">Account ID (Email)</label>
				<div class="col-sm-8">
					<label for="email" class="field"><input type="text" id="email" class="gui-input" value=""></label>
				</div>
			</div>
<!--
			<div class="section row mb10">
				<label for="student_id" class="field-label col-sm-4 text-right">Student ID</label>
				<div class="col-sm-8">
					<label for="student_id" class="field"><input type="text" id="student_id" class="gui-input" value=""></label>
				</div>
			</div>
-->
			<div class="section row mb10">
				<label for="password" class="field-label col-sm-4 text-right">Password</label>
				<div class="col-sm-8">
					<label for="password" class="field"><input type="text" id="password" class="gui-input" value=""></label>
				</div>
			</div>

			<div class="section row mb10">
				<label for="firstname" class="field-label col-sm-4 text-right">First name</label>
				<div class="col-sm-8">
					<label for="firstname" class="field"><input type="text" id="firstname" class="gui-input" value=""></label>
				</div>
			</div>

			<div class="section row mb10">
				<label for="lastname" class="field-label col-sm-4 text-right">Last name</label>
				<div class="col-sm-8">
					<label for="lastname" class="field"><input type="text" id="lastname" class="gui-input" value=""></label>
				</div>
			</div>

			<div class="section row mb10">
				<label for="phone" class="field-label col-sm-4 text-right">Phone Number</label>
				<div class="col-sm-8">
					<label for="phone" class="field"><input id="phone" type="text" class="form-control" value=""></label>
				</div>
			</div>

			<div class="section row mb10">
				<label for="birth" class="field-label col-sm-4 text-right">Birth</label>
				<div class="col-sm-8">
					<input id="birth" type="text" class="form-control date-picker" value="" readonly style="cursor:pointer;" >
				</div>
			</div>

			<div class="section row mb10">
				<label for="address" class="field-label col-sm-4 text-right">Gender</label>
				<div class="col-sm-8">
					<div class="form-group">
						<div class="bs-component">
							<div class="radio-custom mb10">
								<input type="radio" id="sex1" name="sex" value="M" checked="">
								<label for="sex1">Male</label>
							</div>
						</div>

						<div class="bs-component">
							<div class="radio-custom mb10">
								<input type="radio" id="sex2" name="sex" value="F">
								<label for="sex2">Female</label>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="section row mb10">
				<label for="addr_street" class="field-label col-sm-4 text-right">Address Street</label>
				<div class="col-sm-8">
					<label for="addr_street" class="field"><input type="text" id="addr_street" class="gui-input" value=""></label>
				</div>
			</div>

			<div class="section row mb10">
				<label for="addr_city" class="field-label col-sm-4 text-right">Address City</label>
				<div class="col-sm-8">
					<label for="addr_city" class="field"><input type="text" id="addr_city" class="gui-input" value=""></label>
				</div>
			</div>

			<div id="state_form" class="section row mb10">
				<label for="state" class="field-label col-sm-4 text-right">Address State</label>
				<div class="col-sm-8">
					<select id="state" class="form-control">
					<option value="">State</option>
					@foreach($states as $state)
					<option value="{{ $state->state_name }}">{{ $state->state_name }}</option>
					@endforeach
					</select>
				</div>
			</div>
		</div>
	</div>

</div>
<div class="text-right smart-widget" style="position:relative;max-width:800px;">
	<a href="/admin/school{{ Request::has('b_q') ? '?'.Request::input('b_q') : '' }}" class="btn btn-default" style="position:absolute;left:0;width:100px;">Return List</a>
	@if(isset($user))
	<button type="reset" class="btn btn-default" style="width:80px;">Cancel</button>
	<button id="btn_delete" type="button" class="btn btn-primary" style="width:80px;">Delete</button>
	<button id="btn_modify" type="button" class="btn btn-primary" style="width:80px;">Edit</button>
	@else
	<button id="btn_write" type="button" class="btn btn-primary" style="width:80px;">Save</button>
	@endif
</div>
</form>

@endsection



@section('script')>

  <script type="text/javascript">
  jQuery(document).ready(function() {

    "use strict";

    $('#btn_write').on('click', function() {

		var formData = new FormData();
		formData.append("grade_id", $('#grade_id').val());
		formData.append("email", $('#email').val());
		formData.append("student_id", $('#student_id').val());
		formData.append("phone", $('#phone').val());
		formData.append("state", $('#state').val());
		formData.append("addr_street", $('#addr_street').val());
		formData.append("addr_city", $('#addr_city').val());
		formData.append("password", $('#password').val());
		formData.append("firstname", $('#firstname').val());
		formData.append("lastname", $('#lastname').val());
		formData.append("birth", $('#birth').val());
		formData.append("sex", $('input[name=sex]:checked').val());

		$.ajax({
			method: "post",
			url: "/api/user",
			data: formData,
			processData: false,
			contentType: false,
		})
		.success(function( msg ) {
			alert('Success Write.');
			location.href = '/admin/role';
		})
		.fail(function( a ) {
			alert(a.responseJSON.msg);
		});
    });


  });
  </script>
@endsection