@extends('layouts.app')


@push('head')
    <style type="text/css">
        .clearable {
            position: relative;
            display: inline-block;
        }

        .clearable input[type=text] {
            padding-right: 24px;
            width: 100%;
            box-sizing: border-box;
        }

        .clearable__clear {
            display: none;
            position: absolute;
            right: 0;
            top: 0;
            padding: 0 8px;
            font-style: normal;
            font-size: 1.2em;
            user-select: none;
            cursor: pointer;
        }

        .clearable input::-ms-clear { /* Remove IE default X */
            display: none;
        }
    </style>
@endpush

@section('content')
    {{ session()->reflash() }}

    <div class="images" v-viewer>
        <img src="{{ asset('img/facturas-proceso.png') }}">
    </div>

    <div class="bgc-white p-20 bd">
        <h3>Mantenedor boletas de garantia</h3>
        <br>
        <div class="row mb-3">
            <div class="col-9">
                @can('boletasgarantia.store')
                    <div class="mb-3">
                        <button @click="MostrarModalReg" class="btn btn-primary">
                            Agregar Registro Manual
                        </button>
                    </div>
                    <br>
                    <br>
                    <br>
                @endcan
                <b-form-group horizontal label="Buscar">
                    <input type="text" @input="BuscarChange($event)" class="form-control" id="buscar" name="buscar">
                </b-form-group>

                <b-form-group horizontal label="Area">
                    <select @change="AreaChange($event)" name="area" id="area" class="form-control">
                        <option :value="ar.value" v-for="(ar, index) in areas">@{{ ar.op }}</option>
                    </select>
                </b-form-group>

                <div class="d-flex justify-content-end">
                    <button @click="Buscar()" class="btn btn-primary" :disabled="disabled">
                        Buscar
                    </button>
                </div>
            </div>
            <div class="col-3">
                <b-btn block variant="primary" @click="Resumen()">Mostrar Resumen</b-btn>
                <button class="btn btn-primary btn-block" @click="MostrarMapa()" type="button">
                    Ver mapa proceso
                </button>
            </div>
        </div>

        @isset($boletas)
            {{ $boletas->links() }}
        @endisset

        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>N° Documento</th>
                    <th>Proveedor</th>
                    <th>Tipo Garantía</th>
                    <th>Monto</th>
                    <th>Fecha Vencimiento</th>
                    <th>Estado</th>
                    <th>Acciones</th>
                </tr>
                </thead>
                <tbody>
                @isset($boletas)
                    @foreach($boletas as $boleta)
                        <tr>
                            <th>
                                {{ $boleta->n_documento }}
                            </th>
                            <th>
                                {{ $boleta->nombre_empresa }}
                            </th>
                            <th>
                                {{ $boleta->tipogarantia->tipo }}
                            </th>
                            <th>
                                {{ $boleta->monto }}
                            </th>
                            <th>
                                {{ $boleta->fecha_vencimiento }}
                            </th>
                            @if(strcmp($boleta->estado, "VIGENTE") == 0)
                                <th style="background: #FFFF00;">
                            @elseif(strcmp($boleta->estado, "VENCIDA") == 0)
                                <th style="background: #FF0000;">
                            @elseif(strcmp($boleta->estado, "PARA_ENTREGA") == 0)
                                <th style="background: #FFCC00;">
                            @elseif(strcmp($boleta->estado, "ENTREGADO") == 0)
                                <th style="background: #009900;">
                                    @endif
                                    {{ $boleta->estado }}
                                </th>
                                <th>
                                    <b-dropdown id="dropdown-1" text="Acciones" class="m-md-2" boundary="window">
                                        <b-dropdown-item-button @click="Ver({{ $boleta }})">
                                            Ver
                                        </b-dropdown-item-button>

                                        @if($user->can('boletasgarantia.store'))
                                            <b-dropdown-item-button @click="Editar({{ $boleta }})">
                                                Editar
                                            </b-dropdown-item-button>
                                        @endif

                                        @if($user->can('boletasgarantia.store') || $user->id == $boleta->ito_supervisor_id)
                                            @if(!isset($boleta->devolucion))
                                                <b-dropdown-item-button @click="SubirDevMod({{ $boleta->id }})">
                                                    Subir D.A Devolución
                                                </b-dropdown-item-button>
                                            @else
                                                <b-dropdown-item-button
                                                    @click="MostrarDevMod({{ $boleta->id }}, {{ $boleta->m_devolucion }})">
                                                    Mostrar D.A Devolución
                                                </b-dropdown-item-button>
                                            @endif
                                        @endif
                                    </b-dropdown>
                                </th>
                        </tr>
                    @endforeach
                @endisset
                </tbody>
            </table>
        </div>
        @isset($boletas)
            {{ $boletas->links() }}
        @endisset
    </div>

    <b-modal v-model="modal_dev" hide-footer size="lg" ok-only title="Subir Devolución">
        <b-form-group horizontal label="N° Decreto Devolución">
            <input v-model="devo.n_decreto_devolucion" class="form-control" type="number" name="n_decreto_devolucion">
        </b-form-group>

        <b-form-group horizontal label="Fecha Decreto">
            <input v-model="devo.fecha_decreto" class="form-control" type="date" name="fecha_decreto">
        </b-form-group>

        <b-form-group horizontal label="Decreto Adjunto">
            <b-file v-model="devo.decreto_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>
        </b-form-group>

        <div class="d-flex justify-content-end">
            <button @click="SubirDev" class="btn btn-primary">Registrar</button>
        </div>
    </b-modal>

    <b-modal v-model="modal_m_dev" hide-footer size="lg" ok-only title="Subir Devolución">
        <template v-if="flag_dev_ed">
            <b-form-group horizontal label="N° Decreto Devolución">
                <input v-model="devo.n_decreto_devolucion" class="form-control" type="number"
                       name="n_decreto_devolucion">
            </b-form-group>

            <b-form-group horizontal label="Fecha Decreto">
                <input v-model="devo.fecha_decreto" class="form-control" type="date" name="fecha_decreto">
            </b-form-group>

            <b-form-group horizontal label="Decreto Adjunto">
                <b-file v-model="devo.decreto_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>
            </b-form-group>

            <div class="d-flex justify-content-end">
                <button @click="SubirDev" class="btn btn-primary">Registrar</button>
            </div>
        </template>
        <template v-else>
            <div class="table-responsive">
                <table class="table">
                    <thead>
                    </thead>
                    <tbody>
                    <tr>
                        <th>N° Decreto Devolución</th>
                        <td>@{{ devolucion.n_decreto_devolucion }}</td>
                    </tr>

                    <tr>
                        <th>Fecha Decreto Devolución</th>
                        <td>@{{ devolucion.fecha_decreto }}</td>
                    </tr>
                    <tr>
                        <th>Adjunto</th>
                        <td>
                            <b-btn @click="MostrarAdj()">Mostrar Adjuntos</b-btn>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </template>
        <br>
        <div class="d-flex justify-content-end">
            <b-btn @click="flag_dev_ed = !flag_dev_ed">
                <template v-if="flag_dev_ed">
                    Mostrar
                </template>
                <template v-else>
                    Editar
                </template>
            </b-btn>
        </div>
    </b-modal>

    <b-modal v-model="modal_resumen" hide-footer size="sm" ok-only title="Resumen">
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>Estado Boleta</th>
                    <th>Cantidad</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>Vigente</td>
                    <td>@{{ resumen.vigentes }}</td>
                </tr>
                <tr>
                    <td>Vencida</td>
                    <td>@{{ resumen.vencidas }}</td>
                </tr>
                <tr>
                    <td>Para Entrega</td>
                    <td>@{{ resumen.para_entregas }}</td>
                </tr>
                <tr>
                    <td>Entregado</td>
                    <td>@{{ resumen.entregados }}</td>
                </tr>
                </tbody>
            </table>
        </div>

    </b-modal>


    <b-modal v-model="modal_registro" hide-footer size="xl" ok-only title="Agregar Recurso">
        <b-form v-on:submit="Registrar">
            <div class="row mb-3">
                <div class="col-4">
                    <b-form-group horizontal label="Rut Empresa">
                        <input v-model="datos_registro.rut_empresa" class="form-control" type="text" name="rut_empresa"
                               required>
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="Nombre Empresa">
                        <input v-model="datos_registro.nombre_empresa" class="form-control" type="text"
                               name="nombre_empresa" required>
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="Fecha Emisión">
                        <input v-model="datos_registro.fecha_emision" class="form-control" type="date"
                               name="fecha_emision" required>
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="Fecha Vencimiento">
                        <input required v-model="datos_registro.fecha_vencimiento" class="form-control" type="date"
                               name="fecha_vencimiento">
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="Tipo Moneda">
                        <select required @change="TipoMonedaChange($event, 1)" :v-model="datos_registro.tipo_moneda"
                                name="tipo_moneda" id="tipo_moneda" class="form-control">
                            <option v-for="(tipo_mon, index) in tipos_monedas" :value="tipo_mon.value">
                                @{{ tipo_mon.op }}
                            </option>
                        </select>
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="Estado">
                        <select required :v-model="datos_registro.estado" name="estados" id="estados"
                                @change="EstadoChange($event,1)" class="form-control">
                            <option :value="estado.value" v-for="(estado, index) in estados">
                                @{{ estado.op }}
                            </option>
                        </select>
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="Obs Generales">
                        <textarea required v-model="datos_registro.obs_generales" class="form-control" type="text"
                                  name="obs_generales">
                        </textarea>
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="Tipo Documento">
                        <select required @change="TipoDocumentoChange($event, 1)" name="tipo_documento"
                                id="tipo_documento" class="form-control">
                            <option :value="index" v-for="(tipo_doc, index) in tipos_documentos">
                                @{{ tipo_doc }}
                            </option>
                        </select>
                    </b-form-group>
                </div>
                <div class="col-4">
                    <b-form-group horizontal label="Tipo Garantía">
                        <select required @change="TipoGarantiaChange($event, 1)" name="tipo_garantia" id="tipo_garantia"
                                class="form-control">
                            <option :value="index" v-for="(tipo_gar, index) in tipo_garantias">@{{ tipo_gar }}</option>
                        </select>
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="Monto">
                        <input v-model="datos_registro.monto" class="form-control" type="number" step="0.00"
                               name="monto" required>
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="N° Documento">
                        <input v-model="datos_registro.n_documento" class="form-control" type="text" name="correo"
                               required>
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="Id Ingreso">
                        <input v-model="datos_registro.ingreso_id" class="form-control" type="number" name="ingreso_id"
                               required>
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="Institución Financiera">
                        <input v-model="datos_registro.inst_financiera" class="form-control" type="text"
                               name="inst_financiera" required>
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="Adjuntos">
                        <b-btn @click="MostrarModalAdjuntos">Adjuntar</b-btn>
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="Notificados">
                        <template>
                            <input class="form-control" type="text" @input="BuscarNotificados($event)" name="notificado"
                                   required>
                            <template v-if="notificados.length > 0">
                                <div class="card" style="position: absolute;">
                                    <ul class="list-group">
                                        <li :id="not.id" @click="AgregarNotificado(not.id)" style="cursor: grab;"
                                            class="list-group-item list-group-item-action py-2 overflow-hidden"
                                            v-for="not in notificados">
                                            @{{ not.full_name }}
                                        </li>
                                    </ul>
                                </div>
                            </template>
                        </template>
                    </b-form-group>
                </div>
                <div class="col-4">
                    <b-form-group horizontal label="Area">
                        <select required :v-model="datos_registro.area" @change="AreaFormChange_ed($event)" name="area"
                                id="area" class="form-control">
                            <option :value="area.value" v-for="(area, index) in areas">@{{ area.op }}</option>
                        </select>
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="ITO Supervisor" hidden>
                        <template>
                            <input :disabled="dis_sup" v-model="datos_registro.supervisor" class="form-control"
                                   autocomplete="off" @click="oneClick($event)" 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,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>
                    <br>
                    <b-form-group horizontal label="Supervisor">
                        <v-select @keypress.native="BuscarSupervisor($event)" label="full_name" v-model="supervisor"
                                  :options="supervisores" v-on:input="AgregarSupervisorV($event)"
                                  :rules="[(v) => !!v || 'Supervisor es requerido']" required v-validate="'required'">
                            <span slot="no-options">
                                No se encuentran registros
                            </span>
                        </v-select>
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="Contacto Supervisor">
                        <input v-model="datos_registro.cont_sup" :value="datos_registro.cont_sup" class="form-control"
                               type="text" name="cont_sup" required disabled>
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="Email Supervisor">
                        <input v-model="datos_registro.email_sup" class="form-control" type="email" name="email_sup"
                               disabled required>
                    </b-form-group>

                    <br>
                    <b-form-group horizontal label="Fecha Entrega">
                        <input v-model="datos_registro.fecha_entrega" class="form-control" type="date"
                               name="fecha_entrega">
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="Rut Entrega">
                        <input v-model="datos_registro.rut_entrega" class="form-control" type="text" name="entrega">
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="Nombre Entrega">
                        <input v-model="datos_registro.nombre_entrega" class="form-control" type="text"
                               name="nombre_entrega">
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="Obs Entrega">
                        <textarea v-model="datos_registro.obs_entrega" class="form-control" type="text"
                                  name="obs_entrega">
                        </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_notificados" hide-footer size="sm" ok-only title="Lista de notificados">
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>N°</th>
                    <th>Notificado</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="not in noti_all">
                    <td>@{{ not.id }}</td>
                    <td>@{{ not.full_name }}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </b-modal>

    <b-modal v-model="modal_ed" hide-footer size="xl" ok-only :title="titulo_modal">
        <b-form v-on:submit="onUpdateBoleta">
            <div class="row mb-3">
                <div class="col-4">
                    <b-form-group horizontal label="Rut Empresa">
                        <input :disabled="disableds" v-model="datos_ed.rut_empresa" class="form-control" type="text"
                               name="rut_empresa" required>
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="Nombre Empresa">
                        <input :disabled="disableds" v-model="datos_ed.nombre_empresa" class="form-control" type="text"
                               name="nombre_empresa" required>
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="Fecha Emisión">
                        <input :disabled="disableds" v-model="datos_ed.fecha_emision" class="form-control" type="date"
                               name="fecha_emision" required>
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="Fecha Vencimiento">
                        <input :disabled="disableds" v-model="datos_ed.fecha_vencimiento" class="form-control"
                               type="date" name="fecha_vencimiento">
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="Tipo Moneda">
                        <select required :disabled="disableds" @change="TipoMonedaChange($event, 2)"
                                :v-model="datos_ed.tipo_moneda" name="tipo_moneda" id="tipo_moneda_ed"
                                class="form-control">
                            <option v-for="tipo_mon in tipos_monedas_ed" :value="tipo_mon.value"
                                    :selected="tipo_mon.selected">@{{ tipo_mon.op }}
                            </option>
                        </select>
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="Estado">
                        <select required :disabled="disableds" :v-model="datos_ed.estado" name="estados" id="estados"
                                @change="EstadoChange($event,2)" class="form-control">
                            <option :selected="estado.selected" :value="index" v-for="(estado, index) in estados_ed">
                                @{{ estado.op }}
                            </option>
                        </select>
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="Obs Generales">
                        <textarea required :disabled="disableds" v-model="datos_ed.obs_generales" class="form-control"
                                  type="text" name="obs_generales">
                        </textarea>
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="Tipo Documento">
                        <select :disabled="disableds" @change="TipoDocumentoChange($event, 2)" name="tipo_documento"
                                id="tipo_documento" class="form-control">
                            <option :selected="tipo_doc.selected" v-for="(tipo_doc, index) in tipos_documentos_ed"
                                    :value="tipo_doc.value">@{{ tipo_doc.op }}
                            </option>
                        </select>
                    </b-form-group>
                </div>

                <div class="col-4">
                    <b-form-group horizontal label="Tipo Garantía">
                        <select required :disabled="disableds" @change="TipoGarantiaChange($event, 2)"
                                name="tipo_garantia" id="tipo_garantia" class="form-control">
                            <option :selected="tipo_gar.selected" :value="index"
                                    v-for="(tipo_gar, index) in tipo_garantias_ed">@{{ tipo_gar.op }}
                            </option>
                        </select>
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="Monto">
                        <input :disabled="disableds" v-model="datos_ed.monto" class="form-control" type="number"
                               step="0.00" name="monto" required>
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="N° Documento">
                        <input :disabled="disableds" v-model="datos_ed.n_documento" class="form-control" type="text"
                               name="correo" required>
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="Id Ingreso">
                        <input :disabled="disableds" v-model="datos_ed.ingreso_id" class="form-control" type="number"
                               name="ingreso_id" required>
                    </b-form-group>

                    <br>
                    <b-form-group horizontal label="Institución Financiera">
                        <input :disabled="disableds" v-model="datos_ed.inst_financiera" class="form-control" type="text"
                               name="inst_financiera" required>
                    </b-form-group>
                    <br>
                    <template v-if="disableds == true">
                        <b-form-group horizontal label="Adjunto">
                            <b-btn @click="MostrarAdj()">Mostrar Adjuntos</b-btn>
                        </b-form-group>
                    </template>
                    <template v-else>
                        <b-form-group horizontal label="Adjuntos">
                            <b-btn @click="MostrarModalAdjuntos">Adjuntar</b-btn>
                        </b-form-group>
                    </template>
                    <br>
                    <b-form-group horizontal label="Mostrar Devolucion">
                        <b-btn @click="MostrarDevMod(datos_ed.boleta_id, datos_ed.m_devolucion)">Mostrar Devolucion
                        </b-btn>
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="Notificados">
                        <button type="button" @click="MostrarNotificados()" class="btn btn-primary">Ver</button>
                        <template v-if="notifi_flag == false">
                            <template>
                                <input :disabled="disableds" class="form-control" autocomplete="false" type="search"
                                       @input="BuscarNotificados($event)" name="notificado">
                                <template v-if="notificados.length > 0">
                                    <div class="card" style="position: absolute;">
                                        <ul class="list-group">
                                            <li :id="not.id" @click="AgregarNotificado(not.id)" style="cursor: grab;"
                                                class="list-group-item list-group-item-action py-2 overflow-hidden"
                                                v-for="not in notificados">
                                                @{{ not.full_name }}
                                            </li>
                                        </ul>
                                    </div>
                                </template>
                            </template>
                        </template>
                    </b-form-group>
                </div>

                <div class="col-4">
                    <b-form-group horizontal label="Area">
                        <select required :disabled="disableds" :v-model="datos_ed.area" @change="AreaFormChange($event)"
                                name="area" id="area_ed" class="form-control">
                            <option :selected="area.selected" :value="area.value" v-for="(area, index) in areas_ed">@{{
                                area.op }}
                            </option>
                        </select>
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="Supervisor">
                        <v-select @keypress.native="BuscarSupervisor($event)" label="full_name"
                                  v-model="datos_ed.supervisor" :options="supervisores"
                                  v-on:input="AgregarSupervisorV($event)"
                                  :rules="[(v) => !!v || 'Supervisor es requerido']" required v-validate="'required'">
                            <span slot="no-options">
                                No se encuentran registros
                            </span>
                        </v-select>
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="Contacto Supervisor">
                        <input :disabled="disableds" v-model="datos_ed.cont_sup" :value="datos_ed.cont_sup"
                               class="form-control" type="text" name="cont_sup" required disabled>
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="Email Supervisor">
                        <input :disabled="disableds" v-model="datos_ed.email_sup" class="form-control" type="email"
                               name="email_sup" disabled required>
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="Fecha Entrega">
                        <input :disabled="disableds" v-model="datos_ed.fecha_entrega" class="form-control" type="date"
                               name="fecha_entrega">
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="Rut Entrega">
                        <input :disabled="disableds" v-model="datos_ed.rut_entrega" class="form-control" type="text"
                               name="entrega">
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="Nombre Entrega">
                        <input :value="datos_ed.nombre_entrega" :disabled="disableds" v-model="datos_ed.nombre_entrega"
                               class="form-control" type="text" name="nombre_entrega">
                    </b-form-group>
                    <br>
                    <b-form-group horizontal label="Obs Entrega">
                        <textarea :disabled="disableds" v-model="datos_ed.obs_entrega" class="form-control" type="text"
                                  name="obs_entrega">
                        </textarea>
                    </b-form-group>
                </div>
            </div>
            <template v-if="disableds != true">
                <div class="d-flex justify-content-end">
                    <button class="btn btn-primary">Editar</button>
                </div>
            </template>
        </b-form>
    </b-modal>

    <b-modal v-model="modal_adj" hide-footer size="lx" ok-only :title="titulo_modal">
        <div class="table-responsive">
            <table class="table" style="overflow-y: scroll;">
                <thead>
                </thead>
                <tbody>
                <template v-for="ad in adj">
                    <tr>
                        <th>
                            <a :href="ad.url" target="_blank">
                                    <span :class="['fa', getFileIcon('ad.url'), 'mr-3']">
                                        @{{ ad.basename }}
                                    </span>
                            </a>
                        </th>
                        <td>
                            <button @click="EliminarAdj(ad.tag)" class="btn btn-danger btn-sm">X</button>
                        </td>
                    </tr>
                </template>
                </tbody>
            </table>
        </div>
    </b-modal>

    <b-modal v-model="modal_archivos" hide-footer size="sm" ok-only :title="titulo_modal">
        <template v-for="(adjunto, index) in t_adjuntos" :key="index">
            <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>

