@extends('admin.layout.default')

@section('title', trans('admin.service.actions.edit', ['name' => $service->title]))

@section('styles')
    @if(true)
        <style>
            .dropzone .dz-preview .dz-details {
                opacity: 0!important;
            }
            .dropzone .dz-preview:hover .dz-details {
                opacity: 1!important;
            }
        </style>
    @endif
@endsection

@section('body')

    <div class="container-xl">
        <div class="card">

            <service-form
                :action="'{{ $service->resource_url }}'"
                :data="{{ $service->toJsonAllLocales() }}"
                :locales="{{ json_encode($locales) }}"
                :service_categories="{{ $service_categories->toJson() }}"
                :faq_categories="{{ $faq_categories->toJson() }}"
                :send-empty-locales="false"
                :media-collection-names="['gallery','cover','files']"
                v-cloak
                inline-template>

                <form class="form-horizontal form-edit" method="post" @submit.prevent="onSubmit" :action="action" novalidate>

                    <div class="card-header">
                        <i class="fa fa-pencil"></i> {{ trans('admin.service.actions.edit', ['name' => $service->title]) }}
                    </div>

                    <div class="card-body">
                        @include('admin.service.components.form-elements')

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

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

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

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

                    </div>

                    <div class="card-footer pt-0 pt-sm-3 pt-md-4 pt-lg-5 text-md-left text-right">
                        <button type="submit" class="btn btn-primary" :disabled="submiting">
                            <i class="fa" :class="submiting ? 'fa-spinner' : 'fa-download'"></i>
                            {{ trans('admin.btn.save') }}
                        </button>
                    </div>

                </form>

        </service-form>

        </div>

    </div>

@endsection