@extends('layouts.publicador.novo_padrao')

@section('content')
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">

    <div class="participants-page">
        <div class="container-fluid">

            <header class="page-header">
                <div class="header-content">
                    <div class="header-icon">
                        <i class="bi bi-people-fill"></i>
                    </div>
                    <div class="header-text">
                        <h1>Participantes</h1>
                        <p class="event-title-header">{{ Str::limit($model->titulo, 60, '...') }}</p>
                    </div>
                </div>
                <div class="header-actions">
                    <a href="{{ route('publicador.escola.palestras.index') }}" class="btn-back">
                        <i class="bi bi-arrow-left"></i>
                        <span>Voltar</span>
                    </a>
                </div>
            </header>

            @if (session('status-success'))
                <div class="alert-box alert-success" id="alertSuccess">
                    <div class="alert-icon">
                        <i class="bi bi-check-circle-fill"></i>
                    </div>
                    <div class="alert-content">
                        <p>{{ session('status-success') }}</p>
                    </div>
                    <button type="button" class="alert-close" onclick="this.parentElement.remove()">
                        <i class="bi bi-x"></i>
                    </button>
                </div>
            @endif

            @if (session('status-error'))
                <div class="alert-box alert-error" id="alertError">
                    <div class="alert-icon">
                        <i class="bi bi-exclamation-triangle-fill"></i>
                    </div>
                    <div class="alert-content">
                        <p>{{ session('status-error') }}</p>
                    </div>
                    <button type="button" class="alert-close" onclick="this.parentElement.remove()">
                        <i class="bi bi-x"></i>
                    </button>
                </div>
            @endif

            <section class="stats-section">
                <div class="stats-grid">
                    <div class="stat-card stat-total">
                        <div class="stat-icon">
                            <i class="bi bi-people"></i>
                        </div>
                        <div class="stat-content">
                            <span class="stat-number" id="statTotal">{{ $model->participantes->count() }}</span>
                            <span class="stat-label">Total de Inscritos</span>
                        </div>
                    </div>

                    <div class="stat-card stat-presencial">
                        <div class="stat-icon">
                            <i class="bi bi-person-check"></i>
                        </div>
                        <div class="stat-content">
                            <span class="stat-number" id="statPresencial">{{ $model->participantes->where('presenca', 1)->count() }}</span>
                            <span class="stat-label">Presencial</span>
                        </div>
                    </div>

                    <div class="stat-card stat-confirmados">
                        <div class="stat-icon">
                            <i class="bi bi-check-circle"></i>
                        </div>
                        <div class="stat-content">
                            <span class="stat-number" id="statConfirmados">{{ $model->participantes->where('conf_presenca', 1)->count() }}</span>
                            <span class="stat-label">Presença Confirmada</span>
                        </div>
                    </div>

                    <div class="stat-card stat-pendentes">
                        <div class="stat-icon">
                            <i class="bi bi-clock-history"></i>
                        </div>
                        <div class="stat-content">
                            <span class="stat-number" id="statPendentes">{{ $model->participantes->where('conf_presenca', 0)->count() }}</span>
                            <span class="stat-label">Aguardando</span>
                        </div>
                    </div>
                </div>
            </section>

            <section class="filters-section">
                <div class="filters-header" id="filtersToggle">
                    <div class="filters-title">
                        <i class="bi bi-funnel"></i>
                        <span>Filtros de Busca</span>
                    </div>
                    <div class="filters-toggle">
                        <span class="filters-count" id="filtersCount"></span>
                        <i class="bi bi-chevron-down"></i>
                    </div>
                </div>

                <div class="filters-body" id="filtersBody">
                    <div class="filters-grid">
                        <div class="filter-field filter-large">
                            <label class="filter-label">Busca Geral</label>
                            <div class="filter-input-wrapper">
                                <i class="bi bi-search"></i>
                                <input type="text" id="tableSearch" class="filter-input" placeholder="Nome, email, telefone...">
                            </div>
                        </div>

                        <div class="filter-field">
                            <label class="filter-label">Profissão</label>
                            <div class="filter-input-wrapper">
                                <i class="bi bi-briefcase"></i>
                                <select class="filter-input filter-select" id="filterProfissao">
                                    <option value="">Todas</option>
                                    @php
                                        $profissoes = $model->participantes->pluck('profissao')->unique()->filter()->sort();
                                    @endphp
                                    @foreach ($profissoes as $profissao)
                                        <option value="{{ $profissao }}">{{ $profissao }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="filter-field">
                            <label class="filter-label">Cidade</label>
                            <div class="filter-input-wrapper">
                                <i class="bi bi-geo-alt"></i>
                                <select class="filter-input filter-select" id="filterCidade">
                                    <option value="">Todas</option>
                                    @php
                                        $cidades = $model->participantes->pluck('cidade')->unique()->filter()->sort();
                                    @endphp
                                    @foreach ($cidades as $cidade)
                                        <option value="{{ $cidade }}">{{ $cidade }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="filter-field">
                            <label class="filter-label">Status Presença</label>
                            <div class="filter-input-wrapper">
                                <i class="bi bi-person-check"></i>
                                <select class="filter-input filter-select" id="filterPresenca">
                                    <option value="">Todos</option>
                                    <option value="presente">Presentes</option>
                                    <option value="ausente">Ausentes</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="filters-actions">
                        <button type="button" class="btn-clear" id="btnClearFilters">
                            <i class="bi bi-x-lg"></i>
                            <span>Limpar</span>
                        </button>
                    </div>
                </div>
            </section>

            <section class="actions-section">
                <div class="actions-left">
                    <span class="results-count">
                        <strong id="visibleCount">{{ $model->participantes->count() }}</strong> 
                        de {{ $model->participantes->count() }} participantes
                    </span>
                </div>
                <div class="actions-right">
                    <button type="button" class="btn-action btn-import" onclick="importarPresencasXLS()">
                        <i class="bi bi-upload"></i>
                        <span>Importar Presenças</span>
                    </button>
                    <a href="{{ route('publicador.escola.palestras.imprimir', $model->id) }}" target="_blank" class="btn-action btn-print">
                        <i class="bi bi-printer"></i>
                        <span>Imprimir</span>
                    </a>
                    <button type="button" class="btn-action btn-export" onclick="ExportToExcel('xlsx')">
                        <i class="bi bi-file-earmark-excel"></i>
                        <span>Exportar XLS</span>
                    </button>
                </div>
            </section>

            <section class="table-section">
                @if($model->participantes->count() > 0)
                    <div class="table-container">
                        {{ Form::hidden('palestra_id', $model->id) }}
                        <table class="data-table" id="participantestable">
                            <thead>
                                <tr>
                                    <th class="th-name">Nome</th>
                                    <th class="th-contact hide-mobile">Telefone</th>
                                    <th class="th-email">Email</th>
                                    <th class="th-profession">Profissão</th>
                                    <th class="th-city">Cidade</th>
                                    <th class="th-cpf">CPF</th>
                                    <th class="th-date hide-tablet">Cadastro</th>
                                    <th class="th-toggle">Info</th>
                                    <th class="th-toggle">Presencial</th>
                                    <th class="th-toggle">Presença</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($model->participantes as $item)
                                    <tr data-id="{{ $item->id }}">
                                        <td class="td-name">
                                            <a href="{{ route('publicador.escola.palestras.editar_participante', ['id' => $model->id, 'pid' => $item->id]) }}" class="participant-link">
                                                <span class="participant-avatar">{{ strtoupper(substr($item->nome, 0, 1)) }}</span>
                                                <span class="participant-name">{{ $item->nome }}</span>
                                            </a>
                                        </td>
                                        <td class="td-contact hide-mobile">
                                            <span class="contact-phone">{{ $item->telefone ?: '--' }}</span>
                                        </td>
                                        <td class="td-email">
                                            <span class="email-text" title="{{ $item->email }}">{{ Str::limit($item->email, 25, '...') }}</span>
                                        </td>
                                        <td class="td-profession">
                                            <span class="profession-badge">{{ $item->profissao ?: '--' }}</span>
                                        </td>
                                        <td class="td-city">
                                            <span class="city-text">{{ $item->cidade ?: '--' }}</span>
                                            <span class="state-text">{{ $item->estado ? '/ ' . $item->estado : '' }}</span>
                                        </td>
                                        <td class="td-cpf">
                                            <span class="cpf-text">{{ $item->cpf ?? '--' }}</span>
                                        </td>
                                        <td class="td-date hide-tablet">
                                            <span class="date-badge">{{ $item->created_at->format('d/m/Y') }}</span>
                                            <span class="time-text">{{ $item->created_at->format('H:i') }}</span>
                                        </td>
                                        <td class="td-toggle">
                                            <div class="status-indicator {{ $item->aceiteinfo == 1 ? 'status-yes' : 'status-no' }}">
                                                <i class="bi {{ $item->aceiteinfo == 1 ? 'bi-check' : 'bi-x' }}"></i>
                                            </div>
                                        </td>
                                        <td class="td-toggle">
                                            @can('escola_palestras_alterar')
                                                <label class="toggle-switch">
                                                    <input type="checkbox" 
                                                           class="toggle-input js-toggle-presenca" 
                                                           data-id="{{ $item->id }}"
                                                           data-type="presenca"
                                                           {{ $item->presenca == 1 ? 'checked' : '' }}>
                                                    <span class="toggle-slider"></span>
                                                </label>
                                            @else
                                                <div class="status-indicator {{ $item->presenca == 1 ? 'status-yes' : 'status-no' }}">
                                                    <i class="bi {{ $item->presenca == 1 ? 'bi-check' : 'bi-x' }}"></i>
                                                </div>
                                            @endcan
                                        </td>
                                        <td class="td-toggle">
                                            @can('escola_palestras_alterar')
                                                <label class="toggle-switch">
                                                    <input type="checkbox" 
                                                           class="toggle-input js-toggle-conf-presenca" 
                                                           data-id="{{ $item->id }}"
                                                           data-type="conf_presenca"
                                                           {{ $item->conf_presenca == 1 ? 'checked' : '' }}>
                                                    <span class="toggle-slider"></span>
                                                </label>
                                            @else
                                                <div class="status-indicator {{ $item->conf_presenca == 1 ? 'status-yes' : 'status-no' }}">
                                                    <i class="bi {{ $item->conf_presenca == 1 ? 'bi-check' : 'bi-x' }}"></i>
                                                </div>
                                            @endcan
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="empty-state">
                        <div class="empty-icon">
                            <i class="bi bi-person-x"></i>
                        </div>
                        <h3>Nenhum participante inscrito</h3>
                        <p>Este evento ainda não possui inscrições.</p>
                    </div>
                @endif
            </section>
        </div>
    </div>

    <div class="modal-overlay" id="importModal">
        <div class="modal-container modal-import">
            <div class="modal-header">
                <h3><i class="bi bi-file-earmark-check"></i> Relatório de Importação</h3>
                <button type="button" class="modal-close" onclick="closeImportModal()">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>
            <div class="modal-body" id="importModalBody"></div>
            <div class="modal-footer">
                <button type="button" class="btn-modal btn-primary" onclick="closeImportModal()">
                    <i class="bi bi-check"></i> OK
                </button>
            </div>
        </div>
    </div>

    <div class="loading-overlay" id="loadingOverlay">
        <div class="loading-content">
            <div class="loading-spinner"></div>
            <span class="loading-text">Processando...</span>
        </div>
    </div>

    <div class="toast-container" id="toastContainer"></div>

    <style>
        :root {
            --color-primary: #006AA1;
            --color-primary-dark: #005580;
            --color-primary-light: #e8f4f9;
            --color-secondary: #6c757d;
            --color-success: #28a745;
            --color-success-light: #d4edda;
            --color-danger: #dc3545;
            --color-danger-light: #f8d7da;
            --color-warning: #ffc107;
            --color-warning-light: #fff3cd;
            --color-info: #17a2b8;
            --color-info-light: #d1ecf1;
            --color-purple: #6f42c1;
            --color-purple-light: #e9e0f7;
            
            --color-white: #ffffff;
            --color-gray-50: #f8fafc;
            --color-gray-100: #f1f5f9;
            --color-gray-200: #e2e8f0;
            --color-gray-300: #cbd5e1;
            --color-gray-400: #94a3b8;
            --color-gray-500: #64748b;
            --color-gray-600: #475569;
            --color-gray-700: #334155;
            --color-gray-800: #1e293b;
            --color-gray-900: #0f172a;
            
            --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            
            --radius-sm: 6px;
            --radius-md: 8px;
            --radius-lg: 12px;
            --radius-xl: 16px;
            --radius-full: 9999px;
            
            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            
            --transition-fast: 150ms ease;
            --transition-base: 250ms ease;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-family);
            background-color: var(--color-gray-100);
            color: var(--color-gray-800);
            line-height: 1.6;
        }

        .participants-page {
            min-height: 100vh;
            padding: 1.5rem;
        }

        /* Header */
        .page-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--color-white);
            padding: 1.5rem 2rem;
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-md);
            margin-bottom: 1.5rem;
        }

        .header-content {
            display: flex;
            align-items: center;
            gap: 1.25rem;
        }

        .header-icon {
            width: 56px;
            height: 56px;
            background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
            border-radius: var(--radius-lg);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 16px rgba(0, 106, 161, 0.3);
        }

        .header-icon i {
            font-size: 1.75rem;
            color: var(--color-white);
        }

        .header-text h1 {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--color-gray-800);
            margin-bottom: 0.25rem;
        }

        .event-title-header {
            font-size: 0.875rem;
            color: var(--color-gray-500);
            max-width: 400px;
        }

        .btn-back {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.625rem 1.25rem;
            background: var(--color-gray-100);
            color: var(--color-gray-600);
            border-radius: var(--radius-md);
            text-decoration: none;
            font-weight: 500;
            font-size: 0.875rem;
            transition: all var(--transition-base);
        }

        .btn-back:hover {
            background: var(--color-gray-200);
            color: var(--color-gray-800);
            transform: translateX(-4px);
        }

        /* Alerts */
        .alert-box {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem 1.25rem;
            border-radius: var(--radius-lg);
            margin-bottom: 1.5rem;
            animation: slideDown 0.3s ease;
        }

        @keyframes slideDown {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .alert-success {
            background: var(--color-success-light);
            border-left: 4px solid var(--color-success);
        }

        .alert-error {
            background: var(--color-danger-light);
            border-left: 4px solid var(--color-danger);
        }

        .alert-icon {
            font-size: 1.25rem;
        }

        .alert-success .alert-icon { color: var(--color-success); }
        .alert-error .alert-icon { color: var(--color-danger); }

        .alert-content { flex: 1; }
        .alert-content p { margin: 0; font-size: 0.875rem; }

        .alert-close {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            color: var(--color-gray-500);
            cursor: pointer;
            border-radius: var(--radius-md);
            transition: all var(--transition-fast);
        }

        .alert-close:hover {
            background: rgba(0, 0, 0, 0.1);
        }

        /* Stats Section */
        .stats-section {
            margin-bottom: 1.5rem;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
        }

        @media (max-width: 1200px) {
            .stats-grid { grid-template-columns: repeat(2, 1fr); }
        }

        @media (max-width: 576px) {
            .stats-grid { grid-template-columns: 1fr; }
        }

        .stat-card {
            background: var(--color-white);
            border-radius: var(--radius-lg);
            padding: 1.25rem 1.5rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            box-shadow: var(--shadow-md);
            transition: all var(--transition-base);
            border-left: 4px solid transparent;
        }

        .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        .stat-total { border-left-color: var(--color-primary); }
        .stat-presencial { border-left-color: var(--color-info); }
        .stat-confirmados { border-left-color: var(--color-success); }
        .stat-pendentes { border-left-color: var(--color-warning); }

        .stat-icon {
            width: 48px;
            height: 48px;
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
        }

        .stat-total .stat-icon { background: var(--color-primary-light); color: var(--color-primary); }
        .stat-presencial .stat-icon { background: var(--color-info-light); color: var(--color-info); }
        .stat-confirmados .stat-icon { background: var(--color-success-light); color: var(--color-success); }
        .stat-pendentes .stat-icon { background: var(--color-warning-light); color: #d39e00; }

        .stat-content {
            display: flex;
            flex-direction: column;
        }

        .stat-number {
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--color-gray-800);
            line-height: 1;
        }

        .stat-label {
            font-size: 0.8125rem;
            color: var(--color-gray-500);
            margin-top: 0.25rem;
        }

        /* Filters Section */
        .filters-section {
            background: var(--color-white);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-md);
            margin-bottom: 1.5rem;
            overflow: hidden;
        }

        .filters-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.5rem;
            background: var(--color-gray-50);
            cursor: pointer;
            transition: background var(--transition-fast);
        }

        .filters-header:hover {
            background: var(--color-gray-100);
        }

        .filters-title {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-weight: 600;
            color: var(--color-gray-700);
        }

        .filters-title i {
            font-size: 1.125rem;
            color: var(--color-primary);
        }

        .filters-toggle {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .filters-count {
            font-size: 0.75rem;
            padding: 0.25rem 0.75rem;
            background: var(--color-primary);
            color: var(--color-white);
            border-radius: var(--radius-full);
            font-weight: 600;
            display: none;
        }

        .filters-count.show { display: inline-block; }

        .filters-toggle i {
            color: var(--color-gray-400);
            transition: transform var(--transition-base);
        }

        .filters-section.collapsed .filters-toggle i {
            transform: rotate(-90deg);
        }

        .filters-body {
            padding: 1.5rem;
            border-top: 1px solid var(--color-gray-200);
        }

        .filters-section.collapsed .filters-body {
            display: none;
        }

        .filters-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 1rem;
        }

        @media (max-width: 1200px) {
            .filters-grid { grid-template-columns: repeat(2, 1fr); }
            .filter-large { grid-column: span 2; }
        }

        @media (max-width: 768px) {
            .filters-grid { grid-template-columns: 1fr; }
            .filter-large { grid-column: span 1; }
        }

        .filter-field {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .filter-label {
            font-size: 0.8125rem;
            font-weight: 500;
            color: var(--color-gray-600);
        }

        .filter-input-wrapper {
            position: relative;
            display: flex;
            align-items: center;
        }

        .filter-input-wrapper i {
            position: absolute;
            left: 0.875rem;
            color: var(--color-gray-400);
            font-size: 0.875rem;
            pointer-events: none;
        }

        .filter-input {
            width: 100%;
            padding: 0.625rem 0.875rem 0.625rem 2.5rem;
            font-size: 0.875rem;
            color: var(--color-gray-800);
            background: var(--color-white);
            border: 2px solid var(--color-gray-200);
            border-radius: var(--radius-md);
            transition: all var(--transition-fast);
        }

        .filter-input:focus {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px var(--color-primary-light);
        }

        .filter-input::placeholder {
            color: var(--color-gray-400);
        }

        .filter-select {
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            padding-right: 2.5rem;
            cursor: pointer;
        }

        .filters-actions {
            display: flex;
            justify-content: flex-end;
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--color-gray-200);
        }

        .btn-clear {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
            font-weight: 500;
            background: var(--color-white);
            color: var(--color-gray-600);
            border: 2px solid var(--color-gray-300);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .btn-clear:hover {
            background: var(--color-gray-100);
            border-color: var(--color-gray-400);
        }

        /* Actions Section */
        .actions-section {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--color-white);
            padding: 1rem 1.5rem;
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-md);
            margin-bottom: 1.5rem;
        }

        .results-count {
            font-size: 0.875rem;
            color: var(--color-gray-600);
        }

        .results-count strong {
            color: var(--color-gray-800);
        }

        .actions-right {
            display: flex;
            gap: 0.75rem;
        }

        .btn-action {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.625rem 1rem;
            font-size: 0.8125rem;
            font-weight: 500;
            border: none;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all var(--transition-base);
            text-decoration: none;
        }

        .btn-import {
            background: var(--color-purple-light);
            color: var(--color-purple);
        }

        .btn-import:hover {
            background: var(--color-purple);
            color: var(--color-white);
        }

        .btn-print {
            background: var(--color-gray-100);
            color: var(--color-gray-700);
        }

        .btn-print:hover {
            background: var(--color-gray-200);
            color: var(--color-gray-800);
        }

        .btn-export {
            background: var(--color-success);
            color: var(--color-white);
        }

        .btn-export:hover {
            background: #218838;
            box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
        }

        /* Table Section */
        .table-section {
            background: var(--color-white);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-md);
            overflow: hidden;
        }

        .table-container {
            overflow-x: auto;
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
        }

        .data-table th {
            padding: 1rem;
            text-align: left;
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--color-gray-500);
            background: var(--color-gray-50);
            border-bottom: 2px solid var(--color-gray-200);
            white-space: nowrap;
        }

        .data-table td {
            padding: 0.875rem 1rem;
            vertical-align: middle;
            border-bottom: 1px solid var(--color-gray-100);
        }

        .data-table tbody tr {
            transition: background var(--transition-fast);
        }

        .data-table tbody tr:hover {
            background: var(--color-gray-50);
        }

        .th-name { min-width: 200px; }
        .th-email { min-width: 180px; }
        .th-toggle { width: 80px; text-align: center; }

        /* Participant Link */
        .participant-link {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            text-decoration: none;
            color: inherit;
        }

        .participant-link:hover .participant-name {
            color: var(--color-primary);
        }

        .participant-avatar {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
            color: var(--color-white);
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.875rem;
            font-weight: 600;
            flex-shrink: 0;
        }

        .participant-name {
            font-weight: 500;
            color: var(--color-gray-800);
            transition: color var(--transition-fast);
        }

        .contact-phone {
            font-size: 0.8125rem;
            color: var(--color-gray-600);
        }

        .email-text {
            font-size: 0.8125rem;
            color: var(--color-gray-600);
        }

        .profession-badge {
            display: inline-block;
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
            background: var(--color-gray-100);
            color: var(--color-gray-600);
            border-radius: var(--radius-sm);
        }

        .city-text {
            font-size: 0.8125rem;
            color: var(--color-gray-700);
        }

        .state-text {
            font-size: 0.75rem;
            color: var(--color-gray-400);
        }

        .cpf-text {
            font-size: 0.8125rem;
            color: var(--color-gray-600);
            font-family: monospace;
        }

        .td-date {
            text-align: center;
        }

        .date-badge {
            display: block;
            font-size: 0.8125rem;
            font-weight: 500;
            color: var(--color-gray-700);
        }

        .time-text {
            font-size: 0.75rem;
            color: var(--color-gray-400);
        }

        .td-toggle {
            text-align: center;
        }

        /* Status Indicator */
        .status-indicator {
            width: 28px;
            height: 28px;
            border-radius: var(--radius-full);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.875rem;
        }

        .status-yes {
            background: var(--color-success-light);
            color: var(--color-success);
        }

        .status-no {
            background: var(--color-danger-light);
            color: var(--color-danger);
        }

        /* Toggle Switch */
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 44px;
            height: 24px;
        }

        .toggle-input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--color-gray-300);
            border-radius: var(--radius-full);
            transition: all var(--transition-base);
        }

        .toggle-slider::before {
            content: '';
            position: absolute;
            width: 18px;
            height: 18px;
            left: 3px;
            bottom: 3px;
            background: var(--color-white);
            border-radius: 50%;
            transition: all var(--transition-base);
            box-shadow: var(--shadow-sm);
        }

        .toggle-input:checked + .toggle-slider {
            background: var(--color-success);
        }

        .toggle-input:checked + .toggle-slider::before {
            transform: translateX(20px);
        }

        .toggle-input:disabled + .toggle-slider {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Empty State */
        .empty-state {
            padding: 4rem 2rem;
            text-align: center;
        }

        .empty-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 1.5rem;
            background: var(--color-gray-100);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .empty-icon i {
            font-size: 2.5rem;
            color: var(--color-gray-400);
        }

        .empty-state h3 {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--color-gray-700);
            margin-bottom: 0.5rem;
        }

        .empty-state p {
            color: var(--color-gray-500);
        }

        /* Modal */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all var(--transition-base);
        }

        .modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .modal-container {
            background: var(--color-white);
            border-radius: var(--radius-xl);
            width: 90%;
            max-width: 600px;
            max-height: 90vh;
            box-shadow: var(--shadow-lg);
            transform: scale(0.9);
            transition: transform var(--transition-base);
            display: flex;
            flex-direction: column;
        }

        .modal-overlay.active .modal-container {
            transform: scale(1);
        }

        .modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--color-gray-200);
        }

        .modal-header h3 {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--color-gray-800);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .modal-close {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--color-gray-100);
            border: none;
            border-radius: var(--radius-md);
            color: var(--color-gray-500);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .modal-close:hover {
            background: var(--color-gray-200);
            color: var(--color-gray-700);
        }

        .modal-body {
            padding: 1.5rem;
            overflow-y: auto;
        }

        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            padding: 1rem 1.5rem;
            background: var(--color-gray-50);
            border-top: 1px solid var(--color-gray-200);
        }

        .btn-modal {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.625rem 1.25rem;
            font-size: 0.875rem;
            font-weight: 500;
            border: none;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all var(--transition-fast);
        }

        .btn-primary {
            background: var(--color-primary);
            color: var(--color-white);
        }

        .btn-primary:hover {
            background: var(--color-primary-dark);
        }

        /* Import Modal Styles */
        .import-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .import-stat {
            background: var(--color-gray-50);
            padding: 1rem;
            border-radius: var(--radius-md);
            text-align: center;
        }

        .import-stat-number {
            font-size: 1.5rem;
            font-weight: 700;
            display: block;
        }

        .import-stat-label {
            font-size: 0.75rem;
            color: var(--color-gray-500);
        }

        .import-stat.stat-file .import-stat-number { color: var(--color-primary); }
        .import-stat.stat-list .import-stat-number { color: var(--color-info); }
        .import-stat.stat-confirmed .import-stat-number { color: var(--color-success); }

        .import-alert {
            padding: 1rem;
            border-radius: var(--radius-md);
            margin-bottom: 1rem;
        }

        .import-alert-success {
            background: var(--color-success-light);
            color: #155724;
        }

        .import-alert-warning {
            background: var(--color-warning-light);
            color: #856404;
        }

        .import-alert-info {
            background: var(--color-info-light);
            color: #0c5460;
        }

        .import-alert h6 {
            font-size: 0.875rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .import-list {
            max-height: 120px;
            overflow-y: auto;
            font-size: 0.8125rem;
        }

        .import-list div {
            padding: 0.25rem 0;
        }

        /* Loading */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2000;
            opacity: 0;
            visibility: hidden;
            transition: all var(--transition-base);
        }

        .loading-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .loading-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
        }

        .loading-spinner {
            width: 48px;
            height: 48px;
            border: 4px solid var(--color-gray-200);
            border-top-color: var(--color-primary);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .loading-text {
            font-size: 0.875rem;
            color: var(--color-gray-600);
        }

        /* Toast */
        .toast-container {
            position: fixed;
            top: 1.5rem;
            right: 1.5rem;
            z-index: 3000;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .toast {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 1rem 1.25rem;
            background: var(--color-white);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-lg);
            animation: slideIn 0.3s ease;
            min-width: 280px;
        }

        @keyframes slideIn {
            from { opacity: 0; transform: translateX(100%); }
            to { opacity: 1; transform: translateX(0); }
        }

        .toast-success { border-left: 4px solid var(--color-success); }
        .toast-error { border-left: 4px solid var(--color-danger); }

        .toast-icon {
            font-size: 1.25rem;
        }

        .toast-success .toast-icon { color: var(--color-success); }
        .toast-error .toast-icon { color: var(--color-danger); }

        .toast-message {
            flex: 1;
            font-size: 0.875rem;
            color: var(--color-gray-700);
        }

        /* Responsive */
        .hide-mobile { display: table-cell; }
        .hide-tablet { display: table-cell; }

        @media (max-width: 1200px) {
            .hide-tablet { display: none; }
        }

        @media (max-width: 992px) {
            .page-header {
                flex-direction: column;
                gap: 1rem;
                text-align: center;
            }

            .header-content {
                flex-direction: column;
            }

            .actions-section {
                flex-direction: column;
                gap: 1rem;
            }

            .actions-right {
                flex-wrap: wrap;
                justify-content: center;
            }
        }

        @media (max-width: 768px) {
            .participants-page {
                padding: 1rem;
            }

            .hide-mobile { display: none; }

            .data-table th,
            .data-table td {
                padding: 0.625rem 0.5rem;
            }

            .participant-avatar {
                display: none;
            }

            .import-stats {
                grid-template-columns: 1fr;
            }
        }
    </style>

    <script type="text/javascript" src="https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js"></script>

    <script type="text/javascript">
        (function() {
            'use strict';

            const App = {
                elements: {},
                palestraId: null,

                init: function() {
                    this.palestraId = document.querySelector('input[name="palestra_id"]')?.value;
                    this.cacheElements();
                    this.bindEvents();
                    this.updateFilterCount();
                },

                cacheElements: function() {
                    this.elements = {
                        tableSearch: document.getElementById('tableSearch'),
                        filterProfissao: document.getElementById('filterProfissao'),
                        filterCidade: document.getElementById('filterCidade'),
                        filterPresenca: document.getElementById('filterPresenca'),
                        btnClearFilters: document.getElementById('btnClearFilters'),
                        filtersToggle: document.getElementById('filtersToggle'),
                        filtersSection: document.querySelector('.filters-section'),
                        filtersCount: document.getElementById('filtersCount'),
                        table: document.getElementById('participantestable'),
                        visibleCount: document.getElementById('visibleCount')
                    };
                },

                bindEvents: function() {
                    const self = this;

                    // Filters toggle
                    this.elements.filtersToggle?.addEventListener('click', function() {
                        self.elements.filtersSection?.classList.toggle('collapsed');
                    });

                    // Filter inputs
                    this.elements.tableSearch?.addEventListener('input', this.debounce(function() {
                        self.filterTable();
                    }, 300));

                    ['filterProfissao', 'filterCidade', 'filterPresenca'].forEach(function(id) {
                        self.elements[id]?.addEventListener('change', function() {
                            self.filterTable();
                        });
                    });

                    // Clear filters
                    this.elements.btnClearFilters?.addEventListener('click', function() {
                        self.clearFilters();
                    });

                    // Toggle presença
                    document.querySelectorAll('.js-toggle-presenca').forEach(function(toggle) {
                        toggle.addEventListener('change', function() {
                            self.handlePresencaToggle(this);
                        });
                    });

                    // Toggle conf_presença
                    document.querySelectorAll('.js-toggle-conf-presenca').forEach(function(toggle) {
                        toggle.addEventListener('change', function() {
                            self.handleConfPresencaToggle(this);
                        });
                    });

                    // Modal close on overlay click
                    document.querySelectorAll('.modal-overlay').forEach(function(modal) {
                        modal.addEventListener('click', function(e) {
                            if (e.target === modal) {
                                modal.classList.remove('active');
                            }
                        });
                    });

                    // ESC key closes modals
                    document.addEventListener('keydown', function(e) {
                        if (e.key === 'Escape') {
                            document.querySelectorAll('.modal-overlay.active').forEach(function(modal) {
                                modal.classList.remove('active');
                            });
                        }
                    });
                },

                debounce: function(func, wait) {
                    let timeout;
                    return function(...args) {
                        clearTimeout(timeout);
                        timeout = setTimeout(() => func.apply(this, args), wait);
                    };
                },

                filterTable: function() {
                    const self = this;
                    if (!this.elements.table) return;

                    const searchText = (this.elements.tableSearch?.value || '').toLowerCase();
                    const profissaoValue = (this.elements.filterProfissao?.value || '').toLowerCase();
                    const cidadeValue = (this.elements.filterCidade?.value || '').toLowerCase();
                    const presencaValue = this.elements.filterPresenca?.value || '';

                    const rows = this.elements.table.querySelectorAll('tbody tr');
                    let visibleCount = 0;

                    rows.forEach(function(row) {
                        const nome = row.cells[0]?.textContent.toLowerCase() || '';
                        const telefone = row.cells[1]?.textContent.toLowerCase() || '';
                        const email = row.cells[2]?.textContent.toLowerCase() || '';
                        const profissao = row.cells[3]?.textContent.toLowerCase() || '';
                        const cidade = row.cells[4]?.textContent.toLowerCase() || '';

                        const checkboxConfPresenca = row.querySelector('.js-toggle-conf-presenca');
                        let matchesPresenca = true;

                        if (presencaValue === 'presente') {
                            matchesPresenca = checkboxConfPresenca?.checked === true;
                        } else if (presencaValue === 'ausente') {
                            matchesPresenca = checkboxConfPresenca?.checked === false;
                        }

                        const matchesSearch = searchText === '' ||
                            nome.includes(searchText) ||
                            telefone.includes(searchText) ||
                            email.includes(searchText) ||
                            profissao.includes(searchText) ||
                            cidade.includes(searchText);

                        const matchesProfissao = profissaoValue === '' || profissao.includes(profissaoValue);
                        const matchesCidade = cidadeValue === '' || cidade.includes(cidadeValue);

                        const isVisible = matchesSearch && matchesProfissao && matchesCidade && matchesPresenca;
                        row.style.display = isVisible ? '' : 'none';

                        if (isVisible) visibleCount++;
                    });

                    if (this.elements.visibleCount) {
                        this.elements.visibleCount.textContent = visibleCount;
                    }

                    this.updateFilterCount();
                },

                clearFilters: function() {
                    if (this.elements.tableSearch) this.elements.tableSearch.value = '';
                    if (this.elements.filterProfissao) this.elements.filterProfissao.value = '';
                    if (this.elements.filterCidade) this.elements.filterCidade.value = '';
                    if (this.elements.filterPresenca) this.elements.filterPresenca.value = '';
                    this.filterTable();
                },

                updateFilterCount: function() {
                    let count = 0;
                    if (this.elements.tableSearch?.value) count++;
                    if (this.elements.filterProfissao?.value) count++;
                    if (this.elements.filterCidade?.value) count++;
                    if (this.elements.filterPresenca?.value) count++;

                    if (this.elements.filtersCount) {
                        if (count > 0) {
                            this.elements.filtersCount.textContent = count + ' ativo' + (count > 1 ? 's' : '');
                            this.elements.filtersCount.classList.add('show');
                        } else {
                            this.elements.filtersCount.classList.remove('show');
                        }
                    }
                },

                handlePresencaToggle: function(checkbox) {
                    const self = this;
                    const id = checkbox.dataset.id;
                    const presenca = checkbox.checked;

                    checkbox.disabled = true;

                    fetch('{{ route("publicador.escola.palestras.salvar_participantes") }}', {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                            palestra_id: this.palestraId,
                            id: id,
                            presenca: presenca.toString()
                        })
                    })
                    .then(function(response) {
                        return response.json();
                    })
                    .then(function(data) {
                        self.showToast('success', 'Presença atualizada com sucesso');
                        self.updateStats();
                    })
                    .catch(function(error) {
                        checkbox.checked = !presenca;
                        self.showToast('error', 'Erro ao atualizar presença');
                    })
                    .finally(function() {
                        checkbox.disabled = false;
                    });
                },

                handleConfPresencaToggle: function(checkbox) {
                    const self = this;
                    const id = checkbox.dataset.id;
                    const confirmacao = checkbox.checked;

                    checkbox.disabled = true;

                    fetch('{{ route("publicador.escola.palestras.salvar_confirmacao") }}', {
                        method: 'GET',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        }
                    })
                    .then(function() {
                        return fetch('{{ route("publicador.escola.palestras.salvar_confirmacao") }}?' + new URLSearchParams({
                            palestra_id: self.palestraId,
                            id: id,
                            confirmacao: confirmacao.toString()
                        }));
                    })
                    .then(function(response) {
                        return response.json();
                    })
                    .then(function(data) {
                        self.showToast('success', 'Confirmação atualizada com sucesso');
                        self.updateStats();
                    })
                    .catch(function(error) {
                        checkbox.checked = !confirmacao;
                        self.showToast('error', 'Erro ao atualizar confirmação');
                    })
                    .finally(function() {
                        checkbox.disabled = false;
                    });
                },

                updateStats: function() {
                    const presencialCount = document.querySelectorAll('.js-toggle-presenca:checked').length;
                    const confirmadosCount = document.querySelectorAll('.js-toggle-conf-presenca:checked').length;
                    const totalCount = document.querySelectorAll('.js-toggle-conf-presenca').length;

                    const statPresencial = document.getElementById('statPresencial');
                    const statConfirmados = document.getElementById('statConfirmados');
                    const statPendentes = document.getElementById('statPendentes');

                    if (statPresencial) statPresencial.textContent = presencialCount;
                    if (statConfirmados) statConfirmados.textContent = confirmadosCount;
                    if (statPendentes) statPendentes.textContent = totalCount - confirmadosCount;
                },

                showToast: function(type, message) {
                    const container = document.getElementById('toastContainer');
                    if (!container) return;

                    const toast = document.createElement('div');
                    toast.className = 'toast toast-' + type;
                    toast.innerHTML = `
                        <span class="toast-icon">
                            <i class="bi ${type === 'success' ? 'bi-check-circle-fill' : 'bi-exclamation-circle-fill'}"></i>
                        </span>
                        <span class="toast-message">${message}</span>
                    `;

                    container.appendChild(toast);

                    setTimeout(function() {
                        toast.style.opacity = '0';
                        toast.style.transform = 'translateX(100%)';
                        setTimeout(function() {
                            toast.remove();
                        }, 300);
                    }, 3000);
                }
            };

            // Export functions
            window.ExportToExcel = function(type) {
                try {
                    const tableElement = document.getElementById('participantestable');
                    const tableCopy = tableElement.cloneNode(true);

                    // Convert icons to text
                    tableCopy.querySelectorAll('.status-indicator').forEach(function(indicator) {
                        const cell = indicator.closest('td');
                        if (cell) {
                            cell.textContent = indicator.classList.contains('status-yes') ? 'Sim' : 'Não';
                        }
                    });

                    // Convert toggles to text
                    tableCopy.querySelectorAll('.toggle-switch').forEach(function(toggle) {
                        const cell = toggle.closest('td');
                        const checkbox = toggle.querySelector('input[type="checkbox"]');
                        if (cell && checkbox) {
                            cell.textContent = checkbox.checked ? 'Sim' : 'Não';
                        }
                    });

                    // Remove avatar
                    tableCopy.querySelectorAll('.participant-avatar').forEach(function(avatar) {
                        avatar.remove();
                    });

                    // Clean attributes
                    tableCopy.querySelectorAll('*').forEach(function(element) {
                        element.removeAttribute('class');
                        element.removeAttribute('style');
                    });

                    const wb = XLSX.utils.table_to_book(tableCopy, { sheet: "Participantes", raw: true });
                    const ws = wb.Sheets["Participantes"];

                    ws['!cols'] = [
                        { wch: 30 }, // Nome
                        { wch: 15 }, // Telefone
                        { wch: 30 }, // Email
                        { wch: 20 }, // Profissão
                        { wch: 25 }, // Cidade
                        { wch: 15 }, // CPF
                        { wch: 15 }, // Data
                        { wch: 10 }, // Info
                        { wch: 12 }, // Presencial
                        { wch: 12 }  // Conf. Presença
                    ];

                    const hoje = new Date().toLocaleDateString('pt-BR').replace(/\//g, '-');
                    const fileName = 'Participantes_' + hoje + '.' + (type || 'xlsx');

                    return XLSX.writeFile(wb, fileName);
                } catch (error) {
                    console.error('Erro ao exportar:', error);
                    App.showToast('error', 'Erro ao exportar arquivo');
                }
            };

            window.importarPresencasXLS = function() {
                if (typeof XLSX === 'undefined') {
                    App.showToast('error', 'Biblioteca XLSX não carregada');
                    return;
                }

                const input = document.createElement('input');
                input.type = 'file';
                input.accept = '.xlsx,.xls';

                input.onchange = function(event) {
                    const file = event.target.files[0];
                    if (!file) return;

                    showLoading('Processando arquivo...');

                    const reader = new FileReader();
                    reader.onload = function(e) {
                        try {
                            processarArquivoXLS(e.target.result);
                        } catch (error) {
                            console.error('Erro:', error);
                            App.showToast('error', 'Erro ao processar arquivo');
                            hideLoading();
                        }
                    };
                    reader.readAsArrayBuffer(file);
                };

                input.click();
            };

            function processarArquivoXLS(data) {
                const workbook = XLSX.read(data, { type: 'array' });
                const sheetName = workbook.SheetNames[0];
                const worksheet = workbook.Sheets[sheetName];
                const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

                if (jsonData.length === 0) {
                    App.showToast('error', 'Arquivo vazio');
                    hideLoading();
                    return;
                }

                const cpfsArquivo = extrairCPFs(jsonData);

                if (cpfsArquivo.length === 0) {
                    App.showToast('error', 'Nenhum CPF válido encontrado');
                    hideLoading();
                    return;
                }

                const cpfsPagina = obterCPFsPagina();
                const resultado = processarCorrespondencias(cpfsArquivo, cpfsPagina);

                atualizarSwitches(resultado.encontrados);
                mostrarRelatorioImport(resultado);
                hideLoading();
            }

            function extrairCPFs(dados) {
                const cpfs = [];
                dados.forEach(function(linha) {
                    if (Array.isArray(linha)) {
                        linha.forEach(function(celula) {
                            if (celula) {
                                const cpfLimpo = limparCPF(celula.toString());
                                if (validarCPF(cpfLimpo)) {
                                    cpfs.push(cpfLimpo);
                                }
                            }
                        });
                    }
                });
                return [...new Set(cpfs)];
            }

            function obterCPFsPagina() {
                const cpfsPagina = [];
                const tabela = document.getElementById('participantestable');
                const linhas = tabela?.querySelectorAll('tbody tr') || [];

                linhas.forEach(function(linha) {
                    const cpfCell = linha.cells[5];
                    if (cpfCell) {
                        const cpfTexto = cpfCell.textContent.trim();
                        if (cpfTexto && cpfTexto !== '--') {
                            const cpfLimpo = limparCPF(cpfTexto);
                            if (validarCPF(cpfLimpo)) {
                                cpfsPagina.push({
                                    cpf: cpfLimpo,
                                    linha: linha,
                                    nome: linha.cells[0]?.textContent.trim() || ''
                                });
                            }
                        }
                    }
                });

                return cpfsPagina;
            }

            function processarCorrespondencias(cpfsArquivo, cpfsPagina) {
                const encontrados = [];
                const naoEncontradosArquivo = [];

                const mapaCPFs = new Map();
                cpfsPagina.forEach(function(item) {
                    mapaCPFs.set(item.cpf, item);
                });

                cpfsArquivo.forEach(function(cpf) {
                    if (mapaCPFs.has(cpf)) {
                        encontrados.push(mapaCPFs.get(cpf));
                    } else {
                        naoEncontradosArquivo.push(cpf);
                    }
                });

                const naoEncontradosPagina = cpfsPagina.filter(function(item) {
                    return !cpfsArquivo.includes(item.cpf);
                });

                return {
                    encontrados: encontrados,
                    naoEncontradosArquivo: naoEncontradosArquivo,
                    naoEncontradosPagina: naoEncontradosPagina,
                    totalArquivo: cpfsArquivo.length,
                    totalPagina: cpfsPagina.length,
                    totalEncontrados: encontrados.length
                };
            }

            function atualizarSwitches(encontrados) {
                encontrados.forEach(function(participante) {
                    const linha = participante.linha;
                    const checkbox = linha?.querySelector('.js-toggle-conf-presenca');

                    if (checkbox && !checkbox.checked) {
                        checkbox.checked = true;
                        const event = new Event('change', { bubbles: true });
                        checkbox.dispatchEvent(event);
                    }
                });
            }

            function mostrarRelatorioImport(resultado) {
                const modalBody = document.getElementById('importModalBody');
                const modal = document.getElementById('importModal');

                if (!modalBody || !modal) return;

                modalBody.innerHTML = `
                    <div class="import-alert import-alert-success">
                        <strong>✅ ${resultado.totalEncontrados} participante(s) tiveram a presença confirmada</strong>
                    </div>

                    <div class="import-stats">
                        <div class="import-stat stat-file">
                            <span class="import-stat-number">${resultado.totalArquivo}</span>
                            <span class="import-stat-label">CPFs no arquivo</span>
                        </div>
                        <div class="import-stat stat-list">
                            <span class="import-stat-number">${resultado.totalPagina}</span>
                            <span class="import-stat-label">Participantes</span>
                        </div>
                        <div class="import-stat stat-confirmed">
                            <span class="import-stat-number">${resultado.totalEncontrados}</span>
                            <span class="import-stat-label">Confirmados</span>
                        </div>
                    </div>

                    ${resultado.naoEncontradosArquivo.length > 0 ? `
                        <div class="import-alert import-alert-warning">
                            <h6><i class="bi bi-exclamation-triangle"></i> CPFs não encontrados na lista (${resultado.naoEncontradosArquivo.length})</h6>
                            <div class="import-list">
                                ${resultado.naoEncontradosArquivo.map(function(cpf) {
                                    return '<div>• ' + formatarCPF(cpf) + '</div>';
                                }).join('')}
                            </div>
                        </div>
                    ` : ''}

                    ${resultado.naoEncontradosPagina.length > 0 ? `
                        <div class="import-alert import-alert-info">
                            <h6><i class="bi bi-info-circle"></i> Participantes não encontrados no arquivo (${resultado.naoEncontradosPagina.length})</h6>
                            <div class="import-list">
                                ${resultado.naoEncontradosPagina.map(function(item) {
                                    return '<div>• ' + item.nome + ' - ' + formatarCPF(item.cpf) + '</div>';
                                }).join('')}
                            </div>
                        </div>
                    ` : ''}
                `;

                modal.classList.add('active');
                App.updateStats();
            }

            window.closeImportModal = function() {
                document.getElementById('importModal')?.classList.remove('active');
            };

            function showLoading(text) {
                const overlay = document.getElementById('loadingOverlay');
                const textEl = overlay?.querySelector('.loading-text');
                if (textEl) textEl.textContent = text || 'Processando...';
                overlay?.classList.add('active');
            }

            function hideLoading() {
                document.getElementById('loadingOverlay')?.classList.remove('active');
            }

            function limparCPF(cpf) {
                return cpf.toString().replace(/[^\d]/g, '');
            }

            function validarCPF(cpf) {
                cpf = limparCPF(cpf);
                if (cpf.length !== 11) return false;
                if (/^(\d)\1{10}$/.test(cpf)) return false;

                let soma = 0;
                for (let i = 0; i < 9; i++) {
                    soma += parseInt(cpf.charAt(i)) * (10 - i);
                }
                let resto = (soma * 10) % 11;
                if (resto === 10 || resto === 11) resto = 0;
                if (resto !== parseInt(cpf.charAt(9))) return false;

                soma = 0;
                for (let i = 0; i < 10; i++) {
                    soma += parseInt(cpf.charAt(i)) * (11 - i);
                }
                resto = (soma * 10) % 11;
                if (resto === 10 || resto === 11) resto = 0;
                if (resto !== parseInt(cpf.charAt(10))) return false;

                return true;
            }

            function formatarCPF(cpf) {
                cpf = limparCPF(cpf);
                return cpf.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4');
            }

            // Initialize
            document.addEventListener('DOMContentLoaded', function() {
                App.init();
            });
        })();
    </script>
@endsection