@extends('template_pages.session')

@section('page_title', 'Novo Cliente Institucional')
@section('page_icon', 'handshake')

@php
    $module = request()->segment(1);
@endphp

@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="institutionalClientForm" 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-md-4">
                <label class="form-label">Nome Empresarial *</label>
                <input type="text" class="form-control" name="name" placeholder="Nome Empresarial" required>
            </div>
            <div class="col-md-4">
                <label class="form-label">Website</label>
                <input type="text" class="form-control" name="website" placeholder="Website">
            </div>
            <div class="col-md-4">
                <label class="form-label">Tipo Empresa *</label>
                <select name="client_type" id="tipo_empresa" class="form-control select2" required>
                    <option value="">Selecione o tipo</option>
                    @if(!empty($clientTypes))
                        @foreach($clientTypes as $type)
                            <option value="{{ $type }}" {{ old('client_type') === $type ? 'selected' : '' }}>
                                {{ $type }}
                            </option>
                        @endforeach
                    @endif
                </select>
                <div class="invalid-feedback">
                    Selecione o tipo de empresa
                </div>
            </div>
        </div>

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

        <div class="d-flex align-items-center gap-1">
            <i data-lucide="sliders-horizontal" class="fs-4"></i>
            <h4 class="mb-0">Configurações</h4>
        </div>

        <div class="row mt-3">
            <div class="col-md-4">
                <label class="form-label">Sincronizar com Monday</label>
                <select class="form-select select2" name="monday_id">
                    <option value="" {{ empty(old('monday_id')) ? 'selected' : '' }}>Selecione</option>
                    @if(!empty($mondayClients))
                        @foreach($mondayClients as $client)
                            <option value="{{ $client['id'] }}" {{ (string) old('monday_id', '') === (string) $client['id'] ? 'selected' : '' }}>
                                {{ $client['name'] }}
                            </option>
                        @endforeach
                    @endif
                </select>
            </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 g-3">
            <div class="col-12 col-md-6 col-lg-3">
                <label class="form-label">Nome para contato *</label>
                <input type="text" class="form-control" name="contact_name" placeholder="Nome" required>
            </div>
            <div class="col-12 col-md-6 col-lg-3">
                <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-12 col-md-6 col-lg-2">
                <label class="form-label">Telefone Principal</label>
                <input type="text" class="form-control phone_input" name="contact_phone" placeholder="(11) 91234-5678">
                <div class="invalid-feedback">
                    Por favor, informe um telefone válido.
                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-2">
                <label class="form-label">Cargo</label>
                <input type="text" class="form-control" name="contact_position" placeholder="Cargo">
            </div>
            <div class="col-12 col-lg-2">
                <label class="form-label">Observação</label>
                <input type="text" class="form-control" name="contact_notes" placeholder="Observação">
            </div>
        </div>
        <div class="col-lg-12 custom-fields-container mt-3">
            <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>

        <!-- Botão -->
        <div class="border-top border-dashed my-3"></div>
        <div class="row mt-2">
            <div class="d-flex flex-wrap gap-2">
                <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>
$('.select2').select2();

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

// 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");

$().ready(function () {
    $('#btn_add').on('click', function(e) {
        var fields = $(this).parents('form');   
        // Configuração da validação do formulário
        $("#institutionalClientForm").validate({
            errorClass: "invalid-feedback",
            errorElement: "span",
            rules: {
                name: {
                    required: true,
                    minlength: 2,
                    maxlength: 255
                },
                client_type: {
                    required: true
                },
                contact_name: {
                    required: true,
                    minlength: 2,
                    maxlength: 255
                },
                contact_mail: {
                    required: true,
                    email: true,
                    maxlength: 255
                },
                contact_phone: {
                    required: false,
                    phoneValidation: true
                }
            },
            messages: {
                name: {
                    required: "O nome empresarial é obrigatório",
                    minlength: "O nome deve ter pelo menos 2 caracteres",
                    maxlength: "O nome não pode exceder 255 caracteres"
                },
                client_type: {
                    required: ""
                },
                contact_name: {
                    required: "O nome do contato é obrigatório",
                    minlength: "O nome deve ter pelo menos 2 caracteres",
                    maxlength: "O nome não pode exceder 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 exceder 255 caracteres"
                },
                contact_phone: {
                    phoneValidation: ""
                },
            },
            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);
    
    // Obter o módulo da URL atual
    var module = '{{ $module }}';
    
    $.ajax({
        url: '{{ route("clients.institutional.store", ["module" => $module]) }}',
        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');
        }
    });
}

function reindexContacts(container) {
    $(container).find('.custom_contact').each(function(index) {
        var newIndex = index + 1; // índice começa em 1
        
        // Atualizar ID do container
        $(this).attr('id', 'custom_contact_' + newIndex);
        
        // Atualizar ID do grupo de campos
        $(this).find('.add_contacts').attr('id', 'custom-field-' + newIndex);
        
        // Atualizar nomes dos campos
        $(this).find('.contact_name').attr('name', 'contact_name_' + newIndex);
        $(this).find('.contact_email').attr('name', 'contact_email_' + newIndex);
        $(this).find('.contact_phone').attr('name', 'contact_phone_' + newIndex);
        $(this).find('.contact_position').attr('name', 'contact_position_' + newIndex);
        $(this).find('.contact_notes').attr('name', 'contact_notes_' + newIndex);
        
        // Atualizar o título do contato
        $(this).find('.contact-title').text('Contato Adicional ' + newIndex);
    });
}

// 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-3 p-3 border rounded bg-light" id="custom_contact_${customFieldIndex}">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <small class="text-muted fw-bold contact-title">Contato Adicional ${customFieldIndex}</small>
                <span class="btn btn-danger btn-sm remove-contact btn-icon">
                    <i class="ti ti-minus"></i>
                </span>
            </div>
            <div class="row g-2 add_contacts" id="custom-field-${customFieldIndex}">
                <div class="col-12 col-md-6 col-lg-3">
                    <label class="form-label small">Nome *</label>
                    <input class="form-control contact_name" placeholder="Nome do contato" type="text" name="contact_name_${customFieldIndex}">
                </div>
                <div class="col-12 col-md-6 col-lg-3">
                    <label class="form-label small">E-mail *</label>
                    <input class="form-control contact_email" placeholder="email@exemplo.com" type="email" name="contact_email_${customFieldIndex}">
                </div>
                <div class="col-12 col-md-6 col-lg-2">
                    <label class="form-label small">Telefone</label>
                    <input class="form-control phone_input contact_phone" placeholder="(11) 91234-5678" type="text" name="contact_phone_${customFieldIndex}">
                </div>
                <div class="col-12 col-md-6 col-lg-2">
                    <label class="form-label small">Cargo</label>
                    <input class="form-control contact_position" placeholder="Cargo" type="text" name="contact_position_${customFieldIndex}">
                </div>
                <div class="col-12 col-lg-2">
                    <label class="form-label small">Observação</label>
                    <input class="form-control contact_notes" placeholder="Observação" type="text" name="contact_notes_${customFieldIndex}">
                </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();
    
    // Reindexar todos os contatos para manter ordem sequencial
    reindexContacts(container);
    
    // Limpar validação dos campos removidos
    $('.custom_contact .is-invalid').removeClass('is-invalid');
});
</script>
@endpush