@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <div class="sm:flex sm:items-center sm:justify-between">
        <div class="sm:flex-auto">
            <h1 class="text-3xl font-semibold text-gray-900 dark:text-gray-100">Dashboard</h1>
            <p class="mt-2 text-sm text-gray-700 dark:text-gray-300 dark:text-gray-500">
                Hoş geldiniz, {{ $user->name }}!
            </p>
        </div>
        <div class="mt-4 sm:mt-0 flex items-center gap-3">
            <button id="widget-edit-mode" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 focus:ring-offset-2 transition-all duration-200">
                <i class="fas fa-edit"></i>
                <span>Widget Düzenle</span>
            </button>
            <a href="{{ route('analytics.index') }}" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold text-white bg-indigo-600 hover:bg-indigo-500 dark:bg-indigo-600 dark:hover:bg-indigo-500 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 transition-all duration-200">
                <i class="fas fa-chart-bar"></i>
                Gelişmiş Analitik
            </a>
        </div>
    </div>

    <!-- Hızlı Kurulum Modülü (Developer için) -->
    @if($user->role === 'developer' && isset($quickSetupSteps))
    <div id="quick-setup-module" class="mt-6 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-lg shadow-lg p-6 text-white">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-2xl font-bold mb-2">Hızlı Kurulum</h2>
                <p class="text-indigo-100">Sitenizi adım adım kurun ve öğrenin</p>
            </div>
            <button id="start-quick-setup-btn" class="px-6 py-3 bg-white text-indigo-600 rounded-lg font-semibold hover:bg-indigo-50 transition-colors shadow-lg">
                <i class="fas fa-rocket mr-2"></i>
                Hadi Başlayalım
            </button>
        </div>
    </div>
    @endif

    <!-- Widget Grid -->
    @if($userWidgets->count() > 0)
    <div id="widget-grid" class="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6" data-edit-mode="false">
        @foreach($userWidgets as $userWidget)
        <div 
            class="widget-item h-full" 
            data-widget-id="{{ $userWidget->widget_id }}"
            data-user-dashboard-id="{{ $userWidget->id }}"
            data-x="{{ $userWidget->position_x }}"
            data-y="{{ $userWidget->position_y }}"
            data-width="{{ $userWidget->width }}"
            data-height="{{ $userWidget->height }}"
            style="grid-column: span {{ $userWidget->width }}; grid-row: span {{ $userWidget->height }};"
        >
            <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow h-full flex flex-col">
                <!-- Widget Header (Edit Mode) -->
                <div class="widget-header hidden absolute top-0 right-0 p-2 z-10">
                    <button class="widget-remove-btn text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 p-1" title="Kaldır">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <!-- Drag Handle (Edit Mode) -->
                <div class="widget-drag-handle hidden absolute top-2 left-2 cursor-move text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 z-20 p-2" title="Sürükleyerek taşı">
                    <i class="fas fa-grip-vertical"></i>
                </div>
                
                <!-- Widget Content -->
                <div class="widget-content flex-1">
                    @component($userWidget->widget->component, [
                        'settings' => $userWidget->settings ?? [],
                        'sites' => $sites ?? collect(),
                        'totalSites' => $totalSites ?? 0,
                        'user' => $user ?? null,
                        'stats' => $stats ?? [],
                        'developerKpis' => $developerKpis ?? [],
                        'performanceSnapshots' => $performanceSnapshots ?? collect(),
                        'financialSummary' => $financialSummary ?? null,
                        'pendingTrainings' => $pendingTrainings ?? 0,
                        'totalTrainings' => $totalTrainings ?? 0,
                        'securityAlerts' => $securityAlerts ?? collect(),
                        'pluginUpdates' => $pluginUpdates ?? ['total' => 0, 'critical' => 0, 'updates' => collect()],
                    ])
                    @endcomponent
                </div>
            </div>
        </div>
        @endforeach
    </div>
    @else
    <div class="mt-6 bg-white dark:bg-gray-800 rounded-lg shadow p-12 text-center">
        <i class="fas fa-th-large text-4xl text-gray-300 dark:text-gray-500 mb-4"></i>
        <p class="text-lg font-medium text-gray-900 dark:text-gray-100">Henüz widget eklenmemiş</p>
        <p class="text-sm text-gray-500 dark:text-gray-400 dark:text-gray-500 mt-2">"Widget Düzenle" butonuna tıklayarak widget ekleyin.</p>
    </div>
    @endif

    <!-- Widget Edit Modal -->
    <div id="widget-edit-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-6xl w-full max-h-[90vh] flex flex-col">
            <div class="p-6 border-b border-gray-200 dark:border-gray-700">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Widget Yönetimi</h3>
                    <button id="widget-modal-close" class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
            </div>
            <div class="p-6 flex-1 overflow-hidden">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 h-full">
                    <!-- Mevcut Widget'lar -->
                    <div class="flex flex-col h-full">
                        <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center gap-2">
                            <i class="fas fa-th-large"></i>
                            Mevcut Widget'lar
                            <span id="current-widgets-count" class="ml-auto px-2 py-1 text-xs bg-gray-200 dark:bg-gray-700 rounded-full text-gray-700 dark:text-gray-300">0</span>
                        </h4>
                        <div id="current-widgets-list" class="flex-1 overflow-y-auto space-y-2 p-2 bg-gray-50 dark:bg-gray-900/50 rounded-lg min-h-[300px] border-2 border-dashed border-gray-300 dark:border-gray-700">
                            <!-- Mevcut widget'lar buraya gelecek -->
                        </div>
                    </div>
                    
                    <!-- Kullanılabilir Widget'lar -->
                    <div class="flex flex-col h-full">
                        <h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center gap-2">
                            <i class="fas fa-plus-circle"></i>
                            Kullanılabilir Widget'lar
                            <span id="available-widgets-count" class="ml-auto px-2 py-1 text-xs bg-gray-200 dark:bg-gray-700 rounded-full text-gray-700 dark:text-gray-300">0</span>
                        </h4>
                        <div id="available-widgets-list" class="flex-1 overflow-y-auto space-y-2 p-2 bg-gray-50 dark:bg-gray-900/50 rounded-lg min-h-[300px] border-2 border-dashed border-gray-300 dark:border-gray-700">
                            <!-- Widgets will be loaded here -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        /* SortableJS drag styles */
        .sortable-ghost {
            opacity: 0.4;
            background: #f3f4f6 !important;
        }
        .dark .sortable-ghost {
            background: #1f2937 !important;
        }
        .sortable-drag {
            opacity: 1 !important;
            transform: rotate(2deg);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
        }
        .widget-card {
            user-select: none;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .widget-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        .dark .widget-card:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }
        #current-widgets-list.sortable-drag-over,
        #available-widgets-list.sortable-drag-over {
            border-color: #3b82f6 !important;
            background-color: rgba(59, 130, 246, 0.1) !important;
        }
        .dark #current-widgets-list.sortable-drag-over,
        .dark #available-widgets-list.sortable-drag-over {
            border-color: #60a5fa !important;
            background-color: rgba(59, 130, 246, 0.2) !important;
        }
        .sortable-chosen {
            cursor: grabbing !important;
        }
        .sortable-ghost {
            opacity: 0.4 !important;
        }
        .widget-drag-handle {
            transition: color 0.2s;
        }
        .widget-drag-handle:hover {
            color: #3b82f6 !important;
        }
        .dark .widget-drag-handle:hover {
            color: #60a5fa !important;
        }
        .widget-item.sortable-drag {
            transform: rotate(2deg);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
        }
        .dark .widget-item.sortable-drag {
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
        }
    </style>

    @if($user->isAdmin())
    <div class="mt-6 bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
        <div class="p-6">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
                <i class="fas fa-sync-alt text-emerald-600"></i>
                GSP Connector Güncelleme Yönetimi
            </h2>
            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400 dark:text-gray-500">
                Yeni versiyon yayınlayın ve tüm WordPress sitelerinde GSP Connector eklentisini güncelleyin. Dilerseniz sadece panel üzerinden anlık güncelleme tetikleyebilirsiniz.
            </p>

            <div class="mt-6 grid gap-6 md:grid-cols-2">
                <div>
                    <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">GitHub Release + Toplu Güncelleme</h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400 dark:text-gray-500 mt-1">
                        Girilen sürüm etiketi GitHub reposunda release olarak oluşturulur ve bakım modunda olmayan tüm sitelerde güncelleme tetiklenir.
                    </p>
                    <form method="POST" action="{{ route('mass-update.start') }}" class="mt-4 space-y-4">
                        @csrf
                        <div>
                            <label for="new_version" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">Yeni Sürüm Etiketi</label>
                            <input
                                type="text"
                                name="new_version"
                                id="new_version"
                                value="{{ old('new_version', 'v') }}"
                                placeholder="v1.1.0"
                                class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:border-emerald-500 dark:focus:border-emerald-400 focus:ring-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200"
                                required
                                pattern="^v\d+\.\d+\.\d+$"
                            >
                            <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">Format: vX.Y.Z (örn: v1.2.0)</p>
                            @error('new_version')
                                <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                                    <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                                </p>
                            @enderror
                        </div>
                        <div>
                            <label for="release_notes" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">Release Notları</label>
                            <textarea
                                name="release_notes"
                                id="release_notes"
                                rows="4"
                                class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:border-emerald-500 dark:focus:border-emerald-400 focus:ring-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200 resize-y"
                                placeholder="Bu sürümde yapılan değişiklikler..."
                            >{{ old('release_notes') }}</textarea>
                        </div>
                        <button
                            type="submit"
                            class="inline-flex items-center gap-2 rounded-lg bg-emerald-600 hover:bg-emerald-500 dark:bg-emerald-600 dark:hover:bg-emerald-500 px-5 py-2.5 text-sm font-semibold text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 focus:ring-offset-2 transition-all duration-200"
                        >
                            <i class="fas fa-rocket"></i>
                            Release Oluştur ve Toplu Güncellemeyi Başlat
                        </button>
                    </form>
                </div>

                <div>
                    <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Panel Üzerinden Sadece Güncelle</h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400 dark:text-gray-500 mt-1">
                        GitHub release oluşturmadan mevcut sürümü çekmeye zorlamak için bu butonu kullanın. İşlem AJAX ile ilerler.
                    </p>
                    <div class="mt-4">
                        <button
                            id="bulk-gsp-update-btn"
                            class="inline-flex items-center gap-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 dark:bg-indigo-600 dark:hover:bg-indigo-500 px-5 py-2.5 text-sm font-semibold text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 transition-all duration-200 disabled:opacity-60 disabled:cursor-not-allowed"
                            data-endpoint="{{ route('sites.bulk-update-gsp-connector') }}"
                        >
                            <i class="fas fa-plug"></i>
                            GSP Connector'ı Şimdi Güncelle
                        </button>
                        <div id="bulk-gsp-update-status" class="mt-4 text-xs hidden"></div>
                        <div id="bulk-gsp-update-results" class="mt-4 hidden">
                            <div class="overflow-hidden ring-1 ring-gray-200 dark:ring-gray-700 rounded-lg border border-gray-200 dark:border-gray-700">
                                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 text-sm">
                                    <thead class="bg-gray-50 dark:bg-gray-800 text-gray-500 dark:text-gray-400 uppercase tracking-wide text-xs border-b border-gray-200 dark:border-gray-700">
                                        <tr>
                                            <th class="px-4 py-3 text-left font-semibold">Site</th>
                                            <th class="px-4 py-3 text-left font-semibold">Durum</th>
                                            <th class="px-4 py-3 text-left font-semibold">Mesaj</th>
                                            <th class="px-4 py-3 text-left font-semibold">Sistem Bilgisi</th>
                                        </tr>
                                    </thead>
                                    <tbody id="bulk-gsp-update-results-body" class="divide-y divide-gray-100 dark:divide-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Döviz Kuru Senkronizasyonu -->
    @if($user->isAdmin())
    <div class="mt-6 bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
        <div class="p-6">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
                <i class="fas fa-exchange-alt text-blue-600 dark:text-blue-400"></i>
                Döviz Kuru Senkronizasyonu
            </h2>
            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400 dark:text-gray-500">
                ExchangeRate-API'den güncel döviz kurlarını çekin ve veritabanına kaydedin. Otomatik senkronizasyon her gün sabah 06:00'da çalışır.
            </p>

            <div class="mt-6 grid gap-6 md:grid-cols-2">
                <div>
                    <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">Senkronizasyon Durumu</h3>
                    <div id="currency-sync-status" class="space-y-2">
                        <div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
                            <i class="fas fa-spinner fa-spin"></i>
                            <span>Yükleniyor...</span>
                        </div>
                    </div>
                    <div class="mt-4">
                        <button
                            id="currency-sync-btn"
                            class="inline-flex items-center gap-2 rounded-lg bg-blue-600 hover:bg-blue-500 dark:bg-blue-600 dark:hover:bg-blue-500 px-5 py-2.5 text-sm font-semibold text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-offset-2 transition-all duration-200 disabled:opacity-60 disabled:cursor-not-allowed"
                        >
                            <i class="fas fa-sync-alt"></i>
                            <span id="currency-sync-btn-text">Şimdi Senkronize Et</span>
                        </button>
                        <div id="currency-sync-message" class="mt-3 text-sm hidden"></div>
                    </div>
                </div>

                <div>
                    <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">Son Senkronizasyon Bilgileri</h3>
                    <dl class="space-y-2 text-sm">
                        <div class="flex justify-between">
                            <dt class="text-gray-500 dark:text-gray-400">Son Senkronizasyon:</dt>
                            <dd id="currency-last-sync" class="font-medium text-gray-900 dark:text-gray-100">-</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-gray-500 dark:text-gray-400">Toplam Kur Sayısı:</dt>
                            <dd id="currency-rates-count" class="font-medium text-gray-900 dark:text-gray-100">-</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt class="text-gray-500 dark:text-gray-400">Durum:</dt>
                            <dd id="currency-sync-status-badge" class="font-medium">
                                <span class="inline-flex items-center gap-1 rounded-full bg-gray-100 dark:bg-gray-700 px-2 py-1 text-xs text-gray-600 dark:text-gray-400">
                                    <i class="fas fa-spinner fa-spin"></i> Kontrol ediliyor
                                </span>
                            </dd>
                        </div>
                    </dl>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- Bakım Kuyruğu Durumu -->
    <div class="mt-4 w-full rounded-2xl border border-indigo-100 dark:border-indigo-800 bg-white dark:bg-gray-800 shadow-sm">
            <div class="px-6 py-5">
                <div class="flex items-center justify-between">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
                        <i class="fas fa-cogs text-indigo-500"></i>
                        Bakım Kuyruğu Durumu
                    </h2>
                    <span id="maintenance-worker-status-indicator"
                        class="inline-flex items-center gap-1 rounded-full bg-gray-100 px-3 py-1 text-xs font-semibold text-gray-600 dark:text-gray-400 dark:text-gray-500">
                        <i class="fas fa-spinner fa-spin"></i> Kontrol ediliyor
                    </span>
                </div>
                <p class="mt-2 text-sm text-gray-500 dark:text-gray-400 dark:text-gray-500">
                    Bakım kuyruğunda çalışan worker'ın son kalp atışı ve durumunu takip edin.
                </p>
                <dl class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 text-sm text-gray-700 dark:text-gray-300 dark:text-gray-500">
                    <div>
                        <dt class="font-medium text-gray-500 dark:text-gray-400 dark:text-gray-500 uppercase text-xs">Durum</dt>
                        <dd id="maintenance-worker-status" class="mt-1 text-base font-semibold text-gray-900 dark:text-gray-100">
                            Bilinmiyor
                        </dd>
                    </div>
                    <div>
                        <dt class="font-medium text-gray-500 dark:text-gray-400 dark:text-gray-500 uppercase text-xs">Son Görülme</dt>
                        <dd id="maintenance-worker-last-seen" class="mt-1 text-base font-semibold text-gray-900 dark:text-gray-100">
                            -
                        </dd>
                    </div>
                </dl>
                <div class="mt-4 flex items-center gap-3">
                    <button type="button" id="refresh-maintenance-worker-status"
                        class="inline-flex items-center gap-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 dark:bg-indigo-600 dark:hover:bg-indigo-500 px-5 py-2.5 text-sm font-semibold text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 transition-all duration-200">
                        <i class="fas fa-sync-alt"></i>
                        Durumu Yenile
                    </button>
                    <a href="{{ route('maintenance.settings') }}"
                        class="inline-flex items-center gap-2 rounded-lg border border-indigo-200 dark:border-indigo-700 bg-white dark:bg-gray-800 px-4 py-2 text-sm font-semibold text-indigo-600 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2 transition-all duration-200">
                        <i class="fas fa-sliders-h"></i>
                        Bakım Ayarları
                    </a>
                    <span id="maintenance-worker-status-error" class="text-xs text-rose-600 dark:text-rose-400 hidden"></span>
                </div>
            </div>
    </div>

    @if(session('mass_update_results'))
        @php
            $results = session('mass_update_results', []);
            $summary = session('mass_update_summary', []);
        @endphp
        <div class="mt-4 bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
            <div class="p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
                    <i class="fas fa-clipboard-list text-emerald-600"></i>
                    Toplu Güncelleme Sonuçları
                </h3>
                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400 dark:text-gray-500">
                    Sürüm: <span class="font-semibold">{{ $summary['version'] ?? '-' }}</span> •
                    Toplam: {{ $summary['total'] ?? 0 }} •
                    Başarılı: {{ $summary['succeeded'] ?? 0 }} •
                    Hata: {{ $summary['failed'] ?? 0 }} •
                    Atlanan: {{ $summary['skipped'] ?? 0 }}
                </p>
                <div class="mt-4 overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 text-sm">
                        <thead class="bg-gray-50 dark:bg-gray-700">
                            <tr>
                                <th class="px-4 py-2 text-left font-semibold text-gray-700 dark:text-gray-300 dark:text-gray-500">Site</th>
                                <th class="px-4 py-2 text-left font-semibold text-gray-700 dark:text-gray-300 dark:text-gray-500">URL</th>
                                <th class="px-4 py-2 text-left font-semibold text-gray-700 dark:text-gray-300 dark:text-gray-500">Durum</th>
                                <th class="px-4 py-2 text-left font-semibold text-gray-700 dark:text-gray-300 dark:text-gray-500">Mesaj</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200 dark:divide-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 dark:text-gray-500">
                            @foreach($results as $result)
                                @php
                                    $status = $result['status'] ?? 'unknown';
                                    $statusClass = match($status) {
                                        'success' => 'text-green-600 dark:text-green-400',
                                        'skipped' => 'text-gray-500 dark:text-gray-400 dark:text-gray-500',
                                        'error', 'exception' => 'text-red-600 dark:text-red-400',
                                        default => 'text-gray-600 dark:text-gray-400 dark:text-gray-500',
                                    };
                                @endphp
                                <tr>
                                    <td class="px-4 py-2 font-medium text-gray-900 dark:text-gray-100">{{ $result['site'] ?? '-' }}</td>
                                    <td class="px-4 py-2">
                                        @if(!empty($result['url']))
                                            <a href="{{ $result['url'] }}" target="_blank" class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">{{ $result['url'] }}</a>
                                        @else
                                            <span class="text-gray-500 dark:text-gray-400 dark:text-gray-500">-</span>
                                        @endif
                                    </td>
                                    <td class="px-4 py-2">
                                        <span class="font-semibold {{ $statusClass }}">{{ $status }}</span>
                                    </td>
                                    <td class="px-4 py-2 text-gray-600 dark:text-gray-400 dark:text-gray-500">{{ $result['message'] ?? '-' }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    @endif
    @if($performanceSnapshots->isNotEmpty() || !empty($performanceTrends['datasets']))
    <!-- Performans Trend Grafikleri -->
    @if(!empty($performanceTrends['datasets']))
    <div class="mt-4 bg-white dark:bg-gray-800 shadow-lg rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700">
        <div class="p-6">
            <div class="flex items-center justify-between mb-4">
                <div>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
                        <i class="fas fa-chart-line text-indigo-600"></i>
                        Performans Trend Grafikleri
                    </h3>
                    <p class="mt-1 text-sm text-gray-600 dark:text-gray-400 dark:text-gray-500">
                        Son 30 günlük mobil ve desktop performans skorları trend analizi
                    </p>
                </div>
            </div>
            <div class="mt-6">
                <canvas id="performanceTrendChart" height="80"></canvas>
            </div>
        </div>
    </div>
    @endif

    <!-- Optimizasyon Öncelikli Siteler -->
    @if(!empty($prioritizedSites) && $prioritizedSites->count() > 0)
    <div class="mt-4 bg-white dark:bg-gray-800 shadow-lg rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700">
        <div class="p-6">
            <div class="flex items-center justify-between mb-4">
                <div>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
                        <i class="fas fa-exclamation-triangle text-red-600 dark:text-red-400"></i>
                        Optimizasyon Öncelikli Siteler
                    </h3>
                    <p class="mt-1 text-sm text-gray-600 dark:text-gray-400 dark:text-gray-500">
                        Performans metriklerine göre en acil optimizasyon gerektiren siteler
                    </p>
                </div>
            </div>
            <div class="mt-4 space-y-3">
                @foreach($prioritizedSites as $site)
                    @php
                        $priorityLevel = $site->priority_level ?? 'low';
                        $priorityScore = $site->priority_score ?? 0;
                        $reasons = $site->priority_reasons ?? [];
                        
                        $badgeClass = match($priorityLevel) {
                            'critical' => 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300 border-red-300 dark:border-red-700',
                            'high' => 'bg-orange-100 dark:bg-orange-900/30 text-orange-800 dark:text-orange-300 border-orange-300 dark:border-orange-700',
                            'medium' => 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 border-yellow-300 dark:border-yellow-700',
                            default => 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300 border-gray-300 dark:border-gray-600',
                        };
                        
                        $iconClass = match($priorityLevel) {
                            'critical' => 'fa-exclamation-circle text-red-600 dark:text-red-400',
                            'high' => 'fa-exclamation-triangle text-orange-600 dark:text-orange-400',
                            'medium' => 'fa-info-circle text-yellow-600 dark:text-yellow-400',
                            default => 'fa-check-circle text-gray-600 dark:text-gray-400 dark:text-gray-500',
                        };
                    @endphp
                    <div class="border rounded-lg p-4 hover:shadow-md transition-shadow {{ $priorityLevel === 'critical' ? 'border-red-300 dark:border-red-700 bg-red-50 dark:bg-red-900/30' : ($priorityLevel === 'high' ? 'border-orange-300 dark:border-orange-700 bg-orange-50 dark:bg-orange-900/30' : ($priorityLevel === 'medium' ? 'border-yellow-300 dark:border-yellow-700 bg-yellow-50 dark:bg-yellow-900/30' : 'border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700')) }}">
                        <div class="flex items-start justify-between">
                            <div class="flex-1">
                                <div class="flex items-center gap-3 mb-2">
                                    <i class="fas {{ $iconClass }} text-lg"></i>
                                    <a href="{{ route('sites.show', $site) }}" class="font-semibold text-gray-900 dark:text-gray-100 hover:text-indigo-600 transition-colors">
                                        {{ $site->name }}
                                    </a>
                                    <span class="inline-flex items-center gap-1 px-2 py-1 text-xs font-semibold rounded border {{ $badgeClass }}">
                                        @if($priorityLevel === 'critical')
                                            <i class="fas fa-fire"></i> Kritik
                                        @elseif($priorityLevel === 'high')
                                            <i class="fas fa-arrow-up"></i> Yüksek
                                        @elseif($priorityLevel === 'medium')
                                            <i class="fas fa-minus"></i> Orta
                                        @else
                                            <i class="fas fa-check"></i> Düşük
                                        @endif
                                    </span>
                                    <span class="text-xs text-gray-500 dark:text-gray-400 dark:text-gray-500">
                                        Öncelik Skoru: <span class="font-semibold">{{ number_format($priorityScore, 1) }}/100</span>
                                    </span>
                                </div>
                                <div class="ml-8 space-y-1">
                                    @if(!empty($reasons))
                                        @foreach(array_slice($reasons, 0, 3) as $reason)
                                            <div class="text-sm text-gray-700 dark:text-gray-300 dark:text-gray-500 flex items-center gap-2">
                                                <i class="fas fa-circle text-xs text-gray-400 dark:text-gray-500"></i>
                                                <span>{{ $reason }}</span>
                                            </div>
                                        @endforeach
                                        @if(count($reasons) > 3)
                                            <div class="text-xs text-gray-500 dark:text-gray-400 dark:text-gray-500 italic">
                                                +{{ count($reasons) - 3 }} neden daha...
                                            </div>
                                        @endif
                                    @else
                                        <div class="text-sm text-gray-500 dark:text-gray-400 dark:text-gray-500 italic">
                                            Öncelik nedeni belirlenemedi
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="flex items-center gap-2 ml-4">
                                @php
                                    $latestMobile = $site->latest_mobile_report ?? null;
                                    $mobileScore = $latestMobile->performance_score ?? null;
                                    $mobileFcp = $latestMobile->fcp_metric ?? null;
                                @endphp
                                @if($mobileScore !== null)
                                    <div class="text-right">
                                        <div class="text-xs text-gray-500 dark:text-gray-400 dark:text-gray-500">Mobil Skor</div>
                                        <div class="text-sm font-semibold {{ $mobileScore < 50 ? 'text-red-600 dark:text-red-400' : ($mobileScore < 65 ? 'text-orange-600 dark:text-orange-400' : ($mobileScore < 80 ? 'text-yellow-600 dark:text-yellow-400' : 'text-green-600 dark:text-green-400')) }}">
                                            {{ $mobileScore }}/100
                                        </div>
                                    </div>
                                @endif
                                @if($mobileFcp !== null)
                                    <div class="text-right">
                                        <div class="text-xs text-gray-500 dark:text-gray-400 dark:text-gray-500">FCP</div>
                                        <div class="text-sm font-semibold {{ $mobileFcp > 4.0 ? 'text-red-600 dark:text-red-400' : ($mobileFcp > 3.0 ? 'text-orange-600 dark:text-orange-400' : ($mobileFcp > 2.5 ? 'text-yellow-600 dark:text-yellow-400' : 'text-green-600 dark:text-green-400')) }}">
                                            {{ number_format($mobileFcp, 2) }}s
                                        </div>
                                    </div>
                                @endif
                                <form action="{{ route('sites.run-performance-agent', $site) }}" method="POST" class="inline">
                                    @csrf
                                    <button type="submit" class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-semibold text-white bg-indigo-600 hover:bg-indigo-700 rounded-md transition-colors">
                                        <i class="fas fa-robot"></i>
                                        Optimize Et
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            @if($prioritizedSites->count() >= 10)
                <div class="mt-4 text-center">
                    <a href="{{ route('sites.index') }}" class="text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 font-semibold">
                        Tüm öncelikli siteleri görüntüle →
                    </a>
                </div>
            @endif
        </div>
    </div>
    @endif

    <!-- Güvenlik Uyarıları -->
    @if(isset($securityAlerts) && $securityAlerts['total'] > 0)
    <div class="mt-4 bg-white dark:bg-gray-800 shadow-lg rounded-xl overflow-hidden border border-red-200 dark:border-red-800">
        <div class="p-6">
            <div class="flex items-center justify-between mb-4">
                <div>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
                        <i class="fas fa-shield-alt text-red-600 dark:text-red-400"></i>
                        Güvenlik Uyarıları
                    </h3>
                    <p class="mt-1 text-sm text-gray-600 dark:text-gray-400 dark:text-gray-500">
                        Tespit edilen güvenlik sorunları ve öneriler
                    </p>
                </div>
                <div class="flex items-center gap-3">
                    <a href="{{ route('export.security-alerts') }}" class="inline-flex items-center gap-2 rounded-md border border-gray-300 dark:border-gray-600 dark:border-gray-600 bg-white dark:bg-gray-700 dark:bg-gray-800 px-3 py-2 text-sm font-semibold text-gray-700 dark:text-gray-300 dark:text-gray-500 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 dark:bg-gray-700">
                        <i class="fas fa-file-csv"></i>
                        CSV İndir
                    </a>
                    @if($securityAlerts['critical'] > 0)
                        <span class="inline-flex items-center gap-1 px-3 py-1 text-sm font-semibold rounded-full bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300 border border-red-300 dark:border-red-700">
                            <i class="fas fa-fire"></i>
                            {{ $securityAlerts['critical'] }} Kritik
                        </span>
                    @endif
                    @if($securityAlerts['high'] > 0)
                        <span class="inline-flex items-center gap-1 px-3 py-1 text-sm font-semibold rounded-full bg-orange-100 dark:bg-orange-900/30 text-orange-800 dark:text-orange-300 border border-orange-300 dark:border-orange-700">
                            <i class="fas fa-exclamation-triangle"></i>
                            {{ $securityAlerts['high'] }} Yüksek
                        </span>
                    @endif
                </div>
            </div>
            <div class="mt-4 space-y-3">
                @foreach($securityAlerts['alerts']->take(5) as $alert)
                    <div class="border rounded-lg p-4 hover:shadow-md transition-shadow {{ $alert->severity === 'critical' ? 'border-red-300 bg-red-50' : ($alert->severity === 'high' ? 'border-orange-300 bg-orange-50' : ($alert->severity === 'medium' ? 'border-yellow-300 bg-yellow-50' : 'border-blue-300 bg-blue-50')) }}">
                        <div class="flex items-start justify-between">
                            <div class="flex-1">
                                <div class="flex items-center gap-3 mb-2">
                                    <i class="fas {{ $alert->severity === 'critical' ? 'fa-exclamation-circle text-red-600 dark:text-red-400' : ($alert->severity === 'high' ? 'fa-exclamation-triangle text-orange-600 dark:text-orange-400' : ($alert->severity === 'medium' ? 'fa-info-circle text-yellow-600 dark:text-yellow-400' : 'fa-info-circle text-blue-600')) }} text-lg"></i>
                                    <a href="{{ route('sites.show', $alert->site) }}" class="font-semibold text-gray-900 dark:text-gray-100 hover:text-indigo-600 transition-colors">
                                        {{ $alert->site->name }}
                                    </a>
                                    <span class="inline-flex items-center gap-1 px-2 py-1 text-xs font-semibold rounded border {{ $alert->severity_badge_class }}">
                                        {{ ucfirst($alert->severity) }}
                                    </span>
                                    <span class="text-xs text-gray-500 dark:text-gray-400 dark:text-gray-500">
                                        {{ $alert->alert_type_label }}
                                    </span>
                                </div>
                                <div class="ml-8">
                                    <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-1">{{ $alert->title }}</h4>
                                    <p class="text-sm text-gray-700 dark:text-gray-300 dark:text-gray-500">{{ $alert->message }}</p>
                                    @if($alert->details && is_array($alert->details))
                                        <div class="mt-2 space-y-1">
                                            @foreach(array_slice($alert->details, 0, 3) as $key => $detail)
                                                @if(is_string($detail) || is_numeric($detail))
                                                    <div class="text-xs text-gray-600 dark:text-gray-400 dark:text-gray-500 flex items-center gap-2">
                                                        <i class="fas fa-circle text-xs text-gray-400 dark:text-gray-500"></i>
                                                        <span>{{ $detail }}</span>
                                                    </div>
                                                @elseif(is_array($detail))
                                                    @if(isset($detail['plugins']))
                                                        <div class="text-xs text-gray-600 dark:text-gray-400 dark:text-gray-500">
                                                            <span class="font-semibold">Plugin'ler:</span>
                                                            @foreach(array_slice($detail['plugins'], 0, 3) as $plugin)
                                                                <span class="ml-1">{{ $plugin['name'] ?? 'Bilinmeyen' }}</span>
                                                            @endforeach
                                                        </div>
                                                    @endif
                                                @endif
                                            @endforeach
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="ml-4">
                                <a href="{{ route('sites.show', $alert->site) }}" class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-semibold text-white bg-indigo-600 hover:bg-indigo-700 rounded-md transition-colors">
                                    <i class="fas fa-eye"></i>
                                    İncele
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            @if($securityAlerts['total'] > 5)
                <div class="mt-4 text-center">
                    <a href="{{ route('sites.index') }}" class="text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 font-semibold">
                        Tüm güvenlik uyarılarını görüntüle ({{ $securityAlerts['total'] }}) →
                    </a>
                </div>
            @endif
        </div>
    </div>
    @endif

    <!-- Plugin Güncellemeleri -->
    @if(isset($pluginUpdates) && $pluginUpdates['total'] > 0)
    <div class="mt-4 bg-white dark:bg-gray-800 shadow-lg rounded-xl overflow-hidden border border-amber-200 dark:border-amber-800">
        <div class="p-6">
            <div class="flex items-center justify-between mb-4">
                <div>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
                        <i class="fas fa-plug text-amber-600 dark:text-amber-400"></i>
                        Plugin Güncellemeleri
                    </h3>
                    <p class="mt-1 text-sm text-gray-600 dark:text-gray-400 dark:text-gray-500">
                        Güncelleme gerektiren WordPress plugin'leri
                    </p>
                </div>
                <div class="flex items-center gap-3">
                    @if($pluginUpdates['critical'] > 0)
                        <span class="inline-flex items-center gap-1 px-3 py-1 text-sm font-semibold rounded-full bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300 border border-red-300 dark:border-red-700">
                            <i class="fas fa-fire"></i>
                            {{ $pluginUpdates['critical'] }} Kritik
                        </span>
                    @endif
                    <span class="inline-flex items-center gap-1 px-3 py-1 text-sm font-semibold rounded-full bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-300 border border-amber-300 dark:border-amber-700">
                        <i class="fas fa-download"></i>
                        {{ $pluginUpdates['total'] }} Güncelleme
                    </span>
                </div>
            </div>
            <div class="mt-4 space-y-2">
                @foreach($pluginUpdates['updates']->take(10) as $update)
                    <div class="border rounded-lg p-3 hover:shadow-md transition-shadow {{ $update->is_critical ? 'border-red-300 bg-red-50' : 'border-amber-300 bg-amber-50' }}">
                        <div class="flex items-center justify-between">
                            <div class="flex-1">
                                <div class="flex items-center gap-3">
                                    <i class="fas {{ $update->is_critical ? 'fa-exclamation-circle text-red-600 dark:text-red-400' : 'fa-info-circle text-amber-600 dark:text-amber-400' }}"></i>
                                    <a href="{{ route('sites.show', $update->site) }}" class="font-semibold text-gray-900 dark:text-gray-100 hover:text-indigo-600 transition-colors text-sm">
                                        {{ $update->site->name }}
                                    </a>
                                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300 dark:text-gray-500">{{ $update->plugin_name }}</span>
                                    @if($update->is_critical)
                                        <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-semibold rounded-full bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300 border border-red-300 dark:border-red-700">
                                            <i class="fas fa-fire"></i>
                                            Kritik
                                        </span>
                                    @endif
                                </div>
                                <div class="ml-8 mt-1 flex items-center gap-4 text-xs text-gray-600 dark:text-gray-400 dark:text-gray-500">
                                    <span>
                                        <span class="font-semibold">Mevcut:</span> {{ $update->current_version ?? 'Bilinmiyor' }}
                                    </span>
                                    <i class="fas fa-arrow-right text-gray-400 dark:text-gray-500"></i>
                                    <span>
                                        <span class="font-semibold">Yeni:</span> {{ $update->latest_version ?? 'Bilinmiyor' }}
                                    </span>
                                    @if($update->last_checked_at)
                                        <span class="text-gray-400 dark:text-gray-500">
                                            <i class="far fa-clock"></i>
                                            {{ $update->last_checked_at->diffForHumans() }}
                                        </span>
                                    @endif
                                </div>
                            </div>
                            <div class="ml-4">
                                <a href="{{ route('sites.show', $update->site) }}" class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-semibold text-white bg-amber-600 hover:bg-amber-700 rounded-md transition-colors">
                                    <i class="fas fa-sync-alt"></i>
                                    Güncelle
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            @if($pluginUpdates['total'] > 10)
                <div class="mt-4 text-center">
                    <a href="{{ route('sites.index') }}" class="text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 font-semibold">
                        Tüm plugin güncellemelerini görüntüle ({{ $pluginUpdates['total'] }}) →
                    </a>
                </div>
            @endif
        </div>
    </div>
    @endif

    <!-- Performans Analizi Tablosu -->
    <div class="mt-4 bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
        <div class="p-6">
            <div class="flex items-center justify-between mb-4">
                <div>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
                        <i class="fas fa-tachometer-alt text-lime-500"></i>
                        Son Performans Ölçümleri
                    </h3>
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400 dark:text-gray-500">
                        Google PageSpeed sonuçlarından alınan en güncel mobil ve masaüstü skorları.
                    </p>
                </div>
                <a href="{{ route('export.performance-reports') }}" class="inline-flex items-center gap-2 rounded-md border border-gray-300 dark:border-gray-600 dark:border-gray-600 bg-white dark:bg-gray-700 dark:bg-gray-800 px-3 py-2 text-sm font-semibold text-gray-700 dark:text-gray-300 dark:text-gray-500 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 dark:bg-gray-700">
                    <i class="fas fa-file-csv"></i>
                    CSV İndir
                </a>
            </div>
            <div class="mt-4 overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 text-sm">
                    <thead class="bg-gray-50 dark:bg-gray-700 text-gray-600 dark:text-gray-400 dark:text-gray-500 uppercase tracking-wide text-xs">
                        <tr>
                            <th class="px-4 py-2 text-left">Site</th>
                            <th class="px-4 py-2 text-left">Mobil Skor</th>
                            <th class="px-4 py-2 text-left">Mobil Metrikler</th>
                            <th class="px-4 py-2 text-left">Masaüstü Skor</th>
                            <th class="px-4 py-2 text-left">Masaüstü Metrikler</th>
                            <th class="px-4 py-2 text-left">Son Ölçüm</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 dark:divide-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 dark:text-gray-500">
                        @foreach($performanceSnapshots as $snapshot)
                            @php
                                $mobileScore = $snapshot['mobile_score'] ?? null;
                                $desktopScore = $snapshot['desktop_score'] ?? null;
                                $mobileFcp = $snapshot['mobile_fcp'] ?? null;
                                $mobileLcp = $snapshot['mobile_lcp'] ?? null;
                                $mobileCls = $snapshot['mobile_cls'] ?? null;
                                $mobileTti = $snapshot['mobile_tti'] ?? null;
                                $mobileTbt = $snapshot['mobile_tbt'] ?? null;
                                $desktopFcp = $snapshot['desktop_fcp'] ?? null;
                                $desktopLcp = $snapshot['desktop_lcp'] ?? null;
                                $desktopCls = $snapshot['desktop_cls'] ?? null;
                                $desktopTti = $snapshot['desktop_tti'] ?? null;
                                $desktopTbt = $snapshot['desktop_tbt'] ?? null;
                                $updatedAt = $snapshot['updated_at'] ?? null;
                            @endphp
                            <tr>
                                <td class="px-4 py-2 font-semibold text-gray-900 dark:text-gray-100">{{ $snapshot['site_name'] }}</td>
                                <td class="px-4 py-2">
                                    @if(!is_null($mobileScore))
                                        <span class="inline-flex items-center gap-1 rounded-full bg-lime-50 dark:bg-lime-900/30 px-2 py-1 text-xs font-semibold text-lime-700 dark:text-lime-300">
                                            <i class="fas fa-mobile-alt"></i> {{ $mobileScore }}
                                        </span>
                                    @else
                                        <span class="text-gray-400 dark:text-gray-500">-</span>
                                    @endif
                                </td>
                                <td class="px-4 py-2">
                                    @if($mobileFcp || $mobileLcp || $mobileCls || $mobileTti || $mobileTbt)
                                        <div class="space-y-1 text-xs">
                                            @if($mobileFcp)
                                                <div class="flex items-center gap-1">
                                                    <span class="text-gray-500 dark:text-gray-400 dark:text-gray-500 w-10">FCP:</span>
                                                    <span class="font-medium {{ $mobileFcp <= 1.8 ? 'text-green-600 dark:text-green-400' : ($mobileFcp <= 3.0 ? 'text-amber-600 dark:text-amber-400' : 'text-red-600 dark:text-red-400') }}">
                                                        {{ number_format($mobileFcp, 2) }}s
                                                    </span>
                                                </div>
                                            @endif
                                            @if($mobileLcp)
                                                <div class="flex items-center gap-1">
                                                    <span class="text-gray-500 dark:text-gray-400 dark:text-gray-500 w-10">LCP:</span>
                                                    <span class="font-medium {{ $mobileLcp <= 2.5 ? 'text-green-600 dark:text-green-400' : ($mobileLcp <= 4.0 ? 'text-amber-600 dark:text-amber-400' : 'text-red-600 dark:text-red-400') }}">
                                                        {{ number_format($mobileLcp, 2) }}s
                                                    </span>
                                                </div>
                                            @endif
                                            @if($mobileCls !== null)
                                                <div class="flex items-center gap-1">
                                                    <span class="text-gray-500 dark:text-gray-400 dark:text-gray-500 w-10">CLS:</span>
                                                    <span class="font-medium {{ $mobileCls <= 0.1 ? 'text-green-600 dark:text-green-400' : ($mobileCls <= 0.25 ? 'text-amber-600 dark:text-amber-400' : 'text-red-600 dark:text-red-400') }}">
                                                        {{ number_format($mobileCls, 3) }}
                                                    </span>
                                                </div>
                                            @endif
                                            @if($mobileTti)
                                                <div class="flex items-center gap-1">
                                                    <span class="text-gray-500 dark:text-gray-400 dark:text-gray-500 w-10">TTI:</span>
                                                    <span class="font-medium text-gray-700 dark:text-gray-300 dark:text-gray-500">{{ number_format($mobileTti, 2) }}s</span>
                                                </div>
                                            @endif
                                            @if($mobileTbt)
                                                <div class="flex items-center gap-1">
                                                    <span class="text-gray-500 dark:text-gray-400 dark:text-gray-500 w-10">TBT:</span>
                                                    <span class="font-medium text-gray-700 dark:text-gray-300 dark:text-gray-500">{{ number_format($mobileTbt, 2) }}s</span>
                                                </div>
                                            @endif
                                        </div>
                                    @else
                                        <span class="text-gray-400 dark:text-gray-500">-</span>
                                    @endif
                                </td>
                                <td class="px-4 py-2">
                                    @if(!is_null($desktopScore))
                                        <span class="inline-flex items-center gap-1 rounded-full bg-indigo-50 dark:bg-indigo-900/30 px-2 py-1 text-xs font-semibold text-indigo-700 dark:text-indigo-300">
                                            <i class="fas fa-desktop"></i> {{ $desktopScore }}
                                        </span>
                                    @else
                                        <span class="text-gray-400 dark:text-gray-500">-</span>
                                    @endif
                                </td>
                                <td class="px-4 py-2">
                                    @if($desktopFcp || $desktopLcp || $desktopCls || $desktopTti || $desktopTbt)
                                        <div class="space-y-1 text-xs">
                                            @if($desktopFcp)
                                                <div class="flex items-center gap-1">
                                                    <span class="text-gray-500 dark:text-gray-400 dark:text-gray-500 w-10">FCP:</span>
                                                    <span class="font-medium {{ $desktopFcp <= 1.8 ? 'text-green-600 dark:text-green-400' : ($desktopFcp <= 3.0 ? 'text-amber-600 dark:text-amber-400' : 'text-red-600 dark:text-red-400') }}">
                                                        {{ number_format($desktopFcp, 2) }}s
                                                    </span>
                                                </div>
                                            @endif
                                            @if($desktopLcp)
                                                <div class="flex items-center gap-1">
                                                    <span class="text-gray-500 dark:text-gray-400 dark:text-gray-500 w-10">LCP:</span>
                                                    <span class="font-medium {{ $desktopLcp <= 2.5 ? 'text-green-600 dark:text-green-400' : ($desktopLcp <= 4.0 ? 'text-amber-600 dark:text-amber-400' : 'text-red-600 dark:text-red-400') }}">
                                                        {{ number_format($desktopLcp, 2) }}s
                                                    </span>
                                                </div>
                                            @endif
                                            @if($desktopCls !== null)
                                                <div class="flex items-center gap-1">
                                                    <span class="text-gray-500 dark:text-gray-400 dark:text-gray-500 w-10">CLS:</span>
                                                    <span class="font-medium {{ $desktopCls <= 0.1 ? 'text-green-600 dark:text-green-400' : ($desktopCls <= 0.25 ? 'text-amber-600 dark:text-amber-400' : 'text-red-600 dark:text-red-400') }}">
                                                        {{ number_format($desktopCls, 3) }}
                                                    </span>
                                                </div>
                                            @endif
                                            @if($desktopTti)
                                                <div class="flex items-center gap-1">
                                                    <span class="text-gray-500 dark:text-gray-400 dark:text-gray-500 w-10">TTI:</span>
                                                    <span class="font-medium text-gray-700 dark:text-gray-300 dark:text-gray-500">{{ number_format($desktopTti, 2) }}s</span>
                                                </div>
                                            @endif
                                            @if($desktopTbt)
                                                <div class="flex items-center gap-1">
                                                    <span class="text-gray-500 dark:text-gray-400 dark:text-gray-500 w-10">TBT:</span>
                                                    <span class="font-medium text-gray-700 dark:text-gray-300 dark:text-gray-500">{{ number_format($desktopTbt, 2) }}s</span>
                                                </div>
                                            @endif
                                        </div>
                                    @else
                                        <span class="text-gray-400 dark:text-gray-500">-</span>
                                    @endif
                                </td>
                                <td class="px-4 py-2 text-gray-500 dark:text-gray-400 dark:text-gray-500 text-xs">
                                    @if($updatedAt)
                                        {{ \Carbon\Carbon::parse($updatedAt)->format('d.m.Y H:i') }}
                                    @else
                                        <span class="text-gray-400 dark:text-gray-500">-</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @endif
    @if($user->isAdmin() && !empty($financialSummary))
    <!-- Finansal Sağlık Özeti -->
    <div class="mt-4 w-full bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
        <div class="p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
                <i class="fas fa-coins text-amber-500"></i>
                Finansal Sağlık Özeti
            </h3>
            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400 dark:text-gray-500">
                Para birimi dağılımı, vergi durumu ve stok uyarılarını tek bir yerden takip edin.
            </p>
            <div class="mt-4 grid gap-6 md:grid-cols-3">
                <div>
                    <h4 class="text-sm font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
                        <i class="fas fa-globe-europe text-amber-500"></i>
                        Para Birimleri
                    </h4>
                    <ul class="mt-3 space-y-2 text-sm text-gray-600 dark:text-gray-400 dark:text-gray-500">
                        @forelse($financialSummary['currencies'] as $row)
                            <li class="flex items-center justify-between rounded-md bg-amber-50 dark:bg-amber-900/30 px-3 py-2">
                                <span class="font-semibold text-amber-700 dark:text-amber-300">{{ strtoupper($row['currency']) }}</span>
                                <span class="text-xs text-amber-600 dark:text-amber-400 dark:text-amber-400">{{ $row['total'] }} site</span>
                            </li>
                        @empty
                            <li class="text-xs text-gray-400 dark:text-gray-500">Kayıtlı para birimi bulunamadı.</li>
                        @endforelse
                    </ul>
                </div>
                <div>
                    <h4 class="text-sm font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
                        <i class="fas fa-file-invoice-dollar text-emerald-500"></i>
                        Vergi Durumu
                    </h4>
                    <div class="mt-3 space-y-2 text-sm">
                        <div class="flex items-center justify-between rounded-md bg-emerald-50 dark:bg-emerald-900/30 px-3 py-2 text-emerald-700 dark:text-emerald-300">
                            <span class="font-semibold">Vergi Açık</span>
                            <span class="text-xs">{{ $financialSummary['tax']['enabled'] ?? 0 }} site</span>
                        </div>
                        <div class="flex items-center justify-between rounded-md bg-red-50 px-3 py-2 text-red-600 dark:text-red-400">
                            <span class="font-semibold">Vergi Kapalı</span>
                            <span class="text-xs">{{ $financialSummary['tax']['disabled'] ?? 0 }} site</span>
                        </div>
                    </div>
                </div>
                <div>
                    <h4 class="text-sm font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
                        <i class="fas fa-boxes text-indigo-500"></i>
                        Stok Uyarıları
                    </h4>
                    <div class="mt-3 space-y-2 text-sm">
                        <div class="flex items-center justify-between rounded-md bg-indigo-50 dark:bg-indigo-900/30 px-3 py-2 text-indigo-600 dark:text-indigo-400">
                            <span class="font-semibold">Bildiren Site</span>
                            <span class="text-xs">{{ $financialSummary['stock']['sites_reporting'] ?? 0 }}</span>
                        </div>
                        <div class="flex items-center justify-between rounded-md bg-orange-50 dark:bg-orange-900/30 px-3 py-2 text-orange-600 dark:text-orange-400 dark:text-orange-400">
                            <span class="font-semibold">Düşük Stok</span>
                            <span class="text-xs">{{ $financialSummary['stock']['low_stock'] ?? 0 }} ürün</span>
                        </div>
                        <div class="flex items-center justify-between rounded-md bg-rose-50 dark:bg-rose-900/30 px-3 py-2 text-rose-600 dark:text-rose-400">
                            <span class="font-semibold">Stokta Yok</span>
                            <span class="text-xs">{{ $financialSummary['stock']['out_of_stock'] ?? 0 }} ürün</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-6">
                <h4 class="text-sm font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
                    <i class="fas fa-store"></i>
                    Son Finansal Senkronizasyonlar
                </h4>
                <div class="mt-3 overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 text-sm">
                        <thead class="bg-gray-50 dark:bg-gray-700">
                            <tr>
                                <th class="px-4 py-2 text-left font-semibold text-gray-700 dark:text-gray-300 dark:text-gray-500">Site</th>
                                <th class="px-4 py-2 text-left font-semibold text-gray-700 dark:text-gray-300 dark:text-gray-500">Para Birimi</th>
                                <th class="px-4 py-2 text-left font-semibold text-gray-700 dark:text-gray-300 dark:text-gray-500">Vergi</th>
                                <th class="px-4 py-2 text-left font-semibold text-gray-700 dark:text-gray-300 dark:text-gray-500">Düşük Stok</th>
                                <th class="px-4 py-2 text-left font-semibold text-gray-700 dark:text-gray-300 dark:text-gray-500">Stokta Yok</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100 dark:divide-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 dark:text-gray-500">
                            @forelse($financialSummary['site_rows'] as $row)
                                <tr>
                                    <td class="px-4 py-2 font-semibold text-gray-900 dark:text-gray-100">{{ $row['name'] }}</td>
                                    <td class="px-4 py-2 text-gray-600 dark:text-gray-400 dark:text-gray-500">{{ strtoupper($row['currency'] ?? '-') }}</td>
                                    <td class="px-4 py-2">
                                        @if($row['tax_enabled'])
                                            <span class="inline-flex items-center gap-1 rounded-full bg-emerald-50 dark:bg-emerald-900/30 px-2 py-1 text-xs font-semibold text-emerald-700 dark:text-emerald-300">
                                                <i class="fas fa-check"></i> Açık
                                            </span>
                                        @else
                                            <span class="inline-flex items-center gap-1 rounded-full bg-red-50 px-2 py-1 text-xs font-semibold text-red-600 dark:text-red-400">
                                                <i class="fas fa-times"></i> Kapalı
                                            </span>
                                        @endif
                                    </td>
                                    <td class="px-4 py-2 text-orange-600 dark:text-orange-400">{{ $row['low_stock'] }}</td>
                                    <td class="px-4 py-2 text-rose-600">{{ $row['out_of_stock'] }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="px-4 py-3 text-center text-xs text-gray-400 dark:text-gray-500">
                                        Henüz finansal veri senkronize edilmedi.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    @endif
    <!-- Geliştirici KPI Takibi -->
    <div class="mt-4 w-full bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
        <div class="p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
                <i class="fas fa-stopwatch text-blue-600"></i>
                Geliştirici KPI Takibi
            </h3>
            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400 dark:text-gray-500">
                Ortalama kurulum süreleri, tamamlanan site sayıları ve ekip performansına dair özet veriler.
            </p>
            <div class="mt-4 overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 text-sm">
                    <thead class="bg-gray-50 dark:bg-gray-700 text-gray-600 dark:text-gray-400 dark:text-gray-500 uppercase tracking-wide text-xs">
                        <tr>
                            <th class="px-4 py-2 text-left">Geliştirici</th>
                            <th class="px-4 py-2 text-left">Tamamlanan Site</th>
                            <th class="px-4 py-2 text-left">Ortalama Kurulum Süresi</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 dark:divide-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 dark:text-gray-500">
                        @forelse($developerKpis as $kpi)
                            <tr>
                                <td class="px-4 py-2 font-semibold text-gray-900 dark:text-gray-100">{{ $kpi['name'] }}</td>
                                <td class="px-4 py-2">
                                    <span class="inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2 py-1 text-xs font-semibold text-emerald-700">
                                        <i class="fas fa-check-circle"></i> {{ $kpi['completed_count'] }}
                                    </span>
                                </td>
                                <td class="px-4 py-2">
                                    @if(isset($kpi['avg_setup_time_detail']) && $kpi['avg_minutes_raw'] > 0)
                                        <span class="inline-flex items-center gap-1 rounded-full bg-indigo-50 dark:bg-indigo-900/30 px-2 py-1 text-xs font-semibold text-indigo-700 dark:text-indigo-300">
                                            <i class="fas fa-hourglass-half"></i> {{ $kpi['avg_setup_time_detail'] }}
                                        </span>
                                    @elseif($kpi['avg_setup_time'] > 0)
                                        <span class="inline-flex items-center gap-1 rounded-full bg-indigo-50 dark:bg-indigo-900/30 px-2 py-1 text-xs font-semibold text-indigo-700 dark:text-indigo-300">
                                            <i class="fas fa-hourglass-half"></i> {{ $kpi['avg_setup_time'] }} {{ $kpi['avg_unit'] }}
                                        </span>
                                    @else
                                        <span class="text-gray-400 dark:text-gray-500">Veri yok</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="3" class="px-4 py-3 text-center text-sm text-gray-500 dark:text-gray-400 dark:text-gray-500">
                                    Henüz tamamlanan site bulunmuyor.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @endif

    <!-- Son Siteler -->
    <div class="mt-8 w-full">
        <div class="sm:flex sm:items-center">
            <div class="sm:flex-auto">
                <h2 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Son Siteler</h2>
            </div>
        </div>

        <div class="mt-4 overflow-hidden shadow ring-1 ring-black dark:ring-gray-700 ring-opacity-5 md:rounded-lg">
            <table class="min-w-full divide-y divide-gray-300">
                <thead class="bg-gray-50 dark:bg-gray-700">
                    <tr>
                        <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-100 sm:pl-6">Site Adı</th>
                        <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">URL</th>
                        @if($user->isAdmin())
                        <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">Atanan</th>
                        @endif
                        <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">Durum</th>
                        <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
                            <span class="sr-only">İşlemler</span>
                        </th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 dark:divide-gray-700 bg-white dark:bg-gray-800">
                    @forelse($sites as $site)
                    <tr>
                        <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-6">
                            {{ $site->name }}
                        </td>
                        <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400 dark:text-gray-500">
                            <a href="{{ $site->url }}" target="_blank" class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">{{ $site->url }}</a>
                        </td>
                        @if($user->isAdmin())
                        <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400 dark:text-gray-500">
                            {{ $site->assignedUser ? $site->assignedUser->name : 'Atanmamış' }}
                        </td>
                        @endif
                        <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400 dark:text-gray-500">
                            <span class="px-2 py-1 text-xs rounded-full {{ $site->status === 'active' ? 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300' : 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300' }}">
                                {{ $site->status }}
                            </span>
                        </td>
                        <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
                            <a href="{{ route('sites.show', $site) }}" class="text-blue-600 hover:text-blue-900">Detay</a>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="{{ $user->isAdmin() ? '5' : '4' }}" class="px-3 py-4 text-center text-sm text-gray-500 dark:text-gray-400 dark:text-gray-500">
                            Henüz site bulunmamaktadır.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
    const maintenanceStatusIndicator = document.getElementById('maintenance-worker-status-indicator');
    const maintenanceStatusText = document.getElementById('maintenance-worker-status');
    const maintenanceLastSeen = document.getElementById('maintenance-worker-last-seen');
    const maintenanceError = document.getElementById('maintenance-worker-status-error');
    const maintenanceRefreshBtn = document.getElementById('refresh-maintenance-worker-status');

    async function fetchMaintenanceWorkerStatus() {
        if (!maintenanceStatusIndicator || !maintenanceStatusText || !maintenanceLastSeen) {
            return;
        }

        maintenanceStatusIndicator.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Kontrol ediliyor';
        maintenanceStatusIndicator.className = 'inline-flex items-center gap-1 rounded-full bg-gray-100 px-3 py-1 text-xs font-semibold text-gray-600 dark:text-gray-400 dark:text-gray-500';
        if (maintenanceError) {
            maintenanceError.classList.add('hidden');
        }

        try {
            const response = await fetch('{{ route('maintenance.worker-status') }}', {
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                },
                credentials: 'same-origin',
            });

            if (!response.ok) {
                throw new Error('Worker durumu alınamadı');
            }

            const data = await response.json();
            const status = (data.status || 'unknown').toString();
            const lastSeen = data.last_seen_at || '-';

            maintenanceStatusText.textContent = status;
            maintenanceLastSeen.textContent = lastSeen;

            if (status === 'running') {
                maintenanceStatusIndicator.innerHTML = '<i class="fas fa-circle text-emerald-500"></i> Çalışıyor';
                maintenanceStatusIndicator.className = 'inline-flex items-center gap-1 rounded-full bg-emerald-100 px-3 py-1 text-xs font-semibold text-emerald-600';
            } else if (status === 'idle') {
                maintenanceStatusIndicator.innerHTML = '<i class="fas fa-circle text-amber-500"></i> Boşta';
                maintenanceStatusIndicator.className = 'inline-flex items-center gap-1 rounded-full bg-amber-100 px-3 py-1 text-xs font-semibold text-amber-600 dark:text-amber-400';
            } else {
                maintenanceStatusIndicator.innerHTML = '<i class="fas fa-circle text-gray-400 dark:text-gray-500"></i> Bilinmiyor';
                maintenanceStatusIndicator.className = 'inline-flex items-center gap-1 rounded-full bg-gray-100 px-3 py-1 text-xs font-semibold text-gray-600 dark:text-gray-400 dark:text-gray-500';
            }
        } catch (error) {
            console.error('Maintenance worker status error:', error);
            maintenanceStatusIndicator.innerHTML = '<i class="fas fa-exclamation-circle text-rose-500"></i> Hata';
            maintenanceStatusIndicator.className = 'inline-flex items-center gap-1 rounded-full bg-rose-100 px-3 py-1 text-xs font-semibold text-rose-600';
            maintenanceStatusText.textContent = 'Bilinmiyor';
            maintenanceLastSeen.textContent = '-';
            if (maintenanceError) {
                maintenanceError.textContent = error.message || 'Durum alınırken bir hata oluştu.';
                maintenanceError.classList.remove('hidden');
            }
        }
    }

    if (maintenanceRefreshBtn) {
        maintenanceRefreshBtn.addEventListener('click', fetchMaintenanceWorkerStatus);
    }

    fetchMaintenanceWorkerStatus();

    const bulkBtn = document.getElementById('bulk-gsp-update-btn');
    if (!bulkBtn) {
        return;
    }

    const statusEl = document.getElementById('bulk-gsp-update-status');
    const resultsContainer = document.getElementById('bulk-gsp-update-results');
    const resultsBody = document.getElementById('bulk-gsp-update-results-body');
    const endpoint = bulkBtn.dataset.endpoint;
    const csrfTokenMeta = document.querySelector('meta[name="csrf-token"]');
    const csrfToken = csrfTokenMeta ? csrfTokenMeta.getAttribute('content') : null;

    const statusClassMap = {
        success: 'text-green-600 dark:text-green-400',
        partial: 'text-orange-500',
        error: 'text-red-600 dark:text-red-400',
        empty: 'text-gray-600 dark:text-gray-400 dark:text-gray-500',
    };

    function setStatus(message, type = 'success') {
        if (!statusEl) return;
        statusEl.classList.remove('hidden', 'text-green-600 dark:text-green-400', 'text-orange-500', 'text-red-600 dark:text-red-400', 'text-gray-600 dark:text-gray-400 dark:text-gray-500');
        statusEl.classList.add(statusClassMap[type] || 'text-gray-600 dark:text-gray-400 dark:text-gray-500');
        statusEl.innerHTML = message;
    }

    function resetUI() {
        if (statusEl) {
            statusEl.classList.add('hidden');
            statusEl.innerHTML = '';
        }
        if (resultsContainer) {
            resultsContainer.classList.add('hidden');
        }
        if (resultsBody) {
            resultsBody.innerHTML = '';
        }
    }

    bulkBtn.addEventListener('click', async () => {
        if (!endpoint || !csrfToken) {
            alert('İstek yapılandırması eksik. Lütfen sayfayı yenileyin.');
            return;
        }

        if (bulkBtn.disabled) {
            return;
        }

        resetUI();
        bulkBtn.disabled = true;
        bulkBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Güncelleme Başlatılıyor...';
        setStatus('<i class="fas fa-sync fa-spin"></i> GSP Connector eklentisi güncelleniyor, lütfen bekleyin...', 'empty');

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

            const data = await response.json().catch(() => ({}));
            const status = data.status || (response.ok ? 'success' : 'error');

            if (response.ok) {
                const summary = data.summary || {};
                const duration = data.duration_seconds ? ` (${data.duration_seconds} sn)` : '';
                const summaryText = `Toplam: ${summary.total ?? 0}, Başarılı: ${summary.updated ?? 0}, Hata: ${summary.failed ?? 0}, Atlanan: ${summary.skipped ?? 0}${duration}`;
                setStatus(`<i class="fas fa-info-circle"></i> ${data.message ?? 'İşlem tamamlandı.'}<br>${summaryText}`, status);

                const results = Array.isArray(data.results) ? data.results : [];
                if (results.length > 0 && resultsBody && resultsContainer) {
                    resultsBody.innerHTML = results.map((item) => {
                        const itemStatus = item.status || 'unknown';
                        const badgeClass = itemStatus === 'success'
                            ? 'text-green-600 dark:text-green-400'
                            : itemStatus === 'skipped'
                                ? 'text-gray-500 dark:text-gray-400 dark:text-gray-500'
                                : 'text-red-600 dark:text-red-400';
                        const systemInfo = item.system_info_refresh === 'updated'
                            ? '<span class="text-green-600 dark:text-green-400 flex items-center gap-1"><i class="fas fa-check-circle"></i> Güncellendi</span>'
                            : item.system_info_refresh === 'failed'
                                ? '<span class="text-red-600 dark:text-red-400 flex items-center gap-1"><i class="fas fa-exclamation-circle"></i> Başarısız</span>'
                                : '<span class="text-gray-500 dark:text-gray-400 dark:text-gray-500">-</span>';

                        return `
                            <tr>
                                <td class="px-4 py-2 font-medium text-gray-900 dark:text-gray-100">${item.site_name || 'Bilinmeyen Site'}</td>
                                <td class="px-4 py-2"><span class="${badgeClass} font-semibold">${itemStatus}</span></td>
                                <td class="px-4 py-2 text-gray-600 dark:text-gray-400 dark:text-gray-500">${item.message ?? '-'}</td>
                                <td class="px-4 py-2">${systemInfo}</td>
                            </tr>
                        `;
                    }).join('');
                    resultsContainer.classList.remove('hidden');
                }
            } else {
                const message = data.message || 'Güncelleme işlemi başlatılamadı.';
                setStatus(`<i class="fas fa-exclamation-circle"></i> ${message}`, 'error');
            }
        } catch (error) {
            console.error(error);
            setStatus('<i class="fas fa-exclamation-circle"></i> Ağ hatası nedeniyle güncelleme tamamlanamadı.', 'error');
        } finally {
            bulkBtn.disabled = false;
            bulkBtn.innerHTML = '<i class="fas fa-plug"></i> Hepsini Güncelle';
        }
    });
});

