@extends('layouts.app')

@section('title', 'Siteler')

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <div class="sm:flex sm:items-center">
        <div class="sm:flex-auto">
            <h1 class="text-3xl font-semibold text-gray-900 dark:text-gray-100">Siteler</h1>
            <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">
                Tüm sitelerin listesi
            </p>
        </div>
        @if(auth()->user()->isAdmin())
        <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none flex gap-2">
            <a href="{{ route('export.sites', request()->query()) }}" class="inline-flex items-center gap-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-5 py-2.5 text-sm font-semibold text-gray-700 dark:text-gray-300 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-file-csv"></i>
                CSV İndir
            </a>
            <a href="{{ route('sites.create') }}" class="inline-flex items-center justify-center 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">
                <i class="fas fa-plus mr-1"></i>
                Yeni Site Ekle
            </a>
        </div>
        @endif
    </div>

</div>

    <!-- Gelişmiş Filtreleme -->
    <div class="mt-6 bg-white dark:bg-gray-800 shadow rounded-lg">
        <div class="px-4 py-3 border-b border-gray-200 flex items-center justify-between">
            <div class="flex items-center gap-3">
                <button type="button" id="toggle-advanced-filters" class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold text-gray-700 dark:text-gray-300 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 transition-all duration-200">
                    <i class="fas fa-filter"></i>
                    Gelişmiş Filtreler
                    <i class="fas fa-chevron-down text-xs" id="filter-chevron"></i>
                </button>
                @if(isset($savedFilters) && $savedFilters->count() > 0)
                <div class="flex items-center gap-2">
                    <span class="text-xs text-gray-500">Kayıtlı Filtreler:</span>
                    <select id="saved-filter-select" class="text-sm border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-lg px-3 py-2 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-400 focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-opacity-20 transition-all duration-200">
                        <option value="">Seçiniz...</option>
                        @foreach($savedFilters as $savedFilter)
                        <option value="{{ $savedFilter->id }}" data-filters="{{ json_encode($savedFilter->filters) }}" data-sort="{{ json_encode($savedFilter->sort) }}">
                            {{ $savedFilter->name }}
                            @if($savedFilter->is_shared)
                            <i class="fas fa-share-alt"></i>
                            @endif
                        </option>
                        @endforeach
                    </select>
                </div>
                @endif
            </div>
            <div class="flex items-center gap-2">
                <button type="button" id="bulk-ssl-analysis-btn" disabled class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold text-yellow-600 dark:text-yellow-400 bg-yellow-50 dark:bg-yellow-900/30 rounded-lg hover:bg-yellow-100 dark:hover:bg-yellow-900/50 focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:focus:ring-yellow-400 focus:ring-offset-2 transition-all duration-200 opacity-50 cursor-not-allowed">
                    <i class="fas fa-lock"></i>
                    SSL Analizi (<span id="ssl-selected-count">0</span>)
                </button>
                <button type="button" id="save-filter-btn" class="hidden inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold text-indigo-600 dark:text-indigo-400 bg-indigo-50 dark:bg-indigo-900/30 rounded-lg hover:bg-indigo-100 dark:hover:bg-indigo-900/50 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-save"></i>
                    Filtreyi Kaydet
                </button>
                <button type="button" id="clear-filters-btn" class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 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-times"></i>
                    Temizle
                </button>
            </div>
        </div>
        
        <div id="advanced-filters-panel" class="hidden p-4">
            <form method="GET" action="{{ route('sites.index') }}" id="advanced-filter-form">
                <!-- Filtre Mantığı -->
                <div class="mb-4">
                    <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">Filtre Mantığı</label>
                    <div class="flex items-center gap-4">
                        <label class="flex items-center">
                            <input type="radio" name="filter_logic" value="AND" checked class="mr-2">
                            <span class="text-sm">VE (AND) - Tüm kriterler sağlanmalı</span>
                        </label>
                        <label class="flex items-center">
                            <input type="radio" name="filter_logic" value="OR" class="mr-2">
                            <span class="text-sm">VEYA (OR) - Herhangi bir kriter sağlanmalı</span>
                        </label>
                    </div>
                </div>

                <!-- Filtre Kriterleri -->
                <div id="filter-criteria" class="space-y-3 mb-4">
                    <div class="filter-criterion border border-gray-200 rounded-lg p-3">
                        <div class="grid grid-cols-12 gap-3 items-end">
                            <div class="col-span-3">
                                <label class="block text-xs font-semibold text-gray-900 dark:text-gray-100 mb-1">Alan</label>
                                <select name="filter_field[]" class="filter-field block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-2 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-400 focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-opacity-20 text-sm transition-all duration-200">
                                    <option value="">Seçiniz...</option>
                                    <option value="name">Site Adı</option>
                                    <option value="status">Durum</option>
                                    <option value="language">Dil</option>
                                    <option value="sector">Sektör</option>
                                    <option value="assigned_to">Atanan Kullanıcı</option>
                                    <option value="category_ids">Kategori</option>
                                    <option value="tag_ids">Etiket</option>
                                    <option value="is_ssl_active">SSL Aktif</option>
                                    <option value="created_at">Oluşturulma Tarihi</option>
                                    <option value="updated_at">Güncellenme Tarihi</option>
                                </select>
                            </div>
                            <div class="col-span-2">
                                <label class="block text-xs font-semibold text-gray-900 dark:text-gray-100 mb-1">Operatör</label>
                                <select name="filter_operator[]" class="filter-operator block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-2 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-400 focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-opacity-20 text-sm transition-all duration-200">
                                    <option value="=">=</option>
                                    <option value="!=">!=</option>
                                    <option value="like">İçerir</option>
                                    <option value="in">İçinde</option>
                                    <option value=">=">>=</option>
                                    <option value="<="><=</option>
                                    <option value="between">Arasında</option>
                                </select>
                            </div>
                            <div class="col-span-5">
                                <label class="block text-xs font-semibold text-gray-900 dark:text-gray-100 mb-1">Değer</label>
                                <input type="text" name="filter_value[]" class="filter-value block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-2 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:border-indigo-500 dark:focus:border-indigo-400 focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-opacity-20 text-sm transition-all duration-200" placeholder="Değer girin...">
                            </div>
                            <div class="col-span-2 flex items-end gap-2">
                                <button type="button" class="remove-criterion inline-flex items-center justify-center w-10 h-10 text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 hover:bg-red-50 dark:hover:bg-red-900/30 rounded-lg transition-all duration-200">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Kriter Ekle -->
                <button type="button" id="add-criterion-btn" class="mb-4 inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold text-indigo-600 dark:text-indigo-400 bg-indigo-50 dark:bg-indigo-900/30 rounded-lg hover:bg-indigo-100 dark:hover:bg-indigo-900/50 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-plus"></i>
                    Kriter Ekle
                </button>

                <!-- Sıralama -->
                <div class="mb-4 border-t border-gray-200 pt-4">
                    <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">Sıralama</label>
                    <div id="sort-criteria" class="space-y-2">
                        <div class="sort-criterion grid grid-cols-12 gap-3 items-end">
                            <div class="col-span-4">
                                <select name="sort_field[]" class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-2 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-400 focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-opacity-20 text-sm transition-all duration-200">
                                    <option value="">Seçiniz...</option>
                                    <option value="name">Site Adı</option>
                                    <option value="status">Durum</option>
                                    <option value="created_at">Oluşturulma Tarihi</option>
                                    <option value="updated_at">Güncellenme Tarihi</option>
                                    <option value="assigned_user">Atanan Kullanıcı</option>
                                </select>
                            </div>
                            <div class="col-span-3">
                                <select name="sort_direction[]" class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-2 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-400 focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-opacity-20 text-sm transition-all duration-200">
                                    <option value="asc">Artan</option>
                                    <option value="desc">Azalan</option>
                                </select>
                            </div>
                            <div class="col-span-5">
                                <button type="button" class="remove-sort inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 hover:bg-red-50 dark:hover:bg-red-900/30 rounded-lg transition-all duration-200">
                                    <i class="fas fa-trash"></i> Kaldır
                                </button>
                            </div>
                        </div>
                    </div>
                    <button type="button" id="add-sort-btn" class="mt-2 inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold text-indigo-600 dark:text-indigo-400 bg-indigo-50 dark:bg-indigo-900/30 rounded-lg hover:bg-indigo-100 dark:hover:bg-indigo-900/50 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-plus"></i>
                        Sıralama Ekle
                    </button>
                </div>

                <!-- Eski Filtreler (Geriye Dönük Uyumluluk) -->
                @if(request('category_id'))
                <input type="hidden" name="category_id" value="{{ request('category_id') }}">
                @endif
                @if(request('tag_id'))
                <input type="hidden" name="tag_id" value="{{ request('tag_id') }}">
                @endif

                <div class="flex items-center justify-end gap-2 pt-4 border-t border-gray-200">
                    <button type="submit" 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-search"></i>
                        Filtrele
                    </button>
                </div>
            </form>
        </div>
    </div>

    <div class="mt-8">
        <div class="flex flex-wrap items-center gap-3">
            <button type="button" data-tab="general"
                class="tab-trigger inline-flex items-center gap-2 rounded-full border border-indigo-200 dark:border-indigo-700 bg-indigo-50 dark:bg-indigo-900/30 px-5 py-2.5 text-sm font-semibold text-indigo-700 dark:text-indigo-300 shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-2">
                <i class="fas fa-list"></i>
                Genel Bilgiler
            </button>
            <button type="button" data-tab="performance"
                class="tab-trigger inline-flex items-center gap-2 rounded-full border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 px-5 py-2.5 text-sm font-semibold text-gray-600 dark:text-gray-400 shadow-sm transition-all duration-200 hover:border-indigo-200 dark:hover:border-indigo-700 hover:text-indigo-600 dark:hover: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">
                <i class="fas fa-tachometer-alt"></i>
                Performans Skorları
            </button>
        </div>

        <!-- Toplu İşlemler Paneli -->
        @if(auth()->user()->isAdmin())
        <div id="bulk-operations-panel" class="hidden mt-6 bg-white dark:bg-gray-800 shadow-lg rounded-lg border-2 border-indigo-500 dark:border-indigo-600">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-indigo-50 dark:bg-indigo-900/30">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-tasks text-indigo-600"></i>
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Toplu İşlemler</h3>
                        <span id="selected-count" class="px-2 py-1 text-xs font-medium rounded-full bg-indigo-600 text-white">0 seçili</span>
                    </div>
                    <button type="button" id="close-bulk-panel" class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2 transition-all duration-200">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <!-- Durum Güncelleme -->
                    <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-all duration-200">
                        <h4 class="font-medium text-gray-900 dark:text-gray-100 mb-2">
                            <i class="fas fa-sync-alt text-blue-500 mr-2"></i>
                            Durum Güncelle
                        </h4>
                        <form action="{{ route('sites.bulk-status-update') }}" method="POST" class="bulk-operation-form">
                            @csrf
                            <div class="space-y-2">
                                <select name="new_status" required class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-2 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-400 focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-opacity-20 text-sm transition-all duration-200">
                                    <option value="">Durum Seçin</option>
                                    <option value="active">Aktif</option>
                                    <option value="maintenance">Bakım</option>
                                    <option value="setup_completed">Kurulum Tamamlandı</option>
                                    <option value="localization_started">Lokalizasyon Başladı</option>
                                    <option value="qa_pending">QA Beklemede</option>
                                    <option value="qa_active">QA Aktif</option>
                                    <option value="completed">Tamamlandı</option>
                                </select>
                                <button type="submit" class="w-full px-4 py-2.5 text-sm font-semibold bg-blue-600 hover:bg-blue-500 dark:bg-blue-600 dark:hover:bg-blue-500 text-white rounded-lg 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">
                                    <i class="fas fa-check mr-1"></i>
                                    Güncelle
                                </button>
                            </div>
                        </form>
                    </div>

                    <!-- Kategori/Etiket Ekle -->
                    <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-all duration-200">
                        <h4 class="font-medium text-gray-900 dark:text-gray-100 mb-2">
                            <i class="fas fa-tags text-green-500 mr-2"></i>
                            Kategori/Etiket Ekle
                        </h4>
                        <form action="{{ route('sites.bulk-update-categories-tags') }}" method="POST" class="bulk-operation-form">
                            @csrf
                            <div class="space-y-2">
                                @if(isset($categories) && $categories->count() > 0)
                                <select name="category_ids[]" multiple class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-2 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-400 focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-opacity-20 text-sm transition-all duration-200" size="2">
                                    @foreach($categories as $category)
                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                    @endforeach
                                </select>
                                @endif
                                @if(isset($tags) && $tags->count() > 0)
                                <select name="tag_ids[]" multiple class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-2 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-400 focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-opacity-20 text-sm transition-all duration-200" size="2">
                                    @foreach($tags as $tag)
                                    <option value="{{ $tag->id }}">{{ $tag->name }}</option>
                                    @endforeach
                                </select>
                                @endif
                                <button type="submit" class="w-full px-3 py-2 text-sm bg-green-600 text-white rounded hover:bg-green-700">
                                    <i class="fas fa-check mr-1"></i>
                                    Ekle
                                </button>
                            </div>
                        </form>
                    </div>

                    <!-- SSL/HTTPS Analizi -->
                    <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-all duration-200">
                        <h4 class="font-medium text-gray-900 dark:text-gray-100 mb-2">
                            <i class="fas fa-lock text-yellow-500 mr-2"></i>
                            SSL/HTTPS Analizi
                        </h4>
                        <form action="{{ route('sites.bulk-ssl-analysis') }}" method="POST" class="bulk-operation-form" id="bulk-ssl-analysis-form">
                            @csrf
                            <div class="space-y-2">
                                <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">
                                    Seçili sitelerin SSL/HTTPS durumunu kontrol eder.
                                </p>
                                <button type="submit" class="w-full px-4 py-2.5 text-sm font-semibold bg-yellow-600 hover:bg-yellow-500 dark:bg-yellow-600 dark:hover:bg-yellow-500 text-white rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:focus:ring-yellow-400 focus:ring-offset-2 transition-all duration-200">
                                    <i class="fas fa-search mr-1"></i>
                                    SSL Analizi Başlat
                                </button>
                            </div>
                        </form>
                    </div>

                    <!-- Backup Oluştur -->
                    <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-all duration-200">
                        <h4 class="font-medium text-gray-900 dark:text-gray-100 mb-2">
                            <i class="fas fa-database text-purple-500 mr-2"></i>
                            Backup Oluştur
                        </h4>
                        <form action="{{ route('sites.bulk-create-backup') }}" method="POST" class="bulk-operation-form">
                            @csrf
                            <div class="space-y-2">
                                <select name="type" required class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm">
                                    <option value="full">Tam Backup</option>
                                    <option value="database">Sadece Veritabanı</option>
                                    <option value="files">Sadece Dosyalar</option>
                                </select>
                                <button type="submit" class="w-full px-3 py-2 text-sm bg-purple-600 text-white rounded hover:bg-purple-700">
                                    <i class="fas fa-download mr-1"></i>
                                    Backup Oluştur
                                </button>
                            </div>
                        </form>
                    </div>

                    <!-- Performans Analizi -->
                    <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-all duration-200">
                        <h4 class="font-medium text-gray-900 dark:text-gray-100 mb-2">
                            <i class="fas fa-tachometer-alt text-yellow-500 mr-2"></i>
                            Performans Analizi
                        </h4>
                        <form action="{{ route('sites.bulk-run-performance-agent') }}" method="POST" class="bulk-operation-form">
                            @csrf
                            <button type="submit" class="w-full px-3 py-2 text-sm bg-yellow-600 text-white rounded hover:bg-yellow-700">
                                <i class="fas fa-play mr-1"></i>
                                Analiz Başlat
                            </button>
                        </form>
                    </div>

                    <!-- Plugin Güncelle -->
                    <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-all duration-200">
                        <h4 class="font-medium text-gray-900 dark:text-gray-100 mb-2">
                            <i class="fas fa-plug text-indigo-500 mr-2"></i>
                            Plugin Güncelle
                        </h4>
                        <form action="{{ route('sites.bulk-update-plugins') }}" method="POST" class="bulk-operation-form">
                            @csrf
                            <div class="space-y-2">
                                <input type="text" name="plugin_file" placeholder="Plugin dosya adı" required class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-2 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:border-indigo-500 dark:focus:border-indigo-400 focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-opacity-20 text-sm transition-all duration-200">
                                <button type="submit" class="w-full px-3 py-2 text-sm bg-indigo-600 text-white rounded hover:bg-indigo-700">
                                    <i class="fas fa-sync mr-1"></i>
                                    Güncelle
                                </button>
                            </div>
                        </form>
                    </div>

                    <!-- Kullanıcı Ata -->
                    <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-all duration-200">
                        <h4 class="font-medium text-gray-900 dark:text-gray-100 mb-2">
                            <i class="fas fa-user-plus text-teal-500 mr-2"></i>
                            Kullanıcı Ata
                        </h4>
                        <form action="{{ route('sites.bulk-assign-user') }}" method="POST" class="bulk-operation-form">
                            @csrf
                            <div class="space-y-2">
                                <select name="assigned_to" required class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-2 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-400 focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-opacity-20 text-sm transition-all duration-200">
                                    <option value="">Kullanıcı Seçin</option>
                                    @foreach(\App\Models\User::where('role', 'developer')->get() as $user)
                                    <option value="{{ $user->id }}">{{ $user->name }}</option>
                                    @endforeach
                                </select>
                                <button type="submit" class="w-full px-3 py-2 text-sm bg-teal-600 text-white rounded hover:bg-teal-700">
                                    <i class="fas fa-check mr-1"></i>
                                    Ata
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        @endif

        <div class="mt-6 space-y-6">
            <div class="tab-content overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg" data-content="general">
                @if(auth()->user()->isAdmin())
                <div class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-4 py-3">
                    <div class="flex flex-wrap items-center gap-3">
                        <button type="button" id="open-bulk-panel" class="hidden px-3 py-2 text-sm bg-indigo-600 text-white rounded hover:bg-indigo-700">
                            <i class="fas fa-tasks mr-1"></i>
                            Toplu İşlemler (<span id="selected-count-inline">0</span>)
                        </button>
                        <div class="flex items-center gap-2">
                            <label for="new_status" class="text-sm font-medium text-gray-700 dark:text-gray-300">Yeni Durum:</label>
                            <select name="new_status" id="new_status" required class="rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-3 py-2 shadow-sm focus:border-indigo-500 dark:focus:border-indigo-400 focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-opacity-20 text-sm transition-all duration-200">
                                <option value="">Seçiniz...</option>
                                <option value="active">Active</option>
                                <option value="maintenance">Maintenance</option>
                                <option value="completed">Completed</option>
                                <option value="setup_completed">Setup Completed</option>
                                <option value="localization_started">Localization Started</option>
                                <option value="qa_pending">QA Pending</option>
                                <option value="qa_active">QA Active</option>
                            </select>
                        </div>
                        <button type="submit" id="bulk-update-btn" disabled 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-4 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-50 disabled:cursor-not-allowed">
                            <i class="fas fa-sync-alt"></i>
                            Durumu Güncelle
                        </button>
                        <button type="button" id="bulk-performance-agent-btn" disabled class="inline-flex items-center gap-2 rounded-lg bg-purple-600 hover:bg-purple-500 dark:bg-purple-600 dark:hover:bg-purple-500 px-4 py-2.5 text-sm font-semibold text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400 focus:ring-offset-2 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed">
                            <i class="fas fa-robot"></i>
                            AI Performans Agent Başlat
                        </button>
                        <button type="button" id="bulk-backup-btn" disabled 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-4 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 disabled:opacity-50 disabled:cursor-not-allowed">
                            <i class="fas fa-database"></i>
                            Backup Oluştur
                        </button>
                        <button type="button" id="bulk-plugin-update-btn" disabled class="inline-flex items-center gap-2 rounded-lg bg-amber-600 hover:bg-amber-500 dark:bg-amber-600 dark:hover:bg-amber-500 px-4 py-2.5 text-sm font-semibold text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-400 focus:ring-offset-2 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed">
                            <i class="fas fa-plug"></i>
                            Plugin Güncelle
                        </button>
                        <span id="selected-count" class="text-sm text-gray-600 dark:text-gray-400 ml-2">0 site seçildi</span>
                    </div>
                </form>
                @endif
                <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                    <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
                        <table class="min-w-full divide-y divide-gray-300">
                            <thead class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-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">
                                        <input type="checkbox" id="select-all-header" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                                    </th>
                                    <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(auth()->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 Geliştirici</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="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">Sağlık Skoru</th>
                                    <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">SSL/HTTPS</th>
                                    @if(auth()->user()->isAdmin())
                                    <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">GSP Connector</th>
                                    @endif
                                    <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">Sayfa Sayısı</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 sm:pl-6">
                                        <input type="checkbox" name="selected_sites[]" value="{{ $site->id }}" class="site-checkbox h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                                    </td>
                                    <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-gray-100 sm:pl-6">
                                        <div class="flex flex-col gap-1">
                                            <span>{{ $site->name }}</span>
                                            @if($site->categories->count() > 0 || $site->tags->count() > 0)
                                            <div class="flex flex-wrap items-center gap-1 mt-1">
                                                @foreach($site->categories as $category)
                                                <span class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium" style="background-color: {{ $category->color }}20; color: {{ $category->color }};">
                                                    <div class="h-2 w-2 rounded-full" style="background-color: {{ $category->color }};"></div>
                                                    {{ $category->name }}
                                                </span>
                                                @endforeach
                                                @foreach($site->tags as $tag)
                                                <span class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium border" style="border-color: {{ $tag->color }}; color: {{ $tag->color }};">
                                                    <i class="fas fa-tag text-xs"></i>
                                                    {{ $tag->name }}
                                                </span>
                                                @endforeach
                                            </div>
                                            @endif
                                        </div>
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                                        <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(auth()->user()->isAdmin())
                                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                                        {{ $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">
                                        @php
                                            // Developer hesabı için özel durum kontrolü
                                            if (auth()->user()->isDeveloper() && !auth()->user()->isAdmin()) {
                                                // WordPress kuruldu mu ve application password var mı?
                                                $wpInstalled = !empty($site->setup_completed_at);
                                                $hasAppPassword = !empty($site->wp_application_password);
                                                $displayStatus = ($wpInstalled && $hasAppPassword) ? 'active' : $site->status;
                                            } else {
                                                $displayStatus = $site->status;
                                            }
                                        @endphp
                                        <span class="px-2 py-1 text-xs rounded-full {{ $displayStatus === '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' }}">
                                            {{ $displayStatus === 'active' ? 'active' : $site->status }}
                                        </span>
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-sm">
                                        @php
                                            $healthScore = $site->health_score;
                                            $overallScore = $healthScore['overall_score'] ?? null;
                                            $healthColor = $healthScore['health_color'] ?? 'gray';
                                            
                                            $badgeColors = [
                                                'green' => 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300',
                                                'lime' => 'bg-lime-100 dark:bg-lime-900/30 text-lime-800 dark:text-lime-300',
                                                'yellow' => 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300',
                                                'orange' => 'bg-orange-100 dark:bg-orange-900/30 text-orange-800 dark:text-orange-300',
                                                'red' => 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300',
                                                'gray' => 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300',
                                            ];
                                        @endphp
                                        @if($overallScore !== null)
                                            @php
                                                $circumference = 2 * M_PI * 16;
                                                $offset = $circumference * (1 - $overallScore / 100);
                                                $colorMap = [
                                                    'green' => '#10b981',
                                                    'lime' => '#84cc16',
                                                    'yellow' => '#eab308',
                                                    'orange' => '#f97316',
                                                    'red' => '#ef4444',
                                                    'gray' => '#6b7280',
                                                ];
                                                $textColorMap = [
                                                    'green' => 'text-green-600 dark:text-green-400',
                                                    'lime' => 'text-lime-600 dark:text-lime-400',
                                                    'yellow' => 'text-yellow-600 dark:text-yellow-400',
                                                    'orange' => 'text-orange-600 dark:text-orange-400',
                                                    'red' => 'text-red-600 dark:text-red-400',
                                                    'gray' => 'text-gray-600 dark:text-gray-400',
                                                ];
                                                $strokeColor = $colorMap[$healthColor] ?? $colorMap['gray'];
                                                $textColorClass = $textColorMap[$healthColor] ?? $textColorMap['gray'];
                                            @endphp
                                            <div class="flex items-center gap-2">
                                                <div class="relative w-10 h-10">
                                                    <svg class="transform -rotate-90 w-10 h-10">
                                                        <circle cx="20" cy="20" r="16" stroke="#e5e7eb" class="dark:stroke-gray-700" stroke-width="3" fill="none"></circle>
                                                        <circle cx="20" cy="20" r="16" stroke="{{ $strokeColor }}" stroke-width="3" fill="none" 
                                                            stroke-dasharray="{{ $circumference }}" 
                                                            stroke-dashoffset="{{ $offset }}"
                                                            stroke-linecap="round"></circle>
                                                    </svg>
                                                    <div class="absolute inset-0 flex items-center justify-center">
                                                        <span class="text-xs font-bold {{ $textColorClass }}">{{ number_format($overallScore, 0) }}</span>
                                                    </div>
                                                </div>
                                                <span class="inline-flex items-center gap-1 rounded-full px-2 py-1 text-xs font-semibold {{ $badgeColors[$healthColor] ?? $badgeColors['gray'] }}">
                                                    <i class="fas fa-heartbeat"></i>
                                                </span>
                                            </div>
                                        @else
                                            <span class="text-gray-400 text-xs">-</span>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                                        @if($site->last_analyzed_at)
                                            <span class="px-2 py-1 text-xs rounded-full {{ $site->is_ssl_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->is_ssl_active ? 'Aktif' : 'Pasif' }}
                                            </span>
                                        @else
                                            <span class="px-2 py-1 text-xs rounded-full bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300">
                                                Analiz Edilmedi
                                            </span>
                                        @endif
                                    </td>
                                    @if(auth()->user()->isAdmin())
                                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                                        @if($site->gsp_connector_version)
                                            <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-plug"></i> {{ $site->gsp_connector_version }}
                                            </span>
                                        @else
                                            <span class="text-gray-400 dark:text-gray-500">Veri yok</span>
                                        @endif
                                    </td>
                                    @endif
                                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                                        @if($site->last_analyzed_at)
                                            {{ $site->page_count ?? 0 }}
                                        @else
                                            <span class="text-gray-400 dark:text-gray-500">-</span>
                                        @endif
                                    </td>
                                    <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
                                        @php
                                            $wpAdminUrl = rtrim($site->url, '/') . '/wp-admin';
                                        @endphp
                                        <div class="flex items-center justify-end gap-3">
                                            <a href="{{ route('sites.show', $site) }}" class="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300 font-medium">Görüntüle</a>
                                            @can('update', $site)
                                            <a href="{{ route('sites.edit', $site) }}" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 font-medium">Düzenle</a>
                                            @endcan
                                            @if(!empty($site->setup_completed_at))
                                            <a href="{{ $wpAdminUrl }}" target="_blank" 
                                                class="text-green-600 dark:text-green-400 hover:text-green-900 dark:hover:text-green-300 font-medium"
                                                title="WordPress Admin">
                                                <i class="fas fa-external-link-alt"></i> WP-Admin
                                            </a>
                                        @endif
                                            @can('delete', $site)
                                            <button type="button" onclick="openDeleteModal({{ $site->id }}, '{{ addslashes($site->name) }}')" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 font-medium">Sil</button>
                                            @endcan
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="{{ auth()->user()->isAdmin() ? '11' : '9' }}" class="px-3 py-4 text-center text-sm text-gray-500 dark:text-gray-400">
                                        Henüz site bulunmamaktadır.
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="tab-content hidden overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg" data-content="performance">
                <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
                    <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
                        <table class="min-w-full divide-y divide-gray-300">
                            <thead class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-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">Mobil Skor</th>
                                    <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">Masaüstü Skor</th>
                                    <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">Mobil FCP</th>
                                    <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">Masaüstü FCP</th>
                                    <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">Son Ölçüm</th>
                                    <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
                                        <span class="sr-only">Detay</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)
                                    @php
                                        $mobileScore = $site->latest_mobile_score;
                                        $desktopScore = $site->latest_desktop_score;
                                        $mobileFcp = $site->latest_mobile_fcp;
                                        $desktopFcp = $site->latest_desktop_fcp;
                                        $latestCheckedAt = $site->latest_mobile_checked_at ?? $site->latest_desktop_checked_at;
                                    @endphp
                                    <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 }}
                                            <span class="block text-xs text-gray-500">{{ $site->url }}</span>
                                        </td>
                                        <td class="whitespace-nowrap px-3 py-4 text-sm">
                                            @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 text-sm">-</span>
                                            @endif
                                        </td>
                                        <td class="whitespace-nowrap px-3 py-4 text-sm">
                                            @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 text-sm">-</span>
                                            @endif
                                        </td>
                                        <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-600 dark:text-gray-400">
                                            @if(!is_null($mobileFcp))
                                                {{ number_format($mobileFcp, 2) }} sn
                                            @else
                                                <span class="text-gray-400 dark:text-gray-500">-</span>
                                            @endif
                                        </td>
                                        <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-600 dark:text-gray-400">
                                            @if(!is_null($desktopFcp))
                                                {{ number_format($desktopFcp, 2) }} sn
                                            @else
                                                <span class="text-gray-400 dark:text-gray-500">-</span>
                                            @endif
                                        </td>
                                        <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                                            @if($latestCheckedAt)
                                                {{ \Carbon\Carbon::parse($latestCheckedAt)->format('d.m.Y H:i') }}
                                            @else
                                                <span class="text-gray-400 dark:text-gray-500">-</span>
                                            @endif
                                        </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-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 font-medium">Detay</a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="px-3 py-4 text-center text-sm text-gray-500 dark:text-gray-400">
                                            Henüz performans kaydı bulunmuyor.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const selectAllHeader = document.getElementById('select-all-header');
    const siteCheckboxes = document.querySelectorAll('.site-checkbox');
    const bulkUpdateBtn = document.getElementById('bulk-update-btn');
    const newStatusSelect = document.getElementById('new_status');
    const selectedCount = document.getElementById('selected-count');
    const bulkStatusForm = document.getElementById('bulk-status-form');
    const bulkPerformanceAgentBtn = document.getElementById('bulk-performance-agent-btn');
    const bulkBackupBtn = document.getElementById('bulk-backup-btn');
    const bulkPluginUpdateBtn = document.getElementById('bulk-plugin-update-btn');

    function updateSelectedCount() {
        const checked = document.querySelectorAll('.site-checkbox:checked').length;
        if (selectedCount) {
            selectedCount.textContent = `${checked} site seçildi`;
        }
        if (bulkUpdateBtn) {
            bulkUpdateBtn.disabled = checked === 0 || !newStatusSelect.value;
        }
        if (bulkPerformanceAgentBtn) {
            bulkPerformanceAgentBtn.disabled = checked === 0;
        }
        if (bulkBackupBtn) {
            bulkBackupBtn.disabled = checked === 0;
        }
        if (bulkPluginUpdateBtn) {
            bulkPluginUpdateBtn.disabled = checked === 0;
        }
        
        // SSL Analizi butonunu aktif/pasif yap
        const bulkSslBtn = document.getElementById('bulk-ssl-analysis-btn');
        const sslSelectedCount = document.getElementById('ssl-selected-count');
        if (bulkSslBtn && sslSelectedCount) {
            if (checked > 0) {
                bulkSslBtn.disabled = false;
                bulkSslBtn.classList.remove('opacity-50', 'cursor-not-allowed');
                sslSelectedCount.textContent = checked;
            } else {
                bulkSslBtn.disabled = true;
                bulkSslBtn.classList.add('opacity-50', 'cursor-not-allowed');
                sslSelectedCount.textContent = '0';
            }
        }
        
        // Toplu işlemler paneli sayacını güncelle
        if (typeof updateBulkPanelCount === 'function') {
            updateBulkPanelCount();
        }
    }

    function updateSelectAllState() {
        const allCheckboxes = document.querySelectorAll('.site-checkbox');
        const allChecked = allCheckboxes.length > 0 && Array.from(allCheckboxes).every(cb => cb.checked);
        if (selectAllHeader) {
            selectAllHeader.checked = allChecked;
        }
    }

    // Tümünü seç/kaldır - sadece header checkbox'ı
    if (selectAllHeader) {
        selectAllHeader.addEventListener('click', function(e) {
            e.stopPropagation();
            const isChecked = this.checked;
            const allCheckboxes = document.querySelectorAll('.site-checkbox');
            console.log('Tümünü seç tıklandı:', isChecked, 'Bulunan checkbox sayısı:', allCheckboxes.length);
            allCheckboxes.forEach((cb, index) => {
                cb.checked = isChecked;
                console.log(`Checkbox ${index} güncellendi:`, cb.checked);
            });
            updateSelectedCount();
        });
    } else {
        console.error('select-all-header checkbox bulunamadı!');
    }
    
    // Alternatif: Event delegation ile
    document.addEventListener('change', function(e) {
        if (e.target && e.target.id === 'select-all-header') {
            const isChecked = e.target.checked;
            const allCheckboxes = document.querySelectorAll('.site-checkbox');
            allCheckboxes.forEach(cb => {
                cb.checked = isChecked;
            });
            updateSelectedCount();
        }
    });

    // Her checkbox değiştiğinde - event delegation kullanarak dinamik checkbox'lar için
    document.addEventListener('change', function(e) {
        if (e.target && e.target.classList.contains('site-checkbox')) {
            updateSelectedCount();
            updateSelectAllState();
        }
    });

    // İlk yüklemede mevcut checkbox'lar için event listener ekle
    siteCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            updateSelectedCount();
            updateSelectAllState();
        });
    });

    // Durum seçimi değiştiğinde
    if (newStatusSelect) {
        newStatusSelect.addEventListener('change', function() {
            updateSelectedCount();
        });
    }

    // Form gönderilmeden önce kontrol
    if (bulkStatusForm) {
        bulkStatusForm.addEventListener('submit', function(e) {
        const checked = document.querySelectorAll('.site-checkbox:checked').length;
        if (checked === 0) {
            e.preventDefault();
            alert('Lütfen en az bir site seçin.');
            return false;
        }
        if (!newStatusSelect.value) {
            e.preventDefault();
            alert('Lütfen yeni durum seçin.');
            return false;
        }
        if (!confirm(`${checked} sitenin durumu "${newStatusSelect.options[newStatusSelect.selectedIndex].text}" olarak güncellenecek. Devam etmek istiyor musunuz?`)) {
            e.preventDefault();
            return false;
        }
        });
    }

    // Toplu Performance Agent başlatma
    if (bulkPerformanceAgentBtn) {
        bulkPerformanceAgentBtn.addEventListener('click', async function() {
            const checked = document.querySelectorAll('.site-checkbox:checked');
            const siteIds = Array.from(checked).map(cb => cb.value);
            
            if (siteIds.length === 0) {
                alert('Lütfen en az bir site seçin.');
                return;
            }

            if (!confirm(`${siteIds.length} site için AI Performans Agent başlatılacak. Her site için AI, PageSpeed sonuçlarını analiz edip en uygun optimizasyonu uygulayacak. Devam etmek istiyor musunuz?`)) {
                return;
            }

            // Butonu devre dışı bırak
            bulkPerformanceAgentBtn.disabled = true;
            const originalText = bulkPerformanceAgentBtn.innerHTML;
            bulkPerformanceAgentBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Başlatılıyor...';

            try {
                const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
                const response = await fetch('{{ route("sites.bulk-run-performance-agent") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken,
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify({
                        selected_sites: siteIds
                    }),
                });

                const data = await response.json();

                if (response.ok) {
                    alert(`✅ ${data.started || 0} site için AI Performans Agent başlatıldı.\n\n${data.skipped ? `⚠️ ${data.skipped} site atlandı (API Secret eksik veya erişim yetkisi yok).` : ''}\n\n${data.failed ? `❌ ${data.failed} site için hata oluştu.` : ''}\n\nİşlemler arka planda çalışacak. Sonuçlar için email bildirimlerini kontrol edin veya site detay sayfalarından Agent Geçmişi'ni görüntüleyin.`);
                    
                    // Checkbox'ları temizle
                    checked.forEach(cb => cb.checked = false);
                    updateSelectedCount();
                } else {
                    alert(`❌ Hata: ${data.message || 'Bilinmeyen bir hata oluştu.'}`);
                }
            } catch (error) {
                console.error('Bulk performance agent error:', error);
                alert('❌ İşlem sırasında bir hata oluştu. Lütfen tekrar deneyin.');
            } finally {
                bulkPerformanceAgentBtn.disabled = false;
                bulkPerformanceAgentBtn.innerHTML = originalText;
            }
        });
    }

    // Toplu Backup oluşturma
    if (bulkBackupBtn) {
        bulkBackupBtn.addEventListener('click', async function() {
            const checked = document.querySelectorAll('.site-checkbox:checked');
            const siteIds = Array.from(checked).map(cb => cb.value);
            
            if (siteIds.length === 0) {
                alert('Lütfen en az bir site seçin.');
                return;
            }

            if (!confirm(`${siteIds.length} site için backup oluşturulacak. Bu işlem biraz zaman alabilir. Devam etmek istiyor musunuz?`)) {
                return;
            }

            // Butonu devre dışı bırak
            bulkBackupBtn.disabled = true;
            const originalText = bulkBackupBtn.innerHTML;
            bulkBackupBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Oluşturuluyor...';

            try {
                const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
                const response = await fetch('{{ route("sites.bulk-create-backup") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken,
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify({
                        selected_sites: siteIds
                    }),
                });

                const data = await response.json();

                if (response.ok && data.status === 'success') {
                    alert(`✅ ${data.data.success || 0} site için backup başarıyla oluşturuldu.\n\n${data.data.skipped ? `⚠️ ${data.data.skipped} site atlandı (API Secret eksik veya endpoint bulunamadı).` : ''}\n\n${data.data.failed ? `❌ ${data.data.failed} site için hata oluştu.` : ''}`);
                    
                    // Checkbox'ları temizle
                    checked.forEach(cb => cb.checked = false);
                    updateSelectedCount();
                } else {
                    alert(`❌ Hata: ${data.message || 'Bilinmeyen bir hata oluştu.'}`);
                }
            } catch (error) {
                console.error('Bulk backup error:', error);
                alert('❌ İşlem sırasında bir hata oluştu. Lütfen tekrar deneyin.');
            } finally {
                bulkBackupBtn.disabled = false;
                bulkBackupBtn.innerHTML = originalText;
            }
        });
    }

    // Toplu Plugin Güncelleme
    if (bulkPluginUpdateBtn) {
        bulkPluginUpdateBtn.addEventListener('click', async function() {
            const checked = document.querySelectorAll('.site-checkbox:checked');
            const siteIds = Array.from(checked).map(cb => cb.value);
            
            if (siteIds.length === 0) {
                alert('Lütfen en az bir site seçin.');
                return;
            }

            // Plugin dosyası iste
            const pluginFile = prompt('Güncellenecek plugin dosyasını girin (örn: gsp-connector/gsp-connector.php):');
            
            if (!pluginFile || pluginFile.trim() === '') {
                return;
            }

            if (!confirm(`${siteIds.length} site için "${pluginFile}" plugin'i güncellenecek. Devam etmek istiyor musunuz?`)) {
                return;
            }

            // Butonu devre dışı bırak
            bulkPluginUpdateBtn.disabled = true;
            const originalText = bulkPluginUpdateBtn.innerHTML;
            bulkPluginUpdateBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Güncelleniyor...';

            try {
                const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
                const response = await fetch('{{ route("sites.bulk-update-plugins") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken,
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify({
                        selected_sites: siteIds,
                        plugin_file: pluginFile.trim()
                    }),
                });

                const data = await response.json();

                if (response.ok && data.status === 'success') {
                    alert(`✅ ${data.data.success || 0} site için plugin başarıyla güncellendi.\n\n${data.data.skipped ? `⚠️ ${data.data.skipped} site atlandı (Ön kontrol başarısız veya API Secret eksik).` : ''}\n\n${data.data.failed ? `❌ ${data.data.failed} site için hata oluştu.` : ''}`);
                    
                    // Checkbox'ları temizle
                    checked.forEach(cb => cb.checked = false);
                    updateSelectedCount();
                } else {
                    alert(`❌ Hata: ${data.message || 'Bilinmeyen bir hata oluştu.'}`);
                }
            } catch (error) {
                console.error('Bulk plugin update error:', error);
                alert('❌ İşlem sırasında bir hata oluştu. Lütfen tekrar deneyin.');
            } finally {
                bulkPluginUpdateBtn.disabled = false;
                bulkPluginUpdateBtn.innerHTML = originalText;
            }
        });
    }

    // İlk yüklemede sayıyı güncelle
    updateSelectedCount();
});

