@extends('admin.layout.default')

@section('title', trans('admin.blog.actions.create'))

@section('body')

    <div class="container-xl">

        <blog-form
            :action="'{{ url('admin/blogs') }}'"
            :locales="{{ json_encode($locales) }}"
            :available-tags="{{ $tags->toJson() }}"
            :send-empty-locales="false"
            :c-locale="'{{ app()->getLocale() }}'"
            :nolang-media-collection-names="['cover']"
            :media-collection-names="['gallery']"
            v-cloak
            inline-template>

            <form class="form-horizontal form-create" method="post" @submit.prevent="onSubmit" :action="action" novalidate>
                
                <div class="row">
                    <div class="col">
                        <div class="card">
                            <div class="card-header">
                                <i class="fa fa-plus"></i> {{ trans('admin.blog.actions.create') }}
                            </div>
                            <div class="card-body">
                                @include('admin.blog.components.form-elements')

                                <hr :class="isFormLocalized ? 'col-md' : 'col-md-8'" style="box-sizing: border-box;">

                                <!-- gallery -->
                                <div class="row justify-content-around">
                                    @foreach($locales as $locale)
                                    <div v-show="shouldShowLangGroup('{{ $locale }}')" v-cloak :class="isFormLocalized ? 'col-md' : 'col-md-8'">
                                        @include('admin.includes.media-uploader', [
                                            'mediaCollection' => app(App\Models\Blog::class)->getMediaCollection('gallery'.$locale),
                                            'label' => trans('admin.media.gallery').' '.Str::upper($locale)
                                        ])
                                    </div>
                                    @endforeach
                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="col-md-12 col-lg-12 col-xl-5 col-xxl-4">
                        @include('admin.blog.components.form-elements-right', ['isCreate' => true])

                        <!-- cover -->
                        <div class="card">
                            @include('admin.includes.media-uploader', [
                                'mediaCollection' => app(App\Models\Blog::class)->getMediaCollection('cover'),
                                'label' => trans('admin.media.cover-image')
                            ])
                        </div>

                    </div>
                </div>
                
                <button type="submit" class="btn btn-primary fixed-cta-button button-save" style="bottom: 40px;" :disabled="submiting">
                    <span>
                        <i class="fa" :class="submiting ? 'fa-spinner' : 'fa-save'"></i>
                        {{ trans('admin.btn.save') }}
                    </span>
                </button>
                <button type="submit" style="display: none; bottom: 40px;" class="btn btn-success fixed-cta-button button-saved" :disabled="submiting" :class="">
                    <span>
                        <i class="fa" :class="submiting ? 'fa-spinner' : 'fa-check'"></i>
                        <span>{{ trans('admin.btn.saved') }}</span>
                    </span>
                </button>

            </form>

        </blog-form>

    </div>

@endsection