@if(!empty($performanceTrends['datasets']))
// Performans Trend Grafiği
document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('performanceTrendChart');
    if (!ctx) return;

    const trendData = @json($performanceTrends);

    new Chart(ctx, {
        type: 'line',
        data: {
            labels: trendData.labels,
            datasets: trendData.datasets.map(dataset => ({
                ...dataset,
                pointRadius: 3,
                pointHoverRadius: 5,
                pointBackgroundColor: dataset.borderColor,
                pointBorderColor: '#fff',
                pointBorderWidth: 2,
            })),
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            interaction: {
                mode: 'index',
                intersect: false,
            },
            plugins: {
                legend: {
                    display: true,
                    position: 'top',
                    labels: {
                        usePointStyle: true,
                        padding: 15,
                        font: {
                            size: 12,
                            weight: '500',
                        },
                    },
                },
                tooltip: {
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    padding: 12,
                    titleFont: {
                        size: 14,
                        weight: 'bold',
                    },
                    bodyFont: {
                        size: 12,
                    },
                    callbacks: {
                        label: function(context) {
                            const value = context.parsed.y;
                            if (value === null) {
                                return context.dataset.label + ': Veri yok';
                            }
                            return context.dataset.label + ': ' + value + '/100';
                        },
                    },
                },
            },
            scales: {
                y: {
                    beginAtZero: false,
                    min: 0,
                    max: 100,
                    ticks: {
                        stepSize: 10,
                        font: {
                            size: 11,
                        },
                        callback: function(value) {
                            return value + '/100';
                        },
                    },
                    grid: {
                        color: 'rgba(0, 0, 0, 0.05)',
                    },
                    title: {
                        display: true,
                        text: 'Performans Skoru',
                        font: {
                            size: 12,
                            weight: '600',
                        },
                    },
                },
                x: {
                    ticks: {
                        maxRotation: 45,
                        minRotation: 45,
                        font: {
                            size: 10,
                        },
                    },
                    grid: {
                        display: false,
                    },
                },
            },
        },
    });
});
@endif

