@extends('layouts.app')

@section('content')
<div class="card">
	<form id="form-edit" action="{{ route('users.update') }}" method="POST">
		<div class="card-header">
			<h5 class="card-title">Edit 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" value="{{ $user->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" value="{{ $user->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" value="{{ $user->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" value="{{ $user->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" value="{{ $user->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="text" class="form-control" name="dob" value="{{ $user->dob }}">
					<small class="form-text text-muted">optional | Example:1991-01-01</small>
				</div>
			</div>
		</div>
		<input type="hidden" name="id" value="{{ $user->id }}">
	</form>
</div>

<div class="card">
	<form id="form-point" action="{{ route('users.point.update') }}" method="POST">
		<div class="card-header">
			<h5 class="card-title">Edit Point</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">Curent Point</label>

				<div class="col-md-10">
					<p class="form-control-plaintext">{{ $user->point }}</p>
				</div>
			</div>

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

				<div class="col-md-10">
					<div class="input-group">
						<input type="number" class="form-control" name="point" step="0.01">

						<div class="input-group-append">
							<span class="input-group-text">point</span>
						</div>
					</div>

					<small class="form-text text-muted">required</small>
				</div>
			</div>

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

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

		<input type="hidden" name="id" value="{{ $user->id }}">
	</form>
</div>
@endsection

@section('js')
<script>
	$('#btn-clear').click(function()
	{
		$('#list-user').addClass('d-none').empty();

		$('[name="keyword"]').val('');
		$('[name="upline_id"]').val('');
	});

	$('#btn-search').click(function()
	{
		$.ajax({
			url: `{{ route('users.search') }}`,
			data: {
				keyword: $('[name="keyword"]').val()
			},
			dataType: 'json'

		}).done(function(data)
		{
			let items = ['<button type="button" class="list-group-item list-group-item-action disabled">No record</button>'];

			if (data.data.users.length > 0)
			{
				items = data.data.users.map(function(user)
				{
					return `<button type="button" class="list-group-item list-group-item-action" data-user='${JSON.stringify(user)}'>${user.email}</button>`;
				});
			}

			$('#list-user').removeClass('d-none').html(items.join('\n'));
		});
	});

	$('#list-user').delegate('[data-user]', 'click', function()
	{
		const user = $(this).data('user');

		$('#list-user').addClass('d-none').empty();

		$('[name="keyword"]').val(user.email);
		$('[name="upline_id"]').val(user.id);
	});

	$('#form-edit').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);
		});
	});

	$('#form-point').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);

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