@extends('layouts.master')
@section('page_title', $campaign->campaign ? $campaign->name : "New ".\App\Models\Campaign::$campaign_type_map[$type]." Campaign")
@section('content')
    <div class="container campaign-detail-wrapper">
        @if (sizeof(session()->getOldInput()) > 0)
            {{ $campaign->init_with_old_request(session()->getOldInput()) }}
        @endif

        {{ Form::page_header(($campaign->campaign ? $campaign->name : "New ".\App\Models\Campaign::$campaign_type_map[$type]." Campaign"),
        $type == \App\Models\Campaign::CAMPAIGN_TYPE_BUILD ? "build_campaign" : "convo_engage") }}
        @if($campaign->campaign)
            {{ Form::open(['url' => action('CampaignController@post_edit_campaign', compact('business', 'campaign', 'type')),'autocomplete' => 'off','files' => true]) }}
        @else
            {{ Form::open(['url' => action('CampaignController@post_create_campaign', compact('business', 'type')),'autocomplete' => 'off','files' => true]) }}
        @endif
        <div class="row">
            <div class="grey-bg curve_container">
                @include('shared._message_all')
                <div class="row bottom-padding">
                    {{ Form::label_title("Campaign Details") }}
                </div>
                <div class="row">
                    <div class="col-sm-6 detail-left-side header-top">
                        {{ Form::row_label_inline('Status', \App\Models\Campaign::$status_map[$campaign->campaign ? $campaign->status : \App\Models\Campaign::STATUS_PLANNING], 'label-grey bt-label-small', 4, 7, \App\Helpers\FormComponentHelper::SIZE_MEDIUM) }}
                        {{ Form::row_label_inline('Created By', $auth_user->full_name, 'label-grey bt-label-small', 4, 7, \App\Helpers\FormComponentHelper::SIZE_MEDIUM) }}
                        {{ Form::row_label_inline('Campaign Type', \App\Models\Campaign::$campaign_type_map[$type], 'label-grey bt-label-small', 4, 7, \App\Helpers\FormComponentHelper::SIZE_MEDIUM) }}
                    </div>
                </div>
                {{ Form::separator_row_bottom('grey-divider') }}
                {{ Form::separator_row_empty() }}
                <div class="row">
                    <div class="col-sm-6 detail-left-side">
                        {{ Form::row_text_inline('name', "Campaign Name", $campaign->campaign ? $campaign->name : null, 4, 7, \App\Helpers\FormComponentHelper::SIZE_MEDIUM) }}
                        {{ Form::row_text_inline('default_from_name', "Default From Name", $campaign->campaign ? $campaign->default_from_name : $business->company, 4, 7, \App\Helpers\FormComponentHelper::SIZE_MEDIUM) }}
                        @if($type == \App\Models\Campaign::CAMPAIGN_TYPE_ENGAGE)
                            {{ Form::row_select_inline('approximate_duration','Approximate Duration', $campaign->campaign ? $campaign->approximate_duration : null, \App\Models\Campaign::$approximate_duration_map, 4, 7, \App\Helpers\FormComponentHelper::SIZE_MEDIUM, null, 'Select One') }}
                        @endif
                        @if($type == \App\Models\Campaign::CAMPAIGN_TYPE_BUILD)
                            {{ Form::row_date_inline('start_date','Start Date',$campaign->campaign ?  Carbon\Carbon::parse($campaign->start_date)->format('m/d/Y') : Carbon\Carbon::today()->format('m/d/Y'), 4, 7, \App\Helpers\FormComponentHelper::SIZE_MEDIUM, 'date-picker') }}
                        @endif

                        <div class="row">
                            {{ Form::label_ex('Default Delay', \App\Helpers\FormComponentHelper::SIZE_MEDIUM, 'default_delay', 4) }}
                            {{ Form::number_ex('default_delay', is_numeric($campaign->default_delay) ? $campaign->default_delay : \App\Models\Campaign::DEFAULT_DELAY, 7) }}
                        </div>
                        {{ Form::row_select_inline('business_milestone','Milestone', $campaign->campaign ? $campaign->business_milestone : null, $business->active_business_milestone_select(), 4, 7, \App\Helpers\FormComponentHelper::SIZE_MEDIUM, null, 'Select') }}

                        @if($type == \App\Models\Campaign::CAMPAIGN_TYPE_BUILD)
                            {{ Form::row_text_inline('default_sendtime', "Default Send Time", $campaign->default_sendtime ? $campaign->default_sendtime : \App\Models\Campaign::DEFAULT_SENDTIME, 4, 7, \App\Helpers\FormComponentHelper::SIZE_MEDIUM) }}
                            <div class="row">
                                {{ Form::label_ex('Default Duration', \App\Helpers\FormComponentHelper::SIZE_MEDIUM, 'default_duration', 4) }}
                                {{ Form::number_ex('default_duration', is_numeric($campaign->default_duration) ? $campaign->default_duration : \App\Models\Campaign::DEFAULT_DURATION, 7) }}
                            </div>
                        @endif

                        {{ Form::row_label_inline('Industry', $industry->industry_name, 'label-grey bt-label-small label-cat', 4, 7, \App\Helpers\FormComponentHelper::SIZE_MEDIUM) }}
                        {{ Form::hidden('industry', $industry->industry) }}
                        {{ Form::hidden('created_by', $auth_user->user) }}
                        @if($campaign->campaign)
                            {{ Form::hidden('type', $campaign->type) }}
                        @else
                            {{ Form::hidden('type', $type) }}
                        @endif

                        @if ($type == \App\Models\Campaign::CAMPAIGN_TYPE_ENGAGE)
                            {{ Form::row_select_inline('when_done','When Done', $campaign->campaign ? $campaign->when_done : \App\Models\Campaign::WHEN_DONE_NOTHING, \App\Models\Campaign::$when_done_map, 4, 7, \App\Helpers\FormComponentHelper::SIZE_MEDIUM, 'on_when_done_select(this.value);', 'Select') }}
                            {{ Form::select_ex('when_done_campaign', $campaign->campaign ? $campaign->when_done_campaign : null, $business->engage_campaign_select($campaign->campaign), 7, 4, null, null, 'Select') }}
                            {{ Form::select_multiple('when_done_mailing[]', sizeof(session()->getOldInput()) > 0 ? Form::old('when_done_mailing[]') : $when_done_audience, $audience->pluck('name', 'marketing_list'), 7, 4, null, 'when_done_mailing' ) }}
                            <div class="error-container-when_done_mailing no-left-pad col-md-7 col-xs-7 col-md-offset-4 col-xs-offset-4 ">
                            </div>
                        @endif
                    </div>
                    <div class="col-sm-6 detail-right-side">
                        {{ Form::row_select_inline('diction','Diction',$campaign->campaign ? $campaign->diction : null, \App\Models\Campaign::$diction_map, 4, 7, \App\Helpers\FormComponentHelper::SIZE_MEDIUM, null, 'Select') }}
                        {{ Form::row_select_inline('tone_1','Tone',$campaign->campaign ? $campaign->tone_1 : null, \App\Models\Campaign::$tone_1_map, 4, 7, \App\Helpers\FormComponentHelper::SIZE_MEDIUM, null, 'Select') }}
                        {{ Form::row_select_inline('tone_2',' ',$campaign->campaign ? $campaign->tone_2 : null, \App\Models\Campaign::$tone_2_map, 4, 7, \App\Helpers\FormComponentHelper::SIZE_MEDIUM, null, 'Select') }}
                        {{ Form::row_select_inline('tone_3',' ',$campaign->campaign ? $campaign->tone_3 : null, \App\Models\Campaign::$tone_3_map, 4, 7, \App\Helpers\FormComponentHelper::SIZE_MEDIUM, null, 'Select') }}
                        {{ Form::row_select_inline('delivery','Delivery',$campaign->campaign ? $campaign->delivery : null, \App\Helpers\RequestDataHelper::$delivery_map, 4, 7, \App\Helpers\FormComponentHelper::SIZE_MEDIUM, null, 'Select') }}
                        {{ Form::row_select_inline('voice','Voice',$campaign->campaign ? $campaign->delivery : null, \App\Helpers\RequestDataHelper::$voice_map, 4, 7, \App\Helpers\FormComponentHelper::SIZE_MEDIUM, null, 'Select') }}
                        {{-- {{ Form::row_checkbox_inline('campaign_driver[]',$business_driver->income_stream_name, false, 4, 7) }}--}}
                        <div class="row error-container-audience"></div>
                        <div class="row">
                            <div class="no-left-pad col-md-4 col-xs-4">
                                <label class="bt-label bt-label-medium">Audience</label>
                            </div>
                            <div class="build no-left-pad col-md-7 col-xs-7">
                                <label class="bt-label bt-label-small label-grey send-to-all">Sends to all when no list selected</label>
                            </div>
                            @if(!empty($audience))
                                <div id="audience_wrapper">
                                @foreach($audience as $key => $aud)
                                    <div class="no-left-pad col-md-4 col-xs-4 @if($aud->engage == 1) engage @else build @endif "></div>
                                    <div class="no-left-pad col-md-7 col-xs-7 @if($aud->engage == 1) engage @else build @endif ">
                                        {{ Form::checkbox_ex('audience['.$aud->marketing_list.']', !empty($campaign_audience) && in_array($aud->marketing_list, $campaign_audience) ? true : null,
                                            $aud->name, null, null, null, null, null, $aud->marketing_list) }}
                                    </div>
                                @endforeach
                                </div>
                                <div class="no-left-pad col-md-offset-4">{{ Form::button_ex("Add Mailing List","add_mailing_list();","add_mailing_list_btn", null, \App\Helpers\FormComponentHelper::SIZE_TINY) }}</div>
                            @endif
                        </div>
                    </div>
                </div>
                {{ Form::separator_row_bottom('grey-divider') }}
                <div class="row bt-button-row text-right">
                    @if(!$campaign->campaign)
                        {{ Form::button_ex("Add Recording Links","post_create_campaign_ajax();","add_recording_links_btn") }}
                    @endif

                    {{ Form::button_save() }}
                    @if($campaign->campaign)
                        {{ Form::button_link('CANCEL', action('CampaignController@campaign_content', compact('business', 'campaign'))) }}
                    @else
                        {{ Form::button_link('CANCEL', action('CampaignController@campaigns', compact('business')), 'cancel_btn') }}
                    @endif
                </div>
                {{ Form::close() }}
            </div>
            @if($campaign->campaign)
                <div class="grey-bg curve_container" id="campaign_recording_links">
                    @include('campaign._edit_campaign_recording_links')
                </div>
            @endif
        </div>
    </div>



