@php
    static $correoModalDinamicoAssetsLoaded = false;
@endphp
@if (!$correoModalDinamicoAssetsLoaded)
    @php
        $correoModalDinamicoAssetsLoaded = true;
    @endphp
    <style>
        .modal .select2-container {
            width: 100% !important;
        }

        .modal .select2-dropdown,
        .modal .select2-container--open,
        .modal .bootstrap-select .dropdown-menu,
        .modal .bootstrap-select.open {
            z-index: 1060 !important;
        }

        .modal .modal-body {
            overflow-x: hidden;
        }

        .modal .modal-body .form-group,
        .modal .modal-body .row,
        .modal .modal-body .col-md-12,
        .modal .modal-body .col-md-6,
        .modal .modal-body .col-md-4,
        .modal .modal-body .col-sm-12,
        .modal .modal-body .col-sm-10,
        .modal .modal-body .col-sm-6,
        .modal .modal-body .col-sm-4,
        .modal .modal-body .col-12,
        .modal .modal-body .col-10,
        .modal .modal-body .col-6,
        .modal .modal-body .col-4 {
            position: relative;
        }

        .seatsa-correo-modal .select2-container,
        .seatsa-correo-modal .bootstrap-select,
        .seatsa-correo-modal .bootstrap-select > .dropdown-toggle {
            width: 100% !important;
            max-width: 100%;
        }

        .seatsa-correo-modal .select2-dropdown,
        .seatsa-correo-modal .select2-container--open,
        .seatsa-correo-modal .bootstrap-select .dropdown-menu,
        .seatsa-correo-modal .bootstrap-select.open {
            z-index: 2055 !important;
        }

        .seatsa-correo-modal .bootstrap-select .dropdown-menu,
        .seatsa-correo-modal .select2-dropdown {
            max-width: 100%;
        }

        .seatsa-correo-modal .select2-container--default .select2-selection--single,
        .seatsa-correo-modal .select2-container--default .select2-selection--multiple {
            min-height: 34px;
        }

        .seatsa-correo-modal .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 32px;
        }

        .seatsa-correo-modal .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 32px;
        }

        .seatsa-correo-modal .select2-container--default .select2-selection--multiple .select2-selection__rendered {
            display: block;
            white-space: normal;
        }

        .seatsa-correo-modal .bootstrap-select .filter-option-inner-inner {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .seatsa-correo-modal .correo-section {
            margin-bottom: 15px;
            overflow: visible;
        }

        .seatsa-correo-modal .correo-section .card-body,
        .seatsa-correo-modal .correo-section .ui.segment,
        .seatsa-correo-modal .correo-section .ui.form {
            overflow: visible;
        }

        .seatsa-correo-modal .correo-section-title {
            font-weight: 600;
            margin-bottom: 10px;
        }

        .seatsa-correo-modal .correo-template-native {
            width: 100%;
            max-width: 100%;
        }
    </style>
@endif

<script>
    window.SeatsaCorreoModalUI = window.SeatsaCorreoModalUI || (function($) {
        function resolverElementos($modal, selector, selectorPorDefecto) {
            if (!selector) {
                return selectorPorDefecto ? $modal.find(selectorPorDefecto) : $();
            }

            if (selector.jquery) {
                return selector;
            }

            if (selector.nodeType) {
                return $(selector);
            }

            return $modal.find(selector);
        }

        function inicializarSelect2EnModal($modal, selector, options) {
            if (!$modal.length || !$.fn.select2) {
                return $();
            }

            var configuracionBase = $.extend({
                width: '100%',
                dropdownParent: $modal,
                placeholder: '--Seleccione--'
            }, options || {});

            var $selects = resolverElementos($modal, selector);

            $selects.each(function() {
                var $select = $(this);

                if ($select.hasClass('select2-hidden-accessible')) {
                    $select.off('.seatsaCorreoSelect2');
                    $select.select2('destroy');
                }

                $select.select2($.extend({}, configuracionBase, {
                    dropdownParent: $modal
                }));
            });

            return $selects;
        }

        function inicializarSelect2TagsEnModal($modal, selector, options) {
            return inicializarSelect2EnModal($modal, selector, $.extend({
                tags: true,
                tokenSeparators: [',', ';'],
                placeholder: 'Agregar C.C.'
            }, options || {}));
        }

        function inicializarSelectpickerEnModal($modal, selector) {
            if (!$modal.length || !$.fn.selectpicker) {
                return $();
            }

            var $selects = resolverElementos($modal, selector, '.selectpicker');

            $selects.each(function() {
                var $select = $(this);
                var picker = $select.data('selectpicker');
                var currentValue = $select.val();

                $select.removeAttr('data-container');
                $select.attr('data-dropup-auto', 'false');

                if (picker && picker.options && picker.options.container) {
                    $select.selectpicker('destroy');
                    picker = null;
                }

                if (!picker) {
                    $select.selectpicker({
                        container: false,
                        dropupAuto: false
                    });
                } else {
                    picker.options.container = false;
                    picker.options.dropupAuto = false;
                    $select.selectpicker('render');
                }

                if (currentValue !== null && typeof currentValue !== 'undefined') {
                    $select.selectpicker('val', currentValue);
                }

                $select.selectpicker('refresh');
            });

            return $selects;
        }

        return {
            inicializarSelect2EnModal: inicializarSelect2EnModal,
            inicializarSelect2TagsEnModal: inicializarSelect2TagsEnModal,
            inicializarSelectpickerEnModal: inicializarSelectpickerEnModal
        };
    })(jQuery);

    window.SeatsaCorreoModal = window.SeatsaCorreoModal || (function($) {
        function normalizarVariableCorreo(nombre) {
            return String(nombre || '')
                .replace(/&lt;|&gt;/g, '')
                .replace(/[<>]/g, '')
                .trim()
                .toLowerCase()
                .normalize('NFD')
                .replace(/[\u0300-\u036f]/g, '')
                .replace(/[^a-z0-9]+/g, ' ')
                .replace(/\b(de|del|la|el|los|las)\b/g, ' ')
                .replace(/\b(numero|num|nro|no)\b/g, 'no')
                .replace(/\s+/g, ' ')
                .trim();
        }

        function detectarVariablesCorreo(texto) {
            var detectadas = [];
            var regex = /(?:&lt;|<)\s*([^<>&]+?)\s*(?:&gt;|>)/g;
            var tagsHtml = ['a', 'abbr', 'b', 'blockquote', 'body', 'br', 'caption', 'center', 'code', 'col', 'colgroup', 'div', 'em', 'font', 'footer', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hr', 'html', 'i', 'img', 'li', 'main', 'meta', 'nav', 'ol', 'p', 'pre', 'section', 'small', 'span', 'strong', 'style', 'sub', 'sup', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr', 'u', 'ul'];
            var match;

            while ((match = regex.exec(texto || '')) !== null) {
                var variable = $.trim(match[1]);
                var primerSegmento = variable.split(/\s+/)[0].toLowerCase();

                if (!variable || variable.indexOf('=') !== -1 || variable.indexOf(':') !== -1 || variable.charAt(0) === '/' || variable.charAt(0) === '!' || variable.charAt(0) === '?' || tagsHtml.indexOf(primerSegmento) !== -1) {
                    continue;
                }

                detectadas.push(variable);
            }

            return detectadas;
        }

        function normalizarHtml(html) {
            return String(html || '')
                .replace(/\s+/g, ' ')
                .replace(/>\s+</g, '><')
                .trim();
        }

        function obtenerToken($form) {
            return $form.find('input[name="_token"]').val() || $('input[name="_token"]').first().val();
        }

        function init(options) {
            var opts = $.extend({
                modalSelector: '',
                formSelector: '',
                modulo: '',
                tipoCorreo: '',
                templateSelector: '[name="id_correo_contenido"]',
                senderSelector: '[name="id_email_remitente"]',
                ccSelector: '[name="cc_json[]"]',
                subjectSelector: '[name="asunto_correo"]',
                contentSelector: '[name="contenido_html"]',
                useFlagSelector: '[name="usar_correo_contenido_modal"]',
                route: @json(route('correo_contenidos.modal_config')),
                buildPayload: null,
                onConfigLoaded: null,
                onTemplateApplied: null,
                defaultOptionValue: 'default'
            }, options || {});

            var $modal = $(opts.modalSelector);
            $modal.addClass('seatsa-correo-modal');

            var $form = $(opts.formSelector);
            var $template = $form.find(opts.templateSelector);
            var $sender = $form.find(opts.senderSelector);
            var $cc = $form.find(opts.ccSelector);
            var $subject = $form.find(opts.subjectSelector);
            var $content = $form.find(opts.contentSelector);
            var $useFlag = $form.find(opts.useFlagSelector);
            var state = {
                config: null,
                plantillas: [],
                asuntoBase: '',
                contenidoBase: '',
                plantillaActual: '',
                listo: false,
                replyToActual: '',
                origenRemitenteActual: 'default_modulo',
                defaultSenderFallbackId: String($sender.val() || '')
            };

            function initEditor() {
                if (!$content.length || !$.fn.summernote) {
                    return;
                }

                if ($content.next('.note-editor').length) {
                    return;
                }

                $content.summernote({
                    height: 220,
                    lang: 'es-ES',
                    toolbar: [
                        ['style', ['bold', 'italic', 'underline', 'clear']],
                        ['font', ['fontsize', 'color']],
                        ['para', ['ul', 'ol', 'paragraph']],
                        ['insert', ['link', 'table']]
                    ],
                    callbacks: {
                        onChange: function() {
                            syncUseFlag();
                        }
                    }
                });
            }

            function setEditorContent(valor) {
                initEditor();

                if ($content.length && $content.next('.note-editor').length) {
                    $content.summernote('code', valor || '');
                    return;
                }

                $content.val(valor || '');
            }

            function getEditorContent() {
                if ($content.length && $content.next('.note-editor').length) {
                    return $content.summernote('code') || '';
                }

                return $content.val() || '';
            }

            function initSelectpickers(scope) {
                window.SeatsaCorreoModalUI.inicializarSelectpickerEnModal($modal, scope || '.selectpicker');
            }

            function asegurarMarcadorCc() {
                var $marker;

                if (!$cc.length) {
                    return;
                }

                $marker = $form.find('input[name="cc_json_present"]');

                if (!$marker.length) {
                    $marker = $('<input>', {
                        type: 'hidden',
                        name: 'cc_json_present',
                        value: '1'
                    });
                    $form.append($marker);
                }

                $marker.val('1');
            }

            function initCC() {
                if (!$cc.length || !$.fn.select2) {
                    return;
                }

                asegurarMarcadorCc();
                window.SeatsaCorreoModalUI.inicializarSelect2TagsEnModal($modal, $cc, {
                    placeholder: 'Agregar correos en C.C.'
                });

                $cc.off('change.seatsaCorreoCc').on('change.seatsaCorreoCc', function() {
                    syncUseFlag();
                });
            }

            function initTemplateSelector() {
                if (!$template.length) {
                    return;
                }

                if ($template.hasClass('select2-hidden-accessible') && $.fn.select2) {
                    $template.select2('destroy');
                }

                $template.addClass('correo-template-native');
                $template.off('change.seatsaCorreoTemplate').on('change.seatsaCorreoTemplate', function() {
                    aplicarPlantilla($(this).val() || String(opts.defaultOptionValue || 'default'), false);
                });
            }

            function setCCOptions(opciones, seleccionados) {
                if (!$cc.length) {
                    return;
                }

                var seleccion = seleccionados || [];
                $cc.empty();

                (opciones || []).forEach(function(opcion) {
                    var selected = seleccion.indexOf(opcion.id) !== -1;
                    $cc.append(new Option(opcion.text, opcion.id, selected, selected));
                });

                seleccion.forEach(function(correo) {
                    if ($cc.find('option[value="' + correo + '"]').length === 0) {
                        $cc.append(new Option(correo, correo, true, true));
                    }
                });

                initCC();

                if ($cc.hasClass('select2-hidden-accessible')) {
                    $cc.trigger('change.select2');
                }

                $cc.trigger('change');
            }

            function populateSenderOptions(remitentes) {
                if (!$sender.length) {
                    return;
                }

                $sender.empty();
                $sender.append('<option value="">--Seleccione--</option>');

                (remitentes || []).forEach(function(remitente) {
                    $sender.append(new Option(remitente.correo || remitente.text, remitente.id, false, false));
                });

                initSelectpickers($sender);
            }

            function populateTemplateOptions(plantillas, idInicial) {
                if (!$template.length) {
                    return;
                }

                var defaultValue = String(opts.defaultOptionValue || 'default');
                var valorInicial = idInicial || defaultValue;

                $template.empty();
                $template.append(new Option('Default del módulo', defaultValue, false, false));

                (plantillas || []).forEach(function(plantilla) {
                    var label = plantilla.nombre_version + (plantilla.predeterminado ? ' (Predeterminada)' : '');
                    $template.append(new Option(label, plantilla.id_correo_contenido, false, false));
                });

                initTemplateSelector();
                $template.val(valorInicial);
            }

            function buscarPlantilla(idPlantilla) {
                idPlantilla = String(idPlantilla || '');

                return state.plantillas.find(function(plantilla) {
                    return String(plantilla.id_correo_contenido) === idPlantilla;
                }) || null;
            }

            function setSenderValue(idCuenta) {
                if (!$sender.length) {
                    return;
                }

                initSelectpickers($sender);

                if (idCuenta && $sender.find('option[value="' + idCuenta + '"]').length) {
                    if ($sender.hasClass('selectpicker')) {
                        $sender.selectpicker('val', String(idCuenta));
                    } else {
                        $sender.val(String(idCuenta));
                    }
                } else if ($sender.find('option').length > 1 && !$sender.val()) {
                    if ($sender.hasClass('selectpicker')) {
                        $sender.selectpicker('val', String($sender.find('option').eq(1).val() || ''));
                    } else {
                        $sender.prop('selectedIndex', 1);
                    }
                }

                if ($sender.hasClass('selectpicker')) {
                    $sender.selectpicker('refresh');
                } else {
                    $sender.trigger('change');
                }

                actualizarAyudaRemitente();
            }

            function actualizarAyudaRemitente() {
                if (!$sender.length) {
                    return;
                }

                var $helper = $sender.nextAll('.seatsa-remitente-help').first();
                var remitenteSeleccionado = $.trim($sender.find('option:selected').text() || '');
                var texto = '';

                if (!$helper.length) {
                    $helper = $('<small class="form-text text-muted seatsa-remitente-help" style="display:none;"></small>');
                    $helper.insertAfter($sender);
                }

                if (state.origenRemitenteActual === 'usuario_conectado' && state.replyToActual) {
                    texto = 'Usuario conectado: ' + state.replyToActual + '.';

                    if (remitenteSeleccionado) {
                        texto += ' El envio usara SMTP: ' + remitenteSeleccionado + '.';
                    }
                } else if (state.replyToActual) {
                    texto = 'Responder a: ' + state.replyToActual + '.';
                }

                $helper.text(texto);
                $helper.toggle(!!texto);
            }

            function syncUseFlag() {
                if (!$useFlag.length) {
                    return;
                }

                var asuntoActual = $.trim($subject.val() || '');
                var contenidoActual = normalizarHtml(getEditorContent());
                var asuntoBase = $.trim(state.asuntoBase || '');
                var contenidoBase = normalizarHtml(state.contenidoBase || '');
                var usarModal = asuntoActual !== asuntoBase || contenidoActual !== contenidoBase;

                $useFlag.val(usarModal ? '1' : '0');
            }

            function advertirVariablesEliminadas() {
                var variablesBase = detectarVariablesCorreo((state.asuntoBase || '') + ' ' + (state.contenidoBase || ''));
                var variablesActuales = detectarVariablesCorreo(($subject.val() || '') + ' ' + getEditorContent());
                var actualesNormalizadas = {};
                var faltantes = [];

                variablesActuales.forEach(function(variable) {
                    actualesNormalizadas[normalizarVariableCorreo(variable)] = true;
                });

                variablesBase.forEach(function(variable) {
                    var clave = normalizarVariableCorreo(variable);

                    if (!actualesNormalizadas[clave]) {
                        faltantes.push('<' + variable + '>');
                    }
                });

                if (faltantes.length) {
                    showAlert(
                        'Advertencia: faltan variables dinámicas en el contenido de este envío. Revise: ' + faltantes.join(', '),
                        'warning'
                    );
                }
            }

            function aplicarPlantilla(idPlantilla, esInicial) {
                if (!state.config) {
                    return;
                }

                var plantilla = buscarPlantilla(idPlantilla);
                var idCuentaDefault = state.config.id_cuenta_correo_default || state.defaultSenderFallbackId || '';
                var asunto = state.config.asunto_default || '';
                var contenido = state.config.contenido_html_default || '';
                var cc = state.config.cc_default || [];
                var idCuenta = idCuentaDefault;

                state.replyToActual = state.config.reply_to_default || '';
                state.origenRemitenteActual = state.config.origen_remitente_default || 'default_modulo';

                if (plantilla) {
                    asunto = plantilla.asunto || '';
                    contenido = plantilla.contenido_html || '';
                    cc = (plantilla.cc && plantilla.cc.length) ? plantilla.cc : (state.config.cc_default || []);
                    idCuenta = plantilla.id_cuenta_correo_electronico_final || idCuentaDefault;
                    state.replyToActual = plantilla.reply_to || '';
                    state.origenRemitenteActual = plantilla.origen_remitente || 'plantilla';
                }

                state.plantillaActual = plantilla ? String(plantilla.id_correo_contenido) : String(opts.defaultOptionValue || 'default');
                state.asuntoBase = asunto;
                state.contenidoBase = contenido;

                $subject.val(asunto);
                setEditorContent(contenido);
                setCCOptions(state.config.cc_opciones || [], cc);
                setSenderValue(idCuenta);
                syncUseFlag();

                if (typeof opts.onTemplateApplied === 'function') {
                    opts.onTemplateApplied({
                        plantilla: plantilla,
                        config: state.config,
                        esInicial: !!esInicial,
                        reply_to: state.replyToActual,
                        origen_remitente: state.origenRemitenteActual
                    });
                }
            }

            function loadConfig(extraPayload) {
                var modulo = typeof opts.modulo === 'function' ? opts.modulo() : opts.modulo;
                var tipoCorreo = typeof opts.tipoCorreo === 'function' ? opts.tipoCorreo() : opts.tipoCorreo;
                var payload = typeof opts.buildPayload === 'function' ? (opts.buildPayload() || {}) : {};

                payload = $.extend({}, payload, extraPayload || {});
                payload._token = obtenerToken($form);
                payload.modulo = modulo;
                payload.tipo_correo = tipoCorreo;
                payload.id_cuenta_correo_electronico_fallback = state.defaultSenderFallbackId || payload.id_cuenta_correo_electronico_fallback || '';

                if (!payload.modulo || !payload.tipo_correo) {
                    return $.Deferred().reject().promise();
                }

                showLoader(opts.modalSelector);

                return $.ajax({
                    url: opts.route,
                    method: 'POST',
                    dataType: 'json',
                    data: payload
                }).done(function(response) {
                    var data = response.data || {};
                    var idPlantillaInicial = data.id_plantilla_inicial || String(opts.defaultOptionValue || 'default');

                    state.config = data;
                    state.plantillas = data.plantillas || [];
                    state.replyToActual = data.reply_to || '';
                    state.origenRemitenteActual = data.origen_remitente || 'default_modulo';

                    initSelectpickers();
                    populateSenderOptions(data.remitentes || []);
                    initCC();
                    populateTemplateOptions(state.plantillas, idPlantillaInicial);
                    aplicarPlantilla(idPlantillaInicial, true);
                    state.listo = true;
                    actualizarAyudaRemitente();

                    if (typeof opts.onConfigLoaded === 'function') {
                        opts.onConfigLoaded(data);
                    }
                }).fail(function(xhr) {
                    var message = xhr.responseJSON && xhr.responseJSON.message
                        ? xhr.responseJSON.message
                        : 'No se pudo cargar la configuración de plantillas.';
                    showAlert(message, 'error');
                }).always(function() {
                    hideLoader(opts.modalSelector);
                });
            }

            initEditor();
            initSelectpickers();
            initCC();
            initTemplateSelector();

            $modal.on('shown.bs.modal', function() {
                initSelectpickers();
                initCC();
                initTemplateSelector();

                if (state.plantillaActual) {
                    $template.val(state.plantillaActual);
                }
            });

            $subject.on('input change', function() {
                syncUseFlag();
            });

            $sender.on('change.seatsaCorreoSender', function() {
                actualizarAyudaRemitente();
            });

            $form.on('submit', function() {
                advertirVariablesEliminadas();
                asegurarMarcadorCc();
                syncUseFlag();

                if ($content.length && $content.next('.note-editor').length) {
                    $content.val($content.summernote('code'));
                }
            });

            return {
                loadConfig: loadConfig,
                applyTemplate: aplicarPlantilla,
                refreshSelectpickers: initSelectpickers,
                refreshSelect2: function() {
                    initCC();
                    initTemplateSelector();
                },
                refreshModalSelects: function() {
                    initSelectpickers();
                    initCC();
                    initTemplateSelector();
                },
                state: state
            };
        }

        return {
            init: init
        };
    })(jQuery);
</script>