@extends('layouts.master')
@section('page_title',$title)
@section('content')

    <div class="container" id="design_container">
        {{ Form::page_header($title, "paper_stack") }}

        {{--
                @if($campaign_deliverable->needs_design_save())
                    <div class="row alert alert-danger">
                        {{ Form::label_title('Please save design to apply backend changes to Html.', \App\Helpers\FormComponentHelper::SIZE_MEDIUM) }}
                    </div>
                @endif
        --}}

        {{ Form::open(['url' => action('CampaignDeliverableController@update_builder_design', compact('campaign_deliverable')), '
            id' => 'campaign_deliverable_design_form']) }}
        <div class="row">
            <div class="grey-bg curve_container">
                <div class="row">
                    <div class="col-md-12 col-xs-12 detail-right-side">
                        <div class="row">
                            <div class="white-bg">
                                @if ($campaign_deliverable->type == \App\Models\Campaign_Deliverable::DELIVERABLE_TYPE_WEBPAGE)
                                    <div class="row">
                                        {{ Form::label_title('Featured Image:', \App\Helpers\FormComponentHelper::SIZE_EXLARGE, null, null) }}
                                        @if (!$campaign_deliverable->featured_image_url)
                                        {{ Form::button_ex('Choose Featured Image',
                                            'open_choose_image_modal("'.action('CampaignDeliverableTemplateController@save_promo_image', compact('business')) .'", "do_save_file_path", "");') }}
                                        @endif
                                    </div>
                                    <div class="row image-type-row">
                                        <img id="promo_image_featured" src="{!! $campaign_deliverable->featured_image_url !!}"
                                             onclick='open_choose_image_modal("{{action('CampaignDeliverableTemplateController@save_promo_image', compact('business'))}}", "do_save_file_path", "");'
                                             class="content-block-image {!! $campaign_deliverable->featured_image_url ? '' : 'hide' !!}"/>
                                    </div>
                                @endif

                                @include('shared.grapejs._grapejs', [
                                    'json_string' => $campaign_deliverable->json_string,
                                    'styles_string' => $campaign_deliverable->styles_string,
                                    'html_string' => $campaign_deliverable->html_string,
                                    'css_string' => $campaign_deliverable->css_string,
                                ])
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row bt-button-row text-right">
                    {{ Form::button_ex('Save', 'grapejs_do_save("campaign_deliverable_design_form");') }}
                    {{ Form::button_link('Close', $campaign_deliverable->close_url) }}
                </div>
            </div>
        </div>
        {{ Form::close() }}
    </div>

    @include('shared.modals._choose_image_modal', ['is_external' => 0, 'is_internal' => 1, 'is_browse' => 0])
@endsection

@section('page_script')
    @include('reach.campaign_event._campaign_event_sidebar_script')
    @include('shared.grapejs._grapejs_'.$campaign_deliverable->grapejs_type.'_script')
    @include('shared.grapejs.init_grape_js', [
        'component_string' => $campaign_deliverable->json_string,
        'styles_string' => $campaign_deliverable->styles_string,
    ])
    @include('shared_script.modals._choose_image_script')
    @include('shared_script.modals._upload_image_script')

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

        function do_save_file_path(promo_image_pk) {
            $.ajax({
                type: "POST",
                url: '{{ action('CampaignDeliverableController@save_featured_image', compact('campaign_deliverable')) }}',
                data: { promo_image: promo_image_pk },
                success: function (result) {
                    document.getElementById('promo_image_featured').src = result.data.image_path;
                },
            });
        }
    </script>
@endsection

@section('page_style')
    @include('shared_style.modals._choose_image_style')
    @include('shared.grapejs._grapejs_'.$campaign_deliverable->grapejs_type.'_style')
    <style>
        #design_container {
            width: 95% !important;
            max-width: 95% !important;
        }

        .image-type-row {
            margin-bottom: 10px;
        }
    </style>
@endsection