@php
$languages = activeLanguages();
$page_code = isset($blog) ? 'BLOG_' . $blog->id : 'TMPSET';
@endphp
<div class="row">
    <div class="col-sm-8">
        <fieldset>
            <legend>General</legend>
            <div class="form-group{{ $errors->has('page_title') ? ' has-error' : '' }}">
                {!! Html::decode(Form::label('page_title', 'Page Title / Page Url <i class="fa fa-info-circle" data-toggle="collapse" data-target="#page_title_tip"></i>', ['class' => ''])) !!}

                <div id="page_title_tip" class="collapse pb-2">
                    <span class="text-info">
                        <strong><i class="far fa-lightbulb"></i></strong> The page title will be shown in the URL and the browser tab. Please make sure you include relavent keywords to improve SEO
                    </span>
                </div>

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

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

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

                <span class="help-block">
                    <strong>{{ $errors->first('created_by') }}</strong>
                </span>
            </div>



            <ul class="nav nav-tabs" id="blogGeneralLangTabs" role="tablist">
                @foreach ($languages as $language)
                <li class="nav-item">
                    <a class="nav-link{{ $language->default ? ' active' : '' }}" id="blog-general-{{ $language->id }}-tab" data-toggle="tab" href="#blog-general-{{ $language->id }}" role="tab">{{ getLanguageTranslation($language->name) }}</a>
                </li>
                @endforeach
            </ul>
            <div class="with-tabs">
                <div class="tab-content" id="blogGeneralLangTabsContent">
                    @foreach ($languages as $language)
                    <div class="tab-pane fade{{ $language->default ? ' show active' : '' }}" id="blog-general-{{ $language->id }}" role="tabpanel" aria-labelledby="blog-general-{{ $language->id }}-tab">
                        <div class="form-group{{ $errors->has('title_' . $language->id) ? ' has-error' : '' }}">
                            {!! Form::label('title_' . $language->id, 'Blog Title / Page Internal Name', ['class' => '']) !!}

                            {!! Form::text('title_' . $language->id, getLanguageTranslation(isset($blog) ? $blog->title : '', $language->id), ['class' => 'form-control', 'required', $disabledField]) !!}

                            <span class="help-block">
                                <strong>{{ $errors->first('title_' . $language->id) }}</strong>
                            </span>
                            {{ Form::hidden('title', strtoupper($page_code . '_title')) }}
                        </div>

                        <div class="form-group{{ $errors->has('short_description_' . $language->id) ? ' has-error' : '' }}">
                            {!! Form::label('short_description_' . $language->id, 'Short Description (max 116 chars)', ['class' => '']) !!}

                            {!! Form::textarea('short_description_' . $language->id, getLanguageTranslation(isset($blog) ? $blog->short_description : '', $language->id), ['class' => 'form-control', 'required', 'rows' => 3, 'maxlength' => '116', $disabledField]) !!}

                            <span class="help-block">
                                <strong>{{ $errors->first('short_description_' . $language->id) }}</strong>
                            </span>
                            {{ Form::hidden('short_description', strtoupper($page_code . '_short_description')) }}
                        </div>
                    </div>
                    @endforeach
                </div>
            </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>
        <fieldset class="">
            <legend>Headers & Background Image <i class="fa fa-info-circle" data-toggle="collapse" data-target="#page_header_tip"></i></legend>
            <div class="row">
                <div class="col-sm-6">
                    @include('pagecomponents::headers._single', [
                    'page_code' => $page_code,
                    'main_header_top' => [
                    'id' => 'main_header_top',
                    'name' => 'main_header_top',
                    'label' => 'Main Header Top',
                    'default_value' => isset($blog_page_headers) && isset($blog_page_headers['main_header_top']) ? $blog_page_headers['main_header_top'] : null
                    ],
                    'main_header_middle_big' => [
                    'id' => 'main_header_middle_big',
                    'name' => 'main_header_middle_big',
                    'label' => 'Main Header Middle (Big)',
                    'default_value' => isset($blog_page_headers) && isset($blog_page_headers['main_header_middle_big']) ? $blog_page_headers['main_header_middle_big'] : null
                    ],
                    'main_header_bottom' => [
                    'id' => 'main_header_bottom',
                    'name' => 'main_header_bottom',
                    'label' => 'Main Header Bottom',
                    'default_value' => isset($blog_page_headers) && isset($blog_page_headers['main_header_bottom']) ? $blog_page_headers['main_header_bottom'] : null
                    ],
                    ])
                </div>
                <div class="col-sm-6">
                    <div id="page_header_tip" class="collapse">
                        <span class="text-info">
                            <strong>Image rules:</strong><br />Preferred dimenssions: 1920 × 600 pixels
                            <span>
                    </div>
                    @include('media::layouts.field', [
                    'initialImg' => $has_header_img,
                    'name' => 'blog_header_image',
                    'withPreview' => true,
                    'disabledField' => $disabledField,
                    'imgSrc' => $blog_header_img,
                    ])
                </div>
            </div>
        </fieldset>
    </div>
    <div class="col-sm-4">
        @include('media::layouts.field', [
        'initialImg' => $has_img,
        'name' => 'blog_image',
        'withPreview' => true,
        'disabledField' => $disabledField,
        'imgSrc' => $blog_img,
        'fieldset' => [
        'legend' => 'Image',
        'tip' => '<strong>Image rules:</strong><br />Preferred dimenssions: 1024 x 768 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="blog-content-{{ $language->id }}-tab" data-toggle="tab" href="#blog-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="blog-content-{{ $language->id }}" role="tabpanel" aria-labelledby="blog-content-{{ $language->id }}-tab">
                        <div class="{{ $errors->has('body_' . $language->id) ? ' has-error' : '' }}">
                            {!! Form::textarea('body_' . $language->id, getLanguageTranslation(isset($blog) ? $blog->body : '', $language->id), ['id' => 'blog-body-ckeditor-' . $language->id, 'class' => 'form-control', $disabledField]) !!}

                            <span class="help-block">
                                <strong>{{ $errors->first('body_' . $language->id) }}</strong>
                            </span>
                            {{ Form::hidden('body', strtoupper($page_code . '_body')) }}
                        </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>
    $(document).ready(function() {
        for (var i in languages) {
            CKEDITOR.replace('blog-body-ckeditor-' + i);
        }
    });
</script>
@endpush