@extends('account.layout')

@section('account_content')
<div class="space-y-8">
    <div>
        <h2 class="text-2xl font-bold text-gray-900">Change Password</h2>
        <p class="mt-2 text-base text-gray-500">Update your password</p>
    </div>
    <hr class="border-t border-gray-200">
    <form action="{{ route('account.password') }}" method="POST" class="space-y-8">
        @csrf
        <div class="grid grid-cols-1 gap-y-6 gap-x-8 sm:grid-cols-6">
            <div class="sm:col-span-3">
                <label for="current_password" class="block text-base font-medium text-gray-700">Current Password</label>
                <div class="mt-2">
                    <input type="password" name="current_password" id="current_password" class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-yellow-500 focus:border-yellow-500">
                </div>
                @error('current_password')
                    <p class="mt-2 text-base text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div class="sm:col-span-3">
                <label for="password" class="block text-base font-medium text-gray-700">New Password</label>
                <div class="mt-2">
                    <input type="password" name="password" id="password" class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-yellow-500 focus:border-yellow-500">
                </div>
                @error('password')
                    <p class="mt-2 text-base text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div class="sm:col-span-3">
                <label for="password_confirmation" class="block text-base font-medium text-gray-700">Confirm New Password</label>
                <div class="mt-2">
                    <input type="password" name="password_confirmation" id="password_confirmation" class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-yellow-500 focus:border-yellow-500">
                </div>
            </div>
        </div>

        <div class="pt-6">
            <div class="flex justify-end">
                <button type="submit" class="px-6 py-3 font-medium bg-red-700 text-white rounded-lg hover:bg-red-800 transition-colors duration-300">
                    Update Password
                </button>
            </div>
        </div>
    </form>
</div>
@endsection