@extends('template_pages.session')

@section('page_title', 'Configurações - Multa por Atraso')
@section('page_icon', 'cog')
@section('navbar', 'finance.navbar')

@section('content_page')
    <div class="card-body pb-0">
        <div class="d-flex align-items-center gap-1">
            <i data-lucide="circle-percent" class="fs-4"></i>
            <h4 class="mb-0">Multa por Atraso</h4>
        </div>
    </div>

    <div class="card-body mt-3 pt-0">
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <form id="form_update_fine_percentage">
                        {{ csrf_field() }}
                        <label class="form-label">Percentual do total da fatura a ser aplicado como multa:</label>
                        <div class="input-group">
                            <input type="text" class="form-control form-control-mb-0" name="fine_percentage" id="fine_percentage" value="{{ $fine_percentage ?? '0.00' }}" placeholder="0.00" autocomplete="off" required>
                            <span class="input-group-text">%</span>
                        </div>
                        <div class="mt-3 d-flex justify-content-center">
                            <button type="button" class="btn btn-primary w-100" id="update_fine_percentage">Atualizar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </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() {

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

    $("#form_update_fine_percentage").validate({
        errorClass: "invalid-feedback",
        errorElement: "span",
        rules: {
            fine_percentage: {
                required: true
            }
        },
        messages: {
            fine_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_fine_percentage').on('click', function(e) {
        e.preventDefault();
        if ($("#form_update_fine_percentage").valid()) {
            $("#form_update_fine_percentage").submit();
        }
    });

    function submitFinePercentageAjax(form) {
        var $form = $(form);
        var submitBtn = $('#update_fine_percentage');
        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 = $('#fine_percentage').val().replace(',', '.');
        var formData = new FormData(form);
        formData.set('fine_percentage', fp);

        $.ajax({
            url: '{{ route("finance.settings.update.fine_percentage") }}',
            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.fine_percentage) {
                        $('#fine_percentage').val(resp.fine_percentage);
                    }
                } 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