@extends('layouts.admin', ['page'=>"revendeur_edit"])

@section('content')
  <form action="">
    <label class="label">Nom du revendeur</label>
    <p class="control">
      <input class="input" :class="{'is-danger': form.errors.has('name')}" type="text" v-model='form.name' @keyup="form.errors.clear('name')">
      <span class="help is-danger" v-if="form.errors.has('name')" v-text="form.errors.get('name')"></span>
    </p>

    <label class="label">Adresse 1</label>
    <p class="control">
      <input class="input" :class="{'is-danger': form.errors.has('add1')}" type="text" v-model='form.add1' @keyup="form.errors.clear('add1')">
      <span class="help is-danger" v-if="form.errors.has('add1')" v-text="form.errors.get('add1')"></span>
    </p>

    <label class="label">Adresse 2</label>
    <p class="control">
      <input class="input" :class="{'is-danger': form.errors.has('add2')}" type="text" v-model='form.add2' @keyup="form.errors.clear('add2')">
      <span class="help is-danger" v-if="form.errors.has('add2')" v-text="form.errors.get('add2')"></span>
    </p>

    <div class="columns">
      <div class="column is-4">
        <label class="label">Code postal</label>
        <p class="control">
          <input class="input" :class="{'is-danger': form.errors.has('cp')}" type="text" v-model='form.cp' @keyup="form.errors.clear('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-4">    
        <label class="label">Ville</label>
        <p class="control">
          <input class="input" :class="{'is-danger': form.errors.has('ville')}" type="text" v-model='form.ville' @keyup="form.errors.clear('ville')">
          <span class="help is-danger" v-if="form.errors.has('ville')" v-text="form.errors.get('ville')"></span>
        </p>
      </div>

      <div class="column is-4">
        <label class="label">Pays</label>
        <p class="control">
          <span class="select is-fullwidth">
            <select class="is-fullwidth" v-model="form.pays_id">
              @foreach($pays as $p)
                <option value="{{$p->id}}">{{$p->name}}</option>
              @endforeach
            </select>
          </span>
        </p>      
      </div>
    </div>

    <div class="columns">
      <div class="column is-5">
        <label class="label">Latitude</label>
        <p class="control">
          <input class="input" :class="{'is-danger': form.errors.has('lt')}" type="text" v-model='form.lt' @keyup="form.errors.clear('lt')">
          <span class="help is-danger" v-if="form.errors.has('lt')" v-text="form.errors.get('lt')"></span>
        </p>
      </div>

      <p class="control is-grouped">
        <div class="column is-5">
          <label class="label">Longitude</label>
          <p class="control">
            <input class="input" :class="{'is-danger': form.errors.has('lg')}" type="text" v-model='form.lg' @keyup="form.errors.clear('lg')">
            <span class="help is-danger" v-if="form.errors.has('lg')" v-text="form.errors.get('lg')"></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-3x fa-fw': isGeocoding, 'fa-map-marker': !isGeocoding}"></i>
              </span>
              <span>Localiser</span>
            </a>
        </div>
      </p>
    </div>

    <div class="columns">
      <div class="column is-4">
        <label class="label">Url du site</label>
        <p class="control">
          <input class="input" :class="{'is-danger': form.errors.has('url')}" type="text" v-model='form.url' @keyup="form.errors.clear('url')">
          <span class="help is-danger" v-if="form.errors.has('url')" v-text="form.errors.get('url')"></span>
        </p>
      </div>
      
      <div class="column is-4">
        <label class="label">Email</label>
        <p class="control">
          <input class="input" :class="{'is-danger': form.errors.has('email')}" type="text" v-model='form.email' @keyup="form.errors.clear('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">
        <label class="label">Téléphone</label>
        <p class="control">
          <input class="input" :class="{'is-danger': form.errors.has('phone')}" type="text" v-model='form.phone' @keyup="form.errors.clear('phone')">
          <span class="help is-danger" v-if="form.errors.has('phone')" v-text="form.errors.get('phone')"></span>
        </p>
      </div>
    </div>

    <a href="#" class="button is-primary is-outlined is-fullwidth" @click.prevent="submit">
      <span class="icon">
        <i class="fa fa-download"></i>
      </span>
      <span>Mettre à jour les informations du revendeur</span>
    </a>
  </form>
@endsection