@extends('layouts.app')

@section('content')
<div class="content">
    <x-content.header title="{{__('title.'.$templateType.'creator')}}" subTitle="{{__('title.'.$templateType.'creator_subtitle')}}" />

    <div class="flex flex-col lg:flex-row gap-4 w-full">
        <div class="w-full lg:w-1/3">
            <div class="tw-card">
                <div class="p-6">
                    <form id="form" name="modal-form" action="{{route("{$templateType}.reports.change.template.update", $report)}}" method="PUT">
                        <div class="fb-editor">
                            <div class="document-wrap document-builder">
                                @include('documentcreator::reports.form', ['edit' => true])
                            </div>
                        </div>

                        <div class="flex flex-nowrap gap-2 mt-4">

                            <button type="submit" class="btn-primary-base btn-save">
                                {{trans('forms.lbl_next')}}
                            </button>

                            <a href="{{route("{$templateType}.reports.index")}}"  class="btn-tertiary-base">{{trans('forms.lbl_cancel')}}</a>
                        </div>

                    </form>
                </div>
            </div>
        </div>

        <div class="w-full lg:w-2/3">
            <div id="preview-html">
                {!! $report->html !!}
            </div>
        </div>
    </div>
</div>
@stop

@section('footer-script')
    @include("documentcreator::scripts.front", [
        'preview' => false
    ])

    <!-- End plugin js for this page -->
    <script type="text/javascript">
        $(".btn-save").on("click", function(event) {

            event.preventDefault();

            if($("#form").valid()) {

                data = $('#form').serialize();

                if($(this).hasClass('btn-concept')) {
                    data = data+"&status=draft";
                }

                PDRequest({
                    type    : "PUT",
                    url     : $("#form").prop("action"),
                    data    : data,
                    event   : event
                }).then(response => {
                    window.location = response.next_step;
                });
            }
        });

        $("select[name='dc_template_id']").on("change", function(){
            PDRequest({
                type    : "POST",
                url     : "{{route("{$templateType}.reports.index")}}/"+$(this).val() + "/template",
                event   : false,
                isFlash : false,
            }).then(response => {
                $("#preview-html").html(response.html);
            });
        })
    </script>
@stop