@extends('template')

@section('conteudo')

    {{-- Breadcrumb --}}
    <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;">Clientes</span>
    </nav>

    {{-- Cabeçalho --}}
    <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-people-fill" style="font-size:2rem; color:var(--primary);"></i>
            <div>
                <h4 class="fw-bold mb-0" style="color:var(--primary);">Clientes</h4>
                <span class="text-muted" style="font-size:0.82rem;">Gerencie seus clientes cadastrados</span>
            </div>
        </div>
        <button class="btn btn-sm rounded-3 btn-outline-castelo"
                onclick="carregarConteudo('/clientes/criar')">
            <i class="bi bi-plus-circle me-1"></i> Novo
        </button>
    </div>

    {{-- Card principal --}}
    <div class="card border-0 shadow-sm rounded-4">
        <div class="card-body px-4 pt-4 pb-2">

            {{-- Filtros --}}
            <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;" onchange="aplicarFiltros()">
                    <option value="ativo"   {{ ($filtros['status'] ?? 'ativo') === 'ativo'   ? 'selected' : '' }}>Ativos</option>
                    <option value="inativo" {{ ($filtros['status'] ?? '') === 'inativo' ? 'selected' : '' }}>Inativos</option>
                    <option value="todos"   {{ ($filtros['status'] ?? '') === 'todos'   ? 'selected' : '' }}>Todos</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 cliente..."
                           value="{{ $filtros['busca'] ?? '' }}"
                           onkeydown="if(event.key==='Enter') aplicarFiltros()">
                </div>
                <button class="btn btn-sm btn-outline-secondary rounded-3" onclick="aplicarFiltros()">
                    <i class="bi bi-funnel"></i>
                </button>
            </div>

            {{-- Tabela --}}
            <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 <i class="bi bi-arrow-down-up ms-1" style="font-size:0.65rem;"></i></th>
                        <th class="fw-semibold">Tipo <i class="bi bi-arrow-down-up ms-1" style="font-size:0.65rem;"></i></th>
                        <th class="fw-semibold">Nome <i class="bi bi-arrow-down-up ms-1" style="font-size:0.65rem;"></i></th>
                        <th class="fw-semibold">CNPJ <i class="bi bi-arrow-down-up ms-1" style="font-size:0.65rem;"></i></th>
                        <th class="fw-semibold">Telefone <i class="bi bi-arrow-down-up ms-1" style="font-size:0.65rem;"></i></th>
                        <th class="fw-semibold">Responsável <i class="bi bi-arrow-down-up ms-1" style="font-size:0.65rem;"></i></th>
                        <th class="fw-semibold">Status <i class="bi bi-arrow-down-up ms-1" style="font-size:0.65rem;"></i></th>
                        <th class="fw-semibold text-end">Ações</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($clientes as $cliente)
                    @php
                        $contPrincipal = $cliente->contatos->first();
                        $tipoLabel     = $cliente->tipo->labelCurto();
                    @endphp
                    <tr>
                        <td>
                            <span class="badge rounded-2 fw-semibold" style="background:var(--primary); font-size:0.72rem; letter-spacing:.02em;">{{ $cliente->codigo }}</span>
                        </td>
                        <td class="text-muted" style="font-size:0.82rem;">{{ $tipoLabel }}</td>
                        <td class="fw-medium" style="color:#1a2e5e;">{{ $cliente->nome }}</td>
                        <td class="text-muted">{{ $cliente->cnpj_formatado ?? '-' }}</td>
                        <td class="text-muted">{{ $cliente->telefone_formatado ?? '-' }}</td>
                        <td class="text-muted">{{ $contPrincipal?->nome ?? '-' }}</td>
                        <td>
                            @if($cliente->isAtivo())
                                <span class="badge rounded-pill px-3 py-1 fw-semibold"
                                      style="background:#e8f5e9; color:#2e7d32; font-size:0.75rem;">Ativo</span>
                            @else
                                <span class="badge rounded-pill px-3 py-1 fw-semibold"
                                      style="background:#f5f5f5; color:#757575; font-size:0.75rem;">Inativo</span>
                            @endif
                        </td>
                        <td class="text-end">
                            <button class="btn btn-sm border-0 p-1" title="Visualizar"
                                    onclick="carregarConteudo('/clientes/{{ $cliente->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('/clientes/{{ $cliente->id }}/editar')"
                                    style="color:#2e7d32;">
                                <i class="bi bi-pencil-fill"></i>
                            </button>
                            @php
                                $qFiltros        = array_filter($filtros);
                                $redirectFiltros = '/clientes' . ($qFiltros ? '?' . http_build_query($qFiltros) : '');
                            @endphp
                            <button class="btn btn-sm border-0 p-1" title="Excluir"
                                    id="btn-excluir-{{ $cliente->id }}"
                                    onclick="confirmarExcluirCliente('/clientes/{{ $cliente->id }}/excluir', '{{ addslashes($cliente->nome) }}', '{{ $cliente->status->value }}', '{{ $redirectFiltros }}', 'btn-excluir-{{ $cliente->id }}')" 
                                    style="color:#c62828;">
                                <i class="bi bi-trash-fill"></i>
                            </button>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="text-center text-muted py-5">
                            <i class="bi bi-people" style="font-size:2rem; opacity:.3;"></i>
                            <p class="mt-2 mb-0" style="font-size:0.85rem;">Nenhum cliente encontrado.</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Paginação --}}
        @include('components.ui.paginacao', ['paginator' => $clientes, 'id' => 'paginacao-clientes'])
    </div>

    <script src="{{ asset('js/clientes.js') }}"></script>

@endsection