@extends('template_pages.session')

@section('page_title', 'Configurações - Limite de MEI')
@section('page_icon', 'cog')
@section('navbar', 'finance.navbar')

@section('content_page')
    <div class="card-body mt-3 pt-0">
        <form id="form_update_mei_config">
            {{ csrf_field() }}
            <div class="row">
                <div class="col-md-4">
                    <label class="form-label">Percentual de limite para notificação:</label>
                    <div class="input-group">
                        <input type="text" class="form-control form-control-mb-0" name="mei_percentage" id="mei_percentage" value="{{ $mei_percentage ?? '0.00' }}" placeholder="0.00" autocomplete="off" required>
                        <span class="input-group-text">%</span>
                    </div>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Limite MEI:</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="{{ old('value', isset($value) ? number_format($value, 2, ',', '.') : null) }}" required/>
                    </div>
                </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="button" class="btn btn-primary w-100" id="update_mei_config">Atualizar</button>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
<!-- 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>
$(document).ready(function() {

    $("#mei_percentage").mask("##0.00", {reverse: true});

    $("#form_update_mei_config").validate({
        errorClass: "invalid-feedback",
        errorElement: "span",
        rules: {
            mei_percentage: {
                required: true
            }
        },
        messages: {
            mei_percentage: {
                required: "A porcentagem é obrigatória"
            }
        },
        errorPlacement: function (error, element) {
            if (element.hasClass('form-control')) {
                error.insertAfter(element.closest('.input-group'));
            } else {
                error.insertAfter(element);
            }
        },
        highlight: function (element) {
            $(element).addClass('is-invalid');
        },
        unhighlight: function (element) {
            $(element).removeClass('is-invalid');
        },
        submitHandler: function(form) {
            submitFinePercentageAjax(form);
        }
    });

    $('#update_mei_config').on('click', function(e) {
        e.preventDefault();
        if ($("#form_update_mei_config").valid()) {
            $("#form_update_mei_config").submit();
        }
    });

    function submitFinePercentageAjax(form) {
        var $form = $(form);
        var submitBtn = $('#update_mei_config');
        var btnText = submitBtn.text();

        submitBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-2" role="status"></span>Atualizando...');

        // Normaliza valor para ponto antes de enviar
        var fp = $('#mei_percentage').val().replace(',', '.');
        var formData = new FormData(form);
        formData.set('mei_percentage', fp);

        $.ajax({
            url: '{{ route("finance.settings.update.mei_limit") }}',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(resp) {
                if (resp && resp.success) {
                    showAlert("successToast", { text: resp.message || "Multa por atraso atualizada!" });
                    if (resp.mei_percentage) {
                        $('#mei_percentage').val(resp.mei_percentage);
                    }
                    if (resp.value) {
                        $('#value').val(resp.value);
                    }
                } else {
                    showAlert("error", { title: "Erro!", text: (resp && resp.message) ? resp.message : "Falha ao atualizar a multa." });
                }
            },
            error: function(xhr) {
                let errorMessage = 'Ocorreu um erro ao salvar.';
                if (xhr.status === 422) {
                    const errors = xhr.responseJSON && xhr.responseJSON.errors ? xhr.responseJSON.errors : {};
                    let errorList = '<ul>';
                    $.each(errors, function(field, messages) {
                        $.each(messages, function(index, message) {
                            errorList += '<li>' + message + '</li>';
                        });
                    });
                    errorList += '</ul>';
                    showAlert("error", { title: "Erro de Validação!", html: errorList });
                } else {
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }
                    showAlert("error", { title: "Erro!", text: errorMessage });
                }
            },
            complete: function() {
                submitBtn.prop('disabled', false).html(btnText);
            }
        });
    }
});
</script>
@endpush