@extends('admin.layout')

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

@section('content')
<div class="container-fluid">

    <div class="row justify-content-center align-items-center" style="min-height: 80vh;">
        <div class="col-lg-4 col-md-6">

            {{-- Title --}}
            <div class="mb-3">
                <h5 class="fw-semibold">Reset Password</h5>
            </div>

            {{-- Card --}}
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4">

                    <form action="" method="POST">
                        @csrf

                        {{-- Current Password --}}
                        <div class="mb-3 position-relative">
                            <span class="position-absolute top-50 start-0 translate-middle-y ms-3 text-muted">
                                🔒
                            </span>
                            <input
                                type="password"
                                name="current_password"
                                class="form-control ps-5"
                                placeholder="Current Password"
                                required
                            >
                            <span class="position-absolute top-50 end-0 translate-middle-y me-3 text-muted">
                                👁
                            </span>
                        </div>

                        {{-- New Password --}}
                        <div class="mb-3 position-relative">
                            <span class="position-absolute top-50 start-0 translate-middle-y ms-3 text-muted">
                                🔒
                            </span>
                            <input
                                type="password"
                                name="password"
                                class="form-control ps-5"
                                placeholder="New Password"
                                required
                            >
                            <span class="position-absolute top-50 end-0 translate-middle-y me-3 text-muted">
                                👁
                            </span>
                        </div>

                        {{-- Confirm Password --}}
                        <div class="mb-4 position-relative">
                            <span class="position-absolute top-50 start-0 translate-middle-y ms-3 text-muted">
                                🔒
                            </span>
                            <input
                                type="password"
                                name="password_confirmation"
                                class="form-control ps-5"
                                placeholder="Confirm Password"
                                required
                            >
                            <span class="position-absolute top-50 end-0 translate-middle-y me-3 text-muted">
                                👁
                            </span>
                        </div>

                        {{-- Button --}}
                        <button type="submit" class="btn btn-warning w-100 py-2">
                            Reset Password
                        </button>

                    </form>

                </div>
            </div>

        </div>
    </div>

</div>
@endsection