@extends('layouts.app')

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

@section('content_header_title', 'Offers')
@section('content_header_subtitle', 'Create New Offer')

@section('content_body')


    <style>
        .gjs-cv-canvas {
            min-width: 612px;
            /* Letter size width in pixels */
            min-height: 1008px;
            /* Letter size height in pixels */
            overflow: hidden;
        }

        .gjs-frame {
            min-height: 1008px !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>
    <style>
        #pdf-container {
            width: 612px;
            min-height: 1008px;
            background: white;
            display: none;
            /* Hidden until needed */
        }
    </style>
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Create New Offer</h3>
            <div style="float: right">
                {{-- <button onclick="generatePDF()" class="btn btn-primary">Generate PDF</button> --}}
            </div>
        </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" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label>Select Template</label>
                                <select name="template_type" id="template_type" class="form-control"
                                    onchange="toggleTemplateInputs()" required>
                                    <option value="" selected>-- Select Template Type --</option>
                                    <option value="single">Single Hotel</option>
                                    <option value="multiple">Country + Multiple Hotels & Cities</option>
                                </select>

                            </div>
                        </div>
                        <!-- AJAX Loaded Form Area -->
                        <div id="templateFormArea"></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>
            {{-- <button onclick="exportMultiPagePDF()">Download Multi-Page PDF</button> --}}

            {{-- <div id="pdf-container"></div> <!-- Hidden div for PDF rendering --> --}}
            {{-- <hr> --}}
            {{-- <button onclick="generatePDF()">Generate PDF</button>
            <button onclick="updatePreview()">Print</button>
            <h3>Live PDF Preview</h3>
            <iframe id="pdfPreview" style="width:100%; height:600px;" frameborder="0"></iframe>
            <div id="preview"></div> --}}
        </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">
                        <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 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="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 -->

    <!-- <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>
    <link href="{{ asset('grapesjs/grapes.min.css') }}" rel="stylesheet">
    <script src="{{ asset('grapesjs/grapes.min.js') }}"></script>
    <link href="{{ asset('css/select2.min.css') }}" rel="stylesheet" />
    <script src="{{ asset('js/select2.min.js') }}"></script>
    <script src="{{ asset('js/offers.js') }}"></script>
    <link href="{{ asset('css/cropper.min.css') }}" rel="stylesheet" />
    <script src="{{ asset('js/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 = false;

        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,
            leftWidth: "10%",
            height: '100vh', // Fixed height for editor
            //  height: '1344px', // 18.67 inches in pixels (72 DPI)
            // width: '81rate6px', // 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: [{
                    id: 'page-id',
                    name: 'Page 1',
                    // styles: page1Styles, // or a JSON of styles 
                    component: '<div class="my-class"></div>',
                    // or a JSON of components
                }]
            }
        });

        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', () => {
                    console.log('Image loaded, initializing cropper...', cropWidth, cropHeight);
                    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', 1.0); // 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'
            }
        });



        //  console.log("getPanelsEl",getPanelsEl,getPanels);
        panelManager.removePanel('commands');
        //    panelManager.removePanel('options');
        //panelManager.removePanel('views');
        panelManager.removeButton('options', 'sw-visibility');
        panelManager.removeButton('options', 'export-template');
        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');
                }
            }
        });



        //  panelManager.removeButton('views', '"open-blocks"');

        // 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) {
            pm.remove(pageId);
            if (selectedPageId === pageId) {
                selectedPageId = null;
            }
            // Renumber remaining pages
            const allPages = pm.getAll();

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

                // Update GrapesJS page model
                page.set('id', newId);
                page.set('name', newName);
            });
            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');
            console.log("pageEls 1", pageEls);
            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 pageEl = pageEls[index];

                // if (!pageEl) {
                //     console.warn(`❌ Missing .page DOM element for index ${index}`);
                //     return;
                // }
                const component = page.getMainComponent();


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


                //             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
                });
            });
            return allPagesHtml;
        }
    </script>
    <script>
        //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() }}"
            };

            fetch("{{ route('offers.store') }}", {
                    method: "POST",
                    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));
        });
    });
        // }
    </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",
                //content_style: `body { font-family:'GraphikRegular', sans-serif; }`,
                height: 300,
                pagebreak_separator: '<!-- pagebreak -->',
                setup: function(tinymceEditor) {
                    tinymceEditor.on('change', function() {
                        updateGrapesJSContent();
                    });
                    tinymceEditor.on('keyup', function() {
                        updateGrapesJSContent();
                    });
                    if (tinymceEditor.id === 'general_conditions' || tinymceEditor.id ===
                        'multi_general_conditions') { // Apply default HTML only for general_conditions
                        tinymceEditor.on('init', function() {
                            if (tinymceEditor.getContent().trim() ===
                                "") { // Only set content if it's empty
                                tinymceEditor.setContent(`
			<div class='terms-conditions-section'>
				We are happy to gurantee those rates conditions for: 1 Day
			</div>
            <div class='terms-conditions-section'>
				Availabilities won't be guranteed, we invite you to ask for an option. If you  need to change your dates of stay, the rates may change or will not be available.
			</div>
			<p class='terms-conditions-para'>
				<span class="GraphikSemibold">
                <strong>Confirmation:</strong>
                </span>
				A deposit of 100% of the total amount of the stay is required upon booking to guranteed those rates.
			</p>
			<p class='terms-conditions-para'>
				<span class="GraphikSemibold">
            <strong>Cancellation policy: </strong>
                 </span>
				Non refundable.
			</p class='terms-conditions-para'>
			<p class='terms-conditions-para'>
				<span class="GraphikSemibold">
          <strong> Booking condition:</strong>
             </span>
				Non refundable.
			</p>
			<p class='terms-conditions-para'>
				<span class="GraphikSemibold">
          <strong>Condition Early Booking offer:</strong>
             </span>
				A deposit of 100% is required to confirm the reservation, the offer is non cancellable and non refundable
			</p>`);
                            }
                        });
                    }
                }
            });
        }
    </script>
    <script>
        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;
                    const defaultPage = editor.Pages.getAll()[0];
                    const mainComponent = defaultPage.getMainComponent();
                    mainComponent.components([]);
                    mainComponent.append({
                        tagName: "div",
                        components: '',
                        attributes: {
                            class: "page",
                            selectable: false
                        },
                    });

                    $('#hotelSelect').select2();
                    tinymce.remove();
                    initializeTinyMce(
                        "#section_description_1, #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.addEventListener("DOMContentLoaded", function() {
            document.addEventListener("input", function(event) {
                // Exclude file inputs explicitly

                if (event.target.matches("input, select, textarea") && event.target.type !== "file") {
                    updateGrapesJSContent();
                }
            });
        });
        // document.querySelectorAll('input, select, textarea').forEach(element => {
        //     element.addEventListener('blur', updateGrapesJSContent);
        //     element.addEventListener('change', updateGrapesJSContent);
        //     element.addEventListener('input', updateGrapesJSContent);

        // });

        function updateGrapesJSContent() {
            const templateType = document.getElementById('template_type').value;
            const featureImgComp = editor.Components.getWrapper().find('#template-feature-image')[0];
            const currentFeatureImg = featureImgComp ? featureImgComp.get('src') : '';


            const offerData = templateType === 'single' ? gatherSingleHotelData() : gatherMultipleHotelsData();
            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",
                                selectable: false
                            },
                        });
                        //    setTimeout(() => {
                        if (feature_image_changed) {
                            const newFeatureImgComp = editor.Components.getWrapper().find('#template-feature-image')[0];
                            if (newFeatureImgComp && currentFeatureImg) {
                                newFeatureImgComp.set('src', currentFeatureImg);
                            }
                        }




                        // setTimeout(()=>{

                        //     getAllPagesHtml();
                        // },100)

                        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
            $('#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;

            const canvasBody = editor.Canvas.getBody(); // Get the rendered body inside GrapesJS iframe

            // Find all tables inside .booking-details
            const bookingTables = canvasBody.querySelectorAll('.billing-details table');


            bookingTables.forEach((table, tableIndex) => {
                const tableRect = table.getBoundingClientRect();
                console.log(`Table ${tableIndex + 1}: Top = ${tableRect.top}px`);
                const rows = table.querySelectorAll('tr');

                rows.forEach((row, rowIndex) => {
                    const rect = row.getBoundingClientRect();
                    console.log(`Table ${tableIndex + 1}, Row ${rowIndex + 1}: Height = ${rect.height}px`);
                });
            });

            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><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 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,
                // section_title: document.getElementById('multi_section_title').value,
                // section_description: tinymce.get('multi_section_description') ? tinymce.get('multi_section_description')
                //     .getContent() : '',
                sections: sections,
                general_conditions: tinymce.get('multi_general_conditions') ? tinymce.get('multi_general_conditions')
                    .getContent() : ''
            };
        }
    </script>
    <script>
        $(document).ready(function() {
            // Load cities when typing
            $('#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>
        function updatePageNumbersInGrapesJS() {
            const pages = editor.Pages.getAll();
            const totalPages = pages.length;

            pages.forEach((page, index) => {
                const mainComponent = page.getMainComponent();
                if (!mainComponent) return; // Skip if no main component

                const wrapper = mainComponent.getEl();
                if (!wrapper) return; // Skip if wrapper isn't available

                let pageNumberEl = wrapper.querySelector(".page-number");
                const footerExists = wrapper.querySelector(".footer") !== null;

                // If there are multiple pages, update or add page numbers
                if (totalPages > 1) {
                    if (!pageNumberEl) {
                        pageNumberEl = document.createElement("div");
                        pageNumberEl.classList.add("page-number");
                        wrapper.appendChild(pageNumberEl);
                    }

                    pageNumberEl.classList.remove("pdf-page-no", "page-no-absolute");
                    pageNumberEl.classList.add(footerExists ? "pdf-page-no" : "page-no-absolute");
                    pageNumberEl.innerText = `Page ${index + 1}`;
                }
                // Remove page numbers if only one page remains
                else if (pageNumberEl) {
                    pageNumberEl.remove();
                }
            });
        }

        // 📌 Run update logic after every page change (add/remove)
        //editor.on('page', updatePageNumbersInGrapesJS);
        // editor.on('page:add', updatePageNumbersInGrapesJS);
        // editor.on('page:remove', updatePageNumbersInGrapesJS);

        // editor.on('page:add', (block) => {


        // // Get all `.page-number` elements from each wrapper
        // const allPageNumbers = wrappers
        //     .map(wrapper => wrapper.querySelectorAll('.page-number')) // Get all `.page-number` elements
        //     .flat(); // Flatten the NodeList into an array

        // console.log(allPageNumbers); // Check all page number elements
        // });
        function splitLongTablesInGrapesJS(editor) {
            const wrapper = editor.DomComponents.getWrapper();
            const tables = wrapper.findType('table');

            const maxContentHeight = 823.5; // total content height between header and footer

            tables.forEach(tableComp => {
                const tableHTML = tableComp.toHTML();

                // Create temporary table in DOM to measure height
                const tempTable = document.createElement('table');
                tempTable.innerHTML = tableHTML;
                tempTable.style.visibility = 'hidden';
                document.body.appendChild(tempTable);

                const thead = tempTable.querySelector('thead');
                const tbody = tempTable.querySelector('tbody');
                if (!tbody) return;

                const rows = Array.from(tbody.rows);
                let pages = [];
                let currentTable = createEmptyTableWithHeader(thead);
                let currentHeight = thead.offsetHeight;

                const rowHeights = [];
                rows.forEach(row => {
                    const tempRow = row.cloneNode(true);
                    tempTable.appendChild(tempRow);
                    rowHeights.push(tempRow.offsetHeight);
                    tempTable.removeChild(tempRow);
                });

                let currentRows = [];

                for (let i = 0; i < rows.length; i++) {
                    const row = rows[i];
                    const rowHeight = rowHeights[i];

                    if ((currentHeight + rowHeight) > maxContentHeight) {
                        // push current table and start a new one
                        appendTableToNewPage(editor, currentTable);
                        currentTable = createEmptyTableWithHeader(thead);
                        currentHeight = thead.offsetHeight;
                    }

                    currentTable.querySelector('tbody').appendChild(row.cloneNode(true));
                    currentHeight += rowHeight;
                }

                if (currentTable.querySelector('tbody').rows.length > 0) {
                    appendTableToNewPage(editor, currentTable);
                }

                // Remove original table from GrapesJS
                tableComp.remove();
                document.body.removeChild(tempTable);
            });
        }

        function createEmptyTableWithHeader(thead) {
            const newTable = document.createElement('table');
            const newThead = document.createElement('thead');
            newThead.innerHTML = thead ? thead.innerHTML : '';
            const newTbody = document.createElement('tbody');
            newTable.appendChild(newThead);
            newTable.appendChild(newTbody);
            return newTable;
        }

        function appendTableToNewPage(editor, tableEl) {
            const wrapper = editor.DomComponents.getWrapper();
            const page = document.createElement('div');
            page.className = 'gjs-page';
            page.style.height = '1008px';
            page.style.margin = '0 auto';
            page.style.pageBreakAfter = 'always';

            page.appendChild(tableEl);

            wrapper.append(`<div class="gjs-page">${page.innerHTML}</div>`);
        }
    </script>
    <script>
        let sectionCount = 1;
        let sectionNumber = 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