@extends('layouts.app')

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

            <form action="{{ route('conferencia.index') }}" method="GET" class="mb-6">
                <div class="flex items-center space-x-4">
                    <div class="flex-grow">
                        <label for="event_selector" class="block text-sm font-medium text-gray-700 dark:text-white-light/70">
                            Selecione o Evento:
                        </label>
                        <select id="event_selector" name="event_id" class="form-select w-full" onchange="this.form.submit()">

                            <option value="">-- Selecionar --</option>

                            {{-- **NOTA**: Você deve passar $eventos do seu Controller --}}
                            @if (isset($eventos))
                                @foreach ($eventos as $evento)
                                    <option value="{{ $evento->id }}"
                                        {{-- Usa $selectedEventId, que será definido no Controller --}}
                                        @if(isset($selectedEventId) && $selectedEventId == $evento->id) selected @endif
                                    >
                                        {{ $evento->nome }}
                                    </option>
                                @endforeach
                            @endif

                        </select>
                    </div>

                    <button type="submit" class="btn btn-primary mt-6 hidden">
                        Aplicar
                    </button>

                    {{-- O submit automático via onchange torna o botão desnecessário, mas o mantemos por acessibilidade --}}
                </div>
            </form>

            @if (isset($selectedEventId))
                <div class="row actions flex items-center justify-start gap-4">
                    <div>
                        <button type="button" class="btn btn-success"
                            id="abriscanerbtn">Abrir Scanner</button>
                    </div>

                    {{-- 2. CAMPO DE PESQUISA --}}
                    <div class="mb-0 flex-grow"> {{-- Usando flex-grow para ocupar espaço restante --}}
                        <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]">
                                @</div>
                            <input type="text" id="search" placeholder="Pesquisar"
                                class="form-input ltr:rounded-l-none rtl:rounded-r-none" />
                        </div>
                    </div>
                </div>

                <div class="table-responsive">
                    <table id="myTable" class="table-hover whitespace-nowrap dataTable-table">
                        <thead>
                            <tr>
                                <th>foto</th>
                                <th>ID</th>
                                <th>Nome</th>
                                <th>Email</th>
                                <th>Telefone</th>
                                <th>CPF</th>
                                <th>RG</th>
                                <th>Voucher</th>
                                <th>Utilizado</th>
                                <th>Data de Utilização</th>
                            </tr>
                        </thead>
                        <tbody id="listadeparticipantes">
                            @include('participantes._tabela_linhas', [
                                'participantes' => $participantes,
                                'showEventColumn' => false
                            ])
                        </tbody>
                    </table>
                </div>
            @else
                {{-- Mensagem se nenhum evento estiver selecionado --}}
                <div class="p-4 mt-8 text-center bg-info-light border border-info text-info rounded dark:bg-[#1b2e4b]">
                    Selecione um evento acima para carregar os participantes, o scanner e a busca.
                </div>
            @endif

        </div>
    </div>
@endsection

{{-- Estilos específicos da view se houverem, adicionando um `@section('styles')` --}}
@section('styles')
    <style>
        /* Classes Tailwind simuladas para o Alerta de Status */
        .bg-yellow-100 { background-color: #fef3c7 !important; }
        .text-yellow-800 { color: #92400e !important; }
        .border-yellow-500 { border-color: #f59e0b !important; }

        .bg-red-100 { background-color: #fee2e2 !important; }
        .text-red-800 { color: #991b1b !important; }
        .border-red-500 { border-color: #ef4444 !important; }

        /* Classes de layout/formato */
        .p-4 { padding: 1rem !important; }
        .mb-4 { margin-bottom: 1rem !important; }
        .rounded-lg { border-radius: 0.5rem !important; }
        .border-4 { border-width: 4px !important; }
        .text-center { text-align: center !important; }
        .font-extrabold { font-weight: 800 !important; }
        .text-2xl { font-size: 1.5rem !important; } /* Aprox. 24px */
        .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important; }

        #myTable td:nth-child(3),
        #myTable td:nth-child(4),
        #myTable th:nth-child(10),
        #myTable td:nth-child(10){
            text-wrap: auto;
        }
    </style>
@endsection

{{-- Scripts específicos da view se houverem, adicionando um `@section('scripts')` (precisaria adaptar o app.blade.php para incluir essa seção) --}}