@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" aria-current="page">Administrador de Vehículos</li>
  </ol>
</nav>
@stop



@section('content')
    <div class="images" v-viewer>
        <img src="{{ asset('img/facturas-proceso.png') }}">
    </div>
    {{ session()->reflash() }}
    <div class="bgc-white p-20 bd">

    <div>
        <h2 class="pull-left">Administrador de Vehículos</h2>

        <div class="my-3 pull-right">
        <b-button-toolbar key-nav aria-label="">
        @can('vehiculosmunicipal.store')
            <b-button-group>
                <b-button  @click="MostrarModalReg" ><i class="fa fa-plus"></i> Agregar Registro</b-button>
            </b-button-group>
        @endcan 
        <b-button-group>
        <b-btn variant="primary" @click="MostrarModalResumen()">Mostrar Resumen</b-btn>
       </b-button-group>

        </b-button-toolbar>
 
      
        
        </div>
    </div>

    <div class="clearfix"></div>
        <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="Buscar()">Buscar</b-button>
            </b-input-group-append>
          </b-input-group> 
          <div class="row">
          <b-input-group prepend="Tipo" class="mt-3 col-6">
                <b-form-select v-model="filterTipoVehiculo" :options="opciones.tipo" value-field="key"  text-field="value">
                    <template #first>
                        <b-form-select-option :value="null" >-- Seleccione opción --</b-form-select-option>
                    </template>
                
                </b-form-select>  
          </b-input-group> 
          <b-input-group prepend="Dirección" class="mt-3 col-6">
                <b-form-select  v-model="filterDirecciones" :options="direcciones" value-field="id" text-field="nombre">
                    <template #first>
                        <b-form-select-option :value="null" >-- Seleccione opción --</b-form-select-option>
                    </template>
                </b-form-select>  
          </b-input-group> 
</div>
    </div>


<b-table
ref="tablaDatos" small hover outlined  
responsive="sm"
    :fields="columnas" 
    :items="datos" 
    :sort-by.sync="sortBy"
    :sort-desc.sync="sortDesc"
    sort-icon-left 
    responsive="sm" 
>
    <template v-slot:cell(placa_patente)="data">
        <a href="javascript:void(0)" @click="VerDetalle(data.item.id)">@{{data.item.placa_patente}}</a>
    </template>
    
    <template v-slot:cell(conductor)="data">
        <span v-if="data.item.conductores[0]!=null">
            <span v-if="data.item.conductores[0].user!=null">
                @{{data.item.conductores[0].user.full_name ?? ''}}
            </span>
            <span v-else>
                Sin Conductor
            </span>
        </span>
        <span v-else>
        No Asignado
        </span>
    </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>


    <template v-slot:cell(marca)="data">
        <div>@{{ data.item.marca}} @{{ data.item.modelo}}</div>
    </template>
    <template v-slot:cell(estado)="data">
        <div>@{{ data.item.nombre_estado[0] }}</div>
    </template>

    <template v-slot:cell(direccion)="data">
        <div>@{{ direcciones.find(x =>x.id == data.item.direccion_id ).nombre  }}</div>
    </template>

    <template v-slot:cell(costopcv)="data">
        <div v-if="data.item.resumen_gastos[anio]!= null" class="text-right">@{{ formatPrice(data.item.resumen_gastos[anio].PCV) }}</div><div v-else  class="text-right">0</div>
    </template>

    <template v-slot:cell(costortv)="data">
        <div v-if="data.item.resumen_gastos[anio]!= null" class="text-right">@{{ formatPrice(data.item.resumen_gastos[anio].RTV) }}</div><div v-else  class="text-right">0</div>
    </template>

    <template v-slot:cell(costosoap)="data">
        <div v-if="data.item.resumen_gastos[anio]!= null" class="text-right">@{{ formatPrice(data.item.resumen_gastos[anio].SOAP) }}</div><div v-else  class="text-right">0</div>
    </template>

    <template v-slot:cell(costoseguro)="data">
        <div v-if="data.item.resumen_gastos[anio]!= null" class="text-right">@{{ formatPrice(data.item.resumen_gastos[anio].seguro) }}</div><div v-else  class="text-right">0</div>
    </template>

    <template v-slot:cell(costoincidencias)="data">
        <div v-if="data.item.resumen_gastos[anio]!= null" class="text-right">@{{ formatPrice(data.item.resumen_gastos[anio].incidencias) }}</div><div v-else  class="text-right">0</div>
    </template>

    <template v-slot:cell(costoanual)="data">
        <div v-if="data.item.resumen_gastos[anio]!= null" class="text-right">@{{ formatPrice(sumarGastos(data.item.resumen_gastos[anio])) }}</div><div v-else  class="text-right">0</div>
    </template>


    

      <template v-slot:custom-foot="data">
        <b-tr>
          <b-th colspan="6">Total Año @{{anio }}</b-th>
  
          <b-th class="text-right">@{{formatPrice(this.totales.PCV)}}</b-th>
          <b-th class="text-right">@{{formatPrice(this.totales.SOAP)}}</b-th>
          <b-th class="text-right">@{{formatPrice(this.totales.RTV)}}</b-th>
          <b-th class="text-right">@{{formatPrice(this.totales.seguro)}}</b-th>
          <b-th class="text-right">@{{formatPrice(this.totales.incidencias)}}</b-th>

          <b-th class="text-right">@{{formatPrice(this.totales.PCV + this.totales.SOAP + this.totales.RTV + this.totales.seguro + this.totales.incidencias) }}</b-th>
         
        </b-tr>
      </template>
   


    

