@extends('auth.layouts.app')
@section('title', 'Ganti Password | Career Development and Consultation (CDC)')
@section('content')
    <div class="d-flex flex-center flex-column flex-column-fluid">
        <div class="p-10 mx-auto w-lg-550px p-lg-15">
            <form action="{{ route('password.store') }}" method="POST" class="form w-100">
                @csrf
                <!-- Password Reset Token -->
                <input type="hidden" name="token" value="{{ $request->route('token') }}">

                <div class="mb-10 text-center">
                    <h1 class="mb-3 text-dark">Atur Ulang Password</h1>
                    <div class="text-gray-400 fw-bold fs-4">Sudah mengganti password ?
                        <a href="{{ route('login') }}">Masuk</a>
                    </div>
                </div>
                <div class="mb-10 fv-row">
                    <label class="form-label fw-bolder text-dark fs-6">Email</label>
                    <input class="form-control form-control-lg form-control-solid" type="email" name="email"
                        value="{{ old('email', $request->email) }}" autocomplete="off" />
                    @if ($errors->get('email'))
                        @foreach ((array) $errors->get('email') as $message)
                            <div class="fv-plugins-message-container invalid-feedback">
                                <span>{{ $message }}</span>
                            </div>
                        @endforeach
                    @endif
                </div>
                <div class="mb-10 fv-row" data-kt-password-meter="true">
                    <div class="mb-1">
                        <label class="form-label fw-bolder text-dark fs-6">Password</label>
                        <div class="mb-3 position-relative">
                            <input class="form-control form-control-lg form-control-solid" type="password" name="password"
                                autocomplete="off" required />
                            <span class="btn btn-sm btn-icon position-absolute translate-middle top-50 end-0 me-n2"
                                data-kt-password-meter-control="visibility">
                                <i class="bi bi-eye-slash fs-2"></i>
                                <i class="bi bi-eye fs-2 d-none"></i>
                            </span>
                        </div>
                        <div class="mb-3 d-flex align-items-center" data-kt-password-meter-control="highlight">
                            <div class="rounded flex-grow-1 bg-secondary bg-active-success h-5px me-2"></div>
                            <div class="rounded flex-grow-1 bg-secondary bg-active-success h-5px me-2"></div>
                            <div class="rounded flex-grow-1 bg-secondary bg-active-success h-5px me-2"></div>
                            <div class="rounded flex-grow-1 bg-secondary bg-active-success h-5px"></div>
                        </div>
                    </div>
                    @if ($errors->get('password'))
                        @foreach ((array) $errors->get('password') as $message)
                            <div class="fv-plugins-message-container invalid-feedback">
                                <span>{{ $message }}</span>
                            </div>
                        @endforeach
                    @endif
                </div>
                <div class="mb-10 fv-row">
                    <label class="form-label fw-bolder text-dark fs-6">Confirm Password</label>
                    <input class="form-control form-control-lg form-control-solid" type="password"
                        name="password_confirmation" autocomplete="off" required />
                    @if ($errors->get('password_confirmation'))
                        @foreach ((array) $errors->get('password_confirmation') as $message)
                            <div class="fv-plugins-message-container invalid-feedback">
                                <span>{{ $message }}</span>
                            </div>
                        @endforeach
                    @endif
                </div>
                <div class="text-center">
                    <button type="submit" class="btn btn-lg btn-primary fw-bolder">
                        <span class="indicator-label">Simpan</span>
                        <span class="indicator-progress">Loading...
                            <span class="align-middle spinner-border spinner-border-sm ms-2"></span></span>
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection