@extends('layouts.app')

@section('content')
    <div>
        <div class="panel mt-6">
            <h5 class="text-lg font-semibold dark:text-white-light">Pesquisa de Participantes</h5>

            {{-- 1. FORMULÁRIO DE BUSCA CLÁSSICA (GET) --}}
            {{-- Ação: Envia o termo de busca para a mesma rota (listadeparticipantes.index) --}}
            <form action="{{ route('listadeparticipantes.index') }}" method="GET" class="mb-5">
                <div class="flex items-center space-x-2">
                    <div class="flex-grow">
                        <label for="search_input" class="sr-only">Pesquisar</label>
                        <div class="flex">
                            <div
                                class="bg-[#eee] flex justify-center items-center ltr:rounded-l-md rtl:rounded-r-md px-3 font-semibold border ltr:border-r-0 rtl:border-l-0 border-[#e0e6ed] dark:border-[#17263c] dark:bg-[#1b2e4b]">
                                <i class="fa-solid fa-magnifying-glass"></i>
                            </div>
                            <input type="text" id="search_input" name="search" placeholder="Buscar por Nome, CPF ou Voucher..."
                                class="form-input ltr:rounded-l-none rtl:rounded-r-none"
                                value="{{ request('search') }}" /> {{-- Mantém o valor pesquisado --}}
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary h-full self-end">
                        Buscar
                    </button>

                    {{-- Opcional: Botão para limpar a busca --}}
                    @if (request()->has('search'))
                        <a href="{{ route('listadeparticipantes.index') }}" class="btn btn-outline-dark h-full self-end">
                            Limpar
                        </a>
                    @endif
                </div>
            </form>

            <hr class="my-4 dark:border-white-light/10">

            {{-- 2. TABELA DE RESULTADOS --}}
            <div class="table-responsive">
                <table id="myTable" class="table-hover whitespace-nowrap dataTable-table">
                    <thead>
                        <tr>
                            <th>Foto/Doc</th>  {{-- Corresponde ao <td> inicial (Foto/Link) --}}
                            <th>ID</th>
                            <th>Nome</th>
                            <th>Email</th>
                            <th>Telefone</th>
                            <th>CPF</th>
                            <th>RG</th>
                            <th>Voucher</th>
                            <th>Evento</th>    {{-- Exibido porque $showEventColumn é true --}}
                            <th>Utilizado</th>
                            <th>Data Utilização</th>
                        </tr>
                    </thead>
                    <tbody id="listadeparticipantes">
                        @include('participantes._tabela_linhas', [
                            'participantes' => $participantes,
                            'showEventColumn' => true // TRUE: Exibir a coluna Evento
                        ])
                    </tbody>
                </table>
            </div>

            {{-- 3. INCLUDE DAS ESTILOS CUSTOMIZADOS (Mantidos aqui, mas idealmente no CSS principal) --}}
            <style>
                {{-- Aqui você pode manter os estilos específicos da tabela, como .panel.mt-6, a.showdocbtn, .obs, span.yes, etc. --}}

                .panel.mt-6 { overflow: auto; }
                /* [Restante do seu bloco <style> aqui] */
                a.showdocbtn {
                    height: 45px; width: 45px; display: block; background-color: #00ab55;
                    border-radius: 10px; text-align: center; line-height: 45px;
                    color: #ffffff; font-size: 25px;
                }
                span.yes, span.nop { /* ... estilos ... */ }
                /* ... etc. ... */
            </style>

        </div>
    </div>
@endsection