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

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

        {{ Form::open(['url' => action('CampaignDeliverableController@update_design', compact('campaign_deliverable'))]) }}
        <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">
                                @include('reach.campaign_event.content_block._content_blocks', ['directory' => 'design'])
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row bt-button-row text-right">
                    {{ Form::button_save() }}
                    {{ Form::button_link('Close', $campaign_deliverable->close_url) }}
                </div>
            </div>
        </div>
        {{ Form::close() }}
    </div>

    @include('shared.modals._upload_image_modal')

@endsection

@section('page_script')
    @include('reach.campaign_event._campaign_event_sidebar_script')
    @include('shared_script.modals._upload_image_script')

    <script>
        $(document).ready(function () {
            $('.image-type').each(function () {
                if ($(this)[0].checked)
                    $(this).change();
            });
        });

        $('.image-type').change(function () {
            change_image_type($(this).val(), $(this)[0].parentElement.parentElement.dataset.pk);
        });

        function change_image_type(value, pk) {
            var parent_id = '#campaign_deliverable_content_parent_' + pk;
            $(parent_id + ' .image-type-row').hide();
            $(parent_id + ' .image-type-' + value).show();
        }

        function add_image(pk, required_width = 0) {
            var url = '{{ action('CampaignDeliverableContentBlockController@image_upload_post', ['campaign_deliverable_content_block' => 'XXX']) }}'
                .replace('XXX', pk);
            showUploadImageModal('Upload an Image', pk, 'do_after_image_upload', url, required_width);
        }

        function do_after_image_upload(pk, response) {
            $('#thumbnail_' + pk).attr('src', '');
            $('#thumbnail_' + pk).attr('src', response.data.image_url);
            var image_id = 'campaign_deliverable_content_block[' + pk + '][image_url]';
            document.getElementById(image_id).value = response.data.image_url;
        }
    </script>
@endsection

@section('page_style')
    <style>
        .bt-tiny-mce {
            margin-right: 15px !important;
        }

        .bt-btn-tiny {
            margin-bottom: 15px;
        }

        .content-block-design-wrapper {
            margin-top: 15px;
        }

        .content-block-design {
            border: 1px solid black;
        }

        .content-block-image:hover {
            cursor: pointer;
        }

        .textarea-block {
            padding: 10px;
        }

        .content-block-design p{
            padding: 0;
            margin: 0;
        }

    </style>
@endsection