@extends('layouts.app')

@section('title', 'Edit Offer')

@section('content_header_title', 'Offers')
@section('content_header_subtitle', 'Edit Offer')

@section('content_body')

    @php
        $offer_details =
            isset($offer->offer_details) && !empty($offer->offer_details)
                ? json_decode($offer->offer_details, true)
                : [];
    @endphp
    <style>
        .gjs-cv-canvas {
            min-width: 612px;
            /* Letter size width in pixels */
            min-height: 792px;
            /* Letter size height in pixels */
            overflow: hidden;
        }

        .gjs-frame {
            min-height: 792px !important;
            /* Ensures each page is at least Letter size */
        }

        .gjs-pn-panel {
            display: inline-block;
            position: absolute;
            box-sizing: border-box;
            text-align: center;
            padding: 4px !important;
            z-index: 3;
        }

        .gjs-block-categories {
            margin-top: 35px;
        }

        .gjs-cv-canvas {
            width: 100vw;
            /* Full width */
            height: 100vh;
            /* Full height */
            display: flex;
            align-items: center;
            justify-content: center;
            background: #eee;
            /* Optional: background color */
        }

        .gjs-frame {
            width: 100%;
            max-width: 100vw;
            aspect-ratio: 8.5 / 11;
            /* Maintain Letter size proportion */
            height: auto;
        }

        .gjs-block {
            width: 100px !important;
            min-height: 50px !important;
            height: 50px !important;
        }

        .gjs-pn-devices-c {
            display: none !important;
        }

        .app-wrap {
            height: 100%;
            width: 100%;
            display: flex;
        }

        .editor-wrap {
            widtH: 100%;
            height: 100%;
        }

        .pages-wrp,
        .pages {
            display: flex;
            flex-direction: column
        }

        .pages-wrp {
            background: #333;
            padding: 5px;
        }

        .add-page {
            background: #444444;
            color: white;
            padding: 5px;
            border-radius: 2px;
            cursor: pointer;
            white-space: nowrap;
            margin-bottom: 10px;
        }

        .page {
            background-color: #444;
            color: white;
            padding: 5px;
            margin-bottom: 5px;
            border-radius: 2px;
            cursor: pointer;

            &.selected {
                background-color: #706f6f
            }
        }

        .page-close {
            opacity: 0.5;
            float: right;
            background-color: #2c2c2c;
            height: 20px;
            display: inline-block;
            width: 17px;
            text-align: center;
            border-radius: 3px;

            &:hover {
                opacity: 1;
            }
        }

        .gjs-am-add-asset {
            display: none;
        }
    </style>
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Edit Offer</h3>
        </div>

        <div class="card-body">
            <div class="row">
                <div class="col-md-5">
                    <form id="offer-form" class="needs-validation" novalidate>
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="offer_title">Offer Title:</label>
                                    <input type="text" class="form-control" id="offer_title" name="offer_title"
                                        value="{{ old('offer_title', $offer->offer_title) }}" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label>Select Template</label>
                                <select name="template_type" id="template_type" class="form-control" readonly
                                    onchange="toggleTemplateInputs()" required>
                                    <option value="">-- Select Template Type --</option>
                                    <option value="single" {{ $offer->template_type == 'single' ? 'selected' : '' }}>Single
                                        Hotel</option>
                                    <option value="multiple" {{ $offer->template_type == 'multiple' ? 'selected' : '' }}>
                                        Country + Multiple Hotels & Cities</option>

                                </select>

                            </div>
                        </div>
                        <!-- AJAX Loaded Form Area -->
                        <div id="templateFormArea">
                            @if ($offer->template_type == 'single')
                                @include('offers.forms.single_hotel', ['offer' => $offer])
                            @elseif ($offer->template_type == 'multiple')
                                @include('offers.forms.multiple_hotels', ['offer' => $offer])
                            @endif
                        </div>
                                                <br>
                        <button type="submit" class="btn btn-primary">Save Offer</button>
                    </form>
                </div>
                <div class="col-md-7">
                    <div class="app-wrap" style="display: flex;">
                        <!-- Pages Wrapper -->
                        <div class="pages-wrp">
                            <div class="add-page" id="add-page-btn">Add Page</div>
                            <div class="pages" id="pages-list"></div>
                        </div>
                        <!-- GrapesJS Editor Container -->
                        <div class="editor-wrap">
                            <div id="gjs" style="border:1px solid #ccc;"></div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- <hr> --}}

            {{-- <h3>Live PDF Preview</h3>
            <iframe id="pdfPreview" style="width:100%; height:600px;" frameborder="0"></iframe> --}}
        </div>
    </div>
    <!-- Add Hotel Modal -->
    <div class="modal fade" id="addHotelModal" tabindex="-1" role="dialog" aria-labelledby="addHotelModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addHotelModalLabel">Add New Hotel</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!-- Hotel Create Form -->
                    <form id="createHotelForm" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group">
                            <label for="hotel_name">Hotel Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="hotel_name" name="name" required>
                        </div>
                        {{-- <div class="form-group">
                        <label for="hotel_country">Country <span class="text-danger">*</span></label>
                        <select name="country_id" id="hotel_country" class="form-control" required>
                            <option value="">Select Country</option>
                            @foreach ($countries as $country)
                                <option value="{{ $country->id }}">{{ $country->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group position-relative">
                        <label for="city">City <span class="text-danger">*</span></label>
                        <input type="text" id="city" name="city" class="form-control" placeholder="Enter city name">
                        <div id="cityList" class="dropdown-menu show" style="width: 100%; display: none; position: absolute; top: 100%; left: 0;"></div>
                    </div> --}}
                        {{-- <div class="form-group">
                        <label for="hotel_city">City <span class="text-danger">*</span></label>
                        <select name="city_id" id="hotel_city" class="form-control" required>
                            <option value="">Select City</option>
                        </select>
                    </div> --}}
                        <div class="form-group">
                            <label for="location">Location <span class="text-danger">*</span></label>
                            <input type="text" id="location" name="location" class="form-control" maxlength="70"
                                placeholder="Enter location">
                        </div>
                        <div class="form-group">
                            <label for="feature_image">Feature Image</label>
                            <input type="file" class="form-control" id="feature_image" name="feature_image"
                                accept="image/*">
                        </div>
                        <input type="hidden" name="form_type" value="modal">
                        <button type="submit" class="btn btn-primary">Save Hotel</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('js')
    <!-- Include GrapesJS CSS & JS -->
    <link href="{{ asset('grapesjs/grapes.min.css') }}" rel="stylesheet">
    <script src="{{ asset('grapesjs/grapes.min.js') }}"></script>
    <!-- <script src="https://unpkg.com/grapesjs-blocks-basic@1.0.1"></script>
                                                                                                                                                                                                                                                                                            <script src="https://unpkg.com/grapesjs-custom-code@1.0.1"></script>
                                                                                                                                                                                                                                                                                            <script src="https://unpkg.com/grapesjs-blocks-table"></script> -->
    <!-- <script src="https://unpkg.com/grapesjs-tui-image-editor@0.1.3"></script> -->
    <!-- Include jQuery and Bootstrap (for modal functionality) -->
    {{-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> --}}
    <script src="{{ asset('js/offers.js') }}"></script>
    <link href="{{ asset('css/select2.min.css') }}" rel="stylesheet" />
    <script src="{{ asset('js/select2.min.js') }}"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>
    <script>
        const editorData = {
            csrfToken: "{{ csrf_token() }}",
            stylePath: "{{ asset('offers-content/css/style.css') }}",
            logoBase64: "{{ $logoBase64 }}",
            logoUrl: "{{ asset(config('adminlte.logo_img_black')) }}",
        };
    </script>
    <script>
        let feature_image_changed = true;
        var offerDetails = @json($offer_details);
        var defaultPages = [];
        offerDetails.forEach((page, index) => {
            defaultPages.push({
                id: 'page-' + (index + 1),
                name: page.pageName,
                styles: page.css,
                component: page.html.replace(/<\/?body[^>]*>/gi, '').trim()
            });

        });
        const firstPage = defaultPages[0];
        const remainingPages = defaultPages.slice(1);
    </script>

    <script>
       function blockRoomTypeImages(editor) {
            // Use the API: https://grapesjs.com/docs/api/ 
            editor.Blocks.add('blocks-room-type-images', {
                label: 'Room Types',
                content: `<header><div class=container><div class=header-wrap><div class=header-left><div class="hotel-main-name">Title</div></div><div class=header-right><img alt="We Stay logo"class=logo src="${ editorData.logoUrl }"></div><div class="clearfix"></div></div></div></header><div class="hotel-images-wrap content-section"><div class="hotel-images"><img src="images/1.jpg" class="img-fluid" alt=""  data-crop-width="612" data-crop-height="453"></div> <div class="hotel-images-saperator"></div><div class="hotel-images"><img src="images/2.jpg" class="img-fluid" alt="" loading="lazy"  data-crop-width="612" data-crop-height="453"></div></div>`,
                styles: ``,
                category: 'Custom'
            });
        }

        function blockRoomTypeImagesWithSubTitle(editor) {
            // Use the API: https://grapesjs.com/docs/api/ 
            editor.Blocks.add('blocks-room-type-images-with-sub-title', {
                label: 'Room Types With Sub Title',
                content: `<header><div class=container><div class=header-wrap><div class=header-left><div class="hotel-main-title">Title</div><div class="hotel-sub-title">Sub Title</div></div><div class=header-right><img alt="We Stay logo"class=logo src="${ editorData.logoUrl }" loading="lazy"></div><div class="clearfix"></div></div></div></header><div class="hotel-images-wrap content-section"><div class="hotel-images"><img src="images/1.jpg" class="img-fluid" alt="" loading="lazy"  data-crop-width="612" data-crop-height="453"></div> <div class="hotel-images-saperator"></div><div class="hotel-images"><img src="images/2.jpg" class="img-fluid" alt="" loading="lazy"  data-crop-width="612" data-crop-height="453"></div></div>`,
                styles: ``,
                category: 'Custom'
            });
        }

        function blockImageDivider(editor) {
            // Use the API: https://grapesjs.com/docs/api/ 
            editor.Blocks.add('blocks-image-divider', {
                label: 'Image Divider',
                content: `<header><div class=container><div class=header-wrap><div class=header-left><div class="hotel-main-name">Name</div></div><div class=header-right><img alt="We Stay logo"class=logo src="${ editorData.logoUrl }" loading="lazy"></div><div class="clearfix"></div></div></div></header><div class="full-image-wrap content-section"><img alt="" class="img-fluid" src="" loading="lazy" data-crop-width="612" data-crop-height="933.5"><div class="full-image-gredient" style=""></div><div class="hotelname-absolute">Four Seasons Hotel Osaka</div></div>`,
                styles: ``,
                category: 'Custom'
            });
        }

        function blockRoomAmenities(editor) {
            // Use the API: https://grapesjs.com/docs/api/ 
            editor.Blocks.add('blocks-room-amenities', {
                label: 'Room Amenities',
                content: `<header class="header-room-amenities"><div class=container><div class=header-wrap><div class=header-left><div class="hotel-main-name">Name</div></div><div class=header-right><img alt="We Stay logo"class=logo src="${ editorData.logoUrl }" loading="lazy"></div><div class="clearfix"></div></div></div></header><hr class="header-room-amenities-seperator"><div class="container content-section"><div class=amenities-img-wrap><div class=amenities-img><img alt=""class=img-fluid src="" loading="lazy"></div></div><div class=hotel-amenities-wrap><table class=table><tr><td class=hotel-amenities--info><p>Superior Lodges are architectural works of art with interiors by the celebrated David Collins Studio. Set amongst indigenous gardens and vineyards, with iconic Cape Winelands views, enjoy unsurpassed comfort in sublime surrounds.<td><div class=hotel-amenities--list><h3>Amenities</h3><ul><li>En-suite bedroom with king-size bed<li>Marble bathroom<li>Rain shower<li>Bath<li>Separate WC<li>Living room<li>Private terrace<li>Private heated pool<li>Wet bar<li>Interleading door option<li>Flatscreen television<li>Bose personal music station<li>In-room safe<li>Air-conditioning<li>Wifi<li>Concierge services<li>Coffee and tea<li>Guided Estate and Art tou</ul></div></table></div></div><footer><div class=footer><p>Thank you for choosing WESTAY LTD<p class=footer-info>Tel: 971 4546 4488 <span class=dot></span> E-mail: Reservations@westay.com<p>Dubai international Financial Centre, Dubai, United Arab Emirates</div></footer>`,
                styles: ``,
                category: 'Custom'
            });
        }
   
        // Initialize GrapesJS editor with style manager and code view support
        var editor = grapesjs.init({
            container: '#gjs',
            telemetry: false,
            //  height: '1344px', // 18.67 inches in pixels (72 DPI)
            // width: '816px', // 11.33 inches in pixels (72 DPI)
            canvas: {
                styles: [
                    "{{ asset('offers-content/css/style.css') }}", // This loads your local custom.css file
                ]
            },
            fromElement: false,
            storageManager: {
                type: 'none'
            },
            // deviceManager: {
            //     devices: [
            //         {
            //             name: 'Desktop',
            //             width: '816px', // Set the canvas width here
            //             //height: '1344px'
            //         }
            //     ]
            // },
            plugins: [blockRoomTypeImages, blockRoomTypeImagesWithSubTitle, blockRoomAmenities, blockImageDivider],
            assetManager: {
                assets: [],
                upload: '/offers/upload-image', // Must match your Laravel route
                uploadName: 'file',
                autoAdd: 1,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            },
            pageManager: {
                pages: [firstPage]
            }
        });

        remainingPages.forEach((page) => {
            editor.Pages.add({
                id: page.id,
                name: page.name,
                component: '', // Empty initially
                styles: '', // Empty initially
            });
        });

        editor.on('page:select', selectedPage => {
            const pageId = selectedPage.get('id');
            const match = defaultPages.find(p => p.id === pageId);

            // Load content only if not already loaded
            if (!selectedPage.get('loaded')) {
                //  console.log('Loading content for page:', pageId, match);
                if (match) {
                    editor.setComponents(match.component || '');
                    editor.setStyle(match.styles || '');
                }
                selectedPage.set('loaded', true); // custom flag
            }
        });

        const canvasEl = editor.Canvas.getElement(); // Get the actual canvas element
        canvasEl.style.overflowX = 'auto'; // Allow horizontal scrolling if necessary

        const panelManager = editor.Panels;
        const getPanelsEl = panelManager.getPanelsEl();
        const getPanels = panelManager.getPanels();

        editor.Commands.add('open-cropper', {
            run(editor, sender, opts = {}) {
                const selected = editor.getSelected();
                if (!selected || selected.get('tagName') !== 'img') {
                    alert('Please select an image');
                    return;
                }

                const imgSrc = selected.get('src');
                const cropWidth = parseInt(selected.getAttributes()['data-crop-width']);
                const cropHeight = parseInt(selected.getAttributes()['data-crop-height']);
                if (!imgSrc || isNaN(cropWidth) || isNaN(cropHeight)) {
                    alert('This image is not cropable.');
                    return;
                }

                const modal = editor.Modal;
                const container = document.createElement('div');
                container.innerHTML = `
      <div>
        <img id="cropper-image" src="${imgSrc}" style="max-width: 700px"/>
        <div style="margin-top: 10px; text-align: right;">
             <button id="zoom-out" style="padding: 5px 10px; margin-right: 5px;">- Zoom Out</button>
    <button id="zoom-in" style="padding: 5px 10px; margin-right: 10px;">+ Zoom In</button>
          <button id="apply-crop" style="padding: 5px 10px;">Apply</button>
        </div>
      </div>
    `;

                modal.setTitle('Crop Image');
                modal.setContent(container);
                modal.open();

                const image = container.querySelector('#cropper-image');
                let cropper;

                image.addEventListener('load', () => {

                    cropper = new Cropper(image, {
                        viewMode: 1,
                        aspectRatio: cropWidth / cropHeight,
                        autoCropArea: 1,
                        minCropBoxWidth: cropWidth,
                        minCropBoxHeight: cropHeight,
                        dragMode: 'move',
                        cropBoxResizable: false,
                        cropBoxMovable: true,
                        movable: true,
                        zoomable: true,
                        wheelZoomRatio: 0.1,
                        ready() {
                            cropper.setCropBoxData({
                                width: cropWidth,
                                height: cropHeight
                            });
                        }
                    });
                });

                container.querySelector('#apply-crop').addEventListener('click', () => {
                    const naturalWidth = image.naturalWidth;
                    const naturalHeight = image.naturalHeight;
                    const displayedWidth = image.getBoundingClientRect().width;
                    const displayedHeight = image.getBoundingClientRect().height;

                    const scaleX = naturalWidth / displayedWidth;
                    const scaleY = naturalHeight / displayedHeight;

                    const cropData = cropper.getData(); // get crop box dimensions on screen
                    let outputWidth = Math.round(cropData.width * scaleX);
                    let outputHeight = Math.round(cropData.height * scaleY);

                    // Optional: Cap maximum width to avoid huge output
                    const MAX_WIDTH = 2000;
                    if (outputWidth > MAX_WIDTH) {
                        const ratio = MAX_WIDTH / outputWidth;
                        outputWidth = MAX_WIDTH;
                        outputHeight = Math.round(outputHeight * ratio);
                    }

                    const canvas = cropper.getCroppedCanvas({
                        width: outputWidth,
                        height: outputHeight,
                        imageSmoothingEnabled: true,
                        imageSmoothingQuality: 'high'
                    });

                    canvas.toBlob((blob) => {
                        const formData = new FormData();
                        formData.append('file', blob, 'cropped-image.jpg');

                        fetch('/offers/upload-image', {
                                method: 'POST',
                                headers: {
                                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                                },
                                body: formData,
                            })
                            .then(res => res.json())
                            .then(response => {
                                const newImageUrl = response.data[
                                    0]; // controller returns array in `data`
                                image.src = newImageUrl;

                                // Optionally update in GrapesJS
                                const selected = editor.getSelected();
                                if (selected && selected.is('image')) {
                                    selected.set('src', newImageUrl);
                                    feature_image_changed = true;
                                }

                                cropper.destroy();
                                cropper = null;
                                modal.close();
                            })
                            .catch((err) => {
                                console.error('Upload failed:', err);
                            });
                    }, 'image/jpeg'); // or 'image/png'


                });


                container.querySelector('#zoom-in').addEventListener('click', () => {
                    if (cropper) cropper.zoom(0.1);
                });

                container.querySelector('#zoom-out').addEventListener('click', () => {
                    if (cropper) cropper.zoom(-0.1);
                });
            }
        });
        editor.Panels.addButton('options', {
            id: 'crop-image',
            className: 'fa fa-crop',
            command: 'open-cropper',
            attributes: {
                title: 'Crop Image'
            }
        });


        panelManager.removePanel('commands');
        //panelManager.removePanel('options');
        //panelManager.removePanel('views');
        panelManager.removeButton('options', 'sw-visibility');
        panelManager.removeButton('options', 'export-template');

        //editor.Panels.getButton('options', 'sw-visibility').set('active', true);
        panelManager.removeButton('views', 'open-sm');
        panelManager.removeButton('views', 'open-tm');
        panelManager.removeButton('views', 'open-layers');
        //  panelManager.removeButton('views', '"open-blocks"');

        editor.Panels.getButton('views', 'open-blocks').set({
            command: (editor) => {
                const blocksPanel = document.querySelector('.gjs-pn-views-container');

                if (blocksPanel) {
                    // Toggle visibility
                    const isHidden = blocksPanel.style.display === 'none';
                    blocksPanel.style.display = isHidden ? 'block' : 'none';
                } else {
                    // If the panel doesn't exist yet, trigger the default command to open it
                    editor.runCommand('open-blocks');
                }
            }
        });

        //        document.addEventListener("DOMContentLoaded", function () {
        //     if (typeof offerDetails !== "undefined" && offerDetails.length > 0) {
        //         console.log("Offer Details Type:", typeof offerDetails);
        //     console.log("Offer Details:", offerDetails);
        //         offerDetails.forEach((page, index) => {
        //             if (index !== 0) {
        //             console.log(`Adding Page: ${page.pageName}`);

        //             const allPages = editor.Pages.getAll();

        //                 const firstPage = allPages[0];
        //             // Create a new page in GrapesJS
        //             const addedPage =pm.add({
        //                 id: 'page-' + (index + 1),
        //                 name: page.pageName,
        //             });

        //             // Set the HTML & CSS content for the page
        //             firstPage.getMainComponent().components().set('content', page.html);
        //             editor.setStyle(page.css);

        //             // Set active page to first one

        //             //    editor.Pages.select(addedPage);
        //             }
        //         });
        //     }
        // });



        editor.on('update', function() {
            updatePreview();
        });
        // const defaultPage =editor.Pages.add({
        //     id: "page-1",
        //     name: "Page 1",
        // });
        editor.BlockManager.remove('video');
        editor.BlockManager.remove('map');

        const pm = editor.Pages; // Get the PageManager instance
        let selectedPageId = null;
        // Function to render pages in the pages list 
        function renderPages() {
            const pagesList = document.getElementById('pages-list');
            pagesList.innerHTML = ''; // Clear the current list
            pm.getAll().forEach(page => {
                const pageElement = document.createElement('div');
                pageElement.classList.add('page');
                if (page.id === selectedPageId) {
                    pageElement.classList.add('selected');
                }
                const pageName = page.get('name') || page.id;
                pageElement.innerHTML =
                    `${pageName} <span class="page-close" onclick="removePage('${page.id}')">&Cross;</span>`;
                pageElement.onclick = () => selectPage(page.id);
                pagesList.appendChild(pageElement);
            });
        }

        // Function to select a page 
        function selectPage(pageId) {
            selectedPageId = pageId;
            pm.select(pageId);
            renderPages();
        }

        // Function to remove a page 
        function removePage(pageId) {
            // Remove from GrapesJS
            const deletedPage = pm.get(pageId);
            if (!deletedPage) return;
            pm.remove(pageId);
            if (selectedPageId === pageId) {
                selectedPageId = null;
            }
            // Remove from defaultPages
            const deletedIndex = defaultPages.findIndex(p => p.id === pageId);
            if (deletedIndex !== -1) {
                defaultPages.splice(deletedIndex, 1);
            }

            // Renumber remaining pages
            const allPages = pm.getAll();

            allPages.forEach((page, index) => {
                const newId = `page-${index + 1}`;
                const newName = `Page ${index + 1}`;

                const oldId = page.get('id');

                // Update GrapesJS page model
                page.set('id', newId);
                page.set('name', newName);

                // Update corresponding entry in defaultPages
                const match = defaultPages.find(p => p.id === oldId);
                if (match) {
                    match.id = newId;
                    match.pageName = newName;
                }
            });

            // Update editor's internal state (select first page)
            if (allPages.length > 0) {
                pm.select(allPages[0]);
            }
            renderPages();
        }
        // Function to add a new page
        function addPage() {
            const len = pm.getAll().length;
            const newPage = pm.add({
                name: `Page ${len + 1}`,
                component: {
                    tagName: 'div',
                    classes: ['page']
                }
            });
            selectedPageId = newPage.id;
            renderPages();
        }
        // Event listener for the "Add new page" button 
        document.getElementById('add-page-btn').addEventListener('click', addPage);
        // Initial rendering of pages 
        renderPages();

        function getAllPagesHtml() {

            const frameEl = editor.Canvas.getFrameEl();
            const doc = frameEl?.contentDocument || frameEl?.contentWindow?.document;

            if (!doc) {
                console.error('⚠️ iframe document not found');
                return;
            }

            const pageEls = doc.querySelectorAll('.page');
            let allPagesHtml = [];
            const pages = pm.getAll();
            // Get all pages from the PageManager
            // Loop through each page and get the HTML of the components 

            pages.forEach((page, index) => {

                const pageId = page.get('id');

                const match = defaultPages.find(p => p.id === pageId);

                //     const pageEl = pageEls[index];

                // if (!pageEl) {
                // console.warn(`❌ Missing .page DOM element for index ${index}`);
                // return;
                // }
                let htmlPage = '';
                let cssPage = '';

                if (page.get('loaded') || index === 0) {
                    const component = page.getMainComponent();


                    htmlPage = editor.getHtml({
                        component
                    });
                    cssPage = editor.getCss({
                        component
                    });
                } else {

                    if (match) {

                        htmlPage = match.component || '';
                        cssPage = match.styles || '';
                    }

                }


                //     const sections = Array.from(pageEl.querySelectorAll('.content-section')).map((section) => ({
                // name: section.getAttribute('data-section-name') || '',
                // top: section.offsetTop,
                // height: section.offsetHeight
                // }));
                // Gather tables and rows
                // const tables = pageEl.querySelectorAll('.content-section table');
                // const layout = [];

                // tables.forEach((table, tIndex) => {
                // const thead = table.querySelector('thead');
                // const tbody = table.querySelector('tbody');
                // const rows = Array.from(tbody?.querySelectorAll('tr') || []);

                // const rowMeta = rows.map((row, rIndex) => ({
                // index: rIndex,
                // top: row.offsetTop,
                // height: row.offsetHeight
                // }));

                // layout.push({
                // tableIndex: tIndex,
                // tableTop: table.offsetTop,
                // tableHeight: table.offsetHeight,
                // theadHeight: thead ? thead.offsetHeight : 0,
                // rows: rowMeta
                // });
                // });
                //const pageHtml = page.get('component'); 
                // Get the component HTML of the page 
                allPagesHtml.push({
                    pageName: page.get('name'),
                    html: htmlPage,
                    css: cssPage,
                    // sections: sections,
                    // layout: layout
                });
            });

            // if (allPagesHtml.length > 1) {
            //  //   debugger;
            //     addPageNumbers(allPagesHtml);
            // }
            return allPagesHtml;
        }


        // Function to replace placeholders dynamically 
        function replacePlaceholders(content, pageData) {
            let replacedContent = content;
            for (const [key, value] of Object.entries(pageData)) {
                const placeholder = `{${key}}`;
                replacedContent = replacedContent.replace(new RegExp(placeholder, 'g'), value);
            }
            return replacedContent;
        }
    </script>
    <script>
        function updatePreview() {

            //console.log(getPagesHeights());

            //     let formData = new FormData(document.getElementById('offer-form'));

            //     fetch('{{ route('offers.preview') }}', {
            //     method: 'POST',
            //     headers: { 'X-CSRF-TOKEN': document.querySelector('input[name=_token]').value },
            //     data: {
            //             _token: '{{ csrf_token() }}',
            //             content: getAllPagesHtml()
            //         },
            // })
            // .then(response => response.blob())
            // .then(blob => {
            //     const url = URL.createObjectURL(blob);
            //     document.getElementById('pdfPreview').src = url;
            // });
            // $.ajax({
            //     url: "{{ route('offers.preview') }}",
            //     type: "POST",
            //     data: {
            //         _token: '{{ csrf_token() }}',
            //         content: getAllPagesHtml()
            //     },
            //     success: function(response) {
            //         $('#pdfPreview').attr('src', 'data:application/pdf;base64,' + response.pdf);
            //     }
            // });
        }



        // When "Update Live Preview" button is clicked
        $('#updatePreview').on('click', function() {
            updatePreview();
        });

        // Listen for changes in template or hotel select
        $('#templateSelect, #hotelSelect').on('change', function() {
            var templateId = $('#templateSelect').val();
            var hotelId = $('#hotelSelect').val();
            if (templateId && hotelId) {
                $.ajax({
                    url: "{{ route('templates.load') }}",
                    type: 'GET',
                    data: {
                        template_id: templateId,
                        hotel_id: hotelId
                    },
                    dataType: 'json',
                    success: function(response) {
                        // Load the returned content into GrapesJS editor:
                        const defaultPage = editor.Pages.getAll()[0];
                        const mainComponent = defaultPage.getMainComponent();
                        mainComponent.components([]);
                        mainComponent.append({
                            tagName: "div",
                            locked: true,
                            editable: false,
                            selectable: false,
                            copyable: false,
                            components: response.content,
                            attributes: {
                                class: "page"
                            },
                        });


                        let assets = response.images.map(image => ({
                            src: `/storage/${image.path}`,
                            type: 'image',
                            height: 350,
                            width: 250,
                            name: image.title
                        }));
                        console.log({
                            assets
                        });
                        editor.AssetManager.add(assets);
                        // defaultPage.setComponents(response.content);
                        updatePreview();
                    },
                    error: function() {
                        alert('Error loading template with hotel data.');
                    }
                });
            }
        });

        // Validate Form Using Bootstrap Validation
        function validateForm() {
            const form = document.getElementById('offer-form');
            const templateSelect = document.getElementById('template_type');


            form.classList.add('was-validated');
            console.log("templateSelect", templateSelect.value);

            // if (templateSelect.value === 'multiple') {
            //  //   document.querySelectorAll('#multiple_hotels_table tbody tr').forEach(row => checkRowValidation(row));
            // }

            return form.checkValidity();
        }



        //function saveOffer() {
        $('#offer-form').submit(function(e) {
            e.preventDefault();
              isGjsImageValid(editor, 'template-feature-image').then(result => {
           if (!result.valid) {
                alert(result.message);
                return false;
            }
            console.log("validate", validateForm());
            if (!validateForm()) return; // Prevent saving if validation fails
            let offerData = {
                offer_title: document.getElementById("offer_title").value,
                hotel_id: document.getElementById("template_type").value === 'single' ? document.getElementById(
                    "hotelSelect").value : null,
                template_type: document.getElementById("template_type").value,
                template_fields: document.getElementById("template_type").value === 'single' ? JSON.stringify(
                    gatherSingleHotelData()) : JSON.stringify(gatherMultipleHotelsData()),
                offer_details: getAllPagesHtml(), // Get multiple pages from GrapesJS
                _token: "{{ csrf_token() }}"
            };

            console.log("offerData", getAllPagesHtml());
            // return false;

            fetch("{{ route('offers.update', $offer->id ?? 0) }}", {
                    method: "PUT",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify(offerData)
                })
                .then(response => response.json())
                .then(data => {
                    alert(data.message);
                    // window.location.href = "./offers";
                    window.location.href = "{{ route('offers.index') }}";
                })
                .catch(error => console.error("Error:", error));
        });
    });
        // }

        // On form submission, save the editor content into the hidden textarea
        // $('#offerForm').on('submit', function(){
        //     var offerContent = editor.getHtml() + '<style>' + editor.getCss() + '</style>';
        //     $('#offerContent').val(offerContent);
        // });
    </script>
    <script>
        // Function to parse a currency string to float (removing commas)
        function parseCurrency(text) {
            return parseFloat(text.replace(/,/g, ''));
        }

        // Function to format a number as currency with 2 decimals and comma separators
        function formatCurrency(num) {
            return num.toLocaleString(undefined, {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            });
        }

        function addPageNumbers(pages) {
            pages.forEach((page, index) => {
                const pageNumber = index + 1;
                const totalPages = pages.length;

                if (totalPages > 1) {
                    const pageNumberHtmlWithFooter = `<div class="pdf-page-no">
                Page ${pageNumber} of ${totalPages}
            </div>`;
                    const pageNumberHtml = `<div class="page-no-absolute">
                Page ${pageNumber} of ${totalPages}
            </div>`;

                    page.html = page.html.replace(/<div class="page-number[^>]*>.*?<\/div>/gis, '');

                    // Check if the page has a footer
                    const hasFooter = page.html.match(/<footer[^>]*>(.*?)<\/footer>/is);

                    if (hasFooter) {
                        // Add page number at the top of the existing footer
                        page.html = page.html.replace(
                            /<footer[^>]*>/i,
                            `<footer>${pageNumberHtmlWithFooter}</div>`
                        );
                    } else {
                        // Add page number directly to the bottom of the page
                        const bodyMatch = page.html.match(/<body[^>]*>(.*?)<\/body>/is);
                        if (bodyMatch) {
                            const bodyContent = bodyMatch[1] + pageNumberHtml;
                            page.html = page.html.replace(bodyMatch[1], bodyContent);
                        } else {
                            page.html += pageNumberHtml;
                        }
                    }
                }
            });
        }
    </script>
    <script src="{{ asset('tinymce/tinymce.min.js') }}"></script>
    <script>
        function initializeTinyMce(selectors) {
            tinymce.init({
                license_key: 'gpl',
                selector: selectors,
                menubar: false,
                plugins: 'lists link image table pagebreak',
                toolbar: 'undo redo | formatselect | fontsize  | bold italic underline forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat pagebreak',
                fontsize_formats: "8pt 10pt 12pt 14pt 16pt 18pt 24pt 36pt",
                formats: {
                    bold: {
                        inline: 'b',
                        remove: 'all'
                    },
                },
                //content_style: `body { font-family:'GraphikRegular', sans-serif; }`,
                height: 300,
                pagebreak_separator: '<!-- pagebreak -->',
                setup: function(editor) {
                    editor.on('change', function() {
                        updateGrapesJSContent();
                    });
                    editor.on('keyup', function() {
                        updateGrapesJSContent();
                    });
                }
            });
        }
    </script>
    <script>
        initializeTinyMce(
            "#section_description, #general_conditions, #multi_section_description, #multi_general_conditions");

        $('.section-block').each(function() {
            const title = $(this).find('input[name="section_title[]"]').val();
            const textareaId = $(this).find('textarea').attr('id');
            initializeTinyMce("#" + textareaId);
        });

        function toggleTemplateInputs() {
            const template = document.getElementById('template_type').value;
            const templateFormArea = document.getElementById('templateFormArea');
            feature_image_changed = false;


            if (!template) {
                templateFormArea.innerHTML = '';
                return;
            }

            let templateUrl = "{{ route('offers.loadTemplate', ':template') }}";
            templateUrl = templateUrl.replace(':template', template);
            fetch(templateUrl)
                .then(response => response.text())
                .then(html => {
                    templateFormArea.innerHTML = html;
                    $('#hotelSelect').select2();
                    tinymce.remove();
                    initializeTinyMce(
                        "#section_description, #general_conditions, #multi_section_description, #multi_general_conditions"
                    );
                    document.getElementById('offerForm').classList.remove('was-validated');

                })
                .catch(error => console.error('Error loading form:', error));

        }


        function gatherTableData(option) {
            const rows = document.querySelectorAll(`#${option}_table tbody tr`);
            const tableData = [];

            rows.forEach(row => {
                tableData.push({
                    category: row.querySelector('.room-category').value,
                    subtext: row.querySelector('.room-subtext') ? row.querySelector('.room-subtext').value :
                        '',
                    rate: row.querySelector('.room-rate') ? row.querySelector('.room-rate').value : null,
                    total_rate: row.querySelector('.room-total-rate') ? row.querySelector(
                        '.room-total-rate').value : null,
                    room_count: row.querySelector('.room-count') ? row.querySelector('.room-count').value :
                        null,
                    price_per_night: row.querySelector('.room-price') ? row.querySelector('.room-price')
                        .value : null,
                    price_total_stay: row.querySelector('.room-total-stay') ? row.querySelector(
                        '.room-total-stay').value : null,
                    total_price: row.querySelector('.room-total-price') ? row.querySelector(
                        '.room-total-price').value : null
                });
            });

            return tableData;
        }

        // document.querySelectorAll('input, select, textarea').forEach(element => {
        //     element.addEventListener('blur', updateGrapesJSContent);
        //     element.addEventListener('change', updateGrapesJSContent);
        // });

        document.addEventListener("DOMContentLoaded", function() {
            document.addEventListener("input", function(event) {
                if (event.target.matches("input, select, textarea") && event.target.type !== "file") {
                    updateGrapesJSContent();
                }
            });
        });

        function updateGrapesJSContent() {
            const templateType = document.getElementById('template_type').value;
            const offerData = templateType === 'single' ? gatherSingleHotelData() : gatherMultipleHotelsData();
            const featureImgComp = editor.Components.getWrapper().find('#template-feature-image')[0];
            const currentFeatureImg = featureImgComp ? featureImgComp.get('src') : '';
            const pages = editor.Pages.getAll(); // Get all pages in GrapesJS
            const totalPages = pages.length;

            fetch("{{ route('offers.updateGjs') }}", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"
                    },
                    body: JSON.stringify({
                        offer_data: offerData,
                        template_type: templateType,
                        total_pages: totalPages,
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.htmlContent) {
                        //alert(data.htmlContent);

                        const defaultPage = editor.Pages.getAll()[0];
                        const mainComponent = defaultPage.getMainComponent();
                        mainComponent.components([]);
                        mainComponent.append({
                            tagName: "div",
                            components: data.htmlContent,
                            attributes: {
                                class: "page"
                            },
                        });

                        // setTimeout(() => {
                        if (feature_image_changed) {
                            const newFeatureImgComp = editor.Components.getWrapper().find('#template-feature-image')[0];
                            if (newFeatureImgComp && currentFeatureImg) {
                                newFeatureImgComp.set('src', currentFeatureImg);
                            }
                        }

                        setTimeout(() => {

                            const frameEl = editor.Canvas.getFrameEl();
                            const doc = frameEl?.contentDocument || frameEl?.contentWindow?.document;

                            if (doc) {
                                const pageEl = doc.querySelector('.page'); // Adjust selector
                                console.log(pageEl, "pageEltable")
                                const billingDetails = pageEl?.querySelector('.billing-details');
                                const table = billingDetails?.querySelector('table');

                                if (table) {
                                    // Now you can work with the table
                                    console.log('Found table:', table);
                                    syncLiHeightsInTable(table);
                                }
                            }


                        }, 0);
                        // }, 0); // Delay to ensure content loads before restoring image

                    }
                })
                .catch(error => console.error('Error updating GrapesJS content:', error));
        }

        function formatDecimal(input) {
            if (input.value) {
                input.value = parseFloat(input.value).toFixed(2);
            }
        }

        function attachEventListenersToRows(table) {
            table.querySelectorAll('input, select, textarea').forEach(input => {
                input.addEventListener('blur', updateGrapesJSContent);
                // input.addEventListener('change', updateGrapesJSContent);
            });
        }

        function checkRowValidation(row) {
            const checkins = row.querySelectorAll('.room-category-checkin');
            const checkouts = row.querySelectorAll('.room-category-checkout');
            let isAnyCheckinFilled = false;
            let isAnyCheckoutFilled = false;

            checkins.forEach((input, index) => {
                if (index > 0 && input.value) {
                    isAnyCheckinFilled = true;
                }
            });

            checkouts.forEach((input, index) => {
                if (index > 0 && input.value) {
                    isAnyCheckoutFilled = true;
                }
            });

            // Make all Check-ins & Check-outs in that row mandatory if one is filled
            if (isAnyCheckinFilled || isAnyCheckoutFilled) {
                checkins.forEach((input, index) => {
                    if (index > 0) input.setAttribute('required', 'required');
                });
                checkouts.forEach((input, index) => {
                    if (index > 0) input.setAttribute('required', 'required');
                });
            } else {
                // If none are filled, make them optional again
                checkins.forEach((input, index) => {
                    if (index > 0) input.removeAttribute('required');
                });
                checkouts.forEach((input, index) => {
                    if (index > 0) input.removeAttribute('required');
                });
            }
        }
    </script>
    <script>
        function makeFirstPageReadOnly() {
            const allPages = editor.Pages.getAll();
            if (allPages.length > 0) {
                const firstPage = allPages[0]; // Get the first page
                const components = firstPage.getMainComponent().components();

                components.each(component => {
                    // if (component.get('tagName') === 'img') {
                    //     component.set({ locked: false }); // Allow editing of the feature image
                    // } else {
                    component.set({
                        locked: true
                    }); // Make everything else non-editable
                    //}
                });
            }
        }

        // Trigger when GrapesJS loads or updates
        // editor.on('load', makeFirstPageReadOnly);
        // editor.on('component:add', makeFirstPageReadOnly);
        // editor.on('component:update', makeFirstPageReadOnly);
        // editor.on('page:change', makeFirstPageReadOnly); // Apply when pages are switched
        editor.on('component:update', (model) => {
            if (model.is('image') && model.getId() === 'template-feature-image') {
                console.log("Template feature image changed:", model.get('src'));
                feature_image_changed = true;
            }
        });
    </script>

    <script>
        $(document).ready(function() {
            // Fetch cities based on selected country
            $('#hotelSelect').select2();
            $('#hotel_country').change(function() {
                let countryId = $(this).val();
                var citySelect = $('#hotel_city');
                citySelect.html('<option value="">Loading...</option>');
                if (countryId) {
                    let citiesUrl = "{{ route('cities-by-country', ':countryId') }}";
                    citiesUrl = citiesUrl.replace(':countryId', countryId);
                    $.ajax({
                        url: citiesUrl,
                        type: 'GET',
                        success: function(data) {
                            citySelect.html('<option value="">Select City</option>');
                            $.each(data, function(key, city) {
                                citySelect.append('<option value="' + city.id + '">' +
                                    city.name + '</option>');
                            });
                        }
                    });
                } else {
                    $('#hotel_city').html('<option value="">Select City</option>');
                }
            });
            console.log('jQuery Version:', jQuery.fn.jquery);
            console.log('Bootstrap Modal Function:', typeof $.fn.modal);
            // Handle Hotel Form Submission
            $('#createHotelForm').submit(function(e) {
                e.preventDefault();
                let formData = new FormData(this);

                $.ajax({
                    url: "{{ route('hotels.store') }}",
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        if (response.success) {
                            // Close the modal
                            $('#addHotelModal .close').click();
                            // Add the new hotel to the dropdown
                            $('#hotelSelect').append(
                                `<option value="${response.hotel.id}" selected data-hotel='${JSON.stringify(response.hotel)}'>${response.hotel.name}</option>`
                            );

                            $('#hotelSelect').trigger('change');

                            // Clear the form inputs
                            $('#createHotelForm')[0].reset();
                            updateGrapesJSContent();
                        }
                    },
                    error: function(xhr) {
                        alert('Error: ' + xhr.responseText);
                    }
                });
            });
        });
    </script>
    <script>
        function toggleTableOptions() {
            const selectedOption = document.getElementById('table_option').value;
            document.getElementById('table_option1').style.display = selectedOption === 'option1' ? 'block' : 'none';
            document.getElementById('table_option2').style.display = selectedOption === 'option2' ? 'block' : 'none';
        }

        function addRow(option) {
            const table = document.getElementById(`${option}_table`).querySelector('tbody');
            const rowCount = table.rows.length + 1;

            let rowHtml = '';
            if (option === 'option1') {
                rowHtml = `
            <tr>
                <td><input type="text" class="room-category form-control"  required><input type="text" class="room-subtext form-control" placeholder="Subtext (Optional)" maxlength="30"></td>
                <td><input type="text" class="room-rate form-control" oninput="calculateOption1Total(this)" onblur="formatDecimal(this)"  required></td>
                <td><input type="text" class="room-total-rate form-control" oninput="reverseCalculateOption1(this)" onblur="formatDecimal(this)"  required>
                <td><button type="button" class="btn btn-sm btn-danger tbl-button" onclick="deleteRow(this)"><i class="fas fa-fw fa-remove"></i></button><br><button type="button" class="btn btn-sm btn-primary  tbl-button" onclick="duplicateRow(this)"><i class="fas fa-fw fa-copy"></i></button></td>
            </tr>
        `;
            } else {
                rowHtml = `
            <tr>
                <td><input type="text" class="room-category form-control"  required><input type="text" class="room-subtext form-control" placeholder="Subtext (Optional)" maxlength="30"></td>
                <td><input type="text" class="room-count form-control" style="width:40px" oninput="calculateOption2Total(this)"  required></td>
                <td><input type="text" class="room-price form-control" oninput="calculateOption2Total(this)" onblur="formatDecimal(this)"  required></td>
                <td><input type="text" class="room-total-stay form-control" oninput="reverseCalculateOption2ForTotalStayPrice(this)" onblur="formatDecimal(this)"  required></td>
                <td><input type="text" class="room-total-price form-control" oninput="reverseCalculateOption2ForTotalPrice(this)" onblur="formatDecimal(this)"  required></td>
                <td><button type="button" class="btn btn-sm btn-danger tbl-button" onclick="deleteRow(this)"><i class="fas fa-fw fa-remove"></i></button><br><button type="button" class="btn btn-sm btn-primary  tbl-button" onclick="duplicateRow(this)"><i class="fas fa-fw fa-copy"></i></button></td>
            </tr>
        `;
            }
            table.insertAdjacentHTML('beforeend', rowHtml);
            attachEventListenersToRows(table);
        }



        function deleteRow(button) {
            const row = button.closest('tr');
            row.remove();
            calculateGrandTotal();
        }

        function duplicateRow(button) {
            let currentRow = $(button).closest('tr');
            let clonedRow = currentRow.clone();
            let templateType = document.getElementById("template_type").value;

            clonedRow.insertAfter(currentRow);
            attachEventListenersToRows(button.closest('table'));
            if (templateType === "single") {
                calculateGrandTotal();
            } else {
                calculateMultipleHotelsTotal();
            }
        }

        function calculateOption1Total(input) {
            const row = input.closest('tr');
            const rate = parseFloat(row.querySelector('.room-rate').value) || 0;
            const totalStay = parseInt(document.getElementById('total_stay').value) || 1;
            const totalRate = rate * totalStay;

            row.querySelector('.room-total-rate').value = parseFloat(totalRate).toFixed(2);
            calculateGrandTotal();
        }

        function calculateOption2Total(input) {
            const row = input.closest('tr');
            const pricePerNight = parseFloat(row.querySelector('.room-price').value) || 0;
            const roomCount = parseInt(row.querySelector('.room-count').value) || 0;
            const totalStay = parseInt(document.getElementById('total_stay').value) || 1;

            const totalStayPrice = pricePerNight * totalStay;
            const totalPrice = totalStayPrice * roomCount;

            row.querySelector('.room-total-stay').value = parseFloat(totalStayPrice).toFixed(2);
            row.querySelector('.room-total-price').value = parseFloat(totalPrice).toFixed(2);

            calculateGrandTotal();
        }

        function reverseCalculateOption1(input) {
            const row = input.closest('tr');
            const totalRate = parseFloat(input.value) || 0;
            const totalStay = parseInt(document.getElementById('total_stay').value) || 1;
            const rate = totalStay > 0 ? totalRate / totalStay : 0;

            row.querySelector('.room-rate').value = parseFloat(rate).toFixed(2);
            calculateGrandTotal();
        }

        function reverseCalculateOption2ForTotalStayPrice(input) {
            const row = input.closest('tr');
            const totalStayPrice = parseFloat(input.value) || 0;
            const roomCount = parseInt(row.querySelector('.room-count').value) || 1;
            const totalStay = parseInt(document.getElementById('total_stay').value) || 1;

            const pricePerNight = totalStayPrice / totalStay;
            const totalPrice = totalStayPrice * roomCount;

            row.querySelector('.room-price').value = pricePerNight.toFixed(2);
            row.querySelector('.room-total-price').value = parseFloat(totalPrice).toFixed(2);

            calculateGrandTotal();
        }


        function reverseCalculateOption2ForTotalPrice(input) {
            const row = input.closest('tr');
            const totalPrice = parseFloat(input.value) || 0;
            const roomCount = parseInt(row.querySelector('.room-count').value) || 1;
            const totalStay = parseInt(document.getElementById('total_stay').value) || 1;

            const totalStayPrice = totalPrice / roomCount;
            const pricePerNight = totalStayPrice / totalStay;

            row.querySelector('.room-price').value = pricePerNight.toFixed(2);
            row.querySelector('.room-total-stay').value = parseFloat(totalStayPrice).toFixed(2);

            calculateGrandTotal();
        }

        function calculateGrandTotal() {
            let grandTotal = 0;
            const selectedTable = document.getElementById('table_option').value;

            if (selectedTable === 'option1') {
                document.querySelectorAll('#option1_table .room-total-rate').forEach(input => {
                    grandTotal += parseFloat(input.value) || 0;
                });
                document.getElementById('option1_grand_total').innerText = grandTotal.toFixed(2);
            } else if (selectedTable === 'option2') {
                document.querySelectorAll('#option2_table .room-total-price').forEach(input => {
                    grandTotal += parseFloat(input.value) || 0;
                });
                document.getElementById('option2_grand_total').innerText = grandTotal.toFixed(2);
            }
        }

        function calculateTotalStay() {
            const checkInInput = document.getElementById('check_in_date');
            const checkOutInput = document.getElementById('check_out_date');
            const totalStayInput = document.getElementById('total_stay');

            if (!checkInInput.value || !checkOutInput.value) return;

            const checkInDate = new Date(checkInInput.value);
            const checkOutDate = new Date(checkOutInput.value);

            // Prevent check-in date from being in the past
            const today = new Date();
            today.setHours(0, 0, 0, 0);
            if (checkInDate < today) {
                alert("Check-in date cannot be in the past.");
                checkInInput.value = "";
                totalStayInput.value = "";
                return;
            }

            // Ensure check-out date is after check-in date
            if (checkOutDate <= checkInDate) {
                alert("Check-out date must be after the check-in date.");
                checkOutInput.value = "";
                totalStayInput.value = "";
                return;
            }

            // Calculate total stay in nights
            const totalStay = Math.round((checkOutDate - checkInDate) / (1000 * 60 * 60 * 24));
            totalStayInput.value = totalStay;

            updateTotalRatesOption1(totalStay);
            updateTotalRatesOption2(totalStay);
            calculateGrandTotal();
        }

        function updateTotalRatesOption1(totalStay) {
            document.querySelectorAll('#option1_table .room-rate').forEach(input => {
                const row = input.closest('tr');
                const totalRateInput = row.querySelector('.room-total-rate');

                if (input.value && totalRateInput) {
                    if (!totalRateInput.hasAttribute('manual')) { // Only calculate if not manually entered
                        const totalRate = parseFloat(input.value) * totalStay;
                        totalRateInput.value = totalRate.toFixed(2);
                    }
                }
            });

            updateGrapesJSContent();
        }

        function updateTotalRatesOption2(totalStay) {
            document.querySelectorAll('#option2_table .room-price').forEach(input => {
                const row = input.closest('tr');
                const totalStayPriceInput = row.querySelector('.room-total-stay');
                const totalPriceInput = row.querySelector('.room-total-price');
                const roomCount = row.querySelector('.room-count').value;

                if (input.value && totalStayPriceInput) {
                    const totalStayPrice = parseFloat(input.value) * totalStay;
                    totalStayPriceInput.value = totalStayPrice.toFixed(2);

                    if (roomCount) {
                        const totalPrice = totalStayPrice * parseInt(roomCount);
                        totalPriceInput.value = totalPrice.toFixed(2);
                    }
                }
            });

            updateGrapesJSContent();
        }

        // function calculateGrandTotal() {
        //     let grandTotal1 = 0;

        //     // Calculate for Option 1
        //     document.querySelectorAll('#option1_table .room-total-rate').forEach(input => {
        //         grandTotal1 += parseFloat(input.value) || 0;
        //     });
        //     document.getElementById('option1_grand_total').innerText = grandTotal1.toFixed(2);


        //     // Calculate for Option 2
        //     let grandTotal2 = 0;

        //     document.querySelectorAll('#option2_table .room-total-price').forEach(input => {
        //         grandTotal2 += parseFloat(input.value) || 0;
        //     });
        //     document.getElementById('option2_grand_total').innerText = grandTotal2.toFixed(2);


        //     updateGrapesJSContent();
        // }



        function gatherRoomsData(type) {
            const rooms = [];
            document.querySelectorAll(`.${type}_room_row`).forEach(row => {
                rooms.push({
                    category: row.querySelector('.room-category').value,
                    subtext: row.querySelector('.room-subtext').value,
                    rate: row.querySelector('.room-rate') ? row.querySelector('.room-rate').value : null,
                    total_rate: row.querySelector('.room-total-rate') ? row.querySelector(
                        '.room-total-rate').value : null,
                    room_count: row.querySelector('.room-count') ? row.querySelector('.room-count').value :
                        null,
                    price_per_night: row.querySelector('.room-price') ? row.querySelector('.room-price')
                        .value : null,
                    price_total_stay: row.querySelector('.room-total-stay') ? row.querySelector(
                        '.room-total-stay').value : null,
                    total_price: row.querySelector('.room-total-price') ? row.querySelector(
                        '.room-total-price').value : null
                });
            });
            return rooms;
        }

        function gatherSingleHotelData() {
            const data = {
                offer_title: document.getElementById('offer_title').value,
                hotel_id: document.getElementById('hotelSelect').value,
                hotel_name: document.getElementById('hotel_name').value,
                location: document.getElementById('location').value,
                check_in_date: document.getElementById('check_in_date').value,
                check_out_date: document.getElementById('check_out_date').value,
                total_stay: document.getElementById('total_stay').value,
                number_of_guests: document.getElementById('number_of_guests').value,
                currency: document.getElementById('currency').value,
                table_option: document.getElementById('table_option').value,
                // section_title: document.getElementById('section_title').value,
                // section_description: tinymce.get('section_description') ? tinymce.get('section_description').getContent() : '',
                sections: [],
                general_conditions: tinymce.get('general_conditions') ? tinymce.get('general_conditions').getContent() :
                    '',
                table_option1: gatherTableData('option1'),
                table_option2: gatherTableData('option2'),
                show_grand_total: document.getElementById('show_grand_total').checked,
                grand_total_sub_text: document.getElementById('grand_total_sub_text').value,
                grand_total: document.getElementById('table_option').value === "option1" ?
                    document.getElementById('option1_grand_total').innerText : document.getElementById(
                        'option2_grand_total').innerText,
            };

            $('.section-block').each(function() {
                const title = $(this).find('input[name="section_title[]"]').val();
                const textareaId = $(this).find('textarea').attr('id');
                const description = tinymce.get(textareaId)?.getContent() || '';
                if (title && description) {
                    data.sections.push({
                        title: title,
                        description: description
                    });
                }
            });

            return data;
        }

        function loadHotelImages(hotelId) {
            if (!hotelId) return;

            $.ajax({
                url: `/hotel-images/${hotelId}`,
                type: 'GET',
                success: function(images) {
                    const assetManager = editor.AssetManager;

                    // Clear previous assets
                    assetManager.getAll().reset();

                    // Add new hotel images
                    images.forEach(image => {
                        assetManager.add({
                            src: image.url,
                            name: image.name,
                            type: 'image',
                        });
                    });

                    // Optional: open asset manager
                    // editor.run('open-assets');
                }
            });
        }

        function fetchHotelDetails() {
            const hotelSelect = document.getElementById('hotelSelect');
            const selectedOption = hotelSelect.options[hotelSelect.selectedIndex];
            const hotelId = hotelSelect.value;
            feature_image_changed = false;

            if (hotelId) {
                const hotel = JSON.parse(selectedOption.getAttribute('data-hotel'));

                document.getElementById('hotel_name').value = hotel.name;
                document.getElementById('location').value = hotel.location;
                loadHotelImages(hotelId);
            }
            setTimeout(() => {
                updateGrapesJSContent();
            }, 500);
        }

        function toggleTableOptions() {
            const selectedOption = document.getElementById('table_option').value || 'option1'; // Default to option1
            document.getElementById('table_option1').style.display = selectedOption === 'option1' ? 'block' : 'none';
            document.getElementById('table_option2').style.display = selectedOption === 'option2' ? 'block' : 'none';
        }
    </script>


    <script>
        // function addRowMultipleHotels() {
        //     const table = document.getElementById('multiple_hotels_table').querySelector('tbody');
        //     const rowCount = table.rows.length + 1;

        //     const rowHtml = `
    //     <tr>
    //         <td><input type="text" class="hotel-name form-control" required maxlength="30" style="width:120px;"></td>
    //         <td>
    //             <div class="room-categories">
    //                <div class="d-flex align-items-center mb-1">
    //                 <input type="text" class="room-category form-control me-2" maxlength="35" style="width:120px;" placeholder="Room Category" required>
    //                 &nbsp;<button type="button" class="btn btn-sm btn-success" onclick="addRoomCategory(this)">+</button>
    //                 </div>
    //                 </div>
    //         </td>
    //         <td class="room-checkin-dates"><input type="date" style="width:135px;" class="room-category-checkin form-control mb-1"></td>
    //         <td class="room-checkout-dates"><input type="date"  style="width:135px;" class="room-category-checkout form-control mb-1"></td>
    //         <td class="total-rates"><input type="text" style="width:120px;" class="total-rate form-control mb-1" placeholder='Total Rate' oninput="calculateMultipleHotelsTotal()" onblur="formatDecimal(this)"></td>
    //         <td><button type="button" class="btn btn-sm btn-danger tbl-button" onclick="deleteRowMultipleHotels(this)"><i class="fas fa-fw fa-remove"></i></button><br><button type="button" class="btn btn-sm btn-primary  tbl-button" onclick="duplicateRow(this)"><i class="fas fa-fw fa-copy"></i></button></td>
    //     </tr>
    // `;
        //     table.insertAdjacentHTML('beforeend', rowHtml);
        //     attachEventListenersToRows(table);

        // }



        // function addRoomCategory(button) {
        //     const table = document.getElementById('multiple_hotels_table').querySelector('tbody');

        //     const categoryContainer = button.closest('.room-categories');
        //     const roomCategoryGroup = document.createElement('div');
        //     const row = button.closest('tr'); // Get the current row
        //     const totalRateContainer = row.querySelector('.total-rates');
        //     // Unique ID for mapping Total Rate field
        //     const uniqueId = 'rate-' + Date.now();

        //     roomCategoryGroup.classList.add('room-category-group', 'd-flex', 'align-items-center', 'mb-1');
        //     roomCategoryGroup.innerHTML =
        //         `
    //     <input type="text" class="room-category form-control me-2" placeholder="Room Category" required maxlength="30" style="width:120px;">
    //     &nbsp;<button type="button" class="btn btn-sm btn-danger" onclick="removeRoomCategory(this, '${uniqueId}')">×</button>`;
        //     categoryContainer.appendChild(roomCategoryGroup);

        //     // Create Total Rate Input
        //     const totalRateInput = document.createElement('input');
        //     totalRateInput.type = 'text';
        //     totalRateInput.classList.add('form-control', 'total-rate', 'mb-1');
        //     totalRateInput.setAttribute('placeholder', 'Total Rate');
        //     totalRateInput.setAttribute('step', '0.01');
        //     totalRateInput.setAttribute('oninput', 'calculateMultipleHotelsTotal()');
        //     totalRateInput.setAttribute('onblur', 'formatDecimal(this)');
        //     totalRateInput.setAttribute('maxlength', '30');
        //     totalRateInput.setAttribute('style', '');


        //     totalRateInput.id = uniqueId; // Assign unique ID

        //     totalRateContainer.appendChild(totalRateInput);
        //     // updateTotalRateFields(categoryContainer);
        //     attachEventListenersToRows(table);

        // }



        function removeRoomCategory(button, uniqueId) {
            button.closest('.room-category-group').remove();
            const totalRateField = document.getElementById(uniqueId);
            const checkInField = document.getElementById("check-in-" + uniqueId);
            const checkOutField = document.getElementById("check-out-" + uniqueId);


            if (totalRateField) {
                totalRateField.remove(); // Remove corresponding Total Rate field
            }
            if (checkInField) {
                checkInField.remove();
            }

            if (checkOutField) {
                checkOutField.remove();
            }

            calculateMultipleHotelsTotal();


        }


        function updateTotalRateFields(categoryContainer) {
            const totalRatesContainer = categoryContainer.closest('tr').querySelector('.total-rates');
            const categoryCount = categoryContainer.querySelectorAll('.room-category').length;

            totalRatesContainer.innerHTML = '';
            for (let i = 0; i < categoryCount; i++) {
                totalRatesContainer.innerHTML += `
            <input type="number" class="total-rate form-control mb-1" oninput="calculateMultipleHotelsTotal()" placeholder="Total Rate">
        `;
            }

            calculateMultipleHotelsTotal();
        }

        function deleteRowMultipleHotels(button) {
            const row = button.closest('tr');
            row.remove();
            calculateMultipleHotelsTotal();
        }

        function calculateMultipleHotelsTotal() {
            let grandTotal = 0;

            document.querySelectorAll('#multiple_hotels_table .total-rate').forEach(input => {
                grandTotal += parseFloat(input.value) || 0;
            });

            document.getElementById('multiple_hotels_grand_total').innerText = parseFloat(grandTotal).toFixed(2);
        }

        function calculateTotalStayMultiple() {
            const checkInInput = document.getElementById('multi_check_in_date');
            const checkOutInput = document.getElementById('multi_check_out_date');
            const totalStayInput = document.getElementById('multi_total_stay');

            if (!checkInInput.value || !checkOutInput.value) return;

            const checkInDate = new Date(checkInInput.value);
            const checkOutDate = new Date(checkOutInput.value);

            // Prevent check-in date from being in the past
            const today = new Date();
            today.setHours(0, 0, 0, 0);
            if (checkInDate < today) {
                alert("Check-in date cannot be in the past.");
                checkInInput.value = "";
                totalStayInput.value = "";
                return;
            }

            // Ensure check-out date is after check-in date
            if (checkOutDate <= checkInDate) {
                alert("Check-out date must be after the check-in date.");
                checkOutInput.value = "";
                totalStayInput.value = "";
                return;
            }

            // Calculate total stay in nights
            const totalStay = Math.round((checkOutDate - checkInDate) / (1000 * 60 * 60 * 24));
            totalStayInput.value = totalStay;
        }


        function gatherMultipleHotelsData() {
            const rooms = [];
            document.querySelectorAll('#multiple_hotels_table tbody tr').forEach(row => {
                const categories = [];
                row.querySelectorAll('.room-category').forEach(category => categories.push(category.value));

                const rates = [];
                row.querySelectorAll('.total-rate').forEach(rate => rates.push(rate.value));

                const checkinDates = [];
                row.querySelectorAll('.room-category-checkin').forEach(checkinInput => {
                    checkinDates.push(checkinInput.value || null);
                });

                const checkoutDates = [];
                row.querySelectorAll('.room-category-checkout').forEach(checkoutInput => {
                    checkoutDates.push(checkoutInput.value || null);
                });

                rooms.push({
                    hotel: row.querySelector('.hotel-name').value,
                    categories: categories,
                    checkin_dates: checkinDates,
                    checkout_dates: checkoutDates,
                    total_rates: rates
                });
            });

            const sections = [];

            $('.section-block').each(function() {
                const title = $(this).find('input[name="section_title[]"]').val();
                const textareaId = $(this).find('textarea').attr('id');
                const description = tinymce.get(textareaId)?.getContent() || '';
                if (title && description) {
                    sections.push({
                        title: title,
                        description: description
                    });
                }
            });

            return {
                location: document.getElementById('multi_location').value,
                offer_date: document.getElementById('offer_date').value,
                check_in_date: document.getElementById('multi_check_in_date').value,
                check_out_date: document.getElementById('multi_check_out_date').value,
                total_stay: document.getElementById('multi_total_stay').value,
                number_of_guests: document.getElementById('multi_number_of_guests').value,
                currency: document.getElementById('multi_currency').value,
                rooms: rooms,
                show_grand_total: document.getElementById('show_grand_total_multiple').checked,
                grand_total: document.getElementById('multiple_hotels_grand_total').innerText,
                grand_total_sub_text: document.getElementById('grand_total_sub_text').value,
                sections: sections,
                //section_title: document.getElementById('multi_section_title').value,
                //section_description: tinymce.get('multi_section_description') ? tinymce.get('multi_section_description')
                //    .getContent() : '',
                general_conditions: tinymce.get('multi_general_conditions') ? tinymce.get('multi_general_conditions')
                    .getContent() : ''
            };
        }

        function getPagesHeights() {
            // Assuming each page is in an iframe with a class or id you can select
            const iframes = document.querySelectorAll('.gjs-frame');
            const heights = Array.from(iframes).map(iframe => {
                const iframeBody = iframe.contentDocument.body;
                return iframeBody ? iframeBody.offsetHeight : 0;
            });
            return heights;
        }
    </script>
    <script>
        $(document).ready(function() {
            // Load cities when typing

            loadHotelImages($('#hotelSelect').val());
            $('#city').on('keyup', function() {
                var query = $(this).val();
                var countryId = $('#hotel_country').val();

                if (query.length >= 2 && countryId) {
                    $.ajax({
                        url: "{{ route('cities.autocomplete') }}",
                        data: {
                            query: query,
                            country_id: countryId
                        },
                        success: function(data) {
                            var dropdown = $('#cityList');
                            dropdown.empty();

                            if (data.length > 0) {
                                data.forEach(function(city) {
                                    dropdown.append(
                                        '<a class="dropdown-item city-item" href="#">' +
                                        city + '</a>');
                                });
                                dropdown.show();
                            } else {
                                dropdown.hide();
                            }
                        }
                    });
                } else {
                    $('#cityList').hide();
                }
            });

            // Select city from dropdown
            $(document).on('click', '.city-item', function(e) {
                e.preventDefault();
                $('#city').val($(this).text());
                $('#cityList').hide();
            });

            // Hide dropdown when clicking outside
            $(document).click(function(event) {
                if (!$(event.target).closest('#cityList, #city').length) {
                    $('#cityList').hide();
                }
            });
        });
    </script>
    <script>
        let sectionCount = document.querySelectorAll('#sectionsContainer .section-block').length || 1;
        let sectionNumber = document.querySelectorAll('#sectionsContainer .section-block').length || 1;
        const maxSections = 5;

        // Unified Add Section Function
        function addSection() {
            if (sectionCount >= maxSections) {
                alert("You can only add up to 5 sections.");
                return;
            }

            sectionCount++;
            sectionNumber++;
            const newIndex = sectionNumber;

            const sectionHTML = `
        <div class="section-block mb-3" data-index="${newIndex}">
            <label>Section Title</label>
            <input type="text" name="section_title[]"  id="section_title_${newIndex}" class="form-control mb-2">

            <label>Section Description</label>
            <textarea name="section_description[]" class="tinymce-editor" id="section_description_${newIndex}"></textarea>
            <div class="mt-2">
            <button type="button" class="btn btn-sm btn-danger remove-section">Remove Section</button>
        </div>
        </div>
    `;

            $('#sectionsContainer').append(sectionHTML);

            initializeTinyMce("#section_description_" + newIndex);
        }
        $(document).on('click', '.remove-section', function() {
            if ($('.section-block').length === 1) {
                alert("At least one section is required.");
                return;
            }

            const $section = $(this).closest('.section-block');
            const textareaId = $section.find('textarea').attr('id');

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

            $section.remove();
            sectionCount--;
            updateGrapesJSContent();
        });
    </script>
@endpush