// Toplu İşlemler Paneli
(function() {
    const bulkPanel = document.getElementById('bulk-operations-panel');
    const openBulkPanelBtn = document.getElementById('open-bulk-panel');
    const closeBulkPanelBtn = document.getElementById('close-bulk-panel');
    const selectedCountSpan = document.getElementById('selected-count');
    const selectedCountInline = document.getElementById('selected-count-inline');
    const siteCheckboxes = document.querySelectorAll('.site-checkbox');
    const bulkOperationForms = document.querySelectorAll('.bulk-operation-form');

    // Seçili site ID'lerini al
    function getSelectedSiteIds() {
        return Array.from(document.querySelectorAll('.site-checkbox:checked'))
            .map(cb => cb.value);
    }

    // Seçili sayıyı güncelle
    function updateBulkPanelCount() {
        const count = getSelectedSiteIds().length;
        if (selectedCountSpan) selectedCountSpan.textContent = `${count} seçili`;
        if (selectedCountInline) selectedCountInline.textContent = count;
        
        // SSL Analizi butonunu aktif/pasif yap
        const bulkSslBtn = document.getElementById('bulk-ssl-analysis-btn');
        const sslSelectedCount = document.getElementById('ssl-selected-count');
        if (bulkSslBtn && sslSelectedCount) {
            if (count > 0) {
                bulkSslBtn.disabled = false;
                bulkSslBtn.classList.remove('opacity-50', 'cursor-not-allowed');
                sslSelectedCount.textContent = count;
            } else {
                bulkSslBtn.disabled = true;
                bulkSslBtn.classList.add('opacity-50', 'cursor-not-allowed');
                sslSelectedCount.textContent = '0';
            }
        }
        
        // Toplu işlemler butonunu göster/gizle
        if (openBulkPanelBtn) {
            if (count > 0) {
                openBulkPanelBtn.classList.remove('hidden');
            } else {
                openBulkPanelBtn.classList.add('hidden');
                if (bulkPanel) bulkPanel.classList.add('hidden');
            }
        }
    }

    // Panel aç
    if (openBulkPanelBtn) {
        openBulkPanelBtn.addEventListener('click', function() {
            if (bulkPanel) {
                bulkPanel.classList.remove('hidden');
                // Seçili site ID'lerini tüm formlara ekle
                updateBulkFormSites();
            }
        });
    }

    // Panel kapat
    if (closeBulkPanelBtn) {
        closeBulkPanelBtn.addEventListener('click', function() {
            if (bulkPanel) bulkPanel.classList.add('hidden');
        });
    }

    // Formlara seçili site ID'lerini ekle
    function updateBulkFormSites() {
        const selectedIds = getSelectedSiteIds();
        
        // Tüm hidden input'lara ekle (array olarak)
        document.querySelectorAll('[id^="bulk-"]-sites').forEach(input => {
            // Mevcut input'u temizle
            input.remove();
        });

        // Her form için yeni input'lar oluştur
        bulkOperationForms.forEach(form => {
            // Eski input'ları temizle
            const oldInputs = form.querySelectorAll('[id^="bulk-"]-sites');
            oldInputs.forEach(input => input.remove());

            // Her site ID için ayrı input oluştur
            selectedIds.forEach(siteId => {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'selected_sites[]';
                input.value = siteId;
                form.appendChild(input);
            });
        });
    }

    // Checkbox değişikliklerini dinle
    siteCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            updateBulkPanelCount();
            if (bulkPanel && !bulkPanel.classList.contains('hidden')) {
                updateBulkFormSites();
            }
        });
    });

    // Form gönderilmeden önce site ID'lerini güncelle
    bulkOperationForms.forEach(form => {
        form.addEventListener('submit', function(e) {
            const selectedIds = getSelectedSiteIds();
            
            if (selectedIds.length === 0) {
                e.preventDefault();
                alert('Lütfen en az bir site seçin.');
                return false;
            }

            // Form içindeki hidden input'ları güncelle
            const oldInputs = form.querySelectorAll('[id^="bulk-"]-sites, input[name="selected_sites[]"]');
            oldInputs.forEach(input => input.remove());

            // Her site ID için ayrı input oluştur
            selectedIds.forEach(siteId => {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'selected_sites[]';
                input.value = siteId;
                form.appendChild(input);
            });
        });
    });

    // SSL Analizi butonu
    const bulkSslBtn = document.getElementById('bulk-ssl-analysis-btn');
    if (bulkSslBtn) {
        bulkSslBtn.addEventListener('click', async function() {
            const selectedIds = getSelectedSiteIds();
            
            if (selectedIds.length === 0) {
                alert('Lütfen en az bir site seçin.');
                return;
            }

            if (!confirm(`${selectedIds.length} site için SSL/HTTPS analizi başlatılacak. Devam etmek istiyor musunuz?`)) {
                return;
            }

            // Butonu devre dışı bırak
            bulkSslBtn.disabled = true;
            const originalText = bulkSslBtn.innerHTML;
            bulkSslBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Analiz ediliyor...';

            try {
                const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
                const formData = new FormData();
                formData.append('_token', csrfToken);
                selectedIds.forEach(id => {
                    formData.append('selected_sites[]', id);
                });

                const response = await fetch('{{ route("sites.bulk-ssl-analysis") }}', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken,
                        'Accept': 'application/json',
                    },
                    body: formData,
                });

                if (response.ok) {
                    // Sayfayı yenile
                    window.location.reload();
                } else {
                    const data = await response.json();
                    alert(`Hata: ${data.message || 'SSL analizi başlatılamadı.'}`);
                }
            } catch (error) {
                console.error('SSL analysis error:', error);
                alert('❌ İşlem sırasında bir hata oluştu. Lütfen tekrar deneyin.');
            } finally {
                bulkSslBtn.disabled = false;
                bulkSslBtn.innerHTML = originalText;
            }
        });
    }

    // İlk yüklemede sayıyı güncelle
    updateBulkPanelCount();
})();

