@extends('admin.layout.default')

@section('title', 'Slogan')

@section('body')

    <div class="container-xl">

        <div>

            <edit-slogan
                :action="'{{ url('admin/slogan') }}'"
                @if($data)
                :data="{{$data}}"
                @endif
                v-cloak
                inline-template>

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

                    <div class="card">
                        <div class="card-header">
                            <i class="fa fa-pencil"></i> Modifiez le slogan
                        </div>

                        <div class="card-body">

                            <div class="card-block">

                                <div class="form-group row align-items-center" :class="{'has-danger': errors.has('wysiwyg'), 'has-success': this.fields.wysiwyg && this.fields.wysiwyg.valid }">
                                    <label for="wysiwyg" class="col-form-label text-md-right" :class="isFormLocalized ? 'col-md-4' : 'col-md-2'">Description</label>
                                        <div :class="isFormLocalized ? 'col-md-4' : 'col-md-9 col-xl-8'">
                                        <div>
                                            <editor :init="mediaWysiwygConfig" v-model="form.wysiwyg" v-validate="'required'" id="wysiwyg" name="wysiwyg"/>
                                        </div>
                                        <div v-if="errors.has('wysiwyg')" class="form-control-feedback form-text" v-cloak>@{{ errors.first('wysiwyg') }}</div>
                                    </div>
                                </div>

                                <div class="form-group row align-items-center" :class="{'has-danger': errors.has('link'), 'has-success': this.fields.link && this.fields.link.valid }">
                                    <label for="link" class="col-form-label text-md-right" :class="isFormLocalized ? 'col-md-4' : 'col-md-2'">Lien</label>
                                        <div :class="isFormLocalized ? 'col-md-4' : 'col-md-9 col-xl-8'">
                                        <input type="text" v-model="form.link" @input="validate($event)" class="form-control" :class="{'form-control-danger': errors.has('link'), 'form-control-success': this.fields.link && this.fields.link.valid}" id="link" name="link" placeholder="Lien">
                                        <div v-if="errors.has('link')" class="form-control-feedback form-text" v-cloak>@{{ errors.first('link') }}</div>
                                    </div>
                                </div>

                                <div class="form-group row align-items-center" :class="{'has-danger': errors.has('link_text'), 'has-success': this.fields.link_text && this.fields.link_text.valid }">
                                    <label for="link_text" class="col-form-label text-md-right" :class="isFormLocalized ? 'col-md-4' : 'col-md-2'">Lien | Texte</label>
                                        <div :class="isFormLocalized ? 'col-md-4' : 'col-md-9 col-xl-8'">
                                        <input type="text" v-model="form.link_text" @input="validate($event)" class="form-control" :class="{'form-control-danger': errors.has('link_text'), 'form-control-success': this.fields.link_text && this.fields.link_text.valid}" id="link_text" name="link_text" placeholder="Lien">
                                        <div v-if="errors.has('link_text')" class="form-control-feedback form-text" v-cloak>@{{ errors.first('link_text') }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            Ajoutez l'image de fond de préférence avec une grande résolution
                        </div>

                        <div class="col-md-12 text-center">
                            <div class="slogan-upload">
                                @if(!empty($sloganModel) && $sloganModel->hasMedia('slogan'))
                                @include('admin.includes.logo-uploader', [
                                    'mediaCollection' => app(\App\Models\Slogan::class)->getMediaCollection('slogan'),
                                    'media' => $sloganModel->getThumbs200ForCollection('slogan')
                                ])
                                @else
                                @include('admin.includes.logo-uploader', [
                                    'mediaCollection' => app(\App\Models\Slogan::class)->getMediaCollection('slogan'),
                                    'label' => 'Slogan'
                                ])
                                @endif
                            </div>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary fixed-cta-button" :disabled="submiting">
                        <i class="fa" :class="submiting ? 'fa-spinner' : 'fa-save'"></i>
                        {{ trans('admin.btn.save') }}
                    </button>

                </form>

            </edit-slogan>

        </div>

    </div>

@endsection