@extends('template_pages.session')

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

@push('styles')
<!-- 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 pb-0">
    <div class="d-flex align-items-center gap-1">
        <i data-lucide="file-badge-2" class="fs-4"></i>
        <h4 class="mb-0">Certificado NFs</h4>
    </div>
</div>

<div class="card-body mt-3 pt-0">
    <div class="col-md-3">
        <form id="form_update_certificate_date">
            {{ csrf_field() }}
            <div class="input-group date_ptbr" data-toggle="date-picker" data-single-date-picker="true">
                <span class="input-group-text"><i class="ti ti-calendar-event"></i></span>
                <input type="text" class="form-control date form-control-mb-0" name="new_certificate_date" id="new_certificate_date" placeholder="DD/MM/YYYY" value="{{ $certificateDateDisplay ?? '' }}" autocomplete="off" required>
            </div>
            <div class="mt-2 d-flex justify-content-center">
                <button type="button" class="btn btn-primary w-100" id="update_certificate_date">Atualizar Data</button>
            </div>
        </form>
    </div>
</div>

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

<div class="card-body pt-0 pb-0">
    <div class="d-flex align-items-center gap-1">
        <i data-lucide="mail" class="fs-4"></i>
        <h4 class="mb-0">Configurações de Email</h4>
    </div>
</div>

<div class="card-body mt-3 pt-0">
    <div class="list-group">
        <a href="{{ route('finance.settings.email_template') }}" class="list-group-item list-group-item-action">
            <i data-lucide="square-pen" class="me-1 align-middle fs-xl"></i>
            Texto de Emails enviados para Clientes
        </a>
        <a href="{{ route('finance.settings.email_exent_template') }}" class="list-group-item list-group-item-action">
            <i data-lucide="square-pen" class="me-1 align-middle fs-xl"></i>
            Texto de Emails Internos
        </a>
        <a href="{{ route('finance.settings.email_recipients') }}" class="list-group-item list-group-item-action">
            <i data-lucide="reply-all" class="me-1 align-middle fs-xl"></i>
            Destinatários Internos de Emails
        </a>
    </div>
</div>

<div class="border-top border-dashed my-3"></div>
<div class="card-body pt-0 pb-0">
    <div class="d-flex align-items-center gap-1">
        <i data-lucide="list" class="fs-4"></i>
        <h4 class="mb-0">Editar Listas</h4>
    </div>
</div>

<div class="card-body mt-3 pt-0">
    <div class="list-group">
        <a href="{{ route('finance.settings.client_types') }}" class="list-group-item list-group-item-action">
            <i data-lucide="handshake" class="me-1 align-middle fs-xl"></i>
            Tipos de Cliente
        </a>
        <a href="{{ route('finance.settings.project_types') }}" class="list-group-item list-group-item-action">
            <i data-lucide="folder-kanban" class="me-1 align-middle fs-xl"></i>
            Tipos de Projeto
        </a>
    </div>
</div>

<div class="border-top border-dashed my-3"></div>
<div class="card-body pt-0 pb-0">
    <div class="d-flex align-items-center gap-1">
        <i data-lucide="wrench" class="fs-4"></i>
        <h4 class="mb-0">Configurações Gerais</h4>
    </div>
</div>

<div class="card-body mt-3 pt-0">
    <div class="list-group">
        <a href="{{ route('finance.settings.holidays') }}" class="list-group-item list-group-item-action">
            <i data-lucide="calendar-fold" class="me-1 align-middle fs-xl"></i>
            Feriados Bancários
        </a>
        <a href="{{ route('finance.settings.crons') }}" class="list-group-item list-group-item-action">
            <i data-lucide="clock" class="me-1 align-middle fs-xl"></i>
            Tabela de Crons
        </a>
        <a href="{{ route('finance.settings.mei_limit') }}" class="list-group-item list-group-item-action">
            <i data-lucide="chart-no-axes-combined" class="me-1 align-middle fs-xl"></i>
            Configrar limite MEI
        </a>
        <a href="{{ route('finance.settings.fines') }}" class="list-group-item list-group-item-action">
            <i data-lucide="circle-percent" class="me-1 align-middle fs-xl"></i>
            Configrar porcentagem de multas por atraso
        </a>
    </div>
</div>
@endsection

@push('scripts')
<!-- Daterangepicker Plugin Js -->
<script src="{{ asset('assets/inspinia/plugins/moment/moment.min.js') }}"></script>
<script src="{{ asset('assets/inspinia/plugins/daterangepicker/daterangepicker.js') }}"></script>
<script src="{{ asset('assets/scripts/date_picker_pt_br.js') }}"></script>
<!-- Validação Formulário -->
<script src="{{ asset('assets/inspinia/js/form-validation.js') }}"></script>
<script>
$(document).ready(function() {

    // Validação customizada de data DD/MM/YYYY
    $.validator.addMethod("dateValidation", function(value, element) {
        return this.optional(element) || moment(value, 'DD/MM/YYYY', true).isValid();
    }, "Por favor, insira uma data válida no formato DD/MM/YYYY");
    
    $("#form_update_certificate_date").validate({
        errorClass: "invalid-feedback",
        errorElement: "span",
        rules: {
            new_certificate_date: {
                required: true,
                dateValidation: true
            }
        },
        messages: {
            new_certificate_date: {
                required: "A data do certificado é obrigatória"
            }
        },
        errorPlacement: function (error, element) {
            if (element.hasClass('date')) {
                error.insertAfter(element.closest('.input-group'));
            } else {
                error.insertAfter(element);
            }
        },
        highlight: function (element, errorClass, validClass) {
            $(element).addClass('is-invalid');
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).removeClass('is-invalid');
        },
        submitHandler: function(form) {
            // Disparar o AJAX quando o formulário for válido
            submitCertificateDateAjax(form);
        }
    });

    // Clique do botão: prevenir default e disparar validação + submit
    $('#update_certificate_date').on('click', function(e) {
        e.preventDefault();
        if ($("#form_update_certificate_date").valid()) {
            $("#form_update_certificate_date").submit();
        }
    });

    // Envio via AJAX - padrão semelhante ao de charges/add
    function submitCertificateDateAjax(form) {
        var $form = $(form);
        var submitBtn = $('#update_certificate_date');
        var btnText = submitBtn.text();

        // Desabilitar botão e mostrar loading
        submitBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-2" role="status"></span>Atualizando...');

        var formData = new FormData(form);

        $.ajax({
            url: '{{ route("finance.settings.update.certificate_date") }}',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(resp) {
                if (resp && resp.success) {
                    showAlert("successToast", { text: resp.message || "Data do certificado atualizada!" });
                    if (resp.certificate_date) {
                        $('#new_certificate_date').val(resp.certificate_date);
                    }
                } else {
                    showAlert("error", { title: "Erro!", text: (resp && resp.message) ? resp.message : "Falha ao atualizar a data." });
                }
            },
            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