</b-table>
    </div>
    <b-modal v-model="modal_registro" hide-footer size="xl" ok-only :title="titulo_modal">
        <b-form id="formulario" v-on:submit="Registrar"  novalidate class="was-validated" >
        <div class=" mb-3">
            <div class="row d-flex">
                <b-form-group class="col-12 col-sm-4"  label="Placa Patente">
                    <input v-model="reg_v.placa_patente" class="form-control" type="text" name="placa_patente" required>
                </b-form-group>
                <br>
                <b-form-group class="col-12 col-sm-4"  label="Tipo Vehiculo">
                    <b-form-select required name="tipo_vehiculo"  v-model="reg_v.tipo_vehiculo" :options="opciones.tipo" value-field="key"  text-field="value"></b-form-select>
                    
                </b-form-group>
                <br>
                <b-form-group class="col-12 col-sm-4"  label="Marca">
                    <input v-model="reg_v.marca" class="form-control" type="text" name="marca" required>
                </b-form-group>
                <br>
                <b-form-group class="col-12 col-sm-4"  label="Año">
                    <input v-model="reg_v.ano" class="form-control" type="number" name="ano" required>
                </b-form-group>
                <br>
                <b-form-group class="col-12 col-sm-4"  label="Modelo">
                    <input v-model="reg_v.modelo" class="form-control" type="text" name="modelo" required>
                </b-form-group>
                <br>
                <b-form-group class="col-12 col-sm-4"  label="Color">
                    <input v-model="reg_v.color" class="form-control" type="text" name="color" required>
                </b-form-group>
                <br>

                <b-form-group class="col-12 col-sm-4"  label="Dirección Municipal">
                    <b-form-select required name="direccion"  v-model="reg_v.direccion" :options="direcciones" value-field="id" text-field="nombre"></b-form-select>
                    
                </b-form-group>

                <b-form-group class="col-12 col-sm-4"  label="N° Motor">
                    <input v-model="reg_v.n_motor" class="form-control" type="text" name="n_motor" required>
                </b-form-group>
                <br>
                <b-form-group class="col-12 col-sm-4"  label="N° Chasis">
                    <input v-model="reg_v.n_chasis" class="form-control" type="text" name="n_chasis" required>
                </b-form-group>
                <br>
                <b-form-group class="col-12 col-sm-4"  label="Estado">
                    <b-form-select required name="estado"  v-model="reg_v.estado" :options="opciones.estado"  value-field="key"  text-field="value[0]" ></b-form-select>
                
                
                </b-form-group>
                <br>
                <b-form-group class="col-12 col-sm-4"  label="Combustible">

                    <b-form-select required name="estado"  v-model="reg_v.combustible" :options="opciones.combustible"  value-field="key"  text-field="value"></b-form-select>

                   
                </b-form-group>
                <br>
                <b-form-group class="col-12 col-sm-4"  label="Observaciones">
                    <textarea v-model="reg_v.observaciones" class="form-control" type="text" name="observacion"></textarea>
                </b-form-group>
                <br>
                <b-form-group class="col-12 col-sm-4"  label="Accesorios">
                    <input v-model="reg_v.accesorios" class="form-control" type="text" name="accesorios">
                </b-form-group>
            </div>
        </div> 
        <div class="d-flex justify-content-end">
            <button class="btn btn-primary">Registrar</button>
        </div>
        </b-form>
    </b-modal>


    <b-modal v-model="modal_resumen" hide-footer size="sm" ok-only :title="titulo_modal">
      <div class="row" v-for="item in resumen_vehiculo">
        <div class="col">@{{item.nombre}}</div><div class="col">@{{item.total}}</div>
      </div>
    </b-modal>

