@extends('layouts.app')

@section('title', $site->name . ' - WordPress Sayfaları')

@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 }} - WordPress Sayfaları</h1>
                    <p class="mt-2 text-sm text-gray-700">
                        WordPress'ten çekilen aktif sayfalar
                    </p>
                </div>
            </div>
        </div>
        <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none flex gap-2">
            <a href="{{ route('sites.wordpress-pages.index', $site) }}" 
               class="inline-flex items-center gap-2 rounded-md bg-gray-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 transition-colors"
               title="Sayfa listesini yenile">
                <i class="fas fa-sync-alt"></i> Yenile
            </a>
            @if(!empty($wpPages) && count($wpPages) > 0 && $sites->count() > 0)
            <button onclick="openBulkTransferModal()" 
               class="inline-flex items-center gap-2 rounded-md bg-purple-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-purple-500 transition-colors">
                <i class="fas fa-exchange-alt"></i> Toplu Transfer
            </button>
            @endif
        </div>
    </div>

    @if(session('success'))
        <div class="mt-4 p-4 bg-green-50 border border-green-200 rounded-md">
            <p class="text-sm text-green-800">{{ session('success') }}</p>
        </div>
    @endif

    @if(session('error'))
        <div class="mt-4 p-4 bg-red-50 border border-red-200 rounded-md">
            <p class="text-sm text-red-800">{{ session('error') }}</p>
            @if(session('transfer_errors'))
                <ul class="mt-2 list-disc list-inside text-sm text-red-700">
                    @foreach(session('transfer_errors') as $error)
                        <li>Sayfa ID {{ $error['page_id'] }}: {{ $error['error'] }}</li>
                    @endforeach
                </ul>
            @endif
        </div>
    @endif

    @if($wpPagesError)
    <div class="mt-8 bg-red-50 border border-red-200 rounded-lg p-6">
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fas fa-exclamation-circle text-red-400"></i>
            </div>
            <div class="ml-3">
                <h3 class="text-sm font-medium text-red-800">Hata</h3>
                <div class="mt-2 text-sm text-red-700">
                    <p>{{ $wpPagesError }}</p>
                </div>
            </div>
        </div>
    </div>
    @elseif(empty($wpPages) || count($wpPages) === 0)
    <div class="mt-8 bg-yellow-50 border border-yellow-200 rounded-lg p-6">
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fas fa-info-circle text-yellow-400"></i>
            </div>
            <div class="ml-3">
                <h3 class="text-sm font-medium text-yellow-800">Sayfa Bulunamadı</h3>
                <div class="mt-2 text-sm text-yellow-700">
                    <p>WordPress sitesinde aktif sayfa bulunamadı.</p>
                </div>
            </div>
        </div>
    </div>
    @else
    <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>
                                <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">
                                    @if($sites->count() > 0)
                                    <input type="checkbox" id="selectAllPages" onchange="toggleAllPages(this)" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
                                    @endif
                                    Başlık
                                </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">Oluşturulma</th>
                                <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Güncelleme</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">
                            @foreach($wpPages as $page)
                            @php
                                $pageId = $page['id'] ?? $page['ID'] ?? null;
                                $title = $page['title'] ?? $page['title']['rendered'] ?? 'Başlıksız';
                                $status = $page['status'] ?? 'unknown';
                                $dateCreated = isset($page['date']) ? \Carbon\Carbon::parse($page['date'])->format('d.m.Y H:i') : '-';
                                $dateModified = isset($page['modified']) ? \Carbon\Carbon::parse($page['modified'])->format('d.m.Y H:i') : '-';
                                $pageUrl = $page['link'] ?? $page['url'] ?? null;
                            @endphp
                            @if($pageId)
                            <tr>
                                <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
                                    <div class="flex items-center gap-2">
                                        @if($sites->count() > 0)
                                        <input type="checkbox" name="page_ids[]" value="{{ $pageId }}" class="page-checkbox rounded border-gray-300 text-purple-600 focus:ring-purple-500" onchange="updateSelectedCount()">
                                        @endif
                                        <div class="flex flex-col">
                                            <span>{{ $title }}</span>
                                            @if($pageUrl)
                                            <a href="{{ $pageUrl }}" target="_blank" rel="noopener noreferrer" 
                                               class="text-xs text-blue-600 hover:text-blue-800 hover:underline mt-1 flex items-center gap-1">
                                                <i class="fas fa-external-link-alt"></i>
                                                <span class="truncate max-w-xs">{{ $pageUrl }}</span>
                                            </a>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                                    @php
                                        $statusColors = [
                                            'publish' => 'bg-green-100 text-green-800',
                                            'draft' => 'bg-yellow-100 text-yellow-800',
                                            'pending' => 'bg-orange-100 text-orange-800',
                                            'private' => 'bg-purple-100 text-purple-800',
                                            'trash' => 'bg-red-100 text-red-800',
                                        ];
                                        $statusColor = $statusColors[$status] ?? 'bg-gray-100 text-gray-800';
                                    @endphp
                                    <span class="px-2 py-1 text-xs rounded-full {{ $statusColor }}">
                                        {{ $status }}
                                    </span>
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ $dateCreated }}</td>
                                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ $dateModified }}</td>
                                <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
                                    @if($sites->count() > 0)
                                    <button onclick="openTransferModal({{ $pageId }}, '{{ addslashes($title) }}')" 
                                        class="text-purple-600 hover:text-purple-900 mr-3" title="Siteye Transfer Et">
                                        <i class="fas fa-exchange-alt"></i>
                                    </button>
                                    @endif
                                </td>
                            </tr>
                            @endif
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>