// Widget Management System
(function() {
    const editModeBtn = document.getElementById('widget-edit-mode');
    const widgetGrid = document.getElementById('widget-grid');
    const widgetModal = document.getElementById('widget-edit-modal');
    const widgetModalClose = document.getElementById('widget-modal-close');
    const availableWidgetsList = document.getElementById('available-widgets-list');
    let isEditMode = false;

    // Toggle edit mode
    editModeBtn?.addEventListener('click', function() {
        isEditMode = !isEditMode;
        widgetGrid?.setAttribute('data-edit-mode', isEditMode.toString());
        
        if (isEditMode) {
            this.innerHTML = '<i class="fas fa-check"></i> <span>Düzenlemeyi Bitir</span>';
            this.classList.remove('text-gray-700', 'dark:text-gray-300', 'dark:text-gray-500', 'bg-white', 'dark:bg-gray-800', 'border-gray-300', 'dark:border-gray-600');
            this.classList.add('text-white', 'bg-green-600', 'border-green-600');
            
            // Show widget headers and drag handles
            document.querySelectorAll('.widget-header').forEach(header => {
                header.classList.remove('hidden');
            });
            document.querySelectorAll('.widget-drag-handle').forEach(handle => {
                handle.classList.remove('hidden');
            });
            
            // Initialize dashboard grid sortable
            setTimeout(() => {
                initializeDashboardSortable();
            }, 100);
            
            // Load available widgets
            loadAvailableWidgets();
        } else {
            this.innerHTML = '<i class="fas fa-edit"></i> <span>Widget Düzenle</span>';
            this.classList.remove('text-white', 'bg-green-600', 'border-green-600');
            this.classList.add('text-gray-700', 'dark:text-gray-300', 'dark:text-gray-500', 'bg-white', 'dark:bg-gray-800', 'border-gray-300', 'dark:border-gray-600');
            
            // Hide widget headers and drag handles
            document.querySelectorAll('.widget-header').forEach(header => {
                header.classList.add('hidden');
            });
            document.querySelectorAll('.widget-drag-handle').forEach(handle => {
                handle.classList.add('hidden');
            });
            
            // Destroy dashboard sortable
            if (window.dashboardSortable) {
                window.dashboardSortable.destroy();
                window.dashboardSortable = null;
            }
        }
    });

    // Initialize dashboard grid sortable
    function initializeDashboardSortable() {
        const widgetGrid = document.getElementById('widget-grid');
        if (!widgetGrid) return;
        
        // Eğer zaten varsa destroy et
        if (window.dashboardSortable) {
            window.dashboardSortable.destroy();
            window.dashboardSortable = null;
        }
        
        window.dashboardSortable = new Sortable(widgetGrid, {
            animation: 200,
            ghostClass: 'sortable-ghost',
            dragClass: 'sortable-drag',
            chosenClass: 'sortable-chosen',
            handle: '.widget-drag-handle, .widget-item',
            forceFallback: true,
            fallbackOnBody: true,
            swapThreshold: 0.65,
            onStart: function(evt) {
                evt.item.style.opacity = '0.5';
            },
            onEnd: function(evt) {
                evt.item.style.opacity = '1';
                saveDashboardWidgetOrder();
            }
        });
    }

    // Save dashboard widget order
    function saveDashboardWidgetOrder() {
        const widgetGrid = document.getElementById('widget-grid');
        if (!widgetGrid) return;
        
        const widgetItems = Array.from(widgetGrid.querySelectorAll('.widget-item'));
        const widgetOrders = {};
        
        widgetItems.forEach((item, index) => {
            const widgetId = parseInt(item.dataset.widgetId);
            widgetOrders[widgetId] = index;
        });
        
        fetch('{{ route("dashboard.widgets.update-order") }}', {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({ widget_orders: widgetOrders })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Başarılı - görsel geri bildirim
                const notification = document.createElement('div');
                notification.className = 'fixed top-4 right-4 bg-green-500 dark:bg-green-600 text-white px-4 py-2 rounded-lg shadow-lg z-50 flex items-center gap-2';
                notification.innerHTML = '<i class="fas fa-check-circle"></i><span>Widget sırası kaydedildi</span>';
                document.body.appendChild(notification);
                setTimeout(() => {
                    notification.style.opacity = '0';
                    notification.style.transition = 'opacity 0.3s';
                    setTimeout(() => notification.remove(), 300);
                }, 2000);
            }
        })
        .catch(error => {
            console.error('Error saving dashboard widget order:', error);
        });
    }

    // Close modal
    widgetModalClose?.addEventListener('click', function() {
        widgetModal?.classList.add('hidden');
    });

    // Click outside to close
    widgetModal?.addEventListener('click', function(e) {
        if (e.target === this) {
            this.classList.add('hidden');
        }
    });

    let currentWidgetsSortable = null;
    let availableWidgetsSortable = null;
    let allWidgetsData = [];

    // Load available widgets
    function loadAvailableWidgets() {
        // Show modal immediately
        widgetModal?.classList.remove('hidden');
        
        const currentWidgetsList = document.getElementById('current-widgets-list');
        const availableWidgetsList = document.getElementById('available-widgets-list');
        
        // Show loading state
        if (currentWidgetsList) {
            currentWidgetsList.innerHTML = '<div class="text-center py-8"><i class="fas fa-spinner fa-spin text-2xl text-gray-400 dark:text-gray-500 mb-2"></i><p class="text-gray-500 dark:text-gray-400">Yükleniyor...</p></div>';
        }
        if (availableWidgetsList) {
            availableWidgetsList.innerHTML = '<div class="text-center py-8"><i class="fas fa-spinner fa-spin text-2xl text-gray-400 dark:text-gray-500 mb-2"></i><p class="text-gray-500 dark:text-gray-400">Yükleniyor...</p></div>';
        }
        
        fetch('{{ route("dashboard.widgets.available") }}')
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                if (data.success && data.widgets) {
                    allWidgetsData = data.widgets;
                    renderKanbanWidgets(data.widgets);
                    initializeSortable();
                } else {
                    // Show error message
                    if (currentWidgetsList) {
                        currentWidgetsList.innerHTML = '<div class="text-center py-8"><i class="fas fa-exclamation-triangle text-2xl text-red-400 mb-2"></i><p class="text-red-500">Widget\'lar yüklenirken bir hata oluştu.</p></div>';
                    }
                }
            })
            .catch(error => {
                console.error('Error loading widgets:', error);
                // Show error message
                if (currentWidgetsList) {
                    currentWidgetsList.innerHTML = '<div class="text-center py-8"><i class="fas fa-exclamation-triangle text-2xl text-red-400 mb-2"></i><p class="text-red-500">Widget\'lar yüklenirken bir hata oluştu: ' + error.message + '</p></div>';
                }
            });
    }

    // Render kanban widgets
    function renderKanbanWidgets(widgets) {
        const currentWidgetsList = document.getElementById('current-widgets-list');
        const availableWidgetsList = document.getElementById('available-widgets-list');
        const currentWidgetsCount = document.getElementById('current-widgets-count');
        const availableWidgetsCount = document.getElementById('available-widgets-count');
        
        if (!currentWidgetsList || !availableWidgetsList) return;
        
        // Mevcut widget'ları al (dashboard'dan)
        const currentWidgetItems = Array.from(document.querySelectorAll('.widget-item'));
        const currentWidgetIds = currentWidgetItems.map(item => parseInt(item.dataset.widgetId));
        
        // Widget'ları ayır
        const currentWidgets = widgets.filter(w => currentWidgetIds.includes(w.id));
        const availableWidgets = widgets.filter(w => !currentWidgetIds.includes(w.id));
        
        // Mevcut widget'ları render et
        if (currentWidgets.length > 0) {
            currentWidgetsList.innerHTML = currentWidgets.map(widget => createWidgetCard(widget, true)).join('');
        } else {
            currentWidgetsList.innerHTML = '<div class="text-center py-8 text-gray-400 dark:text-gray-500"><i class="fas fa-inbox text-3xl mb-2"></i><p class="text-sm">Henüz widget eklenmemiş</p></div>';
        }
        
        // Kullanılabilir widget'ları render et
        if (availableWidgets.length > 0) {
            availableWidgetsList.innerHTML = availableWidgets.map(widget => createWidgetCard(widget, false)).join('');
        } else {
            availableWidgetsList.innerHTML = '<div class="text-center py-8 text-gray-400 dark:text-gray-500"><i class="fas fa-check-circle text-3xl mb-2"></i><p class="text-sm">Tüm widget\'lar eklendi</p></div>';
        }
        
        // Sayıları güncelle
        if (currentWidgetsCount) currentWidgetsCount.textContent = currentWidgets.length;
        if (availableWidgetsCount) availableWidgetsCount.textContent = availableWidgets.length;
    }

    // Widget kartı oluştur
    function createWidgetCard(widget, isCurrent) {
        return `
            <div class="widget-card bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-3 cursor-move hover:shadow-md transition-shadow select-none" 
                 data-widget-id="${widget.id}"
                 style="cursor: grab;">
                <div class="flex items-center gap-3">
                    <div class="flex-shrink-0">
                        <div class="w-10 h-10 rounded-lg flex items-center justify-center" style="background-color: ${widget.color}20;">
                            <i class="fas ${widget.icon} text-lg" style="color: ${widget.color};"></i>
                        </div>
                    </div>
                    <div class="flex-1 min-w-0">
                        <h4 class="font-medium text-gray-900 dark:text-gray-100 text-sm truncate">${widget.name}</h4>
                        <p class="text-xs text-gray-500 dark:text-gray-400 truncate">${widget.description || ''}</p>
                    </div>
                    ${isCurrent ? '<button class="remove-widget-btn text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 flex-shrink-0 p-1" data-widget-id="' + widget.id + '" title="Kaldır"><i class="fas fa-times"></i></button>' : ''}
                </div>
            </div>
        `;
    }

    // Sortable başlat
    function initializeSortable() {
        const currentWidgetsList = document.getElementById('current-widgets-list');
        const availableWidgetsList = document.getElementById('available-widgets-list');
        
        // Mevcut widget'lar için sortable
        if (currentWidgetsList && currentWidgetsSortable) {
            currentWidgetsSortable.destroy();
        }
        currentWidgetsSortable = new Sortable(currentWidgetsList, {
            group: {
                name: 'widgets',
                pull: true,
                put: true
            },
            animation: 200,
            ghostClass: 'sortable-ghost',
            dragClass: 'sortable-drag',
            chosenClass: 'sortable-chosen',
            forceFallback: true,
            fallbackOnBody: true,
            swapThreshold: 0.65,
            onEnd: function(evt) {
                handleWidgetMove(evt);
            },
            onAdd: function(evt) {
                evt.to.classList.add('sortable-drag-over');
            },
            onRemove: function(evt) {
                evt.from.classList.remove('sortable-drag-over');
            }
        });
        
        // Kullanılabilir widget'lar için sortable
        if (availableWidgetsList && availableWidgetsSortable) {
            availableWidgetsSortable.destroy();
        }
        availableWidgetsSortable = new Sortable(availableWidgetsList, {
            group: {
                name: 'widgets',
                pull: true,
                put: true
            },
            animation: 200,
            ghostClass: 'sortable-ghost',
            dragClass: 'sortable-drag',
            chosenClass: 'sortable-chosen',
            forceFallback: true,
            fallbackOnBody: true,
            swapThreshold: 0.65,
            onEnd: function(evt) {
                handleWidgetMove(evt);
            },
            onAdd: function(evt) {
                evt.to.classList.add('sortable-drag-over');
            },
            onRemove: function(evt) {
                evt.from.classList.remove('sortable-drag-over');
            }
        });
        
        // Remove butonları için event listener
        document.querySelectorAll('.remove-widget-btn').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                const widgetId = this.dataset.widgetId;
                removeWidget(widgetId);
            });
        });
    }

    // Widget hareketini işle
    function handleWidgetMove(evt) {
        const fromList = evt.from.id;
        const toList = evt.to.id;
        const widgetId = parseInt(evt.item.dataset.widgetId);
        
        // Eğer kullanılabilir widget'lar listesinden mevcut widget'lar listesine taşındıysa
        if (fromList === 'available-widgets-list' && toList === 'current-widgets-list') {
            addWidget(widgetId);
        }
        // Eğer mevcut widget'lar listesinden kullanılabilir widget'lar listesine taşındıysa
        else if (fromList === 'current-widgets-list' && toList === 'available-widgets-list') {
            removeWidget(widgetId);
        }
        // Eğer mevcut widget'lar listesi içinde sıralama değiştiyse
        else if (fromList === 'current-widgets-list' && toList === 'current-widgets-list') {
            saveWidgetOrder();
        }
    }

    // Widget sırasını kaydet
    function saveWidgetOrder() {
        const currentWidgetsList = document.getElementById('current-widgets-list');
        const widgetIds = Array.from(currentWidgetsList.querySelectorAll('.widget-card')).map(card => parseInt(card.dataset.widgetId));
        
        // widget_orders formatı: { widget_id: order_index }
        const widgetOrders = {};
        widgetIds.forEach((widgetId, index) => {
            widgetOrders[widgetId] = index;
        });
        
        fetch('{{ route("dashboard.widgets.update-order") }}', {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({ widget_orders: widgetOrders })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Başarılı - sayfayı yenile
                setTimeout(() => {
                    location.reload();
                }, 300);
            }
        })
        .catch(error => {
            console.error('Error saving widget order:', error);
        });
    }

    // Remove widget function
    function removeWidget(widgetId) {
        fetch(`{{ route("dashboard.widgets.destroy", ":id") }}`.replace(':id', widgetId), {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Widget'ı listeden kaldır ve yeniden render et
                loadAvailableWidgets();
                // Sayfayı yenile
                setTimeout(() => {
                    location.reload();
                }, 500);
            }
        })
        .catch(error => {
            console.error('Error removing widget:', error);
        });
    }

    // Add widget
    function addWidget(widgetId) {
        fetch('{{ route("dashboard.widgets.store") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: JSON.stringify({ widget_id: widgetId })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Modal'ı yeniden yükle
                loadAvailableWidgets();
                // Sayfayı yenile
                setTimeout(() => {
                    location.reload();
                }, 500);
            }
        })
        .catch(error => {
            console.error('Error adding widget:', error);
        });
    }

    // Remove widget
    document.querySelectorAll('.widget-remove-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const widgetItem = this.closest('.widget-item');
            const widgetId = widgetItem.dataset.widgetId;
            
            if (confirm('Bu widget\'ı kaldırmak istediğinizden emin misiniz?')) {
                fetch(`{{ route("dashboard.widgets.destroy", ":id") }}`.replace(':id', widgetId), {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        widgetItem.remove();
                    }
                });
            }
        });
    });

    // Currency Rate Synchronization
    (function() {
        const syncBtn = document.getElementById('currency-sync-btn');
        const syncBtnText = document.getElementById('currency-sync-btn-text');
        const syncMessage = document.getElementById('currency-sync-message');
        const syncStatus = document.getElementById('currency-sync-status');
        const lastSync = document.getElementById('currency-last-sync');
        const ratesCount = document.getElementById('currency-rates-count');
        const statusBadge = document.getElementById('currency-sync-status-badge');

        // Eğer currency sync widget'ı yoksa JavaScript'i çalıştırma
        if (!syncStatus || !lastSync || !ratesCount || !statusBadge) {
            return;
        }

        // Load initial status
        function loadCurrencyStatus() {
            // Elementlerin varlığını kontrol et
            if (!syncStatus || !lastSync || !ratesCount || !statusBadge) {
                return;
            }

            fetch('{{ route('settings.currency.status') }}', {
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                },
                credentials: 'same-origin',
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Update last sync
                    if (lastSync) {
                    if (data.last_sync) {
                        lastSync.textContent = data.last_sync_human || data.last_sync;
                    } else {
                        lastSync.textContent = 'Henüz senkronize edilmedi';
                        }
                    }

                    // Update rates count
                    if (ratesCount) {
                    ratesCount.textContent = data.rates_count || 0;
                    }

                    // Update status badge
                    if (statusBadge) {
                    if (data.is_recent) {
                        statusBadge.innerHTML = '<span class="inline-flex items-center gap-1 rounded-full bg-emerald-100 dark:bg-emerald-900/30 px-2 py-1 text-xs text-emerald-600 dark:text-emerald-400"><i class="fas fa-check-circle"></i> Güncel</span>';
                    } else if (data.last_sync) {
                        statusBadge.innerHTML = '<span class="inline-flex items-center gap-1 rounded-full bg-yellow-100 dark:bg-yellow-900/30 px-2 py-1 text-xs text-yellow-600 dark:text-yellow-400"><i class="fas fa-exclamation-triangle"></i> Eski</span>';
                    } else {
                        statusBadge.innerHTML = '<span class="inline-flex items-center gap-1 rounded-full bg-gray-100 dark:bg-gray-700 px-2 py-1 text-xs text-gray-600 dark:text-gray-400"><i class="fas fa-question-circle"></i> Bilinmiyor</span>';
                        }
                    }

                    // Update status display
                    if (syncStatus) {
                    syncStatus.innerHTML = `
                        <div class="text-sm text-gray-600 dark:text-gray-400">
                            <i class="fas fa-info-circle mr-1"></i>
                            <span>Son senkronizasyon: ${data.last_sync_human || 'Henüz yapılmadı'}</span>
                        </div>
                    `;
                    }
                }
            })
            .catch(error => {
                console.error('Currency status load error:', error);
                if (syncStatus) {
                syncStatus.innerHTML = `
                    <div class="text-sm text-red-600 dark:text-red-400">
                        <i class="fas fa-exclamation-circle mr-1"></i>
                        Durum bilgisi yüklenemedi
                    </div>
                `;
                }
            });
        }

        // Sync button click handler
        if (syncBtn && syncBtnText && syncMessage) {
            syncBtn.addEventListener('click', function() {
                if (syncBtn.disabled) return;

                syncBtn.disabled = true;
                if (syncBtnText) {
                syncBtnText.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Senkronize ediliyor...';
                }
                if (syncMessage) {
                syncMessage.classList.add('hidden');
                syncMessage.className = 'mt-3 text-sm';
                }

                fetch('{{ route('settings.currency.sync') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    },
                    credentials: 'same-origin',
                })
                .then(response => response.json())
                .then(data => {
                    if (syncMessage) {
                    if (data.success) {
                        syncMessage.className = 'mt-3 text-sm text-emerald-600 dark:text-emerald-400';
                        syncMessage.innerHTML = '<i class="fas fa-check-circle mr-1"></i>' + data.message;
                        syncMessage.classList.remove('hidden');

                        // Reload status after a short delay
                        setTimeout(() => {
                            loadCurrencyStatus();
                        }, 2000);
                    } else {
                        syncMessage.className = 'mt-3 text-sm text-red-600 dark:text-red-400';
                        syncMessage.innerHTML = '<i class="fas fa-exclamation-circle mr-1"></i>' + (data.message || 'Senkronizasyon başlatılamadı');
                        syncMessage.classList.remove('hidden');
                        }
                    }
                })
                .catch(error => {
                    console.error('Currency sync error:', error);
                    if (syncMessage) {
                    syncMessage.className = 'mt-3 text-sm text-red-600 dark:text-red-400';
                    syncMessage.innerHTML = '<i class="fas fa-exclamation-circle mr-1"></i> Bir hata oluştu. Lütfen tekrar deneyin.';
                    syncMessage.classList.remove('hidden');
                    }
                })
                .finally(() => {
                    if (syncBtn) {
                    syncBtn.disabled = false;
                    }
                    if (syncBtnText) {
                    syncBtnText.innerHTML = '<i class="fas fa-sync-alt"></i> Şimdi Senkronize Et';
                    }
                });
            });
        }

        // Load status on page load
        loadCurrencyStatus();

        // Auto-refresh status every 30 seconds
        setInterval(loadCurrencyStatus, 30000);
    })();
})();
</script>

