@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 active"><a href="{{ route('portalreclutamiento.index') }}">@{{titulo_pagina}}</a></li>
  </ol>
</nav>
@stop

@section('content')
<b-card>

<div class="align-items-center d-flex justify-content-between">
        <h2 class="">@{{titulo_pagina}}</h2>
        <b-button-toolbar aria-label="Submenú toolbar" class="">
            <b-button-group class="mx-1">
              @can('create',Modules\PortalReclutamiento\Entities\Postulantes::class)
              <a href="{{route('portalreclutamiento.nuevo')}}" class="btn btn-primary">Nuevo Postulante</a> 
              @endcan            
            </b-button-group>
          </b-button-toolbar>
</div>

<div class="row ">

    <b-form-group class="col-3">
        <label class="form-label">Profesión/Oficio</label>
        <b-form-select :options="profesiones" v-model="profesion"  placeholder="Seleccione Profesión/Oficio" @change="$refs.tabla.refresh();">
            <template #first>
                <b-form-select-option :value="null" >-- Seleccione --</b-form-select-option>
            </template>
        </b-form-select>
    </b-form-group>
    <b-form-group class="col-2">
        <label class="form-label">Estado</label>
        <b-form-select :options="estados" v-model="estado" value-field="id" text-field="nombre" placeholder="Seleccione Estado" @change="$refs.tabla.refresh();">
            <template #first>
                <b-form-select-option :value="null" >-- Seleccione Estado --</b-form-select-option>
            </template>
        </b-form-select>
    </b-form-group>
    <b-form-group class="col-2">
        <label class="form-label">Tipos</label>
        <b-form-select :options="tipos" v-model="tipo"  placeholder="Seleccione Tipo" @change="$refs.tabla.refresh();">
            <template #first>
                <b-form-select-option :value="null" >-- Seleccione Tipo --</b-form-select-option>
            </template>
        </b-form-select>
    </b-form-group>
    <div class="col-5">
    <label class="form-label">&nbsp;</label>
    <b-input-group prepend="Búsqueda" class=" ">
    
      <b-form-input v-model="busqueda" v-on:keyup.enter="filtro=busqueda"></b-form-input>
      <b-input-group-append>
        <b-button @click="filtro=busqueda" variant="primary"><i class="fa fa-search"  ></i></b-button>
      </b-input-group-append>
    </b-input-group>
    </div>
</div>
<b-overlay :show="overlay" rounded="sm">
<b-table striped hover 
  :items="myProvider" 
  :xitems="items" 
  :fields="fields"
  :per-page="nporpagina"
  :current-page="npagina"
  :filter="filtro"
  stacked='sm'
  show-empty
  ref="tabla"
  >
    <template #table-busy>
      <div class="text-center text-danger my-2">
          <b-spinner class="align-middle"></b-spinner>
          <strong>Cargando Datos...</strong>
      </div>
    </template>
    <template #empty="scope">
      <div class="text-center text-danger my-2">
      <strong>Sin Datos</strong>
      </div>
    </template>

    <template #emptyfiltered="scope">
      <div class="text-center text-danger my-2">
      <strong>No hay datos que coincidan con su criterio de búsqueda</strong>
      </div>
    </template>


  <template v-slot:cell(nombre)="data">
    <a :href="this.route('portalreclutamiento.ver',{'id':data.item.id})">@{{data.item.nombres}} @{{data.item.apellidos}}</a>
  </template>

  <template v-slot:cell(contacto)="data">
    @{{data.item.email}} <br/> @{{data.item.telefono}}
  </template>

  <template v-slot:cell(cv)="data">
    <a :href="'{{config('app.app_url')}}/storage/'+data.item.cv" target="_blank">Curriculum</a>
  </template>



  <template v-slot:cell(estado)="data">
    <p class="btn btn-link" >@{{estados[data.item.estado].nombre}}</p>
  </template>
  <template class="text-right" v-slot:cell(opciones)="data">
    @can('update',Modules\portalreclutamiento\Entities\Postulantes::class)
    <a class="btn btn-success btn-sm" :href="this.route('portalreclutamiento.editar',{'id':data.item.id})"><i class="fa fa-edit"></i></a>
    @endcan
  </template>

</b-table>
</b-overlay>
<b-pagination
      v-model="npagina"
      :total-rows="totalitems"
      :per-page="nporpagina"
      aria-controls="my-table"
    ></b-pagination>

</b-card>
@endsection


@push('pre-scripts')

<script>
window.pageMix.push({
    data() {
        return {
            titulo_pagina:"Portal de Reclutamiento",
            filtro:'',
            busqueda:'',
            profesion:null,
            tipo:null, 
            nporpagina:20,
            npagina:1,
            totalitems:0,
            overlay:false,
            fields: [
              {key: 'id',sortable: true},
              {key: 'nombre',label: 'Nombre',sortable: true},
              {key: 'profesion',label: 'Profesión/oficio',sortable: false},
              {key: 'tipo',label: 'Tipo',sortable: false},
              {key: 'extracto',label: 'Extracto',sortable: true},
              {key: 'contacto',label: 'Contacto',sortable: true},
              {key: 'cv',label: 'Curriculum',sortable: true},
              {key: 'estado',label: 'Estado',sortable: true},
              {key: 'opciones',label: 'Opciones',sortable: false,class:"text-right"},
            ],
            items:[],
            estados:[{id:0,nombre:''},{id:1,nombre:'En Borrador'},{id:2,nombre:'Disponible'},{id:3,nombre:'En Municipio'},{id:4,nombre:'No Disponible'}],
            tipos:["Práctica","Trabajo","Otro"],
            estado:null,
            profesiones:[],
            
        }
    },mounted(){
      axios.get("{{ route('portalreclutamiento.getProfesiones')}}").then(response => {this.profesiones = response.data });
      this.titulo_pagina = this.titulo_pagina ;  
      
    },created(){
      
    },
    methods:{
      borrarItem(id){
          this.$swal.fire("borrando");
      },
      colorBotones(estado){
        //console.log(estado);
        switch(estado){
          case 1:
            return '';
            break;
          case 2:
            return 'success';
            break;
          case 3:
            return 'warning';
            break;
          case 4:
            return 'light';
            break;
          default:
            break;
        }
      },
      myProvider (ctx, callback) {
          //console.log(ctx);
          let param={
              page:ctx.currentPage,
              perPage:ctx.perPage,
              sortBy:ctx.sortBy,
              sortDesc:ctx.sortDesc,
              filter:ctx.filter,
              estado:this.estado,
              profesion:this.profesion,

          };
          let promise = axios.get(route('portalreclutamiento.getPostulantes'),{params:param})
          return promise.then((data) => {
              this.nporpagina = data.data.per_page;
              this.npagina = data.data.current_page;
              this.totalitems = data.data.total;
              return(data.data.data)
          }).catch(error => {
              return []
          })
      },

      
      currency(value) {
                return new Intl.NumberFormat("es-CL",{ style: "currency", currency: "CLP" }).format(value);
      },

      cambiar_estado(estado,id,index){
        let that = this;
        this.$swal.fire({
            title: 'Cambiar Estado de Nómina',
            html:'<label class="col text-left"><input type="radio" name="swal-input1" value="1"> En Borrador</label> \
                  <label class="col text-left"><input type="radio" name="swal-input1" value="2"> Preparado</label> \
                  <label class="col text-left"><input type="radio" name="swal-input1" value="3"> En Proceso</label>  \
                  <label class="col text-left"><input type="radio" name="swal-input1" value="4"> Finalizado</label>',
              focusConfirm: false,
              showCancelButton:true,
              onBeforeOpen: () => {
                document.querySelector('input[type=radio][name=swal-input1][value="'+estado+'"]').checked=true;
              },
              preConfirm: () => {
                return {
                    estado:(document.querySelector('input[type=radio][name=swal-input1]:checked')!=null)?document.querySelector('input[type=radio][name=swal-input1]:checked').value:null,
                }
              }
        })
        .then(function(result) {
          if(result.isConfirmed){
            if(result.value.estado!=null){
              axios({
              data:result.value,
              url: route('pagohonorarios.cambiarestado',{'id':id}),
              method: 'POST',
              }).then((response) => {
              if(response.data.estado==="OK"){
                  //falta toast de ok
                  //console.log(response.data)
                  that.$swal.fire({
                      position: 'top-end',
                      icon: 'success',
                      title: 'Cambio de estado realizado',
                      showConfirmButton: false,
                      timer: 1500
                  });
                  that.$refs.tabla.refresh();
                 // that.$root.$emit('bv::refresh::table', 'tabla')
              }else{
                  this.$swal.fire("Error al intentar cambiar el estado de la nómina")
              }
              }).catch(error => {
                console.log(error)
                  that.$swal.fire({text:"Error en la petición al servidor"});
              });

            }
          }


            // if(result.isConfirmed){
          
            // }
            //console.log("result",result);
        });
  }
    }

});
</script>
@endpush