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

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

        #correo_contenido_modal .bootstrap-select,
        #correo_contenido_modal .bootstrap-select > .dropdown-toggle {
            width: 100% !important;
        }

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

        #correo_contenido_modal .modal-body .form-group,
        #correo_contenido_modal .modal-body .row,
        #correo_contenido_modal .modal-body .col-md-12,
        #correo_contenido_modal .modal-body .col-md-6,
        #correo_contenido_modal .modal-body .col-md-4 {
            position: relative;
        }
    </style>
@endif

<div class="modal fade" id="correo_contenido_modal" tabindex="-1" role="dialog" aria-labelledby="correoContenidoModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
        <div class="modal-content">
            <form id="correo_contenido_form" action="{{ route('correo_contenidos.create') }}" method="post">
                {{ csrf_field() }}
                <input type="hidden" id="id_correo_contenido" name="id_correo_contenido">

                <div class="modal-header">
                    <h5 class="modal-title" id="correoContenidoModalLabel">Nuevo contenido de correo</h5>
                    <button type="button" class="close reset" data-dismiss="modal" aria-label="Cerrar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="modulo">Módulo</label>
                                <select id="modulo" name="modulo" class="selectpicker form-control" data-live-search="true" required>
                                    <option value="" disabled selected>--Seleccione--</option>
                                    @foreach ($modulosCorreo as $moduloCorreo)
                                        <option value="{{ $moduloCorreo }}">{{ $moduloCorreo }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="tipo_correo">Tipo de correo</label>
                                <select id="tipo_correo" name="tipo_correo" class="select2-tipo-correo form-control" required>
                                    <option value=""></option>
                                </select>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="nombre_version">Nombre de versión</label>
                                <input type="text" class="form-control" id="nombre_version" name="nombre_version" maxlength="150" required>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="custom-control custom-checkbox mt-4">
                                <input type="checkbox" class="custom-control-input" id="usar_correo_usuario_conectado" name="usar_correo_usuario_conectado" checked>
                                <label class="custom-control-label" for="usar_correo_usuario_conectado">Detectar remitente conectado</label>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="id_cuenta_correo_electronico">Cuenta de correo remitente</label>
                                <select id="id_cuenta_correo_electronico" name="id_cuenta_correo_electronico" class="selectpicker form-control" data-live-search="true">
                                    <option value="">--Seleccione--</option>
                                    @foreach ($cuentasCorreoActivas as $cuentaCorreo)
                                        <option value="{{ $cuentaCorreo->id_cuenta_correo_electronico }}">{{ $cuentaCorreo->correo }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="cc_json">C.C.</label>
                                <select id="cc_json" name="cc_json[]" class="form-control select2-correos" multiple></select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="asunto">Asunto del correo</label>
                                <input type="text" class="form-control" id="asunto" name="asunto" maxlength="255" required>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="contenido_html">Contenido HTML</label>
                                <textarea class="form-control summernote-correo" id="contenido_html" name="contenido_html" rows="10" required></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label>Variables dinámicas</label>
                        <div class="row">
                            <div class="col-md-5">
                                <select id="variable_correo_contenido" class="form-control">
                                    <option value="">--Seleccione variable--</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <select id="destino_variable_correo" class="form-control">
                                    <option value="asunto">Asunto</option>
                                    <option value="contenido_html">Contenido</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <button type="button" class="btn btn-outline-primary btn-block" id="insertar_variable_correo">
                                    <i class="plus icon"></i> Insertar variable
                                </button>
                            </div>
                        </div>
                        <small class="form-text text-muted">Seleccione la variable y el campo donde se insertará. No depende del cursor activo.</small>
                    </div>
                    <div class="row justify-content-end">
    <div class="col-md-auto">
        <div class="custom-control custom-checkbox mb-3">
            <input type="checkbox" class="custom-control-input" id="correo_contenido_predeterminado" name="predeterminado">
            <label class="custom-control-label" for="correo_contenido_predeterminado">Predeterminado</label>
        </div>
    </div>

    <div class="col-md-auto">
        <div class="custom-control custom-checkbox mb-3">
            <input type="checkbox" class="custom-control-input" id="correo_contenido_activo" name="activo" checked>
            <label class="custom-control-label" for="correo_contenido_activo">Activo</label>
        </div>
    </div>
</div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="times icon"></i>Cerrar
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="save icon"></i>Guardar
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@include('Mail.partials.correo_modal_dinamico')
<script>
    var tiposCorreoPorModulo = @json($tiposCorreoPorModulo ?? []);
    var ccCorreoOpciones = @json($ccCorreoOpciones ?? []);
    var variablesCorreo = @json($variablesCorreo ?? []);
    var variablesCorreoPorModulo = @json($variablesCorreoPorModulo ?? []);
    var moduloPortalClientes = @json(\App\Services\CorreoContenidoService::MODULO_PORTAL_CLIENTES);

    function inicializarEditorCorreo() {
        if ($.fn.summernote && !$('#contenido_html').next('.note-editor').length) {
            $('#contenido_html').summernote({
                height: 260,
                lang: 'es-ES',
                toolbar: [
                    ['style', ['bold', 'italic', 'underline', 'clear']],
                    ['font', ['fontsize', 'color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['insert', ['link', 'table']]
                ]
            });
        }
    }

    function inicializarSelectpickerCorreoContenido(scope) {
        if (!window.SeatsaCorreoModalUI) {
            return;
        }

        window.SeatsaCorreoModalUI.inicializarSelectpickerEnModal(
            $('#correo_contenido_modal'),
            scope || '.selectpicker'
        );
    }

    function inicializarSelect2CorreoContenido() {
        if (!window.SeatsaCorreoModalUI) {
            return;
        }

        window.SeatsaCorreoModalUI.inicializarSelect2EnModal(
            $('#correo_contenido_modal'),
            $('#tipo_correo'),
            {
                placeholder: '--Seleccione--'
            }
        );
    }

    function inicializarSelect2TagsCorreoContenido() {
        if (!window.SeatsaCorreoModalUI) {
            return;
        }

        window.SeatsaCorreoModalUI.inicializarSelect2EnModal(
            $('#correo_contenido_modal'),
            $('#cc_json'),
            {
                placeholder: 'Seleccione usuarios activos para C.C.'
            }
        );
    }

    function inicializarSelectCorreo() {
        inicializarSelectpickerCorreoContenido();
        inicializarSelect2CorreoContenido();
        inicializarSelect2TagsCorreoContenido();
    }

    function cargarTiposCorreoPorModulo(modulo, seleccionado) {
        var $tipoCorreo = $('#tipo_correo');
        var tipos = tiposCorreoPorModulo[modulo] || [];

        $tipoCorreo.empty();
        $tipoCorreo.append(new Option('', '', false, false));

        tipos.forEach(function(tipo) {
            $tipoCorreo.append(new Option(tipo, tipo, false, false));
        });

        if (seleccionado && $tipoCorreo.find('option[value="'+seleccionado+'"]').length === 0) {
            $tipoCorreo.append(new Option(seleccionado, seleccionado, false, false));
        }

        inicializarSelect2CorreoContenido();
        $tipoCorreo.val(seleccionado || null);

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

        $tipoCorreo.trigger('change');
    }

    function cargarVariablesCorreoPorModulo(modulo) {
        var variables = variablesCorreoPorModulo[modulo] || variablesCorreo || [];
        var $select = $('#variable_correo_contenido');

        $select.empty();
        $select.append(new Option('--Seleccione variable--', '', false, false));

        variables.forEach(function(variable) {
            var incluyeDelimitadores = /^<[^<>]+>$/.test(variable);
            var placeholder = incluyeDelimitadores ? variable : '<' + variable + '>';
            var etiqueta = incluyeDelimitadores ? variable.substring(1, variable.length - 1) : variable;
            $select.append(new Option(etiqueta, placeholder, false, false));
        });
    }

    function aplicarReglaRemitenteCorreoContenido() {
        var esPortalClientes = $('#modulo').val() === moduloPortalClientes;
        var $usarUsuario = $('#usar_correo_usuario_conectado');
        var $cuentaCorreo = $('#id_cuenta_correo_electronico');

        if (esPortalClientes) {
            $usarUsuario.prop('checked', false).prop('disabled', true);
        } else {
            $usarUsuario.prop('disabled', false);
        }

        var usarUsuario = !esPortalClientes && $usarUsuario.is(':checked');
        $cuentaCorreo.prop('disabled', usarUsuario).prop('required', esPortalClientes);

        if (usarUsuario) {
            $cuentaCorreo.selectpicker('val', '');
        }

        $cuentaCorreo.selectpicker('refresh');
    }

    function obtenerContenidoEditorCorreo() {
        if ($.fn.summernote && $('#contenido_html').next('.note-editor').length) {
            return $('#contenido_html').summernote('code');
        }

        return $('#contenido_html').val();
    }

    function asignarContenidoEditorCorreo(valor) {
        if ($.fn.summernote && $('#contenido_html').next('.note-editor').length) {
            $('#contenido_html').summernote('code', valor || '');
            return;
        }

        $('#contenido_html').val(valor || '');
    }

    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 valorBooleanoCorreoContenido(valor) {
        return valor === true || valor === 1 || valor === '1';
    }

    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 validarVariablesCorreoFormulario() {
        var modulo = $('#modulo').val();
        var permitidas = {};

        (variablesCorreoPorModulo[modulo] || []).forEach(function(variable) {
            permitidas[normalizarVariableCorreo(variable)] = variable;
        });

        var detectadas = detectarVariablesCorreo($('#asunto').val() + ' ' + obtenerContenidoEditorCorreo());

        for (var i = 0; i < detectadas.length; i++) {
            var normalizada = normalizarVariableCorreo(detectadas[i]);

            if (!permitidas[normalizada]) {
                showAlert('La variable &lt;' + detectadas[i] + '&gt; no está disponible para el módulo ' + modulo + '.', 'error');
                return false;
            }
        }

        return true;
    }

    function cargarOpcionesCC(seleccionados) {
        var $cc = $('#cc_json');
        var seleccionadosNormalizados = seleccionados || [];

        $cc.empty();

        ccCorreoOpciones.forEach(function(opcion) {
            var seleccionado = seleccionadosNormalizados.indexOf(opcion.id) !== -1;
            $cc.append(new Option(opcion.text, opcion.id, seleccionado, seleccionado));
        });


        inicializarSelect2TagsCorreoContenido();

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

        $cc.trigger('change');
    }

    function limpiarFormularioCorreoContenido() {
        $('#correo_contenido_form').attr('action', "{{ route('correo_contenidos.create') }}");
        $('#correoContenidoModalLabel').text('Nuevo contenido de correo');
        $('#id_correo_contenido').val('');
        $('#modulo').selectpicker('val', '');
        cargarTiposCorreoPorModulo('', null);
        cargarVariablesCorreoPorModulo('');
        $('#nombre_version').val('');
        $('#usar_correo_usuario_conectado').prop('checked', true).prop('disabled', false);
        $('#id_cuenta_correo_electronico').selectpicker('val', '');
        aplicarReglaRemitenteCorreoContenido();
        cargarOpcionesCC([]);
        $('#asunto').val('');
        $('#correo_contenido_predeterminado').prop('checked', false);
        $('#correo_contenido_activo').prop('checked', true);
        inicializarEditorCorreo();
        asignarContenidoEditorCorreo('');
    }

    function cargarFormularioCorreoContenido(data, cc, duplicar) {
        inicializarSelectCorreo();
        inicializarEditorCorreo();

        $('#correo_contenido_form').attr('action', duplicar ? "{{ route('correo_contenidos.create') }}" : "{{ route('correo_contenidos.update') }}");
        $('#correoContenidoModalLabel').text(duplicar ? 'Agregar nueva versión' : 'Editar contenido de correo');
        $('#id_correo_contenido').val(duplicar ? '' : data.id_correo_contenido);
        $('#modulo').selectpicker('val', data.modulo);
        $('#modulo').selectpicker('refresh');
        cargarTiposCorreoPorModulo(data.modulo, data.tipo_correo);
        cargarVariablesCorreoPorModulo(data.modulo);
        $('#nombre_version').val(duplicar ? data.nombre_version + ' - nueva versión' : data.nombre_version);
        var usarCorreoUsuarioConectado = valorBooleanoCorreoContenido(data.usar_correo_usuario_conectado);
        var contenidoPredeterminado = valorBooleanoCorreoContenido(data.predeterminado);
        var contenidoActivo = valorBooleanoCorreoContenido(data.activo);

        $('#usar_correo_usuario_conectado').prop('checked', usarCorreoUsuarioConectado);
        $('#id_cuenta_correo_electronico').selectpicker('val', data.id_cuenta_correo_electronico || '');
        aplicarReglaRemitenteCorreoContenido();
        cargarOpcionesCC(cc || []);
        $('#asunto').val(data.asunto || '');
        $('#correo_contenido_predeterminado').prop('checked', duplicar ? false : contenidoPredeterminado);
        $('#correo_contenido_activo').prop('checked', duplicar ? true : contenidoActivo);
        asignarContenidoEditorCorreo(data.contenido_html || '');
    }

    $(document).ready(function() {
        inicializarSelectpickerCorreoContenido();
        inicializarSelectCorreo();
        cargarOpcionesCC([]);
        cargarVariablesCorreoPorModulo('');

        $(document).on('click', '.create_correo_contenido', function() {
            limpiarFormularioCorreoContenido();
            $('#correo_contenido_modal').modal('show');
        });

        $(document).on('change', '#modulo', function() {
            cargarTiposCorreoPorModulo($(this).val(), null);
            cargarVariablesCorreoPorModulo($(this).val());
            aplicarReglaRemitenteCorreoContenido();
        });

        $(document).on('change', '#usar_correo_usuario_conectado', function() {
            aplicarReglaRemitenteCorreoContenido();
        });

        $(document).on('click', '.edit_correo_contenido, .nueva_version_correo_contenido', function() {
            var idContenido = $(this).data('id');
            var duplicar = $(this).hasClass('nueva_version_correo_contenido');
            showLoader();

            $.ajax({
                url: "{{ route('correo_contenidos.show') }}",
                method: "POST",
                data: {
                    id_correo_contenido: idContenido,
                    _token: $('input[name="_token"]').val()
                },
                success: function(response) {
                    hideLoader();
                    cargarFormularioCorreoContenido(response.data, response.cc, duplicar);
                    $('#correo_contenido_modal').modal('show');
                },
                error: function() {
                    hideLoader();
                    showAlert('No se pudo cargar el contenido de correo.', 'error');
                }
            });
        });

        $(document).on('click', '#insertar_variable_correo', function() {
            var variable = $('#variable_correo_contenido').val();
            var destino = $('#destino_variable_correo').val();

            if (!variable) {
                showAlert('Seleccione una variable dinámica.', 'warning');
                return;
            }

            inicializarEditorCorreo();

            if (destino === 'asunto') {
                var asunto = $('#asunto');

                asunto.val(
                    $.trim(
                        asunto.val() + ' ' + variable
                    )
                );

                asunto.focus();
                return;
            }

            if (destino === 'contenido_html') {
                if ($.fn.summernote && $('#contenido_html').next('.note-editor').length) {
                    $('#contenido_html').summernote('editor.insertText', variable);
                } else {
                    $('#contenido_html').val($('#contenido_html').val() + variable);
                }
            }
        });

        $('#correo_contenido_form').on('submit', function(event) {
            inicializarEditorCorreo();

            if (!validarVariablesCorreoFormulario()) {
                event.preventDefault();
                hideLoader();
                return false;
            }

            showLoader();
        });

        $('#correo_contenido_modal').on('shown.bs.modal', function() {
            inicializarSelectpickerCorreoContenido();
            inicializarSelect2CorreoContenido();
            inicializarSelect2TagsCorreoContenido();
            inicializarEditorCorreo();
        });
    });
</script>