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

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

        <div class="row">
            <div class="grey-bg curve_container">
                @include('shared._message_all')
                <div class="row">
                    <div class="col-md-12 col-xs-12 detail-right-side">
                        <div class="row">
                            <div class="white-bg">
                                <div class="row">
                                    {{ Form::button_ex('Add Block', 'on_add_block();') }}
                                    {{ Form::select_ex(null, null, \App\Models\Content_Block::content_block_select($campaign_deliverable->type), null, null, null, 'content_block') }}
                                </div>
                                <div class="row">
                                    <ol id="content_blocks_wrapper" class="root sortable ui-sortable">
                                        @foreach($campaign_deliverable->_campaign_deliverable_content_block()->orderBy('sort')->get() as $campaign_deliverable_content_block)
                                            @include('reach.campaign_event.content_block._content_block_details', compact('campaign_deliverable_content_block'))
                                        @endforeach
                                    </ol>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row bt-button-row text-right">
                    {{ Form::button_ex('Apply to Content', 'apply_content();') }}
                    {{ Form::button_ex('Save as New Template', 'save_new_template();') }}
                    {{ Form::button_link('Close', $campaign_deliverable->close_url) }}
                </div>
            </div>
        </div>
    </div>
    @include('shared.modals._text_modal', ['type' => 'template', 'title' => 'Template Name', 'text_type' => 'text'])
@endsection

@section('page_script')
    @include('shared_script._nested_sortable')
    @include('shared_script.modals._text_modal_script')

    <script>

        function rearrange_local(e, _item) {
            // get all the blocks
            var blocks = $(this).nestedSortable('toArray');
            // loop through the items and adjust the sort names
            for (var i = 0; i < blocks.length; i++)
                document.getElementById(blocks[i].name).value = i;
            blocks = $(this).nestedSortable('toArray');
            $.ajax({
                type: "POST",
                url: '{{ action('CampaignDeliverableController@update_sort', compact('campaign_deliverable')) }}',
                data: {
                    blocks: blocks
                },
                success: function (result) {
                    console.log(result.message);
                }
            });
        }

        function on_add_block() {
            var content_block = $('#content_block').val();
            var num_items = $('.content-block-details').length;
            var url = '{{ action('CampaignDeliverableContentBlockController@create', ['campaign_deliverable' => $campaign_deliverable->campaign_deliverable,
                'content_block' => 'XXX', 'num_items' => 'YYY']) }}'
                .replace('XXX', content_block)
                .replace('YYY', num_items);
            $.ajax({
                type: "GET",
                url: url,
                success: function (result) {
                    $("#content_blocks_wrapper").append(result.newHtml);
                }
            });
        }

        function do_delete_campaign_deliverable_block(location_handle, delete_url) {
            if (delete_url) {
                $.ajax({
                    url: delete_url,
                    method: 'DELETE',
                    success: function () {
                        // the item is gone so get rid of the location section
                        document.getElementById(location_handle).remove();
                    },
                    error: function (result) {
                        // we will want to eventually handle errors here
                        console.log('error');
                        console.log(result.message);
                    },
                    complete: function () {
                        $('#modal-alert').modal('hide');
                    }
                });
            } else {
                // the item is gone so get rid of the location section
                document.getElementById(location_handle).remove();
                $('#modal-alert').modal('hide');
            }
        }

        function delete_campaign_deliverable_block(row_id, delete_url) {
            if (delete_url) delete_url = "'" + delete_url + "'";
            var $onclick_text = "do_delete_campaign_deliverable_block('" + row_id + "', " + delete_url + ")";
            showYesNoModalAlert('Delete Content Block', 'Are you sure you want to delete this content block?', $onclick_text);
        }

        function apply_content() {
            $.ajax({
                type: "POST",
                url: '{{ action('CampaignDeliverableController@apply_blocks_to_content', compact('campaign_deliverable')) }}',
                success: function (result) {
                    window.location = result.data.url;
                }
            });
        }

        function save_new_template() {
            _on_save_text = 'do_save_new_template';
            open_text_modal('template');
        }

        function do_save_new_template(data) {
            $.ajax({
                type: "POST",
                data: data,
                url: '{{ action('CampaignDeliverableController@save_new_template', compact('campaign_deliverable')) }}',
                success: function (result) {
                    // window.location = result.data.url;
                    close_text_modal('template');
                    var success_container = $('.success-container');
                    success_container.prepend("<p class='update-success'>"+result.data.message+".</p>");


                }
            });
        }

    </script>
@endsection

@section('page_style')
    <style>
        ol.root {
            list-style-type: none;
            padding-left: 0;
        }

        ol.root ol {
            padding-left: 0;
            list-style-type: none;
            margin: 0 0 0 35px;
        }

        .ui-sortable-handle .bt-label {
            cursor: move;
        }

        .drag-drop-img-large {
            min-height: 20px;
            min-width: 20px;
            margin-right: 5px;
        }

        .content-block-details {
            border: 1px solid #d4d4d4;
            margin-bottom: 15px;
            padding-bottom: 10px;
            padding-top: 10px;
        }

        .content-block-img {
            height: 50px;
        }

        #content_block {
            width: 250px;
        }
    </style>
@endsection