@extends('menu/menu')
<style>
    thead tr th {
        position: sticky;
        top: 0;
        z-index: 10;
    }
</style>
@section('content')

<div class="container mt-5">
    <div class="title-vista mt-4">VISTA PREVIA</div>
</div>
<div class="container my-5">
    <div class="seccion-filtro">Valores</div>
    <hr class="separador">
    <div class="row">
        <div class="col-sm-4 form-group">
            <label>U.F.</label>
            <input type="" class="monto1 form-control mayuscula" id="valorUf" name="" value="{{$uf ?? 'Sin Información'}}" onkeyup="PasarValor();">
        </div>
        <div class="col-sm-4 form-group ">
            <label>KM.</label>
            <input type="text" class="form-control mayuscula" id="valorKilometros" name="" value="{{$valor_kilometro ?? 'Sin Información'}}" placeholder="$ 200 x KM" onkeyup="PasarValor();">
        </div>
        <div class="col-sm-4 form-group ">
            <label>Valor de atencion</label>
            <input type="text" class="form-control mayuscula valorAtencion" id="valorUsuarioadicional" name="" value="{{$valor_usuarioadicional ?? 'Sin Información'}}" placeholder=" UF" onkeyup="PasarValor();">
        </div>
    </div>
</div>


{{ session(['url_vistaprevia' => url()->full()])     }}
<div class="container" style="margin-top: 30px;">
    <form action="{{route('ir_vista_excel_vistaprevia',Crypt::encryptString(url()->full()))}}" method="GET">
        <input type="hidden" value="{{$f1 ?? ''}}" name="variable" id="variable">
        <input type="hidden" value="{{$f2 ?? ''}}" name="variable1" id="variable1">
        <input type="hidden" value="{{$cliente_seleccionado ?? ''}}" name="variable2" id="variable2">
    </form>
</div>

<div class="container-fluid" id="dvData">
    <div class="container-fluid" style="margin-top: 20px">
    </div>
</div>

<div class="container">
    <!-- MENSAJE CARGANDO -->
    <div style="text-align: center; display:">
        <h1 id="mensajeCargando"></h1>
    </div>
    <!-- MENSAJE RECORDATORIO -->
    <div class="alert alert-warning" id="mensajeRecordatorio" style="text-align: center; display:">
        Recuerde hacer click en boton calcular
    </div>
    <!-- MENSAJE ADVERTENCIA -->
    <div class="alert alert-danger" role="alert" id="mensajeAlerta" style="display: none">
        Completar todos los campos en ROJOS
    </div>
</div>

<div class="container mt-5 p-0 py-2 bg-export">
    <div class="row">
        <div class="col-sm-3 pl-3">
            <label class="pl-3 pt-2" for="" id="total"><strong>{{count($servicios)}} Registros</strong></label>
        </div>
        <div class="col-sm-5 pt-2">
            <i>Para ver toda la información, deslice a la derecha</i>
            <span class="material-icons-round icon-midle">trending_flat</span>
        </div>
        <div class="col-sm-4 text-right">
            <span class="material-icons-round icon-midle" id="" style="color: #002859">calculate</span>
            <input type="button" value="Calcular" id="ok" class="btn btn-ter pl-0">
            <button class="btn btn-ter" id="btnExport" value="">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" class="bi bi-file-earmark-excel-fill">
                    <path d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0zM9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1zM5.884 6.68 8 9.219l2.116-2.54a.5.5 0 1 1 .768.641L8.651 10l2.233 2.68a.5.5 0 0 1-.768.64L8 10.781l-2.116 2.54a.5.5 0 0 1-.768-.641L7.349 10 5.116 7.32a.5.5 0 1 1 .768-.64z"></path>
                </svg>
                Exportar excel
            </button>
        </div>
    </div>
