@extends('layouts.admin')

@section('title', 'Change Password')

@section('content')
	<div class="mb-3">
		<h1 class="h3 d-inline align-middle">Change Password</h1>
	</div>

	<div class="row">
		<div class="col-12 col-lg-8 col-xl-6">
			<div class="card">
				<div class="card-body">
					@if ($errors->any())
						<div class="alert alert-danger alert-dismissible" role="alert">
							<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
							<div class="alert-message">
								<strong>Couldn't change password.</strong>
								<ul class="m-0 mt-2 ps-3">
									@foreach ($errors->all() as $err)
										<li>{{ $err }}</li>
									@endforeach
								</ul>
							</div>
						</div>
					@endif

					<form method="POST" action="{{ route('admin.change-password.update') }}" autocomplete="off">
						@csrf

						<div class="mb-3">
							<label class="form-label" for="cp-current">Current Password <span class="text-danger">*</span></label>
							<div class="input-group">
								<input id="cp-current"
									type="password"
									name="current_password"
									class="form-control"
									autocomplete="current-password"
									required
									autofocus>
								<button type="button" class="btn btn-outline-secondary password-toggle" tabindex="-1" title="Show / hide password">
									<i class="fas fa-eye"></i>
								</button>
							</div>
						</div>

						<div class="mb-3">
							<label class="form-label" for="cp-new">New Password <span class="text-danger">*</span></label>
							<div class="input-group">
								<input id="cp-new"
									type="password"
									name="new_password"
									class="form-control"
									autocomplete="new-password"
									minlength="8"
									required>
								<button type="button" class="btn btn-outline-secondary password-toggle" tabindex="-1" title="Show / hide password">
									<i class="fas fa-eye"></i>
								</button>
							</div>
							<small class="text-muted">At least 8 characters. Must be different from your current password.</small>
						</div>

						<div class="mb-3">
							<label class="form-label" for="cp-confirm">Confirm New Password <span class="text-danger">*</span></label>
							<div class="input-group">
								<input id="cp-confirm"
									type="password"
									name="new_password_confirmation"
									class="form-control"
									autocomplete="new-password"
									minlength="8"
									required>
								<button type="button" class="btn btn-outline-secondary password-toggle" tabindex="-1" title="Show / hide password">
									<i class="fas fa-eye"></i>
								</button>
							</div>
						</div>

						<div class="d-flex gap-2 mt-4">
							<button type="submit" class="btn btn-primary">
								<i class="fas fa-key"></i> Change Password
							</button>
							<a href="{{ route('admin.dashboard') }}" class="btn btn-light">Cancel</a>
						</div>
					</form>
				</div>
				<div class="card-footer text-muted small">
					<i class="fas fa-info-circle"></i>
					Changing your password will sign you out of any other browsers / devices where you're logged in.
				</div>
			</div>
		</div>
	</div>
@endsection