{!! csrf_field() !!}
<div id="vue-app">
   <div class="row">
      
      <div class="col-md-2">
         <div class="form-group">
            <label>Empresa</label>
            <select 
            class="form-control" 
            name="cod_empresa" 
            v-model="area.cod_empresa" 
            required>
                  <option 
                  v-for="(empresa, key) in empresas"
                  :value="empresa.cod_empresa"
                  v-html="empresa.titulo_reportes"
                  :selected="empresa.cod_empresa==area.cod_empresa || key==0"
                  ></option>
            </select>
         </div>
      </div>

      <div class="col-md-2">
         <div class="form-group">
            <label>Descripción</label>
            <input type="text" name="descripcion" v-model="area.descripcion" class="form-control" required>
         </div>
      </div>

      <div class="col-md-2">
         <div class="form-group">
            <label>Activo</label>
            <select 
            class="form-control" 
            name="activo" 
            v-model="area.activo" 
            required>
                  <option 
                  v-for="(option, key) in activo_options"
                  :value="option.value"
                  v-html="option.title"
                  :selected="(option.value==area.activo) || (key==0)"
                  ></option>
            </select>
         </div>
      </div>

   </div>
   <hr>
   <div class="row">
      <div class="">
         <div class="col-md-1">
            <input type="submit" class="btn btn-primary" value="{{ $area->cod_empresa?'ACTUALIZAR':'GUARDAR' }}">
         </div>

         <div class="col-md-1">
            <a type="submit" class="btn btn-danger" href="{{ route('administracion.base.mantenimientos.areas.index') }}">ATRAS</a>
         </div>
      </div>
      
   </div>

</div>






@section('scripts')
   @include('libraries',['added'=>array('vue-js')])
   <script>
      $("#empresas").focus();
      var app = new Vue
      ({
         el: "#vue-app",
         data: 
         {
            area: {!! $area->toJson() !!},
            empresas: {!! $empresas->toJson() !!},
            activo_options:
            [
               { value: "S",  title: "SI" },
               { value: "N",  title: "NO" }
            ]

         }
      });

   </script>
@endsection