@extends('template_pages.session')

@section('page_title', 'Novo Cliente Faturável')
@section('page_icon', 'hand-coins')
@section('navbar', 'finance.navbar')

@push('styles')
<!-- Select Plugin CSS -->
<link rel="stylesheet" href="{{ asset('assets/inspinia/plugins/select2/select2.min.css') }}">
@endpush

@section('content_page')
<div class="card-body">
    <form id="billableClientForm" method="POST">
        {{ csrf_field() }}

        <div class="d-flex align-items-center gap-1">
            <i data-lucide="text" class="fs-4"></i>
            <h4 class="mb-0">Informações Básicas</h4>
        </div>

        <div class="row mt-3">
            <div class="col-lg mb-3">
                <label class="form-label">Razão Social / Nome *</label>
                <input class="form-control" placeholder="Razão Social" type="text" name="company_name" id="company_name" required/>
            </div>
            <div class="col-lg-2 mb-3">
                <label class="form-label">Tipo de documento *</label>
                <select name="document_type" class="form-control form-select select2" id="document_type" required>
                    <option value="cnpj" selected>CNPJ</option>
                    <option value="cpf">CPF</option>
                </select>
            </div>
            <div class="col-lg-2 mb-3">
                <label id="label_cpf_cnpj" class="form-label">CNPJ *</label>
                <input class="form-control" placeholder="CNPJ" type="text" name="cpf_cnpj" id="cpf_cnpj" required/>
            </div>
            <div class="col-lg mb-3">
                <div class="form-group">
                    <label class="form-label">Cliente Institucional *</label>
                    <select class="form-control select2-show-search form-select" id="tipo_cliente" data-placeholder="Selecionar Cliente" name="id_institucional_client" required>
                        <option value="" selected>Selecionar Cliente</option>
                        @foreach($institutionalClients as $institutionalClient)
                            <option value="{{ $institutionalClient->id }}">{{ $institutionalClient->name }}</option>
                        @endforeach
                    </select>                    
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <label class="form-label">Observação *</label>
                <textarea class="form-control" placeholder="Observação" rows="3" name="observation" required></textarea>
            </div>
        </div>

        <div class="border-top border-dashed my-3"></div>

        <div class="d-flex align-items-center gap-1">
            <i data-lucide="hand-coins" class="fs-4"></i>
            <h4 class="mb-0">Configurações de Cobrança</h4>
        </div>

        <div class="row mt-3">
            <div class="col-lg-3 select_preferential">
                <label class="form-label">Vencimento Preferencial</label>
                <div class="input-group">
                    <div class="input-group-text">
                        <i class="ti ti-calendar tx-16 lh-0 op-6"></i>
                    </div>
                    <select name="preferential_due_date" id="preferential_due_date" class="form-control form-select" data-bs-placeholder="Dia">
                        <option label="Dia"></option>
                                                    <option value="01">01</option>
                                                    <option value="02">02</option>
                                                    <option value="03">03</option>
                                                    <option value="04">04</option>
                                                    <option value="05">05</option>
                                                    <option value="06">06</option>
                                                    <option value="07">07</option>
                                                    <option value="08">08</option>
                                                    <option value="09">09</option>
                                                    <option value="10">10</option>
                                                    <option value="11">11</option>
                                                    <option value="12">12</option>
                                                    <option value="13">13</option>
                                                    <option value="14">14</option>
                                                    <option value="15">15</option>
                                                    <option value="16">16</option>
                                                    <option value="17">17</option>
                                                    <option value="18">18</option>
                                                    <option value="19">19</option>
                                                    <option value="20">20</option>
                                                    <option value="21">21</option>
                                                    <option value="22">22</option>
                                                    <option value="23">23</option>
                                                    <option value="24">24</option>
                                                    <option value="25">25</option>
                                                    <option value="26">26</option>
                                                    <option value="27">27</option>
                                                    <option value="28">28</option>
                                                    <option value="29">29</option>
                                                    <option value="30">30</option>
                                                    <option value="31">31</option>
                         
                    </select>
                </div>
            </div>
            <div class="col-lg-2">
                <label class="form-label">Vencimento apenas em dias úteis</label>
                <div class="col-12 box_boleto_pdf">
                    <div class="form-check form-switch fs-xxl">
                        <input type="checkbox" class="form-check-input" id="dueWeekdaysOnlySwitch" name="due_weekdays_only" checked>
                    </div>
                </div>
            </div>
            <div class="col-lg-2">
                <label class="form-label">Habilitar Boleto em Anexo</label>
                <div class="col-12 box_boleto_pdf">
                    <div class="form-check form-switch fs-xxl">
                        <input type="checkbox" class="form-check-input" id="customSwitch" name="attached_bill">
                    </div>
                </div>
            </div>
        </div>

        <div class="border-top border-dashed my-3"></div>

        <div class="d-flex align-items-center gap-1">
            <i data-lucide="book-user" class="fs-4"></i>
            <h4 class="mb-0">Informações de Contato</h4>
        </div>

        <div class="row mt-3">
            <div class="col-md-4">
                <label class="form-label">Nome para contato *</label>
                <input type="text" class="form-control" name="contact_name" placeholder="Nome" required>
            </div>
            <div class="col-md-4">
                <label class="form-label">E-mail Principal *</label>
                <input type="email" class="form-control" name="contact_mail" placeholder="E-mail" required>
            </div>
            <div class="col-md-4">
                <label class="form-label">Telefone Principal</label>
                <input type="text" class="form-control phone_input" name="contact_phone" placeholder="(11) 91234-5678">
            </div>
        </div>
        <div class="col-lg-12 custom-fields-container mt-2">
            <span class="btn btn-soft-secondary btn-sm add-custom-field gap-1">
                <i data-lucide="plus"></i> Adicionar contato
            </span>
            <div class="custom_fields_add"></div>
        </div>

        <div class="border-top border-dashed my-3"></div>

        <div class="d-flex align-items-center gap-1">
            <i data-lucide="map-pinned" class="fs-4"></i>
            <h4 class="mb-0">Endereço</h4>
        </div>

        <div class="row mt-3">
            <div class="col-lg-2 mb-3">
                <label class="form-label">CEP *</label>
                <div class="input-group">
                    <input type="text" class="form-control cep" name="zipcode" id="zipcode" placeholder="12345-678">
                    <button class="btn btn-dark btn-icon rounded-end" type="button" id="search_zip_code"><i data-lucide="search"></i></button>
                    <div class="invalid-feedback">Por favor, insira um CEP válido.</div>
                </div>                
            </div>
            <div class="col-lg-2 mb-3">
                <label class="form-label">Tipo Logradouro *</label>
                <input class="form-control" placeholder="Tipo Logradouro" type="text" name="street_type" id="street_type" required/>
            </div>
            <div class="col-lg-4 mb-3">
                <label class="form-label">Endereço *</label>
                <input class="form-control" placeholder="Endereço" type="text" name="street" id="street" required/>
            </div>
            <div class="col-lg-2 mb-3">
                <label class="form-label">Número *</label>
                <input class="form-control" placeholder="Número" type="text" name="number" id="number" required/>
            </div>
            <div class="col-lg-2 mb-3">
                <label class="form-label">Complemento</label>
                <input class="form-control" placeholder="Complemento" type="text" name="complement" id="complement"/>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-2 mb-3">
                <label class="form-label">Bairro *</label>
                <input class="form-control" placeholder="Bairro" type="text" name="neighborhood" id="neighborhood" required/>
            </div>
            <div class="col-lg-2 mb-3">
                <label class="form-label">Cidade *</label>
                <input class="form-control" placeholder="Cidade" type="text" name="city" id="city" required/>
            </div>
            <div class="col-lg-2 mb-3">
                <label class="form-label">Estado *</label>
                <input class="form-control" placeholder="Estado" type="text" name="state" id="state" required/>
            </div>
            <div class="col-lg-2 mb-3">
                <label class="form-label">País *</label>
                <input class="form-control" placeholder="País" type="text" name="country" id="country" required/>
            </div>
        </div>

        <!-- Botão -->
        <div class="border-top border-dashed my-3"></div>
        <div class="row mt-2">
            <div class="btn-list col-12 col-lg-auto">
                <button type="submit" class="btn btn-success" id="btn_add">Salvar</button>
            </div>
        </div>

    </form>
