@extends('template_pages.session')

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

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

@section('content_page')
<div class="card-body">
    <div class="d-flex align-items-center gap-1 mb-3">
        <i data-lucide="mail" class="fs-4"></i>
        <h4 class="mb-0">Texto e Template de Emails (Finance)</h4>
    </div>

    <div class="row row-sm">
        <div class="col-lg-8">
            <div class="card rounded-3">
                <div class="card-header">
                    <div class="card-title">Editar Template</div>
                </div>
                <div class="card-body">
                    <form id="form_email_template" class="needs-validation" method="post" autocomplete="off">
                        {{ csrf_field() }}

                        <div class="row g-3">
                            <div class="col-lg-12">
                                <label class="form-label">Tipo de Notificação</label>
                                <select class="form-select select2" name="notification_type" id="notification_type">
                                    @php
                                        $types = $notificationTypes ?? [];
                                    @endphp
                                    @foreach($types as $val => $label)
                                        <option value="{{ $val }}" @selected(($selectedType ?? '') === $val)>{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-lg-12">
                                <label class="form-label">Assunto <span class="text-red">*</span></label>
                                <input class="form-control" placeholder="Assunto do email" type="text" name="template_subject" id="template_subject" value="{{ $templateSubject ?? '' }}">
                            </div>

                            <div class="col-lg-12">
                                <label class="form-label">Corpo do Email <span class="text-red">*</span></label>
                                <textarea class="form-control" rows="10" name="template_body" id="template_body" placeholder="HTML ou texto do email">{{ $templateBody ?? '' }}</textarea>
                                <small class="text-muted d-block mt-1">Você pode usar tags como {{ '{' }}data_vencimento{{ '}' }}, {{ '{' }}data_emissao{{ '}' }}, etc.</small>
                            </div>

                            <div class="col-lg-12">
                                <label class="form-label">Assinatura</label>
                                <select class="form-select select2" name="signature_html" id="signature_html">
                                    <option value="Financeiro" @selected(($signatureHtml ?? 'Financeiro') === 'Financeiro')>Financeiro</option>
                                </select>
                            </div>
                        </div>

                        <div class="mt-4 d-flex gap-2">
                            <button type="button" class="btn btn-primary" id="save_template">
                                <i class="ti ti-device-floppy me-1"></i> Salvar Template
                            </button>
                            <button type="button" class="btn btn-outline-secondary" id="preview_template">
                                <i class="ti ti-eye me-1"></i> Pré-visualizar
                            </button>
                        </div>
                    </form>

                    <div class="invalid-feedback d-block mt-3" id="templateError" style="display:none;"></div>
                </div>
            </div>

            <div class="card rounded-3 mt-3">
                <div class="card-header">
                    <div class="card-title">Envio de Teste Rápido</div>
                </div>
                <div class="card-body">
                    <form id="form_email_test" class="needs-validation" method="post" autocomplete="off">
                        {{ csrf_field() }}
                        <div class="row g-3">
                            <div class="col-md-12">
                                <label class="form-label">E-mail para teste <span class="text-red">*</span></label>
                                <div class="input-group">
                                    <input class="form-control" placeholder="email@exemplo.com" type="email" name="test_email" id="test_email" value="">
                                    <button type="button" class="btn btn-success" id="send_test">
                                        <i class="ti ti-send me-1"></i> Enviar Teste
                                    </button>
                                </div>
                            </div>
                        </div>                 
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card rounded-3">
                <div class="card-header">
                    <div class="card-title">Tags Disponíveis</div>
                </div>
                <div class="card-body">
                    @php
                        $tags = $availableTags ?? [
                            'data_vencimento' => 'Data de vencimento',
                            'data_emissao' => 'Data de emissão',
                            'data_vencimento_original' => 'Data de vencimento original',
                            'nome_projeto' => 'Nome do projeto',
                            'valor_cobranca' => 'Valor',
                            'link_boleto' => 'Link do boleto',
                            'link_nota_fiscal' => 'Link da nota fiscal',
                            'tabela_multa' => 'Tabela de multa',
                            'tabela_resumo_cobranca' => 'Tabela resumo cobrança',
                            'detalhes_resumo_cobranca' => 'Detalhes resumo cobrança',
                            'mes_resumo' => 'Mês resumo',
                        ];
                    @endphp
                    <p class="mb-2 text-muted">Clique para copiar e usar no assunto/corpo.</p>
                    <div class="list-group">
                        @foreach($tags as $tag => $desc)
                            @php $placeholder = '{' . $tag . '}'; @endphp
                            <button type="button" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center copy-tag" data-tag="{{ $placeholder }}">
                                <span>
                                    <code>{{ $placeholder }}</code>
                                    <small class="text-muted ms-2">{{ $desc }}</small>
                                </span>
                                <i class="ti ti-clipboard"></i>
                            </button>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Pré-visualização -->
<div class="modal fade" id="previewModal" tabindex="-1" aria-labelledby="previewModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="previewModalLabel">Pré-visualização do Email</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
      </div>
      <div class="modal-body p-0" id="preview_modal_body" style="min-height:400px; overflow:auto;"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</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>
<!--Summernote js-->
<script src="{{ asset('assets/inspinia/plugins/summernote/summernote-bs5.min.js') }}"></script>
<script src="{{ asset('assets/inspinia/js/form-validation.js') }}"></script>
<script>
$(document).ready(function() {

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

    $('#notification_type').select2({
        placeholder: "Selecione o tipo de notificação"
    });  

    $('#signature_html').select2({
        placeholder: "Selecione o tipo de assinatura"
    });  

    // Copiar tags para a área de transferência
    $('.copy-tag').on('click', function() {
        var tag = $(this).data('tag');
        navigator.clipboard.writeText(tag).then(function() {
            showAlert("successToast", { text: "Tag copiada: " + tag });
        }).catch(function() {
            showAlert("error", { title: "Erro!", text: "Não foi possível copiar a tag." });
        });
    });

    // Validação do template
    var validatorTemplate = $("#form_email_template").validate({
        errorClass: "invalid-feedback",
        errorElement: "span",
        highlight: function(element){ $(element).addClass('is-invalid'); },
        unhighlight: function(element){ $(element).removeClass('is-invalid'); },
        rules: {
            template_subject: { required: true, minlength: 3, maxlength: 255 },
            template_body: { required: true, minlength: 10 }
        },
        messages: {
            template_subject: {
                required: "O assunto é obrigatório",
                minlength: "Mínimo de 3 caracteres",
                maxlength: "Máximo de 255 caracteres"
            },
            template_body: {
                required: "O corpo do email é obrigatório",
                minlength: "Mínimo de 10 caracteres"
            }
        }
    });

    // Inicializar Summernote apenas no corpo do email
    function initSummernote() {
        if (!$('#template_body').hasClass('summernote-initialized')) {
            $('#template_body').summernote({
                height: 300,
                toolbar: [
                    ['font', ['bold', 'italic', 'underline', 'strikethrough', 'clear']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['insert', ['link']],
                    ['view', ['codeview']]
                ]
            });
            $('#template_body').addClass('summernote-initialized');
        }
    }
    initSummernote();

    function getTemplateBody() {
        return $('#template_body').hasClass('summernote-initialized')
            ? $('#template_body').summernote('code')
            : $('#template_body').val();
    }

    function syncEditorBeforeValidate() {
        $('#template_body').val(getTemplateBody());
    }

    // Salvar template
    $('#save_template').on('click', function() {
        syncEditorBeforeValidate();
        if (!$("#form_email_template").valid()) { return; }
        var $btn = $(this);
        var btnText = $btn.html();
        $btn.prop('disabled', true).html('<span class="spinner-grow spinner-grow-sm me-2"></span> Salvando...');

        $.ajax({
            url: '{{ route('finance.settings.update.email_template') }}',
            type: 'POST',
            data: {
                _token: $('input[name="_token"]').val(),
                notification_type: $('#notification_type').val(),
                template_subject: $('#template_subject').val(),
                template_body: getTemplateBody(),
                signature_html: $('#signature_html').val()
            },
            success: function(resp) {
                if (resp && resp.success) {
                    showAlert("successToast", { text: resp.message || "Template atualizado com sucesso!" });
                } else {
                    showAlert("error", { title: "Erro!", text: (resp && resp.message) ? resp.message : "Falha ao atualizar template." });
                }
            },
            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() { $btn.prop('disabled', false).html(btnText); }
        });
    });

    // Preview template
    $('#preview_template').on('click', function() {
        syncEditorBeforeValidate();
        if (!$("#form_email_template").valid()) { return; }
        var $btn = $(this);
        var btnText = $btn.html();
        $btn.prop('disabled', true).html('<span class="spinner-grow spinner-grow-sm me-2"></span> Gerando preview...');

        $.ajax({
            url: '{{ route('finance.settings.preview.email_template') }}',
            type: 'POST',
            data: {
                _token: $('input[name="_token"]').val(),
                notification_type: $('#notification_type').val(),
                template_subject: $('#template_subject').val(),
                template_body: getTemplateBody(),
                signature_html: $('#signature_html').val()
            },
            success: function(resp) {
                if (resp && resp.success && resp.html) {
                    // Pré-visualizar também o título (subject) processado
                    var subjectPreview = resp.subject || $('#template_subject').val();
                    $('#previewModalLabel').text('Pré-visualização do Email — ' + subjectPreview);

                    $('#preview_modal_body').empty();

                    var iframe = document.createElement('iframe');
                    iframe.className = 'w-100';
                    iframe.style.minHeight = '600px';
                    iframe.style.border = '0';
                    iframe.setAttribute('sandbox', 'allow-same-origin allow-popups allow-forms allow-scripts');
                    iframe.setAttribute('referrerpolicy', 'no-referrer');

                    if ('srcdoc' in iframe) {
                        iframe.srcdoc = resp.html;
                        $('#preview_modal_body').append(iframe);
                    } else {
                        $('#preview_modal_body').append(iframe);
                        var doc = iframe.contentDocument || iframe.contentWindow.document;
                        doc.open();
                        doc.write(resp.html);
                        doc.close();
                    }

                    var modal = new bootstrap.Modal(document.getElementById('previewModal'));
                    modal.show();
                } else {
                    showAlert("error", { title: "Erro!", text: (resp && resp.message) ? resp.message : "Falha ao gerar preview." });
                }
            },
            error: function(xhr) {
                let errorMessage = 'Ocorreu um erro ao gerar o preview.';
                if (xhr.responseJSON && xhr.responseJSON.message) { errorMessage = xhr.responseJSON.message; }
                showAlert("error", { title: "Erro!", text: errorMessage });
            },
            complete: function() { $btn.prop('disabled', false).html(btnText); }
        });
    });

    // Validação do envio de teste
    var validatorTest = $("#form_email_test").validate({
        errorClass: "invalid-feedback",
        errorElement: "span",
        highlight: function(element){ $(element).addClass('is-invalid'); },
        unhighlight: function(element){ $(element).removeClass('is-invalid'); },
        rules: {
            test_email: { required: true, email: true, maxlength: 255 }
        },
        messages: {
            test_email: {
                required: "E-mail é obrigatório",
                email: "Insira um e-mail válido",
                maxlength: "Máximo de 255 caracteres"
            }
        }
    });

    // Enviar teste rápido
    $('#send_test').on('click', function() {
        if (!$("#form_email_test").valid()) { return; }
        syncEditorBeforeValidate();
        if (!$("#form_email_template").valid()) {
            showAlert("error", { title: "Template inválido", text: "Corrija o assunto/corpo antes do teste." });
            return;
        }

        var $btn = $(this);
        var btnText = $btn.html();
        $btn.prop('disabled', true).html('<span class="spinner-grow spinner-grow-sm me-2"></span> Enviando...');

        $.ajax({
            url: '{{ route('finance.settings.send.email_test') }}',
            type: 'POST',
            data: {
                _token: $('input[name="_token"]').val(),
                to_email: $('#test_email').val(),
                notification_type: $('#notification_type').val()
            },
            success: function(resp) {
                if (resp && resp.success) {
                    showAlert("successToast", { text: resp.message || "Email de teste enviado!" });
                } else {
                    showAlert("error", { title: "Erro!", text: (resp && resp.message) ? resp.message : "Falha ao enviar email de teste." });
                }
            },
            error: function(xhr) {
                let errorMessage = 'Ocorreu um erro ao enviar.';
                if (xhr.responseJSON && xhr.responseJSON.message) { errorMessage = xhr.responseJSON.message; }
                showAlert("error", { title: "Erro!", text: errorMessage });
            },
            complete: function() { $btn.prop('disabled', false).html(btnText); }
        });
    });

    $('#notification_type').on('change', function() {
        var type = $(this).val();

        $.ajax({
            url: '{{ route('finance.settings.get.email_template') }}',
            type: 'POST',
            data: {
                _token: $('input[name="_token"]').val(),
                notification_type: type
            },
            success: function(resp) {
                if (resp && resp.success && resp.data) {
                    var html = resp.data.template_body || '';
                    if ($('#template_body').hasClass('summernote-initialized')) {
                        $('#template_body').summernote('code', html);
                    } else {
                        $('#template_body').val(html);
                    }
                    $('#template_subject').val(resp.data.template_subject || '');
                    $('#signature_html').val(resp.data.signature_html || 'Financeiro');
                } else {
                    $('#template_subject').val('');
                    if ($('#template_body').hasClass('summernote-initialized')) {
                        $('#template_body').summernote('code', '');
                    } else {
                        $('#template_body').val('');
                    }
                }
            },
            error: function() {
                if ($('#template_body').hasClass('summernote-initialized')) {
                    $('#template_body').summernote('code', '');
                } else {
                    $('#template_body').val('');
                }
            }
        });
    });
});
</script>
@endpush