@extends('backend.layouts.app')

@section('title') {{ __($module_action) }} {{ __($module_title) }} @endsection



@section('content')
<div class="card">
    <div class="card-body">
        <x-backend.section-header>
            {{-- <i class="{{ $module_icon }}"></i> --}}
            {{ __($module_title) }} <small class="text-muted"></small>

            <x-slot name="subtitle">
                @lang(":module_name Management Dashboard", ['module_name'=>Str::title($module_name)])
            </x-slot>
        </x-backend.section-header>

        <hr>

        <div class="row mt-4">
            <div class="col">
                <form action="{{ route('backend.notification-templates.update', $data->id) }}" method="POST" button-loader="true">
                    @csrf
                    @method('PATCH')

                    @include('notificationtemplate::backend.notificationtemplates.form')


                </form>
            </div>

        </div>
    </div>

    <div class="card-footer">
        <div class="row">
            <div class="col">

            </div>
        </div>
    </div>
</div>
@endsection

@push('after-scripts')
<script>
    function initTinyMCE() {
        tinymce.init({
            selector: '#mytextarea,#mytextarea_mail,#mytextarea_sms,#mytextarea_whatsapp',
            plugins: 'link image code',
            skin: localStorage.getItem("data-bs-theme") === "dark" ? 'oxide-dark' : 'oxide',
            content_css: localStorage.getItem("data-bs-theme") === "dark" ? 'dark' : 'oxide',
            toolbar: 'undo redo | styleselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | removeformat | code | image',
        });
    }

    document.addEventListener('DOMContentLoaded', function() {
        initTinyMCE();

        $(document).on('click', '.variable_button', function() {
            const textarea = $(document).find('.tab-pane.active');
            const textareaID = textarea.find('textarea').attr('id');
            tinyMCE.activeEditor.selection.setContent($(this).attr('data-value'));
        });

        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                if (mutation.attributeName === 'data-bs-theme') {
                    tinymce.remove();
                    initTinyMCE();
                }
            });
        });

        observer.observe(document.documentElement, {
            attributes: true
        });
    });
</script>
@endpush