@extends('template_pages.session')

@section('page_title', 'Editar Resumo de Cobranças #' . request()->route('id'))
@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_edit_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" value="{{ old('title_summary', $billing_summary->title ?? '') }}"/>
            </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" value="{{ json_encode($selected_project_ids) }}">
            </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" id="contact_name" placeholder="Nome para contato" value="{{ old('contact_name', $billing_summary->contact_name ?? '') }}">
            </div>
            <div class="col-md-4">
                <label class="form-label">E-mail Principal *</label>
                <input type="text" class="form-control" name="main_email" id="main_email" placeholder="E-mail" value="{{ old('main_email', $billing_summary->main_email ?? '') }}">
            </div>
            <div class="col-md-4">
                <label class="form-label">Telefone Principal</label>
                <input type="text" class="form-control phone_input" name="main_phone" id="main_phone" placeholder="Telefone Principal" value="{{ old('main_phone', $billing_summary->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 {{ is_array($billing_summary->additional_contact) && count($billing_summary->additional_contact) > 0 ? 'mt-2' : '' }}">
                @if(is_array($billing_summary->additional_contact))
                    @foreach($billing_summary->additional_contact as $index => $contact)
                        <div class="custom_contact mb-2" id="custom_contact_{{ $index + 1 }}">
                            <div class="row cf-group add_contacts" id="custom-field-{{ $index + 1 }}">
                                <div class="col-lg-4">
                                    <input class="form-control contact_name" placeholder="Nome para contato" type="text" name="contact_name_{{ $index + 1 }}" value="{{ $contact['contact_name'] ?? '' }}">
                                </div>
                                <div class="col-lg-4">
                                    <input class="form-control contact_email" placeholder="E-mail" type="email" name="contact_email_{{ $index + 1 }}" value="{{ $contact['contact_email'] ?? '' }}">
                                </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_{{ $index + 1 }}" value="{{ isset($contact['contact_phone']) ? \App\Helpers\FormatHelper::formatPhone($contact['contact_phone']) : '' }}">
                                        </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>
                    @endforeach
                @endif
            </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_edit" 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>

@php
$transferData = collect($projects_summary)->map(function($project) use ($selected_project_ids) {
    return [
        'project'     => $project->project,
        'value'       => $project->id,
        'selected'    => in_array($project->id, $selected_project_ids),
        'clientName'  => optional($project->billableCustomer->institucionalClient)->name
    ];
})->toArray();

$grouped = [];
foreach ($transferData as $item) {
    $clientName = $item['clientName'] ?: 'Cliente Desconhecido';
    $grouped[$clientName][] = [
        'project'  => $item['project'],
        'value'    => $item['value'],
        'selected' => $item['selected'],
    ];
}
$groupData = [];
foreach ($grouped as $clientName => $items) {
    $groupData[] = [
        'groupName' => $clientName,
        'groupData' => $items
    ];
}
@endphp

<script>
    
// Adiciona variáveis globais para detectar projetos removidos e mapear nomes
var initialSelectedProjects = @json($selected_project_ids);
initialSelectedProjects = Array.isArray(initialSelectedProjects)
    ? initialSelectedProjects.map(function(id){ return parseInt(id, 10); })
    : [];

var transferDataGlobal = @json($transferData);
var projectNameMap = {};
transferDataGlobal.forEach(function(item){
    projectNameMap[item.value] = item.project;
});

(function($) {
    "use strict";

    var settings = {
        inputId: "projectsInput",
        data: @json($transferData),
        groupData: @json($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));
        }
    };

    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);
        });
    }

    // 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.');

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

    //Editar Resumo
    $('#btn_edit').on('click', function(e) {
        //Obtêm todos os valores do form
        var fields = $(this).parents('form');
        
        $("#form_edit_billing_summary").validate({
            errorClass: "invalid-feedback",
            errorElement: "span",
            ignore: "",
            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 = [];
                try {
                    intProjectIds = JSON.parse(projectIds || '[]');
                } catch (e) {
                    intProjectIds = [];
                }
                formData.append('id_projects', JSON.stringify(intProjectIds));

                // Detecta projetos removidos (estavam selecionados inicialmente e não estão mais)
                var removedProjects = (initialSelectedProjects || []).filter(function(id) {
                    return intProjectIds.indexOf(id) === -1;
                });

                // Função para enviar o AJAX mantendo o fluxo existente
                function proceedAjax(fd) {
                    $.ajax({
                        url: '{{ route('finance.billing_summary.update', request()->route('id')) }}',
                        type: 'POST',
                        data: fd,
                        processData: false,
                        contentType: false,
                        beforeSend: function() {
                            var submitBtn = $('#btn_edit');
                            submitBtn.prop('disabled', true).data('original-text', submitBtn.text()).text('Salvando...');
                        },
                        success: function(response) {
                            var successMsg = (response && response.message)
                                ? response.message
                                : 'Resumo de cobrança atualizado com sucesso!';
                        
                            showAlert({
                                title: 'Sucesso!',
                                html: successMsg,
                                icon: 'success',
                                buttonsStyling: false,
                                customClass: { confirmButton: 'btn btn-primary' },
                                confirmButtonText: 'Continuar'
                            }).then(function(result) {
                                if (result.isConfirmed) {
                                    var redirectUrl = (response && response.redirect)
                                        ? response.redirect
                                        : '{{ route('finance.billing_summary.index') }}';
                                    window.location.href = redirectUrl;
                                }
                            });
                        },
                        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_edit');
                            var originalText = submitBtn.data('original-text') || 'Salvar';
                            submitBtn.prop('disabled', false).text(originalText);
                        }
                    });
                }

                // Se houve remoções, exibe modal avisando sobre ativação de notificação por e-mail
                if (removedProjects.length > 0) {
                    var removedNames = removedProjects.map(function(id){
                        return projectNameMap[id] || ('Projeto #' + id);
                    });

                    var warningHtml =
                        'Você removeu os seguintes projetos do resumo:<br><strong>'
                        + removedNames.join(', ')
                        + '</strong><br><br>'
                        + 'Ao continuar, a notificação por e-mail será ativada automaticamente '
                        + 'para estes projetos.<br><br>'
                        + 'Deseja continuar?';

                    showAlert({
                        title: 'Atenção',
                        html: warningHtml,
                        icon: 'warning',
                        customClass: { confirmButton: 'btn btn-success', cancelButton: 'btn btn-danger' },
                        confirmButtonText: 'Continuar',
                        showCancelButton: true
                    }).then(function(result) {
                        if (result.isConfirmed) {
                            proceedAjax(formData);
                        }
                        // Se cancelar, não faz nada
                    });
                } else {
                    // Sem remoções – segue com a atualização normalmente
                    proceedAjax(formData);
                }
            }
        });
        
        $(".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