@extends('template')

@section('conteudo')
    <nav class="mb-3" style="font-size:0.82rem;">
        <span class="text-muted">Início</span>
        <span class="text-muted mx-1">/</span>
        <span style="color:var(--primary); font-weight:600;">Organizações</span>
    </nav>

    <div class="d-flex align-items-start justify-content-between mb-4">
        <div class="d-flex align-items-center gap-3">
            <i class="bi bi-building-fill" style="font-size:2rem; color:var(--primary);"></i>
            <div>
                <h4 class="fw-bold mb-0" style="color:var(--primary);">Organizações</h4>
                <span class="text-muted" style="font-size:0.82rem;">Gerencie escolas, agências e pessoas físicas</span>
            </div>
        </div>
        <button class="btn btn-sm rounded-3 btn-outline-castelo" onclick="carregarConteudo('/organizacoes/criar')">
            <i class="bi bi-plus-circle me-1"></i> Novo
        </button>
    </div>

    <div class="card border-0 shadow-sm rounded-4">
        <div class="card-body px-4 pt-4 pb-2">
            <div class="d-flex align-items-center gap-3 mb-4">
                <select id="filtroStatus" class="form-select form-select-sm rounded-3" style="max-width:200px;">
                    <option value="ativo">Ativas</option>
                    <option value="inativo">Inativas</option>
                    <option value="todos">Todas</option>
                </select>
                <div class="input-group input-group-sm flex-grow-1">
                    <span class="input-group-text bg-white border-end-0 rounded-start-3"><i class="bi bi-search text-muted"></i></span>
                    <input type="text" id="filtroBusca" class="form-control border-start-0 rounded-end-3" placeholder="Buscar organização...">
                </div>
            </div>

            <table class="table table-hover align-middle mb-0" style="font-size:0.875rem;">
                <thead>
                    <tr class="text-muted" style="font-size:0.8rem; border-bottom:2px solid #eef1fb;">
                        <th class="fw-semibold py-3">Código</th>
                        <th class="fw-semibold">Tipo</th>
                        <th class="fw-semibold">Nome</th>
                        <th class="fw-semibold">CPF/CNPJ</th>
                        <th class="fw-semibold">Status</th>
                        <th class="fw-semibold text-end">Ações</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($organizacoes as $organizacao)
                        <tr>
                            <td><span class="badge rounded-2 fw-semibold" style="background:var(--primary); font-size:0.72rem;">{{ $organizacao->codigo }}</span></td>
                            <td class="text-muted">{{ $organizacao->tipo->label() }}</td>
                            <td class="fw-medium" style="color:#1a2e5e;">{{ $organizacao->nome_publico ?: $organizacao->nome_razao_social }}</td>
                            <td class="text-muted">{{ $organizacao->cpf_cnpj ?: '-' }}</td>
                            <td>
                                <span class="badge rounded-pill px-3 py-1 fw-semibold" style="background:{{ $organizacao->status->value === 'ativo' ? '#e8f5e9' : '#f5f5f5' }}; color:{{ $organizacao->status->value === 'ativo' ? '#2e7d32' : '#757575' }}; font-size:0.75rem;">
                                    {{ $organizacao->status->label() }}
                                </span>
                            </td>
                            <td class="text-end">
                                <button class="btn btn-sm border-0 p-1" title="Visualizar" onclick="carregarConteudo('/organizacoes/{{ $organizacao->id }}')" style="color:var(--primary);"><i class="bi bi-eye-fill"></i></button>
                                <button class="btn btn-sm border-0 p-1" title="Editar" onclick="carregarConteudo('/organizacoes/{{ $organizacao->id }}/editar')" style="color:#2e7d32;"><i class="bi bi-pencil-fill"></i></button>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="6" class="text-center text-muted py-5"><i class="bi bi-building" style="font-size:2rem; opacity:.3;"></i><p class="mt-2 mb-0" style="font-size:0.85rem;">Nenhuma organização encontrada.</p></td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @include('components.ui.paginacao', ['paginator' => $organizacoes, 'id' => 'paginacao-organizacoes'])
    </div>
@endsection