@extends('layouts.app')

@section('title', 'Toplu İşlem Geçmişi')

@section('content')
<div class="px-4 sm:px-6 lg:px-8 py-8 w-full max-w-full">
    <div class="sm:flex sm:items-center mb-6">
        <div class="sm:flex-auto">
            <h1 class="text-3xl font-semibold text-gray-900 dark:text-gray-100">Toplu İşlem Geçmişi</h1>
            <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">
                Ürünler üzerinde yapılan toplu işlemlerin (gizle, stok yok, indirim) geçmişini görüntüleyin.
            </p>
        </div>
        <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
            <a href="{{ route('product-prices.index') }}" 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">
                <i class="fas fa-arrow-left"></i>
                Fiyat Yönetimine Dön
            </a>
        </div>
    </div>

    <!-- Filtreler -->
    <div class="mb-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4 shadow-sm">
        <form method="GET" action="{{ route('product-prices.bulk-operations-history') }}" class="flex items-center gap-4 flex-wrap">
            <div class="flex items-center gap-2">
                <label for="operation_type" class="text-sm font-medium text-gray-700 dark:text-gray-300">İşlem Tipi:</label>
                <select name="operation_type" id="operation_type" 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-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200">
                    <option value="">Tüm İşlemler</option>
                    @foreach($operationTypes as $key => $label)
                    <option value="{{ $key }}" {{ $operationType === $key ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            
            <div class="flex items-center gap-2">
                <label for="status" class="text-sm font-medium text-gray-700 dark:text-gray-300">Durum:</label>
                <select name="status" id="status" 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-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200">
                    <option value="">Tüm Durumlar</option>
                    <option value="completed" {{ $status === 'completed' ? 'selected' : '' }}>Tamamlandı</option>
                    <option value="failed" {{ $status === 'failed' ? 'selected' : '' }}>Başarısız</option>
                    <option value="pending" {{ $status === 'pending' ? 'selected' : '' }}>Beklemede</option>
                    <option value="running" {{ $status === 'running' ? 'selected' : '' }}>Çalışıyor</option>
                </select>
            </div>
            
            <button type="submit" class="inline-flex items-center gap-2 rounded-lg bg-blue-600 hover:bg-blue-500 dark:bg-blue-600 dark:hover:bg-blue-500 px-4 py-2 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-filter"></i>
                Filtrele
            </button>
            
            @if($operationType || $status)
            <a href="{{ route('product-prices.bulk-operations-history') }}" class="inline-flex items-center gap-2 text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium transition-colors">
                <i class="fas fa-times"></i>
                Filtreleri Kaldır
            </a>
            @endif
        </form>
    </div>

    <!-- İşlemler Listesi -->
    <div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
        @if($operations->isEmpty())
        <div class="text-center py-12 px-4">
            <i class="fas fa-inbox text-gray-400 dark:text-gray-500 text-4xl mb-4"></i>
            <p class="text-gray-500 dark:text-gray-400">Henüz toplu işlem kaydı bulunmuyor.</p>
        </div>
        @else
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead class="bg-gray-50 dark:bg-gray-700">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                            Tarih
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                            İşlem Tipi
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                            Kullanıcı
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                            Ürün Sayısı
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                            Başarılı / Başarısız
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                            WordPress Senkronizasyonu
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                            Durum
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                            Detaylar
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                    @foreach($operations as $operation)
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                            <div>
                                <div class="font-medium">{{ $operation->created_at->format('d.m.Y') }}</div>
                                <div class="text-gray-500 dark:text-gray-400 text-xs">{{ $operation->created_at->format('H:i:s') }}</div>
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            @php
                                $operationIcons = [
                                    'product_bulk_hide' => ['icon' => 'fa-eye-slash', 'color' => 'gray'],
                                    'product_bulk_out_of_stock' => ['icon' => 'fa-box-open', 'color' => 'orange'],
                                    'product_bulk_discount' => ['icon' => 'fa-percent', 'color' => 'green'],
                                ];
                                $opInfo = $operationIcons[$operation->operation_type] ?? ['icon' => 'fa-cog', 'color' => 'blue'];
                            @endphp
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold bg-{{ $opInfo['color'] }}-100 dark:bg-{{ $opInfo['color'] }}-900/30 text-{{ $opInfo['color'] }}-800 dark:text-{{ $opInfo['color'] }}-300">
                                <i class="fas {{ $opInfo['icon'] }} mr-2"></i>
                                {{ $operationTypes[$operation->operation_type] ?? $operation->operation_type }}
                            </span>
                            @if($operation->parameters && isset($operation->parameters['discount_percent']))
                            <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                İndirim: %{{ $operation->parameters['discount_percent'] }}
                            </div>
                            @endif
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                            {{ $operation->user->name ?? 'Sistem' }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                            <span class="font-semibold">{{ count($operation->target_ids ?? []) }}</span> ürün
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm">
                            <div class="flex items-center gap-2">
                                <span class="text-green-600 dark:text-green-400 font-semibold">{{ $operation->success_count }}</span>
                                <span class="text-gray-400">/</span>
                                <span class="text-red-600 dark:text-red-400 font-semibold">{{ $operation->failed_count }}</span>
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                            @if($operation->result && isset($operation->result['wordpress_synced']))
                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300">
                                <i class="fas fa-check-circle mr-1"></i>
                                {{ $operation->result['wordpress_synced'] }} senkronize
                            </span>
                            @else
                            <span class="text-gray-400 dark:text-gray-500">-</span>
                            @endif
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            @php
                                $statusColors = [
                                    'completed' => ['bg' => 'green', 'text' => 'green'],
                                    'failed' => ['bg' => 'red', 'text' => 'red'],
                                    'pending' => ['bg' => 'yellow', 'text' => 'yellow'],
                                    'running' => ['bg' => 'blue', 'text' => 'blue'],
                                ];
                                $statusInfo = $statusColors[$operation->status] ?? ['bg' => 'gray', 'text' => 'gray'];
                            @endphp
                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold bg-{{ $statusInfo['bg'] }}-100 dark:bg-{{ $statusInfo['bg'] }}-900/30 text-{{ $statusInfo['text'] }}-800 dark:text-{{ $statusInfo['text'] }}-300">
                                @if($operation->status === 'completed')
                                    <i class="fas fa-check-circle mr-1"></i>
                                @elseif($operation->status === 'failed')
                                    <i class="fas fa-times-circle mr-1"></i>
                                @elseif($operation->status === 'running')
                                    <i class="fas fa-spinner fa-spin mr-1"></i>
                                @else
                                    <i class="fas fa-clock mr-1"></i>
                                @endif
                                {{ ucfirst($operation->status) }}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm">
                            <button 
                                onclick="showOperationDetails({{ $operation->id }})"
                                class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 transition-colors">
                                <i class="fas fa-eye"></i>
                            </button>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        
        <!-- Pagination -->
        <div class="bg-white dark:bg-gray-800 px-4 py-3 border-t border-gray-200 dark:border-gray-700 sm:px-6">
            {{ $operations->links() }}
        </div>
        @endif
    </div>
</div>

<!-- Detay Modal -->
<div id="operationDetailsModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 dark:bg-gray-900 dark:bg-opacity-75 overflow-y-auto h-full w-full z-50" style="display: none;">
    <div class="relative top-10 mx-auto p-5 border w-full max-w-2xl shadow-lg rounded-lg bg-white dark:bg-gray-800 mb-10">
        <div class="flex items-center justify-between mb-4 border-b border-gray-200 dark:border-gray-700 pb-4">
            <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">
                <i class="fas fa-info-circle text-indigo-600 dark:text-indigo-400 mr-2"></i>
                İşlem Detayları
            </h3>
            <button onclick="closeOperationDetailsModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>
        <div id="operationDetailsContent" class="text-sm text-gray-700 dark:text-gray-300">
            <!-- Detaylar buraya yüklenecek -->
        </div>
    </div>
</div>

@push('scripts')
<script>
const operationsData = @json($operations->items());

function showOperationDetails(operationId) {
    const operation = operationsData.find(op => op.id === operationId);
    if (!operation) {
        alert('İşlem bulunamadı.');
        return;
    }

    const modal = document.getElementById('operationDetailsModal');
    const content = document.getElementById('operationDetailsContent');
    
    let detailsHtml = `
        <div class="space-y-4">
            <div>
                <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">Genel Bilgiler</h4>
                <dl class="grid grid-cols-2 gap-4">
                    <div>
                        <dt class="text-xs text-gray-500 dark:text-gray-400">İşlem Tipi</dt>
                        <dd class="text-sm font-medium">${operation.operation_type}</dd>
                    </div>
                    <div>
                        <dt class="text-xs text-gray-500 dark:text-gray-400">Durum</dt>
                        <dd class="text-sm font-medium">${operation.status}</dd>
                    </div>
                    <div>
                        <dt class="text-xs text-gray-500 dark:text-gray-400">Başlangıç</dt>
                        <dd class="text-sm">${operation.started_at || '-'}</dd>
                    </div>
                    <div>
                        <dt class="text-xs text-gray-500 dark:text-gray-400">Bitiş</dt>
                        <dd class="text-sm">${operation.completed_at || '-'}</dd>
                    </div>
                </dl>
            </div>
            
            <div>
                <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">Sonuçlar</h4>
                <dl class="grid grid-cols-2 gap-4">
                    <div>
                        <dt class="text-xs text-gray-500 dark:text-gray-400">Başarılı</dt>
                        <dd class="text-sm font-semibold text-green-600 dark:text-green-400">${operation.success_count}</dd>
                    </div>
                    <div>
                        <dt class="text-xs text-gray-500 dark:text-gray-400">Başarısız</dt>
                        <dd class="text-sm font-semibold text-red-600 dark:text-red-400">${operation.failed_count}</dd>
                    </div>
                </dl>
            </div>
    `;

    if (operation.parameters) {
        detailsHtml += `
            <div>
                <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">Parametreler</h4>
                <pre class="bg-gray-50 dark:bg-gray-700 p-3 rounded text-xs overflow-auto">${JSON.stringify(operation.parameters, null, 2)}</pre>
            </div>
        `;
    }

    if (operation.result) {
        detailsHtml += `
            <div>
                <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">Detaylı Sonuçlar</h4>
                <pre class="bg-gray-50 dark:bg-gray-700 p-3 rounded text-xs overflow-auto">${JSON.stringify(operation.result, null, 2)}</pre>
            </div>
        `;
    }

    if (operation.error_message) {
        detailsHtml += `
            <div>
                <h4 class="font-semibold text-red-600 dark:text-red-400 mb-2">Hata Mesajı</h4>
                <p class="text-sm text-red-600 dark:text-red-400">${operation.error_message}</p>
            </div>
        `;
    }

    if (operation.target_ids && operation.target_ids.length > 0) {
        detailsHtml += `
            <div>
                <h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">İşlem Yapılan Ürün ID'leri</h4>
                <p class="text-xs text-gray-500 dark:text-gray-400">${operation.target_ids.join(', ')}</p>
            </div>
        `;
    }

    detailsHtml += `</div>`;

    content.innerHTML = detailsHtml;
    
    modal.classList.remove('hidden');
    modal.style.display = 'flex';
    modal.style.justifyContent = 'center';
    modal.style.alignItems = 'flex-start';
    document.body.style.overflow = 'hidden';
}

function closeOperationDetailsModal() {
    const modal = document.getElementById('operationDetailsModal');
    if (modal) {
        modal.classList.add('hidden');
        modal.style.display = 'none';
        document.body.style.overflow = '';
    }
}
</script>
@endpush
@endsection