@extends('admin.layout')

@section('header-title', 'Forum Kategorileri')

@section('content')
<style>
    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 32px;
        flex-wrap: wrap;
        gap: 16px;
    }
    .page-title {
        font-size: 24px;
        font-weight: 800;
        color: #1f2937;
    }
    .btn-primary {
        padding: 10px 24px;
        background: #1e40af;
        color: white;
        border: none;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
    }
    .btn-primary:hover {
        background: #1e3a8a;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
        margin-bottom: 24px;
    }
    .stat-card {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    .stat-label {
        font-size: 13px;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 600;
        margin-bottom: 8px;
    }
    .stat-value {
        font-size: 28px;
        font-weight: 700;
        color: #1e40af;
    }

    .table-container {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    table {
        width: 100%;
        border-collapse: collapse;
    }
    thead {
        background: #f9fafb;
        border-bottom: 1px solid #e5e7eb;
    }
    th {
        padding: 12px 16px;
        text-align: left;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #6b7280;
    }
    td {
        padding: 14px 16px;
        border-bottom: 1px solid #f3f4f6;
        font-size: 14px;
        color: #374151;
    }
    tbody tr:hover {
        background: #f9fafb;
    }
    tbody tr:last-child td {
        border-bottom: none;
    }

    .category-name {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 600;
        color: #1f2937;
    }
    .category-icon {
        font-size: 20px;
    }
    .category-desc {
        font-size: 13px;
        color: #6b7280;
    }

    .badge {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 600;
    }
    .badge-success {
        background: #d1fae5;
        color: #065f46;
    }
    .badge-warning {
        background: #fef3c7;
        color: #92400e;
    }

    .actions {
        display: flex;
        gap: 8px;
    }
    .btn-sm {
        padding: 6px 12px;
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        color: #374151;
        text-decoration: none;
        transition: all 0.2s;
    }
    .btn-sm:hover {
        background: #f3f4f6;
    }
    .btn-danger {
        color: #ef4444;
    }
    .btn-danger:hover {
        background: #fee2e2;
        border-color: #fca5a5;
    }

    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: #6b7280;
    }
    .empty-icon {
        font-size: 48px;
        margin-bottom: 16px;
    }
    .empty-text {
        font-size: 15px;
        margin-bottom: 20px;
    }

    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1000;
        align-items: center;
        justify-content: center;
    }
    .modal.active {
        display: flex;
    }
    .modal-content {
        background: white;
        border-radius: 10px;
        padding: 30px;
        max-width: 500px;
        width: 90%;
        box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    }
    .modal-header h2 {
        font-size: 20px;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 20px;
    }
    .form-group {
        margin-bottom: 16px;
    }
    .form-label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #374151;
        margin-bottom: 6px;
    }
    .form-control {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        font-size: 14px;
        font-family: inherit;
        outline: none;
    }
    .form-control:focus {
        border-color: #1e40af;
        box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
    }
    .modal-footer {
        display: flex;
        gap: 12px;
        margin-top: 24px;
    }
    .btn-cancel {
        flex: 1;
        padding: 10px;
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        font-weight: 600;
        cursor: pointer;
    }
    .btn-submit {
        flex: 1;
        padding: 10px;
        background: #1e40af;
        color: white;
        border: none;
        border-radius: 6px;
        font-weight: 600;
        cursor: pointer;
    }
</style>

<div class="page-header">
    <h1 class="page-title">🗂️ Forum Kategorileri</h1>
    <button class="btn-primary" onclick="openModal()">
        <svg style="width:18px;height:18px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
        </svg>
        Yeni Kategori
    </button>
</div>

