@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 active" aria-current="page">Proyectos</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>
      <div class="mB-15">
 <b-form >
    <b-input-group prepend="Búsqueda" class="mt-3">
    <b-form-input id="q" v-model="query" ref="query" name="q" type="search"></b-form-input>
    <b-input-group-append>
        <b-button variant="primary" @click="tablePagination(1)">Buscar</b-button>
    </b-input-group-append>
    </b-input-group>
    </form>
</div>
        

        <b-card>
  
<template>
  <div>
    <b-table id="tablaDatos" ref="tablaDatos" small hover outlined  
    :fields="fields" 
    :items="getData"  
    responsive="sm" 

    :busy.sync="isBusy"
    :current-page="currentPage"
    :per-page="perPage"
    :sort-by.sync="sortBy"
    :sort-desc.sync="sortDesc"
    :sort-direction="sortDirection"
    show-empty
    >
      <!-- A virtual column -->
    <template v-slot:empty="scope">
      <p>Cargando Datos</p>
    </template>

    <template v-slot:cell(nombre_proyecto)="data">
        <a href="javascript:void(0)" @click="detalleProyecto(data.item.id)">@{{data.item.nombre_proyecto}}</a>
    </template>
    <template v-slot:cell(fecha_inicio)="data">
    @{{data.item.atributos_extendidos.fecha_inicio}}
    </template>
    <template v-slot:cell(fecha_fin)="data">
        @{{data.item.atributos_extendidos.fecha_fin}}
    </template>
    <template v-slot:cell(plazo)="data">
    @{{data.item.atributos_extendidos.meses_plazo}} Meses
    </template>
    <template v-slot:cell(monto)="data" >
        <p style="text-align:right">@{{ formatPrice(data.item.atributos_extendidos.monto) }}</p>
    </template>
    <template v-slot:cell(nota)="data">
        @{{data.item.calificaciones[0].nota}}
    </template>


    <template v-slot:cell(proveedor.id)="data">
        <a href="javascript:void(0)" >@{{data.item.proveedor.nombre}}</a>
    </template>
    
    <template v-slot:table-busy>
        <div class="text-center text-danger my-2">
            <b-spinner class="align-middle"></b-spinner>
            <strong>Cargando...</strong>
        </div>
    </template>

      
    </b-table>
    <b-pagination
      v-model="currentPage"
      :total-rows="totalData"
      :per-page="perPage"
      aria-controls="tablaDatos"
      v-on:change="tablePagination"
    ></b-pagination>
    <p>Total Datos: @{{ this.totalData}}</p>

  
    <!-- <b-pagination v-on:change="tablePagination"  size="md" :total-rows="totalItems" v-model="currentPage" :per-page="perPage"></b-pagination> -->
  </div>

</template>


</b-card>
</div>




@endsection

@push('pre-scripts')

    <script>

window.pageMix.push({
  data() {
    return {
     
      isBusy:false,
      query:'{{ app('request')->input('q') }}',
      datos:[],
      totalData:0,
      perPage: 20,
      currentPage:1,
      sortBy: '{{ app('request')->input('sortBy','nombre_proyecto') }}',
      sortDesc: {{ app('request')->input('desc','true') }},
      sortDirection: 'asc',
      fields: [
        {key:"id",label:"ID"},
        {key:"nombre_proyecto",label:"Nombre"},

        {key:"proveedor.id",label:"Proveedor"},
        {key:"fecha_inicio",label:"Inicio"},
        {key:"fecha_fin",label:"Fin"},
        {key:"monto",label:"Monto"},
        {key:"plazo",label:"Plazo"},

        {key:"supervisor.direccion.nombre",label:"Unidad Técnica"},
        {key:"supervisor.full_name",label:"Supervisor"},
        {key:"nota",label:"Nota"},
      ],
      validfecha:false,
      validarRut:false,
    }
  },

  methods:{
    getData(ctx,callback) {
      this.isBusy=true;
      var self = this
      const url = '{{ route('evaluacionproveedores.jsonlistaproyectos')}}?page=' + ctx.currentPage + '&perPage=' + self.perPage;
      axios.get(url, {
        dataType: 'json',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        mode: 'no-cors',
        credentials: 'include'
      })
      .then(function (response) {
       // console.log(JSON.stringify(response.data))
        self.isBusy=false;
        self.data = response.data.data;
        self.currentPage = response.data.current_page;
        self.totalData = response.data.total;
        

        return callback(response.data.data) || [];
      })
      .catch(function (error) {
        console.log(error)
        return [];
      })
    },

    sortingChanged(ctx) {
      console.log(ctx);
      if(ctx.sortBy!=""){
        let query='';
        if(this.query.trim()!="")
          query="&q="+this.query.trim();
        window.location.href='{{ route('ayudasocial.index')}}?page='+this.currentPage+query+"&sortBy="+ctx.sortBy+"&desc="+ctx.sortDesc;
      }
    },

    tablePagination: function (index) {
       //this.getData();
    },


    setSelectedEntregaPersona: function(obj){
        this.modoEntregaPersona = true;
        this.selectedEntrega = Object.assign({}, this.modelRecibo);
        for (const prop of Object.getOwnPropertyNames(this.selectedEntrega)) {
          this.selectedEntrega[prop] =null;
        }
        this.selectedEntrega.rut_persona = null;
        this.selectedEntrega.estado_ayuda = "Planificado";
        this.selectedEntrega.fecha_entrega =new Date('{{ date('Y-m-d') }}');
    },   

    checkFecha:function(obj){
      if(this.$root.$refs.fecha_entrega!=undefined){
        if(this.$root.$refs.fecha_entrega.value!=null){
          this.validfecha=true; 
        }else{
          this.validfecha=false; 
        }
      }
    },
    checkRut:function(rut){
      console.log("checkRut");
      console.log(rut);
          let val= rut.replace(/[^0-9kK]+/g,'').toLowerCase();
          var numberRut = val.slice(0,-1);

          console.log('checkRut');
          if (numberRut.length > 6) {
            var auxArray = [3,2,7,6,5,4,3,2]
            var sum =0
            for (var i = numberRut.length - 1; i >= 0; i--) {
              sum += parseInt(numberRut[i])*auxArray[i];
            }
            switch(11 - sum%11){
              case 11:
                return rut.slice(-1) == 0; 
              case 10:
                return rut.slice(-1) == 'k';
              default:
                return rut.slice(-1) == (11 - sum%11);
            }
          }
          return false;
    },
    detalleProyecto:function(id){
      window.location.href='{{ route('evaluacionproveedores.index')}}/proyectos/'+id+'/ver';
    },
    formatPrice(value) {
        let val = (value/1).toFixed(0).replace('.', ',')
        return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")
    },

  },

});

</script>

@endpush

@push('post-scripts')
   
@endpush