@extends('layouts.master')
@section('page_title', 'Tablet Settings')
@section('content')
    <div class="container collect-settings-wrapper">
        {{ Form::page_header("Tablet Settings", "paper_stack") }}
        {{ Form::open(['url' => action('CollectController@store_collect_settings', compact('business')),
            'autocomplete' => 'off','files' => true, 'onsubmit_function'=>"do_form_submit"]) }}
        <div class="row">
            <div class="grey-bg curve_container">
                @include('collect._collect_promo', [
                    'title' => 'Rewards Program',
                    'create_title'=>  'CREATE REWARD PROMO',
                    'type' => 'reward',
                    'collect_pk' => $collect->rewards_promo])
                {{ Form::separator_row('grey-divider thin-divider') }}

                @include('collect._collect_promo', [
                    'title' => 'Email Newsletter Signup Promotion',
                    'create_title'=>  'CREATE EMAIL SIGNUP PROMO',
                    'type' => 'email',
                    'collect_pk' => $collect->email_signup_promo])
                {{ Form::separator_row('grey-divider thin-divider') }}

                @include('collect._collect_promo', [
                    'title' => '"Fish Bowl" Promotion',
                    'create_title'=>  'CREATE FISHBOWL PROMO',
                    'type' => 'fishbowl',
                    'collect_pk' => $collect->fishbowl_promo])
                {{ Form::separator_row('grey-divider thin-divider') }}

                <div class="row bottom-padding">
                    {{ Form::label_title("Image") }}
                </div>
                <div class="row bottom-padding">
                    @if($collect->background_image != null)
                        <div id="image_row" class="row"><div class="col-md-12">
                                {{ HTML::image($collect->background_image,$collect->background_image,['height'=>'427','width'=>'200px']) }}
                            </div></div>
                        <div class="row bottom-padding"><div class="col-md-12">
                                <span id="filename"></span>
                            </div></div>
                        <div class="row">
                            <div class="col-md-12">
                                {{ Form::button_tiny('Change Image', null, 'change_image') }}
                            </div>
                            <div class="no-left-pad col-md-12">
                                <div class="error-container-background_image"></div>
{{--
                                @if ($errors->any())
                                    @foreach ($errors->all() as $error)
                                        <span style="color: #ff0000; font-size: 14px">{{ $error }}</span>
                                    @endforeach
                                @endif
--}}
                            </div>
                        </div>
                        <div class="hidden">
                            {{ Form::file('background_image', ['id' => 'image', 'class' => 'source-image col-md-6']) }}
                        </div>
                    @else
                        {{ Form::label_ex("Background Image", \App\Helpers\FormComponentHelper::SIZE_SMALL, 'background_image', 2) }}
                        <div class="no-left-pad col-md-6 col-xs-6">
                            {{ Form::file('background_image', ['id' => 'image', 'class' => 'source-image']) }}
                        </div>
                    @endif
                </div>
                {{ Form::separator_row('grey-divider thin-divider') }}
                <div class="row bottom-padding">
                    {{ Form::label_title("Settings") }}
                </div>
                {{ Form::row_text_inline('primary_color', "Primary Color", (!$collect->primary_color == null) ? $collect->primary_color : '#333333', 2, 4) }}
                {{ Form::row_percent_inline('primary_color_opacity', "Primary Color Opacity", (!$collect->primary_color_opacity == null) ? $collect->primary_color_opacity : '50', 2, 2) }}
                {{ Form::row_text_inline('text_color', "Text Color", (!$collect->text_color == null) ? $collect->text_color : '#FFFFFF', 2, 4) }}
                {{ Form::row_percent_inline('text_color_opacity', "Text Color Opacity", (!$collect->text_color_opacity == null) ? $collect->text_color_opacity : '100', 2, 2) }}
                {{ Form::row_text_inline('background_color','Background Color',(!$collect->background_color == null) ? $collect->background_color : '#333333', 2, 4) }}
                {{ Form::row_select_inline('font','Font',(!$collect->font == null) ? $collect->font : 'roboto',\App\Models\Collect::$font_map, 2, 6) }}
                {{ Form::row_select_inline('button_style','Button Style',(!$collect->button_style == null) ? $collect->button_style : 'outline',\App\Models\Collect::$button_style_map, 2, 6) }}
                {{ Form::row_select_inline('punches','Punches',(!$collect->punches == null) ? $collect->punches : 10,\App\Models\Collect::$punch_map, 2, 3) }}
                {{ Form::row_text_inline('button_background','Button Background',(!$collect->button_background == null) ? $collect->button_background : '#FFFFFF', 2,4) }}
                {{ Form::row_text_inline('button_font_color','Button Font Color',(!$collect->button_font_color == null) ? $collect->button_font_color : '#FFFFFF', 2,4) }}
                {{ Form::row_text_inline('button_text','Button Text',(!$collect->button_text == null) ? $collect->button_text : 'Join our mailing list and get this offer.', 2,8) }}
                {{ Form::row_text_inline('text_deal_text','Text Deal Text',(!$collect->text_deal_text == null) ? $collect->text_deal_text : 'Send me text deals!', 2,8) }}
                {{ Form::row_checkbox_inline('collect_cellphone','Collect cell phone numbers',($collect->collect_cellphone == 1) ? true : false, 2, 8) }}
                {{ Form::row_checkbox_inline('send_special_deals','Send special deals just to cell numbers',($collect->send_special_deals == 1) ? true : false, 2, 8) }}
                {{ Form::row_checkbox_inline('ready_to_upgrade','Ready to upgrade',($collect->ready_to_upgrade == 1) ? true : false, 2, 8) }}

                {{ Form::separator_row_bottom('grey-divider') }}

                <div class="row bt-button-row text-right">
                    {{ Form::button_save('Update') }}
                </div>
            </div>
        </div>
        {{ Form::close() }}
    </div>
    @include('shared._collect_promo_modal')
