@extends('layouts.app')

@section('title', 'Backup Yönetimi')

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <div class="sm:flex sm:items-center sm:justify-between">
        <div class="sm:flex-auto">
            <h1 class="text-3xl font-semibold text-gray-900 dark:text-gray-100">Backup Yönetimi</h1>
            <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">
                @if(isset($site))
                {{ $site->name }} - Backup Listesi
                @else
                Tüm sitelerin backup listesi
                @endif
            </p>
        </div>
        <div class="mt-4 sm:mt-0 flex gap-2">
            <a href="{{ route('export.backups', request()->query()) }}" class="inline-flex items-center gap-2 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-2 text-sm font-semibold text-gray-700 dark:text-gray-300 shadow-sm hover:bg-gray-50 dark:bg-gray-900/50">
                <i class="fas fa-file-csv"></i>
                CSV İndir
            </a>
            @if(isset($site))
            <button type="button" id="create-backup-btn" class="inline-flex items-center gap-2 rounded-md bg-indigo-600 dark:bg-indigo-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 dark:hover:bg-indigo-600">
                <i class="fas fa-plus"></i>
                Yeni Backup Oluştur
            </button>
            @endif
        </div>
    </div>

    <!-- Statistics -->
    @if(isset($stats))
    <div class="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0 bg-blue-500 rounded-md p-3">
                        <i class="fas fa-database text-white text-2xl"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Toplam</dt>
                            <dd class="text-2xl font-semibold text-gray-900 dark:text-gray-100">{{ $stats['total'] }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0 bg-green-500 rounded-md p-3">
                        <i class="fas fa-check-circle text-white text-2xl"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Tamamlanan</dt>
                            <dd class="text-2xl font-semibold text-gray-900 dark:text-gray-100">{{ $stats['completed'] }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0 bg-red-500 rounded-md p-3">
                        <i class="fas fa-times-circle text-white text-2xl"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Başarısız</dt>
                            <dd class="text-2xl font-semibold text-gray-900 dark:text-gray-100">{{ $stats['failed'] }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0 bg-yellow-500 rounded-md p-3">
                        <i class="fas fa-spinner text-white text-2xl"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Devam Eden</dt>
                            <dd class="text-2xl font-semibold text-gray-900 dark:text-gray-100">{{ $stats['in_progress'] + $stats['pending'] }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
            <div class="p-5">
                <div class="flex items-center">
                    <div class="flex-shrink-0 bg-purple-500 rounded-md p-3">
                        <i class="fas fa-hdd text-white text-2xl"></i>
                    </div>
                    <div class="ml-5 w-0 flex-1">
                        <dl>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Toplam Boyut</dt>
                            <dd class="text-lg font-semibold text-gray-900 dark:text-gray-100">{{ $stats['total_size_formatted'] }}</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- Filters -->
    <div class="mt-6 bg-white dark:bg-gray-800 shadow rounded-lg p-4">
        <form method="GET" action="{{ route('backups.index') }}" class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-6">
            @if(!isset($site))
            <div>
                <label for="site_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Site</label>
                <select name="site_id" id="site_id" class="block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                    <option value="">Tüm Siteler</option>
                    @foreach($sites ?? [] as $s)
                    <option value="{{ $s->id }}" {{ request('site_id') == $s->id ? 'selected' : '' }}>{{ $s->name }}</option>
                    @endforeach
                </select>
            </div>
            @else
            <input type="hidden" name="site_id" value="{{ $site->id }}">
            @endif
            <div>
                <label for="type" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Tip</label>
                <select name="type" id="type" class="block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                    <option value="">Tümü</option>
                    <option value="full" {{ request('type') === 'full' ? 'selected' : '' }}>Tam Backup</option>
                    <option value="database" {{ request('type') === 'database' ? 'selected' : '' }}>Veritabanı</option>
                    <option value="files" {{ request('type') === 'files' ? 'selected' : '' }}>Dosyalar</option>
                </select>
            </div>
            <div>
                <label for="status" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Durum</label>
                <select name="status" id="status" class="block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
                    <option value="">Tümü</option>
                    <option value="completed" {{ request('status') === 'completed' ? 'selected' : '' }}>Tamamlanan</option>
                    <option value="failed" {{ request('status') === 'failed' ? 'selected' : '' }}>Başarısız</option>
                    <option value="in_progress" {{ request('status') === 'in_progress' ? 'selected' : '' }}>Devam Eden</option>
                    <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Bekleyen</option>
                </select>
            </div>
            <div>
                <label for="date_from" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Başlangıç</label>
                <input type="date" name="date_from" id="date_from" value="{{ request('date_from') }}" class="block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
            </div>
            <div>
                <label for="date_to" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Bitiş</label>
                <input type="date" name="date_to" id="date_to" value="{{ request('date_to') }}" class="block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
            </div>
            <div>
                <label for="search" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Ara</label>
                <input type="text" name="search" id="search" value="{{ request('search') }}" placeholder="Açıklama, dosya adı..." class="block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
            </div>
            <div class="sm:col-span-2 lg:col-span-6 flex items-center gap-2">
                <button type="submit" class="inline-flex items-center gap-2 px-4 py-2 border border-transparent text-sm font-semibold rounded-lg shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">
                    <i class="fas fa-filter"></i>
                    Filtrele
                </button>
                <a href="{{ route('backups.index', isset($site) ? ['site_id' => $site->id] : []) }}" class="inline-flex items-center gap-2 px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-semibold rounded-lg shadow-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700">
                    <i class="fas fa-times"></i>
                    Temizle
                </a>
            </div>
        </form>
    </div>

    <!-- Create Backup Modal -->
    @if(isset($site))
    <div id="create-backup-modal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
            <div class="mt-3">
                <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100 mb-4">Yeni Backup Oluştur</h3>
                <form action="{{ route('backups.store', $site) }}" method="POST">
                    @csrf
                    <div class="mb-4">
                        <label for="type" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Backup Tipi</label>
                        <select name="type" id="type" required class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                            <option value="full">Tam Backup</option>
                            <option value="database">Sadece Veritabanı</option>
                            <option value="files">Sadece Dosyalar</option>
                        </select>
                    </div>
                    <div class="mb-4">
                        <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Açıklama (Opsiyonel)</label>
                        <textarea name="description" id="description" rows="3" class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"></textarea>
                    </div>
                    <div class="flex gap-2">
                        <button type="submit" class="flex-1 inline-flex justify-center rounded-md bg-indigo-600 dark:bg-indigo-500 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-500 dark:hover:bg-indigo-600">
                            Oluştur
                        </button>
                        <button type="button" id="close-modal-btn" class="flex-1 inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 shadow-sm hover:bg-gray-50 dark:bg-gray-900/50">
                            İptal
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @endif

    <!-- Bulk Actions -->
    <div class="mt-6 bg-white dark:bg-gray-800 shadow rounded-lg p-4 hidden" id="bulk-actions">
        <div class="flex items-center justify-between">
            <span class="text-sm text-gray-700 dark:text-gray-300">
                <span id="selected-count">0</span> backup seçildi
            </span>
            <div class="flex gap-2">
                <form action="{{ route('backups.delete-multiple') }}" method="POST" id="bulk-delete-form" onsubmit="return confirm('Seçili backup\'ları silmek istediğinizden emin misiniz?');">
                    @csrf
                    <input type="hidden" name="backup_ids" id="bulk-delete-ids">
                    <button type="submit" class="inline-flex items-center gap-2 px-4 py-2 border border-red-300 dark:border-red-600 text-sm font-semibold rounded-lg shadow-sm text-red-700 dark:text-red-300 bg-white dark:bg-gray-800 hover:bg-red-50 dark:hover:bg-red-900/30">
                        <i class="fas fa-trash"></i>
                        Seçilenleri Sil
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- Backups Table -->
    <div class="mt-8 flow-root">
        <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">
                <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
                    <table class="min-w-full divide-y divide-gray-300">
                        <thead class="bg-gray-50 dark:bg-gray-900/50">
                            <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-backups" class="rounded border-gray-300 dark:border-gray-600">
                                </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</th>
                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">Tip</th>
                                <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">Dosya Boyutu</th>
                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">Oluşturan</th>
                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-100">Tarih</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 bg-white dark:bg-gray-800">
                            @forelse($backups as $backup)
                            <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">
                                    <input type="checkbox" name="backup_ids[]" value="{{ $backup->id }}" class="backup-checkbox rounded border-gray-300 dark:border-gray-600">
                                </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">
                                    <a href="{{ route('sites.show', $backup->site) }}" class="text-indigo-600 hover:text-indigo-900">
                                        {{ $backup->site->name }}
                                    </a>
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                                    {{ $backup->type_label }}
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-sm">
                                    <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {{ $backup->status_badge_class }}">
                                        @if($backup->status === 'in_progress')
                                        <i class="fas fa-spinner fa-spin mr-1"></i>
                                        @elseif($backup->status === 'completed')
                                        <i class="fas fa-check-circle mr-1"></i>
                                        @elseif($backup->status === 'failed')
                                        <i class="fas fa-exclamation-circle mr-1"></i>
                                        @endif
                                        {{ ucfirst($backup->status) }}
                                    </span>
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                                    {{ $backup->formatted_file_size }}
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                                    {{ $backup->creator->name ?? 'Sistem' }}
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                                    {{ $backup->created_at->format('d.m.Y H:i') }}
                                </td>
                                <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
                                    <div class="flex items-center justify-end gap-2">
                                        <a href="{{ route('backups.show', $backup) }}" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300" title="Detay">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        @if($backup->status === 'completed')
                                        <a href="{{ route('backups.download', $backup) }}" class="text-green-600 dark:text-green-400 hover:text-green-900 dark:hover:text-green-300" title="İndir">
                                            <i class="fas fa-download"></i>
                                        </a>
                                        <form action="{{ route('backups.restore', $backup) }}" method="POST" class="inline" onsubmit="return confirm('Bu backup\'ı restore etmek istediğinizden emin misiniz? Bu işlem mevcut verileri değiştirecektir!');">
                                            @csrf
                                            <button type="submit" class="text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300" title="Restore">
                                                <i class="fas fa-undo"></i>
                                            </button>
                                        </form>
                                        @endif
                                        <form action="{{ route('backups.destroy', $backup) }}" method="POST" class="inline" onsubmit="return confirm('Bu backup\'ı silmek istediğinizden emin misiniz?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300" title="Sil">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="8" class="px-3 py-4 text-center text-sm text-gray-500 dark:text-gray-400">
                                    Backup bulunmamaktadır.
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    @if(method_exists($backups, 'links'))
    <div class="mt-4">
        {{ $backups->links() }}
    </div>
    @endif
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const createBtn = document.getElementById('create-backup-btn');
    const modal = document.getElementById('create-backup-modal');
    const closeBtn = document.getElementById('close-modal-btn');
    const selectAllCheckbox = document.getElementById('select-all-backups');
    const backupCheckboxes = document.querySelectorAll('.backup-checkbox');
    const bulkActions = document.getElementById('bulk-actions');
    const selectedCount = document.getElementById('selected-count');
    const bulkDeleteForm = document.getElementById('bulk-delete-form');
    const bulkDeleteIds = document.getElementById('bulk-delete-ids');

    // Select All
    if (selectAllCheckbox) {
        selectAllCheckbox.addEventListener('change', function() {
            backupCheckboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });
            updateBulkActions();
        });
    }

    // Individual checkboxes
    backupCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', updateBulkActions);
    });

    function updateBulkActions() {
        const checked = document.querySelectorAll('.backup-checkbox:checked');
        const count = checked.length;
        
        if (count > 0) {
            bulkActions.classList.remove('hidden');
            selectedCount.textContent = count;
            
            // Update bulk delete form
            const ids = Array.from(checked).map(cb => cb.value);
            bulkDeleteIds.value = JSON.stringify(ids);
        } else {
            bulkActions.classList.add('hidden');
        }
        
        // Update select all checkbox
        if (selectAllCheckbox) {
            selectAllCheckbox.checked = count === backupCheckboxes.length && backupCheckboxes.length > 0;
        }
    }

    if (createBtn && modal) {
        createBtn.addEventListener('click', function() {
            modal.classList.remove('hidden');
        });
    }

    if (closeBtn && modal) {
        closeBtn.addEventListener('click', function() {
            modal.classList.add('hidden');
        });
    }

    // Close modal on outside click
    if (modal) {
        modal.addEventListener('click', function(e) {
            if (e.target === modal) {
                modal.classList.add('hidden');
            }
        });
    }
});
</script>
@endpush
@endsection