<!-- Transfer Modal (Tekli) -->
@if($sites->count() > 0)
<div id="transferModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" onclick="closeTransferModal()"></div>
        
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <form id="transferForm" method="POST">
                @csrf
                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <div class="sm:flex sm:items-start">
                        <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-purple-100 sm:mx-0 sm:h-10 sm:w-10">
                            <i class="fas fa-exchange-alt text-purple-600"></i>
                        </div>
                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Sayfayı Siteye Transfer Et
                            </h3>
                            <div class="mt-4">
                                <p class="text-sm text-gray-500 mb-4" id="transferPageName"></p>
                                <div>
                                    <label for="transfer_target_site_id" class="block text-sm font-medium text-gray-700 mb-2">
                                        Hedef Site
                                    </label>
                                    <select name="target_site_id" id="transfer_target_site_id" required
                                        class="block w-full rounded-md border-0 px-4 py-2.5 text-sm text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-purple-600">
                                        <option value="">Site seçin...</option>
                                        @foreach($sites as $targetSite)
                                            <option value="{{ $targetSite->id }}">{{ $targetSite->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                    <button type="submit" 
                        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-purple-600 text-base font-medium text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:ml-3 sm:w-auto sm:text-sm">
                        Transfer Et
                    </button>
                    <button type="button" onclick="closeTransferModal()"
                        class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                        İptal
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Transfer Modal (Toplu) -->
<div id="bulkTransferModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" onclick="closeBulkTransferModal()"></div>
        
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <form id="bulkTransferForm" method="POST" action="{{ route('sites.wordpress-pages.transfer-multiple-to-site', $site) }}">
                @csrf
                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <div class="sm:flex sm:items-start">
                        <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-purple-100 sm:mx-0 sm:h-10 sm:w-10">
                            <i class="fas fa-exchange-alt text-purple-600"></i>
                        </div>
                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                            <h3 class="text-lg leading-6 font-medium text-gray-900">
                                Toplu Sayfa Transferi
                            </h3>
                            <div class="mt-4">
                                <p class="text-sm text-gray-500 mb-2">
                                    Seçili sayfalar: <span id="selectedCount" class="font-semibold">0</span>
                                </p>
                                <div>
                                    <label for="bulk_transfer_target_site_id" class="block text-sm font-medium text-gray-700 mb-2">
                                        Hedef Site
                                    </label>
                                    <select name="target_site_id" id="bulk_transfer_target_site_id" required
                                        class="block w-full rounded-md border-0 px-4 py-2.5 text-sm text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-purple-600">
                                        <option value="">Site seçin...</option>
                                        @foreach($sites as $targetSite)
                                            <option value="{{ $targetSite->id }}">{{ $targetSite->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                    <button type="submit" 
                        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-purple-600 text-base font-medium text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:ml-3 sm:w-auto sm:text-sm">
                        Transfer Et
                    </button>
                    <button type="button" onclick="closeBulkTransferModal()"
                        class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                        İptal
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
let currentPageId = null;

function openTransferModal(pageId, pageName) {
    currentPageId = pageId;
    document.getElementById('transferPageName').textContent = 'Sayfa: ' + pageName;
    document.getElementById('transferForm').action = `{{ route('sites.wordpress-pages.transfer-to-site', [$site, ':pageId']) }}`.replace(':pageId', pageId);
    document.getElementById('transferModal').classList.remove('hidden');
}

function closeTransferModal() {
    document.getElementById('transferModal').classList.add('hidden');
    currentPageId = null;
    document.getElementById('transferForm').reset();
}

function openBulkTransferModal() {
    const selectedCount = document.querySelectorAll('.page-checkbox:checked').length;
    if (selectedCount === 0) {
        alert('Lütfen en az bir sayfa seçin.');
        return;
    }
    document.getElementById('bulkTransferModal').classList.remove('hidden');
    updateSelectedCount();
}

function closeBulkTransferModal() {
    document.getElementById('bulkTransferModal').classList.add('hidden');
}

function toggleAllPages(checkbox) {
    document.querySelectorAll('.page-checkbox').forEach(cb => {
        cb.checked = checkbox.checked;
    });
    updateSelectedCount();
}

function updateSelectedCount() {
    const selected = document.querySelectorAll('.page-checkbox:checked').length;
    document.getElementById('selectedCount').textContent = selected;
    
    // Toplu transfer formuna seçili sayfa ID'lerini ekle
    const form = document.getElementById('bulkTransferForm');
    // Mevcut hidden input'ları temizle
    form.querySelectorAll('input[name="page_ids[]"]').forEach(input => input.remove());
    
    // Seçili sayfa ID'lerini ekle
    document.querySelectorAll('.page-checkbox:checked').forEach(checkbox => {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'page_ids[]';
        input.value = checkbox.value;
        form.appendChild(input);
    });
}
</script>
@endif
@endsection