@endsection

@section('page_script')
    @include('shared_script._collect_promo_script')
    <script>
        function create_promo(btn) {
            var promo_type;
            if(btn.id == 'create_reward_btn')
                promo_type = '{{ \App\Models\Promo::PROMO_TYPE_CAMPAIGN_REWARD }}';
            else if(btn.id == 'create_email_btn')
                promo_type = '{{ \App\Models\Promo::PROMO_TYPE_CAMPAIGN_EMAIL_SIGNUP }}';
            else if(btn.id == 'create_fishbowl_btn')
                promo_type = '{{ \App\Models\Promo::PROMO_TYPE_CAMPAIGN_FISHBOWL }}';
            create_collect_promo(promo_type);
        }

        function edit_promo(btn) {
            var promo_to_edit;
            if(btn.id == 'edit_reward_btn')
            {
                promo_to_edit = $('#reward_promo_id').val();
            }
            else if(btn.id == 'edit_email_btn')
            {
                promo_to_edit = $('#email_promo_id').val();
            }
            else if(btn.id == 'edit_fishbowl_btn')
            {
                promo_to_edit = $('#fishbowl_promo_id').val();
            }
            else
                promo_to_edit = '';
            edit_collect_promo(promo_to_edit);
        }


        $(document).ready(function () {
            $('#change_image').click(function () {
                $('#image').click();
            });

            $('#image').on('change',function () {
                var filename = $(this).val().split('\\').pop();
                $('#filename').html(filename);
                $('#image_row').hide();
            });

            $('#reward_promo_id').change(function () {
                $('.reward-promo-lbl').hide();
                $('#reward-'+$(this).val()).text();
                $('#reward-'+$(this).val()).show();
            });
            @if($collect->rewards_promo)
                $('#reward_promo_id').trigger('change');
            @endif
            $('#email_promo_id').change(function () {
                $('.email-promo-lbl').hide();
                $('#email-'+$(this).val()).text();
                $('#email-'+$(this).val()).show();
            });
            @if($collect->email_signup_promo)
                $('#email_promo_id').trigger('change');
            @endif
            $('#fishbowl_promo_id').change(function () {
                $('.fishbowl-promo-lbl').hide();
                $('#fishbowl-'+$(this).val()).text();
                $('#fishbowl-'+$(this).val()).show();
            });
            @if($collect->fishbowl_promo)
                $('#fishbowl_promo_id').trigger('change');
            @endif
        });

        if(!($('input[name="reward_switch"]').is(':checked')))
            $('#reward_program').hide();
        else
            $('#reward_program').show();
        if(!($('input[name="email_switch"]').is(':checked')))
            $('#email_program').hide();
        else
            $('#email_program').show();
        if(!($('input[name="fishbowl_switch"]').is(':checked')))
            $('#fishbowl_program').hide();
        else
            $('#fishbowl_program').show();

        function check_promotion(switch_id, element_id, message) {
            if ($('#'+switch_id).is(':checked')) {
                var element = $('#'+element_id);
                element.parent().find('*').removeClass('validation-error');
                element.parent().find('.validation-message').remove();
                if (element.val() == '' || element.val() == null) {
                    add_validation_error(element, element_id, [message]);
                    return false;
                }
            }
            return true;
        }

        function do_form_submit() {
            // we are going to do the client side verification on these fields since it's a pain
            // when we have reload it after getting server side errors
            var result = check_promotion('reward_switch', 'reward_promo_id', 'Please select a reward promotion');
            result = check_promotion('email_switch', 'email_promo_id', 'Please select an email newsletter signup promotion') && result;
            result = check_promotion('fishbowl_switch', 'fishbowl_promo_id', 'Please select a fishbowl promotion') && result;
            return result;
        }

        function reward_switch_change(value) {
            if(!value)
                $('#reward_program').stop().slideUp();
            else
                $('#reward_program').stop().slideDown();
            $('#reward_promo_id').trigger('change');
        }

        function email_switch_change(value) {
            if(!value)
                $('#email_program').stop().slideUp();
            else
            {
                $('#email_program').stop().slideDown();
                $('input[name="fishbowl_switch"]').prop('checked', false);
                $('#fishbowl_program').stop().slideUp();
            }
            $('#email_promo_id').trigger('change');
        }

        function fishbowl_switch_change(value) {
            if(!value)
                $('#fishbowl_program').stop().slideUp();
            else
            {
                $('input[name="email_switch"]').prop('checked', false);
                $('#fishbowl_program').stop().slideDown();
                $('#email_program').stop().slideUp();
            }
            $('#fishbowl_promo_id').trigger('change');
        }
    </script>
@endsection

@section('page_style')
    <style>
        .collect-settings-wrapper .detail-container {
            padding: 30px!important;
            margin: 0 0 0 0;
        }
        .promo-select-box {
            margin-bottom: 5px;
        }
        .bt-textarea {
            border: none;
            outline: 1px solid #696969;
        }
        .bt-textarea:focus{
            outline: 1px solid #696969;
        }
        .bt-tiny-mce {
            border: none !important;
            outline: 1px solid #696969 !important;
        }
        .mce-edit-focus {
            outline: none;
        }
    </style>
@endsection