@extends('layouts.master')
@section('page_title', $website_request->website_request_name)

@section('content')

    <div class="container">
        {{ Form::page_header($website_request->website_request_name, "hours") }}

        <div class="row">
            <div class="grey-bg curve_container">
                <div class="row">
                    @include('website._website_sidebar', compact('website_request'))
                    <div class="col-md-9 col-xs-9 detail-right-side">
                        <div class="white-bg">
                            <p id="content-plan">Homepage</p>
                            @include('website._content_cards', $content_plan)
                        </div>
                        <div class="row bt-button-row text-right">
                            @if(\Gate::allows(\App\Providers\AuthServiceProvider::GATE_CONTENT_STRATEGIST) ||
                                \Gate::allows(\App\Providers\AuthServiceProvider::GATE_MARKETING_STRATEGIST) ||
                                \Gate::allows(\App\Providers\AuthServiceProvider::GATE_SPECIALIST))
                                {{ Form::button_save('EDIT CONTENT PLAN', 'edit_content_plan', 'edit-content-plan') }}
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page_script')
    @include('shared_script._website_sidebar_script')
    @include('shared_script._nested_sortable')
    <script>

        if(!'{{ App\Helpers\Website_Request_Content_Plan_Complete_Helper::can_submit($website_request) }}') {
            $('input#complete-plan').hide();
        }

        function add_card(website_request) {
            $.ajax({
                type: "POST",
                url: '{{ action('ModuleController@add_card', compact('website_request', 'business')) }}',
                success: function (result) {
                    $('ol#plan-root').prepend(result.data.card).hide().fadeIn('fast');
                    $('input:first').parents('div').get(0).scrollIntoView();
                    $('div.linked-module-elements-container').hide();
                    $('input#linked_elements_checkbox').click(function(){
                        $('div.linked-module-elements-container').fadeToggle();
                    });
                    var module = result.data.module_id;
                    $('#delete-module').on('click', function(e){
                        e.preventDefault();
                        showYesNoModalAlert('Delete Module', 'Are you sure you want to delete this module?', "delete_module(" + module + ")");
                    });
                }
            });
        }

        function collapse(module)
        {
            $('div#module-card-container-' + module).fadeOut('fast', function() {
                $(this).remove();
            });
            $.ajax({
                type: "POST",
                url: '{{ action('ModuleController@collapse') }}',
                data: {module: module},
                success: function (result) {
                    $('li#content-plan-item-' + module).prepend(result.data.card).hide().fadeIn('fast');
                }
            });
        }

        function uncollapse(module)
        {
            $('div#module-card-container-' + module).fadeOut(400, function() {
                $(this).remove();
            });
            $.ajax({
                type: "POST",
                url: '{{ action('ModuleController@uncollapse') }}',
                data: {module: module},
                success: function (result) {
                    $('li#content-plan-item-' + module).prepend(result.data.card).hide().fadeIn();
                    if(!result.data.has_linked_elements) {
                        $('div#linked-elements-' + module).hide();
                    }
                    $('#delete-module').on('click', function(e){
                        e.preventDefault();
                        showYesNoModalAlert('Delete Module', 'Are you sure you want to delete this module?', "delete_module(" + module + ")");
                    });
                }
            });
        }

        function save_module_with_elements(module) {
            var module_elements = [];
            var new_module_elements = [];
            var card = $('form#module-' + module);
            $('div#module-card-container-' + module).fadeOut('fast', function() {
                $(this).remove();
            });
            $.ajax({
                type: "POST",
                url: '{{ action('ModuleController@save_module_with_elements') }}',
                data: card.serialize(),
                success: function (result) {
                    if(result.data.module.parking_lot == 0) {
                        $('li#content-plan-item-' + module).prepend(result.data.card).hide().fadeIn('fast');
                    } else {
                        $('li#content-plan-item-' + module).remove();
                        $('div#parking-lot').append(result.data.card).fadeIn('fast');
                    }
                    if(!result.data.has_linked_elements) {
                        $('div#linked-elements-' + module).hide();
                    }
                    show_complete_button();
                }
            });
        }

        function update_non_content_module(module) {
            $('div#module-card-container-' + module).fadeOut('fast', function() {
                $(this).remove();
            });
            var card = $('form#module-' + module);
            $.ajax({
                type: "POST",
                url: '{{ action('ModuleController@update_non_content_module') }}',
                data: card.serialize(),
                success: function (result) {
                    $('li#content-plan-item-' + module).prepend(result.data.card).hide().fadeIn('fast');
                }
            });
        }

        function edit_module(module) {
            $('div#module-card-container-' + module).fadeOut('fast', function() {
                $(this).remove();
            });
            $.ajax({
                type: "POST",
                url: '{{ action('ModuleController@edit') }}',
                data: {module: module},
                success: function (result) {
                    $('li#content-plan-item-' + module).prepend(result.data.card).hide().fadeIn('fast');
                    if(!result.data.has_linked_elements){
                        $('div#linked-module-elements-' + module).hide();
                    }
                    $('li#content-plan-item-' + module + ' input#linked_elements_checkbox').click(function(){
                        $('div#linked-module-elements-' + module).fadeToggle();
                    });
                    $('input.parking-lot-notes').hide();
                    $('input#parking_lot_checkbox').click(function(){
                        $('input.parking-lot-notes').fadeToggle();
                    });
                    if(!$('input#article_include_cta_checkbox').attr('checked')) {
                        $('div.call-to-action-text-area').hide();
                    }
                    $('input#article_include_cta_checkbox').click(function(){
                        $(this).parents('div.module-element-wrapper:first')
                            .find('div.call-to-action-text-area')
                            .fadeToggle();
                    });
                    if(!$('input#article_include_pull_quote_checkbox').attr('checked')) {
                        $('div.pull-quote-text-area').hide();
                    }
                    $('input#article_include_pull_quote_checkbox').click(function(){
                        $(this).parents('div.module-element-wrapper:first')
                            .find('div.pull-quote-text-area')
                            .fadeToggle();
                    });
                    $('#delete-module').on('click', function(e){
                        e.preventDefault();
                        showYesNoModalAlert('Delete Module', 'Are you sure you want to delete this module?', "delete_module(" + module + ")");
                    });
                    $('.module-element-remove').on('click', function(e){
                        var module_element = $(this).attr('data-id');
                        e.preventDefault();
                        showYesNoModalAlert('Delete Module Element', 'Are you sure you want to delete this module element?', "delete_module_element(" + module_element + ")");
                    });
                }
            });
        }

        function delete_module(module)
        {
            $.ajax({
                type: "POST",
                url: '{{ action('ModuleController@delete') }}',
                data: {'module': module},
                success: function (result) {
                    $('li#content-plan-item-' + module).remove();
                    show_complete_button();
                }
            });
            $('#modal-alert').modal('hide');
        }

        var element_count = 0;
        function add_element(linked, module) {
            var old_count = element_count;
            var linked_data = linked ? 'linked' : 'unlinked';
            var content_plan_card = 'li#content-plan-item-' + module;
            var container_linked = linked ? 'div.linked-module-elements-container' : 'div.module-elements-container';
            var container_selector = content_plan_card + ' ' + container_linked;
            var element_type = $('li#content-plan-item-' + module + ' ' + container_linked + ' select').val();

            $.ajax({
                type: "POST",
                url: '{{ action('ModuleElementController@create') }}',
                data: {element_type: element_type, count: element_count++, linked: linked_data},
                success: function (result) {
                    $(container_selector).append(result.data.module_element);
                    $('div#new-module-element-' + old_count + ' div.call-to-action-text-area').hide();
                    $('input#article_include_cta_checkbox').click(function(){
                        $(this).parents('div.new-module-element-wrapper:first')
                            .find('div.call-to-action-text-area')
                            .fadeToggle();
                    });
                    $('div#new-module-element-' + old_count + ' div.pull-quote-text-area').hide();
                    $('input#article_include_pull_quote_checkbox').click(function(){
                        $(this).parents('div.new-module-element-wrapper:first')
                            .find('div.pull-quote-text-area')
                            .fadeToggle();
                    });
                    $('.new-module-element-remove').on('click', function(e){
                        var module_element = $(this).attr('data-id');
                        e.preventDefault();
                        showYesNoModalAlert('Delete Module Element', 'Are you sure you want to delete this module element?', "delete_new_element(" + module_element + ")");
                    });
                }
            });
        }

        function delete_new_element(new_element_count)
        {
            $('div#new-module-element-' + new_element_count).remove();
            $('#modal-alert').modal('hide');
            return true;
        }

        function delete_module_element(module_element)
        {
            $.ajax({
                type: "POST",
                url: '{{ action('ModuleElementController@delete') }}',
                data: {'module_element': module_element},
                success: function (result) {
                    $('div#module-element-' + module_element).remove();
                }
            });
            $('#modal-alert').modal('hide');
        }

        function move_to_content_plan(module)
        {
            $('div#parking-lot li#content-plan-item-' + module).fadeOut('fast', function() {
                $(this).remove();
            });
            $.ajax({
                type: "POST",
                url: '{{ action('ModuleController@move_to_content_plan') }}',
                data: {module: module},
                success: function (result) {
                    $('ol#plan-root').prepend(result.data.card).hide().fadeIn('fast');
                    $('input:first').parents('div').get(0).scrollIntoView();
                    show_complete_button();
                }
            });
        }
    </script>
