@extends('layouts.app')

@section('title', 'Create New Confirmation')

@section('content_header_title', 'Confirmations')
@section('content_header_subtitle', 'Create New 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;
        }
    </style>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Create New Confirmation</h3>
        </div>

        <div class="card-body">
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="row">
                <div class="col-md-6">
                    <!-- Confirmation Title -->
                    <form method="POST" action="{{ route('confirmations.store') }}" id="confirmationForm">
                        @csrf
                        <div class="row">
                            <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>
                                </div>
                            </div>

                            <!-- Header -->
                            {{-- <div class="form-group">
                            <label for="header">Confirmation Header <span class="text-danger">*</span></label>
                            <input type="text" name="header" id="header" class="form-control" required>
                        </div> --}}

                            <!-- Template Type -->
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="template_type">Template Type <span class="text-danger">*</span></label>
                                    <select name="template_type" id="template_type" class="form-control">
                                        <option value="" selected>Select Templete</option>
                                        <option value="hotel">Hotel</option>
                                        <option value="flight">Flight Quote</option>
                                        <option value="private_jet">Private Jet</option>
                                        <option value="arrival_transfer">Transfer (Arrival / Departure)</option>
                                        <option value="meet_and_greet">Meet & Greet</option>

                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- Template-Specific Form Fields -->
                        <div id="template-form-container">
                        </div>
                        <button type="submit" class="btn btn-success mt-3">
                            <i class="fas fa-save"></i> Save 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">
                    <!-- GrapesJS Preview -->
                    <div class="form-group">
                        <label>Live Confirmation Preview</label>
                        <div id="gjs-editor" style="height:600px; border:1px solid #ccc;"></div>
                    </div>


                </div>
            </div>


        </div>
    </div>
    @include('hotels.modal')
    @include('vehicles.modal')
@stop

@section('js')
    <script type="text/javascript">
        const confirmation_form_mode = "create";
    </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" />
    <link href="{{ asset('confirmation-content/css/style.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>
    <link href="{{ asset('css/select2.min.css') }}" rel="stylesheet" />
    <script src="{{ asset('js/select2.min.js') }}"></script>
    <script src="{{ asset('js/confirmation.js') }}"></script>

    <script>
        let feature_image_changed = false;
        let pnr_image_changed=false;
        const csrfToken = "{{ csrf_token() }}";

        let legIndex = 1;
        let handlingFacilityIndex = 2;
    </script>
    <script>
        const editor = initGrapeJSEditor('#gjs-editor', "{{ asset('confirmation-content/css/style.css') }}",
            "{{ csrf_token() }}");
        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;
            }
            if (model.is('image') && model.getId() === 'template-pnr-image') {
              //  console.log("Template PNR image changed:", model.get('src'));
                pnr_image_changed = true;
            }
            
        });

        removeGrapesJSBlocks(editor);
        cropImageGrapesJS(editor, "confirmations", "{{ csrf_token() }}");
    </script>



@stop