{{-- Stats --}}
<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-label">Toplam Kategoriler</div>
        <div class="stat-value">{{ $categories->count() }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Toplam Konular</div>
        <div class="stat-value">{{ $totalTopics }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Toplam Mesajlar</div>
        <div class="stat-value">{{ $totalPosts }}</div>
    </div>
</div>

{{-- Categories Table --}}
<div class="table-container">
    @if($categories->count() > 0)
        <table>
            <thead>
                <tr>
                    <th>Kategori</th>
                    <th>Konular</th>
                    <th>Mesajlar</th>
                    <th>Durum</th>
                    <th style="text-align:right;">İşlemler</th>
                </tr>
            </thead>
            <tbody>
                @foreach($categories as $category)
                    <tr>
                        <td>
                            <div class="category-name">
                                <span class="category-icon">{{ $category->icon ?? '💬' }}</span>
                                <div>
                                    <div>{{ $category->name }}</div>
                                    @if($category->description)
                                        <div class="category-desc">{{ Str::limit($category->description, 50) }}</div>
                                    @endif
                                </div>
                            </div>
                        </td>
                        <td>
                            <strong>{{ $category->topics_count ?? 0 }}</strong>
                        </td>
                        <td>
                            <strong>{{ $category->posts_count ?? 0 }}</strong>
                        </td>
                        <td>
                            @if(($category->topics_count ?? 0) > 0)
                                <span class="badge badge-success">Aktif</span>
                            @else
                                <span class="badge badge-warning">Boş</span>
                            @endif
                        </td>
                        <td style="text-align:right;">
                            <div class="actions">
                                <a href="{{ route('admin.forum-categories.edit', $category) }}" class="btn-sm">Düzenle</a>
                                <button class="btn-sm btn-danger" onclick="deleteCategory({{ $category->id }})">Sil</button>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    @else
        <div class="empty-state">
            <div class="empty-icon">📁</div>
            <div class="empty-text">Henüz kategori bulunmamaktadır.</div>
            <button class="btn-primary" onclick="openModal()">İlk Kategoriyi Oluştur</button>
        </div>
    @endif
</div>

{{-- Add/Edit Modal --}}
<div class="modal" id="categoryModal">
    <div class="modal-content">
        <div class="modal-header">
            <h2 id="modalTitle">Yeni Kategori</h2>
        </div>
        <form id="categoryForm" action="{{ route('admin.forum-categories.store') }}" method="POST">
            @csrf
            <input type="hidden" name="method" value="POST" id="formMethod">

            <div class="form-group">
                <label class="form-label" for="name">Kategori Adı *</label>
                <input type="text" id="name" name="name" class="form-control" required maxlength="100"
                    placeholder="Örn: KPSS Hazırlığı">
            </div>

            <div class="form-group">
                <label class="form-label" for="icon">İkon (Emoji) *</label>
                <input type="text" id="icon" name="icon" class="form-control" required maxlength="2"
                    placeholder="💬" value="💬">
            </div>

            <div class="form-group">
                <label class="form-label" for="description">Açıklama</label>
                <textarea id="description" name="description" class="form-control" maxlength="255"
                    placeholder="Kategori açıklaması..." rows="3"></textarea>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn-cancel" onclick="closeModal()">İptal</button>
                <button type="submit" class="btn-submit">Kaydet</button>
            </div>
        </form>
    </div>
</div>

@endsection

@section('scripts')
<script>
function openModal(categoryId = null) {
    const modal = document.getElementById('categoryModal');
    const form = document.getElementById('categoryForm');
    const title = document.getElementById('modalTitle');

    if (categoryId) {
        title.textContent = 'Kategoriyi Düzenle';
        // Form will be pre-filled by the edit page
    } else {
        title.textContent = 'Yeni Kategori';
        form.reset();
        form.action = '{{ route('admin.forum-categories.store') }}';
        document.getElementById('formMethod').value = 'POST';
    }

    modal.classList.add('active');
}

function closeModal() {
    document.getElementById('categoryModal').classList.remove('active');
}

function deleteCategory(id) {
    if (!confirm('Bu kategoriyi silmek istediğinizden emin misiniz?')) return;

    const form = document.createElement('form');
    form.method = 'POST';
    form.action = '{{ route('admin.forum-categories.destroy', '') }}/' + id;
    form.innerHTML = '@csrf<input type="hidden" name="_method" value="DELETE">';
    document.body.appendChild(form);
    form.submit();
}

document.addEventListener('click', function(e) {
    const modal = document.getElementById('categoryModal');
    if (e.target === modal) {
        closeModal();
    }
});
</script>
@endsection
