@php
$languages = activeLanguages();
$page_code = isset($pillar) ? 'PAGE_SECTION_' . $pillar->id : 'TMPSET';
@endphp
<div class="row">
    <div class="col-sm-8">
        <fieldset>
            <legend>General</legend>
            <div class="form-group{{ $errors->has('page_sections_id') ? ' has-error' : '' }}">
                {!! Form::label('page_sections_id', 'Page', ['class' => '']) !!}

                {!! Form::select('page_sections_id', $page_sections, null, ['class' => 'form-control', 'required', 'autofocus', $disabledField]) !!}

                <span class="help-block">
                    <strong>{{ $errors->first('page_sections_id') }}</strong>
                </span>
            </div>
            <div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
                {!! Form::label('name', 'Name', ['class' => '']) !!}

                {!! Form::text('name', null, ['class' => 'form-control', $disabledField]) !!}

                <span class="help-block">
                    <strong>{{ $errors->first('name') }}</strong>
                </span>
            </div>
            <div class="form-group{{ $errors->has('cta_target') ? ' has-error' : '' }}">
                {!! Form::label('cta_target', 'CTA Target', ['class' => '']) !!}

                {!! Form::select('cta_target', ['' => '-- Select --', 'internal' => 'Internal', 'external' => 'External'], null, ['id' => 'cta_target_field', 'class' => 'form-control', $disabledField]) !!}

                <span class="help-block">
                    <strong>{{ $errors->first('cta_target') }}</strong>
                </span>
            </div>
            <div class="d-none form-group{{ $errors->has('cta_label') ? ' has-error' : '' }}">
                {!! Form::label('cta_label', 'Button Label', ['class' => '']) !!}

                {!! Form::text('cta_label', null, ['id' => 'cta_label_field', 'class' => 'form-control', $disabledField]) !!}

                <span class="help-block">
                    <strong>{{ $errors->first('cta_label') }}</strong>
                </span>
            </div>
            <div class="d-none form-group{{ $errors->has('cta_url') ? ' has-error' : '' }}">
                {!! Form::label('cta_url', 'Url', ['class' => '']) !!}

                {!! Form::text('cta_url', null, ['id' => 'cta_url_field', 'class' => 'form-control', $disabledField]) !!}

                <span class="help-block">
                    <strong>{{ $errors->first('cta_url') }}</strong>
                </span>
            </div>
            <div class="d-none form-group{{ $errors->has('cta_page_sections_id') ? ' has-error' : '' }}">
                {!! Form::label('cta_page_sections_id', 'Target Page', ['class' => '']) !!}

                {!! Form::select('cta_page_sections_id', $cta_available_pages, null, ['id' => 'cta_available_pages_field', 'class' => 'form-control', $disabledField]) !!}

                <span class="help-block">
                    <strong>{{ $errors->first('cta_page_sections_id') }}</strong>
                </span>
            </div>
            <div class="d-none form-group{{ $errors->has('ga_actions_id') ? ' has-error' : '' }}">
                {!! Form::label('ga_actions_id', 'Google Analytics Action' . (count($ga_actions) > 1? ' (Category)' : ''), ['class' => '']) !!}

                {!! Form::select('ga_actions_id', count($ga_actions) > 1 ? $ga_actions : ['' => 'No actions found'], null, ['id' => 'ga_actions_field', 'class' => 'form-control', $disabledField]) !!}

                <span class="help-block">
                    <strong>{{ $errors->first('ga_actions_id') }}</strong>
                </span>
            </div>
            <div class="d-none form-group{{ $errors->has('ga_actions_label') ? ' has-error' : '' }}">
                {!! Form::label('ga_actions_label', 'Google Analytics Action Label', ['class' => '']) !!}

                {!! Form::text('ga_actions_label', null, ['id' => 'ga_actions_label_field', 'class' => 'form-control', $disabledField]) !!}

                <span class="help-block">
                    <strong>{{ $errors->first('ga_actions_label') }}</strong>
                </span>
            </div>
            <div class="form-group{{ $errors->has('active') ? ' has-error' : '' }}">
                <div class="custom-control custom-checkbox">
                    {!! Form::checkbox('active', null, null, ['id' => 'active', 'class' => 'custom-control-input', $disabledField]) !!}
                    {!! Form::label('active', 'Active', ['class' => 'custom-control-label']) !!}
                </div>
            </div>
        </fieldset>
    </div>
    <div class="col-sm-4">
        @include('media::layouts.field', [
            'initialImg' => $has_img,
            'name' => 'pillar_image',
            'withPreview' => true,
            'disabledField' => $disabledField,
            'imgSrc' => $pillar_img,
            'fieldset' => [
                'legend' => 'Image',
                'tip' => '<strong>Image rules:</strong><br />Preferred dimenssions: 1024x768 pixels'
            ]
        ])
    </div>
