@php
    $pageTitle = 'Categorias de Notícias';
@endphp

@extends('v2-cms::layouts.app', [
    'title' => $pageTitle,
])

@section('page-breadcrumbs')
    @include('v2-cms::partials.breadcrumb', ['items' => [
        ['label' => 'Publicações'],
        ['label' => 'Notícias'],
        ['label' => 'Categorias'],
    ]])
@endsection

@section('page-actions')
    <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#categoryModal"
            data-mode="create">
        <i class="bi bi-plus-circle me-1"></i> Nova Categoria
    </button>
@endsection

@section('content')
    @if($categories->count() > 0)
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0" style="min-width: 600px;" aria-label="Categorias">
                <thead class="table-light small text-muted text-uppercase">
                    <tr>
                        <th scope="col" style="width: 40%;">Categoria</th>
                        <th scope="col" style="width: 25%;">URL</th>
                        <th scope="col" style="width: 20%;">Subcategorias</th>
                        <th scope="col" style="width: 15%;" class="text-end">Ações</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($categories as $cat)
                    <tr>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                @if($cat->is_system)
                                    <i class="bi bi-lock text-muted" title="Categoria do sistema"></i>
                                @else
                                    <i class="bi bi-tag text-primary"></i>
                                @endif
                                <div>
                                    <span class="fw-medium">{{ $cat->name }}</span>
                                    @if($cat->is_system)
                                        <span class="badge bg-secondary bg-opacity-10 text-secondary ms-1"
                                              style="font-size: var(--text-xs);">sistema</span>
                                    @endif
                                    @if($cat->parent)
                                        <div class="text-muted" style="font-size: var(--text-xs);">
                                            <i class="bi bi-substack me-1"></i> Sub de {{ $cat->parent->name }}
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </td>
                        <td>
                            <code class="text-muted small">/{{ $cat->slug }}</code>
                        </td>
                        <td>
                            @if($cat->children->count() > 0)
                                <div class="d-flex flex-wrap gap-1">
                                    @foreach($cat->children as $child)
                                        <span class="badge bg-light text-dark border">{{ $child->name }}</span>
                                    @endforeach
                                </div>
                            @else
                                <span class="text-muted small">—</span>
                            @endif
                        </td>
                        <td class="text-end">
                            @if(!$cat->is_system)
                                <div class="d-flex gap-1 justify-content-end">
                                    <button type="button" class="btn btn-sm btn-outline-secondary"
                                            data-bs-toggle="modal" data-bs-target="#categoryModal"
                                            data-mode="edit" data-id="{{ $cat->id }}"
                                            data-name="{{ $cat->name }}" data-parent="{{ $cat->parent_id }}"
                                            title="Editar">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-danger"
                                            onclick="confirmDelete('{{ addslashes($cat->name) }}', 'del-cat-{{ $cat->id }}')"
                                            title="Remover">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                    <form id="del-cat-{{ $cat->id }}" method="POST"
                                          action="{{ route('v2.noticias.cms.categories.destroy', ['id' => $cat->id]) }}"
                                          class="d-none">
                                        {{ csrf_field() }}
                                        {{ method_field('DELETE') }}
                                    </form>
                                </div>
                            @else
                                <span class="text-muted small">—</span>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @else
        <div class="text-center py-5">
            <i class="bi bi-tags d-block mb-3" style="font-size: 3rem; color: var(--bs-secondary-color);"></i>
            <h2 class="h5 fw-bold text-muted">Nenhuma categoria</h2>
            <p class="text-muted mb-4">Crie a primeira categoria para organizar as notícias.</p>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#categoryModal"
                    data-mode="create">
                <i class="bi bi-plus-circle me-1"></i> Criar Categoria
            </button>
        </div>
    @endif

    {{-- Modal Criar/Editar Categoria --}}
    <div class="modal fade" id="categoryModal" tabindex="-1" role="dialog" aria-labelledby="categoryModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <form id="categoryForm" method="POST"
                      action="{{ route('v2.noticias.cms.categories.store') }}">
                    {{ csrf_field() }}
                    <input type="hidden" name="_method" value="POST" id="categoryFormMethod">
                    <input type="hidden" name="edit_id" id="categoryEditId">
                    <div class="modal-header">
                        <h5 class="modal-title" id="categoryModalLabel">
                            <i class="bi bi-tag me-1"></i>
                            <span id="categoryModalTitle">Nova Categoria</span>
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="categoryName" class="form-label fw-semibold">Nome</label>
                            <input type="text" id="categoryName" name="name" class="form-control" required
                                   maxlength="100" placeholder="Ex: Regionais Sudeste">
                        </div>
                        <div class="mb-3">
                            <label for="categoryParent" class="form-label fw-semibold">Subcategoria de</label>
                            <select id="categoryParent" name="parent_id" class="form-select">
                                <option value="">— Categoria raiz —</option>
                                @foreach($categories as $cat)
                                    <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-lg me-1"></i> Salvar
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
(function() {
    'use strict';
    var categoryModal = document.getElementById('categoryModal');
    if (!categoryModal) return;

    var modalTitle = document.getElementById('categoryModalTitle');
    var form = document.getElementById('categoryForm');
    var methodInput = document.getElementById('categoryFormMethod');
    var nameInput = document.getElementById('categoryName');
    var parentSelect = document.getElementById('categoryParent');

    categoryModal.addEventListener('show.bs.modal', function(event) {
        var btn = event.relatedTarget;
        var mode = btn.getAttribute('data-mode');
        if (mode === 'edit') {
            modalTitle.textContent = 'Editar Categoria';
            methodInput.value = 'PUT';
            form.action = '{{ route('v2.noticias.cms.categories.update', ['id' => 'CAT_ID']) }}'
                .replace('CAT_ID', btn.getAttribute('data-id'));
            nameInput.value = btn.getAttribute('data-name');
            parentSelect.value = btn.getAttribute('data-parent') || '';
        } else {
            modalTitle.textContent = 'Nova Categoria';
            methodInput.value = 'POST';
            form.action = '{{ route('v2.noticias.cms.categories.store') }}';
            form.reset();
        }
    });
})();

function confirmDelete(name, formId) {
    if (confirm('Remover categoria "' + name + '"?')) {
        document.getElementById(formId).submit();
    }
}
</script>
@endpush