<div class="modal fade" id="add_mailing_list_modal" tabindex="-1" role="dialog" aria-labelledby="add_mailing_list_modalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Add Mailing List</h4>
            </div>
            <div class="modal-body">
                <div class="alert alert-danger" id="add_mailing_list_error"></div>
                {{ Form::hidden('marketing_list_business',$business->x_org) }}
                {{ Form::hidden('marketing_list_campaign_type',$type) }}
                {{ Form::text_ex('marketing_list_name') }}
            </div>
            <div class="modal-footer">
                {{ Form::button_ex('Ok', 'save_add_mailing_list()') }}
                {{ Form::button_ex('Cancel', 'close_add_mailing_list()') }}
            </div>
        </div>
    </div>
</div>



@endsection
@section('page_script')
    {!! HTML::script('/js/moment.min.js') !!}
    {!! HTML::script('/js/daterangepicker.js') !!}
    {!! Html::script('/js/jquery.timepicker.js') !!}
    {!! Html::script('/js/multiple-select.js') !!}

    <script type="text/javascript">

        $(window).load(function(){
            $('#type').change();
            $('li:contains("Campaign name is required.")').remove();
            $('li:contains("Default from name is required.")').remove();
            $('li:contains("Please select diction.")').remove();
            $('li:contains("Please select tone 1.")').remove();
            $('li:contains("Please select tone 2.")').remove();
            $('li:contains("Please select tone 3.")').remove();
            if(!jQuery.trim($('.alert-danger ul').html()).substring(0, 10))
            {
                $('.alert-danger ul').parent().remove();
            }
        });

        function add_mailing_list(){
            $('#add_mailing_list_modal').modal('show');
        }

        function close_add_mailing_list() {
            $('#add_mailing_list_error').hide();
            $('#add_mailing_list_modal').modal('hide');
        }

        function save_add_mailing_list() {
            $('#add_mailing_list_error').hide();
            var name = $('#marketing_list_name').val();
            var business = $('input[name="marketing_list_business"]').val();
            var type = $('input[name="marketing_list_campaign_type"]').val();

            $.ajax({
                type : 'POST',
                data : {name : name,business : business,type : type},
                url : "{{ action('CampaignController@save_add_mailing_list',compact('business')) }}",
                success : function (msg) {
                    if(msg.message == 'success'){
                        var new_chbox = '<div class="no-left-pad col-md-7 col-xs-7 col-md-offset-4 build "><label class="bt-label bt-checkbox-label " for="audience['+msg.data.marketing_list+']">';
                            new_chbox +='<input class="bt-checkbox " id="audience['+msg.data.marketing_list+']" name="audience['+msg.data.marketing_list+']" value="'+msg.data.marketing_list+'" type="checkbox">';
                            new_chbox += '&nbsp;' + msg.data.name;
                            new_chbox +'</label></div>';
                        $('#audience_wrapper').append(new_chbox);
                        $('#marketing_list_name').val('');
                        close_add_mailing_list();
                    }
                }
            }).fail(function(jqXHR){
                var message = jQuery.parseJSON(jqXHR.responseText);
                $('#add_mailing_list_error').show();
                $('#add_mailing_list_error').html(message.name)
            });

        }

        function post_create_campaign_ajax() {
            var campaign_form = $('form').serialize();
            $.ajax({
                type: "POST",
                url: '{{ action('CampaignController@post_create_campaign_ajax', compact('business')) }}',
                data: campaign_form,
                success: function (result) {
                    window.location = result.redirect_url;
                },
                error: campaign_post_errors
            });
        }

        function campaign_post_errors(xhr) {
            if (xhr.status === 422) // validation error
            {
                var errors = JSON.parse(xhr.responseText);
                errors = errors.errors;
                Object.keys(errors).forEach(function (k) {
                    // if no audience is selected, show the validation message and hide that message when an audience
                    // checkbox is clicked
                    if(k == 'audience') {
                        $('.error-container-audience').append("<p class='validation-message'>" + errors[k] + "</p>");
                        $('#audience_wrapper input.bt-checkbox').on('click', function () {
                            $('.error-container-audience p.validation-message').remove();
                        });
                    }
                    var element = document.getElementById(k);
                    $(element).parent().append("<p class='validation-message'>" + errors[k] + "</p>");
                    $(element).css('border-color', '#cc0000');
                    $(element).on('input', function () {
                        $(this).css('border-color', '#797979');
                        $('.validation-message').remove();
                    });
                });
            }
        }

        $(document).ready(function(){
            init_daterangepicker('date-picker');
            $('#default_sendtime').timepicker();
            @if($type == \App\Models\Campaign::CAMPAIGN_TYPE_BUILD)
                $('.build').show();
                $('.engage').hide();
            @else
                $('.build').hide();
                $('.engage').show();
            @endif

            @if($campaign->campaign)
                $('#type').attr("disabled", true);
            @endif

            $('.bt-checkbox.type-engage').click(function(){
                $('.error-container-audience').hide();
            });
            $('#when_done_mailing').multipleSelect();
            on_when_done_select('{{ $campaign->when_done }}');
            // add delete functionality on page load
            $('.link-remove').on('click', function (e) {
                var link = $(this).attr('data-id');
                e.preventDefault();
                showYesNoModalAlert('Delete Link', 'Are you sure you want to delete this link?', "delete_link(" + link + ")")
            })
        });

        var link_count = 0;

        function add_link(campaign, business) {
            var old_count = link_count;
            $.ajax({
                type: 'POST',
                url: '{{ action('CampaignController@add_campaign_recording_link')  }}',
                data: {campaign: campaign, count: link_count++, business: business},
                success: function (result) {
                    $('div#recording_links').append(result.view).hide().fadeIn();
                    $('.new-link-remove').on('click', function (e) {
                        var link_count = $(this).attr('data-id');
                        e.preventDefault();
                        showYesNoModalAlert('Delete Link', 'Are you sure you want to delete this link?', "delete_new_link(" + link_count + ")");
                    });
                    // show google drive recording link input
                    if ($("[id*=campaign_recording_link_select]").change(function () {
                        var count = $(this).closest('.business-recording-select').attr('data-id');
                        if ($(this).val() === '{{ \App\Http\Controllers\CampaignController::GOOGLE_DRIVE_RECORDING }}')
                        {
                            $('#campaign_recording_link_text_' + count).css('display', 'inherit').show();
                        } else {
                            $('#campaign_recording_link_text_' + count).hide();
                        }
                    }));
                }
            })
        }

        function edit_links(campaign, business) {
            $('div#view_campaign_recording_links').fadeOut(400, function () {
                $(this).remove();
            });
            $.ajax({
                type: "POST",
                url: '{{ action('CampaignController@edit_campaign_recording_link') }}',
                data: {campaign: campaign, business: business},
                success: function (result) {
                    $('div#campaign_recording_links').append(result.view).hide().fadeIn();
                    $('.link-remove').on('click', function (e) {
                        var link = $(this).attr('data-id');
                        e.preventDefault();
                        showYesNoModalAlert('Delete Link', 'Are you sure you want to delete this link?', "delete_link(" + link + ")")
                    });
                }
            });
        }

        function cancel_edit_links(campaign, business) {
            $('div#edit_campaign_recording_links').fadeOut(400, function () {
                $(this).remove();
            });
            $.ajax({
                type: "GET",
                url: '{{ action('CampaignController@cancel_edit_campaign_recording_links') }}',
                data: {campaign: campaign, business: business},
                success: function (result) {
                    $('div#campaign_recording_links').append(result.view).hide().fadeIn();
                }
            });
        }

        function save_recording_links(refresh) {
            var links = $('form#edit_recording_links_form');
            $.ajax({
                type: "POST",
                url: '{{ action('CampaignController@save_campaign_recording_links') }}',
                data: links.serialize(),
                success: function (result) {
                    if (refresh) {
                        $('div#edit_campaign_recording_links').fadeOut(400, function () {
                            $(this).remove();
                        });
                        $('div#campaign_recording_links').append(result.view).hide().fadeIn();
                    }
                },
                error: campaign_recording_link_error
            });
        }

        function campaign_recording_link_error(xhr) {
            if (xhr.status === 422) // validation error
            {
                var errors = JSON.parse(xhr.responseText);
                errors = errors.errors;
                Object.keys(errors).forEach(function (k) {
                    var split = k.split('.');
                    var input = $('#' + split[0] + '_' + split[1]).children().children().children('div:nth-child(2)').children('input:first');
                    $('#' + split[0] + '_' + split[1]).append("<p class='validation-message'>" + errors[k] + "</p>");
                    $(input).css('border-color', '#cc0000');
                    $(input).on('input', function () {
                        $(this).css('border-color', '#797979');
                        $('.validation-message').remove();
                        $('#save_links').prop('disabled', false);
                    });
                });
            }
        };

        function delete_link(link) {
            $.ajax({
                type: "POST",
                url: '{{ action('CampaignController@delete_campaign_recording_link') }}',
                data: {campaign_recording_link: link},
                success: function (result) {
                    $('div#campaign_recording_link_' + link).remove();
                }
            });
            $('#modal-alert').modal('hide');
        }

        function delete_new_link(new_link_count) {
            $('div#new_campaign_recording_link_' + new_link_count).remove();
            $('#modal-alert').modal('hide');
            return true;
        }

        function on_when_done_select(value)
        {
            var when_done_mailing = $('#when_done_mailing').parent().find('.ms-parent');
            var when_done_campaign = $('#when_done_campaign');
            switch (value)
            {
                case '{{ \App\Models\Campaign::WHEN_DONE_CAMPAIGN }}':
                    $('.error-container-when_done_mailing').find('.validation-message').remove();
                    when_done_mailing.hide();
                    when_done_campaign.show();
                    break;
                case '{{ \App\Models\Campaign::WHEN_DONE_MAILING }}':
                    when_done_campaign.parent().find('.validation-message').remove();
                    when_done_mailing.show();
                    when_done_campaign.hide();
                    break;
                default:
                    $('.error-container-when_done_mailing').find('.validation-message').remove();
                    when_done_campaign.parent().find('.validation-message').remove();
                    when_done_campaign.hide();
                    when_done_mailing.hide();
                    break;
            }
        }

    </script>
