@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="list-page">
        <div class="container-fluid">
            
            <header class="page-header">
                <div class="header-content">
                    <div class="header-icon">
                        <i class="bi bi-mortarboard-fill"></i>
                    </div>
                    <div class="header-text">
                        <h1>Cursos e Palestras</h1>
                        <p>Gerencie os eventos da Escola do Legislativo</p>
                    </div>
                </div>
                <div class="header-actions">
                    @can('escola_palestras_adicionar')
                        <a href="{{ route('publicador.escola.palestras.adicionar') }}" class="btn-add">
                            <i class="bi bi-plus-lg"></i>
                            <span>Novo Evento</span>
                        </a>
                    @endcan
                </div>
            </header>

            <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">
                    {!! Form::open([
                        'route' => ['publicador.escola.palestras.index'],
                        'method' => 'GET',
                        'class' => 'filters-form',
                        'id' => 'filtersForm'
                    ]) !!}
                    
                    <div class="filters-grid">
                        <div class="filter-field">
                            <label class="filter-label">Título</label>
                            <div class="filter-input-wrapper">
                                <i class="bi bi-search"></i>
                                {{ Form::text('titulo', Request::query('titulo'), [
                                    'class' => 'filter-input',
                                    'placeholder' => 'Buscar por título...'
                                ]) }}
                            </div>
                        </div>

                        <div class="filter-field">
                            <label class="filter-label">Palestrante</label>
                            <div class="filter-input-wrapper">
                                <i class="bi bi-person"></i>
                                {{ Form::text('palestrante', Request::query('palestrante'), [
                                    'class' => 'filter-input',
                                    'placeholder' => 'Nome do palestrante...'
                                ]) }}
                            </div>
                        </div>

                        <div class="filter-field">
                            <label class="filter-label">Local</label>
                            <div class="filter-input-wrapper">
                                <i class="bi bi-geo-alt"></i>
                                {{ Form::text('local', Request::query('local'), [
                                    'class' => 'filter-input',
                                    'placeholder' => 'Local do evento...'
                                ]) }}
                            </div>
                        </div>

                        <div class="filter-field">
                            <label class="filter-label">Tipo</label>
                            <div class="filter-input-wrapper">
                                <i class="bi bi-tag"></i>
                                {{ Form::select('tipo', Config::get('constants.tipos_palestras'), Request::query('tipo'), [
                                    'class' => 'filter-input filter-select',
                                    'placeholder' => 'Todos os tipos'
                                ]) }}
                            </div>
                        </div>

                        <div class="filter-field">
                            <label class="filter-label">Visibilidade</label>
                            <div class="filter-input-wrapper">
                                <i class="bi bi-eye"></i>
                                {{ Form::select('publicado', Config::get('constants.visibilidade_palestras'), Request::query('publicado'), [
                                    'class' => 'filter-input filter-select',
                                    'placeholder' => 'Todas'
                                ]) }}
                            </div>
                        </div>

                        <div class="filter-field">
                            <label class="filter-label">Data do Evento</label>
                            <div class="filter-date-range">
                                {{ Form::date('data_palestra_de', Request::query('data_palestra_de'), [
                                    'class' => 'filter-input filter-date',
                                    'placeholder' => 'De'
                                ]) }}
                                <span class="date-separator">até</span>
                                {{ Form::date('data_palestra_ate', Request::query('data_palestra_ate'), [
                                    'class' => 'filter-input filter-date',
                                    'placeholder' => 'Até'
                                ]) }}
                            </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>
                        <button type="submit" class="btn-search">
                            <i class="bi bi-search"></i>
                            <span>Pesquisar</span>
                        </button>
                    </div>
                    
                    {!! Form::close() !!}
                </div>
            </section>

            @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="results-section">
                <div class="results-header">
                    <div class="results-info">
                        <span class="results-count">
                            <strong>{{ $lista->total() ?? $lista->count() }}</strong> 
                            {{ ($lista->total() ?? $lista->count()) == 1 ? 'evento encontrado' : 'eventos encontrados' }}
                        </span>
                    </div>
                    <div class="results-view">
                        <button type="button" class="view-btn active" data-view="table" title="Visualização em tabela">
                            <i class="bi bi-list"></i>
                        </button>
                        <button type="button" class="view-btn" data-view="cards" title="Visualização em cards">
                            <i class="bi bi-grid-3x3-gap"></i>
                        </button>
                    </div>
                </div>

                @unless ($lista->isEmpty())
                    <div class="table-container" id="tableView">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th class="th-title">Título</th>
                                    <th class="th-status">Status</th>
                                    <th class="th-cancelado">Cancelado</th>
                                    <th class="th-date">Data do Evento</th>
                                    <th class="th-date hide-mobile">Cadastro</th>
                                    <th class="th-actions">Ações</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($lista as $item)
                                    <tr class="{{ $item->is_cancelado ? 'row-cancelled' : '' }}">
                                        <td class="td-title">
                                            <div class="title-cell">
                                                <span class="event-title">{{ Str::limit($item->titulo, 60, '...') }}</span>
                                                <span class="event-type">
                                                    {{ Config::get('constants.tipos_palestras')->get($item->tipo) }}
                                                </span>
                                            </div>
                                        </td>
                                        <td class="td-status">
                                            @php
                                                $statusClass = $item->publicado ? 'status-published' : 'status-draft';
                                                $statusText = Config::get('constants.visibilidade_palestras')->get($item->publicado);
                                            @endphp
                                            <span class="status-badge {{ $statusClass }}">
                                                <i class="bi {{ $item->publicado ? 'bi-check-circle' : 'bi-eye-slash' }}"></i>
                                                {{ $statusText }}
                                            </span>
                                        </td>
                                        <td class="td-cancelado">
                                            <label class="toggle-switch">
                                                <input type="checkbox" 
                                                       class="toggle-input js-toggle-cancelado" 
                                                       data-id="{{ $item->id }}" 
                                                       {{ $item->is_cancelado ? 'checked' : '' }}>
                                                <span class="toggle-slider"></span>
                                            </label>
                                        </td>
                                        <td class="td-date">
                                            <div class="date-cell">
                                                <span class="date-main">{{ $item->data_palestra->format('d/m/Y') }}</span>
                                                <span class="date-time">{{ $item->data_palestra->format('H:i') }}</span>
                                            </div>
                                        </td>
                                        <td class="td-date hide-mobile">
                                            <div class="date-cell">
                                                <span class="date-main">{{ $item->created_at->format('d/m/Y') }}</span>
                                                <span class="date-time">{{ $item->created_at->format('H:i') }}</span>
                                            </div>
                                        </td>
                                        <td class="td-actions">
                                            <div class="actions-group">
                                                <a href="{{ route('escola.palestra', ['slug' => $item->slug]) }}" 
                                                   class="action-btn action-view" 
                                                   title="Ver Inscrições"
                                                   target="_blank">
                                                    <i class="bi bi-box-arrow-up-right"></i>
                                                </a>
                                                
                                                <a href="{{ route('publicador.escola.palestras.listar_participantes', ['id' => $item->id]) }}" 
                                                   class="action-btn action-participants" 
                                                   title="Participantes">
                                                    <i class="bi bi-people"></i>
                                                </a>
                                                
                                                <button type="button" 
                                                        class="action-btn action-qr" 
                                                        title="Gerar QR Code"
                                                        onclick="showQrCode({{ $item->id }})">
                                                    <i class="bi bi-qr-code"></i>
                                                </button>
                                                
                                                @can('escola_palestras_alterar')
                                                    <a href="{{ route('publicador.escola.palestras.editar', ['id' => $item->id]) }}" 
                                                       class="action-btn action-edit" 
                                                       title="Editar">
                                                        <i class="bi bi-pencil"></i>
                                                    </a>
                                                @endcan
                                                
                                                @can('escola_palestras_excluir')
                                                    <button type="button" 
                                                            class="action-btn action-delete" 
                                                            title="Excluir"
                                                            onclick="confirmDelete({{ $item->id }}, '{{ addslashes($item->titulo) }}')">
                                                        <i class="bi bi-trash"></i>
                                                    </button>
                                                    <form id="deleteForm{{ $item->id }}" 
                                                          action="{{ route('publicador.escola.palestras.excluir', $item->id) }}" 
                                                          method="POST" 
                                                          style="display: none;">
                                                        @csrf
                                                        @method('DELETE')
                                                    </form>
                                                @endcan
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <div class="cards-container" id="cardsView" style="display: none;">
                        <div class="cards-grid">
                            @foreach ($lista as $item)
                                <div class="event-card {{ $item->is_cancelado ? 'card-cancelled' : '' }}">
                                    @if($item->is_cancelado)
                                        <div class="card-cancelled-badge">
                                            <i class="bi bi-x-circle"></i> Cancelado
                                        </div>
                                    @endif
                                    
                                    <div class="card-header">
                                        <span class="card-type">
                                            {{ Config::get('constants.tipos_palestras')->get($item->tipo) }}
                                        </span>
                                        <span class="card-status {{ $item->publicado ? 'status-published' : 'status-draft' }}">
                                            {{ Config::get('constants.visibilidade_palestras')->get($item->publicado) }}
                                        </span>
                                    </div>
                                    
                                    <div class="card-body">
                                        <h3 class="card-title">{{ Str::limit($item->titulo, 80, '...') }}</h3>
                                        
                                        <div class="card-meta">
                                            <div class="meta-item">
                                                <i class="bi bi-calendar-event"></i>
                                                <span>{{ $item->data_palestra->format('d/m/Y \à\s H:i') }}</span>
                                            </div>
                                            @if($item->local)
                                                <div class="meta-item">
                                                    <i class="bi bi-geo-alt"></i>
                                                    <span>{{ Str::limit($item->local, 40, '...') }}</span>
                                                </div>
                                            @endif
                                            @if($item->palestrante)
                                                <div class="meta-item">
                                                    <i class="bi bi-person"></i>
                                                    <span>{{ Str::limit($item->palestrante, 40, '...') }}</span>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                    
                                    <div class="card-footer">
                                        <div class="card-toggle">
                                            <span class="toggle-label">Cancelado:</span>
                                            <label class="toggle-switch toggle-small">
                                                <input type="checkbox" 
                                                       class="toggle-input js-toggle-cancelado" 
                                                       data-id="{{ $item->id }}" 
                                                       {{ $item->is_cancelado ? 'checked' : '' }}>
                                                <span class="toggle-slider"></span>
                                            </label>
                                        </div>
                                        
                                        <div class="card-actions">
                                            <a href="{{ route('publicador.escola.palestras.listar_participantes', ['id' => $item->id]) }}" 
                                               class="card-action-btn" 
                                               title="Participantes">
                                                <i class="bi bi-people"></i>
                                            </a>
                                            <button type="button" 
                                                    class="card-action-btn" 
                                                    title="QR Code"
                                                    onclick="showQrCode({{ $item->id }})">
                                                <i class="bi bi-qr-code"></i>
                                            </button>
                                            @can('escola_palestras_alterar')
                                                <a href="{{ route('publicador.escola.palestras.editar', ['id' => $item->id]) }}" 
                                                   class="card-action-btn" 
                                                   title="Editar">
                                                    <i class="bi bi-pencil"></i>
                                                </a>
                                            @endcan
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    @if($lista->hasPages())
                        <div class="pagination-wrapper">
                            <div class="pagination-info">
                                Mostrando {{ $lista->firstItem() }} - {{ $lista->lastItem() }} de {{ $lista->total() }}
                            </div>
                            <div class="pagination-nav">
                                @if($lista->onFirstPage())
                                    <span class="page-btn disabled"><i class="bi bi-chevron-left"></i></span>
                                @else
                                    <a href="{{ $lista->previousPageUrl() }}" class="page-btn"><i class="bi bi-chevron-left"></i></a>
                                @endif

                                @foreach($lista->getUrlRange(max(1, $lista->currentPage() - 2), min($lista->lastPage(), $lista->currentPage() + 2)) as $page => $url)
                                    @if($page == $lista->currentPage())
                                        <span class="page-btn active">{{ $page }}</span>
                                    @else
                                        <a href="{{ $url }}" class="page-btn">{{ $page }}</a>
                                    @endif
                                @endforeach

                                @if($lista->hasMorePages())
                                    <a href="{{ $lista->nextPageUrl() }}" class="page-btn"><i class="bi bi-chevron-right"></i></a>
                                @else
                                    <span class="page-btn disabled"><i class="bi bi-chevron-right"></i></span>
                                @endif
                            </div>
                        </div>
                    @endif

                @else
                    <div class="empty-state">
                        <div class="empty-icon">
                            <i class="bi bi-inbox"></i>
                        </div>
                        <h3>Nenhum evento encontrado</h3>
                        <p>Não há cursos ou palestras cadastrados com os filtros aplicados.</p>
                        @can('escola_palestras_adicionar')
                            <a href="{{ route('publicador.escola.palestras.adicionar') }}" class="btn-add">
                                <i class="bi bi-plus-lg"></i>
                                <span>Cadastrar Novo Evento</span>
                            </a>
                        @endcan
                    </div>
                @endunless
            </section>
        </div>
    </div>

    <div class="modal-overlay" id="qrModal">
        <div class="modal-container modal-qr">
            <div class="modal-header">
                <h3><i class="bi bi-qr-code"></i> QR Code</h3>
                <button type="button" class="modal-close" onclick="closeQrModal()">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="qr-display" id="qrDisplay"></div>
                <p class="qr-hint">Escaneie o código para acessar a página de inscrição</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn-modal btn-secondary" onclick="closeQrModal()">
                    Fechar
                </button>
                <button type="button" class="btn-modal btn-primary" id="btnPrintQr">
                    <i class="bi bi-printer"></i> Imprimir
                </button>
            </div>
        </div>
    </div>

    <div class="modal-overlay" id="deleteModal">
        <div class="modal-container modal-delete">
            <div class="modal-header">
                <h3><i class="bi bi-exclamation-triangle text-danger"></i> Confirmar Exclusão</h3>
                <button type="button" class="modal-close" onclick="closeDeleteModal()">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>
            <div class="modal-body">
                <p>Tem certeza que deseja excluir o evento:</p>
                <strong id="deleteEventTitle"></strong>
                <p class="delete-warning">Esta ação não poderá ser desfeita.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn-modal btn-secondary" onclick="closeDeleteModal()">
                    Cancelar
                </button>
                <button type="button" class="btn-modal btn-danger" id="btnConfirmDelete">
                    <i class="bi bi-trash"></i> Excluir
                </button>
            </div>
        </div>
    </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-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;
            
            --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;
        }

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

        .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;
        }

        .header-text p {
            font-size: 0.875rem;
            color: var(--color-gray-500);
        }

        .btn-add {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1.5rem;
            background: linear-gradient(135deg, var(--color-success), #218838);
            color: var(--color-white);
            border-radius: var(--radius-md);
            text-decoration: none;
            font-weight: 600;
            font-size: 0.875rem;
            transition: all var(--transition-base);
            box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
        }

        .btn-add:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4);
            color: var(--color-white);
        }

        .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: 999px;
            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: repeat(3, 1fr);
            gap: 1rem;
        }

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

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

        .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' stroke-linecap='round' stroke-linejoin='round'%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;
        }

        .filter-date-range {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .filter-date {
            flex: 1;
            padding-left: 0.875rem;
        }

        .date-separator {
            font-size: 0.8125rem;
            color: var(--color-gray-400);
        }

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

        .btn-clear,
        .btn-search {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.625rem 1.25rem;
            font-size: 0.875rem;
            font-weight: 500;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all var(--transition-fast);
            border: 2px solid transparent;
        }

        .btn-clear {
            background: var(--color-white);
            color: var(--color-gray-600);
            border-color: var(--color-gray-300);
        }

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

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

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

        .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);
        }

        .results-section {
            background: var(--color-white);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-md);
            overflow: hidden;
        }

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

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

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

        .results-view {
            display: flex;
            gap: 0.25rem;
            background: var(--color-gray-200);
            padding: 0.25rem;
            border-radius: var(--radius-md);
        }

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

        .view-btn:hover {
            color: var(--color-gray-700);
        }

        .view-btn.active {
            background: var(--color-white);
            color: var(--color-primary);
            box-shadow: var(--shadow-sm);
        }

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

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

        .data-table th {
            padding: 1rem 1.25rem;
            text-align: left;
            font-size: 0.75rem;
            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);
        }

        .data-table td {
            padding: 1rem 1.25rem;
            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);
        }

        .data-table tbody tr.row-cancelled {
            background: var(--color-danger-light);
        }

        .data-table tbody tr.row-cancelled:hover {
            background: #f5c6cb;
        }

        .th-title {
            min-width: 280px;
        }

        .th-status,
        .th-cancelado {
            width: 120px;
            text-align: center;
        }

        .th-date {
            width: 130px;
        }

        .th-actions {
            width: 180px;
            text-align: center;
        }

        .title-cell {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .event-title {
            font-weight: 500;
            color: var(--color-gray-800);
            line-height: 1.4;
        }

        .event-type {
            font-size: 0.75rem;
            color: var(--color-gray-500);
        }

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

        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
            padding: 0.375rem 0.75rem;
            font-size: 0.75rem;
            font-weight: 500;
            border-radius: 999px;
        }

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

        .status-draft {
            background: var(--color-gray-200);
            color: var(--color-gray-600);
        }

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

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

        .toggle-switch.toggle-small {
            width: 36px;
            height: 20px;
        }

        .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: 999px;
            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-small .toggle-slider::before {
            width: 14px;
            height: 14px;
        }

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

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

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

        .date-cell {
            display: flex;
            flex-direction: column;
            gap: 0.125rem;
        }

        .date-main {
            font-weight: 500;
            color: var(--color-gray-800);
        }

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

        .actions-group {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .action-btn {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--color-gray-100);
            border: none;
            border-radius: var(--radius-sm);
            color: var(--color-gray-600);
            cursor: pointer;
            transition: all var(--transition-fast);
            text-decoration: none;
        }

        .action-btn:hover {
            transform: translateY(-2px);
        }

        .action-view:hover {
            background: var(--color-info-light);
            color: var(--color-info);
        }

        .action-participants:hover {
            background: var(--color-primary-light);
            color: var(--color-primary);
        }

        .action-qr:hover {
            background: var(--color-gray-800);
            color: var(--color-white);
        }

        .action-edit:hover {
            background: var(--color-warning-light);
            color: #d39e00;
        }

        .action-delete:hover {
            background: var(--color-danger-light);
            color: var(--color-danger);
        }

        .cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 1.5rem;
            padding: 1.5rem;
        }

        .event-card {
            background: var(--color-white);
            border-radius: var(--radius-lg);
            border: 1px solid var(--color-gray-200);
            overflow: hidden;
            transition: all var(--transition-base);
            position: relative;
        }

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

        .event-card.card-cancelled {
            border-color: var(--color-danger);
            background: var(--color-danger-light);
        }

        .card-cancelled-badge {
            position: absolute;
            top: 0.75rem;
            right: 0.75rem;
            padding: 0.375rem 0.75rem;
            background: var(--color-danger);
            color: var(--color-white);
            font-size: 0.75rem;
            font-weight: 600;
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            gap: 0.375rem;
        }

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

        .card-type {
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--color-primary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .card-status {
            font-size: 0.6875rem;
            font-weight: 500;
            padding: 0.25rem 0.5rem;
            border-radius: 999px;
        }

        .card-body {
            padding: 1.25rem;
        }

        .card-title {
            font-size: 1rem;
            font-weight: 600;
            color: var(--color-gray-800);
            line-height: 1.4;
            margin-bottom: 1rem;
        }

        .card-meta {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .meta-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.8125rem;
            color: var(--color-gray-600);
        }

        .meta-item i {
            font-size: 0.875rem;
            color: var(--color-gray-400);
            width: 16px;
        }

        .card-footer {
            padding: 1rem 1.25rem;
            background: var(--color-gray-50);
            border-top: 1px solid var(--color-gray-200);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

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

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

        .card-actions {
            display: flex;
            gap: 0.375rem;
        }

        .card-action-btn {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--color-white);
            border: 1px solid var(--color-gray-200);
            border-radius: var(--radius-sm);
            color: var(--color-gray-600);
            cursor: pointer;
            transition: all var(--transition-fast);
            text-decoration: none;
        }

        .card-action-btn:hover {
            background: var(--color-primary);
            border-color: var(--color-primary);
            color: var(--color-white);
        }

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

        .pagination-info {
            font-size: 0.8125rem;
            color: var(--color-gray-500);
        }

        .pagination-nav {
            display: flex;
            gap: 0.25rem;
        }

        .page-btn {
            min-width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 0.75rem;
            background: var(--color-white);
            border: 1px solid var(--color-gray-200);
            border-radius: var(--radius-sm);
            font-size: 0.875rem;
            color: var(--color-gray-600);
            text-decoration: none;
            transition: all var(--transition-fast);
        }

        .page-btn:hover:not(.disabled):not(.active) {
            background: var(--color-gray-100);
            border-color: var(--color-gray-300);
        }

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

        .page-btn.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .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);
            margin-bottom: 1.5rem;
        }

        .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: 480px;
            box-shadow: var(--shadow-lg);
            transform: scale(0.9);
            transition: transform var(--transition-base);
        }

        .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;
        }

        .modal-qr .modal-body {
            text-align: center;
        }

        .qr-display {
            padding: 1.5rem;
            background: var(--color-gray-50);
            border-radius: var(--radius-lg);
            margin-bottom: 1rem;
            display: flex;
            justify-content: center;
        }

        .qr-hint {
            font-size: 0.875rem;
            color: var(--color-gray-500);
        }

        .modal-delete .modal-body p {
            color: var(--color-gray-600);
            margin-bottom: 0.75rem;
        }

        .modal-delete .modal-body strong {
            display: block;
            font-size: 1rem;
            color: var(--color-gray-800);
            padding: 0.75rem;
            background: var(--color-gray-100);
            border-radius: var(--radius-md);
            margin-bottom: 1rem;
        }

        .delete-warning {
            font-size: 0.8125rem;
            color: var(--color-danger);
            background: var(--color-danger-light);
            padding: 0.625rem;
            border-radius: var(--radius-sm);
        }

        .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-secondary {
            background: var(--color-gray-200);
            color: var(--color-gray-700);
        }

        .btn-secondary:hover {
            background: var(--color-gray-300);
        }

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

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

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

        .btn-danger:hover {
            background: #c82333;
        }

        .text-danger {
            color: var(--color-danger) !important;
        }

        .hide-mobile {
            display: table-cell;
        }

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

            .page-header {
                flex-direction: column;
                gap: 1rem;
                text-align: center;
            }

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

            .pagination-wrapper {
                flex-direction: column;
                gap: 1rem;
            }
        }

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

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

            .th-title {
                min-width: 200px;
            }

            .actions-group {
                flex-wrap: wrap;
            }
        }
    </style>

    <script>
        (function() {
            'use strict';

            let currentQrCode = null;
            let deleteFormId = null;

            function initFilters() {
                const toggle = document.getElementById('filtersToggle');
                const section = document.querySelector('.filters-section');
                const form = document.getElementById('filtersForm');
                const btnClear = document.getElementById('btnClearFilters');

                if (toggle && section) {
                    toggle.addEventListener('click', function() {
                        section.classList.toggle('collapsed');
                    });
                }

                if (btnClear && form) {
                    btnClear.addEventListener('click', function() {
                        form.querySelectorAll('input, select').forEach(function(field) {
                            if (field.type === 'text' || field.type === 'date') {
                                field.value = '';
                            } else if (field.tagName === 'SELECT') {
                                field.selectedIndex = 0;
                            }
                        });
                        updateFilterCount();
                    });
                }

                updateFilterCount();

                form?.querySelectorAll('input, select').forEach(function(field) {
                    field.addEventListener('change', updateFilterCount);
                    field.addEventListener('input', updateFilterCount);
                });
            }

            function updateFilterCount() {
                const form = document.getElementById('filtersForm');
                const countBadge = document.getElementById('filtersCount');
                
                if (!form || !countBadge) return;

                let count = 0;
                form.querySelectorAll('input, select').forEach(function(field) {
                    if (field.value && field.value.trim() !== '') {
                        count++;
                    }
                });

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

            function initViewToggle() {
                const viewBtns = document.querySelectorAll('.view-btn');
                const tableView = document.getElementById('tableView');
                const cardsView = document.getElementById('cardsView');

                viewBtns.forEach(function(btn) {
                    btn.addEventListener('click', function() {
                        const view = this.dataset.view;

                        viewBtns.forEach(function(b) {
                            b.classList.remove('active');
                        });
                        this.classList.add('active');

                        if (view === 'table') {
                            tableView.style.display = 'block';
                            cardsView.style.display = 'none';
                        } else {
                            tableView.style.display = 'none';
                            cardsView.style.display = 'block';
                        }

                        localStorage.setItem('palestrasView', view);
                    });
                });

                const savedView = localStorage.getItem('palestrasView');
                if (savedView) {
                    const btn = document.querySelector('[data-view="' + savedView + '"]');
                    if (btn) {
                        btn.click();
                    }
                }
            }

            function initToggleCancelado() {
                document.querySelectorAll('.js-toggle-cancelado').forEach(function(checkbox) {
                    checkbox.addEventListener('change', function() {
                        const id = this.dataset.id;
                        const isCancelado = this.checked ? 1 : 0;
                        const checkbox = this;

                        const row = checkbox.closest('tr');
                        const card = checkbox.closest('.event-card');

                        fetch('{{ route("publicador.escola.palestras.toggle_cancelado") }}', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: JSON.stringify({
                                id: id,
                                is_cancelado: isCancelado
                            })
                        })
                        .then(function(response) {
                            return response.json();
                        })
                        .then(function(data) {
                            if (data.success) {
                                if (row) {
                                    row.classList.toggle('row-cancelled', isCancelado);
                                }
                                if (card) {
                                    card.classList.toggle('card-cancelled', isCancelado);
                                    const badge = card.querySelector('.card-cancelled-badge');
                                    if (isCancelado && !badge) {
                                        card.insertAdjacentHTML('afterbegin', '<div class="card-cancelled-badge"><i class="bi bi-x-circle"></i> Cancelado</div>');
                                    } else if (!isCancelado && badge) {
                                        badge.remove();
                                    }
                                }

                                showToast('success', data.msg);
                            } else {
                                checkbox.checked = !checkbox.checked;
                                showToast('error', data.msg);
                            }
                        })
                        .catch(function(error) {
                            checkbox.checked = !checkbox.checked;
                            showToast('error', 'Erro ao atualizar o status.');
                        });
                    });
                });
            }

            window.showQrCode = function(id) {
                const modal = document.getElementById('qrModal');
                const display = document.getElementById('qrDisplay');

                display.innerHTML = '<div class="spinner-border text-primary" role="status"></div>';
                modal.classList.add('active');

                fetch('{{ route("publicador.escola.palestras.gerar_qr_code") }}?id=' + id, {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                })
                .then(function(response) {
                    return response.json();
                })
                .then(function(data) {
                    if (data.error) {
                        display.innerHTML = '<p class="text-danger">' + data.error + '</p>';
                    } else {
                        display.innerHTML = data.qrcode;
                        currentQrCode = data.qrcode;
                    }
                })
                .catch(function(error) {
                    display.innerHTML = '<p class="text-danger">Erro ao gerar QR Code</p>';
                });
            };

            window.closeQrModal = function() {
                document.getElementById('qrModal').classList.remove('active');
                currentQrCode = null;
            };

            window.confirmDelete = function(id, title) {
                deleteFormId = id;
                document.getElementById('deleteEventTitle').textContent = title;
                document.getElementById('deleteModal').classList.add('active');
            };

            window.closeDeleteModal = function() {
                document.getElementById('deleteModal').classList.remove('active');
                deleteFormId = null;
            };

            function showToast(type, message) {
                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        icon: type,
                        title: type === 'success' ? 'Sucesso!' : 'Erro!',
                        text: message,
                        timer: 2000,
                        showConfirmButton: false,
                        toast: true,
                        position: 'top-end'
                    });
                } else {
                    alert(message);
                }
            }

            function printQrCode(qrcode) {
                const printWindow = window.open('', '_blank');
                const logoUrl = "{{ asset('img/logoALEP2025.png') }}";

                printWindow.document.write(`
                    <html>
                    <head>
                        <title>Imprimir QR Code</title>
                        <style>
                            @page { size: A4; margin: 0; }
                            body { font-family: Arial, sans-serif; margin: 0; padding: 20mm; display: flex; flex-direction: column; min-height: 100vh; }
                            .container { flex: 1; display: flex; flex-direction: column; }
                            .header { text-align: center; margin-bottom: 15mm; }
                            .header img { max-width: 280px; height: auto; }
                            .content { text-align: center; }
                            .title { font-size: 24px; font-weight: bold; margin-bottom: 10mm; }
                            .instructions { text-align: left; font-size: 14px; margin-bottom: 10mm; }
                            .instructions ol { padding-left: 20px; }
                            .instructions li { margin-bottom: 5mm; }
                            .qr-code { display: flex; justify-content: center; margin: 10mm 0; }
                            .footer { text-align: center; font-size: 14px; margin-top: auto; padding-top: 10mm; }
                        </style>
                    </head>
                    <body>
                        <div class="container">
                            <div class="header">
                                <img src="${logoUrl}" alt="Logo" id="logoImage">
                            </div>
                            <div class="content">
                                <p class="title">Bem-vindos!</p>
                                <p>Para confirmar sua presença, escaneie o QR Code abaixo com seu celular.</p>
                                <div class="instructions">
                                    <p><b>Como escanear o QR Code:</b></p>
                                    <ol>
                                        <li>Abra a câmera do seu celular;</li>
                                        <li>Aponte a câmera para o QR Code;</li>
                                        <li>Clique no link que aparecer na tela;</li>
                                        <li>Preencha seus dados funcionais.</li>
                                    </ol>
                                </div>
                                <div class="qr-code">${qrcode}</div>
                            </div>
                            <div class="footer">
                                Agradecemos sua participação e desejamos um excelente evento!
                            </div>
                        </div>
                    </body>
                    </html>
                `);
                printWindow.document.close();

                const logoImage = printWindow.document.getElementById('logoImage');
                logoImage.onload = function() {
                    printWindow.focus();
                    printWindow.print();
                    printWindow.close();
                };
            }

            document.addEventListener('DOMContentLoaded', function() {
                initFilters();
                initViewToggle();
                initToggleCancelado();

                document.getElementById('btnPrintQr')?.addEventListener('click', function() {
                    if (currentQrCode) {
                        printQrCode(currentQrCode);
                    }
                });

                document.getElementById('btnConfirmDelete')?.addEventListener('click', function() {
                    if (deleteFormId) {
                        const form = document.getElementById('deleteForm' + deleteFormId);
                        if (form) {
                            form.submit();
                        }
                    }
                });

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

                document.addEventListener('keydown', function(e) {
                    if (e.key === 'Escape') {
                        document.querySelectorAll('.modal-overlay.active').forEach(function(modal) {
                            modal.classList.remove('active');
                        });
                    }
                });
            });
        })();
    </script>
@endsection