@extends('layouts.app')

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

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

@section('content_body')


<style>
    .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">Create New Offer</h3>
    </div>

    <div class="card-body">
        <form id="offer-form">
            @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">
            <div class="form-group">
    <label for="customer_id">Select Customer</label>
    <select class="form-control" name="customer_id" id="customer_id">
        <option value="">-- Select Customer --</option>
        @foreach($customers as $customer)
            <option value="{{ $customer->id }}">{{ $customer->first_name }} {{ $customer->last_name }}</option>
        @endforeach
    </select>
</div>
        </div>
        </div>
<div class="row">
            <div class="col-md-6">
                <label for="hotelSelect">Hotel:</label>
                <select class="form-control" name="hotel_id" id="hotelSelect" required>
                    <option value="">Select Hotel</option>
                    @foreach($hotels as $hotel)
                        <option value="{{ $hotel->id }}" data-hotel='@json([
                            "name" => $hotel->name,
                            "city" => $hotel->city,
                            "county" => $hotel->county
                        ])'>{{ $hotel->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-6">
                <label for="templateSelect">Select Offer Template</label>
                <select class="form-control" id="templateSelect" name="template_id" required>
                    <option value="">-- Select Template --</option>
                    @foreach($templates as $template)
                        <option value="{{ $template->id }}">{{ $template->name }}</option>
                    @endforeach
                </select>
            </div>
</div>
            <!-- GrapesJS Editor -->
             <br>
        <div class="row">
            <div class="col-md-12">
                 <!-- GrapesJS Editor Container -->
    <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;height:400px;"></div>
                        </div>
                        </div>
            </div>
        </div>

            <button type="button" class="btn btn-primary" onclick="saveOffer()">Save Offer</button>
        </form>

        <hr>

        <h3>Live PDF Preview</h3>
        <iframe id="pdfPreview" style="width:100%; height:600px;" frameborder="0"></iframe>
    </div>
</div>

@endsection

@push('js')
<!-- Include GrapesJS CSS & JS -->
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></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>
<!--<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script> -->

<script>
     function blockRoomTypeImages(editor) { 
        // Use the API: https://grapesjs.com/docs/api/ 
        editor.Blocks.add('blocks-room-type-images', 
        { label: 'Room Type Images', 
          content: '<header><div class=container><div class=header-wrap><div class=header-left>Name</div><div class=header-right><img alt="We Stay logo"class=logo src={{$logoBase64}}></div></div></div></header><div class="hotel-images-wrap"><ul><li><img src="" class="img-fluid" alt=""></li><li style="margin-top:20px"><img src="" class="img-fluid" alt=""></li></ul></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>Name</div><div class=header-right><img alt="We Stay logo"class=logo src={{$logoBase64}}></div></div></div></header><div class=full-image-wrap><img alt=""class=img-fluid src=""><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><div class=container><div class=header-wrap><div class=header-left>Name</div><div class=header-right><img alt="We Stay logo"class=logo src={{$logoBase64}}></div></div></div></header><div class=container><div class=amenities-img-wrap><div class=amenities-img><img alt=""class=img-fluid src=""></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',
        //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' },
        plugins: ["grapesjs-blocks-table",blockRoomTypeImages,blockRoomAmenities,blockImageDivider],
        assetManager: {
            assets: [],
            upload: false,
        },
        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
                   }]}
    });

    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) {
    pm.remove(pageId);
    if (selectedPageId === pageId) {
        selectedPageId = null;
    }
    renderPages();
}
// Function to add a new page
function addPage() {
    const len = pm.getAll().length;
    const newPage = pm.add({
        name: `Page ${len + 1}`,
        component: ``,
    });
    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() {
    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 => {
        const component = page.getMainComponent();
        const htmlPage = editor.getHtml({
            component
        });
        const cssPage = editor.getCss({
            component
        });
        //const pageHtml = page.get('component'); 
        // Get the component HTML of the page 
        allPagesHtml.push({
            pageName: page.get('name'),
            html: htmlPage,
            css: cssPage
        });
    });

    if (allPagesHtml.length > 1) {
        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() {
        let formData = new FormData(document.getElementById('offer-form'));

        $.ajax({
            url: "{{ route('templates.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",
    components: response.content,
    attributes: { class: "page1" },
});


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.');
            }
        });
    }
});

