@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('pagoproveedores-reporte.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>

    <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-8">
    <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"
    >
    <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">
                <span aria-hidden="true">&check;</span>
                <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">
            <a href="{{ url("reportes/solo-ver") }}/'+data.item.id" target="_blank" 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="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>


        
</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:"Búsqueda de Requerimientos de Pago",
            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},
                {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(){


        },
        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) {
                let param={
                    page:ctx.currentPage,
                    perPage:ctx.perPage,
                    sortBy:ctx.sortBy,
                    sortDesc:ctx.sortDesc,
                    filter:ctx.filter,
                    anio:this.anio,
                };
                let url = "{{ url('pproveedores/listarReportesRP') }}";
                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){
                let res = arr.find(item => {
                    return item.unidad_etapa==etapa;
                });

                
                return (res==null) ? Math.round(arr[arr.length-1].dias) : Math.round(res.dias);
                
            },

            bitacoraModal(id){
                axios.get("{{ url('pproveedores/info-bitacora') }}/"+id).then(response => {
                    this.bitacora.datos = response.data.rows
                    this.$emit('bv::show::modal', 'modal-bitacora');
                });

            },

        },
        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:'...';
            }
        },
    });
    </script>
    <style>
        .text-muted{
            text-decoration: line-through;  
        }
        </style>
@endpush