@extends('layouts.app')

@section('title', 'Escolha do Cliente')

@push('styles-custom')
<!-- Adicione estilos personalizados aqui -->
@endpush

@section('content')
<div class="content pt-3">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-3">
            <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">Escolha do Cliente</li>
        </ol>
    </nav>

    <div class="mb-4">
        <h2>{{ $title }}</h2>
        <p class="text-muted">{{ $subtitle }}</p>
    </div>

    <div class="progress mb-4">
        <div class="progress-bar" role="progressbar" style="width: {{ ($step / 6) * 100 }}%;" aria-valuenow="{{ $step }}" aria-valuemin="1" aria-valuemax="6">
            Passo {{ $step }} de 6
        </div>
    </div>

    <div class="mb-3">
        <label for="cpf_cnpj_search" class="form-label">CPF/CNPJ</label>
        <input type="text" class="form-control" id="cpf_cnpj_search" placeholder="Digite o CPF ou CNPJ" required>
    </div>

    <div id="cliente-dados" class="mt-4 d-none">
        <form id="clienteForm" action="{{ route('contratos.parcelas') }}" method="POST" class="row g-3 needs-validation" novalidate>
            @csrf
            <input type="hidden" id="cliente_id" name="cliente_id" value="{{ old('cliente_id') }}">

            <div class="d-flex justify-content-between mb-4">
                <a href="{{ route('contratos.create') }}" class="btn btn-secondary">Voltar</a>
                <button type="submit" class="btn btn-primary" id="nextStepButton" disabled>Próximo</button>
            </div>
        </form>

        <form id="clienteForm" class="row g-3 needs-validation" novalidate>
            <div class="col-md-6">
                <label class="form-label" for="razao_social">Razão Social / Nome</label>
                <input type="text" class="form-control" id="razao_social" name="razao_social" value="{{ old('razao_social') }}" required>
                <div class="invalid-feedback">Por favor, informe a razão social.</div>
            </div>

            <div class="col-md-6">
                <label class="form-label" for="nome_fantasia">Nome Fantasia</label>
                <input type="text" class="form-control" id="nome_fantasia" name="nome_fantasia" value="{{ old('nome_fantasia') }}">
            </div>

            <div class="col-md-3">
                <label class="form-label" for="tipo">Tipo</label>
                <select class="form-select" id="tipo" name="tipo" required>
                    <option value="cnpj" {{ old('tipo') === 'cnpj' ? 'selected' : '' }}>CNPJ</option>
                    <option value="cpf" {{ old('tipo') === 'cpf' ? 'selected' : '' }}>CPF</option>
                </select>
                <div class="invalid-feedback">Por favor, selecione o tipo.</div>
            </div>

            <div class="col-md-3">
                <label class="form-label" for="documento">CNPJ/CPF</label>
                <input type="text" class="form-control" id="documento" name="documento" value="{{ old('documento') }}" required>
                <div class="invalid-feedback">Por favor, informe o CNPJ ou CPF.</div>
            </div>

            <div class="col-md-3">
                <label class="form-label" for="email">Email</label>
                <input type="email" class="form-control" id="email" name="email" value="{{ old('email', $cliente->email ?? '') }}">
            </div>

            <div class="col-md-3">
                <label class="form-label" for="telefone">Telefone</label>
                <input type="text" class="form-control" id="telefone" name="telefone" value="{{ old('telefone', $cliente->telefone ?? '') }}">
            </div>

            <h4 class="mt-4 mb-3">Endereço</h4>

            <div class="col-md-3">
                <label class="form-label" for="cep">CEP</label>
                <input type="text" class="form-control" id="cep" name="cep" value="{{ old('cep', $cliente->cep ?? '') }}" maxlength="9">
            </div>

            <div class="col-md-6">
                <label class="form-label" for="logradouro">Logradouro</label>
                <input type="text" class="form-control" id="logradouro" name="logradouro" value="{{ old('logradouro', $cliente->logradouro ?? '') }}">
            </div>

            <div class="col-md-3">
                <label class="form-label" for="numero">Número</label>
                <input type="text" class="form-control" id="numero" name="numero" value="{{ old('numero', $cliente->numero ?? '') }}">
            </div>

            <div class="col-md-4">
                <label class="form-label" for="complemento">Complemento</label>
                <input type="text" class="form-control" id="complemento" name="complemento" value="{{ old('complemento', $cliente->complemento ?? '') }}">
            </div>

            <div class="col-md-4">
                <label class="form-label" for="bairro">Bairro</label>
                <input type="text" class="form-control" id="bairro" name="bairro" value="{{ old('bairro', $cliente->bairro ?? '') }}">
            </div>

            <div class="col-md-4">
                <label class="form-label" for="cidade">Cidade</label>
                <input type="text" class="form-control" id="cidade" name="cidade" value="{{ old('cidade', $cliente->cidade ?? '') }}">
            </div>

            <div class="col-md-6">
                <label class="form-label" for="estado">Estado</label>
                <select class="form-select" id="estado" name="estado" required>
                    <option value="">Selecione</option>
                    <option value="AC" {{ old('estado', $cliente->estado ?? '') === 'AC' ? 'selected' : '' }}>Acre</option>
                    <option value="AL" {{ old('estado', $cliente->estado ?? '') === 'AL' ? 'selected' : '' }}>Alagoas</option>
                    <option value="AM" {{ old('estado', $cliente->estado ?? '') === 'AM' ? 'selected' : '' }}>Amazonas</option>
                    <option value="AP" {{ old('estado', $cliente->estado ?? '') === 'AP' ? 'selected' : '' }}>Amapá</option>
                    <option value="BA" {{ old('estado', $cliente->estado ?? '') === 'BA' ? 'selected' : '' }}>Bahia</option>
                    <option value="CE" {{ old('estado', $cliente->estado ?? '') === 'CE' ? 'selected' : '' }}>Ceará</option>
                    <option value="DF" {{ old('estado', $cliente->estado ?? '') === 'DF' ? 'selected' : '' }}>Distrito Federal</option>
                    <option value="ES" {{ old('estado', $cliente->estado ?? '') === 'ES' ? 'selected' : '' }}>Espírito Santo</option>
                    <option value="GO" {{ old('estado', $cliente->estado ?? '') === 'GO' ? 'selected' : '' }}>Goiás</option>
                    <option value="MA" {{ old('estado', $cliente->estado ?? '') === 'MA' ? 'selected' : '' }}>Maranhão</option>
                    <option value="MT" {{ old('estado', $cliente->estado ?? '') === 'MT' ? 'selected' : '' }}>Mato Grosso</option>
                    <option value="MS" {{ old('estado', $cliente->estado ?? '') === 'MS' ? 'selected' : '' }}>Mato Grosso do Sul</option>
                    <option value="MG" {{ old('estado', $cliente->estado ?? '') === 'MG' ? 'selected' : '' }}>Minas Gerais</option>
                    <option value="PA" {{ old('estado', $cliente->estado ?? '') === 'PA' ? 'selected' : '' }}>Pará</option>
                    <option value="PB" {{ old('estado', $cliente->estado ?? '') === 'PB' ? 'selected' : '' }}>Paraíba</option>
                    <option value="PR" {{ old('estado', $cliente->estado ?? '') === 'PR' ? 'selected' : '' }}>Paraná</option>
                    <option value="PE" {{ old('estado', $cliente->estado ?? '') === 'PE' ? 'selected' : '' }}>Pernambuco</option>
                    <option value="PI" {{ old('estado', $cliente->estado ?? '') === 'PI' ? 'selected' : '' }}>Piauí</option>
                    <option value="RJ" {{ old('estado', $cliente->estado ?? '') === 'RJ' ? 'selected' : '' }}>Rio de Janeiro</option>
                    <option value="RN" {{ old('estado', $cliente->estado ?? '') === 'RN' ? 'selected' : '' }}>Rio Grande do Norte</option>
                    <option value="RS" {{ old('estado', $cliente->estado ?? '') === 'RS' ? 'selected' : '' }}>Rio Grande do Sul</option>
                    <option value="RO" {{ old('estado', $cliente->estado ?? '') === 'RO' ? 'selected' : '' }}>Rondônia</option>
                    <option value="RR" {{ old('estado', $cliente->estado ?? '') === 'RR' ? 'selected' : '' }}>Roraima</option>
                    <option value="SC" {{ old('estado', $cliente->estado ?? '') === 'SC' ? 'selected' : '' }}>Santa Catarina</option>
                    <option value="SP" {{ old('estado', $cliente->estado ?? '') === 'SP' ? 'selected' : '' }}>São Paulo</option>
                    <option value="SE" {{ old('estado', $cliente->estado ?? '') === 'SE' ? 'selected' : '' }}>Sergipe</option>
                    <option value="TO" {{ old('estado', $cliente->estado ?? '') === 'TO' ? 'selected' : '' }}>Tocantins</option>
                </select>
            </div>

            <h4 class="mt-4 mb-3">Outras Informações</h4>
            <div class="col-md-6">
                <label class="form-label" for="regime_tributario">Regime Tributário</label>
                <input type="text" class="form-control" id="regime_tributario" name="regime_tributario" value="{{ old('regime_tributario', $cliente->regime_tributario ?? '') }}">
            </div>

            <div class="col-md-6">
                <label class="form-label" for="nome_responsavel">Nome do Responsável</label>
                <input type="text" class="form-control" id="nome_responsavel" name="nome_responsavel" value="{{ old('nome_responsavel', $cliente->nome_responsavel ?? '') }}">
            </div>

            <div class="col-12">
                <label class="form-label" for="observacoes">Observações</label>
                <textarea class="form-control" id="observacoes" name="observacoes" rows="3">{{ old('observacoes', $cliente->observacoes ?? '') }}</textarea>
            </div>

            <div class="col-12 text-end">
                <button type="button" class="btn btn-success me-2" id="cadastrarCliente">Cadastrar Cliente</button>
                <button type="button" class="btn btn-info" id="editarCliente">Salvar Alterações</button>
            </div>


        </form>
    </div>
