@extends('layouts.app')

{{-- Define a variável $evento como um novo Evento se não estiver definida (para a view 'create') --}}
@php
    $isEdit = isset($evento) && $evento->exists;
    $titulo = $isEdit ? 'Editar Evento' : 'Cadastrar Novo Evento';
    $action = $isEdit ? route('eventos.update', $evento) : route('eventos.store');
    $method = $isEdit ? 'PUT' : 'POST';
    $buttonText = $isEdit ? 'Atualizar Evento' : 'Cadastrar Evento';

    // Lógica para carregar proponentes para edição/old
    $proponentesArray = old('proponentes');
    if (!$proponentesArray && $isEdit) {
        // Assume que 'proponente' é uma coluna de texto no DB separada por vírgulas
        $proponentesString = $evento->proponente ?? '';
        $proponentesArray = array_map('trim', explode(',', $proponentesString));
        // Se a string for vazia (ou explode resultar em ['']), garante pelo menos um campo vazio
        if (empty(array_filter($proponentesArray))) {
             $proponentesArray = [''];
        }
    } elseif (!$proponentesArray) {
        $proponentesArray = ['']; // Para a criação, sempre começa com um campo
    }
@endphp

@section('content')
    <div class="panel mt-6">
        <div class="flex items-center justify-between mb-5">
            <h5 class="text-lg font-semibold dark:text-white-light">{{ $titulo }}</h5>

            {{-- Container para alinhar os botões à direita --}}
            <div class="flex items-center gap-4">

                @if($isEdit)
                    {{-- BOTÃO VISUALIZAR (Olho) --}}
                    {{-- Corrigido o link para 'show' e o ícone para 'olho' --}}
                    <a href="{{ route('eventos.show', $evento) }}" class="btn btn-outline-warning">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5">
                            <path d="M2.012 12c.706 2.502 3.03 5.485 10 5.485s9.294-2.983 10-5.485c-.706-2.502-3.03-5.485-10-5.485S2.718 9.498 2.012 12z"></path>
                            <circle cx="12" cy="12" r="3"></circle>
                        </svg>
                        Visualizar
                    </a>
                @endif

                {{-- BOTÃO VOLTAR --}}
                <a href="{{ route('eventos.index') }}" class="btn btn-outline-primary">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                        xmlns="http://www.w3.org/2000/svg" class="w-5 h-5">
                        <path d="M15 6L9 12L15 18" stroke="currentColor" stroke-width="1.5"
                            stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    Voltar
                </a>
            </div>
        </div>

        @if ($errors->any())
            <div class="alert alert-danger mb-4">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ $action }}" method="POST" class="space-y-5" id="eventoForm">
            @csrf
            @if ($isEdit)
                @method('PUT')
            @endif

            {{-- CAMPOS DE DETALHE --}}
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                {{-- Nome --}}
                <div>
                    <label for="nome"
                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Nome do
                        Evento *</label>
                    <input type="text" id="nome" name="nome"
                        class="form-input w-full @error('nome') border-red-500 @enderror"
                        value="{{ old('nome', $evento->nome ?? '') }}" placeholder="Digite o nome do evento"
                        required>
                    @error('nome')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Local (Autocomplete) --}}
                <div>
                    <label for="local_id"
                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Local
                        *</label>
                    <select id="local_id" name="local_id"
                        class="form-select w-full @error('local_id') border-red-500 @enderror"
                        required>
                        <option value="{{ $evento->local_id }}" data-ocupacao="0">Selecione o local</option>
                        @foreach ($locais as $local)
                            @if($local->ocupacao < 10)
                                @continue
                            @endif
                            <option value="{{ $local->id }}"
                                data-nome="{{ $local->nome_completo }}"
                                data-descricao="{{ $local->descricao }}"
                                data-ocupacao="{{ $local->ocupacao }}"
                                {{ old('local_id', $evento->local_id ?? '') == $local->id ? 'selected' : '' }}>
                                {{ $local->nome_completo }} (Capacidade: {{ $local->ocupacao }})
                            </option>
                        @endforeach
                    </select>

                    @error('local_id')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror

                    {{-- Informações do local (visível por JS) --}}
                    <div id="local-info" class="mt-2 text-sm text-gray-600 dark:text-gray-400 hidden">
                        <div id="local-descricao"></div>
                        <div id="local-ocupacao" class="font-semibold text-primary"></div>
                    </div>
                </div>
            </div>

            {{-- CAMPO PROPONENTE(S) (LISTA DINÂMICA) --}}
            <div>
                <label for="proponentes"
                    class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Proponente(s)
                    *</label>
                <div id="proponentes-container">
                    @foreach ($proponentesArray as $index => $proponente)
                        <div class="proponente-item flex gap-2 mb-2">
                            <div class="relative flex-1">
                                <input type="text" name="proponentes[]"
                                    class="form-input w-full proponente-input @error('proponentes.' . $index) border-red-500 @enderror"
                                    value="{{ $proponente }}"
                                    placeholder="Digite o nome do deputado proponente" autocomplete="off"
                                    required>
                                <div class="deputados-suggestions autocomplete-suggestions"></div>
                            </div>
                            <button type="button"
                                class="btn btn-outline-danger remove-proponente {{ count($proponentesArray) <= 1 ? 'hidden' : '' }}">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                                    <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="1.5" />
                                </svg>
                            </button>
                        </div>
                    @endforeach
                </div>
                <button type="button" id="add-proponente" class="btn btn-outline-success btn-sm mt-2">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                        <path d="M12 2L12 22M2 12L22 12" stroke="currentColor" stroke-width="1.5" />
                    </svg>
                    Adicionar Proponente
                </button>
                @error('proponentes')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            {{-- CAMPOS DE DATA, QUANTIDADE E STATUS --}}
            <div class="grid grid-cols-1 md:grid-cols-3 gap-5">

                {{-- 1. CAMPO DATA E HORA --}}
                <div>
                    <label for="data_evento"
                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Data e Hora
                        do Evento *</label>
                    <input type="datetime-local" id="data_evento" name="data_evento"
                        class="form-input w-full @error('data_evento') border-red-500 @enderror"
                        value="{{ old('data_evento', $isEdit && $evento->data_evento ? $evento->data_evento->format('Y-m-d\TH:i') : '') }}"
                        required>
                    @error('data_evento')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- 2. CAMPO QUANTIDADE DE PESSOAS --}}
                <div>
                    <label for="quantidade_pessoas"
                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Quantidade
                        de Pessoas *</label>
                    <input type="number" id="quantidade_pessoas" name="quantidade_pessoas"
                        class="form-input w-full @error('quantidade_pessoas') border-red-500 @enderror"
                        value="{{ old('quantidade_pessoas', $evento->quantidade_pessoas ?? '') }}"
                        placeholder="Digite a quantidade de pessoas" min="1" required>
                    <div id="ocupacao-warning" class="text-warning text-sm mt-1 hidden">
                        ⚠️ A quantidade excede a capacidade máxima do local!
                    </div>
                    @error('quantidade_pessoas')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- 3. CAMPO STATUS --}}
                <div>
                    <label for="status"
                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Status
                        do Evento *</label>
                    @php
                        // Define o valor atual (se estiver em edição, usa o valor do evento, senão 'ativo' como default)
                        $currentStatus = old('status', $evento->status ?? 'ativo');
                        $statuses = [
                            'ativo' => 'Ativo',
                            'cancelado' => 'Cancelado',
                            'adiado' => 'Adiado',
                        ];
                    @endphp
                    <select id="status" name="status"
                        class="form-select w-full @error('status') border-red-500 @enderror"
                        required>
                        @foreach ($statuses as $value => $label)
                            <option value="{{ $value }}"
                                {{ $currentStatus == $value ? 'selected' : '' }}>
                                {{ $label }}
                            </option>
                        @endforeach
                    </select>
                    @error('status')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

            </div>

            <div class="flex gap-3 pt-5">
                <button type="submit" 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">
                        <path d="M12 3V21M3 12H21" stroke="currentColor" stroke-width="1.5"
                            stroke-linecap="round" />
                    </svg>
                    {{ $buttonText }}
                </button>
                <a href="{{ route('eventos.index') }}" class="btn btn-outline-secondary">
                    Cancelar
                </a>
            </div>
        </form>
    </div>