</div>

<div class="form-group row">
    <div class="col-sm-12">
        <fieldset>
            <legend>Content</legend>
            <ul class="nav nav-tabs" id="contentLangTabs" role="tablist">
                @foreach ($languages as $language)
                <li class="nav-item">
                    <a class="nav-link{{ $language->default ? ' active' : '' }}" id="pillar-content-{{ $language->id }}-tab" data-toggle="tab" href="#pillar-content-{{ $language->id }}" role="tab">{{ getLanguageTranslation($language->name) }}</a>
                </li>
                @endforeach
            </ul>
            <div class="with-tabs">
                <div class="tab-content" id="contentLangTabsContent">
                    @foreach ($languages as $language)
                    <div class="tab-pane fade{{ $language->default ? ' show active' : '' }}" id="pillar-content-{{ $language->id }}" role="tabpanel" aria-labelledby="pillar-content-{{ $language->id }}-tab">
                        <div class="{{ $errors->has('value_' . $language->id) ? ' has-error' : '' }}">
                            {!! Form::textarea('value_' . $language->id, getLanguageTranslation(isset($pillar) ? $pillar->value : '', $language->id), ['id' => 'pillar-value-ckeditor-' . $language->id, 'class' => 'form-control', $disabledField]) !!}

                            <span class="help-block">
                                <strong>{{ $errors->first('value_' . $language->id) }}</strong>
                            </span>
                            {{ Form::hidden('value', strtoupper($page_code . '_value')) }}
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </fieldset>
    </div>
</div>

<script type="">
    var languages = {!! json_encode($languages) !!};
</script>

@push('scripts')
<script src="{{ asset('ckeditor/src/ckeditor.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        for (var i in languages) {
            CKEDITOR.replace('pillar-value-ckeditor-' + i);
        }

        var ctaTargetFieldVal = $('#cta_target_field').val();
        if (ctaTargetFieldVal === 'internal') {
            $('#cta_label_field').parent('.form-group').removeClass('d-none');
            $('#cta_url_field').parent('.form-group').addClass('d-none');
            $('#cta_available_pages_field').parent('.form-group').removeClass('d-none');
            $('#ga_actions_field').parent('.form-group').removeClass('d-none');
            $('#ga_actions_label_field').parent('.form-group').removeClass('d-none');
        } else if (ctaTargetFieldVal === 'external') {
            $('#cta_label_field').parent('.form-group').removeClass('d-none');
            $('#cta_url_field').parent('.form-group').removeClass('d-none');
            $('#cta_available_pages_field').parent('.form-group').addClass('d-none');
            $('#ga_actions_field').parent('.form-group').removeClass('d-none');
            $('#ga_actions_label_field').parent('.form-group').removeClass('d-none');
        } else {
            $('#cta_label_field').parent('.form-group').addClass('d-none');
            $('#cta_url_field').parent('.form-group').addClass('d-none');
            $('#cta_available_pages_field').parent('.form-group').addClass('d-none');
            $('#ga_actions_field').parent('.form-group').addClass('d-none');
            $('#ga_actions_label_field').parent('.form-group').addClass('d-none');
        }

        $('#cta_target_field').change(function(e) {
            if ($(this).val() === 'internal') {
                $('#cta_label_field').parent('.form-group').removeClass('d-none');
                $('#cta_url_field').parent('.form-group').addClass('d-none');
                $('#cta_available_pages_field').parent('.form-group').removeClass('d-none');
                $('#ga_actions_field').parent('.form-group').removeClass('d-none');
                $('#ga_actions_label_field').parent('.form-group').removeClass('d-none');
            } else if ($(this).val() === 'external') {
                $('#cta_label_field').parent('.form-group').removeClass('d-none');
                $('#cta_url_field').parent('.form-group').removeClass('d-none');
                $('#cta_available_pages_field').parent('.form-group').addClass('d-none');
                $('#ga_actions_field').parent('.form-group').removeClass('d-none');
                $('#ga_actions_label_field').parent('.form-group').removeClass('d-none');
            } else {
                $('#cta_label_field').parent('.form-group').addClass('d-none');
                $('#cta_url_field').parent('.form-group').addClass('d-none');
                $('#cta_available_pages_field').parent('.form-group').addClass('d-none');
                $('#ga_actions_field').parent('.form-group').addClass('d-none');
                $('#ga_actions_label_field').parent('.form-group').addClass('d-none');
            }
        });
    });
</script>
@endpush