@extends('template_pages.session')

@section('page_title', 'Upload de NFs')
@section('page_icon', 'file-text')
@section('navbar', 'finance.navbar')

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

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

        <input type="hidden" id="invoice_id" name="invoice_id" value="{{ isset($invoice) ? $invoice->id : '' }}">

        <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-3">
                <label class="form-label">Colaborador *</label>
                <select id="collaborator" name="collaborator_id" class="form-control select2" {{ isset($invoice) ? 'disabled' : '' }}>
                    <option value="" {{ isset($invoice) ? '' : 'selected' }}>Selecione...</option>
                    @foreach ($collaborators as $collaborator)
                        <option value="{{ $collaborator->id }}" {{ isset($invoice) && $invoice->collaborator_id == $collaborator->id ? 'selected' : '' }}>
                            {{ $collaborator->name }}
                        </option>
                    @endforeach
                </select>
            </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">Informações da NFs</h4>
        </div>

        <div class="row mt-3">
            <div class="col">
                <label class="form-label">Tipo de Nota Fiscal *</label>
                @php
                    $nfTypeUi = isset($invoice) ? ($invoice->origin_type === 'award' ? 'Prêmio' : 'Serviço Prestado') : '';
                @endphp
                <select id="nf_type" name="nf_type" class="form-control select2" {{ isset($invoice) ? 'disabled' : '' }}>
                    <option value="" {{ isset($invoice) ? '' : 'selected' }}>Tipo de Nota Fiscal</option>
                    <option value="Serviço Prestado" {{ isset($invoice) && $nfTypeUi === 'Serviço Prestado' ? 'selected' : '' }}>Serviço Prestado</option>
                    <option value="Prêmio" {{ isset($invoice) && $nfTypeUi === 'Prêmio' ? 'selected' : '' }}>Prêmio</option>
                </select>
            </div> 
            <div class="col">
                <label class="form-label">Mês de Referência *</label>
                @php
                    $monthRef = isset($invoice) && $invoice->reference_date ? \Carbon\Carbon::parse($invoice->reference_date)->format('m') : '';
                @endphp
                <select id="month_ref" name="month_ref" class="form-control select2" {{ isset($invoice) ? 'disabled' : '' }}>
                    <option value="" {{ isset($invoice) ? '' : 'selected' }}>Mês de Referência</option>
                    <option value="01" {{ isset($invoice) && $monthRef==='01' ? 'selected' : '' }}>Janeiro</option>
                    <option value="02" {{ isset($invoice) && $monthRef==='02' ? 'selected' : '' }}>Fevereiro</option>
                    <option value="03" {{ isset($invoice) && $monthRef==='03' ? 'selected' : '' }}>Março</option>
                    <option value="04" {{ isset($invoice) && $monthRef==='04' ? 'selected' : '' }}>Abril</option>
                    <option value="05" {{ isset($invoice) && $monthRef==='05' ? 'selected' : '' }}>Maio</option>
                    <option value="06" {{ isset($invoice) && $monthRef==='06' ? 'selected' : '' }}>Junho</option>
                    <option value="07" {{ isset($invoice) && $monthRef==='07' ? 'selected' : '' }}>Julho</option>
                    <option value="08" {{ isset($invoice) && $monthRef==='08' ? 'selected' : '' }}>Agosto</option>
                    <option value="09" {{ isset($invoice) && $monthRef==='09' ? 'selected' : '' }}>Setembro</option>
                    <option value="10" {{ isset($invoice) && $monthRef==='10' ? 'selected' : '' }}>Outubro</option>
                    <option value="11" {{ isset($invoice) && $monthRef==='11' ? 'selected' : '' }}>Novembro</option>
                    <option value="12" {{ isset($invoice) && $monthRef==='12' ? 'selected' : '' }}>Dezembro</option>
                </select>
            </div>   
            <div class="col">
                <label class="form-label">Ano de Referência *</label>
                <select id="year_ref" name="year_ref" class="form-control select2" {{ isset($invoice) ? 'disabled' : '' }}>
                    @php
                        $yearRef = isset($invoice) && $invoice->reference_date ? \Carbon\Carbon::parse($invoice->reference_date)->format('Y') : '';
                    @endphp
                    @if($yearRef)
                        <option value="{{ $yearRef }}" selected>{{ $yearRef }}</option>
                    @else
                        <option value="">Ano de Referência</option>
                        @for ($i = 0; $i <= 17; $i++)
                            @php $year = date('Y') - $i; @endphp
                            <option value="{{ $year }}">{{ $year }}</option>
                        @endfor
                    @endif
                </select>
            </div> 
            <div class="col-md">
                <label class="form-label">Valor da NF*</label>
                <div class="input-group">
                    <span class="input-group-text">R$</span>
                    <input class="form-control money form-control-mb-0" placeholder="Valor" type="text" name="value" id="value"
                           value="{{ isset($invoice) ? \App\Helpers\FormatHelper::decimalToCurrency($invoice->expected_amount ?? 0, false) : '' }}"/>
                </div>
            </div>   
            <div class="col">
                <label class="form-label">Anexar Nota Fiscal *</label>
                <div class="input-group file-browser clickable-file-input" style="cursor: pointer;" id="clickable-file-input-${customFieldIndex}">
                    <input type="text" class="form-control form-control-mb-0 browse-file" placeholder="Anexar Nota Fiscal" readonly style="pointer-events: none; user-select: none;">
                    <span class="input-group-text btn btn-primary mb-0 rounded-end" style="cursor: pointer;">Anexar</span>
                    <input id="file" name="file" type="file" accept=".pdf" class="file-browserinput custom_file_nf" style="display: none;">
                </div>
                <div class="invalid-feedback" style="margin-top: 5px!important;">
                    Por favor, informe um arquivo PDF válido.
                </div>
            </div>  
        </div>

        @if (!isset($invoice))
        <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 Item
            </span>
            <div class="custom_fields_add row_anexos"></div>
        </div>
        @endif

        <!-- 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>