function saveOffer() {
        let offerData = {
            offer_title: document.getElementById("offer_title").value,
            customer_id: document.getElementById("customer_id").value,
            hotel_id: document.getElementById("hotelSelect").value,
            template_id: document.getElementById("templateSelect").value,
            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 = "/offer";
        })
        .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 to recalculate the total rate
  function updateTotalRate() {
      var total = 0;

      // Iterate over each rate cell in tbody rows
      var canvasDoc = editor.Canvas.getDocument();
$(canvasDoc).find('table.editable-table tbody tr').each(function() {
      debugger;

          // Find the rate value (assume it is in the second span inside the .rate div)
          var rateText = $(this).find('td:last .rate span:last').text();
          var rate = parseCurrency(rateText);
          if (!isNaN(rate)) {
              total += rate;
          }
      });
      // Update the total rate cell in the tfoot row
      $('table.editable-table tfoot tr td:last .total-rate span:last').text(formatCurrency(total));
  }

  // Listen for input events on rate cells to update total on changes.
  // We use event delegation to capture changes on any cell inside tbody.
  $(document).on('input keyup paste blur', 'table.editable-table tbody tr td:last', function(){
    debugger;
      // Delay execution slightly to ensure the cell's content is updated.
      setTimeout(updateTotalRate, 200);
  });

  // Optionally, trigger the total update on page load
  $(document).ready(function(){
      updateTotalRate();
  });

  function observeCell(cell) {
  const observer = new MutationObserver(function(mutations) {
    // When any mutation occurs, update the total after a slight delay.
    setTimeout(updateTotalRate, 200);
  });
  observer.observe(cell, { childList: true, subtree: true, characterData: true });
}

// Apply observer to each rate cell initially
$('table.editable-table tbody tr td:last').each(function() {
  observeCell(this);
});

editor.on('component:update', function(model) {
    //debugger;
  // Check if the updated component is within our table
//  if ($(model.view.el).closest('table').length) {
    //debugger;

    updateTotalRate();
  //}
});
// Wait for the GrapesJS canvas to load
editor.on('component:update', function() {
  // Get the iframe element
  var frameEl = editor.Canvas.getFrameEl();
  // Get the iframe's document
  var iframeDoc = frameEl.contentDocument || frameEl.contentWindow.document;
  
  // Use jQuery on the iframe's document
  var $rows = $(iframeDoc).find('table tbody tr');
  console.log("Number of rows found:", $rows.length);
  var total = 0;
  
  $rows.each(function() {
    // Example: Get the rate value
    var rateText = $(this).find('.rate span:last').text();
    console.log("Rate:", rateText);
    var rate = parseCurrency(rateText);
          if (!isNaN(rate)) {
              total += rate;
          }
  });
  console.log("total",total);
  $(iframeDoc).find('table tfoot tr td:last .total-rate span:last').text(formatCurrency(total));

});


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

        if (totalPages > 1) {
            const pageNumberHtmlWithFooter = `<div style="text-align: center; font-size: 12px; color: #666">
                Page ${pageNumber} of ${totalPages}
            </div>`;
            const pageNumberHtml = `<div class="page-no-absolute">
                Page ${pageNumber} of ${totalPages}
            </div>`;

            // 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><div style="text-align: center; margin-bottom: 5px;">${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="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js"></script>
<script>
    tinymce.init({
        selector: '#section_description, #general_conditions, #multi_section_description, #multi_general_conditions',
        menubar: false,
        plugins: 'lists link image table',
        toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat',
        height: 300
    });
</script>


@endpush