@extends('admin.layout.default')

@section('title', 'Popup')

@section('body')

    <div class="container-xl">

        <div>

            <popup
                :action="'{{ url('admin/popup') }}'"
                @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 popup
                        </div>

                        <div class="card-body">

                            <div class="card-block">

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

                                <div class="form-group row align-items-center" :class="{'has-danger': errors.has('info'), 'has-success': this.fields.info && this.fields.info.valid }">
                                    <label for="info" 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'">
                                        <input type="text" v-model="form.info" @input="validate($event)" class="form-control" :class="{'form-control-danger': errors.has('info'), 'form-control-success': this.fields.info && this.fields.info.valid}" id="info" name="info" placeholder="Description">
                                        <div v-if="errors.has('info')" class="form-control-feedback form-text" v-cloak>@{{ errors.first('info') }}</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 | Texte">
                                        <div v-if="errors.has('link_text')" class="form-control-feedback form-text" v-cloak>@{{ errors.first('link_text') }}</div>
                                    </div>
                                </div>

                                <div class="form-group row" :class="{'has-danger': errors.has('activated'), 'has-success': this.fields.activated && this.fields.activated.valid }">
                                    <div class="ml-md-auto" :class="isFormLocalized ? 'col-md-8' : 'col-md-9'">
                                        <input class="form-check-input" id="activated" type="checkbox" v-model="form.activated" v-validate="''" data-vv-name="activated"  name="activated_fake_element">
                                        <label class="form-check-label" for="activated">
                                            {{ trans('admin.admin-user.columns.activated') }}
                                        </label>
                                        <input type="hidden" name="activated" :value="form.activated">
                                        <div v-if="errors.has('activated')" class="form-control-feedback form-text" v-cloak>@{{ errors.first('activated') }}</div>
                                    </div>
                                </div>
                            </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>

            </popup>

        </div>

    </div>

@endsection