@extends('layouts.app')

@section('title') Profile @endsection

@section('content')
<div class="container py-5">
	<div class="heading-box">
		<h1 class="heading display-4">Your Profile</h1>
	</div>

	<div class="row">
		<div class="col-lg-8 col-xl-9">
			<div class="card mb-5">
				<div class="card-header">
					<h6 class="card-title">Personal Details</h6>
				</div>

				<div class="card-body">
					<form id="form-profile" action="{{ route('me.update') }}" method="POST">
						<div class="mb-3">
							<div class="row gy-3">
								<div class="col-sm-6">
									<label class="form-label">Tier</label>
									<div class="form-control-plaintext">{{ $me->tier }}</div>
								</div>
							</div>
						</div>

						<div class="mb-3">
							<div class="row gy-3">
								<div class="col-sm-6">
									<label class="form-label">Credit Limit</label>
									<div class="form-control-plaintext">{{ $me->credit_limit }}</div>
								</div>

								<div class="col-sm-6">
									<label class="form-label">Credit Balance</label>
									<div class="form-control-plaintext">{{ $me->credit_balance }}</div>
								</div>
							</div>
						</div>

						<div class="mb-3">
							<div class="row gy-3">
								<div class="col-sm-6">
									<label for="first_name" class="form-label">First Name</label>
									<input type="text" id="first_name" class="form-control form-control-lg" name="first_name" value="{{ $me->first_name }}">
								</div>

								<div class="col-sm-6">
									<label for="last_name" class="form-label">Last Name</label>
									<input type="text" id="last_name" class="form-control form-control-lg" name="last_name" value="{{ $me->last_name }}">
								</div>
							</div>
						</div>

						<div class="mb-3">
							<label for="email" class="form-label">Email</label>
							<input type="text" id="email" class="form-control form-control-lg" name="email" value="{{ $me->email }}">
						</div>
						
						<div class="mt-4 text-center">
							<button type="submit" class="btn btn-outline-dark">
								<i class="fas fa-pencil-alt"></i> Save Changes
							</button>
						</div>
					</form>
				</div>
			</div>

			<div class="card mb-5">
				<div class="card-header">
					<h6 class="card-title">Change Your Password</h6>
				</div>

				<div class="card-body">
					<form id="form-password" action="{{ route('me.password.update') }}" method="POST">
						<div class="mb-3 row">
							<div class="col-sm-6">
								<label class="form-label" for="currentPassword">Current Password</label>
								<input type="password" id="currentPassword" class="form-control form-control-lg" name="current_password" autocomplete="off">
							</div>
						</div>

						<div class="mb-3 row">
							<div class="col-sm-6">
								<label class="form-label" for="newPassword">New Password</label>
								<input type="password" id="newPassword" class="form-control form-control-lg" name="new_password" autocomplete="off">
							</div>

							<div class="col-sm-6">
								<label class="form-label" for="newPasswordConfirmation">Confirm New Password</label>
								<input type="password" id="newPasswordConfirmation" class="form-control form-control-lg" name="new_password_confirmation" autocomplete="off">
							</div>
						</div>

						<div class="text-center mt-4">
							<button type="submit" class="btn btn-outline-dark">
								<i class="fas fa-pencil-alt"></i> Change Password
							</button>
						</div>
					</form>
				</div>
			</div>
		</div>

		<div class="col-xl-3 col-lg-4">
			@include('partials.customer_sidebar')
		</div>
	</div>
</div>
@endsection

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

        let form = $(this);

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

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

	$('#form-password, #form-invitation').submit(function(e)
	{
		e.preventDefault();

        let form = $(this);

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

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

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