@extends('template_pages.session')

@section('page_title', 'Adicionar Resumo de Cobranças')
@section('page_icon', 'folder-closed')
@section('navbar', 'finance.navbar')

@push('styles')
<!-- INTERNAL Jquerytransfer css-->
<link rel="stylesheet" href="{{ asset('assets/inspinia/plugins/jQuerytransfer/jquery.transfer.css') }}">
<link rel="stylesheet" href="{{ asset('assets/inspinia/plugins/jQuerytransfer/icon_font/icon_font.css') }}">
@endpush

@section('content_page')
<div class="card-body">
    <form id="form_add_billing_summary">

        {{ 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">Título <span class="text-red">*</span></label>
                <input class="form-control" placeholder="Título" type="text" name="title_summary" id="title_summary"/>
            </div>
        </div>

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

        <div class="d-flex align-items-center gap-1">
            <i data-lucide="folder-kanban" class="fs-4"></i>
            <h4 class="mb-0">Projetos</h4>
        </div>

        <div class="row mt-3" id="project-row"> 
            <label class="form-label">Selecionar Projetos *</label>
            <div class="col-md-12">
                <div class="transfer"></div>
                <input type="hidden" id="projectsInput" name="projects">
            </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 class="form-control " placeholder="Nome para contato" type="text" name="contact_name" id="contact_name">
            </div>
            <div class="col-md-4">
                <label class="form-label">E-mail Principal *</label>
                <input class="form-control " placeholder="E-mail" type="email" name="main_email" id="main_email">
            </div>
            <div class="col-md-4">
                <label class="form-label">Telefone Principal</label>
                <input class="form-control phone_input" placeholder="Telefone Principal" type="text" name="main_phone" id="main_phone">
            </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>

        <!-- 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 id="btn_add" type="submit" class="btn btn-success">Salvar</button>
            </div>
        </div>

    </form>
</div>
@endsection

@push('scripts')
<!-- INTERNAL jquery transfer js-->
<script src="{{ asset('assets/inspinia/plugins/jQuerytransfer/jquery.transfer.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>
<!-- Validação Formulário -->
<script src="{{ asset('assets/inspinia/js/form-validation.js') }}"></script>
<script>
    
(function($) {
    "use strict";

    var projects = @json($projects_summary->map(function($project) {
        return [
            'project' => $project->project,
            'value' => $project->id
        ];
    }));

    var groupedProjects = {};
    @foreach ($projects_summary as $project)
        @php
            $clientName = optional($project->billableCustomer->institucionalClient)->name ?? 'Cliente Desconhecido';
        @endphp
        if (!groupedProjects["{{ $clientName }}"]) {
            groupedProjects["{{ $clientName }}"] = [];
        }
        groupedProjects["{{ $clientName }}"].push({
            project: "{{ $project->project }}",
            value: {{ $project->id }}
        });
    @endforeach

    var groupData = Object.keys(groupedProjects).map(function(clientName) {
        return {
            groupName: clientName,
            groupData: groupedProjects[clientName]
        };
    });

    var settings = {
        inputId: "projectsInput",
        data: projects,
        groupData: groupData,
        itemName: "project",
        groupItemName: "groupName",
        groupListName: "groupData",
        container: "transfer",
        valueName: "value",
        callable: function (data, names) {
            var intData = data.map(function(id) {
                return parseInt(id, 10);
            });
            $("#projectsInput").val(JSON.stringify(intData));
            $("#selectedItemSpan").text(names);
        }
    };

    Transfer.transfer(settings);

})(jQuery);

$(document).ready(function() {
    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);
    });
});

 $().ready(function () {
    // Validador: ao menos um projeto selecionado no transfer
    $.validator.addMethod('atLeastOneProject', function(value, element) {
        try {
            var arr = JSON.parse(value || '[]');
            return Array.isArray(arr) && arr.length > 0;
        } catch (e) {
            return false;
        }
    }, 'Por favor, selecione ao menos um projeto.');

    //Adiciona Usuário
    $('#btn_add').on('click', function(e) {
        
        //Obtêm todos os valores do form
        var fields = $(this).parents('form');
        
        $("#form_add_billing_summary").validate({
            ignore: "", // valida campos ocultos como #projectsInput
            errorClass: "invalid-feedback",
            errorElement: "span",
            rules: {  
                title_summary: "required",
                projects: { atLeastOneProject: true },
                contact_name: "required",
                main_email: {
                    required: true,
                    email: true
                }
            },
            messages: {
                title_summary: "Por favor, preencha o campo Nome do Resumo.",
                projects: { atLeastOneProject: "Por favor, selecione ao menos um projeto." },
                contact_name: "Por favor, preencha o nome para contato.",
                main_email: "Por favor, preencha um endereço de e-mail válido."
            },
            errorPlacement: function(error, element) {
                if (element.attr('name') === 'projects') {
                    error.insertAfter($('.transfer'));
                } else {
                    error.insertAfter(element);
                }
            },
            highlight: function(element){
                $(element).addClass('is-invalid');
                if ($(element).attr('name') === 'projects') {
                    $('.transfer').addClass('is-invalid');
                }
            },
            unhighlight: function(element){
                $(element).removeClass('is-invalid');
                if ($(element).attr('name') === 'projects') {
                    $('.transfer').removeClass('is-invalid');
                }
            },
            submitHandler: function () {
                var formData = new FormData(fields[0]); 
        
                var additionalContactsData = prepareAdditionalContactsData();
                
                if (additionalContactsData) {
                    formData.append('additional_contacts', JSON.stringify(additionalContactsData));
                }

                var projectIds = $('#projectsInput').val();
                var intProjectIds = JSON.parse(projectIds);
                formData.append('id_projects', JSON.stringify(intProjectIds));

                $.ajax({
                    url: '{{ route('finance.billing_summary.store') }}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: 'json',
                    beforeSend: function() {
                        var submitBtn = $('#btn_add');
                        submitBtn.prop('disabled', true).data('original-text', submitBtn.text()).text('Salvando...');
                    },
                    success: function(response) {
                        var successMsg = null;

                        if (typeof response === 'boolean') {
                            successMsg = 'Resumo de cobrança criado com sucesso.';
                        } else if (typeof response === 'string') {
                            successMsg = response;
                        } else if (response && typeof response === 'object') {
                            if (typeof response.message === 'string') {
                                successMsg = response.message;
                            } else if (typeof response.success === 'string') {
                                successMsg = response.success;
                            } else if (response.success === true) {
                                successMsg = 'Resumo de cobrança criado com sucesso.';
                            }
                        }

                        if (successMsg) {
                            showAlert({
                                title: 'Sucesso!',
                                html: successMsg,
                                icon: 'success',
                                buttonsStyling: false,
                                customClass: { confirmButton: 'btn btn-primary' },
                                confirmButtonText: 'Continuar'
                            }).then(function(result) {
                                if (result.isConfirmed) {
                                    window.location.href = '{{ route('finance.billing_summary.index') }}';
                                }
                            });
                        } else {
                            var errorMsg = (response && (response.error || response.message)) || 'Falha ao processar sua solicitação.';
                            showAlert({
                                title: 'Erro!',
                                html: errorMsg,
                                icon: 'error',
                                buttonsStyling: false,
                                customClass: { confirmButton: 'btn btn-danger' },
                                confirmButtonText: 'OK'
                            });
                        }
                    },
                    error: function(xhr) {
                        var errorMessage = 'Erro interno do servidor';
                        if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                            var errors = xhr.responseJSON.errors;
                            var errorList = '';
                            $.each(errors, function(field, messages) {
                                $.each(messages, function(_, message) {
                                    errorList += '• ' + message + '<br>';
                                });
                            });
                            errorMessage = errorList;
                        } else if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }
                        showAlert({
                            title: 'Erro!',
                            html: errorMessage,
                            icon: 'error',
                            buttonsStyling: false,
                            customClass: { confirmButton: 'btn btn-danger' },
                            confirmButtonText: 'OK'
                        });
                    },
                    complete: function() {
                        var submitBtn = $('#btn_add');
                        var originalText = submitBtn.data('original-text') || 'Salvar';
                        submitBtn.prop('disabled', false).text(originalText);
                    }
                });

            }
        });
        $(".add_contacts").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 prepareAdditionalContactsData() {
    var additionalContactsData = [];

    $('.add_contacts').each(function () {
        var contactName = $(this).find('.contact_name').val();
        var contactEmail = $(this).find('.contact_email').val();
        var contactPhone = $(this).find('.contact_phone').val();
        
        if (contactName && contactEmail) {
            var contactData = {
                contact_name: contactName,
                contact_email: contactEmail
            };
            if (contactPhone) {
                contactData.contact_phone = contactPhone;
            }
            additionalContactsData.push(contactData);
        }
    });
    
    return additionalContactsData.length ? additionalContactsData : null;
}
</script>
@endpush