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

@section('content')
  <div id="accessoire__edit">
    <div class="content">
      <h1>Édition d'un accessoire - @{{form.name}}</h1>
    </div>

    <div class="columns">
      <form class="column is-12" id="saveAccessoire" action="{{route('accessoires.update',['accessoire'=>$accessoire->id])}}" method="POST" @submit.prevent="submit">
        
        {{--*************************
        * Zone d'upload d'une image
        *************************--}}
        <upload
          id="accessoireImage"
          filter=".jpg, .gif, .png"
          action="{{route('accessoires.image.upload', ['accessoire'=>$accessoire->id])}}"
          v-show="!hasImage">
        </upload>
        

        {{--*************************
        * Choix de la langue d'édition
        *************************--}}
        <label class="label">Langue des infos de l'accessoire</label>
          <p class="control">
            <span class="select is-fullwidth">
              <select class="is-fullwidth" v-model="form.lang" @change="fetchDataByLang">
                @foreach($langues as $langue)
                  <option value="{{$langue->code}}">{{$langue->nom}}</option>
                @endforeach              
              </select>
            </span>
          </p>
        </div>


        {{--*************************
        * Infos de l'accessoire
        *************************--}}
        <div class="accessoire__content">
          <div class="accessoire__content__text">
            <label class="label">Nom</label>
            <p class="control">
              <input class="input" type="text" v-model="form.name" id="name" required>
              <span class="help is-danger" v-if="form.errors.has('name')" v-html="form.errors.get('name')"></span>
            </p>
            
            <label class="label">Description</label>
            <p class="control">
              <textarea class="textarea" id="description" name="description" v-model="form.description"></textarea>
              <span class="help is-danger" v-if="form.errors.has('description')" v-html="form.errors.get('description')"></span>
            </p>
          </div>

          <div class="accessoire__content__image" v-show="hasImage">
            <img :src="accessoireImage" class="accessoireImage" alt="">
            <div class="close" @click="removeImage">
              <span class="icon">
                <i class="fa fa-remove"></i>
              </span>
            </div>
          </div>
        </div>


        {{--*************************
        * Bouton de soumission
        *************************--}}
        <a href="#" class="button is-primary is-outlined is-fullwidth submit" :class="{'is-danger': hasChanged}" @click.prevent="submit">
          <span class="icon">
            <i class="fa fa-download" :class="{'fa-circle-o-notch fa-spin fa-3x fa-fw': isLoading}"></i>
          </span>
          <span>Sauvegarder les infos de l'accessoire</span>          
        </a>
      </form>
    </div>
  </div>
@endsection