<!-- Popup Modal -->
<div id="formatPopup" style="z-index:999999 !important;" class="fixed inset-0 flex items-center justify-center hidden px-4 bg-black bg-opacity-50 z-[9999999]">
    <div style="width: 60% !important; max-width: 700px !important;" class="w-full max-w-lg p-6 bg-white rounded-lg shadow-lg">
        <h2 class="mb-4 text-lg font-semibold text-gray-700">Insert Placeholder</h2>
        <p>Click to insert placeholders into your content:</p>
        <div class="grid grid-cols-2 gap-2 mt-4">

            <button onclick="insertPlaceholder('{{Guest Name}}')" class="p-2 bg-gray-200 rounded">Guest Name</button>
            <button onclick="insertPlaceholder('{{Guest Email}}')" class="p-2 bg-gray-200 rounded">Guest Email</button>
            <button onclick="insertPlaceholder('{{Guest Phone}}')" class="p-2 bg-gray-200 rounded">Guest Phone</button>
            <button onclick="insertPlaceholder('{{Booking Number}}')" class="p-2 bg-gray-200 rounded">Booking Ref #</button>
            <button onclick="insertPlaceholder('{{INT Number}}')" class="p-2 bg-gray-200 rounded">INT #</button>
            <button onclick="insertPlaceholder('{{Tour Name}}')" class="p-2 bg-gray-200 rounded">Tour Name</button>
            <button onclick="insertPlaceholder('{{Tour Option}}')" class="p-2 bg-gray-200 rounded">Tour Option</button>
            <button onclick="insertPlaceholder('{{Tour Date}}')" class="p-2 bg-gray-200 rounded">Tour Date</button>
            <button onclick="insertPlaceholder('{{Tour Photos}}')" class="p-2 bg-gray-200 rounded">Tour Photos</button>
            <button onclick="insertPlaceholder('{{Start Time}}')" class="p-2 bg-gray-200 rounded">Start Time</button>
            <button onclick="insertPlaceholder('{{End Time}}')" class="p-2 bg-gray-200 rounded">End Time</button>
            <button onclick="insertPlaceholder('{{Duration}}')" class="p-2 bg-gray-200 rounded">Duration</button>
            <button onclick="insertPlaceholder('{{Number Of Guest}}')" class="p-2 bg-gray-200 rounded">Number Of Guest</button>
            <button onclick="insertPlaceholder('{{Meeting Point}}')" class="p-2 bg-gray-200 rounded">Meeting Point</button>
            <button onclick="insertPlaceholder('{{Customer Detail}}')" class="p-2 bg-gray-200 rounded">Customer Detail</button>
            <button onclick="insertPlaceholder('{{Tour Detail}}')" class="p-2 bg-gray-200 rounded">Tour Detail</button>
            <button onclick="insertPlaceholder('{{Guide Name}}')" class="p-2 bg-gray-200 rounded">Guide Name</button>
            <button onclick="insertPlaceholder('{{Guide Phone}}')" class="p-2 bg-gray-200 rounded">Guide Phone Number</button>
            <button onclick="insertPlaceholder('{{Guide Mail}}')" class="p-2 bg-gray-200 rounded">Guide Mail</button>
            <button onclick="insertPlaceholder('{{Guide Fee}}')" class="p-2 bg-gray-200 rounded">Guide Fee</button>
            <button onclick="insertPlaceholder('{{All Tour Guide}}')" class="p-2 bg-gray-200 rounded">Tour guide name + Phone number of all tour guide of that tour (Apply for tours with more than 2 tour guide)</button>
            <button onclick="insertPlaceholder('{{Last Month}}')" class="p-2 bg-gray-200 rounded">Last Month</button>
            <button onclick="insertPlaceholder('{{This Month}}')" class="p-2 bg-gray-200 rounded">This Month</button>
            <button onclick="insertPlaceholder('{{Next Month}}')" class="p-2 bg-gray-200 rounded">Next Month</button>
            <button onclick="insertPlaceholder('{{Tour Report Form}}')" class="p-2 bg-gray-200 rounded">Tour Report Form</button>
            <button onclick="insertPlaceholder('{{Itinerary}}')" class="p-2 bg-gray-200 rounded">Itinerary</button>
            <button onclick="insertPlaceholder('{{Private Vehicle}}')" class="p-2 bg-gray-200 rounded">Private Vehicle</button>
            <button onclick="insertPlaceholder('{{Note}}')" class="p-2 bg-gray-200 rounded">Note for Tour Guide</button>
            <button onclick="insertPlaceholder('{{Accomodation}}')" class="p-2 bg-gray-200 rounded">Accommodation Information</button>
            <button onclick="insertPlaceholder('{{Tour Instructions}}')" class="p-2 bg-gray-200 rounded">Tour Instructions</button>
            <button onclick="insertPlaceholder('{{Tour Form}}')" class="p-2 bg-gray-200 rounded">Form Questions (it's link)</button>
        </div>
        <div class="flex justify-end mt-4">
            <button onclick="closePopup()" class="px-4 py-2 text-white bg-red-500 rounded hover:bg-red-600">Close</button>
        </div>
    </div>
</div>
<!-- JavaScript for CKEditor and Modal -->
<script src="https://cdn.ckeditor.com/4.22.1/standard/ckeditor.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        CKEDITOR.replace('content', {
            toolbar: [
                { name: 'clipboard', items: ['Undo', 'Redo'] },
                { name: 'paragraph', items: ['Format', 'NumberedList', 'BulletedList', 'Blockquote'] },
                { name: 'basicstyles', items: ['Bold', 'Italic'] },
                { name: 'alignment', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight'] },
                { name: 'links', items: ['Link', 'Unlink'] },
                { name: 'insert', items: ['HorizontalRule'] },
                { name: 'tools', items: ['Maximize', 'Source'] }
            ],
            removeButtons: '',
            height: 200,
            on: {
                instanceReady: function () {
                    console.log("CKEditor is ready!");
                }
            }
        });
    });


    function openPopup() {
        document.getElementById('formatPopup').classList.remove('hidden');
    }

    function closePopup() {
        document.getElementById('formatPopup').classList.add('hidden');
    }

    function insertPlaceholder(text) {
    var editorInstance = Object.values(CKEDITOR.instances)[0];
    if (editorInstance) {
        editorInstance.insertText(text);
        closePopup();
    } else {
        console.error("CKEditor instance not found.");
    }
}
</script>
<!-- CSS for Scrollbar -->
<style>
    #addTemplateModal, #formatPopup {
        overflow: hidden;
    }
    #addTemplateModal > div, #formatPopup > div {
        max-height: 90vh;
        overflow-y: auto;
    }

</style>
<?php /**PATH C:\xampp8.2\htdocs\Portal\resources\views/admin/response_templates/format_popup.blade.php ENDPATH**/ ?>