@extends('layouts.app')

@section('content')
<div class="card">
	<form id="form-create" action="{{ route('branches.store') }}" method="POST">
		<div class="card-header">
			<h5 class="card-title">New Branch</h5>

			<button type="submit" class="btn btn-dark"><i class="fas fa-save"></i> Save</button>
		</div>

		<div class="card-body">
			<div class="container-fluid">
				<div class="form-group row">
					<label class="col-md-2 col-form-label">Name</label>

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

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

					<div class="col-md-10">
						<textarea class="form-control" name="address" rows="4"></textarea>
						<small class="form-text text-muted">required</small>
					</div>
				</div>

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

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

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

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

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

					<div class="col-md-10">
						<div class="custom-control custom-checkbox">
							<input type="checkbox" id="hq" class="custom-control-input">
							<label class="custom-control-label" for="hq">Set as HQ</label>
						</div>
					</div>
				</div> -->
			</div>		
		</div>
	</form>
</div>
@endsection

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

		const form = $(this);

		$.ajax({
			url: $(this).attr('action'),
			type: $(this).attr('method'),
			data: new FormData(this),
			processData: false,
			contentType: false,

		}).done(function(data)
		{
			showNoty(data);

			if (data.status == 'success')
			{
				form[0].reset();
			}
		});
	});
</script>
@endsection