@extends('layouts.app')

@section('breadcrumb')
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{{ route('home') }}">Inicio</a></li>
    <li class="breadcrumb-item"><a href="{{ route('evaluacionproveedores.listaproyectos')}}">Evaluación de Proveedores</a></li>
    <li class="breadcrumb-item"><a href="{{ route('evaluacionproveedores.listaproyectos')}}">Proyectos</a></li>
    <li class="breadcrumb-item active" aria-current="page"><template>@{{ headerTitle }}</template></li>
  </ol>
</nav>
@stop

@push('head')

@endpush

@section('content')
   
    <div class="bgc-white p-20 bd">
      <!-- <div class="flex clearfix pB-15">
          <b-button-toolbar aria-label="Submenú modulo evaluación proveedores " class="pull-left">
            <b-button-group class="mx-1">
              <b-button href="{{ route('evaluacionproveedores.listaproyectos')}}" variant="primary">Proyectos</b-button>
              <b-button href="{{ route('evaluacionproveedores.listaproveedores')}}" variant="light">Proveedores</b-button>
            </b-button-group>
          </b-button-toolbar>

           <b-button-toolbar aria-label="Submenú toolbar " class="pull-right">
            <b-button-group class="mx-1">
              <a href="{{route('evaluacionproveedores.crearproyecto')}}" target="_blank" class="btn btn-primary">Agregar Proyecto</a>
            </b-button-group>
          </b-button-toolbar> 
      </div> -->

      

  <b-card :title="headerTitle">

  @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif
    <a class="btn btn-primary" href="{{route('evaluacionproveedores.editarproyecto',["id"=>($valores["id"]?? 0 )])}}" v-if="modo == 'view'" size="sm" variant="info">[Editar]</a>

  <b-form id="formulario"  ref="formulario" action="{{route('evaluacionproveedores.guardarproyecto')}}" method="POST" novalidate class="was-validated" >
  @csrf
  
  @isset($valores["id"])
    <input type="hidden" name="id" v-model="datos.id"></input>
  @endisset


  <div class="row d-flex">
    <b-form-group
      id="id_licitacion"
      label="ID Licitación"
      label-for="id_licitacion"
      label-size="sm"
      class="col-md-2"
    >
      <b-form-input :disabled="modo == 'view'" name="id_licitacion" id="id_licitacion" required v-model="datos.id_licitacion" trim></b-form-input>
    </b-form-group>

    <b-form-group
      id="nombre_proyecto"
      label="Nombre de Proyecto"
      label-for="nombre_proyecto"
      label-size="sm"
      class="col-md-10"
    >
      <b-form-input :disabled="modo == 'view'" name="nombre_proyecto" id="nombre_proyecto" :formatter="toUpperCase" required  v-model="datos.nombre_proyecto" trim></b-form-input>
    </b-form-group>
 
    <b-form-group
        id="id_proveedor"
        label="Proveedor"
        label-for="id_proveedor"
        label-size="sm"
        class="col-md-4"
      >
        <b-form-select :disabled="modo == 'view'" name="id_proveedor" id="id_proveedor" required  v-model="datos.id_proveedor" :options="proveedores" value-field="id"
      text-field="nombre">
          <template v-slot:first>
            <b-form-select-option :value="null" disabled>-- Seleccione --</b-form-select-option>
          </template>
        </b-form-select>
      </b-form-group>


    <b-form-group
        id="tipo_oc"
        label="Tipo"
        label-for="tipo_oc"
        label-size="sm"
        class="col-md-2"
      >
        <b-form-select :disabled="modo == 'view'" name="tipo_oc" id="tipo_oc" required  v-model="datos.tipo_oc" :options="tipoProyectos" value-field="id"
      text-field="nombre">
          <template v-slot:first>
            <b-form-select-option :value="null" disabled>-- Seleccione --</b-form-select-option>
          </template>
        </b-form-select>
      </b-form-group>


      <b-form-group
      label="Monto > 100UTM"
      label-for="sup_100utm"
      label-size="sm"
      class="col-md-1"
    >
      <b-form-checkbox :disabled="modo == 'view'" name="sup_100utm" id="sup_100utm" v-model="datos.sup_100utm"></b-form-checkbox>
    </b-form-group>



      <b-form-group
      id="monto_oc"
      label="Monto Presupuestado"
      label-for="monto_oc"
      label-size="sm"
      class="col-md-3"
    >
      <b-form-input  name="monto_oc" id="monto_oc" v-model="datos.atributos_extendidos.monto" disabled></b-form-input>
    </b-form-group>

    <b-form-group
      id="tiempo_ejecucion"
      label="T. de Ejec. (Meses)"
      label-for="tiempo_ejecucion"
      label-size="sm"
      class="col-md-2"
    >
      <b-form-input  name="tiempo_ejecucion" id="tiempo_ejecucion" v-model="datos.tiempo_ejecucion" disabled></b-form-input>
    </b-form-group>
      

      <b-form-group
        id="unidad_tecnica"
        label="Unidad Técnica"
        label-for="unidad_tecnica"
        label-size="sm"
        class="col-md-3"
      >
        <b-form-select :disabled="modo == 'view'" name="unidad_tecnica" required id="unidad_tecnica" @input="getSupervisores(1)" v-model="datos.unidad_tecnica" :options="unidadTecnica1" value-field="id"
      text-field="nombre">
          <template v-slot:first>
            <b-form-select-option :value="null" disabled>-- Seleccione --</b-form-select-option>
          </template>

        </b-form-select>
        </b-form-group>

        <b-form-group
        id="supervisor"
        label="Supervisor / Ito"
        label-for="supervisor"
        label-size="sm"
        class="col-md-3"
      >
        <b-form-select :disabled="modo == 'view'" name="supervisor"  id="supervisor" v-model="datos.supervisor" :options="supervisores1" value-field="id"
      text-field="full_name">
          <template v-slot:first>
            <b-form-select-option :value="null" disabled>-- Seleccione --</b-form-select-option>
          </template>

        </b-form-select>
        </b-form-group>



        <b-form-group
        id="unidad_tecnica"
        label="Unidad Técnica Apoyo"
        label-for="unidad_tecnica_apoyo"
        label-size="sm"
        class="col-md-3"
      >
        <b-form-select :disabled="modo == 'view'" name="unidad_tecnica_apoyo" id="unidad_tecnica_apoyo" @input="getSupervisores(2)" v-model="datos.unidad_tecnica_apoyo" :options="unidadTecnica2" value-field="id"
      text-field="nombre">
          <template v-slot:first>
            <b-form-select-option :value="null" disabled>-- Seleccione --</b-form-select-option>
          </template>

        </b-form-select>
      </b-form-group>

      <b-form-group
        id="supervisor_apoyo"
        label="Supervisor / Ito Apoyo"
        label-for="supervisor_apoyo"
        label-size="sm"
        class="col-md-3"
      >
        <b-form-select :disabled="modo == 'view'" name="supervisor_apoyo" id="supervisor_apoyo" v-model="datos.supervisor_apoyo" :options="supervisores2" value-field="id"
      text-field="full_name">
          <template v-slot:first>
            <b-form-select-option :value="null" disabled>-- Seleccione --</b-form-select-option>
          </template>

        </b-form-select>
        </b-form-group>

  </div>
  <div class="row d-flex">
    <h5 class="col-12">Contratos&nbsp;&nbsp;&nbsp;<b-button :disabled="modo == 'view'" v-show="modo != 'view'" @click="addContrato" size="sm" variant="info">+</b-button></h5>

    <template v-for="(contrato, key) in datos.contratos">
    <div class="row d-flex bg-light m-3">    
        <b-form-group
        label="Tipo de Contrato"
        label-size="sm"
        class="col-md-2"
      >
        <b-form-select size="sm" disabled v-model="datos.contratos[key].tipo_oc" :options="tipoContratos" value-field="id"
      text-field="nombre">
          <template v-slot:first>
            <b-form-select-option :value="null" disabled>-- Seleccione --</b-form-select-option>
          </template>
        </b-form-select>
        </b-form-group>

        <b-form-group
          label="Nº OC"
          label-size="sm"
          class="col-md-1"
        >
          <b-form-input size="sm" disabled v-model="datos.contratos[key].n_oc"></b-form-input>
        </b-form-group>

        <b-form-group
          label="DA"
          label-size="sm"
          class="col-md-1"
        >
          <b-form-input size="sm" disabled v-model="datos.contratos[key].da_contrato"></b-form-input>
        </b-form-group>

        
        <b-form-group
          label="Inicio"
          label-size="sm"
          class="col-md-2"
        >
          <b-form-input size="sm" disabled v-model="datos.contratos[key].fecha_inicio"></b-form-input>
        </b-form-group>

        <b-form-group
          label="Fin"
          label-size="sm"
          class="col-md-2"
        >
          <b-form-input size="sm"  disabled v-model="datos.contratos[key].fecha_termino"></b-form-input>
        </b-form-group>

        <b-form-group
          label="Monto"
          label-size="sm"
          class="col-md-3"
        >
          <b-form-input size="sm" disabled v-model="datos.contratos[key].monto_oc"></b-form-input>
        </b-form-group>
        <i v-if="modo=='edit'" style="height: fit-content;" class=" p-2 btn btn-sm btn-secondary fa fa-edit" @click="editContrato(datos.contratos[key].id_proyecto,datos.contratos[key].id)"></i>

        </div>

    </template>
  </div>

  <div class="row d-flex">
    <h5 class="col-12">Calificaciones&nbsp;&nbsp;&nbsp;</h5>
    <table class="table table-condensed ">
      <thead>
        <tr>
          <th>Usuario</th>
          <th>Proveedor</th>
          <th>Comentario</th>
          <th>Cumplimiento</th>
          <th>Calidad</th>
          <th>Post Venta</th>
          <th>Nota Final</th>
          <th></th>
        </tr>

      </thead>
    <tbody v-for="(nota, key) in datos.calificaciones">
      <tr>
        <td>@{{nota.user.full_name}}</td>
        <td>@{{nota.proveedor.nombre}}</td>
        <td>@{{nota.observaciones}}</td>
        <td>@{{nota.plazo}}</td>
        <td>@{{nota.calidad}}</td>
        <td>@{{nota.postventa}}</td>
        <td>@{{nota.nota}}</td>
        <td><i v-if="modo=='edit'" class="btn btn-sm btn-secondary fa fa-edit" @click="currentCalificacion = datos.calificaciones[key]" v-b-modal.modal-calificacion></i></td>
      </tr>
      </tbody>

    </table>
  </div>

  <div class="d-flex  justify-content-end bT-15">
      
      <b-button :disabled="modo == 'view'" type="submit" size="lg" variant="primary">Aceptar</b-button>

  </div>

  