@endsection
@section('page_style')
    {!! HTML::style('/css/daterangepicker.css') !!}
    {!! HTML::style('/css/daterangepicker_custom.css') !!}
    {!! HTML::style('/css/jquery.timepicker.css') !!}
    {!! HTML::style('/css/multiple-select.css') !!}

    <style>
        .campaign-detail-wrapper .label-grey {
            height: 44px;
        }
        .send-to-all {
            height: 20px !important;
        }

        #add_mailing_list_error{
            display: none;
        }

        #add_mailing_list_btn {
            margin-bottom: 10px;
        }

        .header-top .label-grey {
            height: 35px!important;
        }

        .input-group.bt-input-group-div
        .input-group-addon.bt-input-group-prefix-addon {
            display: table-cell;
            float: left;
            width: 14.5%;
        }

        .input-group.bt-input-group-div .bt-date {
            display: table-cell;
            width: 80.5%;
        }

        .input-group.bt-input-group-div p.validation-message {
            display: table-row;
        }

        #date-picker_group {
            width:100%;
        }

        .label-cat {
            height: 22px !important;
        }

        .label-drivers {
            height: 33px !important;
        }

        .ui-timepicker-wrapper{
            width: 293px;
        }

        .validation-message {
            word-wrap: break-word;
            white-space: normal !important;
        }

    </style>
@endsection