@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">Pago a Proveedores</li>
    <li class="breadcrumb-item active"><a href="{{ route('pproveedores.index') }}">@{{titulo_pagina}}</a></li>
  </ol>
</nav>
@endsection


@section('content')
<div class="bg-white p-10 border">
<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">
              <a href="{{ url('pproveedores/nueva_solicitud') }}" class="btn btn-primary">Nuevo RP</a>
              
            </b-button-group> -->
          </b-button-toolbar>
</div>
<b-overlay :show="busy" rounded="sm">
    <div class="mb-2 row">
    <b-form-group class="col-2">
        <label class="form-label">Año</label>
        <b-form-select :options="anios" v-model="anio" placeholder="Seleccione Año" @change="$emit('bv::refresh::table', 'tabla-datos')">
        </b-form-select>
    </b-form-group>
    <b-form-group class="col-2">
        <label class="form-label">Reg. por Hoja</label>
        <b-form-select :options="[10,20,50,100]" v-model="nporpagina" placeholder="Seleccione Reg. por Hoja" @change="$emit('bv::refresh::table', 'tabla-datos')">
        </b-form-select>
    </b-form-group>
    <b-form-group class="col-3">
        <label class="form-label">Etapa</label>
        <b-form-select :options="etapas" v-model="etapa" value-field="id" text-field="nombre_etapa" placeholder="Seleccione Etapa" @change="$emit('bv::refresh::table', 'tabla-datos')">      
            <template #first>
                <b-form-select-option :value="null" >-- Seleccione Etapa --</b-form-select-option>
            </template>
        </b-form-select>
    </b-form-group>
    <b-form-group class=" col-5">
    <label class="form-label">&nbsp;</label>
    <b-input-group prepend="Búsqueda" >
        <b-form-input v-model="busqueda" v-on:keyup.enter="filtro=busqueda"  debounce="1500" placeholder="Buscar ID RP, RUT o Nombre del Proveedor, N° Factura, Supervisor o Dirección"></b-form-input>
        <b-input-group-append>
            <b-button variant="primary" @click="filtro=busqueda"><i class="fa fa-search" ></i></b-button>
        </b-input-group-append>
    </b-input-group>
    </b-form-group>
    

    </div>

    <b-table 
        hover bordered  show-empty selectable stacked="sm" 
        :items="myProvider"
        :fields="fields"
        :per-page="nporpagina"
        :current-page="npagina"
        :filter="filtro"
        select-mode="multi"
        head-variant="dark"
        id="tabla-datos"
        :tbody-tr-class="rowClass"
        @row-selected="onRowSelected"
        ref="tabla-datos"
    >
    <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><br/>
            
            </div>
          </template>
          <template #cell(selected)="{ rowSelected }">
            <template v-if="rowSelected">
                <i aria-hidden="true" class="fa-lg fa-check fas text-success"></i>
                <span class="sr-only">Sel</span>
            </template>
            <template v-else>
                <span aria-hidden="true">&nbsp;</span>
                <span class="sr-only">-</span>
            </template>
        </template>

          <template v-slot:cell(dias_rp)="data">
                @{{ getCurrentDias(data.item.dias_detalle,data.item.nivel_etapa)  }}
               (@{{ getTotalDias(data.item.dias_detalle) }})

          </template>
          <template v-slot:cell(monto_total_factura)="data">
                @{{ data.item.monto_total_factura | currency }}
          </template>
          
          <template v-slot:cell(fecha_emision)="data">
                @{{ data.item.fecha_emision | fecha }}
          </template>
          <template v-slot:cell(fecha_recepcion_factura)="data">
                @{{ data.item.fecha_recepcion_factura | fecha }}
          </template>
        <template v-slot:cell(opciones)="data">

        <template v-if="data.item.id_etapa == 1">
            <a :href="'{{ url("pproveedores/solo-ver-rp-finanzas") }}/'+data.item.id" class="ml-2" title="Ver Rp"><i class="fas fa-search fa-lg" style="color: green;"></i></a>
        </template>
        <template v-if="data.item.id_etapa == 2">
            <a :href="'{{ url("pproveedores/solo-ver-rp-finanzas") }}/'+data.item.id" class="ml-2" title="Ver Rp"><i class="fas fa-search fa-lg" style="color: green;"></i></a>
            <a href="javascript:void(0)" class="ml-2" title="Aceptar Rp en Finanzas" @click="enviarFinanzas(data.item.id)"><i class="fas fa-sign-in-alt fa-lg" style="color: red;"></i></a>
            <a :href="'{{ url("pproveedores/obtener-pdf") }}/'+data.item.id" target="_blank" class="ml-2" title="Abrir documento"><i class="fas fa-file-pdf fa-lg" style="color: red;"></i></a>
        </template>
        <template v-if="data.item.id_etapa == 3 || data.item.id_etapa == 8">
            <a :href="'{{ url("pproveedores/editar-rp-finanzas") }}/'+data.item.id" class="ml-2" title="Editar documento" ><i class="fas fa-edit fa-lg"></i></a>
        </template>
        <template v-if="data.item.id_etapa > 3 || data.item.id_etapa != 8">
            <a :href="'{{ url("pproveedores/solo-ver-rp-finanzas") }}/'+data.item.id" class="ml-2" title="Ver Rp"><i class="fas fa-search fa-lg" style="color: green;"></i></a>
        </template>
        <template v-if="data.item.id_etapa == 4 || data.item.id_etapa == 5 || data.item.id_etapa == 6 || data.item.id_etapa == 7 || data.item.id_etapa == 9 || data.item.id_etapa == 10 || data.item.id_etapa == 13 ">
            <a :href="'{{ url("pproveedores/obtener-pdf") }}/'+data.item.id" target="_blank" class="ml-2" title="Abrir documento"><i class="fas fa-file-pdf fa-lg" style="color: red;"></i></a>       
        </template>
        <a href="javascript:void(0)" class="ml-2" title="Ver Bitacora" @click="bitacoraModal(data.item.id)"><i class="fas fa-list fa-lg"></i></a>

        
    </template>
    </b-table>
    <p>Total: @{{totalitems}} Registros</p>
    <b-pagination
      v-model="npagina"
      :total-rows="totalitems"
      :per-page="nporpagina"
      aria-controls="my-table"
    ></b-pagination>
    <p class="mt-2">@{{seleccionados.length}} RP Seleccionados <b-button @click="recepcionMasiva" variant="success" size="sm" class="mt-2">Recepción Masiva</b-button></p>
    </b-overlay>
        
