@extends('layouts.app')

@section('title', $site->name . ' - WordPress Sistem Bilgileri')

@php
    use Illuminate\Support\Str;
@endphp

@section('content')
    <div class="px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <h1 class="text-2xl font-semibold text-gray-900 flex items-center gap-3">
                    <span class="inline-flex h-11 w-11 items-center justify-center rounded-full bg-indigo-600/10 text-indigo-600">
                        <i class="fas fa-server"></i>
                    </span>
                    {{ $site->name }} — WordPress Sistem Bilgileri
                </h1>
                <p class="mt-1 text-sm text-gray-600">
                    WordPress sürümü, PHP sürümü ve kritik eklenti durumlarını bu sayfadan takip edebilirsiniz.
                </p>
            </div>
            <div class="flex flex-col gap-2 sm:flex-row sm:items-center">
                <a href="{{ route('sites.show', $site) }}"
                    class="inline-flex items-center justify-center gap-2 rounded-full border border-gray-200 px-4 py-2 text-sm font-semibold text-gray-600 transition hover:bg-gray-50">
                    <i class="fas fa-arrow-left"></i>
                    Site Detayına Dön
                </a>
                @if ($canManageSite && !empty($site->api_secret))
                    <form action="{{ route('sites.sync-system-info', $site) }}" method="POST"
                        class="inline-flex">
                        @csrf
                        <button type="submit"
                            class="inline-flex items-center justify-center gap-2 rounded-full bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow transition hover:bg-indigo-500"
                            onclick="return confirm('WordPress sistem bilgileri GSP Connector üzerinden yenilenecek. Devam edilsin mi?')">
                            <i class="fas fa-sync-alt"></i>
                            Sistem Bilgilerini Güncelle
                        </button>
                    </form>
                @endif
            </div>
        </div>

        <div class="mt-6 grid gap-6 md:grid-cols-2">
            <div class="rounded-2xl border border-indigo-100 bg-white/90 shadow-sm">
                <div class="px-6 py-5 border-b border-indigo-50">
                    <h2 class="text-lg font-semibold text-gray-900 flex items-center gap-2">
                        <i class="fas fa-info-circle text-indigo-500"></i>
                        Özet
                    </h2>
                    <p class="mt-1 text-sm text-gray-600">
                        API durumu ve eşzamanlama zamanı bilgilerini aşağıdan kontrol edebilirsiniz.
                    </p>
                </div>
                <dl class="px-6 py-5 grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <dt class="text-xs font-medium uppercase tracking-wide text-gray-500">
                            API Durumu
                        </dt>
                        <dd class="mt-1">
                            <span
                                class="inline-flex items-center gap-2 rounded-full px-3 py-1 text-sm font-semibold {{ $hasSystemInfo ? 'bg-emerald-100 text-emerald-700' : 'bg-gray-100 text-gray-600' }}">
                                <i class="fas {{ $hasSystemInfo ? 'fa-check-circle' : 'fa-hourglass-half' }}"></i>
                                {{ $hasSystemInfo ? 'Güncel' : 'Bekleniyor' }}
                            </span>
                        </dd>
                    </div>
                    <div>
                        <dt class="text-xs font-medium uppercase tracking-wide text-gray-500">
                            Son Senkronizasyon
                        </dt>
                        <dd class="mt-1 text-sm text-gray-900">
                            @if ($systemInfoSyncedAt)
                                {{ $systemInfoSyncedAt->format('d.m.Y H:i') }}
                                <span class="ml-2 text-xs text-gray-500">
                                    ({{ $systemInfoSyncedAt->diffForHumans() }})
                                </span>
                            @else
                                Henüz senkronize edilmedi
                            @endif
                        </dd>
                    </div>
                    <div>
                        <dt class="text-xs font-medium uppercase tracking-wide text-gray-500">
                            Bekleyen Güncellemeler
                        </dt>
                        <dd class="mt-1 text-sm font-semibold {{ $pluginsWithUpdates > 0 ? 'text-rose-600' : 'text-emerald-600' }}">
                            {{ $pluginsWithUpdates > 0 ? $pluginsWithUpdates . ' eklenti için güncelleme mevcut' : 'Tüm eklentiler güncel' }}
                        </dd>
                    </div>
                    <div>
                        <dt class="text-xs font-medium uppercase tracking-wide text-gray-500">
                            Otomatik Kontrol
                        </dt>
                        <dd class="mt-1 text-sm text-gray-900">
                            {{ $shouldAutoSync ? 'Süre dolduğunda otomatik kontrol edilecek' : 'Elle senkronizasyon gerekli' }}
                        </dd>
                    </div>
                </dl>
            </div>

            <div class="rounded-2xl border border-indigo-100 bg-white/90 shadow-sm">
                <div class="px-6 py-5 border-b border-indigo-50">
                    <h2 class="text-lg font-semibold text-gray-900 flex items-center gap-2">
                        <i class="fas fa-plug text-indigo-500"></i>
                        WordPress Bağlantı Bilgileri
                    </h2>
                </div>
                <dl class="px-6 py-5 space-y-4 text-sm text-gray-700">
                    <div>
                        <dt class="text-xs font-medium uppercase tracking-wide text-gray-500">Site URL</dt>
                        <dd class="mt-1">
                            <a href="{{ $site->url }}" target="_blank" class="text-indigo-600 hover:text-indigo-800">
                                {{ $site->url }}
                            </a>
                        </dd>
                    </div>
                    <div>
                        <dt class="text-xs font-medium uppercase tracking-wide text-gray-500">API Anahtarı</dt>
                        <dd class="mt-1">
                            @if (!empty($site->api_secret))
                                <span class="inline-flex items-center gap-2 rounded-full bg-emerald-100 px-3 py-1 text-xs font-semibold text-emerald-700">
                                    <i class="fas fa-key"></i>
                                    Tanımlı
                                </span>
                            @else
                                <span class="inline-flex items-center gap-2 rounded-full bg-rose-100 px-3 py-1 text-xs font-semibold text-rose-700">
                                    <i class="fas fa-exclamation-triangle"></i>
                                    Tanımlı değil
                                </span>
                            @endif
                        </dd>
                    </div>
                    <div>
                        <dt class="text-xs font-medium uppercase tracking-wide text-gray-500">Sistem Bilgisi Sınırı</dt>
                        <dd class="mt-1">
                            {{ $autoSyncThresholdMinutes }} dakika
                            <span class="text-xs text-gray-500"> (otomatik kontrol aralığı)</span>
                        </dd>
                    </div>
                    <div>
                        <dt class="text-xs font-medium uppercase tracking-wide text-gray-500">Sorumlu Kullanıcı</dt>
                        <dd class="mt-1">
                            {{ optional($site->assignedUser)->name ?? 'Atanmamış' }}
                        </dd>
                    </div>
                </dl>
            </div>
        </div>

        @php
            $canSync = $canManageSite && !empty($site->api_secret);
        @endphp

        <div id="system-info-card" class="mt-8 bg-white shadow rounded-2xl border border-indigo-100 p-6"
            data-can-sync="{{ $canSync ? '1' : '0' }}"
            data-auto-sync="{{ $shouldAutoSync ? '1' : '0' }}"
            data-endpoint="{{ route('sites.system-info.auto-refresh', $site) }}"
            data-last-synced="{{ optional($systemInfoSyncedAt)->toIso8601String() }}"
            data-threshold-minutes="{{ $autoSyncThresholdMinutes }}">
            <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                <div>
                    <h3 class="text-lg font-semibold text-gray-900 flex items-center gap-2">
                        <i class="fas fa-wrench text-indigo-500"></i>
                        WordPress Sistem Bilgileri
                    </h3>
                    <p class="mt-1 text-sm text-gray-600">
                        Aşağıdaki veriler GSP Connector üzerinden kaydedilen son sistem bilgisini temsil eder.
                    </p>
                </div>
                <div class="flex items-center gap-2 text-sm text-gray-500">
                    <i class="fas fa-clock"></i>
                    <span>
                        @if ($systemInfoSyncedAt)
                            Son kontrol {{ $systemInfoSyncedAt->diffForHumans() }}
                        @else
                            Henüz senkronize edilmedi
                        @endif
                    </span>
                </div>
            </div>
            <div id="system-info-sync-indicator" class="mt-4 text-xs text-gray-500 hidden"></div>

            <dl class="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-3">
                <div class="rounded-lg border border-indigo-50 bg-indigo-50/60 px-4 py-3">
                    <dt class="text-xs font-medium uppercase tracking-wide text-indigo-500">PHP Sürümü</dt>
                    <dd class="mt-2 text-base font-semibold text-gray-900">
                        {{ $site->php_version ?? 'Veri yok' }}
                    </dd>
                </div>
                <div class="rounded-lg border border-indigo-50 bg-indigo-50/60 px-4 py-3">
                    <dt class="text-xs font-medium uppercase tracking-wide text-indigo-500">WordPress Sürümü</dt>
                    <dd class="mt-2 text-base font-semibold text-gray-900">
                        {{ $site->wp_version ?? 'Veri yok' }}
                    </dd>
                </div>
                <div class="rounded-lg border border-indigo-50 bg-indigo-50/60 px-4 py-3">
                    <dt class="text-xs font-medium uppercase tracking-wide text-indigo-500">API Durumu</dt>
                    <dd class="mt-2">
                        <span
                            class="inline-flex items-center gap-2 rounded-full px-3 py-1 text-sm font-semibold {{ $hasSystemInfo ? 'bg-emerald-100 text-emerald-700' : 'bg-gray-100 text-gray-600' }}">
                            <i class="fas {{ $hasSystemInfo ? 'fa-check-circle' : 'fa-info-circle' }}"></i>
                            {{ $hasSystemInfo ? 'Güncel' : 'Bekleniyor' }}
                        </span>
                    </dd>
                </div>
            </dl>

            <div class="mt-8" id="plugin-list-container">
                <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
                    <div>
                        <h4 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                            <i class="fas fa-cubes text-indigo-500"></i>
                            Kritik Eklenti Durumları
                        </h4>
                        <p class="text-xs text-gray-500">Etkin eklentileri buradan inceleyebilir, durumlarını yönetebilirsiniz.</p>
                    </div>
                    <span id="plugin-update-count" data-count="{{ $pluginsWithUpdates }}"
                        class="inline-flex items-center gap-2 text-xs font-semibold text-rose-600 {{ $pluginsWithUpdates > 0 ? '' : 'hidden' }}">
                        <i class="fas fa-exclamation-circle"></i>
                        <span data-role="count-label">{{ $pluginsWithUpdates }} eklenti için güncelleme mevcut</span>
                    </span>
                </div>

                @if (!empty($systemPlugins))
                    <ul id="plugin-list" class="mt-4 divide-y divide-gray-200 rounded-2xl border border-gray-200 bg-white/60">
                        @foreach ($systemPlugins as $plugin)
                            @php
                                $name = $plugin['name'] ?? 'Bilinmeyen Eklenti';
                                $status = $plugin['status'] ?? ($plugin['active'] ?? false ? 'active' : null);
                                $version = $plugin['version'] ?? null;
                                $latest = $plugin['latest_version'] ?? null;
                                $updateAvailable = !empty($plugin['update_available']);
                                $file = $plugin['file'] ?? null;
                                $isActive = $plugin['active'] ?? Str::lower($status ?? '') === 'active';
                            @endphp
                            <li class="px-4 py-4 text-sm text-gray-700 plugin-item"
                                data-plugin-file="{{ $file }}">
                                <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                                    <div>
                                        <div class="flex items-center gap-2">
                                            <span class="font-semibold text-gray-900">{{ $name }}</span>
                                            @if ($isActive)
                                                <span class="inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-semibold text-emerald-700">
                                                    <i class="fas fa-toggle-on"></i> Aktif
                                                </span>
                                            @else
                                                <span class="inline-flex items-center gap-1 rounded-full bg-gray-100 px-2 py-0.5 text-xs font-semibold text-gray-600">
                                                    <i class="fas fa-toggle-off"></i> Pasif
                                                </span>
                                            @endif
                                        </div>
                                        <div class="mt-2 flex flex-wrap items-center gap-3 text-xs text-gray-500">
                                            @if ($status)
                                                <span class="inline-flex items-center gap-1">
                                                    <i class="fas fa-layer-group"></i> {{ Str::title($status) }}
                                                </span>
                                            @endif
                                            @if (!empty($plugin['file']))
                                                <span class="inline-flex items-center gap-1">
                                                    <i class="fas fa-folder-open"></i> {{ $plugin['file'] }}
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="flex flex-col items-start gap-2 lg:items-end">
                                        <span
                                            class="inline-flex items-center gap-2 text-sm font-semibold {{ $updateAvailable ? 'text-rose-600' : 'text-gray-900' }}"
                                            data-role="current-version">
                                            <i class="fas {{ $updateAvailable ? 'fa-exclamation-triangle text-rose-500' : 'fa-check-circle text-emerald-500' }}"
                                                data-role="current-version-icon"></i>
                                            <span data-role="current-version-value">{{ $version ?? 'Versiyon yok' }}</span>
                                        </span>
                                        <span
                                            class="inline-flex items-center gap-2 text-xs {{ $updateAvailable ? 'text-rose-500' : 'text-gray-500' }} {{ $latest ? '' : 'hidden' }}"
                                            data-role="latest-version-wrapper">
                                            <i class="fas {{ $updateAvailable ? 'fa-arrow-circle-up' : 'fa-code-branch' }}"
                                                data-role="latest-version-icon"></i>
                                            Son sürüm: <span data-role="latest-version-value">{{ $latest ?? '-' }}</span>
                                        </span>

                                        @if ($file && $canManageSite)
                                            <div class="mt-2 flex flex-wrap items-center gap-2">
                                                <form action="{{ route('sites.toggle-plugin', $site) }}" method="POST">
                                                    @csrf
                                                    <input type="hidden" name="plugin_file" value="{{ $file }}">
                                                    <input type="hidden" name="action" value="{{ $isActive ? 'deactivate' : 'activate' }}">
                                                    <button type="submit"
                                                        class="inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-semibold transition {{ $isActive ? 'bg-rose-100 text-rose-600 hover:bg-rose-200' : 'bg-emerald-100 text-emerald-600 hover:bg-emerald-200' }}"
                                                        onclick="return confirm('{{ $name }} eklentisini {{ $isActive ? 'devre dışı bırakmak' : 'etkinleştirmek' }} istediğinize emin misiniz?')">
                                                        <i class="fas {{ $isActive ? 'fa-toggle-off' : 'fa-toggle-on' }}"></i>
                                                        {{ $isActive ? 'Devre Dışı Bırak' : 'Etkinleştir' }}
                                                    </button>
                                                </form>
                                                @if ($updateAvailable)
                                                    <button type="button"
                                                        class="update-plugin-btn inline-flex items-center gap-2 rounded-full bg-rose-100 px-3 py-1 text-xs font-semibold text-rose-600 transition hover:bg-rose-200"
                                                        data-plugin-file="{{ $file }}"
                                                        data-plugin-name="{{ $name }}"
                                                        data-update-url="{{ route('sites.update-plugin', $site) }}">
                                                        <i class="fas fa-sync"></i> Güncelle
                                                    </button>
                                                @endif
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                @else
                    <div class="mt-4 rounded-2xl border border-dashed border-indigo-200 bg-indigo-50/50 px-5 py-4 text-sm text-indigo-700">
                        <i class="fas fa-info-circle mr-2"></i>
                        Henüz sistem bilgisi kaydedilmemiş. Yukarıdaki <strong>Sistem Bilgilerini Güncelle</strong> butonu ile verileri çekebilirsiniz.
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const csrfToken = '{{ csrf_token() }}';
            const pluginUpdateCount = document.getElementById('plugin-update-count');
            const systemInfoCard = document.getElementById('system-info-card');
            const systemInfoIndicator = document.getElementById('system-info-sync-indicator');

            function updateBadge(delta) {
                if (!pluginUpdateCount) {
                    return;
                }

                const current = parseInt(pluginUpdateCount.dataset.count || '0', 10);
                const next = Math.max(0, current + delta);
                pluginUpdateCount.dataset.count = next.toString();

                const label = pluginUpdateCount.querySelector('[data-role="count-label"]');
                if (label) {
                    label.textContent = next > 0 ? `${next} eklenti için güncelleme mevcut` : '';
                }

                pluginUpdateCount.classList.toggle('hidden', next === 0);
            }

            function updatePluginRow(button, plugin) {
                const item = button.closest('.plugin-item');
                if (!item || !plugin) {
                    return;
                }

                item.dataset.pluginFile = plugin.file || '';

                const versionWrapper = item.querySelector('[data-role="current-version"]');
                const versionValue = item.querySelector('[data-role="current-version-value"]');
                const versionIcon = item.querySelector('[data-role="current-version-icon"]');
                const latestWrapper = item.querySelector('[data-role="latest-version-wrapper"]');
                const latestValue = item.querySelector('[data-role="latest-version-value"]');
                const latestIcon = item.querySelector('[data-role="latest-version-icon"]');

                const updateAvailable = !!plugin.update_available;

                if (versionWrapper) {
                    versionWrapper.classList.toggle('text-rose-600', updateAvailable);
                    versionWrapper.classList.toggle('text-gray-900', !updateAvailable);
                }

                if (versionValue) {
                    versionValue.textContent = plugin.version || 'Versiyon yok';
                }

                if (versionIcon) {
                    versionIcon.className = updateAvailable
                        ? 'fas fa-exclamation-triangle text-rose-500'
                        : 'fas fa-check-circle text-emerald-500';
                }

                if (latestWrapper) {
                    if (plugin.latest_version) {
                        latestWrapper.classList.remove('hidden');
                        latestWrapper.classList.toggle('text-rose-500', updateAvailable);
                        latestWrapper.classList.toggle('text-gray-500', !updateAvailable);
                    } else {
                        latestWrapper.classList.add('hidden');
                    }
                }

                if (latestValue) {
                    latestValue.textContent = plugin.latest_version || '-';
                }

                if (latestIcon) {
                    latestIcon.className = updateAvailable ? 'fas fa-arrow-circle-up' : 'fas fa-code-branch';
                }

                if (!updateAvailable) {
                    updateBadge(-1);
                    button.classList.remove('bg-rose-100', 'text-rose-600', 'hover:bg-rose-200');
                    button.classList.add('bg-emerald-100', 'text-emerald-600', 'hover:bg-emerald-200');
                    button.innerHTML = '<i class="fas fa-check"></i> Güncel';
                    button.disabled = true;
                } else {
                    button.disabled = false;
                    button.innerHTML = '<i class="fas fa-sync"></i> Güncelle';
                }
            }

            async function autoSyncSystemInfo() {
                if (!systemInfoCard) {
                    return;
                }

                const canSync = systemInfoCard.dataset.canSync === '1';
                const shouldAutoSync = systemInfoCard.dataset.autoSync === '1';
                const endpoint = systemInfoCard.dataset.endpoint;

                if (!canSync || !endpoint) {
                    return;
                }

                if (systemInfoIndicator) {
                    systemInfoIndicator.classList.remove('text-rose-500', 'text-emerald-600');

                    if (shouldAutoSync) {
                        systemInfoIndicator.classList.remove('hidden');
                        systemInfoIndicator.innerHTML =
                            '<i class="fas fa-sync fa-spin"></i> Sistem bilgileri güncelleniyor...';
                    } else {
                        systemInfoIndicator.classList.add('hidden');
                    }
                }

                try {
                    const response = await fetch(endpoint, {
                        method: 'GET',
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        credentials: 'same-origin',
                    });

                    const data = await response.json().catch(() => ({}));

                    if (response.ok) {
                        if (data.status === 'refreshed') {
                            if (systemInfoIndicator) {
                                systemInfoIndicator.classList.add('text-emerald-600');
                                systemInfoIndicator.innerHTML =
                                    '<i class="fas fa-check-circle"></i> Sistem bilgileri güncellendi, sayfa yenileniyor...';
                            }

                            setTimeout(() => window.location.reload(), 1200);
                        } else if (data.status === 'cached') {
                            if (systemInfoIndicator && shouldAutoSync) {
                                systemInfoIndicator.classList.add('text-emerald-600');
                                const lastRefreshed = data.last_refreshed
                                    ? new Date(data.last_refreshed).toLocaleString('tr-TR')
                                    : 'az önce';
                                systemInfoIndicator.innerHTML =
                                    `<i class="fas fa-info-circle"></i> Sistem bilgileri güncel. Son kontrol: ${lastRefreshed}.`;
                                setTimeout(() => systemInfoIndicator.classList.add('hidden'), 4000);
                            }
                        } else {
                            const message = data?.message || 'Beklenmeyen yanıt.';

                            if (systemInfoIndicator && shouldAutoSync) {
                                systemInfoIndicator.classList.add('text-rose-500');
                                systemInfoIndicator.innerHTML =
                                    `<i class="fas fa-exclamation-circle"></i> Sistem bilgileri yenilenemedi: ${message}`;
                            }
                        }
                    } else {
                        const message = data?.message || 'Bilinmeyen hata.';

                        if (systemInfoIndicator && shouldAutoSync) {
                            systemInfoIndicator.classList.add('text-rose-500');
                            systemInfoIndicator.innerHTML =
                                `<i class="fas fa-exclamation-circle"></i> Sistem bilgileri yenilenemedi: ${message}`;
                        }
                    }
                } catch (error) {
                    console.error('Sistem bilgileri otomatik senkronizasyon hatası:', error);

                    if (systemInfoIndicator && shouldAutoSync) {
                        systemInfoIndicator.classList.add('text-rose-500');
                        systemInfoIndicator.innerHTML =
                            '<i class="fas fa-exclamation-circle"></i> Sistem bilgileri yenilenemedi: ağ hatası.';
                    }
                }
            }

            autoSyncSystemInfo();

            document.querySelectorAll('.update-plugin-btn').forEach((button) => {
                button.addEventListener('click', async (event) => {
                    event.preventDefault();

                    const pluginFile = button.dataset.pluginFile;
                    const pluginName = button.dataset.pluginName || pluginFile;
                    const updateUrl = button.dataset.updateUrl;
                    const originalHtml = button.innerHTML;

                    if (!pluginFile || !updateUrl) {
                        alert('Eklenti bilgileri eksik.');
                        return;
                    }

                    if (!confirm(`${pluginName} eklentisini güncellemek istediğinizden emin misiniz?`)) {
                        return;
                    }

                    button.disabled = true;
                    button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Güncelleniyor...';

                    try {
                        const response = await fetch(updateUrl, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'Accept': 'application/json',
                                'X-Requested-With': 'XMLHttpRequest',
                                'X-CSRF-TOKEN': csrfToken,
                            },
                            body: JSON.stringify({ plugin_file: pluginFile }),
                        });

                        const data = await response.json();

                        if (response.ok && data.status === 'success') {
                            alert(data.message || 'Eklenti güncellemesi tamamlandı.');

                            if (data.plugin) {
                                updatePluginRow(button, data.plugin);
                            } else {
                                button.classList.remove('bg-rose-100', 'text-rose-600', 'hover:bg-rose-200');
                                button.classList.add('bg-emerald-100', 'text-emerald-600', 'hover:bg-emerald-200');
                                button.innerHTML = '<i class="fas fa-check"></i> Başarılı';
                                button.disabled = true;
                                updateBadge(-1);
                            }
                        } else {
                            const message = data?.message || 'Bilinmeyen bir hata oluştu.';
                            alert('Güncelleme başarısız: ' + message);
                            button.disabled = false;
                            button.innerHTML = originalHtml;
                        }
                    } catch (error) {
                        console.error(error);
                        alert('Güncelleme başarısız: Ağ bağlantısı kurulamadı.');
                        button.disabled = false;
                        button.innerHTML = originalHtml;
                    }
                });
            });
        });
    </script>
@endpush