@extends('layouts.admin')
@section('content')

@php $login_type = 'admin'; @endphp
<div class="row gap-20 masonry pos-r">
  	<div class="masonry-sizer col-md-12"></div>

		
		<div class="masonry-item col-md-12">
			<div class="bgc-white p-20 bd">
			<h6 class="c-grey-900">Change Password</h6>

				@if (session('error'))
					<div class="alert alert-danger alert-dismissible fade show" role="alert">
						{{ session('error') }}
						<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
					</div>
				@endif
				@if (session('success'))
					<div class="alert alert-success alert-dismissible fade show" role="alert">
						{{ session('success') }}
						<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
					</div>
				@endif

				<div class="mT-30">
					<form class="form-horizontal submitChangePasswordForm" method="POST" action="{{ url($login_type.'/change-password') }}">
						@csrf
						<div class="mb-3">
							<label class="form-label" for="exampleInputEmail1">Current Password <span class="bg-red">*</span></label>
							<input id="current-password" type="password" class="form-control" name="current-password" required>
							<div class="show-password">
								<label>
									<input type="checkbox" onclick="passwordVisibility('current-password')"> Show Password
								</label>
							</div>
							@if ($errors->has('current-password'))
								<div class="help-block text-danger mt-1">
									<strong>{{ $errors->first('current-password') }}</strong>
								</div>
							@endif
						</div>

						<div class="mb-3">
							<label class="form-label" for="exampleInputEmail1">New Password <span class="bg-red">*</span></label>
							<input id="new-password" type="password" class="form-control" name="new-password" required>
							<div class="show-password">
								<label>
									<input type="checkbox" onclick="passwordVisibility('new-password')"> Show Password
								</label>
							</div>
							@if ($errors->has('new-password'))
								<div class="help-block text-danger mt-1">
									<strong>{{ $errors->first('new-password') }}</strong>
								</div>
							@endif
						</div>

						<div class="mb-3">
							<label class="form-label" for="exampleInputEmail1">Confirm New Password <span class="bg-red">*</span></label>
							<input id="new-password-confirm" type="password" class="form-control" name="new-password_confirmation" required>
							<div class="show-password">
								<label>
									<input type="checkbox" onclick="passwordVisibility('new-password-confirm')"> Show Password 
								</label>
							</div>
						</div>
						<button type="submit" class="btn btn-primary btn-color" id="savePasswordButton">Submit</button>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>

<script>
    $("#saveEmailButton").on('click', function(e){
        e.preventDefault();
        $("#saveEmailButton").prop('disabled', true);
        $("#saveEmailButton").html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span> Submitting...');
        $("form.submitChangeEmailForm").submit();
    });

    $("#savePasswordButton").on('click', function(e){
        e.preventDefault();
        $("#savePasswordButton").prop('disabled', true);
        $("#savePasswordButton").html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span> Submitting...');
        $("form.submitChangePasswordForm").submit();
    });

	// function used to toogle the password visibility
	function passwordVisibility(passwordId) {
  		var x = document.getElementById(passwordId);
		if (x.type === "password") {
			x.type = "text";
		} else {
			x.type = "password";
		}
	}
</script>

@endsection