@extends('layouts.app')

@section('title', 'Bakım Ayarları')

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <div class="sm:flex sm:items-center sm:justify-between">
        <div>
            <h1 class="text-2xl font-semibold text-gray-900 flex items-center gap-2">
                <i class="fas fa-tools text-indigo-500"></i>
                Bakım Planlama Ayarları
            </h1>
            <p class="mt-1 text-sm text-gray-600">
                Aktif siteler üzerinde otomatik bakım komutları için çalışma aralıklarını tanımlayın.
            </p>
        </div>
        <a href="{{ route('dashboard') }}"
            class="inline-flex items-center gap-2 rounded-full border border-gray-200 px-3 py-1 text-xs font-semibold text-gray-600 hover:bg-gray-50 transition">
            <i class="fas fa-arrow-left"></i> Dashboard’a dön
        </a>
    </div>

    @if (session('success'))
        <div class="mt-4 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700 flex items-center gap-2">
            <i class="fas fa-check-circle"></i>
            <span>{{ session('success') }}</span>
        </div>
    @endif

    @if (session('error'))
        <div class="mt-4 rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700 flex items-center gap-2">
            <i class="fas fa-exclamation-circle"></i>
            <span>{{ session('error') }}</span>
        </div>
    @endif

    @if (session('bulk_results'))
        <div class="mt-4 rounded-xl border border-blue-200 bg-blue-50 px-4 py-3">
            <h3 class="text-sm font-semibold text-blue-900 mb-2">Toplu İşlem Sonuçları:</h3>
            <div class="space-y-1 max-h-60 overflow-y-auto">
                @foreach (session('bulk_results') as $result)
                    <div class="text-xs {{ $result['status'] === 'success' ? 'text-emerald-700' : 'text-rose-700' }}">
                        <strong>{{ $result['site'] }}:</strong> {{ $result['message'] }}
                    </div>
                @endforeach
            </div>
        </div>
    @endif

    <div class="mt-6 grid gap-6 lg:grid-cols-2">
        <div class="rounded-2xl border border-indigo-100 bg-white shadow-sm">
            <div class="px-6 py-5 border-b border-indigo-50">
                <h2 class="text-lg font-semibold text-gray-900 flex items-center gap-2">
                    <i class="fas fa-calendar-plus text-indigo-500"></i>
                    Yeni Bakım Planı Oluştur
                </h2>
                <p class="mt-2 text-sm text-gray-500">
                    Seçeceğiniz komut, belirlediğiniz aralıkta tüm aktif sitelerde otomatik olarak çalıştırılır.
                </p>
            </div>

            <div class="px-6 py-5">
                <form action="{{ route('maintenance.schedules.store') }}" method="POST" class="space-y-4">
                    @csrf
                    <div>
                        <label for="maintenance_command_id" class="block text-sm font-medium text-gray-700">
                            Bakım Komutu
                        </label>
                        <select name="maintenance_command_id" id="maintenance_command_id"
                            class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm">
                            @foreach ($commands as $command)
                                <option value="{{ $command->id }}">{{ $command->name }}</option>
                            @endforeach
                        </select>
                        @error('maintenance_command_id')
                            <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="grid grid-cols-3 gap-3">
                        <div>
                            <label for="interval_value" class="block text-sm font-medium text-gray-700">
                                Aralık
                            </label>
                            <input type="number" name="interval_value" id="interval_value" min="1" value="{{ old('interval_value', 1) }}"
                                class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm">
                            @error('interval_value')
                                <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                        <div class="col-span-2">
                            <label for="interval_unit" class="block text-sm font-medium text-gray-700">
                                Zaman Birimi
                            </label>
                            <select name="interval_unit" id="interval_unit"
                                class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm">
                                <option value="hour">Saat</option>
                                <option value="day" selected>Gün</option>
                                <option value="week">Hafta</option>
                                <option value="month">Ay</option>
                            </select>
                            @error('interval_unit')
                                <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div class="rounded-xl border border-indigo-100 bg-indigo-50/50 px-4 py-3 space-y-3">
                        <label class="inline-flex items-center gap-2 text-sm font-medium text-gray-700">
                            <input type="checkbox" name="run_only_at_night" value="1"
                                class="rounded border-indigo-300 text-indigo-600 focus:ring-indigo-500">
                            Gece çalıştır (belirli saat aralığında)
                        </label>
                        <div class="grid grid-cols-2 gap-3">
                            <div>
                                <label for="preferred_start_time" class="block text-xs font-medium text-gray-600">
                                    Başlangıç Saati
                                </label>
                                <input type="time" name="preferred_start_time" id="preferred_start_time"
                                    class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm">
                                @error('preferred_start_time')
                                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="preferred_end_time" class="block text-xs font-medium text-gray-600">
                                    Bitiş Saati
                                </label>
                                <input type="time" name="preferred_end_time" id="preferred_end_time"
                                    class="mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm">
                                @error('preferred_end_time')
                                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <p class="text-xs text-gray-500">
                            Komut yalnızca belirtilen saat aralığında tetiklenir. Örn: 01:00 - 05:00 arası.
                        </p>
                    </div>

                    <div>
                        <label class="inline-flex items-center gap-2 text-sm font-medium text-gray-700">
                            <input type="checkbox" name="is_active" value="1" checked
                                class="rounded border-indigo-300 text-indigo-600 focus:ring-indigo-500">
                            Plan aktif olsun
                        </label>
                    </div>

                    <button type="submit"
                        class="inline-flex items-center gap-2 rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow hover:bg-indigo-500 transition">
                        <i class="fas fa-save"></i>
                        Planı Kaydet
                    </button>
                </form>
            </div>
        </div>

        <div class="rounded-2xl border border-emerald-100 bg-white shadow-sm overflow-hidden">
            <div class="px-6 py-5 border-b border-emerald-50">
                <h2 class="text-lg font-semibold text-gray-900 flex items-center gap-2">
                    <i class="fas fa-history text-emerald-500"></i>
                    Son Bakım Logları
                </h2>
                <p class="mt-2 text-sm text-gray-500">
                    Otomatik veya manuel tetiklenen bakım işlemlerinin özetini görüntüleyin.
                </p>
                @if($logSummary->count())
                    <div class="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
                        @foreach ($logSummary as $summary)
                            <div class="rounded-xl border border-emerald-100 bg-emerald-50/50 px-4 py-3">
                                <div class="text-sm font-semibold text-emerald-700">
                                    {{ $summary->command->name ?? 'Bilinmeyen Komut' }}
                                </div>
                                <div class="mt-2 flex items-center gap-4 text-xs text-emerald-700">
                                    <span class="inline-flex items-center gap-1">
                                        <i class="fas fa-check-circle"></i>
                                        Başarılı: {{ $summary->success_count }}
                                    </span>
                                    <span class="inline-flex items-center gap-1 text-rose-600">
                                        <i class="fas fa-exclamation-circle"></i>
                                        Hata: {{ $summary->failed_count }}
                                    </span>
                                    <span class="inline-flex items-center gap-1 text-amber-600">
                                        <i class="fas fa-spinner"></i>
                                        Çalışıyor: {{ $summary->running_count }}
                                    </span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>

            <div class="px-6 py-5">
                <div class="overflow-hidden rounded-xl border border-gray-200">
                    <table class="min-w-full divide-y divide-gray-200 text-sm">
                        <thead class="bg-gray-50 text-gray-600 uppercase text-xs">
                            <tr>
                                <th class="px-4 py-2 text-left">Komut</th>
                                <th class="px-4 py-2 text-left">Başlatan</th>
                                <th class="px-4 py-2 text-left">Durum</th>
                                <th class="px-4 py-2 text-left">Başlangıç</th>
                                <th class="px-4 py-2 text-left">Bitiş</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100 bg-white text-gray-700">
                            @forelse ($recentLogs as $log)
                                <tr>
                                    <td class="px-4 py-2 font-medium text-gray-900">
                                        {{ $log->command->name ?? 'Bilinmeyen' }}
                                    </td>
                                    <td class="px-4 py-2 text-xs text-gray-600">
                                        {{ $log->initiatedBy->name ?? 'Sistem' }}
                                    </td>
                                    <td class="px-4 py-2">
                                        <span class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-semibold
                                            {{ $log->status === 'success' ? 'bg-emerald-100 text-emerald-700' : ($log->status === 'running' ? 'bg-amber-100 text-amber-700' : 'bg-rose-100 text-rose-700') }}">
                                            <i class="fas fa-circle"></i>
                                            {{ $log->status }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-2 text-xs text-gray-600">
                                        {{ optional($log->started_at)->format('d.m.Y H:i') ?? '-' }}
                                    </td>
                                    <td class="px-4 py-2 text-xs text-gray-600">
                                        {{ optional($log->finished_at)->format('d.m.Y H:i') ?? '-' }}
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="px-4 py-4 text-center text-sm text-gray-500">
                                        Henüz log kaydı bulunmuyor.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="mt-8">
        <h2 class="text-lg font-semibold text-gray-900 flex items-center gap-2 mb-4">
            <i class="fas fa-shopping-cart text-purple-500"></i>
            WooCommerce Özellik Yönetimi
        </h2>
        <div class="mb-6 rounded-2xl border border-purple-100 bg-white shadow-sm">
            <div class="px-6 py-5 border-b border-purple-50">
                <h3 class="text-base font-semibold text-gray-900 flex items-center gap-2">
                    <i class="fas fa-toggle-on text-purple-500"></i>
                    Toplu Özellik Açma/Kapama
                </h3>
                <p class="mt-2 text-sm text-gray-500">
                    Seçili sitelerde WooCommerce özelliklerini toplu olarak etkinleştirin veya devre dışı bırakın.
                </p>
            </div>
            <div class="px-6 py-5">
                <form action="{{ route('maintenance.toggle-woo-feature') }}" method="POST" id="toggle-woo-feature-form">
                    @csrf
                    <div class="space-y-4">
                        <div>
                            <label for="woo_option" class="block text-sm font-medium text-gray-700 mb-2">
                                WooCommerce Özelliği
                            </label>
                            <select name="option" id="woo_option" required
                                class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 text-sm">
                                <option value="">Seçiniz...</option>
                                <option value="woocommerce_enable_coupons">Kuponlar (Coupons)</option>
                                <option value="woocommerce_enable_guest_checkout">Misafir Ödeme (Guest Checkout)</option>
                                <option value="woocommerce_calc_taxes">Vergi Hesaplama (Tax Calculation)</option>
                                <option value="woocommerce_enable_shipping_calc">Kargo Hesaplama (Shipping Calculator)</option>
                                <option value="woocommerce_enable_ajax_add_to_cart">AJAX Sepete Ekleme</option>
                            </select>
                        </div>

                        <div>
                            <label for="woo_action" class="block text-sm font-medium text-gray-700 mb-2">
                                İşlem
                            </label>
                            <select name="action" id="woo_action" required
                                class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 text-sm">
                                <option value="">Seçiniz...</option>
                                <option value="enable">Etkinleştir</option>
                                <option value="disable">Devre Dışı Bırak</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                Siteler ({{ $sites->count() }} aktif site)
                            </label>
                            <div class="max-h-60 overflow-y-auto rounded-lg border border-gray-200 bg-gray-50 p-3 space-y-2">
                                <div class="flex items-center gap-2 mb-2 pb-2 border-b border-gray-200">
                                    <input type="checkbox" id="select-all-woo-sites" 
                                        class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
                                    <label for="select-all-woo-sites" class="text-sm font-medium text-gray-700 cursor-pointer">
                                        Tümünü Seç
                                    </label>
                                </div>
                                @forelse($sites as $site)
                                    <label class="flex items-center gap-2 text-sm text-gray-700 cursor-pointer hover:bg-white px-2 py-1 rounded">
                                        <input type="checkbox" name="sites_ids[]" value="{{ $site->id }}" 
                                            class="woo-site-checkbox h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded">
                                        <span>{{ $site->name }}</span>
                                    </label>
                                @empty
                                    <p class="text-sm text-gray-500">Aktif site bulunamadı.</p>
                                @endforelse
                            </div>
                            <p class="mt-2 text-xs text-gray-500">
                                <span id="selected-woo-count">0</span> site seçildi
                            </p>
                        </div>

                        <button type="submit" id="toggle-woo-submit-btn" disabled
                            class="inline-flex items-center gap-2 rounded-md bg-purple-600 px-4 py-2 text-sm font-semibold text-white shadow hover:bg-purple-500 transition disabled:opacity-50 disabled:cursor-not-allowed">
                            <i class="fas fa-sync-alt"></i>
                            Özelliği Güncelle
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="mt-8">
        <h2 class="text-lg font-semibold text-gray-900 flex items-center gap-2">
            <i class="fas fa-list-alt text-slate-500"></i>
            Mevcut Bakım Planları
        </h2>
        <div class="mt-4 overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm">
            <table class="min-w-full divide-y divide-gray-200 text-sm">
                <thead class="bg-gray-50 text-gray-500 uppercase text-xs">
                    <tr>
                        <th class="px-4 py-3 text-left">Komut</th>
                        <th class="px-4 py-3 text-left">Aralık</th>
                        <th class="px-4 py-3 text-left">Gece Kısıtı</th>
                        <th class="px-4 py-3 text-left">Son Çalışma</th>
                        <th class="px-4 py-3 text-left">Sonraki Çalışma</th>
                        <th class="px-4 py-3 text-left">Durum</th>
                        <th class="px-4 py-3 text-left">İşlemler</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100 bg-white text-gray-700">
                        @forelse ($commands->flatMap->schedules ?? [] as $schedule)
                        <tr>
                            <td class="px-4 py-3 font-medium text-gray-900">
                                {{ $schedule->command->name ?? 'Bilinmeyen Komut' }}
                                <div class="text-xs text-gray-500">
                                    Oluşturan: {{ $schedule->creator->name ?? 'Bilinmiyor' }}
                                </div>
                            </td>
                            <td class="px-4 py-3">
                                Her {{ $schedule->interval_value }} {{ $schedule->interval_unit }}
                            </td>
                            <td class="px-4 py-3 text-xs text-gray-600">
                                @if ($schedule->run_only_at_night)
                                    {{ optional($schedule->preferred_start_time)->format('H:i') }} - {{ optional($schedule->preferred_end_time)->format('H:i') }}
                                @else
                                    Yok
                                @endif
                            </td>
                            <td class="px-4 py-3 text-xs text-gray-600">
                                {{ optional($schedule->last_run_at)->format('d.m.Y H:i') ?? '-' }}
                            </td>
                            <td class="px-4 py-3 text-xs text-gray-600">
                                {{ optional($schedule->next_run_at)->format('d.m.Y H:i') ?? '-' }}
                            </td>
                            <td class="px-4 py-3">
                                <span class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-semibold
                                    {{ $schedule->is_active ? 'bg-emerald-100 text-emerald-600' : 'bg-gray-100 text-gray-500' }}">
                                    <i class="fas fa-circle"></i>
                                    {{ $schedule->is_active ? 'Aktif' : 'Pasif' }}
                                </span>
                            </td>
                            <td class="px-4 py-3">
                                <div class="flex items-center gap-2">
                                    <form action="{{ route('maintenance.schedules.update', $schedule) }}" method="POST" class="inline-flex items-center gap-2">
                                        @csrf
                                        @method('PUT')
                                        <input type="hidden" name="interval_value" value="{{ $schedule->interval_value }}">
                                        <input type="hidden" name="interval_unit" value="{{ $schedule->interval_unit }}">
                                        <input type="hidden" name="run_only_at_night" value="{{ $schedule->run_only_at_night ? 1 : 0 }}">
                                        <input type="hidden" name="preferred_start_time" value="{{ optional($schedule->preferred_start_time)->format('H:i') }}">
                                        <input type="hidden" name="preferred_end_time" value="{{ optional($schedule->preferred_end_time)->format('H:i') }}">
                                        <input type="hidden" name="is_active" value="{{ $schedule->is_active ? '0' : '1' }}">
                                        <button type="submit"
                                            class="inline-flex items-center gap-1 rounded-md border border-indigo-200 px-2 py-1 text-xs font-semibold text-indigo-600 hover:bg-indigo-50 transition">
                                            <i class="fas fa-toggle-on"></i>
                                            {{ $schedule->is_active ? 'Pasifleştir' : 'Aktifleştir' }}
                                        </button>
                                    </form>
                                    <form action="{{ route('maintenance.schedules.destroy', $schedule) }}" method="POST"
                                        onsubmit="return confirm('Bu planı silmek istediğinize emin misiniz?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit"
                                            class="inline-flex items-center gap-1 rounded-md border border-rose-200 px-2 py-1 text-xs font-semibold text-rose-600 hover:bg-rose-50 transition">
                                            <i class="fas fa-trash"></i> Sil
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-4 py-4 text-center text-sm text-gray-500">
                                Henüz bakım planı tanımlanmamış.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const selectAllWooSites = document.getElementById('select-all-woo-sites');
    const wooSiteCheckboxes = document.querySelectorAll('.woo-site-checkbox');
    const toggleWooSubmitBtn = document.getElementById('toggle-woo-submit-btn');
    const wooOptionSelect = document.getElementById('woo_option');
    const wooActionSelect = document.getElementById('woo_action');
    const selectedWooCount = document.getElementById('selected-woo-count');

    function updateWooFormState() {
        const checked = document.querySelectorAll('.woo-site-checkbox:checked').length;
        selectedWooCount.textContent = checked;
        
        const canSubmit = checked > 0 && wooOptionSelect.value && wooActionSelect.value;
        toggleWooSubmitBtn.disabled = !canSubmit;
    }

    // Tümünü seç/kaldır
    if (selectAllWooSites) {
        selectAllWooSites.addEventListener('change', function() {
            wooSiteCheckboxes.forEach(cb => {
                cb.checked = this.checked;
            });
            updateWooFormState();
        });
    }

    // Her checkbox değiştiğinde
    wooSiteCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            updateWooFormState();
            
            // Tümünü seç checkbox'ını güncelle
            if (selectAllWooSites) {
                const allChecked = Array.from(wooSiteCheckboxes).every(cb => cb.checked);
                selectAllWooSites.checked = allChecked;
            }
        });
    });

    // Select değişikliklerinde
    [wooOptionSelect, wooActionSelect].forEach(select => {
        if (select) {
            select.addEventListener('change', updateWooFormState);
        }
    });

    // İlk durumu güncelle
    updateWooFormState();
});
</script>
@endpush
@endsection