@extends('admin.layout', ['page'=>"revendeur"])

@section('content')
  <div id="revendeur">
    <div class="content">
      <h1 v-text="form.name"></h1>
    </div>


    <form
      class="column is-12"
      id="saveInfos"
      :action="updateRoute"
      method="POST"
      @submit.prevent="submit"
      @keydown="form.errors.clear($event.target.name)"
    >

        <div class="columns">
            <div class="column name">
                <label class="label">Nom</label>
                <p class="control">
                  <input class="input" :class="{spacer: !form.errors.has('name')}"  type="text" v-model="form.name" id="name" name="name">
                  <span class="help is-danger" v-if="form.errors.has('name')" v-text="form.errors.get('name')"></span>
                </p>
            </div>
        </div>

        <div class="columns continent_pays">
            <div class="column is-6 continent">
                <label class="label">Continent</label>
                <p class="control">
                    <span class="select is-fullwidth">
                        <select class="is-fullwidth" v-model="form.continent_id" @change="loadCountries">
                            <option :value="c.id" v-for="c in continents" :key="c.id" v-text="c.name"></option>
                        </select>
                    </span>
                </p>
            </div>

            <div class="column is-6 pays">
                <label class="label">Pays</label>
                <p class="control">
                    <span class="select is-fullwidth">
                        <select class="is-fullwidth" v-model="form.pays_id">
                            <option :value="p.id" v-for="p in pays" :key="p.id" v-text="p.name"></option>
                        </select>
                    </span>
                    <span class="help is-danger" v-if="form.errors.has('pays_id')" v-text="form.errors.get('pays_id')"></span>
                </p>
            </div>
        </div>

        <div class="columns adresses">
            <div class="column is-6 adresse1">
                <label class="label">Adresse</label>
                <p class="control">
                  <input class="input" :class="{spacer: !form.errors.has('adresse1')}"  type="text" v-model="form.adresse1" id="adresse1" name="adresse1">
                  <span class="help is-danger" v-if="form.errors.has('adresse1')" v-text="form.errors.get('adresse1')"></span>
                </p>
            </div>

            <div class="column is-6 adresse2">
                <label class="label">Précision d'adresse</label>
                <p class="control">
                  <input class="input" :class="{spacer: !form.errors.has('adresse2')}"  type="text" v-model="form.adresse2" id="adresse2" name="adresse2">
                  <span class="help is-danger" v-if="form.errors.has('adresse2')" v-text="form.errors.get('adresse2')"></span>
                </p>
            </div>
        </div>

        <div class="columns cp_ville">
            <div class="column is-6 cp">
                <label class="label">Code postal</label>
                <p class="control">
                  <input class="input" :class="{spacer: !form.errors.has('cp')}"  type="text" v-model="form.cp" id="cp" name="cp">
                  <span class="help is-danger" v-if="form.errors.has('cp')" v-text="form.errors.get('cp')"></span>
                </p>
            </div>

            <div class="column is-6 ville">
                <label class="label">Ville</label>
                <p class="control">
                  <input class="input" :class="{spacer: !form.errors.has('ville')}"  type="text" v-model="form.ville" id="ville" name="ville">
                  <span class="help is-danger" v-if="form.errors.has('ville')" v-text="form.errors.get('ville')"></span>
                </p>
            </div>
        </div>


        <div class="columns latitude_longitude">
            <div class="column is-5 latitude">
                <label class="label">Latitude</label>
                <p class="control">
                  <input class="input" :class="{spacer: !form.errors.has('latitude')}"  type="text" v-model="form.latitude" id="latitude" name="latitude">
                  <span class="help is-danger" v-if="form.errors.has('latitude')" v-text="form.errors.get('latitude')"></span>
                </p>
            </div>

            <div class="column is-5 longitude">
                <label class="label">Longitude</label>
                <p class="control">
                  <input class="input" :class="{spacer: !form.errors.has('longitude')}"  type="text" v-model="form.longitude" id="longitude" name="longitude">
                  <span class="help is-danger" v-if="form.errors.has('longitude')" v-text="form.errors.get('longitude')"></span>
                </p>
            </div>

            <div class="column is-2">
              <label class="label">Localiser</label>
                <a class="button is-success is-fullwidth" @click.prevent="localize">
                  <span class="icon">
                    <i class="fa" :class="{'fa-circle-o-notch fa-spin fa-fw': isGeocoding, 'fa-map-marker': !isGeocoding}"></i>
                  </span>
                  <span>Localiser</span>
                </a>
            </div>

        </div>


        <div class="columns phone_web_email">
            <div class="column is-4 email">
                <label class="label">Téléphone</label>
                <p class="control">
                  <input class="input" :class="{spacer: !form.errors.has('phone')}"  type="text" v-model="form.phone" id="phone" name="phone">
                  <span class="help is-danger" v-if="form.errors.has('phone')" v-text="form.errors.get('phone')"></span>
                </p>
            </div>

            <div class="column is-4 phone">
                <label class="label">Email</label>
                <p class="control">
                  <input class="input" :class="{spacer: !form.errors.has('email')}"  type="text" v-model="form.email" id="email" name="email">
                  <span class="help is-danger" v-if="form.errors.has('email')" v-text="form.errors.get('email')"></span>
                </p>
            </div>

            <div class="column is-4 web">
                <label class="label">Site web</label>
                <p class="control">
                  <input class="input" :class="{spacer: !form.errors.has('url')}"  type="text" v-model="form.url" id="url" name="url">
                  <span class="help is-danger" v-if="form.errors.has('url')" v-text="form.errors.get('url')"></span>
                </p>
            </div>
        </div>

        <div class="columns">
            <div class="column name">
                <label class="label">Remarque</label>
                <p class="control">
                  <textarea name="remarque" class="textarea" :class="{spacer: !form.errors.has('remarque')}" v-model="form.remarque"></textarea>
                  <span class="help is-danger" v-if="form.errors.has('remarque')" v-text="form.errors.get('remarque')"></span>
                </p>
            </div>
        </div>

        <a href="#" class="button is-primary is-outlined is-fullwidth submit" @click.prevent="submit">
            <span class="icon">
              <i class="fa fa-download" :class="{'fa-circle-o-notch fa-spin fa-fw': isLoading}"></i>
            </span>
            <span>Sauvegarder les infos du revendeur</span>
        </a>
    </form>
</div>

@endsection