</div>
@endsection

@push('scripts')
<!-- Select2 Plugin Js -->
<script src="{{ asset('assets/inspinia/plugins/select2/select2.min.js') }}"></script>
<!--Select 2 Demo js-->
<script src="{{ asset('assets/inspinia/js/pages/form-select2.js') }}"></script>
<!-- MaskMoney -->
<script src="{{ asset('assets/scripts/maskmoney/jquery.maskMoney.min.js') }}"></script>
<!-- Máscaras Js -->
<script src="{{ asset('assets/inspinia/plugins/inputmask/jquery.mask.min.js') }}"></script>
<script src="{{ asset('assets/scripts/masks.js') }}"></script>
<!-- SweetAlert2 -->
<script src="{{ asset('assets/inspinia/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
<!-- Validação Formulário -->
<script src="{{ asset('assets/inspinia/js/form-validation.js') }}"></script>

<script>
$(document).ready(function() {

    $('#cpf_cnpj').mask('00.000.000/0000-00');

    $('#document_type').on('change', function() {
        var tipoDoc = $(this).val();

        $('#cpf_cnpj').val('');

        if (tipoDoc === 'cnpj') {
            $('#label_cpf_cnpj').html('CNPJ <span class="text-red">*</span>');
            $('#cpf_cnpj').attr('placeholder', 'CNPJ');
            $('#cpf_cnpj').mask('00.000.000/0000-00');
        } else if (tipoDoc === 'cpf') {
            $('#label_cpf_cnpj').html('CPF <span class="text-red">*</span>');
            $('#cpf_cnpj').attr('placeholder', 'CPF');
            $('#cpf_cnpj').mask('000.000.000-00');
        }
    });

    function reindexContacts(container) {
        $(container).find('.custom_contact').each(function(index) {
            var i = index + 1; // índice começa em 1
            $(this).attr('id', 'custom_contact_' + i);
            $(this).find('.add_contacts').attr('id', 'custom-field-' + i);
            $(this).find('.contact_name').attr('name', 'contact_name_' + i);
            $(this).find('.contact_email').attr('name', 'contact_email_' + i);
            $(this).find('.contact_phone').attr('name', 'contact_phone_' + i);
        });
    }

    // Adicionar contato
    $('.custom-fields-container').on('click', '.add-custom-field', function() {
        var targetContainer = $('.custom_fields_add');
        var customFieldIndex = $(targetContainer).find('.custom_contact').length + 1;

        $('.custom_fields_add').addClass('mt-2');

        var fieldGroup = `
            <div class="custom_contact mb-2" id="custom_contact_${customFieldIndex}">
                <div class="row cf-group add_contacts" id="custom-field-${customFieldIndex}">
                    <div class="col-lg-4">
                        <input class="form-control contact_name" placeholder="Nome para contato" type="text" name="contact_name_${customFieldIndex}">
                    </div>
                    <div class="col-lg-4">
                        <input class="form-control contact_email" placeholder="E-mail" type="email" name="contact_email_${customFieldIndex}">
                    </div>
                    <div class="col-lg-4">
                        <div class="row m-0 space-between">
                            <div class="col p-0">
                                <input class="form-control phone_input contact_phone" placeholder="Telefone" type="text" name="contact_phone_${customFieldIndex}">
                            </div>
                            <div class="col-auto p-0 ms-2">
                                <span class="btn btn-danger remove-contact btn-icon"><i class="ti ti-minus"></i></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>`;

        $(targetContainer).append(fieldGroup);
        addPhoneMask();
    });

    // Remover contato e reindexar
    $('.custom-fields-container').on('click', '.remove-contact', function() {
        var container = $('.custom_fields_add');
        $(this).closest('.custom_contact').remove();
        reindexContacts(container);
    });

    $('.select2').select2();

    $('#document_type').select2({
        placeholder: "Selecione o tipo de documento"
    });

    $('#tipo_cliente').select2({
        placeholder: "Selecione o cliente institucional"
    });

    // Métodos de validação customizados
    $.validator.addMethod("phoneValidation", function(value, element) {
        return this.optional(element) || /^\(\d{2}\)\s\d{4,5}-\d{4}$/.test(value);
    }, "Por favor, insira um telefone válido no formato (11) 91234-5678");

    $.validator.addMethod("cpfValidation", function(value, element) {
        return this.optional(element) || /^\d{3}\.\d{3}\.\d{3}-\d{2}$/.test(value);
    }, "Por favor, insira um CPF válido no formato 000.000.000-00");

    $.validator.addMethod("cnpjValidation", function(value, element) {
        return this.optional(element) || /^\d{2}\.\d{3}\.\d{3}\/\d{4}-\d{2}$/.test(value);
    }, "Por favor, insira um CNPJ válido no formato 00.000.000/0000-00");

    $('#btn_add').on('click', function(e) {
        // Configuração da validação do formulário
        $("#billableClientForm").validate({
            errorClass: "invalid-feedback",
            errorElement: "span",
            rules: {
                company_name: {
                    required: true,
                    minlength: 2,
                    maxlength: 255
                },
                document_type: {
                    required: true
                },
                cpf_cnpj: {
                    required: true
                },
                id_institucional_client: {
                    required: true
                },
                observation: {
                    required: true
                },
                contact_name: {
                    required: true,
                    minlength: 2,
                    maxlength: 255
                },
                contact_mail: {
                    required: true,
                    email: true,
                    maxlength: 255
                },
                contact_phone: {
                    phoneValidation: true
                },
                zipcode: {
                    required: true
                },
                street_type: {
                    required: true
                },
                street: {
                    required: true,
                    maxlength: 255
                },
                number: {
                    required: true,
                    maxlength: 20
                },
                neighborhood: {
                    required: true,
                    maxlength: 100
                },
                city: {
                    required: true,
                    maxlength: 100
                },
                state: {
                    required: true,
                    maxlength: 100
                },
                country: {
                    required: true,
                    maxlength: 100
                }
            },
            messages: {
                company_name: {
                    required: "A razão social é obrigatória",
                    minlength: "A razão social deve ter pelo menos 2 caracteres",
                    maxlength: "A razão social não pode ter mais de 255 caracteres"
                },
                document_type: {
                    required: "Selecione o tipo de documento"
                },
                cpf_cnpj: {
                    required: "O CPF/CNPJ é obrigatório"
                },
                id_institucional_client: {
                    required: "Selecione o cliente institucional"
                },
                observation: {
                    required: "A observação é obrigatória"
                },
                contact_name: {
                    required: "O nome do contato é obrigatório",
                    minlength: "O nome deve ter pelo menos 2 caracteres",
                    maxlength: "O nome não pode ter mais de 255 caracteres"
                },
                contact_mail: {
                    required: "O e-mail é obrigatório",
                    email: "Por favor, insira um e-mail válido",
                    maxlength: "O e-mail não pode ter mais de 255 caracteres"
                },
                zipcode: {
                    required: ""
                },
                street_type: {
                    required: "O tipo de logradouro é obrigatório"
                },
                street: {
                    required: "O endereço é obrigatório",
                    maxlength: "O endereço não pode ter mais de 255 caracteres"
                },
                number: {
                    required: "O número é obrigatório",
                    maxlength: "O número não pode ter mais de 20 caracteres"
                },
                neighborhood: {
                    required: "O bairro é obrigatório",
                    maxlength: "O bairro não pode ter mais de 100 caracteres"
                },
                city: {
                    required: "A cidade é obrigatória",
                    maxlength: "A cidade não pode ter mais de 100 caracteres"
                },
                state: {
                    required: "O estado é obrigatório",
                    maxlength: "O estado não pode ter mais de 100 caracteres"
                },
                country: {
                    required: "O país é obrigatório",
                    maxlength: "O país não pode ter mais de 100 caracteres"
                }
            },
            highlight: function(element){
                // Para campos normais
                $(element).addClass('is-invalid');
                
                // Tratamento especial para Select2
                if ($(element).hasClass('select2-hidden-accessible')) {
                    $(element).next('.select2-container').find('.select2-selection').addClass('is-invalid');
                }
            },
            unhighlight: function(element){
                // Para campos normais
                $(element).removeClass('is-invalid');
                
                // Tratamento especial para Select2
                if ($(element).hasClass('select2-hidden-accessible')) {
                    $(element).next('.select2-container').find('.select2-selection').removeClass('is-invalid');
                }
            },
            errorPlacement: function(error, element) {
                // Para Select2, colocar o erro após o container do Select2
                if (element.hasClass('select2-hidden-accessible')) {
                    error.insertAfter(element.next('.select2-container'));
                } else {
                    error.insertAfter(element);
                }
            },
            submitHandler: function(form) {
                // Validar contatos adicionais dinamicamente
                var isValid = true;
                var errorMessages = [];

                $('.custom_contact').each(function(index) {
                    var contactName = $(this).find('.contact_name').val();
                    var contactEmail = $(this).find('.contact_email').val();
                    var contactPhone = $(this).find('.contact_phone').val();

                    // Se algum campo do contato foi preenchido, validar todos
                    if (contactName || contactEmail || contactPhone) {
                        if (!contactName) {
                            errorMessages.push(`Nome do contato ${index + 2} é obrigatório`);
                            isValid = false;
                        }

                        if (!contactEmail) {
                            errorMessages.push(`E-mail do contato ${index + 2} é obrigatório`);
                            isValid = false;
                        } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(contactEmail)) {
                            errorMessages.push(`E-mail do contato ${index + 2} é inválido`);
                            isValid = false;
                        }

                        if (contactPhone && !/^\(\d{2}\)\s\d{4,5}-\d{4}$/.test(contactPhone)) {
                            errorMessages.push(`Telefone do contato ${index + 2} é inválido`);
                            isValid = false;
                        }
                    }
                });

                if (!isValid) {
                    Swal.fire({
                        title: 'Erro de Validação!',
                        html: errorMessages.join('<br>'),
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                    return false;
                }

                // Se chegou até aqui, o formulário é válido - enviar via AJAX
                submitFormAjax(form);
            }
        });
        $(".custom_contact").each(function(){
            $(this).find('.contact_name').rules("add", { 
                required:true,
                messages:{required:"Por favor, insira um nome"}
            });

            $(this).find('.contact_email').rules("add", { 
                required:true,
                email:true,
                messages:{required:"Por favor, insira um e-mail", email:"Por favor, insira um e-mail válido"}
            });
        });
    });
});

function submitFormAjax(form) {
    var $form = $(form);
    var submitBtn = $form.find('button[type="submit"]');
    var btnText = submitBtn.find('.btn-text');
    var btnLoading = submitBtn.find('.btn-loading');
    
    // Desabilitar botão e mostrar loading
    submitBtn.prop('disabled', true);
    btnText.addClass('d-none');
    btnLoading.removeClass('d-none');
    
    // Preparar dados do formulário
    var formData = new FormData(form);

    var isAttachedBillChecked = $('#customSwitch').is(':checked');
    formData.append('attached_bill', isAttachedBillChecked ? 1 : 0);

    var isDueWeekdaysOnlySwitchChecked = $('#dueWeekdaysOnlySwitch').is(':checked');
    formData.append('due_weekdays_only', isDueWeekdaysOnlySwitchChecked ? 1 : 0);
    
    $.ajax({
        url: '{{ route("finance.billing.client.store") }}',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            if (response.success) {
                Swal.fire({
                    title: 'Sucesso!',
                    text: response.message,
                    icon: 'success',
                    confirmButtonText: 'OK'
                }).then((result) => {
                    if (result.isConfirmed) {
                        window.location.href = response.redirect;
                    }
                });
            } else {
                Swal.fire({
                    title: 'Erro!',
                    text: response.message,
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            }
        },
        error: function(xhr) {
            var errorMessage = 'Erro interno do servidor';
            
            if (xhr.status === 422) {
                // Erro de validação do servidor
                var errors = xhr.responseJSON.errors;
                var errorList = '';
                
                $.each(errors, function(field, messages) {
                    $.each(messages, function(index, message) {
                        errorList += '• ' + message + '<br>';
                    });
                });
                
                errorMessage = errorList;
            } else if (xhr.responseJSON && xhr.responseJSON.message) {
                errorMessage = xhr.responseJSON.message;
            }
            
            Swal.fire({
                title: 'Erro!',
                html: errorMessage,
                icon: 'error',
                confirmButtonText: 'OK'
            });
        },
        complete: function() {
            // Reabilitar botão e esconder loading
            submitBtn.prop('disabled', false);
            btnText.removeClass('d-none');
            btnLoading.addClass('d-none');
        }
    });
}
// Adicionar funcionalidade de busca de CEP
$('#search_zip_code').click(function() {
    var zipcode = $('#zipcode').val().replace(/\D/g, '');
    
    if (zipcode.length === 8) {
        var ws = '{{ route('zipcode_search.get', ':zipcode') }}';
        ws = ws.replace(':zipcode', zipcode);

        // Mostrar loading no botão
        $(this).prop('disabled', true);
        $(this).find('i').attr('data-lucide', 'loader-2').addClass('animate-spin');
        lucide.createIcons();

        $.get(ws, function(data) {
            if (data.resultado === "0") {
                Swal.fire({
                    icon: 'warning',
                    title: 'CEP não encontrado',
                    text: 'O CEP informado não foi encontrado. Verifique e tente novamente.',
                    confirmButtonText: 'OK'
                });
            } else {
                // Preencher os campos com os dados retornados
                $('#street_type').val(data.tipo_logradouro);
                $('#street').val(data.logradouro);
                $('#neighborhood').val(data.bairro);
                $('#city').val(data.cidade);
                $('#state').val(data.uf);
                $('#country').val('Brasil');
                
                // Mostrar mensagem de sucesso
                Swal.fire({
                    icon: 'success',
                    title: 'CEP encontrado!',
                    text: 'Endereço preenchido automaticamente.',
                    timer: 2000,
                    showConfirmButton: false
                });
            }
        }).fail(function() {
            Swal.fire({
                icon: 'error',
                title: 'Erro na consulta',
                text: 'Erro ao consultar CEP. Tente novamente.',
                confirmButtonText: 'OK'
            });
        }).always(function() {
            // Restaurar botão
            $('#search_zip_code').prop('disabled', false);
            $('#search_zip_code').find('i').attr('data-lucide', 'search').removeClass('animate-spin');
            lucide.createIcons();
        });
    } else {
        Swal.fire({
            icon: 'warning',
            title: 'CEP inválido',
            text: 'Por favor, informe um CEP válido com 8 dígitos.',
            confirmButtonText: 'OK'
        });
    }
});
</script>
@endpush