@endsection

@push('pre-scripts')
    <script>
        window.pageMix.push({
            data: () => ({
                columnas:[
                    //{ key: 'id', label: 'ID',visible:false },
                    { key: 'placa_patente', label: 'PATENTE',visible:true },
                    { key: 'nombretipovehiculo', label: 'TIPO VEHICULO',visible:true },
                    { key: 'marca', label: 'MARCA MODELO',visible:true },
                    { key: 'ano', label: 'AÑO',visible:true },
                    { key: 'direccion', label: 'DIRECCIÓN MUNICIPAL',visible:true },
                    { key: 'estado', label: 'ESTADO',visible:true },
                    { key: 'costopcv', label: 'PCV',visible:true },
                    { key: 'costosoap', label: 'SOAP',visible:true },
                    { key: 'costortv', label: 'RTV',visible:true },
                    { key: 'costoseguro', label: 'Seguros',visible:true },
                    { key: 'costoincidencias', label: 'Reparaciones',visible:true },
                    { key: 'costoanual', label: 'Total',visible:true },

                ],

                datos:@json($vehiculos),
                query:'{{ app('request')->input('q') }}',
                direcciones:@json($direcciones),
                opciones:[],
                anio:{{ now()->year }},
                sortBy: 'placa_patente',
                sortDesc: false,
                titulo_modal: "",
                modal_resumen: false,
                modal_registro: false,
                reg_v: {},
                dismissSecs: 10,
                usuarios: [] ,
                datos_vehiculos: [],
                
                loading: false,
                errors: {},     
                totales:{PCV:0,SOAP:0,RTV:0,seguro:0,incidencias:0},
                resumen_vehiculo:{},
                filterTipoVehiculo:'{{ app('request')->input('filterVeh') }}',
                filterDirecciones:'{{ app('request')->input('filterDir') }}',
            }),
            mounted(){
                
                
            },
            created() {
                // $('form').submit(false);
                // //this.tipos_monedas_ed = this.tipos_monedas;
                // this.DateNow = moment().format('YYYY-MM-DDTHH:MM');
                // this.label_adjuntos = "Adjunto N°" 
                // this.t_adjuntos.push({});
                axios.get('{{ route('vehiculosmunicipal.opciones')}}?perPage=5000').then(response => this.opciones = response.data);

                let res={PCV:0,SOAP:0,RTV:0,seguro:0,incidencias:0};
                let that = this;
                Object.keys(this.datos).forEach(function(i,o){
                    if(that.datos[i].resumen_gastos[that.anio]!=null){
                        res.PCV = res.PCV + that.datos[i].resumen_gastos[that.anio].PCV;
                        res.SOAP +=that.datos[i].resumen_gastos[that.anio].SOAP;
                        res.RTV +=that.datos[i].resumen_gastos[that.anio].RTV;
                        res.seguro +=that.datos[i].resumen_gastos[that.anio].seguro;
                        res.incidencias = res.incidencias + that.datos[i].resumen_gastos[that.anio].incidencias;
                    }
                });
                totales=res;



            },
            computed:{
                
            },

            methods: { 
                 sumarGastos:function(val){
                     //console.log(val);
                     let res = 0;
                     Object.keys(val).forEach(key => res=res+val[key]);
                     return res;
                 },

                formatPrice(value) {
                    let val = (value/1).toFixed(0).replace('.', ',')
                    return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")
                },

                VerDetalle(vehiculo_id) {
                    window.location.href = window.location.origin + "/vehiculosmunicipal/vehiculo/" + vehiculo_id ;
                },
                
                MostrarModalReg() {
                    this.titulo_modal = "Registrar Vehiculo"
                    this.modal_registro = !this.modal_registro
                },

                MostrarModalResumen() {

                    this.titulo_modal = "Resumen Vehiculos"
                    this.modal_resumen = !this.modal_resumen
                    let that=this;
                    
                    Object(that.opciones.estado).forEach(function(o,i){
                        that.resumen_vehiculo[o.key] = {nombre:o.value[0],total:0}; 
                    });
                    Object(that.datos).forEach(function(o,i){
                        that.resumen_vehiculo[o.estado].total=that.resumen_vehiculo[o.estado].total+1;
                    });
                    delete that.resumen_vehiculo[0];
                },

                BuscarChange(event) {
                    this.buscar = event.target.value
                },

                Buscar() {
                    let url = new URL("{{ route('vehiculosmunicipal.index')}}");
                    if(this.query.trim()!=""){
                        url.searchParams.append('q', this.query);
                    }
                    if(this.filterTipoVehiculo!=null){
                        url.searchParams.append('filterVeh', this.filterTipoVehiculo);
                    }
                    if(this.filterDirecciones!=null){
                        url.searchParams.append('filterDir', this.filterDirecciones);
                    }
                    //if()
                    window.location.href = url; 
                    // const formData = new FormData;
                    
                    // formData.append(
                    //     'dato', 
                    //     this.buscar
                    // );

                    // this.$http.post(
                    //     '{{ route('vehiculosmunicipal.buscar') }}', 
                    //     formData
                    // ).then(
                    //     res => {
                            
                    //         if (res.data.exito == true) {
                    //             this.valid_bus = false
                    //             this.vehiculos = res.data.vehiculos
                    //         }
                    //         console.log(res.data.vehiculos)
                    //         //$("#" + this.encuesta_id).hide();
                    //         //window.location = '{{ route('home') }}'
                    //         //window.location.reload();
                    //     }
                    // ).catch(
                    //     err => {
                    //         if (err.response.status === 500) {
                    //             this.status = err.response.data.status
                    //         }

                    //         if (err.response.status === 422) {
                    //             this.errors = err.response.data.errors
                    //         }
                    //     }
                    // );
                },
                Registrar(e) {
                    e.preventDefault();
                    console.log(this.reg_v)

                    // if (typeof this.reg_v.tipo_vehiculo === "undefined" || this.reg_v.tipo_vehiculo === "0") {
                    //     this.valid_tipo_v = true
                    // } else if (typeof this.reg_v.estado === "undefined" || this.reg_v.estado === "0") {
                    //     this.valid_estado = true
                    // } else if (typeof this.reg_v.combustible === "undefined" || this.reg_v.combustible === "0") {
                    //     this.valid_combustible = true
                    // } else if (typeof this.reg_v.direccion === "undefined" || this.reg_v.direccion === "0") {
                    //     this.valid_direc = true
                    // } else {
                    if(this.validateForm()){
                        const formData = new FormData;
                        formData.append(
                            'placa_patente', 
                            this.reg_v.placa_patente
                        );

                        formData.append(
                            'direccion_id', 
                            this.reg_v.direccion
                        );
                        
                        formData.append(
                            'tipo_vehiculo', 
                            this.reg_v.tipo_vehiculo
                        );

                        formData.append(
                            'marca', 
                            this.reg_v.marca
                        );

                        formData.append(
                            'ano', 
                            this.reg_v.ano
                        );

                        formData.append(
                            'modelo', 
                            this.reg_v.modelo
                        );

                        formData.append(
                            'color', 
                            this.reg_v.color
                        );

                        formData.append(
                            'n_motor', 
                            this.reg_v.n_motor
                        );

                        formData.append(
                            'n_chasis', 
                            this.reg_v.n_chasis
                        );

                        formData.append(
                            'estado', 
                            this.reg_v.estado
                        );

                        formData.append(
                            'combustible', 
                            this.reg_v.combustible
                        );

                        if (typeof this.reg_v.observaciones !== "undefined") {
                            formData.append(
                                'observaciones', 
                                this.reg_v.observaciones
                            );
                        }

                        if (typeof this.reg_v.accesorios !== "undefined") {
                            formData.append(
                                'accesorios', 
                                this.reg_v.accesorios
                            );
                        }

                        formData.append(
                            'conductor_id', 
                            this.reg_v.conductor_id
                        );

                        this.$http.post(
                            '{{ route('vehiculosmunicipal.store') }}', 
                            formData
                        ).then(
                            res => {
                                console.log(res)
                                //$("#" + this.encuesta_id).hide();
                                //window.location = '{{ route('home') }}'
                                window.location.reload();
                            }
                        ).catch(
                            err => {
                                if (err.response.status === 500) {
                                    this.status = err.response.data.status
                                }

                                if (err.response.status === 422) {
                                    this.errors = err.response.data.errors
                                }
                            }
                        );
                    }
                },
                validateForm () {
                    var formId = 'formulario';
                    var nodes = document.querySelectorAll(`#${formId} :invalid`);
                    var errorObjectName = 'validationErrors';
                    var vm = this; //current vue instance;
                    if (nodes.length > 0) {
                        return false;
                    }
                    else {
                        return true;
                    }
                },
            }
        })
    </script>
@endpush