</b-form>



  </b-card>
</div>

<b-modal 
      id="modal-calificacion"
      ref="modal-calificacion"
      title="Calificación"
      @ok="enviarCalificacion"
    >
    <b-form-group
        label="Cumplimiento"
        label-size="sm"
        class="col-md-12"
      >
        <b-form-select  v-model="currentCalificacion.plazo" :options="arrayNotas" value-field="key"
      text-field="value">
          <template v-slot:first>
            <b-form-select-option :value="0" disabled>-- Seleccione --</b-form-select-option>
          </template>

        </b-form-select>
        </b-form-group>

        <b-form-group
        label="Calidad"
        label-size="sm"
        class="col-md-12"
      >
        <b-form-select  v-model="currentCalificacion.calidad" :options="arrayNotas" value-field="key"
      text-field="value">
          <template v-slot:first>
            <b-form-select-option :value="0" disabled>-- Seleccione --</b-form-select-option>
          </template>

        </b-form-select>
        </b-form-group>

        <b-form-group
        label="PostVenta"
        label-size="sm"
        class="col-md-12"
      >
        <b-form-select  v-model="currentCalificacion.postventa" :options="arrayNotas" value-field="key"
      text-field="value">
          <template v-slot:first>
            <b-form-select-option :value="0" disabled>-- Seleccione --</b-form-select-option>
          </template>

        </b-form-select>
        </b-form-group>
        <b-form-group
          label="Observaciones"
          
          class="col-md-12"
        >
          <b-form-input  v-model="currentCalificacion.observaciones"></b-form-input>
        </b-form-group>



