@extends('layout.app')

@section('content')
    <div class="space-y-6">
        <div class="flex  items-center justify-between">
            <div>
                <h1 class="text-2xl font-bold text-gray-900">Update Password</h1>
                <p class="text-sm text-gray-500 mt-1">Manage password</p>
            </div>
        </div>

        <div class="bg-white rounded-lg border border-gray-200">
            <div class="p-6 border-b border-gray-200">
                <h2 class="font-semibold text-gray-900">Change Password</h2>
            </div>

            <div class="flex justify-center items-center mt-5">

                <div class="w-full max-w-xl">

                    <form class="px-6 py-3 space-y-6" method="POST" action="{{ route('update-password') }}"
                        data-ajax="true">
                        @csrf

                        <div class="grid grid-cols-1 md:grid-cols-1 gap-6">

                            <div class="form-group">
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Old Password <span class="text-red-500">*</span>
                                </label>

                                <div class="relative">
                                    <input type="password" name="current_password"
                                        class="password-field w-full px-3 py-2 border border-gray-300 rounded-lg text-gray-900 pr-10">

                                    <span class="toggle-password absolute right-3 top-2.5 cursor-pointer text-gray-500">
                                        <i class="fa-solid fa-eye"></i>
                                    </span>
                                </div>

                                <p class="text-err text-red-500 text-sm italic"></p>
                            </div>


                            <div class="form-group">
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    New Password <span class="text-red-500">*</span>
                                </label>

                                <div class="relative">
                                    <input type="password" name="password"
                                        class="password-field w-full px-3 py-2 border border-gray-300 rounded-lg text-gray-900 pr-10">

                                    <span class="toggle-password absolute right-3 top-2.5 cursor-pointer text-gray-500">
                                        <i class="fa-solid fa-eye"></i>
                                    </span>
                                </div>

                                <p class="text-err text-red-500 text-sm italic"></p>
                            </div>


                            <div class="form-group">
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Confirm Password <span class="text-red-500">*</span>
                                </label>

                                <div class="relative">
                                    <input type="password" name="password_confirmation"
                                        class="password-field w-full px-3 py-2 border border-gray-300 rounded-lg text-gray-900 pr-10">

                                    <span class="toggle-password absolute right-3 top-2.5 cursor-pointer text-gray-500">
                                        <i class="fa-solid fa-eye"></i>
                                    </span>
                                </div>

                                <p class="text-err text-red-500 text-sm italic"></p>
                            </div>

                        </div>

                        <div class="flex justify-end gap-3 pt-6 border-t border-gray-200">
                            <button
                                class="px-6 py-2 text-sm text-white bg-blue-600 rounded-lg hover:bg-blue-700 cursor-pointer">
                                Save
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection