@section("styles")
   @include('libraries', ['added'=>array('jquery-ui-css')])
@endsection

<fieldset>
   <div class="row" id="vue-app">
   
      <div class="col-md-3">
         <div class="form-group">
            <label>Persona</label>
            <div class="inner-addon right-addon">
               <input placeholder="Persona" class="form-control" value="{{ old('persona',  ($contacto->persona ? $contacto->persona->nombre_o_fantasia : '') ) }}" id="persona" maxlength="50">
               <i class="glyphicon fa fa-refresh fa-spin" style="display: none;" id="persona-reloading-icon"></i>
            </div>
         </div>
      </div>

      {!! Form::custom_input_one("nom_contacto", "Nombre Contacto", "col-md-2", $contacto, $errors, ['required' => ''] ) !!}

      {!! Form::custom_input_one("asunto", "Asunto", "col-md-2", $contacto, $errors ) !!}

      {!! Form::custom_input_one("cargo", "Cargo", "col-md-2", $contacto, $errors ) !!}

      {!! Form::custom_input_one("telefono", "Telefono", "col-md-2", $contacto, $errors ) !!}

      {!! Form::custom_input_one("departamento", "Departamento", "col-md-2", $contacto, $errors ) !!}

      {!! Form::custom_input_one("relacion", "Relación", "col-md-2", $contacto, $errors ) !!}

      <input type="text" name="cod_persona" id="cod_persona" value="{{ old('cod_persona', $contacto->cod_persona) }}">

   </div>
   <hr>
   <div class="row">
      {!! Form::custom_button_one('save', (($contacto->cod_persona)?"ACTUALIZAR":'GUARDAR'), 'submit') !!}
   </div>
</fieldset>    


@section('scripts')
   @include('libraries',['added'=>array('jquery-ui-js', 'vue-js')])
   <script>

      var app = new Vue
      ({
         el: "#vue-app",
         data:
         {
            contacto: {!! $contacto->toJson() !!},
            persona_selected: null
         },
         created: function()
         {
            if( this.contacto.persona != undefined )
               this.persona_selected = this.contacto.persona.nombre_of_fantasia ;
         }
      });
      
      $("#persona").focus();

      $("#persona").autocomplete
      ({
         source: "{{ route('administracion.base.mantenimientos.contactos.search_persona') }}",
         autoFocus: true,
         search: function( event, ui ) 
         {
            $("#persona-reloading-icon").show();
         },
         open: function( event, ui ) 
         {
            $("#persona-reloading-icon").hide();
         },
         select: function(event, ui)
         {
            console.log( ui.item );
            app.contacto.cod_persona = ui.item.cod_persona;
            $("#persona_selected").text( ui.item.nombre_of_fantasia );
            $("#cod_persona").val( ui.item.cod_persona );
         },
         response: function( e, ui ) 
         {
            
         }
      });

      $("form").on('submit', function()
      {
         if( $("#cod_persona").val() == ""  )
         {
            $.alert
            ({
               title: 'AVISO',
               type: 'red',
               content: 'No se selecciono ninguna persona.',
            });
            return false;
         }
      });

   </script>
@endsection