@endsection

@push('pre-scripts')
    <script>
        window.pageMix.push({
            data: () => ({
                dismissSecs: 10,
                dismissCountDown: 0,
                devolucion: {},
                showDismissibleAlert: false,
                disableds: false,
                loading: false,
                notifi_flag: false,
                errors: {},
                flag_dev_ed: false,
                status: null,
                devo: {},
                area: "",
                area2: "",

                searchInput: "",
                titulo_modal: "",
                disabled: true,
                dato_buscar: "",
                label_adjuntos: "Adjunto N°",
                adj: {},
                t_adjuntos: [],
                modal_registro: false,
                modal_notificados: false,
                modal_adj: false,
                modal_archivos: false,
                modal_m_dev: false,
                notificados_detalle: "",
                modal_dev: false,
                modal_resumen: false,
                datos_registro: {
                    cont_sup: "",
                    email_sup: ""
                },
                modal_ed: false,
                datos_ed: {
                    cont_sup: "",
                    email_sup: ""
                },
                supervisores: [],
                supervisor: {},
                ed_adj: {},
                es_replica: false,
                adjunto: null,
                notificados: [],
                notificados_total: [],
                delay: 700,
                noti_all: [],
                clicks: 0,
                timer: null,
                result: [],
                usuarios: [],
                resumen: {},
                boletaGarantiaEdit: {
                    loading: false
                },
                tipo_garantias: [
                    "Seleccione",
                    "Fiel Cumplimiento del Contrato",
                    "Seriedad de la Oferta",
                    "Fiel Cumplimiento del Contrato y Seriedad de la Oferta",
                    "Otra"
                ],
                tipo_garantias_ed: [
                    {
                        op: "Seleccione",
                        selected: true
                    },
                    {
                        op: "Fiel Cumplimiento del Contrato",
                        selected: false
                    },
                    {
                        op: "Seriedad de la Oferta",
                        selected: false
                    },
                    {
                        op: "Fiel Cumplimiento del Contrato y Seriedad de la Oferta",
                        selected: false
                    },
                    {
                        op: "Otra",
                        selected: false
                    }
                ],
                tipos_documentos: [
                    "Seleccione",
                    "A la Vista",
                    "Boleta Garantía con Pagare",
                    "Boleta Garantía",
                    "Certificado de Fianza",
                    "Cheque",
                    "Letra Cambio",
                    "Pagare",
                    "Poliza",
                    "Poliza Seguro",
                    "Vale Vista"
                ],
                tipos_documentos_ed: [
                    {
                        op: "Seleccione",
                        selected: true,
                        value: ""
                    },
                    {
                        op: "A la Vista",
                        selected: false,
                        value: 1
                    },
                    {
                        op: "Boleta Garantía con Pagare",
                        selected: false,
                        value: 2
                    },
                    {
                        op: "Boleta Garantía",
                        selected: false,
                        value: 3
                    },
                    {
                        op: "Certificado de Fianza",
                        selected: false,
                        value: 4
                    },
                    {
                        op: "Cheque",
                        selected: false,
                        value: 5
                    },
                    {
                        op: "Letra Cambio",
                        selected: false,
                        value: 6
                    },
                    {
                        op: "Pagare",
                        selected: false,
                        value: 7
                    },
                    {
                        op: "Poliza",
                        selected: false,
                        value: 8
                    },
                    {
                        op: "Poliza Seguro",
                        selected: false,
                        value: 9
                    },
                    {
                        op: "Vale Vista",
                        selected: false,
                        value: 10
                    }
                ],
                tipos_monedas: [
                    {
                        op: "Seleccione",
                        selected: true,
                        value: ""
                    },
                    {
                        op: "$",
                        selected: false,
                        value: 1
                    },
                    {
                        op: "$$",
                        selected: false,
                        value: 2
                    },
                    {
                        op: "UF",
                        selected: false,
                        value: 3
                    },
                    {
                        op: "UTM",
                        selected: false,
                        value: 4
                    }
                ],
                tipos_monedas_ed: [
                    {
                        op: "Seleccione",
                        selected: false,
                        value: ""
                    },
                    {
                        op: "$",
                        selected: false,
                        value: 1
                    },
                    {
                        op: "$$",
                        selected: false,
                        value: 2
                    },
                    {
                        op: "UF",
                        selected: false,
                        value: 3
                    },
                    {
                        op: "UTM",
                        selected: false,
                        value: 4
                    }
                ],

                estados: [
                    {
                        op: "Seleccione",
                        selected: true,
                        value: ""
                    },
                    {
                        op: "Vigente",
                        selected: false,
                        value: 1
                    },
                    {
                        op: "Vencida",
                        selected: false,
                        value: 2
                    },
                    {
                        op: "Para Entrega",
                        selected: false,
                        value: 3
                    },
                    {
                        op: "Entregado",
                        selected: false,
                        value: 4
                    }
                ],
                estados_ed: [
                    {
                        op: "Seleccione",
                        selected: true,
                        value: ""
                    },
                    {
                        op: "Vigente",
                        selected: false,
                        value: 1
                    },
                    {
                        op: "Vencida",
                        selected: false,
                        value: 2
                    },
                    {
                        op: "Para Entrega",
                        selected: false,
                        value: 3
                    },
                    {
                        op: "Entregado",
                        selected: false,
                        value: 4
                    }
                ],
                areas: [
                    {
                        op: "Seleccione",
                        selected: true,
                        value: ""
                    },
                    {
                        op: "Municipal",
                        selected: false,
                        value: 1
                    },
                    {
                        op: "Salud",
                        selected: false,
                        value: 2
                    },
                    {
                        op: "Educacion",
                        selected: false,
                        value: 3
                    }
                ],
                areas_ed: [
                    {
                        op: "Seleccione",
                        selected: true,
                        value: ""
                    },
                    {
                        op: "Municipal",
                        selected: false,
                        value: 1
                    },
                    {
                        op: "Salud",
                        selected: false,
                        value: 2
                    },
                    {
                        op: "Educacion",
                        selected: false,
                        value: 3
                    }
                ],
                supervisor_id: -1,
                dis_sup: false,
            }),

            created() {
                $('form').submit(false);
            },

            mounted() {
                    @if(isset($f_dato) && isset($f_area))
                var aux = parseInt("{{ $f_area }}")
                if (aux != "0") {
                    $("#area").val(aux).change();
                    console.log(aux)
                }

                var aux = "{{ $f_dato }}"
                if (aux != "0") {
                    $("#buscar").val(aux).change();
                    console.log(aux)
                }
                @endif
            },

            watch: {
                searchInput(val) {

                }
            },

            computed: {
                store() {
                    return this.$store.state
                }
            },
            methods: {
                MostrarAdj() {
                    this.op = this.ed_adj.clas
                    this.ob_id = this.ed_adj.ob_id
                    this.adj = this.ed_adj.adjuntos
                    this.titulo_modal = "Archivos Adjuntos"
                    this.modal_adj = !this.modal_adj
                },

                setActivePerson(val) {
                    this.$store.commit('setActivePerson', val)
                },

                test(event) {
                    console.log(event)
                },

                countDownChanged(dismissCountDown) {
                    this.dismissCountDown = dismissCountDown
                },
                showAlert() {
                    this.dismissCountDown = this.dismissSecs
                },

                MostrarNotificados() {
                    this.modal_notificados = !this.modal_notificados

                    const formData = new FormData;
                    formData.append('notificados', this.notificados_detalle);

                    this.$http.post('{{ route('boletasgarantia.notificados') }}', formData).then(
                        res => {
                            this.noti_all = res.data.notificados
                            console.log(res.data.notificados)
                        }
                    ).catch(
                        err => {
                            if (err.response.status === 500) {
                                this.status = err.response.data.status
                            }

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

                Buscar() {
                    var a_buscar = 0;
                    var a_area = 0;

                    if (this.dato_buscar !== "") {
                        a_buscar = this.dato_buscar
                    }

                    if (this.area !== "") {
                        a_area = this.area
                    }

                    window.location.href = route('boletasgarantia.filtrar', {area: a_area, dato: a_buscar});
                },

                EliminarAdj(nombre_adj) {
                    var r = confirm("¿Esta seguro de eliminar el archivo?");
                    if (r == true) {
                        const formData = new FormData;

                        formData.append(
                            'nombre_adj',
                            nombre_adj
                        );

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

                        formData.append(
                            'id',
                            this.ob_id
                        );

                        this.$http.post(
                            '{{ route('boletasgarantia.del_fil') }}',
                            formData
                        ).then(
                            res => {
                                console.log(res)

                                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();
                    this.dis_sup = false
                    if (this.datos_registro.tipo_documento !== 0) {
                        const formData = new FormData;
                        formData.append(
                            'observacion_entrega',
                            this.datos_registro.obs_entrega
                        );

                        formData.append(
                            'fecha_entrega',
                            this.datos_registro.fecha_entrega
                        );

                        formData.append(
                            'rut_entrega',
                            this.datos_registro.rut_entrega
                        );
                        formData.append(
                            'nombre_entrega',
                            this.datos_registro.nombre_entrega
                        );
                        formData.append(
                            'rut_empresa',
                            this.datos_registro.rut_empresa
                        );
                        formData.append(
                            'nombre_empresa',
                            this.datos_registro.nombre_empresa
                        );
                        formData.append(
                            'tipo_documento_id',
                            this.datos_registro.tipo_documento_id
                        );
                        formData.append(
                            'institucion_financiera',
                            this.datos_registro.inst_financiera
                        );
                        formData.append(
                            'ingreso_id',
                            this.datos_registro.ingreso_id
                        );
                        formData.append(
                            'fecha_emision',
                            this.datos_registro.fecha_emision
                        );
                        if (this.datos_registro.fecha_vencimiento !== 'undefined') {
                            formData.append(
                                'fecha_vencimiento',
                                this.datos_registro.fecha_vencimiento
                            );
                        }
                        formData.append(
                            'monto',
                            this.datos_registro.monto
                        );
                        formData.append(
                            'tipo_moneda',
                            this.datos_registro.tipo_moneda
                        );
                        formData.append(
                            'area',
                            this.area2
                        );
                        formData.append(
                            'ito_supervisor_id',
                            this.supervisor_id
                        );
                        formData.append(
                            'tipo_garantia_id',
                            this.datos_registro.tipo_garantia
                        );
                        formData.append(
                            'estado',
                            this.datos_registro.estado
                        );
                        formData.append(
                            'observacion_general',
                            this.datos_registro.obs_generales
                        );
                        formData.append(
                            'n_documento',
                            this.datos_registro.n_documento
                        );
                        formData.append(
                            'notificados',
                            this.notificados_total
                        );
                        console.log(this.datos_registro)
                        console.log("aqui")
                        for (var pair of formData.entries()) {
                            console.log(pair[0] + ', ' + pair[1]);
                        }

                        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)
                        }

                        this.$http.post(
                            '{{ route('boletasgarantia.store') }}',
                            formData
                        ).then(
                            res => {
                                console.log(res)
                                //$("#" + this.encuesta_id).hide();
                                window.location.reload();
                                //route('encuestas.index') }}'

                            }
                        ).catch(
                            err => {
                                if (err.response.status === 500) {
                                    this.status = err.response.data.status
                                }

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

                    } else {

                    }
                },


                BuscarUsers(nombre) {
                    axios.get(
                        `{{ route('boletasgarantia.search') }}`, {
                            params: {
                                nombre: nombre
                            }
                        }
                    ).then(
                        response => {
                            this.usuarios = response.data;

                        }
                    ).catch(
                        error => {
                        }
                    );
                },

                TipoGarantiaChange(event, op) {
                    if (op == 1) {
                        this.datos_registro.tipo_garantia = event.target.value
                    } else {
                        this.datos_ed.tipo_garantia = event.target.value
                    }
                },

                TipoDocumentoChange(event, op) {
                    if (op == 1) {
                        this.datos_registro.tipo_documento_id = event.target.value
                    } else {
                        this.datos_ed.tipo_documento_id = event.target.value
                        console.log(this.datos_ed.tipo_documento_id + 10)
                        console.log("3")
                    }
                },

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

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

                TipoMonedaChange(event, op) {
                    if (op == 1) {
                        this.datos_registro.tipo_moneda = event.target.value
                    } else {
                        this.datos_ed.tipo_moneda = event.target.value
                    }
                },

                AgregarSupervisorV(event) {
                    console.log(event.id)
                    this.AgregarSupervisor(
                        event.id,
                        event.full_name,
                        1
                    )
                },

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

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

                AgregarSupervisor(supervisor_id, nombre, op) {
                    this.supervisor_id = supervisor_id
                    if (op == 1) {
                        this.datos_registro.supervisor = nombre
                    } else if (op == 2) {
                        this.datos_ed.supervisor = nombre
                    }

                    this.supervisores = []

                    const formData = new FormData;
                    formData.append(
                        'user_id',
                        this.supervisor_id
                    );

                    this.$http.post(
                        '{{ route('boletasgarantia.getuser') }}',
                        formData
                    ).then(
                        response => {

                            //$("#" + this.encuesta_id).hide();
                            //window.location.reload();
                            //route('encuestas.index') }}'
                            console.log(response)
                            if (op == 1) {
                                this.datos_registro.cont_sup = response.data.contacto_municipal.telefono;
                                this.datos_registro.email_sup = response.data.contacto_municipal.correo;
                            } else {
                                this.datos_ed.cont_sup = response.data.contacto_municipal.telefono;
                                this.datos_ed.email_sup = response.data.contacto_municipal.correo;

                                this.datos_ed.ito_supervisor_id = response.data.id
                            }


                            console.log(this.datos_registro.cont_sup)
                        }
                    ).catch(
                        err => {
                            if (err.response.status === 500) {
                                this.status = err.response.data.status
                            }

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

                },

                AgregarNotificado(notificado_id) {
                    var flag = -1;

                    this.notificados_total.filter(
                        n => {
                            if (n === notificado_id) {
                                flag = notificado_id
                            }
                        }
                    )

                    if (flag === -1) {
                        this.notificados_total.push(notificado_id)
                        $("#" + notificado_id).css({
                            "background": "#E1F1E8"
                        });
                    } else {
                        $("#" + notificado_id).css({
                            "background": ""
                        });
                        this.notificados_total.splice(
                            this.notificados_total.indexOf(notificado_id),
                            1
                        );
                    }
                    console.log(this.notificados_total)

                },

                oneClick(event) {
                    this.clicks++
                    if (this.clicks === 1) {
                        var self = this
                        this.timer = setTimeout(
                            function () {
                                self.result.push(event.type);
                                self.clicks = 0
                            },
                            this.delay
                        );
                    } else {
                        clearTimeout(this.timer);
                        this.result.push('dblclick');
                        this.clicks = 0;
                        this.dis_sup = false
                    }
                },

                BuscarSupervisor(event) {
                    if (event.target.value !== "") {
                        this.BuscarUsers(event.target.value);
                        this.supervisores = this.usuarios
                    } else {
                        this.supervisores = [];
                    }
                },

                BuscarNotificados(event) {
                    if (event.target.value !== "") {
                        this.BuscarUsers(event.target.value);
                        this.notificados = this.usuarios

                        this.notificados_total.forEach(
                            (el, index) => {
                                $("#" + el).css({
                                    "background": "#E1F1E8"
                                });
                            }
                        );
                    } else {
                        this.notificados = []
                    }
                },

                MostrarModalReg() {
                    this.titulo_modal = "Registrar Boleta"
                    this.datos_registro = {
                        cont_sup: "",
                        email_sup: ""
                    }
                    this.modal_registro = !this.modal_registro;
                },

                SubirDevMod(boleta_id) {
                    this.devo.boleta_id = boleta_id
                    this.modal_dev = !this.modal_dev;
                },

                MostrarDevMod(boleta_id, devolucion) {
                    this.devo.boleta_id = boleta_id
                    this.devolucion = devolucion
                    this.ed_adj.clas = devolucion.nombre_tabla
                    this.ed_adj.ob_id = devolucion.id
                    this.ed_adj.adjuntos = devolucion.all_adjuntos
                    this.modal_m_dev = !this.modal_m_dev;
                },

                SubirDev() {
                    const formData = new FormData;

                    formData.append('boleta_id', this.devo.boleta_id);
                    formData.append('n_decreto_devolucion', this.devo.n_decreto_devolucion);
                    formData.append('fecha_decreto', this.devo.fecha_decreto);
                    formData.append('decreto_adjunto', this.devo.decreto_adjunto);
                    console.log(formData)

                    this.$http.post('{{ route('boletasgarantia.form2') }}', formData)
                        .then(res => {
                            console.log(res)
                            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
                        }
                    });
                },

                Ver(boleta) {
                    this.ed_adj.clas = boleta.nombre_tabla
                    this.ed_adj.ob_id = boleta.id
                    this.ed_adj.adjuntos = boleta.all_adjuntos
                    this.notificados_detalle = boleta.notificados
                    this.notifi_flag = true
                    this.titulo_modal = "Ver datos boleta"
                    console.log(boleta)
                    this.modal_ed = !this.modal_ed;

                    for (var i = 0; i < this.tipos_monedas_ed.length; i++) {
                        this.tipos_monedas_ed[i].selected = false
                    }
                    this.tipos_monedas_ed[boleta.tipo_moneda].selected = true
                    console.log(this.tipos_monedas_ed)

                    this.disableds = true
                    this.dis_sup = this.disableds
                    this.datos_ed.boleta_id = boleta.id
                    this.datos_ed.m_devolucion = boleta.m_devolucion
                    this.datos_ed.rut_empresa = boleta.rut_empresa
                    this.datos_ed.nombre_empresa = boleta.nombre_empresa
                    this.datos_ed.fecha_emision = boleta.fecha_emision
                    this.datos_ed.fecha_vencimiento = boleta.fecha_vencimiento
                    this.datos_ed.obs_generales = boleta.observacion_general
                    this.datos_ed.n_documento = boleta.n_documento
                    this.datos_ed.ingreso_id = boleta.ingreso_id
                    this.datos_ed.monto = boleta.monto
                    this.datos_ed.inst_financiera = boleta.institucion_financiera
                    this.datos_ed.fecha_entrega = boleta.fecha_entrega
                    this.datos_ed.rut_entrega = boleta.rut_entrega === 'undefined' ? '' : boleta.rut_entrega;
                    this.datos_ed.nombre_entrega = boleta.nombre_entrega
                    this.datos_ed.obs_entrega = boleta.observacion_entrega
                    if (boleta.supervisor.contacto_municipal != null) {
                        this.datos_ed.cont_sup = boleta.supervisor.contacto_municipal.telefono
                        this.datos_ed.email_sup = boleta.supervisor.contacto_municipal.correo
                    }
                    this.datos_ed.supervisor = boleta.supervisor.full_name
                    this.datos_ed.ito_supervisor_id = boleta.ito_supervisor_id
                    this.area2 = boleta.area
                    this.datos_ed.tipo_garantia = boleta.tipo_garantia_id
                    this.datos_ed.tipo_documento_id = boleta.tipo_documento_id
                    this.datos_ed.tipo_moneda = boleta.tipo_moneda


                    for (var i = 0; i < this.estados_ed.length; i++) {
                        this.estados_ed[i].selected = false
                    }
                    for (var i = 0; i < this.estados_ed.length; i++) {
                        console.log(
                            "aqui fueee: " +
                            this.estados_ed[i].op.toUpperCase() +
                            " : " + boleta.estado.toUpperCase()
                        )

                        if (("" + this.estados_ed[i].op).toUpperCase().localeCompare(("" + boleta.estado).toUpperCase()) == 0) {
                            console.log("aquiiiiiiii: " + this.estados_ed[i].op.toUpperCase() + " : " + boleta.estado.toUpperCase())
                            this.estados_ed[i].selected = true
                        }
                    }

                    for (var i = 0; i < this.tipos_documentos_ed.length; i++) {
                        this.tipos_documentos_ed[i].selected = false
                    }
                    this.tipos_documentos_ed[parseInt(boleta.tipo_garantia_id)].selected = true

                    for (var i = 0; i < this.tipo_garantias_ed.length; i++) {
                        this.tipo_garantias_ed[i].selected = false
                    }
                    this.tipo_garantias_ed[boleta.tipo_garantia_id].selected = true

                    $("#area_ed").val(boleta.area).change();
                    $("#tipo_moneda_ed").val(boleta.tipo_moneda).change();


                },

                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'
                },

                Resumen() {
                    const formData = new FormData;

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

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

                onUpdateBoleta(e) {
                    e.preventDefault();
                    $('form').submit(false);

                    const thisOrEmpty = (value) => value !== null && value !== undefined ? value : ''

                    const formData = new FormData;
                    formData.append('tipo_moneda', this.datos_ed.tipo_moneda);
                    formData.append('tipo_garantia_id', this.datos_ed.tipo_garantia);
                    formData.append('tipo_documento_id', this.datos_ed.tipo_documento_id);
                    formData.append('boleta_id', this.datos_ed.boleta_id);
                    formData.append('rut_empresa', this.datos_ed.rut_empresa);
                    formData.append('nombre_empresa', this.datos_ed.nombre_empresa);
                    formData.append('fecha_emision', this.datos_ed.fecha_emision);
                    formData.append('fecha_vencimiento', this.datos_ed.fecha_vencimiento);
                    formData.append('observacion_general', this.datos_ed.obs_generales);
                    formData.append('n_documento', this.datos_ed.n_documento);
                    formData.append('ingreso_id', this.datos_ed.ingreso_id);
                    formData.append('monto', this.datos_ed.monto);
                    formData.append('institucion_financiera', this.datos_ed.inst_financiera);

                    formData.append('fecha_entrega', thisOrEmpty(this.datos_ed.fecha_entrega));
                    formData.append('rut_entrega', thisOrEmpty(this.datos_ed.rut_entrega));
                    formData.append('nombre_entrega', thisOrEmpty(this.datos_ed.nombre_entrega));
                    formData.append('observacion_entrega', thisOrEmpty(this.datos_ed.obs_entrega));

                    formData.append('ito_supervisor_id', this.datos_ed.ito_supervisor_id);
                    formData.append('area', this.area2);
                    formData.append('estado', this.datos_ed.estado);
                    formData.append('notificados', this.notificados_total);
                    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)
                    }
                    console.log(formData)

                    for (let pair of formData.entries()) {
                        console.log(pair[0] + ', ' + pair[1]);
                    }

                    this.$http.post(route('boletasgarantia.editar', {id: this.datos_ed.boleta_id}), formData)
                        .then(res => {
                            console.log(res)
                            setTimeout(() => {
                                window.location.reload();
                            }, 500)
                        }).catch(err => {
                        console.log(err)
                        if (err.response.status === 500) {
                            this.status = err.response.data.status
                        }

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

                Editar(id) {
                    this.boletaGarantiaEdit.loading = true
                    this.$http.get(route('boletasgarantia.show', {id: id}))
                        .then(res => {
                            this.boletaGarantiaEdit.loading = false

                            const boleta = res.data.boleta
                            console.log($("#estados").val())
                            console.log(boleta)
                            this.ed_adj.clas = boleta.nombre_tabla
                            this.ed_adj.ob_id = boleta.id
                            this.ed_adj.adjuntos = boleta.all_adjuntos

                            $("#area_ed").val(boleta.area).change();

                            this.notifi_flag = true
                            this.titulo_modal = "Editar boleta"

                            this.modal_ed = !this.modal_ed;

                            for (var i = 0; i < this.tipos_monedas_ed.length; i++) {
                                this.tipos_monedas_ed[i].selected = false
                            }
                            this.tipos_monedas_ed[boleta.tipo_moneda].selected = true
                            console.log(this.tipos_monedas_ed)

                            this.disableds = false
                            this.dis_sup = this.disableds
                            this.datos_ed.boleta_id = boleta.id
                            this.datos_ed.rut_empresa = boleta.rut_empresa
                            this.datos_ed.nombre_empresa = boleta.nombre_empresa
                            this.datos_ed.fecha_emision = boleta.fecha_emision
                            this.datos_ed.fecha_vencimiento = boleta.fecha_vencimiento
                            this.datos_ed.obs_generales = boleta.observacion_general
                            this.datos_ed.n_documento = boleta.n_documento
                            this.datos_ed.ingreso_id = boleta.ingreso_id
                            this.datos_ed.monto = boleta.monto
                            this.datos_ed.inst_financiera = boleta.institucion_financiera
                            this.datos_ed.fecha_entrega = boleta.fecha_entrega
                            this.datos_ed.rut_entrega = boleta.rut_entrega
                            this.datos_ed.nombre_entrega = boleta.nombre_entrega
                            this.datos_ed.obs_entrega = boleta.observacion_entrega
                            if (boleta.supervisor.contacto_municipal != null) {
                                this.datos_ed.cont_sup = boleta.supervisor.contacto_municipal.telefono
                                this.datos_ed.email_sup = boleta.supervisor.contacto_municipal.correo
                            }
                            this.datos_ed.supervisor = boleta.supervisor.full_name
                            this.datos_ed.ito_supervisor_id = boleta.ito_supervisor_id
                            this.area2 = boleta.area
                            this.datos_ed.tipo_garantia = boleta.tipo_garantia_id
                            this.datos_ed.tipo_documento_id = boleta.tipo_documento_id
                            this.datos_ed.tipo_moneda = boleta.tipo_moneda

                            for (let i = 0; i < this.estados_ed.length; i++) {
                                this.estados_ed[i].selected = false
                            }

                            for (let i = 0; i < this.estados_ed.length; i++) {
                                const estado = this.$_.toUpper(this.estados_ed[i].op);
                                const boletaEstado = this.$_.toUpper(boleta.estado)

                                console.log("Estado en lista: " + estado + " : Estado Actual" + boletaEstado)

                                if (estado === boletaEstado) {
                                    console.log("Estado en lista elegido: " + estado + " : Estado Actual" + boletaEstado)
                                    this.estados_ed[i].selected = true

                                    break;
                                }
                            }

                            for (let i = 0; i < this.tipo_garantias_ed.length; i++) {
                                this.tipo_garantias_ed[i].selected = false
                            }
                            this.tipo_garantias_ed[boleta.tipo_garantia_id].selected = true

                            for (let i = 0; i < this.tipos_documentos_ed.length; i++) {
                                this.tipos_documentos_ed[i].selected = false
                            }
                            this.tipos_documentos_ed[parseInt(boleta.tipo_garantia_id)].selected = true
                            // this.datos_ed.tipo_documento_id

                            for (let i = 0; i < this.areas_ed.length; i++) {
                                this.areas_ed[i].selected = false
                                if (("" + this.areas_ed[i].op).localeCompare(("" + boleta.area)) == 0) {
                                    this.areas_ed[i].selected = true
                                }
                            }
                        })
                        .catch(err => {
                            this.boletaGarantiaEdit.loading = false

                            console.log(err)
                        })
                },

                BuscarChange(event) {
                    this.dato_buscar = event.target.value;

                    if (this.area === 0) {
                        this.disabled = true;
                    }

                    if (this.area != 0 || this.dato_buscar !== "") {
                        this.disabled = false;
                    }
                    console.log("buscar: " + this.dato_buscar + " area: " + this.area);
                },

                EstadoChange(event, op) {
                    if (op == 1) {
                        this.datos_registro.estado = event.target.value
                    } else if (op == 2) {
                        this.datos_ed.estado = event.target.value
                    }
                },

                AreaFormChange(event) {
                    this.area2 = event.target.value;
                    console.log(this.area2)
                },

                AreaFormChange_ed(event) {
                    this.area2 = event.target.value;
                    console.log(this.area2)
                },

                AreaChange(event) {
                    this.area = event.target.value;

                    if (this.dato_buscar === "") {
                        this.disabled = true;
                    }

                    if (this.area != 0) {
                        this.disabled = false;
                    }

                    console.log("buscar: " + this.dato_buscar + " area: " + this.area);
                },

                MostrarMapa() {
                    const viewer = this.$el.querySelector('.images').$viewer
                    viewer.show()
                },
            }
        })
    </script>
@endpush