<section class="space-y-6">
    <header>
        <h2 class="text-lg font-medium text-white">
            {{ app()->getLocale() == 'ar' ? 'حذف الحساب' : 'Delete Account' }}
        </h2>

        <p class="mt-1 text-sm text-gray-400">
            {{ app()->getLocale() == 'ar' ? 'بمجرد حذف حسابك، سيتم حذف جميع موارده وبياناته نهائيًا. قبل حذف حسابك، يرجى تنزيل أي بيانات أو معلومات ترغب في الاحتفاظ بها.' : 'Once your account is deleted, all of its resources and data will be permanently deleted. Before deleting your account, please download any data or information that you wish to retain.' }}
        </p>
    </header>

    <button
        x-data=""
        x-on:click.prevent="$dispatch('open-modal', 'confirm-user-deletion')"
        class="bg-red-600 text-white px-6 py-2 rounded font-bold hover:bg-red-700 transition-colors"
    >{{ app()->getLocale() == 'ar' ? 'حذف الحساب' : 'Delete Account' }}</button>

    <x-modal name="confirm-user-deletion" :show="$errors->userDeletion->isNotEmpty()" focusable>
        <form method="post" action="{{ route('profile.destroy') }}" class="p-6 bg-[#111] border border-gray-800">
            @csrf
            @method('delete')

            <h2 class="text-lg font-medium text-white">
                {{ app()->getLocale() == 'ar' ? 'هل أنت متأكد أنك تريد حذف حسابك؟' : 'Are you sure you want to delete your account?' }}
            </h2>

            <p class="mt-1 text-sm text-gray-400">
                {{ app()->getLocale() == 'ar' ? 'بمجرد حذف حسابك، سيتم حذف جميع موارده وبياناته نهائيًا. يرجى إدخال كلمة المرور الخاصة بك لتأكيد رغبتك في حذف حسابك نهائيًا.' : 'Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.' }}
            </p>

            <div class="mt-6">
                <x-input-label for="password" value="{{ app()->getLocale() == 'ar' ? 'كلمة المرور' : 'Password' }}" class="sr-only" />

                <x-text-input
                    id="password"
                    name="password"
                    type="password"
                    class="mt-1 block w-3/4 bg-black border-gray-800 text-white focus:border-[#d4af37] focus:ring-[#d4af37]"
                    placeholder="{{ app()->getLocale() == 'ar' ? 'كلمة المرور' : 'Password' }}"
                />

                <x-input-error :messages="$errors->userDeletion->get('password')" class="mt-2" />
            </div>

            <div class="mt-6 flex justify-end">
                <button type="button" x-on:click="$dispatch('close')" class="px-6 py-2 rounded border border-gray-800 text-gray-400 mr-3">
                    {{ app()->getLocale() == 'ar' ? 'إلغاء' : 'Cancel' }}
                </button>

                <button type="submit" class="bg-red-600 text-white px-6 py-2 rounded font-bold hover:bg-red-700 transition-colors">
                    {{ app()->getLocale() == 'ar' ? 'حذف الحساب' : 'Delete Account' }}
                </button>
            </div>
        </form>
    </x-modal>
</section>