<!-- Validação Formulário -->
<script src="{{ asset('assets/inspinia/js/form-validation.js') }}"></script>
<!-- SweetAlert2 -->
<script src="{{ asset('assets/inspinia/plugins/sweetalert2/sweetalert2.min.js') }}"></script>

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

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

    $('#nf_type').select2({
        placeholder: "Tipo de Nota Fiscal"
    });    
    $('#month_ref').select2({
        placeholder: "Mês de Referência"
    }); 
    $('#year_ref').select2({
        placeholder: "Ano de Referência"
    }); 

    $(document).on('click', '.clickable-file-input', function (e) {
        if (!$(e.target).is('.file-browserinput')) {
            $(this).find('.file-browserinput').trigger('click');
        }
    });

    // Função para reindexar boletos
    function reindexNfs(container) {
        $(container).find('.custom_charge').each(function(index) {
            var i = index + 1; // começa em 1
            $(this).attr('id', 'custom_charge_' + i);
            $(this).find('.charge-group').attr('id', 'charge-field-' + i);

            $(this).find('.charge_description').attr('name', 'charge_description_' + i);
            $(this).find('.charge_value').attr('name', 'charge_value_' + i);
            $(this).find('.charge_issue_date').attr('name', 'charge_issue_date_' + i);
            $(this).find('.charge_due_date').attr('name', 'charge_due_date_' + i);
        });
    }

    // Adicionar NFS
    $('.custom-fields-container').on('click', '.add-custom-field', function() {

        var targetContainer = $('.custom_fields_add');
        var customFieldIndex = $(targetContainer).find('.custom_nfs').length + 1;
        var currentYear = new Date().getFullYear();
        var yearOptions = '';
        for (var i = 0; i <= 17; i++) {
            var year = currentYear - i;
            yearOptions += '<option value="' + year + '">' + year + '</option>';
        }

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

        var fieldGroup = `
        <div class="custom_nfs mb-sm-0 mb-2" id="custom_nfs_${customFieldIndex}">
            <div class="row cf-group add_nfs mt-2" id="custom-field-${customFieldIndex}">
                <div class="col-lg mb-2">
                    <select class="form-control form-select select2 custom_nf_type" name="nf_type_${customFieldIndex}" required>
                        <option value="">Tipo de Nota Fiscal</option>
                        <option value="Serviço Prestado">Serviço Prestado</option>
                        <option value="Prêmio">Prêmio</option>
                    </select>
                    <div class="invalid-feedback">Selecione o tipo de Nota Fiscal</div>
                </div>
                <div class="col-lg mb-2">   
                    <select name="month_ref_nf_${customFieldIndex}" class="form-control form-select select2 custom_month_ref">
                        <option value="">Mês de Referência</option>
                        <option value="01">Janeiro</option>
                        <option value="02">Fevereiro</option>
                        <option value="03">Março</option>
                        <option value="04">Abril</option>
                        <option value="05">Maio</option>
                        <option value="06">Junho</option>
                        <option value="07">Julho</option>
                        <option value="08">Agosto</option>
                        <option value="09">Setembro</option>
                        <option value="10">Outubro</option>
                        <option value="11">Novembro</option>
                        <option value="12">Dezembro</option>
                    </select>
                    <div class="invalid-feedback">Selecione o mês de referência</div>
                </div>
                <div class="col-lg mb-2">   
                    <select name="year_ref_nf_${customFieldIndex}" class="form-control form-select select2 custom_year_ref">
                        <option value="">Ano de Referência</option>
                        ${yearOptions}
                    </select>
                    <div class="invalid-feedback">Selecione o ano de referência</div>
                </div>
                <div class="col-lg mb-2">
                    <div class="input-group">
                        <span class="input-group-text">R$</span>
                        <input class="form-control money form-control-mb-0 custom_value_nf rounded-end" placeholder="Valor" type="text" id="custom_value_nf_${customFieldIndex}" name="custom_value_nf_${customFieldIndex}"/>
                        <div class="invalid-feedback" style="margin-top: 5px!important;">Informe o valor da NF</div>
                    </div>
                </div>
                <div class="col-lg mb-2">
                    <div class="row m-0 space-between">
                        <div class="col p-0">  
                            <div class="input-group file-browser clickable-file-input" style="cursor: pointer;" id="clickable-file-input-${customFieldIndex}">
                                <input type="text" class="form-control browse-file form-control-mb-0" placeholder="Anexar Nota Fiscal" readonly style="pointer-events: none; user-select: none;">
                                <span class="input-group-text btn btn-primary mb-0 rounded-end" style="cursor: pointer;">Anexar</span>
                                <input id="file_${customFieldIndex}" name="file_${customFieldIndex}" type="file" accept=".pdf" class="file-browserinput custom_file_nf" style="display: none;">
                                <div class="invalid-feedback" style="margin-top: 5px!important;">Anexe o arquivo da NF</div>
                            </div>
                        </div>
                        <div class="col-auto">
                            <span class="btn btn-danger remove-nfs btn-icon"><i class="ti ti-minus"></i></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        `;

        $(targetContainer).append(fieldGroup);

        $('#custom-field-' + customFieldIndex).find('.select2').select2({
            width: '100%'
        });

        var $typeSelect = $('#custom-field-' + customFieldIndex).find('.custom_nf_type');
        var $monthSelect = $('#custom-field-' + customFieldIndex).find('.custom_month_ref');

        $typeSelect.on('change', function () {
            updateMonthOptions($(this), $monthSelect);
        });
        
        addMaskMoney();        
    });

    // Remover NFS adicional
    $('.custom-fields-container').on('click', '.remove-nfs', function() {
        $(this).closest('.custom_nfs').remove();
    });

    $(document).on('change', '.file-browserinput', function () {
        const fileName = this.files.length > 0 ? this.files[0].name : '';
        $(this).closest('.file-browser').find('.browse-file').val(fileName);
    });

    function populateAllMonths($monthSelect) {
        $monthSelect.empty();
        $monthSelect.append(new Option('Mês de Referência', ''));
        $monthSelect.append(new Option('Janeiro', '01'));
        $monthSelect.append(new Option('Fevereiro', '02'));
        $monthSelect.append(new Option('Março', '03'));
        $monthSelect.append(new Option('Abril', '04'));
        $monthSelect.append(new Option('Maio', '05'));
        $monthSelect.append(new Option('Junho', '06'));
        $monthSelect.append(new Option('Julho', '07'));
        $monthSelect.append(new Option('Agosto', '08'));
        $monthSelect.append(new Option('Setembro', '09'));
        $monthSelect.append(new Option('Outubro', '10'));
        $monthSelect.append(new Option('Novembro', '11'));
        $monthSelect.append(new Option('Dezembro', '12'));
        $monthSelect.trigger('change.select2');
    }

    function updateMonthOptions($typeSelect, $monthSelect) {
        var selectedType = $typeSelect.val();
        var allowedMonths = selectedType === 'Prêmio' ? ['04', '10'] : null;
        var currentVal = $monthSelect.val();

        if (!allowedMonths) {
            populateAllMonths($monthSelect);
            $monthSelect.val(currentVal).trigger('change.select2');
            return;
        }

        $monthSelect.empty();
        $monthSelect.append(new Option('Mês de Referência', ''));

        if (allowedMonths.includes('04')) {
            $monthSelect.append(new Option('Abril', '04'));
        }
        if (allowedMonths.includes('10')) {
            $monthSelect.append(new Option('Outubro', '10'));
        }

        if (!allowedMonths.includes(currentVal)) {
            $monthSelect.val('');
        } else {
            $monthSelect.val(currentVal);
        }

        $monthSelect.trigger('change.select2');
    }

    $('#nf_type').on('change', function () {
        updateMonthOptions($(this), $('#month_ref'));
    });
    
    $('#btn_add').on('click', function(e) {
        $("#invoiceForm").validate({
            ignore: [],
            errorClass: "invalid-feedback",
            errorElement: "span",
            rules: {
                collaborator_id: { required: true },
                nf_type: { required: true },
                month_ref: { required: true },
                year_ref: { required: true },
                value: { required: true },
                file: { required: true }
            },
            messages: {
                collaborator_id: { required: "Selecione um colaborador" },
                nf_type: { required: "Selecione o tipo de Nota Fiscal" },
                month_ref: { required: "Selecione o mês de referência" },
                year_ref: { required: "Selecione o ano de referência" },
                value: { required: "Informe o valor da NF" },
                file: { required: "Anexe o arquivo da NF" }
            },
            errorPlacement: function (error, element) {
                if (element.hasClass('select2-hidden-accessible')) {
                    error.insertAfter(element.next('.select2-container'));
                } else if (element.hasClass('money')) {
                    error.insertAfter(element.closest('.input-group'));
                } else if (element.hasClass('date')) {
                    error.insertAfter(element.closest('.input-group'));
                } else if (element.hasClass('custom_file_nf')) {
                    error.insertAfter(element.closest('.file-browser'));
                } else {
                    error.insertAfter(element);
                }
            },
            highlight: function (element, errorClass, validClass) {
                $(element).addClass('is-invalid');
                if ($(element).hasClass('select2-hidden-accessible')) {
                    $(element).next('.select2-container').find('.select2-selection').addClass('is-invalid');
                }
                if (element.type === 'file' || $(element).hasClass('custom_file_nf')) {
                    $(element).closest('.file-browser').find('.browse-file').addClass('is-invalid');
                }
            },
            unhighlight: function (element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
                if ($(element).hasClass('select2-hidden-accessible')) {
                    $(element).next('.select2-container').find('.select2-selection').removeClass('is-invalid');
                }
                if (element.type === 'file' || $(element).hasClass('custom_file_nf')) {
                    $(element).closest('.file-browser').find('.browse-file').removeClass('is-invalid');
                }
            },
            submitHandler: function(form) {
                var isValid = true;
                var errorMessages = [];

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

                submitFormAjax(form);
            }
        });
        $(".add_nfs").each(function(){ 
            $(this).find('.custom_nf_type').rules("add", { 
                required:true,
                messages:{required:""}
            });

            $(this).find('.custom_month_ref').rules("add", { 
                required:true,
                messages:{required:""}
            });

            $(this).find('.custom_year_ref').rules("add", { 
                required:true,
                messages:{required:""}
            });

            $(this).find('.custom_value_nf').rules("add", { 
                required:true,
                messages:{required:""}
            });

            $(this).find('.custom_file_nf').rules("add", { 
                required:true,
                messages:{required:""}
            });
        });
    });


    function submitFormAjax(form) {
        var $form = $(form);
        var submitBtn = $form.find('button[type="submit"]');
        var btnText = submitBtn.text();
        
        submitBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-2" role="status"></span>Salvando...');
        
        var formData = new FormData(form);

        // Montar items[] com o item principal + itens adicionais
        var items = [];

        // Item principal do formulário
        var baseItem = {
            nf_type: $('#nf_type').val(),
            month_ref: $('#month_ref').val(),
            year_ref: $('#year_ref').val(),
            value: $('#value').val(),
            file: $('#file')[0]?.files[0] || null
        };
        items.push(baseItem);

        // Itens adicionais
        $('.add_nfs').each(function () {
            items.push({
                nf_type: $(this).find('.custom_nf_type').val(),
                month_ref: $(this).find('.custom_month_ref').val(),
                year_ref: $(this).find('.custom_year_ref').val(),
                value: $(this).find('.custom_value_nf').val(),
                file: $(this).find('.custom_file_nf')[0]?.files[0] || null
            });
        });

        // Append dos campos dentro de items[] usando notação de colchetes (Laravel parseia como array)
        items.forEach(function (item, idx) {
            formData.append(`items[${idx}][nf_type]`, item.nf_type || '');
            formData.append(`items[${idx}][month_ref]`, item.month_ref || '');
            formData.append(`items[${idx}][year_ref]`, item.year_ref || '');
            formData.append(`items[${idx}][value]`, item.value || '');
            if (item.file) {
                formData.append(`items[${idx}][file]`, item.file);
            }
        });

        $.ajax({
            url: '{{ route('finance.invoices.upload.store') }}',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function (response) {
                if (response.success) {
                    Swal.fire({
                        title: 'Sucesso!',
                        text: response.message || 'NFs salvas com sucesso!',
                        icon: 'success',
                        confirmButtonText: 'OK'
                    }).then((result) => {
                        if (response.redirect) {
                            window.location.href = response.redirect;
                        } else {
                            $form[0].reset();
                            $('.custom_fields_add').empty();
                            updateTotal();
                        }
                    });
                }
            },
            error: function (xhr) {
                let errorMessage = 'Ocorreu um erro ao salvar a cobrança.';
                
                if (xhr.status === 422) {
                    // Erros de validação do servidor
                    const errors = xhr.responseJSON.errors;
                    let errorList = '<ul>';
                    
                    $.each(errors, function(field, messages) {
                        $.each(messages, function(index, message) {
                            errorList += '<li>' + message + '</li>';
                        });
                    });
                    
                    errorList += '</ul>';
                    
                    Swal.fire({
                        title: 'Erro de Validação!',
                        html: errorList,
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                } else {
                    // Outros erros
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }
                    
                    Swal.fire({
                        title: 'Erro!',
                        text: errorMessage,
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                }
            }
        });
    }
});
</script>
@endpush