@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-form-group horizontal label="Buscar">
                        <input type="text" @input="BuscarChange($event)" class="form-control" id="buscar" name="buscar">
                    </b-form-group>

                    <div class="d-flex justify-content-end">
                        <b-btn @click="Buscar()" class="btn btn-primary" >Buscar</b-btn>
                    </div>
                    <!--<b-btn @click="testeo()" class="btn btn-primary" >testeo</b-btn>-->
            </div>
            <div class="col-3">
                
            </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(costopcv)="data">
        <div class="text-right">@{{ formatPrice(data.item.resumen_gastos[anio].PCV) }}</div>
    </template>

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

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

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

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

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

   


    

</b-table>
    </div>
    <b-modal v-model="modal_registro" hide-footer size="xl" ok-only :title="titulo_modal">
        <b-form v-on:submit="Registrar">
        <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">
                    <select @change="TipoVehiculoChange($event)" name="tipo_vehiculo" id="tipo_vehiculo" class="form-control">
                        <option :value="index" v-for="(tip, index) in tipo_vehiculo" >@{{ tip.op }}</option>
                    </select>
                    <p style="position: absolute; color: red;" v-if="valid_tipo_v">Seleccione Tipo Vehiculo</p>
                </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 name="direccion"  v-model="reg_v.direccion" :options="direcciones" value-field="id" text-field="nombre">
                        <template v-slot:first>
                            <b-form-select-option :value="null" >-- Seleccione --</b-form-select-option>
                        </template>
                    </b-form-select>
                    <p style="position: absolute; color: red;" v-if="valid_direc">Seleccione Direccion Municipal</p>
                </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 name="estado"  v-model="reg_v.estado" :options="opciones.estados" value-field="id" text-field="nombre">
                        <template v-slot:first>
                            <b-form-select-option :value="null" >-- Seleccione --</b-form-select-option>
                        </template>
                    </b-form-select>
                    <p style="position: absolute; color: red;" v-if="valid_estado">Seleccione Estado Vehiculo</p>
                
                </b-form-group>
                <br>
                <b-form-group class="col-12 col-sm-4"  label="Combustible">

                    <b-form-select name="estado"  v-model="reg_v.combustible" :options="opciones.combustible" value-field="id" text-field="nombre">
                        <template v-slot:first>
                            <b-form-select-option :value="null" >-- Seleccione --</b-form-select-option>
                        </template>
                    </b-form-select>

                    <p style="position: absolute; color: red;" v-if="valid_combustible">Seleccione Combustible</p>
                </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="table-responsive">
            <table class="table table-striped">
                <thead>                    
                </thead>
                <tbody>
                    <tr>
                        <td>
                            Vigentes
                        </td>
                        <td>
                            {{ $resumen["vigentes"] }}
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Donados
                        </td>
                        <td>
                            {{ $resumen["donados"] }}
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Comodato
                        </td>
                        <td>
                            {{ $resumen["comodatos"] }}
                        </td>
                    </tr>
                    <tr> 
                        <td>
                            De Baja
                        </td>
                        <td>
                            {{ $resumen["de_baja"] }}
                        </td>
                    </tr>
                    <tr>
                        <td>
                            En Taller
                        </td>
                        <td>
                            {{ $resumen["en_taller"] }}
                        </td>
                    </tr>
                    <tr>
                        <td>
                            En Taller (Siniestro)
                        </td>
                        <td>
                            {{ $resumen["en_taller_s"] }}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </b-modal>

@endsection

@push('xpre-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.nombre', 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),

                direcciones:@json($direcciones),
                opciones:[],
                anio:{{ now()->year }},
                sortBy: 'placa_patente',
                sortDesc: false,
                titulo_modal: "",
                modal_resumen: false,
                dismissSecs: 10,
                usuarios: [] ,
                datos_vehiculos: [],
                loading: false,
                errors: {},     
            }),
           mounted(){
                axios.get('{{ route('evaluacionproveedores.jsonlistaproveedores')}}?perPage=5000').then(response => this.opciones = response.data.data);
            },
            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({});
            },
            computed:{
                resumen_vehiculo:function(){
                    let arr={"Operativo":0,"De Baja (Donado)":0,"De Baja (Rematado)":0,"De Baja":0,"En Falla":0,"En taller":0,"En taller (siniestro)":0};
                    return arr;
                },
            },

            methods: { 
                sumarGastos:function(val){
                    let res=0;
                    foreach(i in val){
                        res=res+i;
                    }
                    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_id ;
                },

                MostrarModalResumen() {

                    this.titulo_modal = "Resumen Vehiculos"
                    this.modal_resumen = !this.modal_resumen
                },

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

                Buscar() {
                    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('encuestas.index') }}'
                            //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
                            }
                        }
                    );
                },
            }
        })
    </script>
@endpush