@extends('layouts.app')

@section('titulo', 'Clientes')
@section('subtitulo', 'Cadastro e histórico de clientes')

@section('acoes')
    @can('clientes.criar')
        <a href="{{ route('clientes.create') }}" class="btn btn-primary btn-sm">+ Novo Cliente</a>
    @endcan
@endsection

@section('conteudo')
<div class="card mb-3">
    <div class="card-body">
        <form method="GET" class="row g-2 align-items-end">
            <div class="col-md-5">
                <label class="form-label small fw-semibold">Buscar</label>
                <input type="text" name="busca" class="form-control form-control-sm" placeholder="Razão social, fantasia ou CPF/CNPJ" value="{{ request('busca') }}">
            </div>
            <div class="col-md-3">
                <label class="form-label small fw-semibold">Situação</label>
                <select name="ativo" class="form-select form-select-sm">
                    <option value="">Todos</option>
                    <option value="1" {{ request('ativo') === '1' ? 'selected' : '' }}>Ativos</option>
                    <option value="0" {{ request('ativo') === '0' ? 'selected' : '' }}>Inativos</option>
                </select>
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-outline-secondary btn-sm w-100">Filtrar</button>
            </div>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-body p-0">
        @if ($clientes->isEmpty())
            <div class="empty-state">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
                <p class="mb-2">Nenhum cliente encontrado.</p>
                @can('clientes.criar')
                    <a href="{{ route('clientes.create') }}" class="btn btn-primary btn-sm">Cadastrar primeiro cliente</a>
                @endcan
            </div>
        @else
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th>Razão Social / Fantasia</th>
                            <th>CPF/CNPJ</th>
                            <th>Cidade/UF</th>
                            <th>Vendedor</th>
                            <th>Tabela de Preço</th>
                            <th>Situação</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($clientes as $cliente)
                            <tr>
                                <td>
                                    <a href="{{ route('clientes.show', $cliente) }}" class="fw-semibold text-decoration-none">
                                        {{ $cliente->nome_fantasia ?: $cliente->razao_social }}
                                    </a>
                                    @if($cliente->nome_fantasia)
                                        <div class="text-muted-sm">{{ $cliente->razao_social }}</div>
                                    @endif
                                </td>
                                <td>{{ $cliente->cpf_cnpj }}</td>
                                <td>{{ $cliente->cidade ? "{$cliente->cidade}/{$cliente->estado}" : '—' }}</td>
                                <td>{{ $cliente->vendedorPadrao?->name ?? '—' }}</td>
                                <td>{{ $cliente->tabelaPreco?->nome ?? '—' }}</td>
                                <td>
                                    <span class="badge-status {{ $cliente->ativo ? 'finalizado' : 'cancelado' }}">
                                        {{ $cliente->ativo ? 'Ativo' : 'Inativo' }}
                                    </span>
                                </td>
                                <td class="text-end">
                                    <a href="{{ route('clientes.show', $cliente) }}" class="btn btn-sm btn-outline-secondary">Ver</a>
                                    @can('clientes.editar')
                                        <a href="{{ route('clientes.edit', $cliente) }}" class="btn btn-sm btn-outline-secondary">Editar</a>
                                    @endcan
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>
</div>

<div class="mt-3">
    {{ $clientes->links() }}
</div>
@endsection