@extends('admin.layout')

@section('header-title', 'Blog Yorumları')

@section('content')
<style>
    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 32px;
        flex-wrap: wrap;
        gap: 16px;
    }
    .page-title {
        font-size: 24px;
        font-weight: 800;
        color: #1f2937;
    }
    .page-subtitle {
        font-size: 14px;
        color: #6b7280;
        margin-top: 4px;
    }

    .card {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    .card-header {
        background: #f9fafb;
        border-bottom: 1px solid #e5e7eb;
        padding: 20px;
    }
    .card-title {
        font-size: 18px;
        font-weight: 700;
        color: #1f2937;
        margin: 0;
    }
    .card-body {
        padding: 20px;
    }

    .flash-msg {
        padding: 16px;
        border-radius: 8px;
        margin-bottom: 20px;
        font-size: 14px;
    }
    .flash-success {
        background: #d1fae5;
        border: 1px solid #10b981;
        color: #065f46;
    }

    .filter-buttons {
        display: flex;
        gap: 8px;
    }
    .filter-btn {
        padding: 8px 16px;
        border-radius: 6px;
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        transition: all 0.2s;
    }
    .filter-btn-warning {
        background: #fef3c7;
        color: #d97706;
    }
    .filter-btn-success {
        background: #d1fae5;
        color: #059669;
    }
    .filter-btn:hover {
        opacity: 0.8;
    }

    .bulk-actions {
        display: flex;
        gap: 8px;
        margin-bottom: 16px;
    }
    .btn {
        padding: 8px 16px;
        border: none;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
    }
    .btn-success {
        background: #10b981;
        color: white;
    }
    .btn-success:hover {
        background: #059669;
    }
    .btn-danger {
        background: #ef4444;
        color: white;
    }
    .btn-danger:hover {
        background: #dc2626;
    }

    .table {
        width: 100%;
        border-collapse: collapse;
    }
    .table thead {
        background: #f9fafb;
        border-bottom: 2px solid #e5e7eb;
    }
    .table thead th {
        padding: 16px;
        text-align: left;
        font-size: 12px;
        font-weight: 600;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .table thead th:last-child {
        text-align: right;
    }
    .table tbody td {
        padding: 16px;
        border-bottom: 1px solid #e5e7eb;
        font-size: 14px;
        color: #374151;
    }
    .table tbody tr:hover {
        background: #f9fafb;
    }
    .table tbody tr:last-child td {
        border-bottom: none;
    }

    .author-name {
        font-weight: 500;
        color: #1f2937;
        margin-bottom: 4px;
    }
    .author-email {
        font-size: 12px;
        color: #9ca3af;
    }
    .comment-preview {
        font-size: 14px;
        color: #4b5563;
        max-width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .post-link {
        color: #1e40af;
        text-decoration: none;
        font-weight: 500;
        font-size: 14px;
    }
    .post-link:hover {
        text-decoration: underline;
    }

    .badge {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 500;
    }
    .badge-green {
        background: #d1fae5;
        color: #059669;
    }
    .badge-yellow {
        background: #fef3c7;
        color: #d97706;
    }

    .action-buttons {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
    }
    .action-btn {
        padding: 6px 12px;
        border-radius: 6px;
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        transition: all 0.2s;
        border: none;
        cursor: pointer;
    }
    .action-btn-primary {
        background: #dbeafe;
        color: #1e40af;
    }
    .action-btn-primary:hover {
        background: #bfdbfe;
    }
    .action-btn-success {
        background: #d1fae5;
        color: #059669;
    }
    .action-btn-success:hover {
        background: #a7f3d0;
    }
    .action-btn-danger {
        background: #fee2e2;
        color: #dc2626;
    }
    .action-btn-danger:hover {
        background: #fecaca;
    }

    .empty-state {
        text-align: center;
        padding: 40px 20px;
        color: #9ca3af;
    }
    .empty-state-text {
        font-size: 16px;
    }

    .pagination {
        margin-top: 24px;
        display: flex;
        justify-content: center;
    }
</style>

<div class="page-header">
    <div>
        <h1 class="page-title">💬 Blog Yorumları</h1>
        <p class="page-subtitle">Tüm yorumları yönetin ve moderasyon yapın</p>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;">
            <h2 class="card-title">Yorumlar</h2>
            <div class="filter-buttons">
                <a href="{{ route('admin.blog-comments.index', ['status' => 'pending']) }}" class="filter-btn filter-btn-warning">
                    ⏳ Bekleyen Yorumlar
                </a>
                <a href="{{ route('admin.blog-comments.index', ['status' => 'approved']) }}" class="filter-btn filter-btn-success">
                    ✓ Onaylanmış
                </a>
            </div>
        </div>
    </div>

    <div class="card-body">
        @if(session('success'))
            <div class="flash-msg flash-success">
                {{ session('success') }}
            </div>
        @endif

        <form method="POST" action="{{ route('admin.blog-comments.bulk_approve') }}" id="bulkForm">
            @csrf
            <div class="bulk-actions">
                <button type="submit" onclick="return confirm('Seçili yorumları onaylamak istediğinizden emin misiniz?');" class="btn btn-success">
                    ✓ Toplu Onayla
                </button>
                <button type="submit" formaction="{{ route('admin.blog-comments.bulk_delete') }}" onclick="return confirm('Seçili yorumları silmek istediğinizden emin misiniz?');" class="btn btn-danger">
                    🗑️ Toplu Sil
                </button>
            </div>
        </form>

        <div style="overflow-x: auto;">
            <table class="table">
                <thead>
                    <tr>
                        <th style="width: 40px;">
                            <input type="checkbox" id="selectAll" onclick="toggleSelectAll()" style="cursor: pointer;">
                        </th>
                        <th>Yazar</th>
                        <th>Yorum</th>
                        <th>Yazı</th>
                        <th>Durum</th>
                        <th>Tarih</th>
                        <th style="text-align: right;">İşlemler</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($comments as $comment)
                        <tr>
                            <td>
                                <input type="checkbox" name="comment_ids[]" value="{{ $comment->id }}" class="comment-checkbox" style="cursor: pointer;">
                            </td>
                            <td>
                                <div class="author-name">{{ $comment->author_name }}</div>
                                <div class="author-email">{{ $comment->author_email }}</div>
                            </td>
                            <td>
                                <div class="comment-preview">
                                    {{ Str::limit(strip_tags($comment->content), 100) }}
                                </div>
                            </td>
                            <td>
                                <a href="{{ route('blog.show', $comment->post) }}" target="_blank" class="post-link">
                                    {{ $comment->post->title }}
                                </a>
                            </td>
                            <td>
                                @if($comment->is_approved)
                                    <span class="badge badge-green">✓ Onaylı</span>
                                @else
                                    <span class="badge badge-yellow">⏳ Bekliyor</span>
                                @endif
                            </td>
                            <td>{{ $comment->created_at->format('d.m.Y H:i') }}</td>
                            <td>
                                <div class="action-buttons">
                                    <a href="{{ route('admin.blog-comments.show', $comment) }}" class="action-btn action-btn-primary">Görüntüle</a>
                                    @if(!$comment->is_approved)
                                        <form method="POST" action="{{ route('admin.blog-comments.approve', $comment) }}" style="display: inline;">
                                            @csrf
                                            <button type="submit" class="action-btn action-btn-success">Onayla</button>
                                        </form>
                                    @endif
                                    <form method="POST" action="{{ route('admin.blog-comments.destroy', $comment) }}" style="display: inline;" onsubmit="return confirm('Bu yorumu silmek istediğinizden emin misiniz?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="action-btn action-btn-danger">Sil</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7">
                                <div class="empty-state">
                                    <div class="empty-state-text">Henüz yorum yok</div>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($comments->hasPages())
            <div class="pagination">
                {{ $comments->appends(request()->query())->links() }}
            </div>
        @endif
    </div>
</div>

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