</div>
<b-modal id="modal-bitacora"  size="xl" centered title="Información de bitacora">
    <b-table 
        hover bordered striped show-empty selectable
        :items="bitacora.datos"
        :fields="bitacora.columnas"
        id="tabla-bitacora"
    ></b-table>
</b-modal>
@endsection

@push('pre-scripts')
    <script>
   window.pageMix.push({
        data() {
            return {
            tipo:"{{$tipo ?? 'administrativo'}}",
            titulo_pagina:"Mantenedor de Finanzas",
            busy:false,
            seleccionados:[],
            etapa:null,
            etapas:[],
            selectEtapa:2,
            fields:[
                {key:'selected',label:'Sel',sortable:false},
                {key:'id',label:'Nº RP',sortable:true},
                {key:'numero_factura',label:'Nº Factura',sortable:false},
                {key:'fecha_emision',label:'Fecha Emisión',sortable:false},
                {key:'proveedor.rut_proveedores',label:'RUT Proveedor',sortable:false},
                {key:'ocompra.numero_oc',label:'Nº OC',sortable:false},
                {key:'monto_total_factura',label:'Monto Factura',sortable:false,class:'text-right'},
                {key:'proveedor.nombre_proveedores',label:'Nombre Proveedor',sortable:false},
                {key:'fecha_recepcion_factura',label:'Fecha Recepción',sortable:false},
                {key:'supervisor.full_name',label:'Supervisor',sortable:false},
                {key:'direccion.nombre',label:'Dirección',sortable:false},
                {key:'dias_rp',label:'Días del RP',sortable:false},
                {key:'etapa.nombre_etapa',label:'Estado / Etapa',sortable:false},
                {key:'opciones',label:'Opciones',sortable:false},
            ],
            nporpagina:10,
            npagina:1,
            totalitems:0,
            busqueda:null,
            filtro:null,
            anios:[2020,2021,2022,2023,2024,2025,2026,2027,2028,2029,2030],
            anio:new Date().getFullYear(),
            bitacora:{
                datos:[],
                columnas:[
                    {key:'id',label:'#',sortable:true},
                    {key:'created_at',label:'Fecha',sortable:true},
                    {key:'usuario',label:'Usuario',sortable:true},
                    {key:'unidad_etapa',label:'Unidad/Etapa',sortable:true},
                    {key:'evento',label:'Evento',sortable:true},
                    {key:'estado_final',label:'Estado Final',sortable:true},
                ],
            },
            }
        },
        mounted(){
            axios.get("{{ route('pproveedores.getetapas')}}").then(response => {this.etapas = response.data});

        },
        methods:{
            rowClass(item, type) {
                if (!item || type !== 'row') return
                if (item.estado == 0) return 'text-muted'
            },
            borrarItem(id){
                this.$swal.fire("borrando");
               
            },

            myProvider (ctx, callback) {
                console.log(ctx);
                let param={
                    page:ctx.currentPage,
                    perPage:ctx.perPage,
                    sortBy:ctx.sortBy,
                    sortDesc:ctx.sortDesc,
                    filter:ctx.filter,
                    anio:this.anio,
                    etapa:this.etapa,
                };
                let url = "{{ url('pproveedores/loadRPFinanzas') }}";
                let promise = axios.get(url,{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 []
                })
            },
            getTotalDias(arr){
                let total = Object.keys(arr).reduce(function (previous, key) {
                    return previous + parseFloat(arr[key].dias);
                }, 0);
                return  Math.round(total);
            },
            getCurrentDias(arr,etapa){
                console.log(arr)
                console.log(etapa)
                let res = arr.find(item => {
                    return item.unidad_etapa==etapa;
                });

                
                return (res==null) ? Math.round(arr[arr.length-1].dias) : Math.round(res.dias);
                
            },
            onRowSelected(items) {
                this.selected = items
                /*
                let selected = [];
                let datatabla = this.$refs["tabla-datos"].$data.localItems;
                let self = this
                items.forEach((element, index) => {
                    if (element.etapa.id!=self.selectEtapa) {
                        let idx = datatabla.findIndex(item => {
                            return item.id==element.id;
                        });
                        self.$refs["tabla-datos"].unselectRow(idx);
                    } else {
                        selected.push(element);
                    }
                });
                this.seleccionados = selected;
                */
            },
            bitacoraModal(id){
                axios.get("{{ url('pproveedores/info-bitacora') }}/"+id).then(response => {
                    this.bitacora.datos = response.data.rows
                    this.$emit('bv::show::modal', 'modal-bitacora');
                });

            },
            recepcionMasiva(){
                let rp = [];
                this.seleccionados.forEach( function(o, i) {
                    rp.push(o.id);
                });
                let msg = '<ul class="text-left ml-4 mt-2"><li>'+rp.join('</li><li>')+'</li></ul>';
                let self =this;
                this.$swal.fire({
                    title: 'Recepción Masiva',
                    html: "¿Está seguro de recibir los siguientes RP?"+msg,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Aceptar'
                }).then((result) => {
                    if (result.value) {
                        self.busy=true;
                        let count=0;
                        for(var i=0; i<rp.length; i++){ 
                            $.ajax({
                                url: "{{ route('pproveedores.actualizar_enviar_finanzas') }}",
                                data: {id: rp[i]},
                                type: "POST",
                                beforeSend: function () {
                                    //msgLoading();
                                },
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                }
                            }).done(function (data, textStatus, jqXHR) {
                                count ++;
                                if(count  >= rp.length){
                                    self.$emit('bv::refresh::table', 'tabla-datos');
                                    self.$swal.fire({
                                        title: 'RPs recibidos',
                                        text: "Los RPs fueron recibidos en Finanzas correctamente.",
                                        icon: 'success',
                                    })
                                    self.busy=false;
                                }

                            }).fail(function (jqXHR, textStatus, errorThrown) {
                                console.log(jqXHR.responseText)
                            });
                        }
                    }
                });
            },
            borrarRP(id){
                this.$swal.fire({
                    title: '¿Eliminar RP?',
                    text: "¿Está seguro en eliminar el RP?",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Aceptar'
                }).then((result) => {
                    if (result.value) {
                        $.ajax({
                            url: "{{ route('pproveedores.borrar_rp') }}",
                            data: {id: id},
                            type: "POST",
                            beforeSend: function () {
                                //msgLoading();
                            },
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                        }).done(function (data, textStatus, jqXHR) {
                            this.$emit('bv::refresh::table', 'tabla-datos')
                            this.$swal.fire({
                                title: 'RP Eliminado',
                                text: "El RP fue eliminado correctamente.",
                                icon: 'success',
                            })

                        }).fail(function (jqXHR, textStatus, errorThrown) {
                            console.log(jqXHR.responseText)
                        });
                    }
                });
            },
            enviarUnidad(id){
                this.$swal.fire({
                    title: '¿Desea continuar?',
                    text: "Aceptar el RP en Unidad",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Aceptar'
                }).then((result) => {
                    if (result.value) {
                        $.ajax({
                            url: "{{ route('pproveedores.actualizar_enviar_unidad') }}",
                            data: {id: id},
                            type: "POST",
                            beforeSend: function () {
                                //msgLoading();
                            },
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                        }).done(function (data, textStatus, jqXHR) {
                            this.$emit('bv::refresh::table', 'tabla-datos');
                            this.$swal.fire({
                                title: 'RP recibido',
                                text: "El RP fue recibido en unidad correctamente.",
                                icon: 'success',
                            });


                        }).fail(function (jqXHR, textStatus, errorThrown) {
                            console.log(jqXHR.responseText)
                        });
                    }
                });

            },
            enviarFinanzas(id)
            {
                let self = this;
                this.$swal.fire({
                    title: '¿Desea continuar?',
                    html: "Aceptará el RP en <b>Dirección de Administración y Finanzas</b>",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Aceptar'
                    }).then((result) => {
                        if (result.value) {
                            //self.$emit('bv::refresh::table', 'tabla-datos');
                            $.ajax({
                                url: "{{ route('pproveedores.actualizar_enviar_finanzas') }}", data: {id: id}, type: "POST", beforeSend: function () {
                                    //msgLoading();
                                }, headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                }
                            }).done(function (data, textStatus, jqXHR) {
                                self.$emit('bv::refresh::table', 'tabla-datos');
                                this.$swal.fire({
                                    title: 'RP recibido',
                                    html: "El RP fue recibido en <b>Dirección de Administración y Finanzas</b> correctamente.",
                                    icon: 'success',
                                })


                            }).fail(function (jqXHR, textStatus, errorThrown) {
                                console.log(jqXHR.responseText)
                            });
                        }
                    })
            },

        },
        filters:{
            currency(value) {
                return new Intl.NumberFormat("es-CL",{ style: "currency", currency: "CLP" }).format(value);
            },
            fecha(value){
                let fecha =moment(value).format("DD-MM-YYYY");
                return (fecha!='Invalid date')?fecha:'...';
            }
        },
    });
    function confirmarBorrar () {
        return confirm('¿Seguro de borrar item?')
    }
    </script>
    <style>
        .text-muted{
            text-decoration: line-through;  
        }
        </style>
@endpush