@endsection
@section('page_style')
    <style>
        .mjs-nestedSortable-error {
            background: #fbe3e4;
            border-color: transparent;
        }

        #tree {
            width: 550px;
            margin: 0;
        }

        .content-planner-card {
            border: 1px solid #d4d4d4;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            border-color: #D4D4D4 #D4D4D4 #BCBCBC;
            margin-bottom: 20px;
            margin-left: 35px;
            padding: 20px;
            width: auto;
        }

        li.mjs-nestedSortable-collapsed.mjs-nestedSortable-hovering div {
            border-color: #999;
        }

        .sortable li.mjs-nestedSortable-collapsed > ol {
            display: none;
        }

        .sortable li.mjs-nestedSortable-branch > div > .disclose {
            display: inline-block;
        }

        .sortable span.ui-icon {
            display: inline-block;
            margin: 0;
            padding: 0;
        }

        .menuDiv {
            background: #EBEBEB;
        }

        .menuEdit {
            background: #FFF;
        }

        .itemTitle {
            vertical-align: middle;
            cursor: pointer;
        }

        .deleteMenu {
            float: right;
            cursor: pointer;
        }

        #content-plan {
            margin-bottom: 20px;
            padding-bottom: 0;
            font-size: 20px;
        }

        .white-bg {
            font-weight: 200;
        }

        #card-name {
            padding-bottom: 0;
            margin-bottom: 0;
            font-size: 20px;
        }

        #meta-title {
            font-size: 18px;
            padding-bottom: 0;
            margin: 15px 0 5px;
        }

        #meta-title-content {
            font-size: 16px;
            color: #979797;
            padding-bottom: 0;
        }

        #card-description {
            font-size: 14px;
            color: #979797;
            padding-bottom: 0;
        }

        #add-copy {
            margin-top: 5px;
        }

        ol.sortable {
            list-style-type: none;
            padding-left: 0;
        }
        li.parking-lot, li {
            list-style-type: none;
            cursor: default;
        }

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

        .add-element-interface {
            width: 30%;
            color: #979797;
            background-color: white;
            margin-right: 5px;
            font-size: 14px;
            height: 40px;
        }

        /* MODULE ELEMENTS label */
        label.bt-label.bt-label-small {
            margin-right: 50px;
        }
        /* LINKED ELEMENTS label */
        div.linked-module-elements-container label.bt-label.bt-label-small {
            margin-right: 60px;
        }

        .grey-bg .module-elements, .grey-bg .linked-elements {
            padding: 10px;
        }

        .link-type-radio, .image-link-checkbox, .call-to-action-checkbox {
            margin-left: 185px;
        }

        .module-element-title {
            margin: 0 0 10px 40px;
        }

        .module-card {
            margin-left: 40px;
        }

        .module-element-remove {
            position: absolute;
            margin-left: -40px;
        }

        .new-module-element-remove {
            position: absolute;
            margin-left: -40px;
        }

        .module-elements-view {
            padding: 10px;
            background-color: #F0F8FA;
            border: 1px solid #BEE1F2;
        }
        .module-elements-view-content {
            color: #979797;
            font-size: 14px !important;
        }

        .social-media-asset-link {
            color: #979797;
            font-size: 14px;
        }

        label.bt-label.bt-checkbox-label input#social-media-asset-link {
            color: #979797;
        }

        #parking-lot {
            margin-top: 20px;
        }

        .homepage-icon {
            margin-right: 10px;
        }

        .drag-and-drop-icon {
            position: absolute;
            margin-left: -55px;
            margin-top: 5px;
            cursor: move;
        }

        .parking-lot-notes {
            width: 25%;
            height: 35px;
            font-size: 14px;
            border: 1px solid;
        }

        .pull-right.bt-pull-right {
            margin-top: 20px;
        }


    </style>
@endsection