</div>
<!--TABLA-->
<div class="container table-responsive p-sm-0" style="margin-bottom: 200px;">
    <table class="table table-sm table-bordered table-striped table-hover" id="tabla">
        <!--ENCABEZADO-->
        <thead class="color-head">
            <tr>
                <th class="th-head border-th separador-v" colspan="1">Cliente</th>
                <th class="th-head border-th separador-v" colspan="1">Proyecto Asociado</th>
                <th class="th-head border-th separador-v" colspan="1">T&eacute;cnico</th>
                <th class="th-head border-th separador-v" colspan="1">Tipo visita</th>
                <th class="th-head border-th separador-v" colspan="1">N° visita</th>
                <th class="th-head border-th separador-v" colspan="1">Fecha Instalación</th>
                <th class="th-head border-th separador-v" colspan="1">Check Finalizado</th>
                <th class="th-head border-th separador-v" colspan="1">N° de serie</th>
                <th class="th-head border-th separador-v" colspan="1">sSC</th>
                <th class="th-head border-th separador-v" colspan="1">Direccion</th>
                <th class="th-head border-th separador-v" colspan="1">Regi&oacute;n</th>
                <th class="th-head border-th separador-v" colspan="1" style="border-right: 0;">Regi&oacute;n Modificable</th>
                <th class="th-head border-th separador-v" style="border-left:0; border-right: 0;" colspan="1"> </th>
                <th class="th-head border-th separador-v" style="border-left:0; border-right: 0;" colspan="1"> </th>
                <th class="th-head border-th separador-v" style="border-left:0; border-right: 0;" colspan="1"> </th>
                <th class="th-head border-th separador-v" style="border-left:0; border-right: 0;" colspan="1"> </th>
                <th class="th-head border-th separador-v" style="border-left:0; border-right: 0;" colspan="1"> </th>
                <th class="th-head border-th separador-v" colspan="1">Ciudad</th>
                <th class="th-head border-th separador-v" colspan="1" style="border-right: 0;">Ciudad base</th>
                <th class="th-head border-th separador-v" style="border-left:0; border-right: 0;" colspan="1"> </th>
                <th class="th-head border-th separador-v" style="border-left:0; border-right: 0;" colspan="1"> </th>
                <th class="th-head border-th separador-v" style="border-left:0; border-right: 0;" colspan="1"> </th>
                <th class="th-head border-th separador-v" style="border-left:0; border-right: 0;" colspan="1"> </th>
                <th class="th-head border-th separador-v" style="border-left:0; border-right: 0;" colspan="1"> </th>
                <th class="th-head border-th separador-v" colspan="1">Estado Check</th>
                <th class="th-head border-th separador-v" colspan="1" style="border-right: 0;">Observación</th>
                <th class="th-head border-th separador-v" style="border-left:0; border-right: 0;" colspan="1"> </th>
                <th class="th-head border-th separador-v" style="border-left:0; border-right: 0;" colspan="1"> </th>
                <th class="th-head border-th separador-v" style="border-left:0; border-right: 0;" colspan="1"> </th>
                <th class="th-head border-th separador-v" style="border-left:0; border-right: 0;" colspan="1"> </th>
                <th class="th-head border-th separador-v" style="border-left:0; border-right: 0;" colspan="1"> </th>
                <th class="th-head border-th separador-v" colspan="1">Valor atencion</th>
                <th class="th-head border-th separador-v" colspan="1">Traslado</th>
                <th class="th-head border-th separador-v" colspan="1">Sub-Total</th>
                <th class="th-head border-th separador-v" colspan="1">KM</th>
                <th class="th-head border-th separador-v" colspan="1">Costo Final</th>
            </tr>
        </thead>
        <!--FIN ENCABEZADO-->

        <!--RESULTADOS-->
        <tbody>
            @foreach ( $servicios as $key => $los_dato )
            <tr>
                {{-- CLIENTE --}}
                <td class="w-sm-input-table">{{ucfirst($los_dato->sCliente ?? '')}}</td>
                {{-- PROYECTO ASOSIADO --}}
                <td class="w-sm-input-table">SERVICIO</td>
                {{-- TECNICO --}}
                <td class="w-sm-input-table">{{strtoupper($los_dato->nombre_uno ?? '')}} {{strtoupper($los_dato->apellido_uno ?? '')}}</td>
                {{-- NUMERO VISITA --}}
                {{-- TIPO VISITA --}}
                <td class="w-sm-input-table">Servicio</td>
                {{-- NUMERO VISITA --}}
                <td class="w-sm-input-table">{{$los_dato->numero_visita ?? ''}}</td>
                {{-- FECHA INICIO--}}
                <td class="w-sm-input-table">{{Carbon\Carbon::createFromDate($los_dato->fecha_inicio)->format('d-m-Y')}}</td>
                {{-- FECHA FINALIZADO --}}
                @if($los_dato->fecha_fin != "")
                <td class="w-sm-input-table">{{Carbon\Carbon::createFromDate($los_dato->fecha_fin ?? '')->format('d-m-Y')}}</td>
                @else
                <td class="w-sm-input-table">Sin fecha</td>
                @endif
                {{-- SERIE --}}
                <td class="w-sm-input-table">{{$los_dato->sSerie ??  ''}}</td>
                {{-- sSC --}}
                <td class="w-sm-input-table">{{$los_dato->sSC ??  ''}}</td>
                {{-- SUCURSAL --}}
                {{-- DIRECCION --}}
                <td class="w-input-table">{{$los_dato->sDireccion ?? 'DESCONOCIDO'}}</td>
                {{-- REGION --}}
                <td class="w-sm-input-table gettdCiudad">{{$los_dato->sRegion ?? ''}}</td>
                {{-- REGION MODIFICABLE --}}
                <td colspan="6" class="w-input-table error{{$key+1}}">
                    <select id="region_modificable" name="region_modificable" data-va="ciudadModificable_{{$key+1}}" class="custom-select mb-3 opcionesSele regionModificable_{{$key+1}}">
                        <option selected value="" style="background-color: red"><label for="" style="background-color: red">seleccionar</label> <a href="" class="btn btn-danger">x</a></option>
                        @foreach ($carga_select as $regio)
                        @if ($regio->des_region == $los_dato->sRegion || $regio->num_r == $los_dato->sRegion || $regio->abreviatura == $los_dato->sRegion || $regio->num_region == $los_dato->sRegion)
                        <option selected value="{{ $regio->des_region}}" id="region_modificable" name="region_modificable">{{ $regio->des_region }}</option>
                        @else
                        <option value="{{ $regio->id_regiones}}" id="region"> {{ $regio->des_region }}</option>
                        @endif
                        @endforeach
                    </select>
                </td>
                {{-- CIUDAD --}}
                <td class="w-sm-input-table errorCiudad{{$key+1}}">{{ucfirst($los_dato->sComuna ?? '')}}</td>
                {{-- CIUDAD BASE --}}
                <td class="w-input-table" colspan="6">
                    <select id="ciudad_base" name="ciudad_base" class="custom-select mb-3  opcionesSeleCiudadBase ciudadModificable_{{$key+1}}">
                        <option selected value="0"><label for="" style="color: red">seleccionar</label></option>
                        @foreach ($carga_select as $regio)
                        @if ($regio->des_region == $los_dato->sRegion || $regio->num_r == $los_dato->sRegion || $regio->abreviatura == $los_dato->sRegion || $regio->num_region == $los_dato->sRegion)
                        <option class="gettd" selected value="{{ $regio->id}}" id="ciudad_base" name="ciudad_base">{{ ucfirst(strtolower($regio->ciudad_base)) }}</option>
                        @else
                        <option value="{{ $regio->id}}" id="ciudad_base" name="ciudad_base">{{ ucfirst(strtolower($regio->ciudad_base)) }}</option>
                        @endif
                        @endforeach
                    </select>
                </td>
                {{-- ESTADO CHECK --}}
                <td class="w-sm-input-table">{{$los_dato->estado_asignacion ?? ''}}</td>
                {{-- OBSERVACION --}}
                <td colspan="6">{{$los_dato->observacion ?? ''}}</td>
                {{-- VALOR ATENCION --}}
                @php
                    $valor_atencion = DB::table('costos_proyectos')
                    ->select('costos_proyectos.costo_otros')
                    ->orderBy('costos_proyectos.id','asc')
                    ->where('costos_proyectos.proyecto_id','=',29)
                    ->get();

                    $numero = $los_dato->numero_visita;

                    if($numero == 1){
                        $valor_atencions = $valor_atencion[0]->costo_otros;
                    }else if($numero == 2){
                        $valor_atencions = $valor_atencion[1]->costo_otros;
                    }else if($numero == 3){
                        $valor_atencions = $valor_atencion[2]->costo_otros;
                    }else if($numero == 4){
                        $valor_atencions = $valor_atencion[3]->costo_otros;
                    }
                @endphp
                <td class="w-sm-input-table">
                    <input onKeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;" type="text" class="form-control valorAtencion_{{$key+1}}" value="{{$valor_atencions}}">
                </td>
                {{-- TRASLADO --}}
                <td class="w-input-table">
                    <div>
                        <div style="margin-top: -19px;">
                            <input type="checkbox" name="" id="" class="valorTasladoModificaleCheck{{$key+1}}">
                            <span>activar edición</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control valorTasladoModificale{{$key+1}}" value="0" onKeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;">
                    </div>
                </td>
                {{-- SUB-TOTAL --}}
                <td class="w-sm-input-table">0</td>
                {{-- KILOMETROS--}}
                <td class="w-sm-input-table errorKilometros{{$key+1}}">0</td>
                {{-- CANTIDAD USUARIOS--}}
                {{-- COSTOS USUARIOS--}}
                <td class="w-sm-input-table">0</td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

