{{-- resources/views/contratos/scripts/custom-scripts-modal-adicionar-evento.blade.php --}}
<script>
// Variáveis globais
let dataIndexModal = 0;
let flatpickrInstance = null;

document.addEventListener('DOMContentLoaded', function() {
    console.log('Inicializando script do modal de eventos...');
    
    // Elementos do DOM
    const dataEventoInput = document.getElementById('data_evento');
    const btnCalendarioModal = document.getElementById('btnCalendarioModal');
    const btnADefinirModal = document.getElementById('btnADefinirModal');
    const horaEventoInput = document.getElementById('hora_evento');
    const formAdicionarEvento = document.getElementById('formAdicionarEvento');
    const modalElement = document.getElementById('modalAdicionarEvento');

    // ===== MÁSCARA DE DATA AUTOMÁTICA =====
    function aplicarMascaraData(input) {
        if (!input) return;

        let isBackspacing = false;

        input.addEventListener('keydown', function(e) {
            isBackspacing = e.key === 'Backspace' || e.key === 'Delete';
        });

        input.addEventListener('input', function(e) {
            let value = e.target.value;

            if (isBackspacing) return;

            let numbersOnly = value.replace(/\D/g, '').substring(0, 8);
            let formatted = '';

            if (numbersOnly.length > 0) {
                formatted = numbersOnly.substring(0, 2);
            }
            if (numbersOnly.length > 2) {
                formatted += '/' + numbersOnly.substring(2, 4);
            }
            if (numbersOnly.length > 4) {
                formatted += '/' + numbersOnly.substring(4, 8);
            }

            if (formatted !== value) {
                e.target.value = formatted;
            }

            e.target.classList.remove('is-invalid');
        });

        input.addEventListener('keydown', function(e) {
            if ([8, 9, 27, 13, 46, 35, 36, 37, 38, 39, 40].indexOf(e.keyCode) !== -1 ||
                (e.ctrlKey === true && [65, 67, 86, 88, 90].indexOf(e.keyCode) !== -1) ||
                (e.keyCode >= 112 && e.keyCode <= 123)) {
                return;
            }

            if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
                e.preventDefault();
            }
        });
    }

    // ===== CONFIGURAÇÃO DO FLATPICKR =====
    function initFlatpickr() {
        if (dataEventoInput && !flatpickrInstance) {
            flatpickrInstance = flatpickr(dataEventoInput, {
                dateFormat: 'd/m/Y',
                locale: 'pt',
                allowInput: true,
                clickOpens: true,
                parseDate: (datestr) => {
                    if (!datestr) return null;
                    const regex = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/;
                    if (datestr.match(regex)) {
                        const [, day, month, year] = datestr.match(regex);
                        return new Date(year, month - 1, day);
                    }
                    return null;
                },
                formatDate: (date) => {
                    if (!(date instanceof Date)) return '';
                    const day = date.getDate().toString().padStart(2, '0');
                    const month = (date.getMonth() + 1).toString().padStart(2, '0');
                    const year = date.getFullYear();
                    return `${day}/${month}/${year}`;
                },
                onClose: function(selectedDates, dateStr) {
                    if (dateStr) {
                        dataEventoInput.classList.remove('is-invalid');
                        dataEventoInput.classList.add('is-valid');
                    }
                }
            });
        }
    }

    // ===== VALIDAÇÃO DE DATA =====
    function isValidDate(dateString) {
        if (!dateString) return false;
        const regex = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/;
        if (!regex.test(dateString)) return false;

        const [, day, month, year] = dateString.match(regex);
        const dayNum = parseInt(day, 10);
        const monthNum = parseInt(month, 10);
        const yearNum = parseInt(year, 10);

        if (dayNum < 1 || dayNum > 31 || monthNum < 1 || monthNum > 12 || yearNum < 1900 || yearNum > 2100) {
            return false;
        }

        const date = new Date(yearNum, monthNum - 1, dayNum);
        return date.getFullYear() === yearNum &&
            date.getMonth() === (monthNum - 1) &&
            date.getDate() === dayNum;
    }

    // ===== FUNCIONALIDADE MÚLTIPLAS DATAS =====
    function initMultiplasDatasModal() {
        console.log('Inicializando múltiplas datas...');
        
        const datasContainer = document.getElementById('datasContainerModal');
        const btnAdicionarData = document.getElementById('btnAdicionarDataModal');
        
        console.log('Container:', datasContainer);
        console.log('Botão:', btnAdicionarData);
        
        if (btnAdicionarData) {
            // Remover listeners anteriores
            btnAdicionarData.removeEventListener('click', handleAdicionarData);
            btnAdicionarData.addEventListener('click', handleAdicionarData);
            console.log('Event listener adicionado ao botão');
        } else {
            console.error('Botão btnAdicionarDataModal não encontrado!');
        }
        
        if (datasContainer) {
            datasContainer.addEventListener('click', function(e) {
                const removeButton = e.target.closest('.btn-remove-data-modal');
                if (removeButton) {
                    e.preventDefault();
                    const dataItem = removeButton.closest('.data-item-modal');
                    if (dataItem) {
                        dataItem.style.transition = 'all 0.3s ease';
                        dataItem.style.opacity = '0';
                        dataItem.style.transform = 'translateX(-100px)';
                        
                        setTimeout(() => {
                            dataItem.remove();
                            atualizarResumoVisualModal();
                            reindexarDatasModal();
                        }, 300);
                    }
                }
            });
            
            datasContainer.addEventListener('change', function(e) {
                if (e.target.classList.contains('data-input-modal')) {
                    atualizarResumoVisualModal();
                }
            });
        }
    }

    function handleAdicionarData(e) {
        e.preventDefault();
        console.log('Botão adicionar data clicado!');
        adicionarNovaDataModal();
    }

    function adicionarNovaDataModal() {
        console.log('Adicionando nova data...');
        const datasContainer = document.getElementById('datasContainerModal');
        if (!datasContainer) {
            console.error('Container de datas não encontrado!');
            return;
        }
        
        const novaDataHtml = `
            <div class="data-item-modal card border-start border-primary border-3 mb-2" data-index="${dataIndexModal}">
                <div class="card-body p-3">
                    <div class="row g-2 align-items-center">
                        <div class="col-12 col-sm-3">
                            <label class="form-label small fw-bold mb-1">Data</label>
                            <input type="text" 
                                   class="form-control form-control-sm data-input-modal flatpickr-data-modal" 
                                   name="datas[${dataIndexModal}][data]" 
                                   placeholder="DD/MM/AAAA">
                        </div>
                        <div class="col-6 col-sm-2">
                            <label class="form-label small fw-bold mb-1">Hora</label>
                            <div class="input-group input-group-sm">
                                <input type="text" 
                                       class="form-control hora-modal" 
                                       name="datas[${dataIndexModal}][hora]" 
                                       placeholder="14:30">
                                <button class="btn btn-outline-secondary btn-sm" type="button" onclick="toggleHoraModal(this)" title="A definir">
                                    <i class="fas fa-clock fs-10"></i>
                                </button>
                            </div>
                        </div>
                        <div class="col-12 col-sm-5">
                            <label class="form-label small fw-bold mb-1">Observações</label>
                            <input type="text" 
                                   class="form-control form-control-sm" 
                                   name="datas[${dataIndexModal}][observacoes]" 
                                   placeholder="Ex: Abertura, Show principal...">
                        </div>
                        <div class="col-6 col-sm-2 text-end">
                            <label class="form-label small d-none d-sm-block">&nbsp;</label>
                            <button type="button" class="btn btn-outline-danger btn-sm btn-remove-data-modal w-100" data-index="${dataIndexModal}" title="Remover">
                                <i class="fas fa-trash fs-10"></i>
                            </button>
                        </div>
                    </div>
                    <div class="position-absolute top-0 end-0 m-2">
                        <span class="badge bg-primary rounded-pill">${dataIndexModal + 1}</span>
                    </div>
                </div>
            </div>
        `;
        
        datasContainer.insertAdjacentHTML('beforeend', novaDataHtml);
        dataIndexModal++;
        
        // Inicializar Flatpickr no novo campo
        const novoCampoData = datasContainer.querySelector('.data-item-modal:last-child .flatpickr-data-modal');
        if (novoCampoData && typeof flatpickr !== 'undefined') {
            flatpickr(novoCampoData, {
                dateFormat: 'd/m/Y',
                locale: 'pt',
                allowInput: true,
                parseDate: (datestr) => {
                    if (!datestr) return null;
                    const match = datestr.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
                    if (match) {
                        return new Date(
                            parseInt(match[3], 10),
                            parseInt(match[2], 10) - 1,
                            parseInt(match[1], 10)
                        );
                    }
                    return null;
                },
                formatDate: (date) => {
                    if (!(date instanceof Date)) return '';
                    const d = String(date.getDate()).padStart(2, '0');
                    const m = String(date.getMonth() + 1).padStart(2, '0');
                    const y = date.getFullYear();
                    return `${d}/${m}/${y}`;
                }
            });
        }
        
        atualizarResumoVisualModal();
        console.log('Nova data adicionada com sucesso!');
    }

    function reindexarDatasModal() {
        const datasContainer = document.getElementById('datasContainerModal');
        if (!datasContainer) return;
        
        const dataItems = datasContainer.querySelectorAll('.data-item-modal');
        
        dataItems.forEach((item, index) => {
            item.setAttribute('data-index', index);
            
            const inputs = item.querySelectorAll('input');
            inputs.forEach(input => {
                const name = input.getAttribute('name');
                if (name && name.includes('datas[')) {
                    const newName = name.replace(/datas\[\d+\]/, `datas[${index}]`);
                    input.setAttribute('name', newName);
                }
            });
            
            const removeBtn = item.querySelector('.btn-remove-data-modal');
            if (removeBtn) {
                removeBtn.setAttribute('data-index', index);
            }
            
            const badge = item.querySelector('.badge');
            if (badge) {
                badge.textContent = index + 1;
            }
        });
        
        dataIndexModal = dataItems.length;
    }

    function atualizarResumoVisualModal() {
        const dataPrincipal = dataEventoInput?.value;
        const dataInputs = document.querySelectorAll('#datasContainerModal .data-input-modal');
        const resumoTexto = document.getElementById('resumoTextoModal');
        
        if (!resumoTexto) return;
        
        const datasAdicionais = Array.from(dataInputs)
            .map(input => input.value)
            .filter(data => data && data.trim() !== '');
        
        if (datasAdicionais.length === 0) {
            resumoTexto.textContent = 'Configure datas adicionais se o evento durar mais de um dia';
            return;
        }
        
        if (datasAdicionais.length === 1) {
            resumoTexto.textContent = `Evento em 2 dias: ${dataPrincipal || 'Data principal'} e ${datasAdicionais[0]}`;
        } else {
            const totalDias = datasAdicionais.length + 1;
            resumoTexto.textContent = `Evento de ${totalDias} dias`;
        }
    }

    // ===== FUNCIONALIDADE HORA =====
    if (btnADefinirModal && horaEventoInput) {
        btnADefinirModal.addEventListener('click', function() {
            if (horaEventoInput.value === 'A definir') {
                horaEventoInput.value = '';
                horaEventoInput.focus();
            } else {
                horaEventoInput.value = 'A definir';
            }
        });

        horaEventoInput.addEventListener('input', function() {
            if (this.value !== 'A definir') {
                let value = this.value.replace(/\D/g, '').substring(0, 4);

                if (value.length >= 2) {
                    let hours = value.substring(0, 2);
                    let minutes = value.substring(2, 4);

                    if (parseInt(hours) > 23) hours = '23';
                    if (minutes && parseInt(minutes) > 59) minutes = '59';

                    this.value = hours + (minutes ? ':' + minutes : '');
                } else {
                    this.value = value;
                }
            }
        });
    }

    // ===== SUBMISSÃO DO FORMULÁRIO =====
    if (formAdicionarEvento) {
        formAdicionarEvento.addEventListener('submit', function(e) {
            e.preventDefault();

            if (this.dataset.sending === 'true') return;
            this.dataset.sending = 'true';

            const dataValue = dataEventoInput.value;
            if (!dataValue || !isValidDate(dataValue)) {
                dataEventoInput.classList.add('is-invalid');
                this.dataset.sending = 'false';
                return;
            }

            const formData = new FormData(this);

            fetch(this.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const eventoSelect = document.getElementById('evento_id');
                    if (eventoSelect) {
                        const option = document.createElement('option');
                        option.value = data.evento.id;
                        option.text = data.evento.display_text;
                        option.selected = true;
                        eventoSelect.appendChild(option);
                        
                        if ($(eventoSelect).hasClass('select2-hidden-accessible')) {
                            $(eventoSelect).trigger('change');
                        }
                    }

                    const modal = bootstrap.Modal.getInstance(modalElement);
                    modal.hide();

                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            title: 'Sucesso!',
                            text: data.message,
                            icon: 'success',
                            timer: 2000,
                            showConfirmButton: false
                        });
                    }
                } else {
                    console.error('Erro:', data);
                }
            })
            .catch(error => {
                console.error('Erro:', error);
            })
            .finally(() => {
                this.dataset.sending = 'false';
            });
        });
    }

    // ===== EVENTOS DO MODAL =====
    if (modalElement) {
        modalElement.addEventListener('shown.bs.modal', function() {
            console.log('Modal mostrado, inicializando...');
            initMultiplasDatasModal();
            
            const nomeInput = document.getElementById('nome_evento');
            if (nomeInput) {
                setTimeout(() => nomeInput.focus(), 100);
            }
        });

        modalElement.addEventListener('hidden.bs.modal', function() {
            if (flatpickrInstance) {
                flatpickrInstance.destroy();
                flatpickrInstance = null;
            }

            const datasContainer = document.getElementById('datasContainerModal');
            if (datasContainer) {
                datasContainer.innerHTML = '';
            }
            dataIndexModal = 0;
            atualizarResumoVisualModal();

            formAdicionarEvento.reset();
            formAdicionarEvento.querySelectorAll('.is-valid, .is-invalid').forEach(el => {
                el.classList.remove('is-valid', 'is-invalid');
            });
        });
    }

    // ===== INICIALIZAÇÃO =====
    aplicarMascaraData(dataEventoInput);
    initFlatpickr();
    
    if (btnCalendarioModal) {
        btnCalendarioModal.addEventListener('click', function() {
            if (flatpickrInstance) {
                flatpickrInstance.open();
            }
        });
    }
});

// Função global para toggle de hora
window.toggleHoraModal = function(button) {
    const input = button.parentNode.querySelector('input');
    if (input.value === 'A definir') {
        input.value = '';
        input.focus();
    } else {
        input.value = 'A definir';
    }
};
</script>