@extends('layouts.app')

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

@section('content_header')
    <h1>Create Template</h1>
@stop

@section('content')
<div class="container-fluid">
{{-- Show General Validation Errors --}}
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
    <form id="templateForm" action="{{ route('templates.store') }}" method="POST">
        @csrf
        <!-- Template Basic Information -->
        <div class="row mb-3">
            <div class="col-md-6">
                <label for="templateNameInput">Template Name</label>
                <input type="text" class="form-control" id="templateNameInput" name="name" placeholder="Enter template name" required>
            </div>
            <div class="col-md-6">
                <label for="templateTypeInput">Template Type</label>
                <select class="form-control" id="templateTypeInput" name="type" required>
                    <option value="offer">Offer</option>
                    <option value="confirmation">Confirmation</option>
                </select>
            </div>
        </div>

        <!-- Editor and Sidebar -->
        <div class="row">
            <!-- GrapesJS Editor Column -->
            <div class="col-md-12">
                <div id="gjs" style="height:600px; border:1px solid #ccc;"></div>
            </div>
            
        </div>

        <!-- Live Preview and Save Section -->
        <!-- <div class="row mt-3">
            <div class="col-md-12 text-center">
                <button type="button" id="updatePreview" class="btn btn-success">Update Live Preview</button>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-md-12">
                <iframe id="pdfPreview" style="width:100%; height:500px; border: none;"></iframe>
            </div>
        </div> -->

        <!-- Hidden Fields for Editor Content and Custom Fields JSON -->
        <textarea name="content" id="templateContent" style="display:none;"></textarea>
        
        <!-- Save Template Button -->
        <div class="row mt-3">
            <div class="col-md-12 text-center">
                <button type="submit" class="btn btn-primary">Save Template</button>
            </div>
        </div>
    </form>
</div>


<!-- Include GrapesJS CSS & JS -->
 <link href="{{ asset('grapesjs/grapes.min.css') }}" rel="stylesheet">
<script src="{{ asset('grapesjs/grapes.min.js') }}"></script>
<script src="https://unpkg.com/grapesjs-blocks-basic@1.0.1"></script>
<script src="https://unpkg.com/grapesjs-custom-code@1.0.1"></script>
<!-- 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>
    // 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: true,
        storageManager: { type: 'none' },
        plugins: ['gjs-blocks-basic',"grapesjs-custom-code"]
      
    });

    // Add Fixed Footer Component
editor.Components.addType('fixed-footer', {
  model: {
    defaults: {
      tagName: 'footer',
      classes: ['fixed-footer'],
      droppable: false,
      content: `<div class="footer">
                  <p class="page-info">Page 1 of 1</p>
                  <p>Thank you for choosing WESTAY LTD</p>
                  <p class="footer-info">
                    Tel: 971 4546 4488
                    <span class="dot"></span>
                    E-mail: Reservations@westay.com
                  </p>
                  <p>
                    Dubai International Financial Centre, Dubai, United Arab Emirates
                  </p>
                </div>`,
    },
  },
  view: {
    onRender() {
      this.el.style.position = 'absolute';
      this.el.style.bottom = '0';
      this.el.style.left = '0';
      this.el.style.width = '100%';
      this.el.style.textAlign = 'center';
    },
  },
});

// Add Footer Component on Page Load
editor.on('load', () => {
  const footer = editor.addComponents({
    type: 'fixed-footer',
  });

  // Update Page Numbers Automatically
  updatePageNumbers();
});

// Function to Update Page Numbers
function updatePageNumbers() {
  const totalPages = 1; // Set total pages dynamically based on your content
  const footers = document.querySelectorAll('.footer .page-info');
  footers.forEach((footer, index) => {
    footer.innerHTML = `Page ${index + 1} of ${totalPages}`;
  });
}

    // When a hotel field is clicked in the sidebar, add its placeholder to the editor
    $('ul.list-group li[data-placeholder]').on('click', function(){
        var placeholder = $(this).data('placeholder');
        editor.addComponents(placeholder);
    });

    

    // When a custom field item is clicked in the sidebar, add its placeholder to the editor
    /*$(document).on('click', '#customFieldsList li', function(){
        var placeholder = $(this).data('placeholder');
        editor.addComponents(placeholder);
    });

    // Function to update the live preview via AJAX
    function updatePreview() {
        // Get complete HTML (content + inline CSS) from GrapesJS
        var content = editor.getHtml() + '<style>'+ editor.getCss() +'</style>';
        $.ajax({
            url: "{{ route('templates.preview') }}",
            type: "POST",
            data: {
                _token: '{{ csrf_token() }}',
                content: content
            },
            success: function(response) {
                // Set the preview iframe source to the returned PDF (base64 encoded)
                $('#pdfPreview').attr('src', 'data:application/pdf;base64,' + response.pdf);
            }
        });
    }*/

    // Update preview on editor changes and when the "Update Live Preview" button is clicked
    //editor.on('update', updatePreview);
    //$('#updatePreview').on('click', updatePreview);
    // Trigger preview update on page load
    // $(document).ready(function(){0
    //     updatePreview();
    // });

    // On form submission, save the editor content and custom fields data into hidden inputs
    $('#templateForm').on('submit', function(e){
        var templateContent = editor.getHtml() + '<style>'+ editor.getCss() +'</style>';
        $('#templateContent').val(templateContent);
        alert(templateContent);
        
    });
</script>
@endsection