<div class="container-fluid py-5 fixed-bottom footer">
    <footer class="container">
        <div class="row">
            <div class="col-sm-6">
                <div class="row">
                    <div class="col-sm-12">
                        Total Traslados $<label for="" id="costos3" class="totalTrasladosClases">0</label>
                    </div>
                    <div class="col-sm-12">
                        Sub Total (UfxVaAten) $<label for="" id="costos4" class="subTotal">0</label>
                    </div>
                    <div class="col-sm-12">
                        Total $<label for="" id="costos5" class="Total">0</label>
                    </div>
                </div>
            </div>
            <div class="col-sm-6" id="mensaje_confirmacion">
            </div>
        </div>
    </footer>
</div>
@endsection
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script type="text/javascript">
    function botonOk() {
        $("#mensajeCargando").text("Cargando...");
        $("#mensajeRecordatorio").css("display", "none");
        var totalesCantidad = $("#total").text();
        var valores = "";
        totalTraslados = 0;
        subTotalUfxValorAtencion = 0;
        let tol = 0;
        region = "";
        regionModificable = "";
        ciudad = "";
        ciudadBase = "";
        $('#tabla tr').each(function(index, element) {
            if (index != 0) {
                region = $(element).find("td").eq(10).html();
                regionModificable = $(".regionModificable_" + index).val();
                ciudad = $(element).find("td").eq(12).html();
                ciudadBase = $(".ciudadModificable_" + index).val();
                valorKilometros = $("#valorKilometros").val();
                valorUf = $("#valorUf").val();
                valorUf = valorUf.replace(".", "");
                if (regionModificable == "" || regionModificable == null) {
                    $(".error" + index).css("background-color", "red");
                    $("#mensajeAlerta").css("display", "");
                } else {
                    $(".error" + index).css("background-color", "");
                    $("#mensajeAlerta").css("display", "none");
                }
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    type: 'POST',
                    url: "{{ route('calcularkilometros') }}",
                    data: {
                        'region': region,
                        'regionModificable': regionModificable,
                        'ciudad': ciudad,
                        'ciudadBase': ciudadBase
                    },
                    success: function(data) {
                        if (data != "sinDatos") {
                            if (data == "false") {
                                $(".errorKilometros" + index).css("background-color", "red");
                                $("#mensajeAlerta").css("display", "");
                                data = "No Existen Kilometros Asociados";
                            } else {
                                $(".errorKilometros" + index).css("background-color", "");
                                $("#mensajeAlerta").css("display", "none");
                            }
                            if (data == "0") {
                                $("#mensajeAlerta").css("display", "");
                                $(".errorKilometros" + index).css("color", "red");
                                data = "No Existe Ciudad";
                            } else if (data == "00") {
                                $("#mensajeAlerta").css("display", "none");
                                data = "0";
                            } else {
                                $("#mensajeAlerta").css("display", "none");
                            }
                            if (data == "No Existe Ciudad" || data == "No Existe Kilometros Asociados") {
                                $(element).find("td").eq(19).html(data);
                            } else {
                                $(element).find("td").eq(19).html(commaSeparateNumber(data));
                            }
                            valorAtencion = $(".valorAtencion_" + index).val();
                            //valorAtencion = $(".valorAtencion").val();
                            subTotal = valorAtencion * valorUf;
                            //console.log(subTotal);
                            //console.log(subTotal);
                            $(element).find("td").eq(18).html(commaSeparateNumber(subTotal));
                            data = data.replace(",", ".");
                            valorTraslado_a = parseFloat(data) * 2;
                            valorKilometros = valorKilometros.replace(",", ".");
                            valorTraslado = parseFloat(valorTraslado_a) * parseFloat(valorKilometros);
                            valorTraslado2 = valorTraslado;
                            if (!isNaN(valorTraslado2)) {
                                valorTraslado2 = valorTraslado2;
                            } else {
                                valorTraslado2 = 0;
                            }
                            valorTraslado = commaSeparateNumber(parseInt(valorTraslado));
                            console.log(valorTraslado);
                            //Ciudad modificable
                            if (!$('.valorTasladoModificaleCheck' + index).prop('checked')) {
                                $(".valorTasladoModificale" + index).val(valorTraslado);
                            }
                            //Costo Usuario Adicional
                            costoUsuarioAdicional = $(".ufValorAdicionalModificable" + index).val();
                            costoUsuarioAdicional2 = Math.round(costoUsuarioAdicional * 100) / 100;

                            $(".ufValorAdicionalModificable" + index).val(costoUsuarioAdicional2);
                            costoUsuarioAdicionalPesos = costoUsuarioAdicional * valorUf;
                            //Costo final
                            costoFinal = parseFloat(valorTraslado2) + parseFloat(subTotal);
                            costoFinal = commaSeparateNumber(costoFinal);
                            //console.log(costoFinal);
                            $(element).find("td").eq(20).html(costoFinal);
                            valorTraslado = valorTraslado.replace(",", "");
                            tol = parseInt(valorTraslado) + parseInt(tol);
                            //console.log(subTotal);
                            subTotalUfxValorAtencion = parseFloat(subTotalUfxValorAtencion) + parseFloat(subTotal);
                            if (!$('.valorTasladoModificaleCheck' + index).prop('checked')) {
                                // $(".valorTasladoModificale"+index).val(valorTraslado);
                                totalTraslados = parseFloat(totalTraslados) + parseFloat(valorTraslado);
                            } else {
                                totalTraslados = parseFloat(totalTraslados) + parseFloat($(".valorTasladoModificale" + index).val());
                            }
                            $(".totalTrasladosClases").text(commaSeparateNumber(totalTraslados).replaceAll(",", "."));
                            $(".subTotal").text(commaSeparateNumber(subTotalUfxValorAtencion).replaceAll(",", "."));
                            $(".Total").text(commaSeparateNumber(subTotalUfxValorAtencion + totalTraslados).replaceAll(",", "."));
                        }
                    },
                    complete: function(data) {
                        //console.log(index)
                        //console.log(totalesCantidad)
                        $("#mensajeCargando").text("");
                    },
                    error: function(xhr, status) {}
                });
            }
        });
        $("#mensaje_confirmacion").empty();
        $("#mensaje_confirmacion").append("Calculo realizado exitosamente");
    }

    $(document).ready(function() {

        $(".opcionesSeleCiudadBase").change(function(e) {
            //botonOk();
            $("#mensajeRecordatorio").css("display", "");


        });

        $(".opcionesSele").change(function(e) {
            // alert($('select[id=ejemplo2]').val());
            // alert($(this).data("va"));
            var idCiudaBaseSelect = $(this).data("va");
            var idRegion = $(this).val();;

            $.ajax({

                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: 'POST',
                url: "{{ route('obtenerCiudad') }}",
                data: {
                    'idRegion': idRegion,

                },

                success: function(data) {

                    $id = data[0].id;
                    $("." + idCiudaBaseSelect + " option[value='" + $id + "']").attr("selected", true);
                    //botonOk();
                    $("#mensajeRecordatorio").css("display", "");

                },

                error: function(xhr, status) {

                    alert('Disculpe, Ha ocurrido un problema, Intente mas tarde');

                }

            });


        });

        $("#btnExport").click(function(e) {
            // window.open('data:application/vnd.ms-excel,' + encodeURIComponent($('#dvData').html()));
            // e.preventDefault();
            valorUf = $("#valorUf").val();
            var cuerpoA = "";
            var cuerpoB = "";
            var acumulable = "";
            var tabla = "";
            var a = document.createElement('a');
            //getting data from our div that contains the HTML table
            //var data_type = 'data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';

            // a.href = data_type + ', ' + encodeURIComponent($('#dvData').html());


            cuerpoA += "<table>";
            cuerpoA += "<thead>";
            cuerpoA += "<tr>";
            cuerpoA += "<td>" + "<h3>" + "Cliente" + "</h3>" + "</td>";
            cuerpoA += "<td>" + "<h3>" + "Proyecto Asociado" + "</h3>" + "</td>";
            cuerpoA += "<td>" + "<h3>" + "T&eacute;cnico" + "</h3>" + "</td>";
            cuerpoA += "<td>" + "<h3>" + "Tipo visita" + "</h3>" + "</td>";
            cuerpoA += "<td>" + "<h3>" + "Fecha Instalac&oacute;n" + "</h3>" + "</td>";
            cuerpoA += "<td>" + "<h3>" + "Check Finalizado" + "</h3>" + "</td>";
            cuerpoA += "<td>" + "<h3>" + "N&deg; de serie" + "</h3>" + "</td>";
            cuerpoA += "<td>" + "<h3>" + "Direccion" + "</h3>" + "</td>";
            cuerpoA += "<td>" + "<h3>" + "Regi&oacute;n" + "</h3>" + "</td>";
            cuerpoA += "<td>" + "<h3>" + "Regi&oacute;n Seleccionada" + "</h3>" + "</td>";
            cuerpoA += "<td>" + "<h3>" + "Ciudad" + "</h3>" + "</td>";
            cuerpoA += "<td>" + "<h3>" + "Ciudad Seleccionada" + "</h3>" + "</td>";
            cuerpoA += "<td>" + "<h3>" + "Estado Check" + "</h3>" + "</td>";
            cuerpoA += "<td>" + "<h3>" + "Observaci&oacute;n" + "</h3>" + "</td>";
            //cuerpoA += "<td>" + "<h3>" + "Valor Atenci&oacute;n" + "</h3>" + "</td>";
            cuerpoA += "<td>" + "<h3>" + "Traslado" + "</h3>" + "</td>";
            cuerpoA += "<td>" + "<h3>" + "Sub-Total" + "</h3>" + "</td>";
            cuerpoA += "<td>" + "<h3>" + "KM" + "</h3>" + "</td>";
            cuerpoA += "<td>" + "<h3>" + "Cobro Final" + "</h3>" + "</td>";
            cuerpoA += "</tr>";
            cuerpoA += "</thead>";
            cuerpoA += "<tbody>";

            $('#tabla tr').each(function(index, element) {

                totalTraslados2 = commaSeparateNumber(totalTraslados).replaceAll(",", ".");
                subTotalUfxValorAtencion2 = commaSeparateNumber(subTotalUfxValorAtencion).replaceAll(",", ".");
                //costoUsuarioAdicional = $(".ufValorAdicionalModificable" + index).val();
                //x = parseFloat(costoUsuarioAdicional) * parseFloat(valorUf)
                //z = Math.round(x * 1000) / 1000;
                if (index != 0) {
                    seleccionado = $(".ciudadModificable_" + index).val();
                    acumulable += "<tr>";
                    acumulable += "<td>" + $(element).find("td").eq(0).html() + "</td>";
                    acumulable += "<td>" + $(element).find("td").eq(1).html() + "</td>";
                    acumulable += "<td>" + $(element).find("td").eq(2).html() + "</td>";
                    acumulable += "<td>" + $(element).find("td").eq(3).html() + "</td>";
                    acumulable += "<td>" + $(element).find("td").eq(4).html() + "</td>";
                    acumulable += "<td>" + $(element).find("td").eq(5).html() + "</td>";
                    acumulable += "<td>" + $(element).find("td").eq(6).html() + "</td>";
                    acumulable += "<td>" + $(element).find("td").eq(7).html() + "</td>";
                    acumulable += "<td>" + $(element).find("td").eq(8).html() + "</td>";
                    //region seleccionada
                    acumulable += "<td>" + $(".regionModificable_" + index).val() + "</td>";
                    acumulable += "<td>" + $(element).find("td").eq(10).html() + "</td>";
                    //ciudad Seleccionada
                    if (seleccionado == 0) {
                        acumulable += "<td>" + "No Seleccionado" + "</td>";
                    }
                    if (seleccionado == 1) {
                        acumulable += "<td>" + "Iquique" + "</td>";
                    }
                    if (seleccionado == 2) {
                        acumulable += "<td>" + "Antofagasta" + "</td>";
                    }
                    if (seleccionado == 3) {
                        acumulable += "<td>" + "Copiapo" + "</td>";
                    }
                    if (seleccionado == 4) {
                        acumulable += "<td>" + "La serena" + "</td>";
                    }
                    if (seleccionado == 5) {
                        acumulable += "<td>" + "Valparaiso" + "</td>";
                    }
                    if (seleccionado == 6) {
                        acumulable += "<td>" + "Talca" + "</td>";
                    }
                    if (seleccionado == 7) {
                        acumulable += "<td>" + "Santiago" + "</td>";
                    }
                    if (seleccionado == 8) {
                        acumulable += "<td>" + "Concepcion" + "</td>";
                    }
                    if (seleccionado == 9) {
                        acumulable += "<td>" + "Temuco" + "</td>";
                    }
                    if (seleccionado == 10) {
                        acumulable += "<td>" + "Osorno" + "</td>";
                    }
                    if (seleccionado == 11) {
                        acumulable += "<td>" + "Puerto Aysen" + "</td>";
                    }
                    if (seleccionado == 12) {
                        acumulable += "<td>" + "Punta Arenas" + "</td>";
                    }
                    if (seleccionado == 13) {
                        acumulable += "<td>" + "Santiago" + "</td>";
                    }
                    if (seleccionado == 14) {
                        acumulable += "<td>" + "Osorno" + "</td>";
                    }
                    if (seleccionado == 15) {
                        acumulable += "<td>" + "Arica" + "</td>";
                    }
                    acumulable += "<td>" + $(element).find("td").eq(12).html() + "</td>";
                    acumulable += "<td>" + $(element).find("td").eq(13).html() + "</td>";
                    acumulable += "<td>" + $(".valorTasladoModificale" + index).val().replaceAll(",", ".") + "</td>";
                    acumulable += "<td>" + $(element).find("td").eq(15).html().replaceAll(",", ".") + "</td>";
                    acumulable += "<td>" + $(element).find("td").eq(16).html() + "</td>";
                    acumulable += "<td>" + $(element).find("td").eq(17).html() + "</td>";
                    console.log($(element).find("td").eq(17).html());
                    acumulable += "</tr>";
                }
            });
            cuerpoB += "</tbody>";
            cuerpoB += "</table>";
            cuerpoB += "<div>" + "Valor UF: " + document.getElementById("valorUf").value; + "</div>"
            cuerpoB += "<div>" + "Valor x Km: " + document.getElementById("valorKilometros").value; + "</div>"
            cuerpoB += "<div>" + "Total Traslados: " + totalTraslados2 + "</div>";
            cuerpoB += "<div>" + "Sub Total (YfxVaAten): " + subTotalUfxValorAtencion2; + "</div>";
            cuerpoB += "<div>" + "Total: " + document.getElementById('costos5').innerText; + "</div>";
            tabla = cuerpoA + acumulable + cuerpoB;

            //a.href = data_type + ', ' + encodeURIComponent(tabla);
            a.href = 'data:application/vnd.ms-excel,' + escape(tabla);
            // a.href = data_type + ', ' + encodeURIComponent("hola mala");

            //setting the file name
            a.download = 'SupervisorReport.xls';
            //triggering the function
            a.click();
            //just in case, prevent default behaviour
            e.preventDefault();

        });


        $("#ok").click(function() {
            valorKilometros = $("#valorKilometros").val();
            valorUf = $("#valorUf").val();
            valorUf = valorUf.replace(".", "");


            if (valorKilometros == "" || valorUf == "") {
                alert("Ingresar Valor Uf o Valor Kilometros");
            } else {
                //    $("#mensajeCargando").text("Cargando...");
                //             setTimeout(function() {
                //                     $("#mensajeCargando").fadeOut(1500);
                //                 },5000);
                botonOk();
            }



        });
    });

    $(document).ready(function() {
        $("#exportarExcel").click(function() {
            $('#tabla tr').each(function(index, element) {
                traslado = $(element).find("td").eq(9).html();
                subtotal = $(element).find("td").eq(10).html();
                km = $(element).find("td").eq(12).html();
                variable = $("#variable").val();
                variable1 = $("#variable1").val();
                variable2 = $("#variable2").val();
                var _token = $('input[name="_token"]').val();
            });

        });
    });


    function commaSeparateNumber(amount, decimals) {
        // while (/(\d+)(\d{3})/.test(val.toString())) {
        //     val = val.toString().replace(/(\d+)(\d{3})/, '$1' + '.' + '$2');

        // }
        amount += ''; // por si pasan un numero en vez de un string
        amount = parseFloat(amount.replace(/[^0-9\.]/g, '')); // elimino cualquier cosa que no sea numero o punto

        decimals = decimals || 0; // por si la variable no fue fue pasada

        // si no es un numero o es igual a cero retorno el mismo cero
        if (isNaN(amount) || amount === 0)
            return parseFloat(0).toFixed(decimals);

        // si es mayor o menor que cero retorno el valor formateado como numero
        amount = '' + amount.toFixed(decimals);

        var amount_parts = amount.split('.'),
            regexp = /(\d+)(\d{3})/;

        while (regexp.test(amount_parts[0]))
            amount_parts[0] = amount_parts[0].replace(regexp, '$1' + ',' + '$2');

        return amount_parts.join('.');
        return val;

    }

    function calculosKM(region, regionModificable, ciudad) {

        var datos = "";
        $.ajax({

            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type: 'POST',
            url: "{{ route('calcularkilometros') }}",
            data: {
                'region': region,
                'regionModificable': regionModificable,
                'ciudad': ciudad
            },

            success: function(data) {

                datos = data;
                return datos;
            },

            error: function(xhr, status) {

                alert('Disculpe, Ha ocurrido un problema, Intente mas tarde');

            }

        });

        // return (datos)
    }

    //window.onload = botonOk;
</script>
<script type="text/javascript">
    // Campos Nombres
    $(document).ready(function() {
        $("#nombres1").keyup(function() {
            var value = $(this).val();
            $("#nombres2").val(value);
        });
    });
    // Campos apellidos
    $(document).ready(function() {
        $("#apellidos1").keyup(function() {
            var value = $(this).val();
            $("#apellidos2").val(value);
        });
    });
</script>
<script>
    function PasarValor() {
        valor1 = document.getElementById("valorUf").value;
        $(".costos1").text(valor1)
        valor2 = document.getElementById("valorKilometros").value;
        $(".costos2").text(valor2)
    }
</script>

<script>
    function myFunction() {
        // Declare variables
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        table = document.getElementById("myTable");
        tr = table.getElementsByTagName("tr");

        // Loop through all table rows, and hide those who don't match the search query
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[0];
            if (td) {
                txtValue = td.textContent || td.innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }
</script>