@extends('layouts.app')

@section('content')
    <div class="animate__animated p-6" :class="[$store.app.animation]">

        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">

            {{-- CARD 1: Total de Eventos (Azul) --}}
            <div class="stat-card stat-card-blue shadow-xl rounded-lg p-5 text-white min-h-32">
                <div class="flex items-center justify-between">
                    <div>
                        <div class="text-3xl font-extrabold">{{ $estatisticas['total_eventos'] }}</div>
                        <div class="text-sm opacity-90 mt-1">Total de Eventos</div>
                    </div>
                    <div class="text-4xl opacity-70">
                        <i class="fas fa-calendar-alt"></i>
                    </div>
                </div>
            </div>

            {{-- CARD 2: Eventos Futuros (Verde) --}}
            <div class="stat-card stat-card-green shadow-xl rounded-lg p-5 text-white min-h-32">
                <div class="flex items-center justify-between">
                    <div>
                        <div class="text-3xl font-extrabold">{{ $estatisticas['eventos_futuros'] }}</div>
                        <div class="text-sm opacity-90 mt-1">Eventos Futuros</div>
                    </div>
                    <div class="text-4xl opacity-70">
                        <i class="fas fa-clock"></i>
                    </div>
                </div>
            </div>

            {{-- CARD 3: Eventos Hoje (Roxo) --}}
            <div class="stat-card stat-card-purple shadow-xl rounded-lg p-5 text-white min-h-32">
                <div class="flex items-center justify-between">
                    <div>
                        <div class="text-3xl font-extrabold">{{ $estatisticas['eventos_hoje'] }}</div>
                        <div class="text-sm opacity-90 mt-1">Eventos Hoje</div>
                    </div>
                    <div class="text-4xl opacity-70">
                        <i class="fas fa-calendar-day"></i>
                    </div>
                </div>
            </div>

            {{-- CARD 4: Participantes Confirmados (Laranja) --}}
            <div class="stat-card stat-card-orange shadow-xl rounded-lg p-5 text-white min-h-32">
                <div class="flex items-center justify-between">
                    <div>
                        <div class="text-3xl font-extrabold">{{ $estatisticas['participantes_confirmados'] }}</div>
                        <div class="text-sm opacity-90 mt-1">Participantes Presentes</div>
                    </div>
                    <div class="text-4xl opacity-70">
                        <i class="fas fa-users"></i>
                    </div>
                </div>
            </div>
        </div>

        {{-- TABELA PRINCIPAL DE EVENTOS --}}
        <div class="panel mt-6">
            <div class="flex items-center justify-between mb-5">
                <h5 class="text-lg font-semibold dark:text-white-light">Lista de Eventos</h5>
                <a href="{{ route('eventos.create') }}" class="btn btn-primary">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                        xmlns="http://www.w3.org/2000/svg" class="w-5 h-5">
                        <circle cx="12" cy="12" r="10" stroke="currentColor"
                            stroke-width="1.5" />
                        <path d="M15 12L12 12M12 12L9 12M12 12L12 9M12 12L12 15" stroke="currentColor"
                            stroke-width="1.5" stroke-linecap="round" />
                    </svg>
                    Novo Evento
                </a>
            </div>

            {{-- Exibe mensagem de SUCESSO (Verde) --}}
            @if (session('success'))
                <div class="alert alert-success mb-4" role="alert">
                    {{ session('success') }}
                </div>
            @endif

            {{-- Exibe mensagem de ERRO (Vermelho) --}}
            @if (session('error'))
                <div class="alert alert-danger mb-4" role="alert">
                    {{ session('error') }}
                </div>
            @endif

            {{-- Filtros --}}
            <div class="mb-4 grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm font-medium mb-1">Pesquisar:</label>
                    <input type="text" id="search" placeholder="Nome do evento, local ou proponente..."
                        class="form-input w-full">
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1">Status:</label>
                    <select id="status-filter" class="form-input w-full">
                        <option value="">Todos os Status</option>
                        <option value="ativo">Ativo</option>
                        <option value="cancelado">Cancelado</option>
                        <option value="adiado">Adiado</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium mb-1">Período:</label>
                    <select id="period-filter" class="form-input w-full">
                        <option value="">Todos os Períodos</option>
                        <option value="futuro">Eventos Futuros</option>
                        <option value="hoje">Hoje</option>
                        <option value="passado">Eventos Passados</option>
                    </select>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table-hover whitespace-nowrap dataTable-table" id="eventos-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Nome do Evento</th>
                            <th>Local</th>
                            <th>Proponente(s)</th>
                            <th>Data do Evento</th>
                            <th>Capacidade</th>
                            <th>Participantes</th>
                            <th>Status</th>
                            <th>Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($eventos as $evento)
                            <tr data-status="{{ $evento->status }}"
                                data-period="{{ $evento->evento_passado ? 'passado' : ($evento->data_evento->isToday() ? 'hoje' : 'futuro') }}"
                                data-search="{{ strtolower($evento->nome . ' ' . $evento->local . ' ' . $evento->proponente) }}">
                                <td>{{ $evento->id }}</td>
                                <td style="text-wrap: auto;">
                                    <span class="font-semibold">{{ $evento->nome }}</span>
                                    @if ($evento->observacoes)
                                        <div class="text-xs text-gray-500 mt-1">
                                            {{ Str::limit($evento->observacoes, 50) }}</div>
                                    @endif
                                </td>
                                <td style="text-wrap: auto;">
                                    <span>{{ $evento->local }}</span>
                                    @if ($evento->capacidade_local)
                                        <div class="text-xs text-gray-500">
                                            Máx: {{ number_format($evento->capacidade_local) }} pessoas
                                        </div>
                                    @endif
                                </td>
                                <td style="text-wrap: auto;">
                                    <div class="max-w-xs">
                                        <span title="{{ $evento->proponente }}">
                                            {{ $evento->proponentes_formatados }}
                                        </span>
                                    </div>
                                </td>
                                <td>
                                    <div
                                        class="font-semibold {{ $evento->evento_passado ? 'text-gray-500' : 'text-primary' }}">
                                        {{ $evento->data_evento->format('d/m/Y H:i') }}
                                    </div>
                                    <div class="text-xs text-gray-500">
                                        {{ $evento->data_evento->diffForHumans() }}
                                    </div>
                                </td>
                                <td>
                                    <div class="flex flex-col gap-1">
                                        <span
                                            class="badge bg-primary">{{ number_format($evento->quantidade_pessoas) }}</span>
                                        @if ($evento->excede_capacidade)
                                            <span class="badge bg-warning text-xs">⚠️ Excede</span>
                                        @endif
                                    </div>
                                </td>
                                <td>
                                    <div class="flex flex-col gap-1">
                                        <div class="flex gap-1">
                                            <span
                                                class="badge bg-success">{{ $evento->participantes_confirmados }}</span>
                                            <span
                                                class="badge bg-warning">{{ $evento->participantes_pendentes }}</span>
                                        </div>
                                        @if ($evento->participantes->count() > 0)
                                            <div class="text-xs text-gray-500">
                                                {{ $evento->taxa_ocupacao }}% ocupação
                                            </div>
                                        @endif
                                    </div>
                                </td>
                                <td>
                                    <span class="badge bg-{{ $evento->status_classe }}">
                                        {{ $evento->status_formatado }}
                                    </span>
                                </td>
                                <td>
                                    <div class="flex flex-col md:flex-row md:items-center gap-2">
                                        <a href="{{ route('eventos.show', $evento) }}"
                                            class="btn btn-outline-info btn-sm" title="Visualizar">
                                            {{-- Ícone de Visualizar --}}
                                            <svg width="20" height="20" viewBox="0 0 24 24"
                                                fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M15.0007 12C15.0007 13.6569 13.6576 15 12.0007 15C10.3439 15 9.00073 13.6569 9.00073 12C9.00073 10.3431 10.3439 9 12.0007 9C13.6576 9 15.0007 10.3431 15.0007 12Z"
                                                    stroke="currentColor" stroke-width="1.5" />
                                                <path
                                                    d="M12.0012 5C7.52354 5 3.73326 7.94288 2.45898 12C3.73324 16.0571 7.52354 19 12.0012 19C16.4788 19 20.2691 16.0571 21.5434 12C20.2691 7.94291 16.4788 5 12.0012 5Z"
                                                    stroke="currentColor" stroke-width="1.5" />
                                            </svg>
                                        </a>
                                        <a href="{{ route('eventos.edit', $evento) }}"
                                            class="btn btn-outline-warning btn-sm" title="Editar">
                                            {{-- Ícone de Editar --}}
                                            <svg width="20" height="20" viewBox="0 0 24 24"
                                                fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M15.2869 3.15178L14.3601 4.07866L5.83882 12.5999L5.83881 12.5999C5.26166 13.1771 4.97308 13.4656 4.7249 13.7838C4.43213 14.1592 4.18114 14.5653 3.97634 14.995C3.80273 15.3593 3.67368 15.7465 3.41556 16.5208L2.32181 19.8021L2.05445 20.6042C1.92743 20.9852 2.0266 21.4053 2.31063 21.6894C2.59466 21.9734 3.01478 22.0726 3.39584 21.9456L4.19792 21.6782L7.47918 20.5844L7.47919 20.5844C8.25353 20.3263 8.6407 20.1972 9.00498 20.0236C9.43469 19.8188 9.84082 19.5678 10.2162 19.2751C10.5344 19.0269 10.8229 18.7383 11.4001 18.1612L11.4001 18.1612L19.9213 9.63993L20.8482 8.71306C22.3839 7.17735 22.3839 4.68748 20.8482 3.15178C19.3125 1.61607 16.8226 1.61607 15.2869 3.15178Z"
                                                    stroke="currentColor" stroke-width="1.5" />
                                                <path opacity="0.5"
                                                    d="M14.36 4.07812C14.36 4.07812 14.4759 6.04774 16.2138 7.78564C17.9517 9.52354 19.9213 9.6394 19.9213 9.6394M4.19789 21.6777L2.32178 19.8015"
                                                    stroke="currentColor" stroke-width="1.5" />
                                            </svg>
                                        </a>
                                        <form action="{{ route('eventos.destroy', $evento->id) }}" method="POST"
                                            onsubmit="return confirm('Tem certeza que deseja excluir o evento? Esta ação não pode ser desfeita e irá ocultar o registro.');"
                                            style="display: inline;">

                                            @csrf
                                            @method('DELETE')

                                            <button type="submit"
                                                class="btn btn-outline-danger btn-sm"
                                                title="Excluir">

                                                {{-- Ícone de Excluir --}}
                                                <svg width="20" height="20" viewBox="0 0 24 24"
                                                    fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M20.5001 6H3.5" stroke="currentColor"
                                                        stroke-width="1.5" stroke-linecap="round" />
                                                    <path
                                                        d="M18.8334 8.5L18.3735 15.3991C18.1965 18.054 18.108 19.3815 17.243 20.1907C16.378 21 15.0476 21 12.3868 21H11.6134C8.9526 21 7.6222 21 6.75719 20.1907C5.89218 19.3815 5.80368 18.054 5.62669 15.3991L5.16675 8.5"
                                                        stroke="currentColor" stroke-width="1.5"
                                                        stroke-linecap="round" />
                                                    <path d="M9.5 11L10 16" stroke="currentColor"
                                                        stroke-width="1.5" stroke-linecap="round" />
                                                    <path d="M14.5 11L14 16" stroke="currentColor"
                                                        stroke-width="1.5" stroke-linecap="round" />
                                                    <path
                                                        d="M6.5 6C6.55588 6 6.58382 6 6.60915 5.99936C7.43259 5.97849 8.15902 5.45491 8.43922 4.68032C8.44784 4.65649 8.45667 4.62999 8.47434 4.57697L8.57143 4.28571C8.65431 4.03708 8.69575 3.91276 8.75071 3.8072C8.97001 3.38607 9.37574 3.09364 9.84461 3.01877C9.96213 3 10.0932 3 10.3553 3H13.6447C13.9068 3 14.0379 3 14.1554 3.01877C14.6243 3.09364 15.03 3.38607 15.2493 3.8072C15.3043 3.91276 15.3457 4.03708 15.4286 4.28571L15.5257 4.57697C15.5433 4.62999 15.5522 4.65649 15.5608 4.68032C15.841 5.45491 16.5674 5.97849 17.3909 5.99936C17.4162 6 17.4441 6 17.5 6"
                                                        stroke="currentColor" stroke-width="1.5" />
                                                </svg>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="text-center py-8">
                                    <div class="text-gray-500">Nenhum evento cadastrado</div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('styles')
    <style>
        .imglogosidebar {
            max-width: 193px;
            margin: -20% 0px;
        }

        .badge {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.5rem;
            border-radius: 0.375rem;
            font-size: 0.75rem;
            font-weight: 500;
            line-height: 1;
        }

        .bg-primary { background-color: #4361ee; color: white; }
        .bg-info { background-color: #2196f3; color: white; }
        .bg-success { background-color: #00ab55; color: white; }
        .bg-warning { background-color: #f59e0b; color: white; }
        .bg-danger { background-color: #ef4444; color: white; }
        .bg-secondary { background-color: #6b7280; color: white; }
        .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; }

        .alert {
            padding: 1rem;
            margin-bottom: 1rem;
            border: 1px solid transparent;
            border-radius: 0.375rem;
        }

        .alert-success {
            color: #0f5132;
            background-color: #d1e7dd;
            border-color: #badbcc;
        }
        .alert-danger {
            color: #721c24;
            background-color: #f8d7da;
            border-color: #f5c6cb;
        }

        .form-input {
            display: block;
            width: 100%;
            padding: 0.5rem 0.75rem;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            color: #495057;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #ced4da;
            border-radius: 0.375rem;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }

        .form-input:focus {
            color: #495057;
            background-color: #fff;
            border-color: #86b7fe;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }

        .dark .form-input {
            background-color: #1b2e4b;
            border-color: #191e3a;
            color: #bfc9d4;
        }

        .dark .form-input:focus {
            background-color: #1b2e4b;
            border-color: #4361ee;
            color: #bfc9d4;
        }

        /* Classes de alta especificidade para forçar a cor e resolver o conflito de tema/panel */
        .stat-card-blue {
            background-color: #2563EB !important; /* Tailwind blue-600 */
        }
        .stat-card-green {
            background-color: #10B981 !important; /* Tailwind green-600 */
        }
        .stat-card-purple {
            background-color: #9333EA !important; /* Tailwind purple-600 */
        }
        .stat-card-orange {
            background-color: #F97316 !important; /* Tailwind orange-600 */
        }

        /* Garante que o texto seja branco (necessário se o dark mode estiver interferindo) */
        .stat-card * {
            color: white !important;
        }
    </style>
@endsection

@section('scripts')
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('scrollToTop', () => ({
                showTopButton: false,
                init() {
                    window.onscroll = () => {
                        this.scrollFunction();
                    };
                },
                scrollFunction() {
                    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
                        this.showTopButton = true;
                    } else {
                        this.showTopButton = false;
                    }
                },
                goToTop() {
                    document.body.scrollTop = 0;
                    document.documentElement.scrollTop = 0;
                },
            }));

            Alpine.data('sidebar', () => ({
                init() {
                    // Lógica para marcar o item ativo
                    const selector = document.querySelector('.sidebar ul a[href="' + window.location
                        .pathname + '"]');
                    if (selector) {
                        selector.classList.add('active');
                    }
                },
            }));

            Alpine.data('header', () => ({
                init() {},
            }));

            Alpine.data('dropdown', () => ({
                open: false,
                toggle() {
                    this.open = !this.open;
                },
            }));
        });

        // Filtros da tabela (MANTIDOS NO LADO CLIENTE)
        $(document).ready(function() {
            function filterTable() {
                const searchTerm = $('#search').val().toLowerCase();
                const statusFilter = $('#status-filter').val();
                const periodFilter = $('#period-filter').val();

                $('#eventos-table tbody tr').each(function() {
                    const row = $(this);
                    const searchData = row.data('search') || '';
                    const status = row.data('status') || '';
                    const period = row.data('period') || '';

                    let show = true;

                    // Filtro de pesquisa
                    if (searchTerm && !searchData.includes(searchTerm)) {
                        show = false;
                    }

                    // Filtro de status
                    if (statusFilter && status !== statusFilter) {
                        show = false;
                    }

                    // Filtro de período
                    if (periodFilter) {
                        if (periodFilter === 'futuro' && period !== 'futuro') {
                            show = false;
                        } else if (periodFilter === 'hoje' && period !== 'hoje') {
                            show = false;
                        } else if (periodFilter === 'passado' && period !== 'passado') {
                            show = false;
                        }
                    }

                    row.toggle(show);
                });
            }

            // O input é disparado na digitação e os selects no change
            $('#search, #status-filter, #period-filter').on('input change', filterTable);
        });
    </script>
@endsection