@extends('layouts.master')
@section('page_title',"Article")
@section('content')

    <div class="container bt-container ">
        {{ Form::page_header("Article", "paper_stack") }}
        @if ($content_library->content_library)
            {{ Form::open(['url'=>action('ContentLibraryController@update', compact('content_library'))]) }}
        @else
            {{ Form::open(['url'=>action('ContentLibraryController@store')]) }}
        @endif
        {{ Form::hidden('content_library', $content_library->content_library) }}
        {{ Form::hidden('status', $content_library->status) }}

        <div class="row">
            <div class="grey-bg curve_container">
                <div class="row">
                    <div class="col-md-3 col-xs-3 detail-left-side">
                        @include('super_admin.content_library._article_info_edit', ['data' => $content_library])

                        <div class="row">{{ Form::label_title("Article Type") }} </div>
                        <div class="row">{{ Form::select_placeholder('article_type', $content_library->article_type, $article_type) }}</div>

                        {{ Form::separator_row('grey-divider thin-divider') }}
                        <div class="row">{{ Form::label_title("Industry") }} </div>
                        <div class="row">{{ Form::select_placeholder('industry', $content_library->industry, $industry,
                            'Select', null, null, "on_change_industry(this.value, '".$content_library->content_library."', '". action('ContentLibraryController@get_drivers')."');") }}</div>
                        <div id="industry_drivers">
                        </div>
                    </div>
                    <div class="col-md-9 col-xs-9 detail-right-side">
                        <div class="row">
                            <div class="white-bg">
                                <div class="row">{{ Form::label_title("Subject Line") }} </div>
                                <div class="row">{{ Form::text_ex("subject_line", $content_library->subject_line) }} </div>
                                <div class="row">{{ Form::label_title("Directions") }} </div>
                                <div class="row">{{ Form::text_ex("directions", $content_library->directions) }} </div>
                                <div class="row">{{ Form::label_title("Key Points") }} </div>
                                <div class="row">{{ Form::textarea_ex("key_points", $content_library->key_points) }} </div>
                                <div class="row">{{ Form::label_title("Article Body") }} </div>
                                <div class="row">{{ Form::tinymce('article_body', old('article_body') !== null ? old('article_body') : $content_library->article_body) }}</div>
                                <div class="row">{{ Form::label_title("Excerpt") }} </div>
                                <div class="row">{{ Form::textarea_ex("excerpt", $content_library->excerpt) }} </div>
                                <div class="row">{{ Form::label_title("Call to Action") }} </div>
                                <div class="row">{{ Form::textarea_ex("call_to_action", $content_library->call_to_action) }} </div>
                                <div class="row">{{ Form::label_title("Pull Quote") }} </div>
                                <div class="row">{{ Form::text_ex("pull_quote", $content_library->pull_quote) }} </div>
                                @if($content_library->content_library)
                                    <div class="row">{{ Form::label_title("Business that have used this Article") }} </div>
                                    <div id="linked_businesses">
                                        @foreach($associated_business as $k => $v)
                                            @include('super_admin.content_library._associated_business_row', ['key' => $k, 'label' => $v])
                                        @endforeach
                                    </div>
                                    {{ Form::separator_row_empty() }}
                                    {{ Form::separator_row_empty() }}
                                    <div class="row">
                                        {{ Form::select_ex('business', null, \App\Models\Business::business_select(false), null, null, null, null, 'Select', 'business-search-select') }}
                                        {{ Form::button_ex('Add', 'link_associated_business()', 'add_btn') }}
                                    </div>
                                    {{ Form::hidden('link_business_array') }}
                                    {{ Form::hidden('unlink_business_array') }}
                                @endif
                            </div>
                        </div>

                        <div class="row bt-button-row text-right">
                            {{ Form::button_save() }}
                            @if ($content_library->content_library)
                                {{ Form::button_link('Cancel', action('ContentLibraryController@view', compact('content_library'))) }}
                            @else
                                {{ Form::button_link('Cancel', action('ContentLibraryController@content_browse')) }}
                            @endif
                        </div>
                        <div style="display:none">
                            @include('super_admin.content_library._associated_business_row')
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{ Form::close() }}
@endsection