</div>
@endsection

@push('scripts-custom')
<script>
    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 cepInput = document.getElementById('cep');
        const logradouroInput = document.getElementById('logradouro');
        const bairroInput = document.getElementById('bairro');
        const estadoSelect = document.getElementById('estado');
        const telefoneInput = document.getElementById('telefone');
        const cadastrarButton = document.getElementById('cadastrarCliente');
        const editarButton = document.getElementById('editarCliente');
        const clienteForm = document.getElementById('clienteForm');
        const nextStepButton = document.getElementById('nextStepButton');
        const clienteIdInput = document.getElementById('cliente_id');

        // Função para exibir mensagens de alerta
        function exibirMensagem(tipo, mensagem) {
            const alertDiv = document.createElement('div');
            alertDiv.className = `alert alert-${tipo}`;
            alertDiv.textContent = mensagem;

            document.querySelector('.content').prepend(alertDiv);

            setTimeout(() => alertDiv.remove(), 5000);
        }

        // Habilitar o botão "Próximo" somente se cliente_id tiver valor
        clienteIdInput.addEventListener('input', () => {
            nextStepButton.disabled = !clienteIdInput.value.trim();
        });

        // Máscara para CPF/CNPJ
        cpfCnpjInput.addEventListener('input', () => {
            const rawValue = cpfCnpjInput.value.replace(/\D/g, '');
            if (rawValue.length <= 11) {
                cpfCnpjInput.value = rawValue.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4').slice(0, 14);
                tipoSelect.value = 'cpf';
            } else {
                cpfCnpjInput.value = rawValue.replace(/(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/, '$1.$2.$3/$4-$5').slice(0, 18);
                tipoSelect.value = 'cnpj';
            }
        });

        // Busca cliente por CPF/CNPJ
        cpfCnpjInput.addEventListener('blur', () => {
            const cpfCnpj = cpfCnpjInput.value.trim();
            if (cpfCnpj) {
                fetch(`/clientes/search?cpf_cnpj=${cpfCnpj}`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            // Cliente encontrado: popula os campos, insere o ID e habilita o botão
                            const cliente = data.cliente;
                            clienteDados.classList.remove('d-none');
                            clienteIdInput.value = cliente.id; // Define o ID do cliente no campo oculto
                            for (const key in cliente) {
                                const input = document.getElementById(key);
                                if (input) {
                                    input.value = cliente[key];
                                }
                            }
                            editarButton.classList.remove('d-none');
                            cadastrarButton.classList.add('d-none');
                            exibirMensagem('success', 'Cliente encontrado com sucesso!');
                            nextStepButton.disabled = false; // Habilita o botão "Próximo"
                        } else {
                            // Cliente não encontrado: limpa os campos do formulário e mantém o formulário visível
                            const formFields = clienteForm.querySelectorAll('input, select, textarea');
                            formFields.forEach(field => {
                                if (field.type !== 'hidden') {
                                    field.value = ''; // Limpa todos os campos, exceto os ocultos
                                }
                            });

                            clienteIdInput.value = ''; // Remove o valor do campo oculto
                            exibirMensagem('warning', 'Cliente não encontrado. Cadastre um novo cliente.');

                            // Garante que o formulário seja exibido
                            clienteDados.classList.remove('d-none'); // Remove qualquer classe que esconda o formulário

                            nextStepButton.disabled = true; // Desabilita o botão "Próximo"
                        }
                    })
                    .catch(error => {
                        console.error('Erro ao buscar cliente:', error);
                        exibirMensagem('danger', 'Erro ao buscar cliente. Tente novamente.');
                        nextStepButton.disabled = true; // Garante que o botão permaneça desabilitado
                    });
            }
        });

        // Máscara e validação para CEP
        cepInput.addEventListener('input', () => {
            let cep = cepInput.value.replace(/\D/g, '');
            if (cep.length > 8) cep = cep.slice(0, 8);
            cepInput.value = cep.replace(/(\d{5})(\d{3})/, '$1-$2');
        });

        // Busca endereço pelo CEP
        cepInput.addEventListener('blur', () => {
            const cep = cepInput.value.replace(/\D/g, '');
            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 || '';
                            cidade.value = data.localidade || '';
                            estadoSelect.value = data.uf || '';
                        } else {
                            exibirMensagem('danger', 'CEP não encontrado.');
                        }
                    })
                    .catch(error => {
                        console.error('Erro ao buscar CEP:', error);
                        exibirMensagem('danger', 'Erro ao buscar CEP. Tente novamente.');
                    });
            }
        });

        // Máscara para telefone
        telefoneInput.addEventListener('input', () => {
            const telefone = telefoneInput.value.replace(/\D/g, '');
            if (telefone.length <= 10) {
                telefoneInput.value = telefone.replace(/(\d{2})(\d{4})(\d{0,4})/, '($1) $2-$3');
            } else {
                telefoneInput.value = telefone.replace(/(\d{2})(\d{5})(\d{0,4})/, '($1) $2-$3');
            }
        });

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

            // Verifique se os campos obrigatórios estão preenchidos
            if (!formData.get('razao_social') || !formData.get('documento') || !formData.get('tipo')) {
                exibirMensagem('danger', 'Por favor, preencha todos os campos obrigatórios.');
                return;
            }

            fetch('/contratos/cadastrar-cliente', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                },
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        exibirMensagem('success', 'Cliente cadastrado com sucesso!');
                        clienteForm.reset(); // Limpa o formulário
                        clienteDados.classList.add('d-none'); // Oculta o formulário de cliente
                    } else {
                        exibirMensagem('danger', data.message || 'Erro ao cadastrar cliente.');
                    }
                })
                .catch(error => {
                    console.error('Erro ao cadastrar cliente:', error);
                    exibirMensagem('danger', 'Erro ao cadastrar cliente. Tente novamente.');
                });
        });


        // Função para editar cliente
        editarButton.addEventListener('click', () => {
            const formData = new FormData(clienteForm);
            const clienteId = document.getElementById('cliente_id').value;
            fetch(`/contratos/atualizar-cliente/${clienteId}`, {
                method: 'PUT',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                },
            })
                .then(response => 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', 'Erro ao atualizar cliente. Tente novamente.');
                });
        });
    });
</script>
@endpush