// Gelişmiş Filtreleme Sistemi
(function() {
    const toggleBtn = document.getElementById('toggle-advanced-filters');
    const filterPanel = document.getElementById('advanced-filters-panel');
    const filterChevron = document.getElementById('filter-chevron');
    const filterForm = document.getElementById('advanced-filter-form');
    const addCriterionBtn = document.getElementById('add-criterion-btn');
    const addSortBtn = document.getElementById('add-sort-btn');
    const clearFiltersBtn = document.getElementById('clear-filters-btn');
    const saveFilterBtn = document.getElementById('save-filter-btn');
    const savedFilterSelect = document.getElementById('saved-filter-select');

    // Panel aç/kapat
    if (toggleBtn && filterPanel) {
        toggleBtn.addEventListener('click', function() {
            const isHidden = filterPanel.classList.contains('hidden');
            filterPanel.classList.toggle('hidden');
            if (filterChevron) {
                filterChevron.classList.toggle('fa-chevron-down');
                filterChevron.classList.toggle('fa-chevron-up');
            }
        });
    }

    // Kriter ekle
    if (addCriterionBtn) {
        addCriterionBtn.addEventListener('click', function() {
            const criteriaContainer = document.getElementById('filter-criteria');
            const newCriterion = criteriaContainer.querySelector('.filter-criterion').cloneNode(true);
            
            // Input değerlerini temizle
            newCriterion.querySelectorAll('input, select').forEach(input => {
                if (input.type === 'text') {
                    input.value = '';
                } else if (input.tagName === 'SELECT') {
                    input.selectedIndex = 0;
                }
            });

            criteriaContainer.appendChild(newCriterion);
            attachCriterionListeners(newCriterion);
        });
    }

    // Kriter kaldır
    function attachCriterionListeners(criterion) {
        const removeBtn = criterion.querySelector('.remove-criterion');
        if (removeBtn) {
            removeBtn.addEventListener('click', function() {
                const criteriaContainer = document.getElementById('filter-criteria');
                if (criteriaContainer.querySelectorAll('.filter-criterion').length > 1) {
                    criterion.remove();
                } else {
                    alert('En az bir kriter olmalıdır.');
                }
            });
        }
    }

    // İlk kriter için listener ekle
    document.querySelectorAll('.filter-criterion').forEach(criterion => {
        attachCriterionListeners(criterion);
    });

    // Sıralama ekle
    if (addSortBtn) {
        addSortBtn.addEventListener('click', function() {
            const sortContainer = document.getElementById('sort-criteria');
            const newSort = sortContainer.querySelector('.sort-criterion').cloneNode(true);
            
            newSort.querySelectorAll('select').forEach(select => {
                select.selectedIndex = 0;
            });

            sortContainer.appendChild(newSort);
            attachSortListeners(newSort);
        });
    }

    // Sıralama kaldır
    function attachSortListeners(sort) {
        const removeBtn = sort.querySelector('.remove-sort');
        if (removeBtn) {
            removeBtn.addEventListener('click', function() {
                const sortContainer = document.getElementById('sort-criteria');
                if (sortContainer.querySelectorAll('.sort-criterion').length > 1) {
                    sort.remove();
                } else {
                    alert('En az bir sıralama kriteri olmalıdır.');
                }
            });
        }
    }

    // İlk sıralama için listener ekle
    document.querySelectorAll('.sort-criterion').forEach(sort => {
        attachSortListeners(sort);
    });

    // Form gönderimi - filtreleri JSON formatına çevir
    if (filterForm) {
        filterForm.addEventListener('submit', function(e) {
            const criteria = [];
            const sortCriteria = [];

            // Filtre kriterlerini topla
            document.querySelectorAll('.filter-criterion').forEach(criterion => {
                const field = criterion.querySelector('.filter-field')?.value;
                const operator = criterion.querySelector('.filter-operator')?.value;
                const value = criterion.querySelector('.filter-value')?.value;

                if (field && operator && value) {
                    // Değeri parse et (array, boolean, vb.)
                    let parsedValue = value;
                    if (value.includes(',')) {
                        parsedValue = value.split(',').map(v => v.trim());
                    } else if (value === 'true' || value === '1') {
                        parsedValue = true;
                    } else if (value === 'false' || value === '0') {
                        parsedValue = false;
                    }

                    criteria.push({
                        field: field,
                        operator: operator,
                        value: parsedValue
                    });
                }
            });

            // Sıralama kriterlerini topla
            document.querySelectorAll('.sort-criterion').forEach(sort => {
                const field = sort.querySelector('select[name="sort_field[]"]')?.value;
                const direction = sort.querySelector('select[name="sort_direction[]"]')?.value;

                if (field) {
                    sortCriteria.push({
                        field: field,
                        direction: direction || 'asc'
                    });
                }
            });

            // Hidden input'lar oluştur
            const filtersInput = document.createElement('input');
            filtersInput.type = 'hidden';
            filtersInput.name = 'filters';
            filtersInput.value = JSON.stringify({
                logic: document.querySelector('input[name="filter_logic"]:checked')?.value || 'AND',
                criteria: criteria
            });

            const sortInput = document.createElement('input');
            sortInput.type = 'hidden';
            sortInput.name = 'sort';
            sortInput.value = JSON.stringify(sortCriteria);

            filterForm.appendChild(filtersInput);
            filterForm.appendChild(sortInput);
        });
    }

    // Filtreleri temizle
    if (clearFiltersBtn) {
        clearFiltersBtn.addEventListener('click', function() {
            window.location.href = '{{ route("sites.index") }}';
        });
    }

    // Kayıtlı filtre yükle
    if (savedFilterSelect) {
        savedFilterSelect.addEventListener('change', function() {
            const option = this.options[this.selectedIndex];
            if (option.value) {
                const filters = JSON.parse(option.dataset.filters || '{}');
                const sort = JSON.parse(option.dataset.sort || '[]');
                
                // Filtreleri form'a yükle
                // Bu kısım daha karmaşık olabilir, basit bir implementasyon için
                // sayfayı yeniden yönlendirebiliriz
                const params = new URLSearchParams();
                params.set('filters', JSON.stringify(filters));
                if (sort.length > 0) {
                    params.set('sort', JSON.stringify(sort));
                }
                window.location.href = '{{ route("sites.index") }}?' + params.toString();
            }
        });
    }

    // Filtre kaydet
    if (saveFilterBtn) {
        saveFilterBtn.addEventListener('click', function() {
            const name = prompt('Filtre adını girin:');
            if (!name) return;

            // Filtreleri ve sıralamayı topla (form submit'teki gibi)
            const criteria = [];
            const sortCriteria = [];

            document.querySelectorAll('.filter-criterion').forEach(criterion => {
                const field = criterion.querySelector('.filter-field')?.value;
                const operator = criterion.querySelector('.filter-operator')?.value;
                const value = criterion.querySelector('.filter-value')?.value;

                if (field && operator && value) {
                    let parsedValue = value;
                    if (value.includes(',')) {
                        parsedValue = value.split(',').map(v => v.trim());
                    }
                    criteria.push({ field, operator, value: parsedValue });
                }
            });

            document.querySelectorAll('.sort-criterion').forEach(sort => {
                const field = sort.querySelector('select[name="sort_field[]"]')?.value;
                const direction = sort.querySelector('select[name="sort_direction[]"]')?.value;
                if (field) {
                    sortCriteria.push({ field, direction: direction || 'asc' });
                }
            });

            // API'ye gönder
            fetch('{{ route("sites.filters.save") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
                },
                body: JSON.stringify({
                    name: name,
                    filters: {
                        logic: document.querySelector('input[name="filter_logic"]:checked')?.value || 'AND',
                        criteria: criteria
                    },
                    sort: sortCriteria
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('Filtre başarıyla kaydedildi!');
                    location.reload();
                } else {
                    alert('Hata: ' + (data.message || 'Bilinmeyen hata'));
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Filtre kaydedilirken bir hata oluştu.');
            });
        });
    }

    // Filtre varsa kaydet butonunu göster
    if (filterForm) {
        filterForm.addEventListener('input', function() {
            if (saveFilterBtn) {
                saveFilterBtn.classList.remove('hidden');
            }
        });
    }
})();
</script>

