@extends('layouts.app')


@section('content')
    <!--<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>-->
 
    <div class="images" v-viewer>
        <img src="{{ asset('img/facturas-proceso.png') }}">
    </div>
    {{ session()->reflash() }}
    <div class="bgc-white p-20 bd">
        <h3>Administrador de Arriendos</h3>
        <br>
        <div class="row mb-3">
            <div class="col-9">
                @can('arriendoinmueble.store')
                    <div class="mb-3">
                        <button @click="MostrarModalInmueble" class="btn btn-primary">
                            Agregar Registro
                        </button>
                    </div>
                    <br>
                    <br>
                    <br>
                @endcan
                <b-form-group horizontal label="Buscar">
                    <input type="text" v-model="dato" @input="" class="form-control" id="buscar" name="buscar">
                </b-form-group>

                <div class="d-flex justify-content-end">
                    <b-btn @click="BuscarInmueble" class="btn btn-primary">@{{ text_btn_bus }}</b-btn>
                </div>
            </div>
            <div class="col-3">
                <b-btn block variant="primary" @click="Resumen">
                    Mostrar Resumen
                </b-btn>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>DUEÑO INMUEBLE</th> 
                        <th>DIRECCIÓN</th> 
                        <th>PROGRAMA</th> 
                        <th>DIRECCIÓN MUNICIPAL</th>
                        <th>SUPERVISOR CONTRATO</th> 
                        <th>ESTADO</th>
                        <th>ACCIONES</th>
                    </tr>
                </thead>
                <tbody>
                    <template v-if="valid_bus == true">
                    @isset($inmuebles)
                    @foreach($inmuebles as $inmueble)
                        <tr>
                            <td>
                                {{ $inmueble->dueno_inmueble }}
                            </td>
                            <td>
                                {{ $inmueble->direccion }}
                            </td>
                            <td>
                                {{ $inmueble->programa }}
                            </td>
                            <td>
                                {{ $inmueble->direccion_municipal->nombre }}
                            </td>
                            <td>
                                {{ $inmueble->getSupervisorName() }}
                            </td>
                            
                            
                            <td style="background: {{ $inmueble->getEstado()[1] }}">
                                {{ $inmueble->getEstado()[0] }}
                            </td>
                            <td>
                                <b-dropdown id="dropdown-1" text="Acciones" class="m-md-2" boundary="window">
                                    @can('arriendoinmueble.store')
                                        <b-dropdown-item-button @click="MostrarModalContrato({{ $inmueble->id }})">
                                            Agregar Contrato
                                        </b-dropdown-item-button>
                                    @endcan
                                    <b-dropdown-item-button @click="MostrarDetalle({{ $inmueble->id }})">
                                        Ver Detalle
                                    </b-dropdown-item-button>
                                </b-dropdown>
                            </td>
                        </tr>
                    @endforeach
                    @endisset
                    </template>
                    <template v-if="valid_bus == false">
                        <tr v-for="inmueble in inmuebles">
                            <td>
                                @{{ inmueble.dueno_inmueble }}
                            </td>
                            <td>
                                @{{ inmueble.direccion }}
                            </td>
                            <td>
                                @{{ inmueble.programa }}
                            </td>
                            <td>
                                @{{ inmueble.direccionmunicipal.nombre }}
                            </td>
                            <td>
                                @{{ inmueble.getupervisorname }}
                            </td>                          
                            <td v-bind:style="{ background: inmueble.getestado[1] }">
                                @{{ inmueble.getestado[0] }}
                            </td>
                            <td>
                                <b-dropdown id="dropdown-1" text="Acciones" class="m-md-2" boundary="window">
                                    @can('arriendoinmueble.store')
                                        <b-dropdown-item-button @click="MostrarModalContrato(inmueble.id)">
                                            Agregar Contrato
                                        </b-dropdown-item-button>
                                    @endcan
                                    <b-dropdown-item-button @click="MostrarDetalle(inmueble.id)">
                                        Ver Detalle
                                    </b-dropdown-item-button>
                                </b-dropdown>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </div>
 
    <b-modal v-model="modal_mapa" id="modal_mapa" hide-footer size="lg" ok-only :title="titulo_modal">
        
        <div class="row mb-6">
            <div class="col-12">
            <b-input-group prepend="Dirección" class="mt-3">
                <b-form-input v-model="inmu.direccion" autocomplete="off" type="search"></b-form-input>
                <b-input-group-append>
                    <b-button  @click="getDirection" variant="info">Buscar</b-button>
                </b-input-group-append>
            </b-input-group>

                <!-- <b-form-group horizontal label="Ingrese Direccion">
                    <input v-model="inmu.direccion" class="form-control" autocomplete="off" type="search">
                   
                </b-form-group>
                <div class="d-flex justify-content-end">
                    <b-btn @click="getDirection">Buscar</b-btn>
                </div> -->

                    <template v-if="m_direcciones.length > 0">
                        <select name="direccion" @change="SelectDir($event)" id="direccion" class="form-control">
                            <option v-for="dir in m_direcciones">@{{ dir.properties.display_name }}</option>
                        </select>
                    </template>

                <br>
            </div>
        </div>
        <div class="row mb-6">
            <div class="col-12">
                 <div id="mapid" ref="mapid" style='height: 500px;'></div>
            </div>
        </div>
        <br>
        <div class="row mb-6">
            <div class="col-6">
                <b-form-group horizontal label="Latitud">
                    <input  v-model="latlong.Obj_var.lat" type="search" class="form-control" name="direccion" required>
                </b-form-group>
            </div>
            <div class="col-6">
                <b-form-group horizontal label="Longitud">
                    <input  v-model="latlong.Obj_var.lng" type="search" class="form-control" name="longitud" required>
                </b-form-group>
            </div>
        </div>
        <br>
    </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>
                            En Tramite
                        </td>
                        <td>
                            @{{ resumen.en_tramite }}
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Vigentes
                        </td>
                        <td>
                            @{{ resumen.vigente }}
                        </td>
                    </tr>
                    <tr>
                        <td>
                            No Vigente
                        </td>
                        <td>
                            @{{ resumen.no_vigente }}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </b-modal>

    <b-modal v-model="modal_inmueble" hide-footer size="lg" ok-only :title="titulo_modal">
        <b-form v-on:submit="RegistrarInmueble">
        <div class="row mb-3">
            <div class="col-12">
                <b-form-group horizontal label="Dueño Inmueble">
                    <input v-model="inmu.dueno_inmueble" class="form-control" type="text" name="dueno_inmueble" required>
                </b-form-group>
                <br>
                <b-form-group horizontal label="Rut">
                    <input v-model="inmu.rut" class="form-control" type="text" name="rut" required>
                </b-form-group>
                <br>
                <b-form-group horizontal label="Ingrese Direccion">
                    <input v-model="inmu.direccion" class="form-control" autocomplete="off" type="search">
                </b-form-group>
                <br>
                <b-form-group horizontal label="Ubicación Geografica">
                    <b-btn @click="MostrarMapa">Buscar</b-btn>
                    <p style="position: absolute; color: red;" v-if="valid_geo">Debe especificar: dirección, latitud, longitud</p>
                </b-form-group>
                <br>
                <b-form-group horizontal label="Programa(s)">
                    <input v-model="inmu.programa" class="form-control" type="text" name="programa" required>
                </b-form-group>
                <br>
                <b-form-group horizontal label="Direccion Municipal">
                    <select required @change="DireccionChange($event)" name="direccion" id="direccion" class="form-control">
                        <option selected value="">Seleccione</option>
                        @foreach($direcciones as $direccion)
                            <option value="{{ $direccion->id }}">
                                {{ $direccion->nombre }}
                            </option>
                        @endforeach
                    </select>
                    <p style="position: absolute; color: red;" v-if="valid_direc">Seleccione Direccion Municipal</p>
                </b-form-group>
                <br>
                <b-form-group horizontal label="Observaciones">
                    <textarea v-model="inmu.observaciones" class="form-control" type="text" name="observaciones"></textarea>
                </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_adj" hide-footer size="sm" ok-only :title="titulo_modal">
        <template v-for="(ad, index) in adj">
            <a href="ad.url" target="_blank">
                <span :class="['fa', getFileIcon('ad.url'), 'mr-3']">
                    @{{ ad.basename }}
                </span> 
            </a>
            <br>
        </template>
    </b-modal>

    <b-modal v-model="modal_archivos" hide-footer size="lx" ok-only :title="titulo_modal">
        
            <template v-for="(adjunto, index) in t_adjuntos" >
                <b-form-group horizontal :label="label_adjuntos+(index + 1)">
                    <b-file  v-model="adjunto.adjunto" accept=".jpeg, .png, .doc, .docx, .pdf, .zip"></b-file>
                    <span>Formatos: jpeg, png, doc, docx, pdf, zip</span>
                    <input-error :errors="errors" nombre="adjunto"></input-error>
                    <div class="d-flex justify-content-end">
                        <button @click="DesApilarAdjuntos(index)" class="btn btn-danger">X</button>
                    </div>
                </b-form-group>
            </template>
            <div class="d-flex justify-content-end">
                <button @click="ApilarAdjuntos()" class="btn btn-primary">Agregar otro</button>
            </div>
    </b-modal>

    <b-modal v-model="modal_contrato" hide-footer size="xl" ok-only :title="titulo_modal">
        <b-form v-on:submit="RegistrarContrato">
        <div class="row mb-6">
            <div class="col-6">
                <b-form-group horizontal label="Cuenta Presupuestaria">
                    <input v-model="contr.cuenta_presup" class="form-control" type="text" name="cuenta_presup" required>
                </b-form-group>
                <br>
                <b-form-group horizontal label="N DA">
                    <input v-model="contr.n_da" class="form-control" type="number" name="n_da" required>
                </b-form-group>
                <br>
                <b-form-group horizontal label="Fecha DA">
                    <input v-model="contr.fecha_da" class="form-control" type="date" name="fecha_da" required>
                </b-form-group>
                <br>
                <b-form-group horizontal label="Vigencia Desde">
                    <input v-model="contr.vigencia_desde" class="form-control" type="date" name="vigencia_desde" required>
                </b-form-group>
                <br>
                <b-form-group horizontal label="Vigencia Hasta">
                    <input v-model="contr.vigencia_hasta" class="form-control" type="date" name="vigencia_hasta" required>
                </b-form-group>
            </div>
            
            <div class="col-6">
                <b-form-group horizontal label="Monto Mensual">
                    <input v-model="contr.monto_mensual" class="form-control" type="number" step="0.0" name="monto_mensual" required>
                </b-form-group>
                <br>
                <b-form-group horizontal label="Derecho de Aseo">
                    <input v-model="contr.derecho_de_aseo" class="form-control" type="number" step="0.0" name="derecho_de_aseo" required>
                </b-form-group>
                <br>
                <b-form-group horizontal label="Monto Anual">
                    <input v-model="contr.monto_anual" class="form-control" type="number" step="0.0" name="monto_anual" required>
                </b-form-group>
                <br>
                <b-form-group horizontal label="Supervisor Contrato">
                    <template>
                        <input v-model="contr.supervisor" class="form-control" autocomplete="off" @click="" type="search" @input="BuscarSupervisor($event)" name="supervisor" required>                             
                        <template v-if="supervisores.length > 0">
                            <div class="card" style="position: absolute;">
                                <ul class="list-group">
                                <li  @click="AgregarSupervisor(sup.id,sup.full_name,sup.rut,1)" class="list-group-item list-group-item-action py-2 overflow-hidden" v-for="sup in supervisores">
                                    @{{ sup.full_name }}
                                </li>
                            </ul>
                            </div>
                        </template>
                    </template>
                </b-form-group>
                <b-form-group horizontal label="Adjuntos">
                    <b-btn @click="MostrarModalAdjuntos">Adjuntar</b-btn>
                </b-form-group> 
                <b-form-group horizontal label="Observaciones">
                    <textarea v-model="contr.observaciones" class="form-control" type="text" name="observaciones"></textarea>
                </b-form-group>  
            </div>
        </div>
            
        <div class="d-flex justify-content-end">
            <button class="btn btn-primary">
                Registrar
            </button>
        </div>
        </b-form>
    </b-modal>
