@extends('layouts.app')

@section('title') Profile @endsection

@section('content')
<div class="container">
	<div class="row">
		<div class="col-xl-3 col-lg-4 py-5" style="background: #fff8e8;">
			@include('partials.customer_sidebar')
		</div>
		<div class="col-lg-8 col-xl-9 py-5">
			<div class="mb-5">
				<div>
					<p>My Profile</p>
					<p>Manage and Protect your account</p>
				</div>
				<hr>

				<div class="card-body">
					<form id="form-profile" action="{{ route('me.update') }}" method="POST">
						<div class="form-group">
							<div class="form-group row">
								<div class="col-sm-2">
									<label class="form-label" for="first-name">First Name</label>
								</div>
								<div class="col-sm-10">
									<input type="text" id="first-name" class="form-control-plaintext" name="first_name" value="{{ $user->first_name }}">
								</div>

								<div class="col-sm-2">
									<label class="form-label" for="lastName">Last Name</label>
								</div>
								<div class="col-sm-10">
									<input type="text" id="last-name" class="form-control-plaintext" name="last_name" value="{{ $user->last_name }}">
								</div>
							</div>
						</div>

						<div class="form-group row">
							<div class="col-sm-2">
								<label class="form-label" for="identity-number">Identity Number</label>
							</div>
							<div class="col-sm-10">
								<input type="text" id="identity-number" class="form-control-plaintext" name="identity_number" value="{{ $user->identity_number }}">
							</div>
						</div>

						<div class="form-group row">
							<div class="col-sm-2">
								<label class="form-label" for="email">Email</label>
							</div>
							<div class="col-sm-10">
								<input type="text" id="email" class="form-control-plaintext" name="email" value="{{ $user->email }}">
							</div>
						</div>

						<div class="form-group row">
							<div class="col-sm-2">
								<label class="form-label" for="phone-number">Phone Number</label>
							</div>
							<div class="col-sm-10">
								<input type="text" id="phone-number" class="form-control-plaintext" name="phone_number" value="{{ $user->phone_number }}" readonly>
							</div>
						</div>

						<div class="form-group row">
							<div class="col-sm-2">
								<label class="form-label" for="point">Point</label>
							</div>
							<div class="col-sm-10">
								<div class="input-group">
									<input type="text" id="point" class="form-control-plaintext" name="points" value="{{ $user->point }}" readonly>
								</div>
							</div>
						</div>

						<div class="form-group row">
							<div class="col-sm-2">
								<label class="form-label" for="point">Member Expiry</label>
							</div>
							<div class="col-sm-10">
								<div class="input-group">
									<input type="text" id="member_expiry" class="form-control-plaintext" name="member_expired" value="@if($user->member_expiry > 0){{ $user->member_expiry }}@else-@endif" readonly>
								</div>
							</div>
						</div>

						<div class="mt-4">
							<button type="submit" class="btn btn-login">
								Save
							</button>
						</div>
					</form>
				</div>
			</div>

			<div>
				<div class="card-header">
					<p>Change Your Password</p>
				</div>

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

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

						<div class="form-group row">
							<div class="col-sm-3">
								<label class="form-label" for="newPasswordConfirmation">Confirm New Password</label>
							</div>
							<div class="col-sm-9">
								<input type="password" id="newPasswordConfirmation" class="form-control-plaintext" name="new_password_confirmation" autocomplete="off">
							</div>
						</div>

						<div class="mt-4">
							<button type="submit" class="btn btn-login">
								Change Password
							</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>

<div id="modal-guide" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Poin Withdrawal Guide</h5>

				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
	                <i class="fas fa-times"></i>
	            </button>
	        </div>

			<div class="modal-body">
				<img src="{{ $setting->point_withdrawal_guide }}" class="img-fluid">
			</div>
		</div>
	</div>
</div>

<div id="modal-qrcode" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Referrer QRcode</h5>

	            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
	                <i class="fas fa-times"></i>
	            </button>
	        </div>

			<div class="modal-body">
				<img src="https://chart.googleapis.com/chart?cht=qr&chs=450x450&chl={{ route('login', ['referrer' => $user->referrer_code]) }}" class="img-fluid">
			</div>
		</div>
	</div>
</div>
@endsection

@section('js')
<script>
	$('#btn-copy').click(function()
	{
		let input = $('#referrer-link')[0];

	  	input.select();
	  	input.setSelectionRange(0, 99999);

	  	document.execCommand('copy');

	  	showNoty({
	  		status: 'success',
	  		message: 'Copied!'
	  	})
	});

    $('#form-profile').submit(function(e)
    {
        $.Event(e).preventDefault();

        let form = $(this);

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

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

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

        let 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