@extends('layouts.app')

@section('title', 'Edit Confirmation')
@section('content_header_title', 'Confirmations')
@section('content_header_subtitle', 'Edit Confirmation')

@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%;
        }

        .gjs-am-add-asset {
            display: none;
        }

        .gjs-pn-views-container {
            display: none !important;
        }
    </style>
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Edit Confirmation</h3>
        </div>

        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <form action="{{ route('confirmations.update', $confirmation->id) }}" method="POST" id="confirmationForm">
                        @csrf
                        @method('PUT')

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="title">Confirmation Title <span class="text-danger">*</span></label>
                                <input type="text" name="title" id="title" class="form-control" required
                                    value="{{ $confirmation->title }}">
                            </div>
                        </div>

                        <input type="hidden" name="template_type" id="template_type"
                            value="{{ $confirmation->template_type }}">

                        <div id="template-form-container">
                            @include('confirmations.forms.' . $confirmation->template_type, [
                                'data' => $formData,
                            ])
                        </div>

                        <button type="submit" class="btn btn-success mt-3">Update Confirmation</button>
                        <!-- Hidden fields to store GrapesJS output -->
                        <input type="hidden" name="gjs_html" id="gjs_html">
                        <input type="hidden" name="gjs_css" id="gjs_css">
                    </form>
                </div>
                <div class="col-md-6">
                    <h4>Live Preview</h4>
                    <div id="gjs-editor"></div>
                </div>
            </div>
        </div>
    @endsection

    @section('js')
        <script type="text/javascript">
            const confirmation_form_mode = "edit";
        </script>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <link href="{{ asset('grapesjs/grapes.min.css') }}" rel="stylesheet">
        <link href="{{ asset('css/cropper.min.css') }}" rel="stylesheet" />
        <script src="{{ asset('grapesjs/grapes.min.js') }}"></script>
        <script src="{{ asset('tinymce/tinymce.min.js') }}"></script>
        <script src="{{ asset('js/cropper.min.js') }}"></script>
        <script src="{{ asset('js/confirmation.js') }}"></script>
        <script>
            let feature_image_changed = true;
            let pnr_image_changed=true;
            const hotelSelect = document.getElementById('hotelSelect');
            if(hotelSelect){
            loadHotelImages(hotelSelect.value);
            }


            const csrfToken = "{{ csrf_token() }}";
            let legIndex = {{ count($formData['legs'] ?? []) }};
            let handlingFacilityIndex = {{ count($formData['handling_facilities'] ?? []) }};
            const editor = initGrapeJSEditor('#gjs-editor', "{{ asset('confirmation-content/css/style.css') }}",
                "{{ csrf_token() }}");
            document.addEventListener('DOMContentLoaded', function() {

                const gjsHtml = @json($confirmation->gjs_html ?? '');
                const gjsCss = @json($confirmation->gjs_css ?? '');

                // Optional: extract <body> content only
                let extractedHtml = gjsHtml;
                const match = gjsHtml.match(/<body[^>]*>(.*?)<\/body>/is);
                if (match && match[1]) {
                    extractedHtml = match[1];
                }
                console.log({
                    extractedHtml
                });

                // Load into editor

                editor.setComponents(extractedHtml);
                editor.setStyle(gjsCss);
                removeGrapesJSBlocks(editor);
                cropImageGrapesJS(editor, "confirmations", "{{ csrf_token() }}");
                initHotelTemplateScripts(); // rebinds events, TinyMCE, and GJS
            });
            document.getElementById('confirmationForm').addEventListener('submit', function() {
                document.getElementById('gjs_html').value = editor.getHtml();
                document.getElementById('gjs_css').value = editor.getCss();
            });
            
        </script>
    @endsection