@extends('admin.layouts.layout')

@section('head')
 <link rel="stylesheet" href="{{asset('richtexteditor/rte_theme_default.css')}}" />

@endsection

@section('content')

@php
    $buildingNo;
    $carpetArea;
    $propertyCardNo;
    $carpetArea2;
    $east;
    $west;
    $north;
    $south;
    $claimingParty;
    $considerationAmountSaledeed
@endphp

    <div class="page-container">

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header border-bottom border-dashed d-flex align-items-center">
                        <h4 class="header-title">Add Document</h4>
                    </div>

                    <div class="card-body">
                        <form action="{{ route('documents.update', $Document->id) }}" method="POST">
                            @csrf
                            @method('PUT')
                            <div class="row">
                                <div class="mb-3 col-lg-6">
                                    <label for="name" class="form-label">Document</label>
                                    <select class="form-control" name="nature_id" id="nature_id">
                                        <option value="">Select Document</option>
                                        @foreach ($NatureOfDocuments as $NatureOfDocument)
                                            <option value="{{ $NatureOfDocument->id }}"
                                                {{ $Document->nature_id == $NatureOfDocument->id ? 'selected' : '' }}>
                                                {{ $NatureOfDocument->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="mb-3 col-lg-6">
                                    <label for="name" class="form-label">Site </label>
                                    <select class="form-control" name="site_id" id="site_id">
                                        <option value="">Select Site</option>
                                        @foreach ($BuilderSites as $BuilderSite)
                                            <option value="{{ $BuilderSite->id }}"
                                                {{ $Document->site_id == $BuilderSite->id ? 'selected' : '' }}>
                                                {{ $BuilderSite->site_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="mb-3 col-lg-12">
                                    <div class="d-flex mb-3 justify-content-between">
                                        <label class="form-label">Document</label>
                                        <button type="button" class="btn btn-sm btn-primary addPage">+ Add Page</button>
                                    </div>

                                    <div class="page-wrapper">
                                        @foreach ($Document->descriptions as $key => $desc)
                                            <div class="editor-box mb-3">
                                                <div class="d-flex justify-content-between align-items-center mb-2">
                                                    <label class="form-label page-label">Page {{ $key + 1 }}</label>
                                                    <button type="button" class="btn btn-danger btn-sm removePage">- Remove Page</button>
                                                    <input type="hidden" name="id[]" value="{{ $desc->id }}">
                                                </div>
                                                <textarea style="height: 500px" class="editor" name="doc_desc[]" id="inp_editor1">{{ $desc->doc_desc }}</textarea>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>

                                <div>
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>


    </div> <!-- container -->

@endsection

@section('footer-script')
{{-- <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
<script src="https://cdn.tiny.cloud/1/8euh6vbbf1cx3via00iiavkprjxbyhwcpfvtjo7k1y4cypr2/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
<script>
    let pageCount = $('.editor-box').length;

    // Initialize TinyMCE
    function initTinyMCE(selector) {
        tinymce.init({
            selector: selector,
            plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount',
            toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table | align lineheight | numlist bullist indent outdent | emoticons charmap | removeformat ',
            setup: function (editor) {
                editor.on('init', function () {
                    editor.getContainer().style.borderRadius = '6px';
                });
            }
        });
    }

    // Initialize TinyMCE for existing editors
    initTinyMCE('textarea.editor');

    // Add New Page
    $(document).on('click', '.addPage', function () {
        pageCount++;
        let newId = 'editor_' + pageCount;

        let newPageHtml = `
            <div class="editor-box mb-3">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <label class="form-label page-label">Page ${pageCount}</label>
                    <button type="button" class="btn btn-danger btn-sm removePage">- Remove Page</button>
                </div>
                <textarea class="editor" name="doc_desc[]" id="${newId}"></textarea>
            </div>
        `;

        $('.page-wrapper').append(newPageHtml);

        // Initialize TinyMCE only for new editor
        initTinyMCE(`#${newId}`);
    });

    // Remove Page
    $(document).on('click', '.removePage', function () {
        let parentBox = $(this).closest('.editor-box');
        let textarea = parentBox.find('textarea');
        let textareaId = textarea.attr('id');

        // Remove TinyMCE instance
        if (textareaId && tinymce.get(textareaId)) {
            tinymce.get(textareaId).remove();
        }

        parentBox.remove();

        // Renumber all page labels
        $('.page-wrapper .editor-box').each(function (index) {
            $(this).find('.page-label').text('Page ' + (index + 1));
        });

        // Update pageCount
        pageCount = $('.editor-box').length;
    });

    $(document).ready(function () {
        $(document).on('input', '.editor', function () {
            let $textarea = $(this);
            let doc_desc = $textarea.val();
            let id = $textarea.closest('.editor-box').find('input[name="id[]"]').val();

            // AJAX request
            $.ajax({
                url: '{{ route("document.autoSave") }}', // define this route in web.php
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    id: id,
                    doc_desc: doc_desc
                },
                success: function (response) {
                    console.log('Saved successfully');
                },
                error: function (xhr) {
                    console.error('Save failed', xhr.responseText);
                }
            });
        });
    });
</script> --}}

<script type="text/javascript" src="{{asset('richtexteditor/rte.js')}}"></script>
<script type="text/javascript" src='{{asset('richtexteditor/plugins/all_plugins.js')}}'></script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        function initEditors() {
            document.querySelectorAll(".editor").forEach(editor => {
                if (!editor.classList.contains("rte-initialized")) {
                    new RichTextEditor(editor, {
                        editorResizeMode: "height"
                    });
                    editor.classList.add("rte-initialized");
                }
            });
        }

        initEditors(); // Initialize existing editors

        document.querySelector(".addPage").addEventListener("click", function () {
            let newPage = document.createElement("div");
            newPage.className = "editor-box mb-3";
            newPage.innerHTML = `
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <label class="form-label page-label">New Page</label>
                    <button type="button" class="btn btn-danger btn-sm removePage">- Remove Page</button>
                </div>
                <textarea class="editor" name="doc_desc[]"></textarea>
            `;
            document.querySelector(".page-wrapper").appendChild(newPage);
            initEditors(); // Initialize newly added editor
        });

        document.querySelector(".page-wrapper").addEventListener("click", function (e) {
            if (e.target.classList.contains("removePage")) {
                e.target.closest(".editor-box").remove();
            }
        });
    });
</script>





@endsection