<!-- Sağ Sidebar - Hızlı Erişim (Admin) / Hızlı Kurulum (Developer) -->
@if($user->isAdmin())
<aside id="right-sidebar" class="fixed right-0 top-16 h-full bg-white dark:bg-gray-800 shadow-2xl z-40 transition-all duration-300 ease-in-out border-l border-gray-200 dark:border-gray-700" style="width: 320px; transform: translateX(0); height: calc(100vh - 4rem);">
    <!-- Sidebar Header -->
    <div class="relative z-40 flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-r from-indigo-50 to-purple-50 dark:from-indigo-900/20 dark:to-purple-900/20">
        <div class="flex items-center gap-2">
            <i class="fas fa-bolt text-indigo-600 dark:text-indigo-400"></i>
            <span id="right-sidebar-title" class="text-sm font-semibold text-gray-900 dark:text-gray-100 whitespace-nowrap">Hızlı Erişim</span>
        </div>
        <button id="right-sidebar-toggle" class="p-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors" title="Daralt/Genişlet">
            <i class="fas fa-chevron-right text-xs transition-transform duration-300" id="right-sidebar-icon"></i>
        </button>
    </div>

    <!-- Sidebar Content -->
    <div class="overflow-y-auto" style="height: calc(100vh - 4rem - 64px);">
        <div class="p-4 space-y-3">
            <!-- Toplam Site -->
            <div class="quick-access-item group relative bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 border border-blue-200/50 dark:border-blue-700/50 rounded-lg p-3 hover:shadow-md transition-all duration-200">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3 flex-1 min-w-0">
                        <div class="flex-shrink-0 w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center shadow-sm">
                            <i class="fas fa-globe text-white text-sm"></i>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="quick-access-label text-xs font-medium text-blue-600 dark:text-blue-400 truncate">Toplam Site</p>
                            <p class="quick-access-value text-lg font-bold text-gray-900 dark:text-white">{{ $totalSites }}</p>
                            @if(isset($stats['active_sites']))
                            <p class="quick-access-detail text-xs text-blue-500 dark:text-blue-400">{{ $stats['active_sites'] }} aktif</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Toplam Ürün -->
            <div class="quick-access-item group relative bg-gradient-to-br from-emerald-50 to-green-100 dark:from-emerald-900/20 dark:to-green-800/20 border border-emerald-200/50 dark:border-emerald-700/50 rounded-lg p-3 hover:shadow-md transition-all duration-200">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3 flex-1 min-w-0">
                        <div class="flex-shrink-0 w-10 h-10 bg-gradient-to-br from-emerald-500 to-green-600 rounded-lg flex items-center justify-center shadow-sm">
                            <i class="fas fa-box text-white text-sm"></i>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="quick-access-label text-xs font-medium text-emerald-600 dark:text-emerald-400 truncate">Toplam Ürün</p>
                            <p class="quick-access-value text-lg font-bold text-gray-900 dark:text-white">{{ $stats['total_products'] ?? 0 }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Görevler -->
            <div class="quick-access-item group relative bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 border border-purple-200/50 dark:border-purple-700/50 rounded-lg p-3 hover:shadow-md transition-all duration-200">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3 flex-1 min-w-0">
                        <div class="flex-shrink-0 w-10 h-10 bg-gradient-to-br from-purple-500 to-purple-600 rounded-lg flex items-center justify-center shadow-sm">
                            <i class="fas fa-tasks text-white text-sm"></i>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="quick-access-label text-xs font-medium text-purple-600 dark:text-purple-400 truncate">Görevler</p>
                            <p class="quick-access-value text-lg font-bold text-gray-900 dark:text-white">{{ $stats['total_tasks'] ?? 0 }}</p>
                            <p class="quick-access-detail text-xs text-purple-500 dark:text-purple-400">
                                <span class="text-green-600 dark:text-green-400">{{ $stats['completed_tasks'] ?? 0 }} tamamlandı</span>
                                <span class="mx-1">•</span>
                                <span class="text-orange-600 dark:text-orange-400">{{ $stats['pending_tasks'] ?? 0 }} bekliyor</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Performans Raporları -->
            <div class="quick-access-item group relative bg-gradient-to-br from-indigo-50 to-indigo-100 dark:from-indigo-900/20 dark:to-indigo-800/20 border border-indigo-200/50 dark:border-indigo-700/50 rounded-lg p-3 hover:shadow-md transition-all duration-200">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3 flex-1 min-w-0">
                        <div class="flex-shrink-0 w-10 h-10 bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-lg flex items-center justify-center shadow-sm">
                            <i class="fas fa-chart-line text-white text-sm"></i>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="quick-access-label text-xs font-medium text-indigo-600 dark:text-indigo-400 truncate">Performans Raporları</p>
                            <p class="quick-access-value text-lg font-bold text-gray-900 dark:text-white">{{ $stats['total_reports'] ?? 0 }}</p>
                        </div>
                    </div>
                </div>
            </div>

            @if($user->isAdmin())
            <!-- Güvenlik Uyarıları -->
            <div class="quick-access-item group relative bg-gradient-to-br from-red-50 to-red-100 dark:from-red-900/20 dark:to-red-800/20 border border-red-200/50 dark:border-red-700/50 rounded-lg p-3 hover:shadow-md transition-all duration-200">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3 flex-1 min-w-0">
                        <div class="flex-shrink-0 w-10 h-10 bg-gradient-to-br from-red-500 to-red-600 rounded-lg flex items-center justify-center shadow-sm">
                            <i class="fas fa-shield-alt text-white text-sm"></i>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="quick-access-label text-xs font-medium text-red-600 dark:text-red-400 truncate">Güvenlik Uyarıları</p>
                            <p class="quick-access-value text-lg font-bold text-gray-900 dark:text-white">{{ $stats['total_security_alerts'] ?? 0 }}</p>
                            <p class="quick-access-detail text-xs text-red-500 dark:text-red-400">Çözülmemiş</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Eklenti Güncellemeleri -->
            <div class="quick-access-item group relative bg-gradient-to-br from-amber-50 to-yellow-100 dark:from-amber-900/20 dark:to-yellow-800/20 border border-amber-200/50 dark:border-amber-700/50 rounded-lg p-3 hover:shadow-md transition-all duration-200">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3 flex-1 min-w-0">
                        <div class="flex-shrink-0 w-10 h-10 bg-gradient-to-br from-amber-500 to-yellow-600 rounded-lg flex items-center justify-center shadow-sm">
                            <i class="fas fa-plug text-white text-sm"></i>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="quick-access-label text-xs font-medium text-amber-600 dark:text-amber-400 truncate">Eklenti Güncellemeleri</p>
                            <p class="quick-access-value text-lg font-bold text-gray-900 dark:text-white">{{ $stats['total_plugin_updates'] ?? 0 }}</p>
                            <p class="quick-access-detail text-xs text-amber-500 dark:text-amber-400">Bekleyen güncelleme</p>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            <!-- Eğitim Modülleri -->
            <div class="quick-access-item group relative bg-gradient-to-br from-violet-50 to-purple-100 dark:from-violet-900/20 dark:to-purple-800/20 border border-violet-200/50 dark:border-violet-700/50 rounded-lg p-3 hover:shadow-md transition-all duration-200">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3 flex-1 min-w-0">
                        <div class="flex-shrink-0 w-10 h-10 bg-gradient-to-br from-violet-500 to-purple-600 rounded-lg flex items-center justify-center shadow-sm">
                            <i class="fas fa-book text-white text-sm"></i>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="quick-access-label text-xs font-medium text-violet-600 dark:text-violet-400 truncate">Eğitim Modülleri</p>
                            @if($user->isAdmin())
                                <p class="quick-access-value text-lg font-bold text-gray-900 dark:text-white">{{ $totalTrainings }}</p>
                            @else
                                <p class="quick-access-value text-lg font-bold text-gray-900 dark:text-white">{{ $pendingTrainings }}</p>
                                <p class="quick-access-detail text-xs text-violet-500 dark:text-violet-400">bekliyor</p>
                            @endif
                        </div>
                    </div>
                </div>
                <a href="{{ route('training.index') }}" class="absolute inset-0 flex items-center justify-end pr-3 opacity-0 group-hover:opacity-100 transition-opacity">
                    <i class="fas fa-arrow-right text-violet-600 dark:text-violet-400 text-xs"></i>
                </a>
            </div>

            @if(isset($stats['sites_last_7_days']) && $stats['sites_last_7_days'] > 0)
            <!-- Son 7 Gün -->
            <div class="quick-access-item group relative bg-gradient-to-br from-teal-50 to-emerald-100 dark:from-teal-900/20 dark:to-emerald-800/20 border border-teal-200/50 dark:border-teal-700/50 rounded-lg p-3 hover:shadow-md transition-all duration-200">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3 flex-1 min-w-0">
                        <div class="flex-shrink-0 w-10 h-10 bg-gradient-to-br from-teal-500 to-emerald-600 rounded-lg flex items-center justify-center shadow-sm">
                            <i class="fas fa-calendar-plus text-white text-sm"></i>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="quick-access-label text-xs font-medium text-teal-600 dark:text-teal-400 truncate">Son 7 Gün</p>
                            <p class="quick-access-value text-lg font-bold text-gray-900 dark:text-white">{{ $stats['sites_last_7_days'] }}</p>
                            <p class="quick-access-detail text-xs text-teal-500 dark:text-teal-400">yeni site</p>
                        </div>
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>
</aside>

<!-- Collapsed Sidebar (Sadece İkonlar) - Admin -->
<aside id="right-sidebar-collapsed" class="fixed right-0 top-16 h-full bg-white dark:bg-gray-800 shadow-2xl z-40 transition-all duration-300 ease-in-out border-l border-gray-200 dark:border-gray-700 hidden" style="width: 80px; height: calc(100vh - 4rem);">
    <div class="flex flex-col h-full">
        <!-- Header -->
        <div class="flex items-center justify-center p-4 border-b border-gray-200 dark:border-gray-700">
            <button id="right-sidebar-collapsed-toggle" class="p-1.5 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors" title="Genişlet">
                <i class="fas fa-chevron-left text-xs"></i>
            </button>
        </div>

        <!-- Content -->
        <div class="overflow-y-auto flex-1 py-4">
            <div class="space-y-4 px-2">
                <!-- Toplam Site -->
                <div class="flex flex-col items-center gap-1 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors cursor-pointer group" title="Toplam Site">
                    <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center shadow-sm">
                        <i class="fas fa-globe text-white text-sm"></i>
                    </div>
                    <span class="text-xs font-bold text-gray-900 dark:text-white">{{ $totalSites }}</span>
                </div>

                <!-- Toplam Ürün -->
                <div class="flex flex-col items-center gap-1 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors cursor-pointer group" title="Toplam Ürün">
                    <div class="w-10 h-10 bg-gradient-to-br from-emerald-500 to-green-600 rounded-lg flex items-center justify-center shadow-sm">
                        <i class="fas fa-box text-white text-sm"></i>
                    </div>
                    <span class="text-xs font-bold text-gray-900 dark:text-white">{{ $stats['total_products'] ?? 0 }}</span>
                </div>

                <!-- Görevler -->
                <div class="flex flex-col items-center gap-1 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors cursor-pointer group" title="Görevler">
                    <div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-purple-600 rounded-lg flex items-center justify-center shadow-sm">
                        <i class="fas fa-tasks text-white text-sm"></i>
                    </div>
                    <span class="text-xs font-bold text-gray-900 dark:text-white">{{ $stats['total_tasks'] ?? 0 }}</span>
                </div>

                <!-- Performans Raporları -->
                <div class="flex flex-col items-center gap-1 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors cursor-pointer group" title="Performans Raporları">
                    <div class="w-10 h-10 bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-lg flex items-center justify-center shadow-sm">
                        <i class="fas fa-chart-line text-white text-sm"></i>
                    </div>
                    <span class="text-xs font-bold text-gray-900 dark:text-white">{{ $stats['total_reports'] ?? 0 }}</span>
                </div>

                @if($user->isAdmin())
                <!-- Güvenlik Uyarıları -->
                <div class="flex flex-col items-center gap-1 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors cursor-pointer group" title="Güvenlik Uyarıları">
                    <div class="w-10 h-10 bg-gradient-to-br from-red-500 to-red-600 rounded-lg flex items-center justify-center shadow-sm">
                        <i class="fas fa-shield-alt text-white text-sm"></i>
                    </div>
                    <span class="text-xs font-bold text-gray-900 dark:text-white">{{ $stats['total_security_alerts'] ?? 0 }}</span>
                </div>

                <!-- Eklenti Güncellemeleri -->
                <div class="flex flex-col items-center gap-1 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors cursor-pointer group" title="Eklenti Güncellemeleri">
                    <div class="w-10 h-10 bg-gradient-to-br from-amber-500 to-yellow-600 rounded-lg flex items-center justify-center shadow-sm">
                        <i class="fas fa-plug text-white text-sm"></i>
                    </div>
                    <span class="text-xs font-bold text-gray-900 dark:text-white">{{ $stats['total_plugin_updates'] ?? 0 }}</span>
                </div>
                @endif

                <!-- Eğitim Modülleri -->
                <div class="flex flex-col items-center gap-1 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors cursor-pointer group" title="Eğitim Modülleri">
                    <div class="w-10 h-10 bg-gradient-to-br from-violet-500 to-purple-600 rounded-lg flex items-center justify-center shadow-sm">
                        <i class="fas fa-book text-white text-sm"></i>
                    </div>
                    <span class="text-xs font-bold text-gray-900 dark:text-white">
                        @if($user->isAdmin()){{ $totalTrainings }}@else{{ $pendingTrainings }}@endif
                    </span>
                </div>

                @if(isset($stats['sites_last_7_days']) && $stats['sites_last_7_days'] > 0)
                <!-- Son 7 Gün -->
                <div class="flex flex-col items-center gap-1 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors cursor-pointer group" title="Son 7 Gün">
                    <div class="w-10 h-10 bg-gradient-to-br from-teal-500 to-emerald-600 rounded-lg flex items-center justify-center shadow-sm">
                        <i class="fas fa-calendar-plus text-white text-sm"></i>
                    </div>
                    <span class="text-xs font-bold text-gray-900 dark:text-white">{{ $stats['sites_last_7_days'] }}</span>
                </div>
                @endif
            </div>
        </div>
    </div>
</aside>

<script>
(function() {
    'use strict';
    
    const rightSidebar = document.getElementById('right-sidebar');
    const rightSidebarCollapsed = document.getElementById('right-sidebar-collapsed');
    const toggleBtn = document.getElementById('right-sidebar-toggle');
    const toggleBtnCollapsed = document.getElementById('right-sidebar-collapsed-toggle');
    const sidebarIcon = document.getElementById('right-sidebar-icon');
    
    // LocalStorage'dan durumu yükle
    const isCollapsed = localStorage.getItem('right-sidebar-collapsed') === 'true';
    
    // Ana içeriğe margin ekle (sidebar genişliği kadar)
    const mainContent = document.querySelector('.px-4.sm\\:px-6.lg\\:px-8') || document.querySelector('[class*="px-4"]');
    
    function updateMainContentPadding(collapsed) {
        if (mainContent) {
            mainContent.style.paddingRight = collapsed ? '100px' : '340px';
        }
    }
    
    function collapseSidebar() {
        rightSidebar.style.transform = 'translateX(100%)';
        rightSidebarCollapsed.classList.remove('hidden');
        if (sidebarIcon) {
            sidebarIcon.style.transform = 'rotate(180deg)';
        }
        localStorage.setItem('right-sidebar-collapsed', 'true');
        updateMainContentPadding(true);
    }
    
    function expandSidebar() {
        rightSidebar.style.transform = 'translateX(0)';
        rightSidebarCollapsed.classList.add('hidden');
        if (sidebarIcon) {
            sidebarIcon.style.transform = 'rotate(0deg)';
        }
        localStorage.setItem('right-sidebar-collapsed', 'false');
        updateMainContentPadding(false);
    }
    
    // Toggle butonları
    if (toggleBtn) {
        toggleBtn.addEventListener('click', collapseSidebar);
    }
    
    if (toggleBtnCollapsed) {
        toggleBtnCollapsed.addEventListener('click', expandSidebar);
    }
    
    // Sayfa yüklendiğinde durumu uygula
    if (isCollapsed) {
        collapseSidebar();
    } else {
        expandSidebar();
    }
})();
</script>
@endif

@if($user->role === 'developer' && isset($quickSetupSteps))
<script>
(function() {
    // DOMContentLoaded bekleyerek sidebar'ın yüklenmesini garanti et
    function initQuickSetupButton() {
        const startBtn = document.getElementById('start-quick-setup-btn');
        const sidebar = document.getElementById('right-sidebar');
        const rightSidebarCollapsed = document.getElementById('right-sidebar-collapsed');
        const sidebarIcon = document.getElementById('right-sidebar-icon');
        
        if (!startBtn) {
            console.warn('Hızlı kurulum butonu bulunamadı');
            return;
        }
        
        startBtn.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            console.log('Hızlı kurulum butonu tıklandı');
            
            // Sidebar'ı aç
            if (sidebar) {
                sidebar.style.transform = 'translateX(0)';
                sidebar.style.display = 'block';
            }
            if (rightSidebarCollapsed) {
                rightSidebarCollapsed.classList.add('hidden');
            }
            if (sidebarIcon) {
                sidebarIcon.style.transform = 'rotate(0deg)';
            }
            localStorage.setItem('right-sidebar-collapsed', 'false');
            
            // Ana içeriğe margin ekle
            const mainContent = document.querySelector('.px-4.sm\\:px-6.lg\\:px-8') || document.querySelector('[class*="px-4"]');
            if (mainContent) {
                mainContent.style.paddingRight = '340px';
            }
            
            // Sidebar'a odaklan ve scroll yap
            setTimeout(() => {
                if (sidebar) {
                    sidebar.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'end' });
                    // Sidebar içeriğini de yenile (adımları kontrol et)
                    const refreshEvent = new Event('refresh-steps');
                    window.dispatchEvent(refreshEvent);
                }
            }, 300);
        });
    }
    
    // DOM yüklendiğinde veya hemen çalıştır
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initQuickSetupButton);
    } else {
        // DOM zaten yüklü, hemen çalıştır
        initQuickSetupButton();
    }
})();
</script>
@endif

<style>
/* Sağ Sidebar için özel stiller */
#right-sidebar {
    transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
}

#right-sidebar-collapsed {
    transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
}

.quick-access-item {
    cursor: pointer;
}

.quick-access-label,
.quick-access-value,
.quick-access-detail {
    transition: opacity 0.2s ease-in-out;
}

/* Responsive: Mobilde sidebar'ı gizle */
@media (max-width: 1024px) {
    #right-sidebar,
    #right-sidebar-collapsed {
        display: none !important;
    }
    
    .px-4.sm\:px-6.lg\:px-8 {
        padding-right: 1rem !important;
    }
}
</style>
@endpush