</b-modal>



@endsection

@push('pre-scripts')

<script>

window.pageMix.push({

  data() {
    return {
      datos:@json($valores ?? [] ),
      modo:'{{$modo}}',
      tipoProyectos:[
        {id:0,nombre:"Servicios"},
        {id:1,nombre:"Bienes"},
        {id:3,nombre:"Obra"},
        {id:2,nombre:"Otros"},  
      ],
      tipoContratos:[
        {id:1,nombre:"Contrato"},
        {id:2,nombre:"Prórroga"},
        {id:3,nombre:"Anexo"},  
      ],
      proveedores:[],
      calificaciones:[],
      unidadTecnica1:[],
      unidadTecnica2:[],
      supervisores1:[],
      supervisores2:[],
      temp:null,
      currentCalificacion:[],
      arrayNotas:[
        {key:'0',value:'0'},
        {key:'1.0',value:'1.0'},
        {key:'2.0',value:'2.0'},
        {key:'3.0',value:'3.0'},
        {key:'4.0',value:'4.0'},
        {key:'4.5',value:'4.5'},
        {key:'5.0',value:'5.0'},
        {key:'5.5',value:'5.5'},
        {key:'6.0',value:'6.0'},
        {key:'6.5',value:'6.5'},
        {key:'7.0',value:'7.0'}
      ]
    }
  },
  computed: {
    headerTitle() {
        if(this.datos.id==null)
          return 'Nuevo Proyecto';
        else{
          if(this.modo=="view")
          return 'Ver Proyecto Nº'+this.datos.id;
          else
          return 'Editar Proyecto Nº'+this.datos.id;
        }
          
    }
  },

  mounted(){
    axios.get('{{ route('evaluacionproveedores.jsonlistaproveedores')}}?perPage=5000').then(response => this.proveedores = response.data.data);
    axios.get('{{ route('evaluacionproveedores.jsonunidadtecnica')}}').then(response => (this.unidadTecnica1 = this.unidadTecnica2 = response.data.data));
    
    //axios.get('{{ route('evaluacionproveedores.jsonunidadtecnica')}}').then(response => (this.unidadTecnica1 = this.unidadTecnica2 = response.data.data));
    
    console.log(this.datos);
    if(this.datos.unidad_tecnica!=null)
      this.getSupervisores(1);
    if(this.datos.unidad_tecnica_apoyo!=null)
      this.getSupervisores(2);

    //deshabilitar todo si esta en vista
    
  },
  methods:{
    getSupervisores(tipo){
      if(tipo==1)
        axios.get('{{ route('evaluacionproveedores.jsonsupervisores')}}?id='+this.datos.unidad_tecnica).then(response => (this.supervisores1  = response.data.data));
      else
        axios.get('{{ route('evaluacionproveedores.jsonsupervisores')}}?id='+this.datos.unidad_tecnica_apoyo).then(response => (this.supervisores2  = response.data.data));
  
    },
    addContrato:function(){
        // console.log("addContrato");
        // if(this.datos.contratos==null)
        //   this.datos.contratos = [];

        // this.datos.contratos.push({tipo:null,inicio:null,fin:null,da:null,fecha_da:null,id:null});
        window.location.href = '{{route('evaluacionproveedores.crearcontrato',["proyecto"=>($valores["id"]?? 0 )])}}';

    },
    editContrato:function(proyecto,id){

        let url = '{{route('evaluacionproveedores.editarcontrato',["proyecto"=>"##p##","id"=>"##id##"])}}';
        url = url.replace("##p##",proyecto);
        url = url.replace("##id##",id);

        window.location.href = url;
    },
    enviarDatos:function(e){
        if(this.validateForm()){
          return true;
        } 
        else{
          e.preventDefault();
          return false;
        }
    },
    validateForm () {
        var formId = 'formulario';
        var nodes = document.querySelectorAll(`#${formId} :invalid`);
        var errorObjectName = 'validationErrors';
        var vm = this; //current vue instance;
        if (nodes.length > 0) {
            return false;
        }
        else {
            return true;
        }
    },
    toUpperCase(value){
      return value.toUpperCase();
    },
    enviarCalificacion(evt){
      axios.post('{{route('evaluacionproveedores.guardarevaluacion')}}' ,this.currentCalificacion
          ).then(
              response => {
                console.log(response);
                
                this.$bvModal.hide('modal-calificacion');

              }
          ).catch((error) => {
                console.log(error)
                if(error.response!=null)
                  alert(JSON.stringify(error.response.data.errors))
            }  
        );      
        let sum = Number.parseFloat(this.currentCalificacion.plazo) + Number.parseFloat(this.currentCalificacion.calidad) + Number.parseFloat(this.currentCalificacion.postventa)
        this.currentCalificacion.nota= Number.parseFloat(sum/3).toFixed(2);
        evt.preventDefault();

    },
  }

});

</script>

@endpush

@push('post-scripts')
   
@endpush