@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('programasMunicipales.index') }}">@{{titulo_pagina}}</a></li>
  </ol>
</nav>
@endsection


@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 ">
              <a href="{{route('programasMunicipales.create')}}" class="btn btn-primary">Nuevo Programa Municipal</a>
              <!-- <a href="#" class="btn btn-primary">Copiar Programas Municipales</a> -->

            </b-button-group>
          </b-button-toolbar>
</div>
<div class="card-body">
    <div class="mb-2">
    <b-input-group prepend="Búsqueda" class="mt-3">
    <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>

    <b-table 
        hover bordered striped
        :items="myProvider"
        :fields="fields"
        :per-page="nporpagina"
        :current-page="npagina"
        :filter="filtro"
    >
    <template v-slot:cell(opciones)="data">

        <a :href="this.route('programasMunicipales.edit', data.item.id)" class="btn btn-primary btn-sm"><i class="fa fa-edit"></i></a>
        <a @click="borrarItem(data.item.id)"  class="btn btn-danger btn-sm float-right"><i class="fa fa-trash"></i></a>

    </template>

    <template v-slot:cell(cuentas)="data">
        @{{data.item.ctabanco}} - @{{data.item.ctaimpto1}} - @{{data.item.ctaimpto2}} - @{{data.item.contracuenta}}
    </template>

    <template v-slot:cell(is_extrapresupuestario)="data">
        <span v-if="data.item.is_extrapresupuestario">SI</span>
        <span v-else>NO</span>

    </template>

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


        </div>
    </div>

@endsection

@push('pre-scripts')
    <script>
   window.pageMix.push({
        data() {
            return {
            tipo:"{{$tipo ?? 'administrativo'}}",
            titulo_pagina:"Programas Municipales",
            fields:[
                {key:'anio',label:'Año',sortable:true},
                {key:'nombre',label:'Programa',sortable:true},
                {key:'agestion',label:'A gestión',sortable:true},
                {key:'centrocosto',label:'C. de Costo',sortable:true},
                {key:'is_extrapresupuestario',label:'Extrapresupuestario',sortable:false},
                {key:'cuentas',label:'Ctas asociadas',sortable:false},
                {key:'opciones',label:'Opciones',sortable:false},
            ],
            nporpagina:20,
            npagina:1,
            totalitems:0,
            busqueda:null,
            filtro:null,
            }
        },
        methods:{
            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
                };
                let promise = axios.get(route('programasMunicipales.index'),{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 []
                })
            }

        }
    });

    function confirmarBorrar () {
        return confirm('¿Seguro de borrar item?')
    }

    </script>
@endpush