@extends('admin.layout.default')

@section('title', 'Contact')

@section('body')

    <div class="container-xl">

        <div>

            <edit-contact
                :action="'{{ url('admin/contact') }}'"
                @if(!empty($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 les informations de contact
                        </div>

                        <div class="card-body">

                            <div class="card-block">

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

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

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

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

            </edit-contact>

        </div>

    </div>

@endsection