@extends('admin.layout')

@section('header-title', 'Kütüphane Yorumları')

@section('content')
<div class="page-title">
    <h1>Kütüphane Yorumları</h1>
    <p>Tüm yorumları yönetin ve moderasyon yapın</p>
</div>

<div class="info-card">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
        <h2 style="margin: 0; border: none; padding: 0;">Yorumlar</h2>
        <div style="display: flex; gap: 8px;">
            <a href="{{ route('admin.library-comments.index', ['status' => 'pending']) }}" style="padding: 8px 16px; background: rgba(245, 158, 11, 0.1); color: #d97706; border-radius: 6px; text-decoration: none; font-size: 13px; font-weight: 500;">
                Bekleyen Yorumlar
            </a>
            <a href="{{ route('admin.library-comments.index', ['status' => 'approved']) }}" style="padding: 8px 16px; background: rgba(16, 185, 129, 0.1); color: var(--success); border-radius: 6px; text-decoration: none; font-size: 13px; font-weight: 500;">
                Onaylanmış
            </a>
        </div>
    </div>

    @if(session('success'))
        <div style="padding: 16px; background: rgba(16, 185, 129, 0.1); border: 1px solid var(--success); border-radius: 8px; color: var(--success); margin-bottom: 20px; font-size: 14px;">
            {{ session('success') }}
        </div>
    @endif

    {{-- Search/Filter Form --}}
    <form method="GET" action="{{ route('admin.library-comments.index') }}" style="margin-bottom: 16px;">
        <div style="display: flex; gap: 8px; align-items: center; flex-wrap: wrap;">
            <select name="status" class="form-control form-select" style="width: 160px; padding: 8px 12px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 13px;" onchange="this.form.submit()">
                <option value="">Tüm Yorumlar</option>
                <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Bekliyor</option>
                <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>Onaylı</option>
            </select>
            <input type="text" name="search" value="{{ request('search') }}" class="form-control" placeholder="Ara..." style="width: 200px; padding: 8px 12px; border: 1px solid var(--gray-300); border-radius: 6px; font-size: 13px;">
            <button type="submit" style="padding: 8px 16px; background: var(--primary); color: white; border: none; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer;">
                Ara
            </button>
            @if(request('status') || request('search'))
                <a href="{{ route('admin.library-comments.index') }}" style="padding: 8px 16px; background: var(--gray-100); color: var(--gray-700); border-radius: 6px; text-decoration: none; font-size: 13px; font-weight: 500;">
                    Temizle
                </a>
            @endif
        </div>
    </form>

    <form method="POST" action="{{ route('admin.library-comments.bulk_approve') }}" id="bulkForm" style="margin-bottom: 16px;">
        @csrf
        <div style="display: flex; gap: 8px;">
            <button type="submit" onclick="return confirm('Seçili yorumları onaylamak istediğinizden emin misiniz?');" style="padding: 8px 16px; background: var(--success); color: white; border: none; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer;">
                Toplu Onayla
            </button>
            <button type="submit" formaction="{{ route('admin.library-comments.bulk_delete') }}" onclick="return confirm('Seçili yorumları silmek istediğinizden emin misiniz?');" style="padding: 8px 16px; background: var(--danger); color: white; border: none; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer;">
                Toplu Sil
            </button>
        </div>
    </form>

    <div style="overflow-x: auto;">
        <table style="width: 100%; border-collapse: collapse;">
            <thead>
                <tr style="border-bottom: 2px solid var(--gray-200);">
                    <th style="padding: 16px; text-align: left; font-size: 12px; font-weight: 600; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.5px;">
                        <input type="checkbox" id="selectAll" onclick="toggleSelectAll()" style="cursor: pointer;">
                    </th>
                    <th style="padding: 16px; text-align: left; font-size: 12px; font-weight: 600; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.5px;">Yazar</th>
                    <th style="padding: 16px; text-align: left; font-size: 12px; font-weight: 600; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.5px;">Yorum</th>
                    <th style="padding: 16px; text-align: left; font-size: 12px; font-weight: 600; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.5px;">İçerik</th>
                    <th style="padding: 16px; text-align: left; font-size: 12px; font-weight: 600; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.5px;">Durum</th>
                    <th style="padding: 16px; text-align: left; font-size: 12px; font-weight: 600; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.5px;">Tarih</th>
                    <th style="padding: 16px; text-align: right; font-size: 12px; font-weight: 600; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.5px;">İşlemler</th>
                </tr>
            </thead>
            <tbody>
                @forelse($comments as $comment)
                <tr style="border-bottom: 1px solid var(--gray-200); transition: background 0.2s ease;">
                    <td style="padding: 16px;">
                        <input type="checkbox" name="ids[]" value="{{ $comment->id }}" class="comment-checkbox" style="cursor: pointer;">
                    </td>
                    <td style="padding: 16px;">
                        @if($comment->user)
                            <div style="font-weight: 500; color: var(--gray-900); margin-bottom: 4px;">{{ $comment->user->name }}</div>
                            <div style="font-size: 12px; color: var(--gray-500);">{{ $comment->user->email }}</div>
                        @else
                            <div style="font-weight: 500; color: var(--gray-900); margin-bottom: 4px;">{{ $comment->author_name ?? 'Anonim' }}</div>
                            @if($comment->author_email)
                                <div style="font-size: 12px; color: var(--gray-500);">{{ $comment->author_email }}</div>
                            @endif
                        @endif
                    </td>
                    <td style="padding: 16px;">
                        @if($comment->parent_id)
                            <span style="font-size: 11px; color: var(--gray-500); display: block; margin-bottom: 4px;">↩️ Yanıt</span>
                        @endif
                        <div style="font-size: 14px; color: var(--gray-700); max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                            {{ Str::limit($comment->content, 100) }}
                        </div>
                    </td>
                    <td style="padding: 16px;">
                        @if($comment->content_id && $comment->libraryContent)
                            <a href="{{ route('admin.library-contents.edit', $comment->libraryContent) }}" target="_blank" style="color: var(--primary); text-decoration: none; font-weight: 500; font-size: 14px;">
                                {{ Str::limit($comment->libraryContent->title ?? 'İçerik', 40) }}
                            </a>
                        @else
                            <span style="color: var(--gray-500); font-size: 14px;">—</span>
                        @endif
                    </td>
                    <td style="padding: 16px;">
                        @if($comment->is_approved)
                            <span style="display: inline-block; padding: 4px 12px; background: rgba(16, 185, 129, 0.1); color: var(--success); border-radius: 20px; font-size: 12px; font-weight: 500;">Onaylı</span>
                        @else
                            <span style="display: inline-block; padding: 4px 12px; background: rgba(245, 158, 11, 0.1); color: #d97706; border-radius: 20px; font-size: 12px; font-weight: 500;">Bekliyor</span>
                        @endif
                    </td>
                    <td style="padding: 16px; font-size: 14px; color: var(--gray-700);">{{ $comment->created_at->format('d.m.Y H:i') }}</td>
                    <td style="padding: 16px; text-align: right;">
                        <div style="display: flex; gap: 8px; justify-content: flex-end;">
                            <a href="{{ route('admin.library-comments.show', $comment) }}" style="padding: 6px 12px; background: rgba(59, 130, 246, 0.1); color: var(--primary); border-radius: 6px; text-decoration: none; font-size: 13px; font-weight: 500; transition: all 0.2s ease;">Görüntüle</a>
                            @if(!$comment->is_approved)
                                <form method="POST" action="{{ route('admin.library-comments.approve', $comment) }}" style="display: inline;">
                                    @csrf
                                    <button type="submit" style="padding: 6px 12px; background: rgba(16, 185, 129, 0.1); color: var(--success); border: none; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s ease;">Onayla</button>
                                </form>
                            @else
                                <form method="POST" action="{{ route('admin.library-comments.reject', $comment) }}" style="display: inline;">
                                    @csrf
                                    <button type="submit" style="padding: 6px 12px; background: rgba(245, 158, 11, 0.1); color: #d97706; border: none; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s ease;">Geri Al</button>
                                </form>
                            @endif
                            <form method="POST" action="{{ route('admin.library-comments.destroy', $comment) }}" style="display: inline;" onsubmit="return confirm('Bu yorumu silmek istediğinizden emin misiniz?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" style="padding: 6px 12px; background: rgba(239, 68, 68, 0.1); color: var(--danger); border: none; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s ease;">Sil</button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" style="padding: 40px; text-align: center; color: var(--gray-500);">
                        <div style="font-size: 16px;">Henüz yorum yok</div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($comments->hasPages())
        <div style="margin-top: 24px; display: flex; justify-content: center;">
            {{ $comments->withQueryString()->links() }}
        </div>
    @endif
</div>

<script>
function toggleSelectAll() {
    const checkboxes = document.querySelectorAll('.comment-checkbox');
    const selectAll = document.getElementById('selectAll');
    checkboxes.forEach(cb => cb.checked = selectAll.checked);
}
</script>
@endsection
