@extends('layouts.master')
@section('page_title', $page_title)
@section('content')
    <div class="container">

        {{ Form::page_header($page_title, "paper_stack") }}

        {{ Form::open(['url' => $post_url, 'id' => 'grapejs_template_form']) }}

        <div class="grey-bg curve_container">
            {{ Form::hidden('template_type', $campaign_deliverable_template->template_type) }}
            {{ Form::row_text_inline('template_name', 'Template Name', $campaign_deliverable_template->template_name, 2, 4) }}

            @include('shared.grapejs._grapejs', [
                'json_string' => $campaign_deliverable_template->template_json_string,
                'styles_string' => $campaign_deliverable_template->template_styles_string,
                'html_string' => $campaign_deliverable_template->template_html_string,
                'css_string' => $campaign_deliverable_template->template_css_string,
            ])

            {{ Form::separator_row_bottom("grey-divider") }}
            <div class="row bt-button-row text-right">
                {{ Form::button_ex('Save', 'grapejs_do_save("grapejs_template_form");') }}
                {{ Form::button_link('Cancel', $campaign_deliverable_template->view_url) }}
            </div>
        </div>
        {{ Form::close() }}
    </div>

@endsection

@section('page_script')
    @include('reach.campaign_event._campaign_event_sidebar_script')
    @include('shared.grapejs._grapejs_'.$campaign_deliverable_template->grapejs_type.'_script')
    @include('shared.grapejs.init_grape_js', [
        'component_string' => $campaign_deliverable_template->template_json_string,
        'styles_string' => $campaign_deliverable_template->template_styles_string,
    ])

    <script>
        $(document).ready(function () {
            do_init_grape_js();
        });

        @if ($campaign_deliverable_template->campaign_deliverable_template)
        @if ($campaign_deliverable_template->template_type == \App\Models\Campaign_Deliverable_Template::TEMPLATE_TYPE_WEBPAGE)
        function save_post_to_wordpress() {
            grapejs_do_save();
            // now we have to save the form...
            do_after_save('{{ $campaign_deliverable_template->wordpress_post_url }}');
        }

        function save_page_to_wordpress() {
            grapejs_do_save();
            // now we have to save the form...
            do_after_save('{{ $campaign_deliverable_template->wordpress_page_url }}');
        }
        @endif

        function do_after_save(post_url) {
            console.log(post_url);
            var data = $('#grapejs_test_form').serialize();
            $.ajax({
                dataType: 'json',
                data: data,
                url: post_url,
                method: 'POST',
                success: function (response) {
                    console.log('success');
                },
                error: function (response) {
                    console.log('error');
                },
                complete: function (data) {
                    console.log('complete');
                }
            });
        }
        @endif


    </script>
@endsection

@section('page_style')
    {{--@include('shared_style.modals._choose_image_style')--}}
    @include('shared.grapejs._grapejs_'.$campaign_deliverable_template->grapejs_type.'_style')
    @include('shared.grapejs._grapejs_shared_style')
@endsection