@extends('layouts.app')

@section('content')
    <div class="panel mb-6">
        {{-- HEADER E BOTÕES DE AÇÃO --}}
        <div class="flex items-center justify-between">
            <h5 class="text-lg font-semibold dark:text-white-light">Detalhes do Evento</h5>
            <div class="flex gap-2">
                <a href="{{ route('eventos.edit', $evento) }}" class="btn btn-outline-warning">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                        xmlns="http://www.w3.org/2000/svg" class="w-5 h-5">
                        <path
                            d="M15.2869 3.15178L14.3601 4.07866L5.83882 12.5999L5.83881 12.5999C5.26166 13.1771 4.97308 13.4656 4.7249 13.7838C4.43213 14.1592 4.18114 14.5653 3.97634 14.995C3.80273 15.3593 3.67368 15.7465 3.41556 16.5208L2.32181 19.8021L2.05445 20.6042C1.92743 20.9852 2.0266 21.4053 2.31063 21.6894C2.59466 21.9734 3.01478 22.0726 3.39584 21.9456L4.19792 21.6782L7.47918 20.5844L7.47919 20.5844C8.25353 20.3263 8.6407 20.1972 9.00498 20.0236C9.43469 19.8188 9.84082 19.5678 10.2162 19.2751C10.5344 19.0269 10.8229 18.7383 11.4001 18.1612L11.4001 18.1612L19.9213 9.63993L20.8482 8.71306C22.3839 7.17735 22.3839 4.68748 20.8482 3.15178C19.3125 1.61607 16.8226 1.61607 15.2869 3.15178Z"
                            stroke="currentColor" stroke-width="1.5" />
                        <path opacity="0.5"
                            d="M14.36 4.07812C14.36 4.07812 14.4759 6.04774 16.2138 7.78564C17.9517 9.52354 19.9213 9.6394 19.9213 9.6394M4.19789 21.6777L2.32178 19.8015"
                            stroke="currentColor" stroke-width="1.5" />
                    </svg>
                    Editar
                </a>
                <a href="{{ route('eventos.index') }}" class="btn btn-outline-primary">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                        xmlns="http://www.w3.org/2000/svg" class="w-5 h-5">
                        <path d="M15 6L9 12L15 18" stroke="currentColor" stroke-width="1.5"
                            stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    Voltar
                </a>
            </div>
        </div>
    </div>

    {{-- ESTATÍSTICAS E DETALHES --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <div class="panel">
            <h6 class="text-lg font-semibold mb-4">Informações do Evento</h6>
            <div class="space-y-3">
                <div>
                    <label class="font-semibold text-gray-700 dark:text-gray-300">Nome:</label>
                    <p class="text-gray-900 dark:text-white">{{ $evento->nome }}</p>
                </div>
                <div>
                    <label class="font-semibold text-gray-700 dark:text-gray-300">Local:</label>
                    <p class="text-gray-900 dark:text-white">{{ $evento->local }}</p>
                </div>
                <div>
                    <label class="font-semibold text-gray-700 dark:text-gray-300">Proponente:</label>
                    <p class="text-gray-900 dark:text-white">{{ $evento->proponente }}</p>
                </div>
                <div>
                    <label class="font-semibold text-gray-700 dark:text-gray-300">Data e Hora:</label>
                    <p class="text-gray-900 dark:text-white">
                        {{ $evento->data_evento->format('d/m/Y H:i') }}</p>
                </div>
                <div>
                    <label class="font-semibold text-gray-700 dark:text-gray-300">Quantidade de
                        Pessoas:</label>
                    <p class="text-gray-900 dark:text-white">{{ $evento->quantidade_pessoas }}</p>
                </div>
            </div>
        </div>

        <div class="panel">
            <h6 class="text-lg font-semibold mb-4">Estatísticas</h6>
            @php
                $totalParticipantes = $participantes->count();
                $confirmados = $participantes->where('utilizado', 1)->count();
                $pendentes = $participantes->where('utilizado', 0)->count();
                $taxaOcupacao = max($evento->quantidade_pessoas, 1) > 0 ? ($confirmados / max($evento->quantidade_pessoas, 1)) * 100 : 0;
            @endphp

            <div class="grid grid-cols-2 gap-4">
                <div class="bg-primary-light p-4 rounded-lg">
                    <div class="text-2xl font-bold text-primary">{{ $totalParticipantes }}</div>
                    <div class="text-sm text-gray-600">Total de Participantes</div>
                </div>
                <div class="bg-success-light p-4 rounded-lg">
                    <div class="text-2xl font-bold text-success">
                        {{ $confirmados }}</div>
                    <div class="text-sm text-gray-600">Participantes Confirmados</div>
                </div>
                <div class="bg-warning-light p-4 rounded-lg">
                    <div class="text-2xl font-bold text-warning">
                        {{ $pendentes }}</div>
                    <div class="text-sm text-gray-600">Aguardando Confirmação</div>
                </div>
                <div class="bg-info-light p-4 rounded-lg">
                    <div class="text-2xl font-bold text-info">
                        {{ number_format($taxaOcupacao, 1) }}%
                    </div>
                    <div class="text-sm text-gray-600">Taxa de Ocupação</div>
                </div>
            </div>
        </div>
    </div>

    {{-- LISTA DE PARTICIPANTES --}}
    <div class="panel">
        <h6 class="text-lg font-semibold mb-4">Lista de Participantes</h6>

        {{-- CAMPO DE BUSCA SIMPLES (Keyup Filter) --}}
        <div class="mb-5">
            <input type="text" id="participanteSearch" placeholder="Pesquisar por nome, email, CPF..."
                class="form-input w-full" onkeyup="filterParticipants(this.value)">
        </div>

        @if ($participantes->count() > 0)
            <div class="table-responsive">
                <table class="table-hover whitespace-nowrap dataTable-table" id="participantes-show-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Nome</th>
                            <th>Email</th>
                            <th>Telefone</th>
                            <th>CPF</th>
                            <th>Status</th>
                            <th>Data de Confirmação</th>
                        </tr>
                    </thead>
                    <tbody id="participantes-body">
                        @foreach ($participantes as $participante)
                            <tr>
                                <td>{{ $participante->id }}</td>
                                <td>{{ $participante->nome }}</td>
                                <td>{!! str_replace('@', '&#8203;@', $participante->email) !!}</td>
                                <td>{{ $participante->telefone }}</td>
                                <td>{{ $participante->cpf }}</td>
                                <td>
                                    @if ($participante->utilizado == 1)
                                        <span class="badge bg-success">Presente</span>
                                    @else
                                        <span class="badge bg-warning">Pendente</span>
                                    @endif
                                </td>
                                <td>
                                    @if ($participante->utilizadoem)
                                        {{ $participante->utilizadoem->format('d/m/Y H:i') }}
                                    @else
                                        <span class="text-gray-500">-</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="text-center py-8">
                <div class="text-gray-500">Nenhum participante cadastrado para este evento</div>
            </div>
        @endif
    </div>
@endsection

@section('styles')
    <style>
        /* Estilos customizados da página (badges, backgrounds, colors) */
        .badge {
            display: inline-flex; align-items: center; padding: 0.25rem 0.5rem; border-radius: 0.375rem;
            font-size: 0.75rem; font-weight: 500; line-height: 1;
        }

        .bg-success { background-color: #00ab55; color: white; }
        .bg-warning { background-color: #e7515a; color: white; } /* Mantido o vermelho para Pendente/Aviso */

        /* Light backgrounds */
        .bg-primary-light { background-color: rgba(67, 97, 238, 0.1); }
        .bg-success-light { background-color: rgba(0, 171, 85, 0.1); }
        .bg-warning-light { background-color: rgba(231, 81, 90, 0.1); }
        .bg-info-light { background-color: rgba(33, 150, 243, 0.1); }

        /* Text colors */
        .text-primary { color: #4361ee; }
        .text-success { color: #00ab55; }
        .text-warning { color: #e7515a; }
        .text-info { color: #2196f3; }

        #participantes-show-table td,
        #participantes-show-table th{
            text-wrap: auto;
        }
    </style>
@endsection

@section('scripts')
    <script>
        /**
         * Filtra a tabela de participantes no lado do cliente, buscando em todas as colunas.
         * @param {string} filterValue - O texto digitado no campo de busca.
         */
        function filterParticipants(filterValue) {
            const searchTerm = filterValue.toLowerCase().trim();
            const tableBody = document.getElementById('participantes-body');

            if (!tableBody) return;

            const rows = tableBody.getElementsByTagName('tr');

            // Itera sobre todas as linhas da tabela
            for (let i = 0; i < rows.length; i++) {
                const row = rows[i];
                const cells = row.getElementsByTagName('td');
                let found = false;

                // Se o campo de busca estiver vazio, mostra a linha
                if (searchTerm === '') {
                    row.style.display = "";
                    continue;
                }

                // Itera sobre todas as células da linha (buscando em todas as colunas)
                for (let j = 0; j < cells.length; j++) {
                    const cell = cells[j];

                    // Pega o texto da célula de forma robusta e converte para minúsculas
                    let cellText = cell.innerText || cell.textContent;
                    cellText = cellText.toLowerCase().trim();

                    // Verifica se o termo está contido no texto da célula
                    if (cellText.includes(searchTerm)) {
                        found = true;
                        break;
                    }
                }

                // Mostra ou Esconde a linha
                row.style.display = found ? "" : "none";
            }
        }
    </script>
@endsection