@section('page_script')
@include('shared_script._tinymce_init')
@include('shared_script._select_type_ahead', ['selectors' => ['.business-search-select'], 'hide_selected_options_onload' => array_keys($associated_business)])

    <script >
        var cl_pk = '{{ $content_library->content_library }}';
        var link_business_array = [];
        var unlink_business_array = [];

        $(document).ready(function() {
            tinymce_init('#article_body');
            document.getElementById("industry").onchange();
            // push php associated_business array to js link_business_array
            $.merge(link_business_array,{{ json_encode(array_keys($associated_business)) }});
            show_hide_linked_businesses();
            $('#save_btn').click(function() {
                post_changes()
            });
        });

        function on_change_industry(industry, pk, get_url) {
            if (industry == '') {
                document.getElementById('industry_drivers').innerHTML = '';

            } else {
                $.ajax({
                    type: "GET",
                    data: { industry: industry, content_library: cl_pk },
                    url: get_url,
                    success: function(result) {
                        document.getElementById('industry_drivers').innerHTML = result;
                    }
                });
            }
        }

        function link_associated_business() {
            var business_id = parseInt($('#business').val());
            var business_label = $('#business option:selected').text();
            if (business_id && ($.inArray(business_id, link_business_array) === -1))
            {
                // remove added id from unlink_business_array
                unlink_business_array = unlink_business_array.filter(business => business !== business_id);
                // clear the select
                $('#business').val(null).trigger('change');
                link_business_array.push(business_id);
                // just load the part of the page that updated
                var new_row = $('#linked_business_partial');
                new_row
                    .clone()
                    .attr('id', business_id)
                    .appendTo('#linked_businesses')
                    .show()
                    .find('label')
                    .append(business_label);
                $('#' + business_id)
                    .find('input')
                    .removeAttr('onclick')
                    .attr('onclick', 'unlink_business(' + business_id + ')')
                    .attr('id', business_id + '_remove');
                // remove option from the select2 list, function lives in shared_script._select_type_ahead
                hide_select2_option(business_id, 'business');
                show_hide_linked_businesses();
            }
            else {
                // clear the select
                $('#business').val(null).trigger('change');
            }
        }

        function show_hide_linked_businesses() {
            if (link_business_array.length > 0)
                $('#linked_businesses').show();
            else
                $('#linked_businesses').hide();
        }

        function unlink_business(val) {
            $('#'+ val).hide();
            $('#modal-alert').modal('hide');
            // remove business for linked business array
            link_business_array = link_business_array.filter(e => e != val);
            // add to unlinked business array
            unlink_business_array.push(val);
            // add option to the select2 list, function lives in shared_script._select_type_ahead
            show_select2_option(val, 'business');
            show_hide_linked_businesses();
        }

        function post_changes(){
            console.log('saved');
            if (link_business_array.length) {
                $('input:hidden[name=link_business_array]').val(link_business_array);
            }
            if (unlink_business_array.length) {
                $('input:hidden[name=unlink_business_array]').val(unlink_business_array);
            }
        }
    </script>
@endsection

@section('page_style')
    <style>
        /*.content-library-article-container .editable {*/
            /*border: 1px solid #696969;*/
            /*min-height: 130px;*/
            /*padding: 5px 10px;*/
            /*resize: none;*/
            /*margin-bottom: 15px;*/
        /*}*/
        /*.editable p {*/
            /*font-family: 'Open Sans', sans-serif !important;*/
            /*font-size: 14px !important;*/
        /*}*/
        .mce-tinymce.mce-tinymce-inline.mce-container.mce-panel.mce-floatpanel{
            z-index: 1029 !important;
        }

        .select2-results .select2-disabled,  .select2-results__option[aria-disabled=true] {
            display: none;
        }
    </style>
@endsection