@extends('layouts.app')

@section('content')
<div class="card">
	<form id="form-add" action="{{ route('users.save') }}" method="POST">
		<div class="card-header">
			<h5 class="card-title">Add User</h5>

			<button type="submit" class="btn btn-dark"><i class="fas fa-save"></i> Save</button>
		</div>
		
		<div class="card-body">
			<div class="form-group row">
				<label class="col-md-2 col-form-label">First Name</label>

				<div class="col-md-10">
					<input type="text" class="form-control" name="first_name">
					<small class="form-text text-muted">required</small>
				</div>
			</div>

			<div class="form-group row">
				<label class="col-md-2 col-form-label">Last Name</label>

				<div class="col-md-10">
					<input type="text" class="form-control" name="last_name">
					<small class="form-text text-muted">optional</small>
				</div>
			</div>

			<div class="form-group row">
				<label class="col-md-2 col-form-label">Identity Number</label>

				<div class="col-md-10">
					<input type="text" class="form-control" name="identity_number">
					<small class="form-text text-muted">optional</small>
				</div>
			</div>

			<div class="form-group row">
				<label class="col-md-2 col-form-label">Email</label>

				<div class="col-md-10">
					<input type="text" class="form-control" name="email">
					<small class="form-text text-muted">required</small>
				</div>
			</div>

			<div class="form-group row">
				<label class="col-md-2 col-form-label">Phone Number</label>

				<div class="col-md-10">
					<input type="text" class="form-control" name="phone_number">
					<small class="form-text text-muted">required</small>
				</div>
			</div>

			<div class="form-group row">
				<label class="col-md-2 col-form-label">DOB</label>

				<div class="col-md-10">
					<input type="date" class="form-control" name="dob">
					<small class="form-text text-muted">optional | Example:1991-01-01</small>
				</div>
			</div>
		</div>
	</form>
</div>
@endsection

@section('js')
<script>
	$('#form-add').submit(function(e)
	{
		$.Event(e).preventDefault();

		const form = $(this);

		$.ajax({
			url: $(this).attr('action'),
			type: $(this).attr('method'),
			data: $(this).serialize(),
			dataType: 'json'

		}).done(function(data)
		{
			showNoty(data);
		});
	});
</script>
@endsection