<!-- Site Silme Modal -->
<div id="delete-site-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-md w-full">
        <div class="p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Yapılacak İşlemi Seçiniz</h3>
                <button type="button" onclick="closeDeleteModal()" 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 class="mb-4">
                <p class="text-sm text-gray-600 dark:text-gray-400">
                    <span id="delete-site-name" class="font-semibold text-gray-900 dark:text-gray-100"></span> sitesi için silme işlemini seçin:
                </p>
            </div>
            
            <div class="space-y-3">
                <form id="delete-panel-form" method="POST" class="inline">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="w-full px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg text-sm font-medium transition-colors">
                        <i class="fas fa-trash-alt mr-2"></i>
                        Panelden Kaldır
                    </button>
                </form>
                
                <form id="delete-full-form" method="POST" class="inline">
                    @csrf
                    @method('DELETE')
                    <input type="hidden" name="delete_from_server" value="1">
                    <button type="submit" class="w-full px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg text-sm font-medium transition-colors">
                        <i class="fas fa-trash-alt mr-2"></i>
                        Panel ve Sunucudan Kaldır
                    </button>
                </form>
                
                <button type="button" onclick="closeDeleteModal()" class="w-full px-4 py-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-lg text-sm font-medium transition-colors">
                    <i class="fas fa-times mr-2"></i>
                    İptal
                </button>
            </div>
        </div>
    </div>
</div>

<script>
function openDeleteModal(siteId, siteName) {
    const modal = document.getElementById('delete-site-modal');
    const siteNameElement = document.getElementById('delete-site-name');
    const panelForm = document.getElementById('delete-panel-form');
    const fullForm = document.getElementById('delete-full-form');
    
    siteNameElement.textContent = siteName;
    panelForm.action = '{{ route("sites.destroy", ":id") }}'.replace(':id', siteId);
    fullForm.action = '{{ route("sites.destroy", ":id") }}'.replace(':id', siteId);
    
    modal.classList.remove('hidden');
}

function closeDeleteModal() {
    const modal = document.getElementById('delete-site-modal');
    modal.classList.add('hidden');
}

// Modal dışına tıklandığında kapat
document.addEventListener('click', function(event) {
    const modal = document.getElementById('delete-site-modal');
    if (event.target === modal) {
        closeDeleteModal();
    }
});
</script>
@endpush
@endsection