@endsection

    @push('pre-scripts')
           
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script> 
    <script>
        window.pageMix.push({
            data: () => ({
                mapa: null,
                inmuebles : {},
                resumen: {},
                disabled: true,
                text_btn_bus: "Buscar",
                label_adjuntos: "Adjunto N°",
                t_adjuntos: [],
                dato: "",
                flag_dir: true,
                selected: "",
                titulo_modal: "",
                supervisores: [],
                usuarios: [],
                modal_inmueble: false,
                modal_contrato: false,
                modal_resumen: false,
                modal_archivos: false,
                modal_adj: false,
                valid_bus: true,
                modal_mapa: false,
                valid_geo: false,
                inmu: {},
                contr: {},
                valid_direc: false,
                errors: {},
                status: null,
                adj: [],
                m_direcciones: [],
                m_direcc: [],
                sizes: ['Small', 'Medium', 'Large', 'Extra Large'],
                map: null,
                mapLat: -33.829357,
                mapLng: 150.961761,
                mapDefaultZoom: 10,
                marker: null,
                latlong:{Obj_var:{lat: 0.0,lng: 0.0}}
            }),

            // created() {
            //     this.latlong.Obj_var = {
            //         lat: 0.0,
            //         lng: 0.0
            //     }
            // },

            mounted() {


                this.$root.$on('bv::modal::shown', (bvEvent, modalId) => {
                    if(modalId=='modal_mapa'){

                        var ubicacion = new L.LatLng(
                            this.latlong.Obj_var.lat, 
                            this.latlong.Obj_var.lng
                        );
                        
                        document.map = L.map(this.$refs['mapid']).setView(
                            ubicacion, 
                            14
                        );
                        document.map.vue=this;
                        document.map.panTo(ubicacion);
                        document.map.invalidateSize();


                        L.tileLayer(
                            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
                            }
                        ).addTo(document.map);
                        document.map = document.map

                        document.marker = L.marker(
                            ubicacion, {
                                draggable:'true'
                            }
                        ).addTo(document.map)
                        .bindPopup('Ubicación Geografica del inmueble');
                        
                        document.Obj_func = {
                            upmark: function(event) {
                                var marker = event.target  
                                var pos = marker.getLatLng()
                                console.log(pos)
                                console.log(event.target._map.vue);
                                //this.latlong.Obj_var.lat = pos.lat
                                //this.latlong.Obj_var.lng = pos.lng

                                event.target._map.vue.latlong.Obj_var.lat = pos.lat;
                                event.target._map.vue.latlong.Obj_var.lng = pos.lng;
                                console.log(this.titulo_modal)

                                document.lat = pos.lat
                                document.lng = pos.lng

                                var newLatLng = new L.LatLng(
                                    pos.lat, 
                                    pos.lng
                                );

                                document.marker.setLatLng(newLatLng); 
                                document.map.setView(
                                    newLatLng, 
                                   16
                                );
                                
                                
                                document.map.panTo(newLatLng);
                                //document.map.setZoom(18);
                                document.map.invalidateSize()
                            }
                        }

                        document.marker.on(
                            'dragend', 
                            function (event) {
                                document.Obj_func.upmark(event)
                            }
                        );
                        document.map.invalidateSize()
                        $(window).resize();

                    }
                });

                
            }, 

            methods: {
                SelectDir(event) {
                    this.inmu.direccion = event.target.value
                    this.getDirection()
                    console.log(event)
                },

                MostrarModalAdjuntos() {
                    //this.cond.vehiculo_id = id
                    this.t_adjuntos.push({});

                    this.titulo_modal = "Registrar Adjuntos"
                    this.modal_archivos = !this.modal_archivos
                },

                BuscarInmueble() {
                    if (this.valid_bus == "") {
                        this.valid_bus = true
                        this.text_btn_bus = "Buscar"
                    } else {
                        const formData = new FormData;

                        formData.append(
                            'dato', 
                            this.dato
                        );

                        this.$http.post(
                            '{{ route('arriendoinmueble.get_inmuebles') }}', 
                            formData
                        ).then(
                            res => {
                                this.text_btn_bus = "Mostrar Todos"
                                this.valid_bus = false
                                console.log(res)
                                this.inmuebles = res.data
                            }
                        ).catch(
                            err => {
                                if (err.response.status === 500) {
                                    this.status = err.response.data.status
                                }

                                if (err.response.status === 422) {
                                    this.errors = err.response.data.errors
                                }
                            }
                        );
                    }
                },

                MostrarAdj(adjuntos) {
                    this.adj = adjuntos
                    this.titulo_modal = "Archivos Adjuntos"
                    this.modal_adj = !this.modal_adj
                },

                Resumen() {
                    this.$http.post(
                        '{{ route('arriendoinmueble.resumen') }}'
                    ).then(
                        res => {
                            this.titulo_modal = "Resumen"
                            this.resumen = res.data
                            this.modal_resumen = !this.modal_resumen
                            console.log(res)
                        }
                    ).catch(
                        err => {
                            if (err.response.status === 500) {
                                this.status = err.response.data.status
                            }

                            if (err.response.status === 422) {
                                this.errors = err.response.data.errors
                            }
                        }
                    );
                },

                CambDircc() {
                    console.log(this.inmu.direccion)
                },  

                MostrarDetalle(inmueble_id) {
                    window.location.href = window.location.origin + "/arriendoinmueble/" + inmueble_id
                },  
                
                MostrarModalInmueble() {
                    this.titulo_modal   = "Registro Inmueble";
                    this.modal_inmueble = !this.modal_inmueble
                },

                MostrarMapa() {
                    this.getLocation()
                    this.titulo_modal   = "Mapa";
                    this.modal_mapa = !this.modal_mapa
                },

                getDirection() {
                    this.$http.get(
                        "https://nominatim.openstreetmap.org/search?q="+this.inmu.direccion+"&format=geojson"
                    ).then(
                        res => {
                            if (res.request.status == 200) {
                                if (res.data.features.length > 0) {
                                    console.log(res.data.features)
                                    this.m_direcciones = res.data.features

                                    for (var i = 0; i < this.m_direcciones.length; i++) {
                                        this.m_direcc.push(this.m_direcciones[i].properties.display_name)
                                    }
                                    
                                    this.latlong.Obj_var.lat = res.data.features[0].geometry.coordinates[1]
                                    this.latlong.Obj_var.lng = res.data.features[0].geometry.coordinates[0]
                                    this.inmu.direccion = res.data.features[0].properties.display_name

                                    var newLatLng = new L.LatLng(
                                        this.latlong.Obj_var.lat, 
                                        this.latlong.Obj_var.lng
                                    );

                                    document.map.setView(
                                        newLatLng, 
                                        26
                                    );
                                    document.marker.setLatLng(newLatLng)

                                    console.log(this.latlong.Obj_var.lat)
                                    console.log(this.latlong.Obj_var.lng)
                                    this.MostrarMapa(
                                        this.latlong.Obj_var.lat,
                                        this.latlong.Obj_var.lng,
                                        op
                                    )
                                    this.MostrarMapa(
                                        this.latlong.Obj_var.lat,
                                        this.latlong.Obj_var.lng,
                                        op
                                    )
                                    
                                    document.marker.setLatLng(newLatLng); 
                                    document.map.panTo(newLatLng);
                                    document.map.setZoom(18);
                                    document.map.invalidateSize()
                                } else {
                                    console.log("lugar no encontrado")
                                }
                            } else {
                                console.log("Error de open street map")
                            }
                        }
                    ).catch(
                        err => {
                            if (err.response.status === 500) {
                                this.status = err.response.data.status
                            }

                            if (err.response.status === 422) {
                                this.errors = err.response.data.errors
                            }
                        }
                    );
                },

                MostrarModalContrato(inmueble_id) {
                    this.contr.inmueble_id = inmueble_id
                    this.titulo_modal   = "Registro Contrato";
                    this.modal_contrato = !this.modal_contrato
                },

                DireccionChange(event) {
                    this.inmu.direccion_id = event.target.value
                    if (this.inmu.direccion_id != "") {
                        this.valid_direc = false
                    } 
                },

                ApilarAdjuntos() {
                    this.label_adjuntos = "Adjunto N°" 
                    this.t_adjuntos.push({});
                },

                DesApilarAdjuntos(index) {
                    this.t_adjuntos.splice(index, 1);
                },

                getLocation() {
                    if (navigator.geolocation) {
                        navigator.geolocation.getCurrentPosition(this.showPosition);
                    } else { 
                        console.log("Tu navegador no tiene soporte para geolocacion");
                    }
                },

                showPosition(position) {
                    this.latlong.Obj_var.lat = position.coords.latitude
                    this.latlong.Obj_var.lng = position.coords.longitude

                    var newLatLng = new L.LatLng(
                        this.latlong.Obj_var.lat, 
                        this.latlong.Obj_var.lng
                    );

                    document.map.setView(
                        newLatLng, 
                        26
                    );

                    console.log(this.latlong.Obj_var.lat)
                    console.log(this.latlong.Obj_var.lng)
                    this.MostrarMapa()
                    this.MostrarMapa()
                    
                    document.marker.setLatLng(newLatLng); 
                    document.map.panTo(newLatLng);
                    document.map.setZoom(18);
                    document.map.invalidateSize()
                },

                RegistrarInmueble(e) {
                    e.preventDefault();
         
                    const formData = new FormData;
                        
                    if (typeof this.inmu.direccion_id === "undefined" || this.inmu.direccion_id === "" || this.inmu.direccion_id === "0") {
                        this.valid_direc = true
                        this.disabled = false
                        return false;
                    } else if(typeof this.inmu.direccion === "undefined" || typeof this.latlong.Obj_var.lat === "undefined" || typeof this.latlong.Obj_var.lng === "undefined") {
                        this.valid_geo = true
                        this.disabled = false   
                        return false;
                    } else {
                        formData.append(
                            'dueno_inmueble', 
                            this.inmu.dueno_inmueble
                        );

                        formData.append(
                            'rut', 
                            this.inmu.rut
                        );

                        formData.append(
                            'direccion', 
                            this.inmu.direccion
                        );

                        formData.append(
                            'lat', 
                            this.latlong.Obj_var.lat
                        );

                        formData.append(
                            'lng', 
                            this.latlong.Obj_var.lng
                        );

                        formData.append(
                            'programa', 
                            this.inmu.programa
                        );

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

                        this.$http.post(
                            '{{ route('arriendoinmueble.store') }}', 
                            formData
                        ).then(
                            res => {
                                console.log(res)
                                //$("#" + 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
                                }
                            }
                        );
                    }          
                },

                RegistrarContrato(e) {
                    e.preventDefault();
                    const formData = new FormData;

                    formData.append(
                        'n_adjuntos', 
                        this.t_adjuntos.length
                    );

                    if (this.t_adjuntos.length != 0) {
                        for (var i = 0; i < this.t_adjuntos.length; i++) {
                            formData.append(
                                'adjunto_' + i, 
                                this.t_adjuntos[i].adjunto
                            );
                        }
                        console.log(this.t_adjuntos[0].adjunto)
                    }

                    formData.append(
                        'supervisor_id', 
                        this.contr.supervisor_id
                    );
                    
                    formData.append(
                        'inmueble_id', 
                        this.contr.inmueble_id
                    );

                    formData.append(
                        'cuenta_presup', 
                        this.contr.cuenta_presup
                    );

                    formData.append(
                        'n_da', 
                        this.contr.n_da
                    );

                    formData.append(
                        'fecha_da', 
                        this.contr.fecha_da
                    );

                    formData.append(
                        'vigencia_desde', 
                        this.contr.vigencia_desde
                    );

                    formData.append(
                        'vigencia_hasta', 
                        this.contr.vigencia_hasta
                    );

                    formData.append(
                        'monto_mensual', 
                        this.contr.monto_mensual
                    );

                    formData.append(
                        'derecho_de_aseo', 
                        this.contr.derecho_de_aseo
                    );

                    formData.append(
                        'monto_anual', 
                        this.contr.monto_anual
                    );

                    formData.append(
                        'observaciones', 
                        this.contr.observaciones
                    );

                    this.$http.post(
                        '{{ route('arriendoinmueble.store_contrato') }}', 
                        formData
                    ).then(
                        res => {
                            console.log(res)
                            //$("#" + 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
                            }
                        }
                    );
                },

                getFileIcon(extension) {
                    if (this.$_.includes(['.xls', '.xlsx'], extension)) {
                        return 'fa-file-excel-o'
                    }

                    if (this.$_.includes(['doc', 'docx'], extension)) {
                        return 'fa-file-word-o'
                    }

                    if (this.$_.includes(['ppt', 'pptx'], extension)) {
                        return 'fa-file-powerpoint-o'
                    }

                    if (this.$_.includes(['zip', 'rar'], extension)) {
                        return 'fa-file-archive-o'
                    }

                    if (this.$_.includes(['mp4', 'avi'], extension)) {
                        return 'fa-file-movie-o'
                    }

                    if (this.$_.includes(['png', 'jpg', 'jpeg'], extension)) {
                        return 'fa-file-picture-o'
                    }

                    if (this.$_.includes(['mp3'], extension)) {
                        return 'fa-file-sound-o'
                    }

                    if (this.$_.includes(['txt'], extension)) {
                        return 'fa-file-text-o'
                    }

                    if (this.$_.includes(['pdf'], extension)) {
                        return 'fa-file-pdf-o'
                    }

                    if (this.$_.includes(['url'], extension)) {
                        return 'fa-link'
                    }
                    return 'fa-file'
                },

                BuscarUsers(nombre) {
                    axios.get(
                        `{{ route('boletasgarantia.search') }}`, { 
                            params: { 
                                nombre: nombre 
                            } 
                        }
                    ).then(
                        response => {
                            this.usuarios = response.data;
                            
                        }
                    ).catch(
                        error => {}
                    );
                },
                BuscarSupervisor(event) {
                    console.log(event.target.value)
                    if(event.target.value !== "") {
                        this.BuscarUsers(event.target.value);
                        this.supervisores = this.usuarios
                    } else {
                        this.supervisores = [];
                    }
                },

                AgregarSupervisor(id, nombre, rut, op) {
                    this.contr.supervisor = nombre
                    this.contr.rut = rut
                    this.contr.supervisor_id = id
                    this.supervisores = [];
                    console.log(this.contr.supervisor_id)
                }
            }

            

        })
    </script>
@endpush