@extends('layouts.app')
@section('title', 'Edit SubModule Content')

@section('content')
    <!-- Chapter Information Box -->
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h2>{{ isset($isAlternate) && $isAlternate ? 'Edit Alternate SubModule Content' : 'Edit SubModule Content' }}
                    </h2>
                    <div>
                        <a href="{{ route('submodule.index', ['program_id' => $programId, 'chapter_id' => $chapterId]) }}"
                            class="btn btn-primary">
                            <i class="fa fa-arrow-left"></i> Back to SubModules
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <strong>Number:</strong> {{ $subModule->iNum ?? 'N/A' }}
                        </div>
                        <div class="col-md-4">
                            <strong>Type:</strong> {{ $subModule->vType ?? 'N/A' }}
                        </div>
                        <div class="col-md-4">
                            <strong>Title:</strong> {{ $chapter->vTitle ?? 'N/A' }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Content Editor -->
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h2>Content Editor</h2>
                </div>
                <div class="card-body">
                    <form id="contentForm" method="POST"
                        action="{{ route('submodule.save-content', ['program_id' => $programId, 'chapter_id' => $chapterId, 'id' => isset($isAlternate) && $isAlternate ? $originalId : $subModule->iSubModuleId]) }}">
                        @csrf
                        @if (isset($isAlternate) && $isAlternate)
                            <input type="hidden" name="is_alternate" value="1">
                        @endif

                        @if (session('success'))
                            <div class="alert alert-success">
                                {{ session('success') }}
                            </div>
                        @endif

                        @if (session('error'))
                            <div class="alert alert-danger">
                                {{ session('error') }}
                            </div>
                        @endif

                        <div class="form-group">
                            <textarea id="content" name="content" class="form-control">{{ $content }}</textarea>
                            @error('content')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group mt-4">
                            <button type="submit" class="btn btn-success">Save Content</button>
                            <a href="{{ route('submodule.index', ['program_id' => $programId, 'chapter_id' => $chapterId]) }}"
                                class="btn btn-secondary">Cancel</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('assets/tinymce/tinymce.min.js') }}"></script>
    <script>
        document.addEventListener('plugins-loaded', function() {
            initializeEditor();
        });

        // Fallback in case the event doesn't fire
        setTimeout(function() {
            initializeEditor();
        }, 2000);

        function initializeEditor() {
            if (window.tinymce) {
                tinymce.init({
                    selector: '#content',
                    height: 500,
                    promotion: false,
                    plugins: [
                        'paste', 'importcss', 'searchreplace', 'autolink', 'autosave',
                        'directionality', 'code', 'visualblocks', 'visualchars',
                        'fullscreen', 'image', 'link', 'media', 'template',
                        'codesample', 'table', 'charmap', 'hr', 'pagebreak',
                        'nonbreaking', 'anchor', 'toc', 'insertdatetime', 'advlist',
                        'lists', 'wordcount', 'imagetools', 'textpattern',
                        'noneditable', 'help', 'charmap', 'emoticons', 'textcolor'
                    ],
                    toolbar: 'undo redo | bold italic underline strikethrough blockquote forecolor backcolor | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | insertfile image media template link anchor codesample | ltr rtl',
                    toolbar_sticky: true,
                    toolbar_mode: 'wrap',
                    content_style: '@import url("https://fonts.googleapis.com/css2?family=Lato:wght@900&family=Open+Sans&family=Noto+Serif+Devanagari&display=swap&"); body { font-family: "Open Sans"; } h1,h2,h3,h4,h5,h6 { font-family: "Open Sans" } blockquote {border: 0;position: relative; background-color: #FEEBDD;border-radius: 10px;padding: 5px 10px;} blockquote span{background-color: transparent !important;}',
                    font_formats: "Open Sans=open sans;Noto Serif Devanagari=Noto Sarif Devagari;",
                    paste_retain_style_properties: "text-align color text-decoration background-color",
                    paste_webkit_styles: 'text-align color text-decoration background-color',

                });
            } else {
                console.error('TinyMCE is not loaded properly');
            }
        }
    </script>
@endpush