@endsection

@section('styles')
    <style>
        .border-red-500 { border-color: #ef4444 !important; }
        .text-red-500 { color: #ef4444; }
        .text-warning { color: #f59e0b; }
        .alert-danger { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; }
        .alert ul { margin-bottom: 0; padding-left: 1rem; }

        .autocomplete-suggestions {
            position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #ddd;
            border-top: none; border-radius: 0 0 0.375rem 0.375rem; max-height: 200px;
            overflow-y: auto; z-index: 1000; display: none;
        }
        .suggestion-item { padding: 0.5rem 0.75rem; cursor: pointer; border-bottom: 1px solid #eee; }
        .suggestion-item:hover { background-color: #f8f9fa; }

        .dark .autocomplete-suggestions { background-color: #1b2e4b; border-color: #191e3a; }
        .dark .suggestion-item { color: #bfc9d4; border-bottom-color: #2d3748; }
        .dark .suggestion-item:hover { background-color: #2d3748; }
    </style>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            let currentLocalOcupacao = {{ $isEdit && ($evento->capacidade_local ?? 0) > 0 ? $evento->capacidade_local : 0 }};

            // --- FUNÇÕES REUTILIZÁVEIS ---
            function checkOcupacao() {
                const quantidade = parseInt($('#quantidade_pessoas').val()) || 0;
                if (currentLocalOcupacao > 0 && quantidade > currentLocalOcupacao) {
                    $('#ocupacao-warning').show();
                } else {
                    $('#ocupacao-warning').hide();
                }
            }

            // Autocomplete para deputados - Inicializa a função de busca AJAX
            function initDeputadoAutocomplete(input) {
                input.on('input', function() {
                    const term = $(this).val();
                    const suggestionsContainer = $(this).siblings('.deputados-suggestions');

                    if (term.length < 2) {
                        suggestionsContainer.hide();
                        return;
                    }

                    $.ajax({
                        url: '{{ route('eventos.search-deputados') }}',
                        data: { term: term },
                        success: function(data) {
                            let suggestions = '';
                            data.forEach(function(item) {
                                // **USANDO TEMPLATE LITERALS** para melhor manutenção
                                suggestions +=
                                    `<div class="suggestion-item deputado-suggestion" data-deputado='${JSON.stringify(item)}'>${item.label}</div>`;
                            });
                            suggestionsContainer.html(suggestions).show();
                        },
                        error: function(xhr, status, error) { console.error('Erro na busca de deputados:', error); }
                    });
                });
            }

            function updateRemoveButtons() {
                const items = $('.proponente-item');
                if (items.length > 1) {
                    $('.remove-proponente').show();
                } else {
                    $('.remove-proponente').hide();
                }
            }

            function updateLocalInfo(selectElement) {
                const selectedOption = $(selectElement).find('option:selected');
                const ocupacao = parseInt(selectedOption.data('ocupacao')) || 0;
                const descricao = selectedOption.data('descricao') || '';
                const nome = selectedOption.data('nome') || '';

                currentLocalOcupacao = ocupacao;

                if (ocupacao > 0) {
                    $('#local-descricao').text(nome + (descricao ? `: ${descricao}` : ''));
                    $('#local-ocupacao').text(`Capacidade máxima: ${new Intl.NumberFormat().format(ocupacao)} pessoas`);
                    $('#local-info').show();
                } else {
                    $('#local-info').hide();
                }

                checkOcupacao();
            }

            // --- EVENT LISTENERS E INICIALIZAÇÃO ---

            // 1. Monitora a mudança no select
            $('#local_id').on('change', function() {
                updateLocalInfo(this);
            });

            // 3. INICIALIZAÇÃO NA CARGA DA PÁGINA (Edição)
            // Se um local foi pré-selecionado (em edit ou old), mostre a info imediatamente.
            updateLocalInfo($('#local_id'));

            // Selecionar local (delegação)
            $(document).on('click', '#locais-suggestions .suggestion-item', function() {
                try {
                    const localData = $(this).attr('data-local');
                    const local = JSON.parse(localData);

                    $('#local').val(local.nome_completo);
                    $('#locais-suggestions').hide();

                    $('#local-descricao').text(local.descricao);
                    $('#local-ocupacao').text(`Capacidade máxima: ${local.ocupacao} pessoas`);
                    $('#local-info').show();

                    currentLocalOcupacao = local.ocupacao;
                    checkOcupacao();
                } catch (error) { console.error('Erro ao processar seleção de local:', error); }
            });

            // Adicionar novo proponente
            $('#add-proponente').click(function() {
                const container = $('#proponentes-container');
                const newItemHtml = `
                    <div class="proponente-item flex gap-2 mb-2">
                        <div class="relative flex-1">
                            <input type="text" name="proponentes[]"
                                class="form-input w-full proponente-input"
                                placeholder="Digite o nome do deputado proponente" autocomplete="off" required>
                            <div class="deputados-suggestions autocomplete-suggestions"></div>
                        </div>
                        <button type="button" class="btn btn-outline-danger remove-proponente">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                                <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="1.5"/>
                            </svg>
                        </button>
                    </div>
                `;
                container.append(newItemHtml);
                initDeputadoAutocomplete(container.find('.proponente-input').last());
                updateRemoveButtons();
            });

            // Remover proponente (delegação)
            $(document).on('click', '.remove-proponente', function() {
                $(this).closest('.proponente-item').remove();
                updateRemoveButtons();
            });

            // Selecionar deputado (delegação)
            $(document).on('click', '.deputados-suggestions .suggestion-item', function() {
                try {
                    const deputadoData = $(this).attr('data-deputado');
                    const deputado = JSON.parse(deputadoData);
                    const input = $(this).closest('.relative').find('.proponente-input');

                    input.val(deputado.label); // Use 'label' ou 'nome' conforme o que você realmente precisa exibir.
                    $(this).closest('.deputados-suggestions').hide();
                } catch (error) { console.error('Erro ao processar seleção de deputado:', error); }
            });

            // Inicializar autocomplete nos campos existentes (proponentes) e a validação de ocupação
            $('.proponente-input').each(function() {
                initDeputadoAutocomplete($(this));
            });
            updateRemoveButtons();
            checkOcupacao(); // Checa na carga da página

            // Monitorar campo de quantidade de pessoas
            $('#quantidade_pessoas').on('input', checkOcupacao);

            // Esconder sugestões ao clicar fora
            $(document).click(function(e) {
                if (!$(e.target).closest('.relative').length) {
                    $('.autocomplete-suggestions').hide();
                }
            });

            // Validação adicional do formulário (proponentes)
            $('#eventoForm').on('submit', function(e) {
                const proponentes = $('input[name="proponentes[]"]').map(function() {
                    return $(this).val().trim();
                }).get().filter(function(val) { return val !== ''; });

                if (proponentes.length === 0) {
                    e.preventDefault();
                    alert('É necessário informar pelo menos um proponente.');
                    return false;
                }
                return true;
            });
        });
    </script>
@endsection