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

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

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

                        <div class="form-group">
                            <textarea id="content" name="content" class="form-control editor">{{ $content }}</textarea>
                            @error('content')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                </div>
                <div class="card mt-3">
                    <div class="card-header">
                        <h2>Button Input</h2>
                    </div>
                    <div class="card-body">

                        <div class="form-group">
                            <label for="vButton1to2">Button 1 To 2 Text</label>
                            <input type="text" id="vButton1to2" name="vButton1to2" class="form-control"
                                   value="{{ old('vButton1to2', $subModule && $subModule->vButton1to2 ? $subModule->vButton1to2 : 'Read Transcript Instead') }}">
                            @error('vButton1to2')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="vButton2to1">Button 2 To 1 Text</label>
                            <input type="text" id="vButton2to1" name="vButton2to1" class="form-control"
                                   value="{{ old('vButton2to1', $subModule && $subModule->vButton2to1 ? $subModule->vButton2to1 : 'Watch Video Instead') }}">
                            @error('vButton2to1')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                </div>
                <div class="card mt-3">
                    <div class="card-header">
                        <h2>Content Editor 2</h2>
                    </div>
                    <div class="card-body">

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

                        <style>
                            /* The list looks as it did before; only the cursor and a light
                               highlight hint that clicking copies. The tooltip does the telling. */
                            #placeholderList .placeholder-copy {
                                cursor: pointer;
                            }

                            #placeholderList .placeholder-copy:hover {
                                background-color: #fff3cd;
                            }
                        </style>

                        <div id="placeholderError" class="alert alert-danger d-none"></div>

                        {{-- Braces are built in PHP: a literal "}}" inside a Blade echo would
                             close the echo early and break compilation. --}}
                        @php
                            $ph = fn (string $inner) => '{'.'{'.$inner.'}'.'}';
                        @endphp

                        <details class="mb-3">
                            <summary>Available placeholders ({{ count($placeholderFields) }})</summary>
                            <p class="text-muted mb-2 mt-2">
                                Write <code>{{ $ph('tbl_Table.vColumn | default') }}</code> to insert
                                the reader's own data. The default is shown when they have no value
                                for that field. Type the placeholder as plain text — bold or
                                coloured text inside the braces will break it.
                            </p>
                            <input type="text" id="placeholderFilter" class="form-control mb-2"
                                   placeholder="Filter fields…">
                            <ul id="placeholderList" style="max-height:200px;overflow:auto;">
                                @foreach ($placeholderFields as $field)
                                    @php $token = $ph($field.' | default'); @endphp
                                    <li><code class="placeholder-copy"
                                              data-placeholder="{{ $token }}"
                                              title="Click to copy">{{ $token }}</code></li>
                                @endforeach
                            </ul>
                        </details>

                        <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>
                    </div>
                </div>
            </form>
        </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: 'textarea.editor',
                    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=Poppins:wght@400;600;700&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;Poppins=poppins;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');
            }
        }

        const PLACEHOLDER_FIELDS = @json($placeholderFields);
        const PLACEHOLDER_TOKEN = /\{\{(.*?)\}\}/gs;
        const PLACEHOLDER_BODY = /^\s*(tbl_[A-Za-z0-9_]+)\.([A-Za-z_][A-Za-z0-9_]*)\s*(?:\|\s*([^]*?)\s*)?$/;

        // Mirrors app/Rules/ValidPlaceholders.php so admins see the problem before
        // submitting. The server-side rule remains the authority.
        function placeholderProblem(html) {
            const matches = [...html.matchAll(PLACEHOLDER_TOKEN)];

            if ((html.match(/\{\{/g) || []).length > matches.length) {
                return 'A placeholder is missing its closing "}}".';
            }

            for (const match of matches) {
                const body = match[1];

                if (body.includes('<') || body.includes('>')) {
                    return match[0] + ' has formatting inside it. Remove bold/italic/colour and retype it as plain text.';
                }

                const parts = PLACEHOLDER_BODY.exec(body.replace(/&nbsp;/g, ' '));

                if (!parts) {
                    return body.includes('.')
                        ? match[0] + ' is not a valid placeholder. Use @{{tbl_Table.vColumn | default}}.'
                        : match[0] + ' is missing a table name. Use @{{tbl_UserProfile.vName | there}}.';
                }

                if (parts[3] && /[<>{}]/.test(parts[3])) {
                    return match[0] + ' has an invalid default value.';
                }

                if (!PLACEHOLDER_FIELDS.includes(parts[1] + '.' + parts[2])) {
                    return match[0] + ' is not an available field. Check the list of available placeholders.';
                }
            }

            return null;
        }

        // navigator.clipboard only exists in a secure context. The admin panel is
        // commonly served over plain HTTP, so the execCommand fallback is the path
        // that actually runs in most cases, not a rare edge case.
        function copyTextToClipboard(text) {
            if (navigator.clipboard && window.isSecureContext) {
                return navigator.clipboard.writeText(text);
            }

            return new Promise(function (resolve, reject) {
                const area = document.createElement('textarea');
                area.value = text;
                area.setAttribute('readonly', '');
                area.style.position = 'fixed';
                area.style.top = '-1000px';
                area.style.opacity = '0';
                document.body.appendChild(area);
                area.select();

                try {
                    document.execCommand('copy') ? resolve() : reject(new Error('copy rejected'));
                } catch (error) {
                    reject(error);
                } finally {
                    document.body.removeChild(area);
                }
            });
        }

        // Briefly swaps the token text for a confirmation, then restores it. The
        // native tooltip cannot be refreshed mid-hover, so the feedback goes in
        // the element's own text instead.
        function flashCopyResult(element, message) {
            if (!element.dataset.originalText) {
                element.dataset.originalText = element.textContent;
            }

            clearTimeout(element.dataset.resetTimer);
            element.textContent = message;

            element.dataset.resetTimer = setTimeout(function () {
                element.textContent = element.dataset.originalText;
            }, 1200);
        }

        document.addEventListener('DOMContentLoaded', function () {
            const form = document.getElementById('contentForm');
            const box = document.getElementById('placeholderError');
            const filter = document.getElementById('placeholderFilter');
            const list = document.getElementById('placeholderList');

            // Delegated so it keeps working while the list is filtered.
            if (list) {
                list.addEventListener('click', function (event) {
                    const target = event.target.closest('.placeholder-copy');

                    if (!target) {
                        return;
                    }

                    copyTextToClipboard(target.dataset.placeholder)
                        .then(function () { flashCopyResult(target, 'Copied!'); })
                        .catch(function () { flashCopyResult(target, 'Press Ctrl+C'); });
                });
            }

            if (form) {
                form.addEventListener('submit', function (event) {
                    const contents = window.tinymce
                        ? tinymce.editors.map(function (editor) { return editor.getContent(); }).join('\n')
                        : '';
                    const problem = placeholderProblem(contents);

                    if (problem) {
                        event.preventDefault();
                        box.textContent = problem;
                        box.classList.remove('d-none');
                        box.scrollIntoView({ behavior: 'smooth' });
                        return;
                    }

                    box.classList.add('d-none');
                });
            }

            if (filter) {
                filter.addEventListener('keyup', function (event) {
                    const needle = event.target.value.toLowerCase();

                    document.querySelectorAll('#placeholderList li').forEach(function (item) {
                        item.style.display = item.textContent.toLowerCase().includes(needle) ? '' : 'none';
                    });
                });
            }
        });
    </script>
@endpush