@extends('layouts.app')

@section('title', $site->name . ' - İçerikler')

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <div class="sm:flex sm:items-center">
        <div class="sm:flex-auto">
            <div class="flex items-center">
                <a href="{{ route('sites.show', $site) }}" class="text-gray-500 hover:text-gray-700 mr-4">
                    <i class="fas fa-arrow-left"></i>
                </a>
                <div>
                    <h1 class="text-3xl font-semibold text-gray-900">{{ $site->name }} - İçerikler</h1>
                    <p class="mt-2 text-sm text-gray-700">
                        Site içerikleri listesi
                    </p>
                </div>
            </div>
        </div>
        @if(auth()->user()->isAdmin())
        <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
            <a href="{{ route('sites.contents.create', $site) }}" class="block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-blue-500">
                Yeni İçerik Ekle
            </a>
        </div>
        @endif
    </div>

    @if(auth()->user()->isAdmin())
    <div class="mt-6 bg-gray-50 border-b border-gray-200 px-4 py-3 rounded-lg">
        <form id="bulk-publish-form" class="flex flex-wrap items-center gap-3">
            @csrf
            <div class="flex items-center gap-2">
                <input type="checkbox" id="select-all-contents" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                <label for="select-all-contents" class="text-sm font-medium text-gray-700">Tümünü Seç</label>
            </div>
            <div class="flex items-center gap-2">
                <label for="publish_language" class="text-sm font-medium text-gray-700">Dil:</label>
                <select name="language_code" id="publish_language" required class="rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm">
                    <option value="">Seçiniz...</option>
                    <option value="de">Almanca</option>
                    <option value="it">İtalyanca</option>
                    <option value="es">İspanyolca</option>
                    <option value="fr">Fransızca</option>
                    <option value="pt">Portekizce</option>
                </select>
            </div>
            <button type="button" id="bulk-publish-btn" disabled class="inline-flex items-center gap-2 rounded-md bg-emerald-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-emerald-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-600 disabled:opacity-50 disabled:cursor-not-allowed">
                <i class="fas fa-paper-plane"></i>
                Toplu Yayınla
            </button>
            <span id="selected-content-count" class="text-sm text-gray-600 ml-2">0 içerik seçildi</span>
        </form>
    </div>
    @endif

    <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">
                            <tr>
                                @if(auth()->user()->isAdmin())
                                <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
                                    <input type="checkbox" id="select-all-contents-header" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                                </th>
                                @endif
                                <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Başlık</th>
                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Tip</th>
                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Durum</th>
                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Medya</th>
                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Yerleşim</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">
                            @forelse($contents as $content)
                            <tr>
                                @if(auth()->user()->isAdmin())
                                <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
                                    <input type="checkbox" name="selected_contents[]" value="{{ $content->id }}" class="content-checkbox h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                                </td>
                                @endif
                                <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
                                    {{ $content->title }}
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                                    <span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">
                                        {{ $content->type }}
                                    </span>
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                                    <span class="px-2 py-1 text-xs rounded-full {{ $content->status === 'published' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800' }}">
                                        {{ $content->status }}
                                    </span>
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ $content->media->count() }} dosya</td>
                                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                                    <code>{{ $content->layout }}</code>
                                </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.contents.show', [$site, $content]) }}" class="text-blue-600 hover:text-blue-900 mr-4">Görüntüle</a>
                                    @if(auth()->user()->isAdmin())
                                    <a href="{{ route('sites.contents.edit', [$site, $content]) }}" class="text-indigo-600 hover:text-indigo-900 mr-4">Düzenle</a>
                                    <form action="{{ route('sites.contents.destroy', [$site, $content]) }}" method="POST" class="inline" onsubmit="return confirm('Bu içeriği silmek istediğinizden emin misiniz?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="text-red-600 hover:text-red-900">Sil</button>
                                    </form>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="{{ auth()->user()->isAdmin() ? '7' : '6' }}" class="px-3 py-4 text-center text-sm text-gray-500">
                                    Henüz içerik bulunmamaktadır.
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@if(auth()->user()->isAdmin())
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const selectAllContents = document.getElementById('select-all-contents');
    const selectAllHeader = document.getElementById('select-all-contents-header');
    const contentCheckboxes = document.querySelectorAll('.content-checkbox');
    const bulkPublishBtn = document.getElementById('bulk-publish-btn');
    const publishLanguage = document.getElementById('publish_language');
    const selectedContentCount = document.getElementById('selected-content-count');

    function updateSelectedContentCount() {
        const checked = document.querySelectorAll('.content-checkbox:checked').length;
        selectedContentCount.textContent = `${checked} içerik seçildi`;
        bulkPublishBtn.disabled = checked === 0 || !publishLanguage.value;
    }

    function updateSelectAllContentState() {
        const allChecked = contentCheckboxes.length > 0 && Array.from(contentCheckboxes).every(cb => cb.checked);
        if (selectAllContents) selectAllContents.checked = allChecked;
        if (selectAllHeader) selectAllHeader.checked = allChecked;
    }

    // Tümünü seç/kaldır
    [selectAllContents, selectAllHeader].forEach(checkbox => {
        if (checkbox) {
            checkbox.addEventListener('change', function() {
                contentCheckboxes.forEach(cb => {
                    cb.checked = this.checked;
                });
                updateSelectedContentCount();
            });
        }
    });

    // Her checkbox değiştiğinde
    contentCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            updateSelectedContentCount();
            updateSelectAllContentState();
        });
    });

    // Dil seçimi değiştiğinde
    if (publishLanguage) {
        publishLanguage.addEventListener('change', function() {
            updateSelectedContentCount();
        });
    }

    // Toplu yayınlama
    if (bulkPublishBtn) {
        bulkPublishBtn.addEventListener('click', async function() {
            const checked = document.querySelectorAll('.content-checkbox:checked');
            const contentIds = Array.from(checked).map(cb => cb.value);
            
            if (contentIds.length === 0) {
                alert('Lütfen en az bir içerik seçin.');
                return;
            }

            if (!publishLanguage.value) {
                alert('Lütfen bir dil seçin.');
                return;
            }

            const langNames = {
                'de': 'Almanca',
                'it': 'İtalyanca',
                'es': 'İspanyolca',
                'fr': 'Fransızca',
                'pt': 'Portekizce',
            };

            if (!confirm(`${contentIds.length} içerik ${langNames[publishLanguage.value]} dilinde yayınlanacak. Devam etmek istiyor musunuz?`)) {
                return;
            }

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

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

                const data = await response.json();

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

    // İlk yüklemede sayıyı güncelle
    updateSelectedContentCount();
});
</script>
@endpush
@endif
@endsection