@extends('layouts.app')

@section('title', 'Criar Contrato')

@section('content')
<div class="content pt-3">
    <nav class="mb-3" aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('contratos.index') }}">Contratos</a></li>
            <li class="breadcrumb-item active" aria-current="page">Criar Contrato</li>
        </ol>
    </nav>

    <div>
        <h2 class="mb-1">{{ $title }}</h2>
        <h5 class="text-body-secondary">{{ $subtitle }}</h5>
    </div>

    @include('contratos.partials.form', [
        'action' => route('contratos.store'),
        'method' => null,
        'title' => 'Criar Contrato',
        'subtitle' => 'Preencha os campos para criar um novo contrato.',
        'contrato' => null,
        'empresas' => $empresas,
        'planos' => $planos,
        'clientes' => $clientes,
        'modelos' => $modelos,
    ])
</div>
@endsection

@push('scripts-custom')
<script src="{{ asset('vendors/tinymce/tinymce.min.js') }}"></script>
<script>
    tinymce.init({
        selector: '.tinymce',
        plugins: 'lists link image table code',
        toolbar: 'undo redo | formatselect | bold italic underline | alignleft aligncenter alignright | numlist bullist | link image table | code',
        height: 400,
        menubar: false,
        content_style: "body { font-family: Arial, sans-serif; font-size: 14px; }"
    });

    document.addEventListener('DOMContentLoaded', () => {
        const cpfCnpjInput = document.getElementById('cpf_cnpj_search');
        const clienteDados = document.getElementById('cliente-dados');
        const tipoSelect = document.getElementById('tipo');
        const documentoInput = document.getElementById('documento');
        const cidadeInputStep2 = document.getElementById('cidade_step2'); // Campo cidade do Step 2
        const cidadeInputStep1 = document.getElementById('cidade_step1'); // Campo cidade do Step 1
        const cepInput = document.getElementById('cep');
        const logradouroInput = document.getElementById('logradouro');
        const bairroInput = document.getElementById('bairro');
        const estadoSelect = document.getElementById('estado');
        const nextButton = document.querySelector('[data-wizard-next-btn]');
        const prevButton = document.querySelector('[data-wizard-prev-btn]');
        let currentStep = document.querySelector('.tab-pane.active');
        const cadastrarButton = document.getElementById('cadastrarCliente');
        const editarButton = document.getElementById('editarCliente');
        const clienteForm = document.getElementById('clienteForm');
        const telefoneInput = document.getElementById('telefone');

        // Função para mostrar mensagens
        function exibirMensagem(tipo, mensagens) {
            const mensagensContainer = document.querySelector('.content'); // Alvo dentro do conteúdo principal
            const alertDiv = document.createElement('div');

            alertDiv.className = `alert alert-${tipo}`;
            if (Array.isArray(mensagens)) {
                const ul = document.createElement('ul');
                mensagens.forEach(mensagem => {
                    const li = document.createElement('li');
                    li.textContent = mensagem;
                    ul.appendChild(li);
                });
                alertDiv.appendChild(ul);
            } else {
                alertDiv.textContent = mensagens;
            }

            mensagensContainer.prepend(alertDiv);

            // Remove a mensagem após alguns segundos (opcional)
            setTimeout(() => alertDiv.remove(), 5000);
        }

        // Função para salvar um novo cliente
        cadastrarButton.addEventListener('click', () => {
            const formData = new FormData(clienteForm);

            fetch('/contratos/cadastrar-cliente', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                },
            })
                .then(response => {
                    if (!response.ok) {
                        return response.json().then(errData => {
                            throw new Error(errData.message || 'Erro desconhecido ao cadastrar cliente.');
                        });
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.success) {
                        exibirMensagem('success', 'Cliente cadastrado com sucesso!');
                        clienteDados.classList.add('d-none');
                        cpfCnpjInput.value = '';
                        clienteForm.reset();
                        cadastrarButton.classList.add('d-none');
                    } else {
                        exibirMensagem('danger', data.message || 'Erro ao cadastrar cliente.');
                    }
                })
                .catch(error => {
                    console.error('Erro ao cadastrar cliente:', error);
                    exibirMensagem('danger', error.message || 'Ocorreu um erro ao tentar cadastrar o cliente.');
                });
        });

        // Atualize a chamada ao salvar cliente
        editarButton.addEventListener('click', () => {
            const clienteId = document.getElementById('cliente_id').value.trim(); // Obtém o ID do cliente
            if (!clienteId) {
                exibirMensagem('danger', 'Erro: Não foi possível determinar o ID do cliente.');
                return;
            }

            // Converte os dados do formulário para JSON
            const formData = new FormData(clienteForm);
            const data = Object.fromEntries(formData.entries());
            data.id = clienteId;

            fetch('/contratos/atualizar-cliente', {
                method: 'PUT',
                body: JSON.stringify(data),
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                },
            })
                .then(response => {
                    if (!response.ok) {
                        return response.json().then(errData => {
                            throw new Error(errData.message || 'Erro desconhecido ao atualizar cliente.');
                        });
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.success) {
                        exibirMensagem('success', 'Cliente atualizado com sucesso!');
                    } else {
                        exibirMensagem('danger', data.message || 'Erro ao atualizar cliente.');
                    }
                })
                .catch(error => {
                    console.error('Erro ao atualizar cliente:', error);
                    exibirMensagem('danger', error.message || 'Ocorreu um erro ao tentar atualizar o cliente.');
                });
        });

        // Máscara dinâmica para CPF ou CNPJ
        cpfCnpjInput.addEventListener('input', () => {
            const rawValue = cpfCnpjInput.value.replace(/\D/g, ''); // Remove caracteres não numéricos

            if (rawValue.length <= 11) {
                // Formato de CPF
                cpfCnpjInput.value = rawValue
                    .replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4')
                    .slice(0, 14); // Limita o tamanho máximo
                tipoSelect.value = 'cpf'; // Atualiza o campo Tipo para CPF
            } else if (rawValue.length <= 14) {
                // Formato de CNPJ
                cpfCnpjInput.value = rawValue
                    .replace(/(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/, '$1.$2.$3/$4-$5')
                    .slice(0, 18); // Limita o tamanho máximo
                tipoSelect.value = 'cnpj'; // Atualiza o campo Tipo para CNPJ
            }
        });

        // Busca cliente por CPF ou CNPJ
        cpfCnpjInput.addEventListener('blur', () => {
            const cpfCnpj = cpfCnpjInput.value.trim();
            const rawValue = cpfCnpj.replace(/\D/g, ''); // Remove caracteres não numéricos

            // Atualiza automaticamente o tipo com base no tamanho do valor
            if (rawValue.length <= 11) {
                tipoSelect.value = 'cpf';
            } else if (rawValue.length > 11 && rawValue.length <= 14) {
                tipoSelect.value = 'cnpj';
            }

            if (cpfCnpj) {
                fetch(`/clientes/search?cpf_cnpj=${cpfCnpj}`)
                    .then(response => response.json())
                    .then(data => {
                        clienteDados.classList.remove('d-none');

                        if (data.success) {
                            const cliente = data.cliente;

                            // Atualiza o campo oculto com o ID do cliente
                            document.getElementById('cliente_id').value = cliente.id;

                            for (const key in cliente) {
                                const input = document.getElementById(key);
                                if (input) {
                                    input.value = cliente[key];

                                    // Bloquear edição para tipo e documento
                                    if (key === 'tipo' || key === 'documento') {
                                        input.setAttribute('disabled', true);
                                    }
                                }
                            }

                            // Exibe o botão "Salvar Alterações"
                            editarButton.classList.remove('d-none');
                            cadastrarButton.classList.add('d-none');
                        } else {
                            // Cliente não encontrado
                            clienteForm.reset();
                            clienteDados.querySelectorAll('input, select').forEach(input => {
                                input.value = '';
                                input.removeAttribute('disabled');
                            });
                            documentoInput.value = cpfCnpj;

                            // Define o tipo automaticamente (caso não encontrado)
                            if (rawValue.length <= 11) {
                                tipoSelect.value = 'cpf';
                            } else if (rawValue.length > 11 && rawValue.length <= 14) {
                                tipoSelect.value = 'cnpj';
                            }

                            // Esconde o botão de edição e exibe o botão de cadastro
                            editarButton.classList.add('d-none');
                            cadastrarButton.classList.remove('d-none');
                        }
                    })
                    .catch(error => console.error('Erro ao buscar cliente:', error));
            }
        });

        // Máscara e validação para CEP
        cepInput.addEventListener('input', () => {
            let cep = cepInput.value.replace(/\D/g, ''); // Remove caracteres não numéricos
            if (cep.length > 8) cep = cep.slice(0, 8); // Limita a 8 dígitos
            if (cep.length >= 6) {
                cepInput.value = `${cep.slice(0, 5)}-${cep.slice(5)}`; // Formato 99999-999
            } else {
                cepInput.value = cep;
            }
        });

        // Busca endereço pelo CEP
        cepInput.addEventListener('blur', () => {
            const cep = cepInput.value.replace(/\D/g, ''); // Remove caracteres não numéricos

            if (cep.length === 8) {
                fetch(`https://viacep.com.br/ws/${cep}/json/`)
                    .then(response => response.json())
                    .then(data => {
                        if (!data.erro) {
                            logradouroInput.value = data.logradouro || '';
                            bairroInput.value = data.bairro || '';
                            if (cidade) {
                                cidade.value = data.localidade || '';
                            }
                            if (estadoSelect) {
                                estadoSelect.value = data.uf || '';
                            }
                        } else {
                            alert('CEP não encontrado. Por favor, verifique o valor digitado.');
                            logradouroInput.value = '';
                            bairroInput.value = '';
                            if (cidade) cidade.value = '';
                            if (estadoSelect) estadoSelect.value = '';
                        }
                    })
                    .catch(error => console.error('Erro ao buscar CEP:', error));
            } else if (cep.length > 0) {
                alert('CEP inválido. Digite um CEP com 8 dígitos.');
            }
        });

        // Aplica máscara dinâmica ao campo de telefone
        telefoneInput.addEventListener('input', () => {
            let telefone = telefoneInput.value.replace(/\D/g, ''); // Remove caracteres não numéricos

            if (telefone.length > 11) telefone = telefone.slice(0, 11); // Limita a 11 dígitos
            if (telefone.length <= 10) {
                telefoneInput.value = telefone.replace(/(\d{2})(\d{4})(\d{0,4})/, '($1) $2-$3'); // Formato: (99) 9999-9999
            } else {
                telefoneInput.value = telefone.replace(/(\d{2})(\d{5})(\d{0,4})/, '($1) $2-$3'); // Formato: (99) 99999-9999
            }
        });

        // Avançar para o próximo passo
        nextButton.addEventListener('click', () => {
            if (currentStep) {
                const requiredInputs = currentStep.querySelectorAll('input:required, select:required');
                let isValid = true;

                requiredInputs.forEach(input => {
                    if (!input.value.trim()) {
                        input.classList.add('is-invalid');
                        isValid = false;
                    } else {
                        input.classList.remove('is-invalid');
                    }
                });

                if (isValid) {
                    const nextStep = currentStep.nextElementSibling;
                    if (nextStep) {
                        currentStep.classList.remove('active', 'show');
                        nextStep.classList.add('active', 'show');
                        currentStep = nextStep; // Atualiza o passo atual
                    }
                }
            }
        });

        // Voltar ao passo anterior
        prevButton.addEventListener('click', () => {
            if (currentStep) {
                const prevStep = currentStep.previousElementSibling;
                if (prevStep) {
                    currentStep.classList.remove('active', 'show');
                    prevStep.classList.add('active', 'show');
                    currentStep = prevStep; // Atualiza o passo atual
                }
            }
        });
    });
</script>
@endpush