@extends('layouts.publicador.novo_padrao')

@section('content')
    {{-- Container que imita o .content-wrapper (fundo branco, sombra, padding) usando classes Bootstrap --}}
    <div class="card shadow-sm border-0 my-4 mx-2 mx-md-auto p-2" style="max-width: 1200px;">
        <div class="card-body">

            {{-- Header (Título e subtítulo) --}}
            <div class="mb-4 pb-2 border-bottom">
                <h4 class="mb-0 text-dark font-weight-bold">
                    <i class="fas fa-comments mr-2"></i> Sugestões da Comunidade
                    <small class="text-muted font-weight-normal ml-2">Listagem</small>
                </h4>
            </div>

            {{-- ÁREA DE FILTRO/PESQUISA --}}
            <div class="card border-0 shadow-sm mb-4">
                {{ Form::open(['route' => 'publicador.codigoslegislativos.sugestoes.index', 'method' => 'GET']) }}
                <div class="card-body">
                    {{-- Removida a tag <h5>, simplificando o filtro --}}

                    {{-- form-row para campos lado a lado no desktop, empilhados no mobile --}}
                    <div class="form-row">
                        <div class="col-md-6 mb-3">
                            <label for="codigo_id">Código Legislativo</label>
                            {{-- Usando input-group para adicionar ícone se necessário, mas mantendo o select simples aqui --}}
                            <select name="codigo_id" id="codigo_id" class="form-control">
                                <option value="">Todos os Códigos</option>
                                @foreach ($codigosParaFiltro as $item)
                                    <option value="{{ $item->id }}" {{ request('codigo_id') == $item->id ? 'selected' : '' }}>
                                        {{ $item->titulo }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="termo_geral">Pesquisa Livre (Nome, E-mail, Sugestão)</label>
                            <input type="text" class="form-control" id="termo_geral" name="termo"
                                value="{{ request('termo') }}" placeholder="Digite nome, e-mail ou trecho da sugestão" autocomplete="off">
                        </div>
                    </div>

                    {{-- Botões de Ação --}}
                    <div class="col-12 text-center mt-4">
                        <button type="submit" class="btn btn-primary px-4 mx-2">
                            <i class="fas fa-search mr-2"></i> Pesquisar
                        </button>
                        <a href="{{ route('publicador.codigoslegislativos.sugestoes.index') }}" class="btn btn-secondary px-4 mx-2">
                            <i class="fas fa-eraser mr-2"></i> Limpar
                        </a>
                    </div>
                </div>
                {{ Form::close() }}
            </div>

            {{-- Tabela de Listagem das Sugestões --}}
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white border-bottom d-flex justify-content-between align-items-center">
                    @if (isset($codigo))
                        <h5 class="mb-0 text-dark font-weight-bold">Sugestões para: <span class="text-primary">{{ $codigo->titulo }}</span></h5>
                        <a href="{{ route('publicador.codigoslegislativos.index') }}"
                           class="btn btn-sm btn-outline-secondary">
                            <i class="fas fa-arrow-left mr-1"></i> Voltar aos Códigos
                        </a>
                    @else
                        <h5 class="mb-0 text-dark font-weight-bold">Todas as Sugestões</h5>
                    @endif
                </div>

                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover table-striped mb-0">
                            <thead class="thead-dark">
                                <tr>
                                    <th>Tipo</th>
                                    <th>Nome</th>
                                    <th>E-mail</th>
                                    <th>Código Legislativo</th>
                                    <th class="text-center d-none d-sm-table-cell">Data Envio</th>
                                    {{-- Aplicando a classe de largura no thead e mantendo text-center --}}
                                    <th class="text-center actions-column-width">Ações</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($sugestoes as $sugestao)
                                    <tr>
                                        <td>{{ $sugestao->tipo_sugestor_formatado }}</td>
                                        <td>{{ $sugestao->nome }}</td>
                                        <td class="d-none d-sm-table-cell">{{ $sugestao->email }}</td> {{-- Escondido em mobile --}}
                                        <td>{{ Str::limit($sugestao->codigo->titulo, 30) }}</td>
                                        <td class="text-center d-none d-sm-table-cell">{{ $sugestao->created_at->format('d/m/Y') }}</td>
                                        <td class="text-center" nowrap>
                                            {{-- Grupo de Botões Contíguo para Desktop / Empilhado para Mobile --}}
                                            <div class="btn-group btn-group-sm d-flex flex-column flex-sm-row" role="group" aria-label="Ações">

                                                <a href="{{ route('publicador.codigoslegislativos.sugestoes.show', $sugestao->id) }}"
                                                   class="btn btn-outline-info"
                                                   title="Ver Detalhes">
                                                    <i class="fas fa-eye"></i>
                                                </a>

                                                @can('codigoslegislativos_excluir')
                                                    {{ Form::open(['route' => ['publicador.codigoslegislativos.sugestoes.destroy', $sugestao->id], 'method' => 'DELETE', 'onsubmit' => "return confirm('Tem certeza que deseja EXCLUIR esta sugestão?');", 'class' => 'form-delete d-inline']) }}
                                                        <button type="submit" class="btn btn-outline-danger" title="Excluir">
                                                            <i class="fas fa-trash-alt"></i>
                                                        </button>
                                                    {{ Form::close() }}
                                                @endcan
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="text-center p-4 alert alert-info m-0">
                                            <i class="fas fa-info-circle mr-2"></i> Nenhuma sugestão encontrada.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

                {{-- Paginação --}}
                @if (isset($sugestoes) && $sugestoes->hasPages())
                    <div class="card-footer bg-light border-top d-flex justify-content-center">
                        {{ $sugestoes->appends(request()->query())->links('pagination::bootstrap-4') }}
                    </div>
                @endif
            </div>
        </div>
    </div>

    {{-- CSS Mínimo para ajuste de layout --}}
    <style>
        /* CSS Mínimo para largura da coluna no Desktop */
        @media (min-width: 576px) { /* sm e acima */
            .actions-column-width {
                width: 150px; /* Largura ajustada para o desktop */
            }
        }

        /* Ajuste para botões empilhados no Mobile (blocos arredondados individuais) */
        @media (max-width: 575.98px) { /* abaixo de sm */
            /* Reseta as bordas de grupo do Bootstrap para que cada botão seja arredondado individualmente no mobile */
            .btn-group-sm a.btn,
            .btn-group-sm button.btn,
            .btn-group .form-delete button.btn {
                width: 100%;
                border-radius: .25rem !important; /* Arredondamento normal do botão */
                margin-bottom: 0.25rem; /* Espaçamento entre botões */
                margin-left: 0 !important;
                margin-right: 0 !important;
            }
            /* Remove a margem inferior do último botão/botão do form */
            .btn-group .form-delete button.btn:last-child {
                margin-bottom: 0 !important;
            }
            /* Garante que o formulário de delete não quebre o layout no mobile */
            .btn-group .form-delete {
                display: block !important;
            }
        }
    </style>
@endsection