@extends('layouts.app')

@section('title')
    Seguimiento de ordenes del Area Comercial.
@endsection

@section('content')
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <div class="container-mio">
        <div class="row">
            <div class="mt-3 col-md-7 col-lg-7" style="min-height: 300px;">mapa
                <input type="hidden" value="{{ Auth::user()->idemployee }}" id="idUser">
                <div class="mt-12 col-md-12 col-lg-12" style="min-height: 300px;">
                    <div class="col-md-12 col.lg-12">
                        <h2>MAPA</h2>
                        <div id="map" style="width:100%;height:500px"></div>
                    </div>
                    <div class="col-md-12 col.lg-12">
                        <div class="row">
                            <div class="col-md-12 col.lg-12" style="text-align:right;float: right;">Ordenes Terminadas por
                                hoy
                                <input type="text" class="form-control"
                                    style="background-color: #333333;color: white;text-align: center;font-size: 20px"
                                    name="pnumber" id="pnumber" readonly="">
                            </div>

                            <div class="col-md-3 col.lg-3">
                                <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal"
                                    data-bs-target="#showOrdenHistory">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                        fill="currentColor" class="bi bi-clock-history" viewBox="0 0 16 16">
                                        <path
                                            d="M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022zm2.004.45a7 7 0 0 0-.985-.299l.219-.976q.576.129 1.126.342zm1.37.71a7 7 0 0 0-.439-.27l.493-.87a8 8 0 0 1 .979.654l-.615.789a7 7 0 0 0-.418-.302zm1.834 1.79a7 7 0 0 0-.653-.796l.724-.69q.406.429.747.91zm.744 1.352a7 7 0 0 0-.214-.468l.893-.45a8 8 0 0 1 .45 1.088l-.95.313a7 7 0 0 0-.179-.483m.53 2.507a7 7 0 0 0-.1-1.025l.985-.17q.1.58.116 1.17zm-.131 1.538q.05-.254.081-.51l.993.123a8 8 0 0 1-.23 1.155l-.964-.267q.069-.247.12-.501m-.952 2.379q.276-.436.486-.908l.914.405q-.24.54-.555 1.038zm-.964 1.205q.183-.183.35-.378l.758.653a8 8 0 0 1-.401.432z">
                                        </path>
                                        <path d="M8 1a7 7 0 1 0 4.95 11.95l.707.707A8.001 8.001 0 1 1 8 0z"></path>
                                        <path
                                            d="M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5">
                                        </path>
                                    </svg>
                                    Ordenes realizadas hoy
                                </button>
                            </div>

                            <div class="col-md-3 col.lg-3">
                                <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal"
                                    data-bs-target="#showOrdenPendientes">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                        fill="currentColor" class="bi bi-clipboard-x" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd"
                                            d="M6.146 7.146a.5.5 0 0 1 .708 0L8 8.293l1.146-1.147a.5.5 0 1 1 .708.708L8.707 9l1.147 1.146a.5.5 0 0 1-.708.708L8 9.707l-1.146 1.147a.5.5 0 0 1-.708-.708L7.293 9 6.146 7.854a.5.5 0 0 1 0-.708" />
                                        <path
                                            d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1z" />
                                        <path
                                            d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0z" />
                                    </svg>
                                    Ordenes pendientes
                                </button>
                            </div>


                            <div class="col-md-6 col.lg-6" id="oper">
                                {{--  <h1>ALBERTO RIOS CASTRO SALAZAR ESPARZA</h1>  --}}
                                {{--  <span class="badge bg-primary">ALBERTO RIOS CASTRO SALAZAR ESPARZA</span>  --}}
                                {{--  <h5><span id="operador-selected" class="badge bg-info" style="width: 100%">Aun </span></h5>  --}}
                                <input id="operador-selected" disabled type="text" value="AÚN NO A SELEECIONADO OPERADOR"
                                    class="bg-success text-white form-control"
                                    style="font-size: 14px;text-align: end"></input>
                                <input id="id-selected" type="hidden"></>
                            </div>



                        </div>
                    </div>
                </div>
                <div class="mt-12 col-md-12 col-lg-12" style="min-height: 300px;">
                    <div class="form-group col-md-12" id="chart_div" style="width: 100%; min-height: 700px;margin-top:0px">
                    </div>
                </div>
                <div class="mt-12 col-md-12 col-lg-12" style="min-height: 300px;">
                    <div class="form-group col-md-12" id="chart_orden_clase"
                        style="width: 100%; min-height: 700px;margin-top:0px">
                    </div>
                </div>
            </div>
            <div class="mt-3 col-md-5 col-lg-5">
                <div class="row">
                    <div class="col-md-12">
                        <form>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <div class="input-group-text">Tipo de reporte</div>
                                </div>

                                <select class="form-control" name="tipoTrabajo" id="tipoTrabajo">
                                    <option value=0>SELECCIONA OPCION</option>
                                    <option value=42>INSTALACION SERVICIO NUEVO</option>
                                    <option value=63>REHABILITACION DE RED AGUA P.</option>
                                    <option value=128>SERVICIO NUEVO YA CUENTA CON MAT (DISTR)</option>
                                    <option value=139>SERVICIO NUEVO DISTRIBUCION</option>
                                    <option value=144>REHAB TOMA POR FUGA</option>
                                    <option value=145>REHAB TOMA OBSTRUCCION SARRO</option>
                                    <option value=146>REHAB TOMA POR REUBICACION</option>
                                    <option value=147>REHAB TOMA POR INDEPENDIZACION</option>
                                    <option value=148>REHAB TOMA TUBERIA OBSOLETA</option>
                                </select>
                                {!! $errors->first('tipoTrabajo', '<span class="error">:message</span>') !!}
                            </div>

                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <div class="input-group-text">Numero de serie</div>
                                </div>
                                <input type="text" class="form-control datepicker" name="numSerie" id="numSerie"
                                    value="{{ @old('numSerie') }}">
                            </div>

                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <div class="input-group-text">Inmueble</div>
                                </div>
                                <input type="number" class="form-control datepicker" name="inmueble" id="inmueble"
                                    value="{{ @old('inmueble') }}">
                            </div>

                            {{--  <div class="form-group col-md-6">  --}}
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <div class="input-group-text">Fecha inicio</div>
                                </div>
                                <input type="date" class="form-control datepicker" name="start_date" id="start_date"
                                    value="{{ @old('start_date') }}">
                            </div>
                            {{--  </div>  --}}

                            {{--  <div class="form-group col-md-6">  --}}
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <div class="input-group-text">Fecha final</div>
                                </div>
                                <input type="date" class="form-control datepicker" name="final_date" id="final_date"
                                    value="{{ @old('final_date') }}">
                            </div>



                            <input type="reset" value="Reset" />

                            <button id="btnMedidor" onclick="obtenerMedidores(event)"> Mostrar Medidores</button>
                            Nota:Para realizar busqueda por tipo de reporte es necesario seleccionar el tipo de reporte y
                            las fechas obligatoriamente.
                            {{--  </div>  --}}
                        </form>
                    </div>
                </div>

                <table class="table table-bordered reponsive table-d">
                    <thead>
                        <tr>
                            <th>
                                <h5 class="title">Operador</h5>
                            </th>
                            <th class="subtitlefondo" style="background-color: rgb(242, 246, 250);">
                                <h6 class="subtitle">Ordenes totales</h6>
                            </th>
                            <th class="subtitleBlack">
                                Ordenes pendientes
                            </th>
                            <th class="subtitleBlack">
                                Ordenes en proceso
                            </th>
                            {{--  <th class="subtitleBlack">
                                Ordenes terminadas
                            </th>
                            <th class="subtitleBlack">
                                Ordenes requiere material
                            </th>  --}}
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>



    <div class="modal fade" id="addBookDialogV" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Detalle de la orden</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                        style="margin-right: 50px"></button>
                    <button id="btnRegresar" type="button" class="btn btn-secondary"
                        data-bs-target="#showOrdenPendientes" data-bs-toggle="modal"
                        data-bs-dismiss="modal">Regresar</button>
                </div>
                <div class="modal-body">

                    <div class="row">
                        <div class="col-md-6 col-lg-6" style="margin-top:10px">
                            <label style="font-weight: 500;margin-left:5px;margin-top:5px; margin-bottom:1px"
                                for="caract">Información adicional</label>
                            <!--<input type="text" id="caract" class="form-control" name="caract" value="{{ @old('caract') }}" readonly/>-->

                            <textarea style="color:#000000e0; font-size:15px" class="form-control" readonly rows="10'" id="caract"
                                name="caract"></textarea>

                        </div>

                        <div class="col-md-6 col-lg-6" style="margin-top:20px">
                            <label style="font-weight: 500;margin-left:5px;margin-top:5px; margin-bottom:1px"
                                for="incidencia">Observaciones</label>
                            <textarea style="color:#000000e0; font-size:15px" class="form-control" readonly rows="10'" id="incidencia2"
                                name="incidencia2"></textarea>
                        </div>

                    </div>

                    <div class="row">
                        <div class="col-md-12 col-lg-12" style="margin-top:20px">

                            <div id="carousel" class="carousel slide" data-ride="carousel">

                                <ol class="carousel-indicators"></ol>
                                <!-- Wrapper for slides -->
                                <div class="carousel-inner" style="height: 500px;"></div>
                                <!-- Controls -->
                                <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
                                    <span class="carousel-control-prev-icon"></span>
                                </a>
                                <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
                                    <span class="carousel-control-next-icon"></span>
                                </a>
                            </div>

                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>

                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="showOrdenHistory" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Ordenes realizadas hoy</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <div class="row">
                        <div class="col-md-12">
                            <input id="operador-selected" disabled type="text" value="AÚN NO A SELEECIONADO OPERADOR"
                                class="bg-success text-white form-control"
                                style="font-size: 14px;text-align: start"></input>
                        </div>
                        <div class="col-md-12 col-lg-12" style="margin-top:20px">
                            <table id="ordenesRealizadas" class="table table-sm responsive table-striped-columns">
                                <thead>
                                    <tr>
                                        <th scope="col">Numero de orden</th>
                                        <th scope="col">Inmueble</th>
                                        <th scope="col">Estatus</th>
                                        <th scope="col">Tipo de reporte</th>
                                        <th scope="col">Fecha de inicio</th>
                                        <th scope="col">Fecha de termino</th>
                                        <th scope="col">Calle</th>
                                        <th scope="col">Colonia</th>
                                        <th scope="col"></th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>

                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="showOrdenPendientes" tabindex="-1" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Ordenes pendientes</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <div class="row">
                        <div class="col-md-12">
                            <input id="operador-selected" disabled type="text" value="AÚN NO A SELEECIONADO OPERADOR"
                                class="bg-success text-white form-control"
                                style="font-size: 14px;text-align: start"></input>
                        </div>
                        <div class="col-md-12">
                            <div class="alert" id="success-alert">
                                <table class="table table-sm table-striped-columns">
                                    <thead>
                                        <tr>
                                            <th scope="col">Producto</th>
                                            <th scope="col">Cantidad</th>
                                            <th scope="col">Número de orden</th>
                                            <th scope="col">Fecha de recolección</th>
                                            <th scope="col">Persona que recolecta material</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tableMatDet">
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        {{--  <a id="myWish" href="javascript:;" class="btn btn-mini">Add to Wishlist </a>  --}}
                        {{--  <div class="col-md-8 col-lg-8" style="margin-top:20px">
                            <table class="table table-sm table-striped-columns">
                                <thead>
                                    <tr>
                                        <th scope="col">Numero de orden</th>
                                        <th scope="col">Estatus del reporte</th>
                                        <th scope="col">Tipo de reporte</th>
                                        <th scope="col">Fecha asignada</th>
                                        <th scope="col">Calle</th>
                                        <th scope="col">Colonia</th>
                                        <th scope="col">Validado por lecturas</th>
                                        <th scope="col">Entregado por almacen</th>
                                        <th scope="col">Estatus del material en lecturas</th>
                                    </tr>
                                </thead>
                                <tbody id="tablePend">
                                </tbody>
                            </table>
                        </div>  --}}
                    </div>
                    <div class="col-md-12">
                        <div class="tab-content">
                            <div class="tab-pane show active" id="buttons-table-preview">
                                <table id="datatable-buttons"
                                    class="table table-sm responsive table-striped-columns display"
                                    style="width:100%;font-size: 12px">
                                    <thead>
                                        <tr>
                                            <th data-priority="1">Inmueble</th>
                                            <th data-priority="1">Numero de orden</th>
                                            <th data-priority="1">Estatus del reporte</th>
                                            <th>Tipo de reporte</th>
                                            <th>Fecha asignada</th>
                                            <th>Calle</th>
                                            <th>Colonia</th>
                                            <th data-priority="1">Validación y requirimiento de material</th>
                                            <th data-priority="1">Salida del almacen</th>
                                            {{--  <th scope="col">Validado por lecturas</th>
                                            <th scope="col">Entregado por almacen</th>
                                            <th scope="col">Estatus del material en lecturas</th>  --}}
                                            {{--  <th></th>
                                            <th></th>  --}}
                                            <th>Orden</th>
                                        </tr>
                                    </thead>



                                </table>
                            </div> <!-- end preview-->
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>

                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <link href="{{ asset('css/datatables/dataTables.bootstrap5.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('css/datatables/dataTables.bootstrap5.min.css') }}" rel="stylesheet" type="text/css" />
    {{--  <link href="{{ asset('css/datatables/dataTables.bootstrap5.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('css/datatables/responsive.bootstrap5.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('css/datatables/fixedColumns.bootstrap5.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('css/datatables/fixedHeader.bootstrap5.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('css/datatables/buttons.bootstrap5.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('css/datatables/select.bootstrap5.min.css') }}" rel="stylesheet" type="text/css" />  --}}
    <link
        href="https://cdn.datatables.net/v/dt/jq-3.7.0/jszip-3.10.1/dt-2.1.2/b-3.1.0/b-colvis-3.1.0/b-html5-3.1.0/b-print-3.1.0/fc-5.0.1/fh-4.0.1/kt-2.12.1/r-3.0.2/datatables.css"
        rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.datatables.net/2.0.8/css/dataTables.dataTables.css" />
    {{--  <link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/4.0.1/css/fixedHeader.dataTables.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/3.0.2/css/responsive.dataTables.css" />  --}}

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
    {{--  <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">  --}}
    <link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
    <script src="{{ asset('js/theme/hyper-config.js') }}"></script>
    {{--  <link href="{{ asset('css/app/app-modern.min.css') }}" rel="stylesheet" type="text/css" />  --}}

    <style>
        .badge-font {
            font-size: 13px;
            margin-bottom: 3px;
        }

        .badge-font-small {
            font-size: 12px;
        }

        div.dt-buttons {
            display: inline-block;
        }

        .subtitlefondo {
            background-color: rgb(242, 246, 250);
        }

        .subtitle {
            color: rgb(8, 82, 194);
            font-weight: bold;
        }

        .container-mio {
            padding-left: 1%;
            padding-right: 1;
        }

        .subtitleBlack {
            color: rgba(78, 80, 80, 0.918);
        }

        .title {
            color: rgba(59, 61, 61, 0.918);
            font-weight: bold;
        }

        .tdstyle {
            color: rgb(75, 75, 75);
            font-size: 14px;
            font-weight: bold
        }

        .bar {
            background: rgb(244, 247, 247);
            width: 100%;
            height: 35px;
            border-radius: 3px;
        }

        .progress {
            height: 35px;
            border-radius: 2px;
            background: #2e82f0;
            -webkit-transition: 600ms cubic-bezier(0.6, 0, 0.38, 1);
            -moz-transition: 600ms cubic-bezier(0.6, 0, 0.38, 1);
            -o-transition: 600ms cubic-bezier(0.6, 0, 0.38, 1);
            -ms-transition: 600ms cubic-bezier(0.6, 0, 0.38, 1);
            transition: 600ms cubic-bezier(0.6, 0, 0.38, 1);
        }

        .modal-dialog {
            max-width: 90%;
            margin: 1.75rem auto;
        }
    </style>
    {{--  <link href="{{ asset('css/datatables/responsive.datatables.min.css') }}" rel="stylesheet" type="text/css" />  --}}
@endpush

@push('scripts')
    {{--  <script src="{{ asset('js/vendor/vendor.min.js') }}"></script>

    <script src="{{ asset('js/highlight/highlight.pack.min.js') }}"></script>
    <script src="{{ asset('js/highlight/hyper-syntax.js') }}"></script>  --}}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    {{--  <script src="{{ asset('js/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('js/datatables/dataTables.bootstrap5.min.js') }}"></script>  --}}
    {{--  <script src="{{ asset('js/datatables/dataTables.responsive.min.js') }}"></script>  --}}
    {{--  <script src="{{ asset('js/datatables/responsive.bootstrap5.min.js') }}"></script>  --}}
    {{--  <script src="{{ asset('js/datatables/fixedColumns.bootstrap5.min.js') }}"></script>
    <script src="{{ asset('js/datatables/dataTables.fixedHeader.min.js') }}"></script>  --}}
    {{--  <script src="{{ asset('js/datatables/dataTables.buttons.min.js') }}"></script>  --}}
    {{--  <script src="{{ asset('js/datatables/buttons.bootstrap5.min.js') }}"></script>  --}}
    {{--  <script src="{{ asset('js/datatables/buttons.html5.min.js') }}"></script>  --}}
    {{--  <script src="{{ asset('js/datatables/buttons.flash.min.js') }}"></script>  --}}
    {{--  <script src="{{ asset('js/datatables/buttons.print.min.js') }}"></script>
    <script src="{{ asset('js/datatables/dataTables.keyTable.min.js') }}"></script>  --}}
    {{--  <script src="{{ asset('js/datatables/dataTables.select.min.js') }}"></script>  --}}

    {{--  <script src="{{ asset('js/datatables/demo.datatable-init.js') }}"></script>  --}}

    {{--  <script src="{{ asset('js/app/app.min.js') }}"></script>  --}}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
    {{--  <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>  --}}
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    {{--  <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>  --}}
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://cdn.datatables.net/2.0.8/js/dataTables.js"></script>
    {{--  <script src="https://cdn.datatables.net/fixedheader/4.0.1/js/dataTables.fixedHeader.js"></script>
    <script src="https://cdn.datatables.net/fixedheader/4.0.1/js/fixedHeader.dataTables.js"></script>
    <script src="https://cdn.datatables.net/responsive/3.0.2/js/dataTables.responsive.js"></script>
    <script src="https://cdn.datatables.net/responsive/3.0.2/js/responsive.dataTables.js"></script>  --}}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
    <script
        src="https://cdn.datatables.net/v/dt/jq-3.7.0/jszip-3.10.1/dt-2.1.2/b-3.1.0/b-colvis-3.1.0/b-html5-3.1.0/b-print-3.1.0/fc-5.0.1/fh-4.0.1/kt-2.12.1/r-3.0.2/datatables.js">
    </script>
    {{--  <script src="{{ asset('js/datatables/responsive.datatables.min.js') }}"></script>  --}}


    <script>
        $(document).ready(function() {
            $("#success-alert").hide();
        });
    </script>
    <script>
        $(function() {
            var table = $('.table-d').DataTable({
                "order": [
                    [2, 'desc'],
                ],
                searching: true,
                processing: true,
                serverSide: true,
                "ajax": {
                    "url": "{{ route('operador.info') }}",
                    "type": "GET",
                    "dataSrc": "data",
                },
                "columns": [{
                        data: 'operador',
                        name: 'operador'
                    },
                    {
                        data: 'OrdenesTotal',
                        name: 'OrdenesTotal'
                    },
                    {
                        data: 'OrdenesPendientes',
                        name: 'OrdenesPendientes'
                    },
                    {
                        data: 'proceso',
                        name: 'proceso',
                        orderable: false,
                        searchable: false
                    }
                ]
            });


        });
    </script>

    <script>
        $(document).ready(function() {

            $(document).on('hidden.bs.modal', function(event) {
                if ($('.modal:visible').length) {
                    $('body').addClass('modal-open');
                }
            });

            initMap();

            function initMap() {

                const myLatLng = {
                    lat: 22.762726,
                    lng: -102.555135
                };

                const map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 13,
                    styles: [{
                            elementType: "labels.text.stroke",
                            stylers: [{
                                color: "#242f3e"
                            }, {
                                visibility: "off"
                            }]
                        },
                        {
                            featureType: "poi",
                            elementType: "labels.text.fill",
                            stylers: [{
                                color: "#d59563"
                            }, {
                                visibility: "off"
                            }],
                        },
                        {
                            featureType: "poi.park",
                            elementType: "geometry",
                            stylers: [{
                                color: "#263c3f"
                            }, {
                                visibility: "off"
                            }],
                        },
                        {
                            featureType: "poi.business",
                            elementType: "labels.text.fill",
                            stylers: [{
                                color: "#6b9a76"
                            }, {
                                visibility: "off"
                            }],
                        },
                        {
                            featureType: "administrative.neighborhood",
                            elementType: "labels.text.fill",
                            stylers: [{
                                color: "#6b9a76"
                            }, {
                                visibility: "off"
                            }],
                        },

                    ],
                    center: myLatLng,
                });



            }

        });


        const value = document.getElementById("idUser").value;
        console.log(value);

        window.axios.get(`/siat_sockets_2/public/api/operadores/${value}`)
            .then((response) => {
                let operadores = response.data;

                google.charts.load("current", {
                    packages: ["corechart, bar"]
                });
                google.charts.setOnLoadCallback(drawChart);


                function drawChart() {

                    var condArray = [];
                    var data1 = new google.visualization.DataTable();
                    data1.addColumn('string', 'Operador');
                    data1.addColumn('number', 'total');
                    data1.addColumn({
                        type: 'number',
                        role: 'annotation'
                    });


                    for (var operador of operadores) {
                        data1.addRows([
                            [operador.Nombre, parseInt(operador.OrdenesPendientes), parseInt(operador
                                .OrdenesPendientes)],
                        ]);
                    }


                    // Set chart options
                    var options = {
                        'legend': 'left',
                        'title': 'Estadisticas por tipo de reporte',
                        'is3D': true,
                        'fontSize': 17,
                        // pieHole: 0.4, para dibujar dona
                        // pieSliceText: 'value' + 'percentage'
                        pieSliceTextStyle: {
                            fontSize: 18
                        }
                    };

                    // Instantiate and draw our chart, passing in some options.
                    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
                    chart.draw(data1, options);

                    var barchart_options = {
                        title: 'Carga de trabajo por operador',
                        chartArea: {
                            width: '50%'
                        },
                        hAxis: {
                            title: 'Total de trabajos pendientes',
                            minValue: 0
                        },
                        'fontSize': 11,
                        vAxis: {
                            title: 'Operadores'
                        },
                    };

                    var barchart = new google.visualization.BarChart(document.getElementById('chart_div'));
                    barchart.draw(data1, barchart_options);


                }

                $(window).resize(function() {
                    drawChart();
                });

            });



        Echo.channel('ordenes')
            .listen('OrdenUpdated', (e) => {
                //Pendientes
                /*let id = 'p'+e.data[0].IdRealizador;
                let element = document.getElementById(id);
                element.innerText = e.data[0].ordenes+' Pendientes';*/

                //Proceso
                let idP = 'proc' + e.data[1].IdRealizador;
                let elementP = document.getElementById(idP);
                elementP.innerText = e.data[1].ordenes + ' Proceso';

                // console.log(e.data[0].IdRealizador);
                //console.log(e);
            });

        const infoOrden = async (event, orden) => {
            console.log(orden);
        };


        const getDetalleSalida = async (event, salidas) => {
            const salidas_todas = salidas.split("   ");

            //console.log(salidas);
            //console.log(salidas_todas.length);


            let contador = 0;

            let salidas_to = "";
            while (contador < salidas_todas.length) {
                if (salidas_todas[contador].includes("SC")) {
                    salidas_to += salidas_todas[contador]
                }
                contador++;
            }
            console.log("concatenado");
            console.log(salidas_to);
            console.log("concatenado");


            window.axios.get(`/siat_sockets_2/public/api/materialOrdenComercial/${salidas_to}`)
                .then((response) => {

                    /*let ordenes = response.data;
                    console.log(ordenes);
                    console.log("ordenes pendientes");

                    document.getElementById("tablePend").innerHTML = "";

                    var cont = 0;
                    for (var ordenesP of response['data']) {
                        cont++;
                        console.log(ordenes.IdTrabajoAP);
                        document.getElementById('tablePend').insertRow(-1).innerHTML =
                            '<td class="tdstyle">' + ordenesP.IdTrabajoAP + '</td>' +
                            '<td>' + ordenesP.Situacion + '</td>' +
                            '<td>' + ordenesP.Clase + '</td>' +
                            '<td>' + ordenesP.FechaAsignada + '</td><td>' +
                            ordenesP
                            .CALLE_D + '</td><td>' +
                            ordenesP
                            .COLONIA_D + '</td>'
                    }*/
                    document.getElementById('tableMatDet').innerHTML = "";

                    console.log(response.data);
                    var cont = 0;
                    for (var material of response.data) {
                        document.getElementById('tableMatDet').insertRow(-1).innerHTML =
                            '<td class="tdstyle">' + response.data[cont].Descripcion + '</td>' +
                            '<td>' + response.data[cont].Cantidad + '</td>' +
                            '<td>' + response.data[cont].IdTrabajoAP + '</td>' +
                            '<td>' + response.data[cont].Fecha + '</td><td>' +
                            response.data[cont].Nombre + '</td>';
                        cont++;
                    }


                    /*$(".modal-body #itmaterial").val(response.data[0].Descripcion);
                    $(".modal-body #itnombre").val(response.data[0].Nombre);
                    $(".modal-body #itfecha").val(response.data[0].Fecha);
                    $(".modal-body #ittrabajo").val(response.data[0].IdTrabajoAP);
                    $(".modal-body #itcantidad").val(response.data[0].Cantidad);

                    <th scope="col">Producto</th>
                    <th scope="col">Cantidad</th>
                    <th scope="col">Número de orden</th>
                    <th scope="col">Fecha</th>
                    <th scope="col">Responsable</th>*/

                });


            /*salidas_todas.forEach(myFunction);

            function myFunction(item) {
                if (item.includes("SC")) {

                    //consultar el material de la salida


                    console.log(item);
                    $(".modal-body #itmaterial").val(item);
                }
            }*/

            $("#success-alert").fadeTo(20000, 500).slideUp(500, function() {
                $("#success-alert").slideUp(500);
            });

        };

        const getDataGeneral2 = async (event, orden, sitio) => {


            console.log("entro cuando quiero ver mas de la orden");
            //backOfferButton.setAttribute("data-bs-target", "#helloButton");

            //console.log(backOfferButton.data-bs-target);
            // backOfferButton.data-bs-target = "#addDifferentOffer";
            // console.log(backOfferButton.data-bs-target);

            //CARACTERISTICAS
            let hostname = '201.144.50.38';
            console.log(orden);

            const inicio = "http://";
            const host = hostname;
            const url = inicio + host + `/siat_jiapaz/public/api/getDataCaracteristicas/${orden}`;

            fetch(url)
                .then((res) => {
                    if (res.status != "200") {
                        console.log(res.status);
                    } else {
                        console.log(res.status);
                        return res.json();
                    }
                })
                .then((data) => {
                    console.log("aqui resolvio");
                    console.log(data);

                    if (data) {
                        if (data.length >= 1) {
                            var car = data[0].dataCaracteristicas[0].Caracteristicas;

                            if (car != null) {
                                var car1 = car.split(",");
                                $todocar = "";
                                for (let i in car1) {
                                    if (i == 0) {
                                        $todocar = "-" + $todocar + car1[i] + "\n";
                                    } else {
                                        $todocar = $todocar + "-" + car1[i] + "\n";
                                    }
                                }
                            } else {
                                var car1 = "";
                                $todocar = car1;
                            }
                        } else {
                            var car1 = "";
                            $todocar = car1;
                        }
                    }

                    console.log(data);


                    if (data[1].dataComentarioIncidencia.length != 0) {
                        $(".modal-body #incidencia").val(
                            data[1].dataComentarioIncidencia[0].comentarioTipoTrabajoNuevo
                        );
                    } else {
                        $(".modal-body #incidencia").val("");
                    }

                    if (data[2].dataFotosMap.length != 0) {
                        $(".modal-body #incidencia2").val(data[2].dataFotosMap[0].ObservaFecha);
                    } else {
                        $(".modal-body #incidencia2").val("");
                    }

                    $(".carousel-inner,.carousel-indicators").empty();
                    $(".modal-body #caract").val($todocar);
                    $fotos = data[2].dataFotosMap;

                    $longitud = $fotos.length;

                    $comentario = "";
                    $post_comentario = "";
                    $post_comentarios = "";

                    fot = $fotos;
                    for (let i in $fotos) {

                        console.log("revisar");
                        console.log($fotos[i].nombreFoto);

                        if ($longitud > 1) {
                            $imagen = $fotos[i].nombreFoto;
                            $realizo =
                                $fotos[$longitud - 1].NombrePareja +
                                " " +
                                $fotos[$longitud - 1].NombreCuadrilla;

                            $comentario = $fotos[i].ObservaFecha;

                            let constUrl = "";
                            if (host == '201.144.50.38') {
                                constUrl = '201.144.50.35';
                            } else {
                                constUrl = '10.45.224.41';
                            }
                            console.log("");
                            console.log(constUrl);

                            $(
                                `<div class="carousel-item"><img src="http://${constUrl}:805/` +
                                $imagen +
                                '" style="height:499px;width:817px;" class="img-fluid">   </div> <div class="carousel-caption d-none d-md-block" style="background: #1f1f1fb8;"><h5>' +
                                $realizo +
                                "</h5><p>" +
                                "" +
                                "</p></div>"
                            ).appendTo(".carousel-inner");

                            $(
                                '<li data-target="#carousel" data-slide-to="' + i + '"></li>'
                            ).appendTo(".carousel-indicators");

                            $(".modal-body #incidencia2").val($comentario);


                        } else {
                            $imagen = $fotos[i].nombreFoto;
                            $realizo = $fotos[i].NombrePareja + " " + $fotos[i].NombreCuadrilla;
                            $comentario = $fotos[i].ObservaFecha;
                            console.log("revisar 2");
                            console.log($fotos[i].nombreFoto);

                            $(
                                `<div class="carousel-item"><img src="http://${constUrl}:805/` +
                                $imagen +
                                '" style="height:499px;width:817px;" class="img-fluid">   </div> <div class="carousel-caption d-none d-md-block" style="background: #1f1f1fb8;"><h5>' +
                                $realizo +
                                "</h5><p>" +
                                "" +
                                "</p></div>"
                            ).appendTo(".carousel-inner");

                            $(
                                '<li data-target="#carousel" data-slide-to="' + i + '"></li>'
                            ).appendTo(".carousel-indicators");

                            $(".modal-body #incidencia2").val($comentario);
                        }

                    }
                    $(".carousel-item").first().addClass("active");
                    $(".carousel-indicators > li").first().addClass("active");
                    $("#carousel").carousel();

                    //init();


                    var backOfferButton = document.getElementById('btnRegresar');

                    //var t = $(".modal-body .btnRregresar");
                    console.log(backOfferButton.getAttribute('data-bs-target'));

                    if (sitio == 2) {
                        backOfferButton.setAttribute('data-bs-target', '#showOrdenHistory');
                        backOfferButton.style.display = "block";
                    } else if (sitio == 1) {
                        backOfferButton.setAttribute('data-bs-target', '#showOrdenPendientes');
                        backOfferButton.style.display = "block";
                    } else {
                        backOfferButton.style.display = "none";
                    }


                    console.log(backOfferButton.getAttribute('data-bs-target'));

                });
        };


        const obtenerMedidores = async (event) => {
            event.preventDefault();

            let hostname = location.hostname;
            const host = hostname;
            const inicio = "http://";
            const url = inicio + host + "/siat_sockets_2/public/api/getMedidores";
            const fInicial = $('#start_date').val();
            const fFinal = $('#final_date').val();
            const numSerie = $('#numSerie').val();
            const inmueble = $('#inmueble').val();
            const tipoTrabajo = $('#tipoTrabajo').val();

            console.log(tipoTrabajo);
            console.log(numSerie);
            console.log(inmueble);

            const data = {
                fechaInicio: fInicial,
                fechaFinal: fFinal,
                serie: numSerie,
                inmueble: inmueble,
                tipoTrabajo: tipoTrabajo
            };

            const response = await axios.post(url, data);

            console.log(response);

            let medidores = response.data;

            const myLatLng = {
                lat: 22.762726,
                lng: -102.555135
            };

            const map = new google.maps.Map(document.getElementById('map'), {
                zoom: 13,
                center: myLatLng,
            });

            if (medidores) {
                medidores.forEach(function(medidor) {
                    //Latitud, Longitud, etiqueta, titulo, icono, map
                    const data = `El inmueble es ${medidor
                    .Inmueble} con numero de trabajo ${medidor.IdTrabajoAP} y fecha ${medidor.FechaRealizacion}`
                    let marker = addMarker(medidor.Latitud, medidor.longitud, medidor.NumSerie, data, null,
                        map);

                    let content = '<div class="card1">' +
                        '<div class="card-body1">' +
                        '<h10 class="card-title1">' + '<strong>' +
                        "Inmueble: " +
                        '</strong>' + medidor.Inmueble + '</h10>' +
                        '<br/>' +
                        "IdTrabajo: " +
                        '</strong>' + medidor.IdTrabajoAP + '</h10>' +
                        '<br/>' +
                        '<h10 class="card-title1">' + '<strong>' +
                        "Serie: " +
                        '</strong>' + medidor.NumSerie + '</h10>' +
                        '<br/>' +
                        '<h10 class="card-title1">' + '<strong>' +
                        "Fecha de captura: " +
                        '</strong>' + medidor.FechaRealizacion + '</h10>' +
                        '<br/>' +
                        '<button onclick="getDataGeneral2(event,' +
                        medidor.IdTrabajoAP +
                        ',3)" class="btn btn-info margen" title="Asignar" data-bs-toggle="modal" data-bs-target="#addBookDialogV"> Detalle de la orden</button>' +
                        '</div>'

                    var infowindow = new google.maps.InfoWindow({
                        content: content
                    });
                    google.maps.event.addListener(marker, 'click',
                        function() {
                            infowindow.open(map, marker);
                        });

                    google.maps.event.addListener(map, 'click',
                        function() {
                            infowindow.close();
                        });
                });
            }


        };

        const busquedaTrabajos = async (event, op, nombre) => {
            event.preventDefault();
            window.scrollTo(0, 100);

            //Referencia a click del a href que viene en el datatable imagen del operador comercial
            let payload = {
                operador: op
            };

            document.getElementById("operador-selected").value = nombre;
            document.getElementById("id-selected").value = op;
            $(".modal-body #operador-selected").val(
                nombre
            );


            window.axios.get(`/siat_sockets_2/public/api/ordenesTerminadas/${op}`)
                .then((response) => {

                    let ordenes = response.data;
                    console.log(ordenes);
                    console.log("probando api desde laragon");


                    google.charts.load('current', {
                        'packages': ['corechart']
                    });
                    google.charts.setOnLoadCallback(drawChart);

                    function drawChart() {

                        var condArray = [];
                        var data = google.visualization.arrayToDataTable([
                            ['Task', 'Hours per Day'],
                            ['', 0]
                        ]);

                        for (var orden of ordenes) {
                            data.addRows([
                                [orden.Clase, parseInt(orden.total)],
                            ]);
                        }

                        var options = {
                            title: 'Ordenes realizadas durante el día'
                        };

                        var chart = new google.visualization.PieChart(document.getElementById(
                            'chart_orden_clase'));

                        chart.draw(data, options);

                    }


                });

            const fInicial = $('#start_date').val();
            const fFinal = $('#final_date').val();


            //Obtiene las coordenadas para el mapa recorrido del operador
            $.ajax({
                url: "{{ route('getCoordenadas') }}",
                type: 'get',
                data: {
                    idEmpleado: op,
                    fInicial: fInicial,
                    fFinal: fFinal
                },
                dataType: 'json',
                success: function(response) {

                    $("div.spanner").addClass("hide");
                    $("div.spanner").removeClass("show");

                    initMap();

                    function initMap() {
                        var mapa = $(this).data('mapa');

                        var map = new google.maps.Map(document.getElementById('map'), {
                            center: {
                                lat: 22.762726,
                                lng: -102.555135
                            },
                            zoom: 13,
                            styles: [{
                                    elementType: "labels.text.stroke",
                                    stylers: [{
                                        color: "#242f3e"
                                    }, {
                                        visibility: "off"
                                    }]
                                },
                                {
                                    featureType: "poi",
                                    elementType: "labels.text.fill",
                                    stylers: [{
                                        color: "#d59563"
                                    }, {
                                        visibility: "off"
                                    }],
                                },
                                {
                                    featureType: "poi.park",
                                    elementType: "geometry",
                                    stylers: [{
                                        color: "#263c3f"
                                    }, {
                                        visibility: "off"
                                    }],
                                },
                                {
                                    featureType: "poi.park",
                                    elementType: "labels.text.fill",
                                    stylers: [{
                                        color: "#6b9a76"
                                    }, {
                                        visibility: "off"
                                    }],
                                },

                            ],
                        });

                        var len = 0;
                        if (response['data'] != null) {
                            len = response['data'].length;
                        }

                        $("#pnumber").val(len);

                        if (len > 0) {
                            var data = response['data'];

                            console.log(data);
                            var month = {};
                            var monthsArray = [];

                            let contador = 1;
                            data.forEach(function(airport) {
                                var marker = new google.maps.Marker({
                                    position: {
                                        lat: parseFloat(airport.Latitud),
                                        lng: parseFloat(airport.longitud)
                                    },
                                    icon: '{{ asset('imagenes/ic_incidencias.png') }}',
                                    label: {
                                        text: contador + "---",
                                        color: 'black',
                                        fontSize: "25px"
                                    },
                                    map: map,
                                    title: airport.CALLE_D +
                                        "\n Latitud: " + airport
                                        .Latitud + "\n Longitud: " + airport
                                        .longitud +
                                        "\n Numero de orden: " + airport
                                        .IdTrabajoAP
                                });

                                var content = '<div class="card1">' +
                                    '<div class="card-body1">' +
                                    '<h10 class="card-title1">' + '<strong>' +
                                    "Inmueble: " +
                                    '</strong>' + airport.Inmueble + '</h10>' +
                                    '<br/>' +
                                    "Calle: " +
                                    '</strong>' + airport.CALLE_D + '</h10>' +
                                    '<br/>' +
                                    '<h10 class="card-title1">' + '<strong>' +
                                    "Colonia: " +
                                    '</strong>' + airport.COLONIA_D + '</h10>' +
                                    '<br/>' +
                                    '<h10 class="card-title1">' + '<strong>' +
                                    "Numero: " +
                                    '</strong>' + airport.NumeroCalle + '</h10>' +
                                    '<br/>' +
                                    '<h10 class="card-title1">' + '<strong>' +
                                    "Tipo de reporte: " +
                                    '</strong>' + airport.Clase + '</h10>' +
                                    '<br/>' +
                                    '<h10 class="card-title1">' + '<strong>' +
                                    "Latitud: " +
                                    '</strong>' + airport.Latitud + '</h10>' +
                                    '<br/>' +
                                    '<h10 class="card-title1">' + '<strong>' +
                                    "Longitud " +
                                    '</strong>' + airport.longitud + '</h10>' +
                                    '</div>' +
                                    '<h10 class="card-title1">' + '<strong>' +
                                    "Numero de orden " + '</strong>' + airport
                                    .IdTrabajoAP +
                                    '</h10>' + '<br/>' +
                                    '<h10 class="card-title1">' + '<strong>' +
                                    "Hora de inicio " + '</strong>' + airport
                                    .FechaInicio +
                                    '</h10>' + '<br/>' +
                                    '<h10 class="card-title1">' + '<strong>' +
                                    "Hora de termino " + '</strong>' + airport
                                    .FechaFinalizacion +
                                    '</h10>' + '<br/>' +
                                    '<button onclick="getDataGeneral2(event,' +
                                    airport
                                    .IdTrabajoAP +
                                    ',3)" class="btn btn-info margen" title="Asignar" data-bs-toggle="modal" data-bs-target="#addBookDialogV"> Detalle de la orden</button>' +
                                    '</div>'

                                var infowindow = new google.maps.InfoWindow({
                                    content: content
                                });
                                google.maps.event.addListener(marker, 'click',
                                    function() {
                                        infowindow.open(map, marker);
                                    });

                                google.maps.event.addListener(map, 'click',
                                    function() {
                                        infowindow.close();
                                    });

                                month.lat = parseFloat(airport.Latitud);
                                month.lng = parseFloat(airport.longitud);
                                monthsArray.push({
                                    ...month
                                });
                                contador++;
                            });

                        }

                    }

                }

            });



            const url_ordenes_realizadas = 'ordenes-realizadas-aldia-comercial';
            $('#ordenesRealizadas').DataTable({
                "order": [
                    [5, "ASC"]
                ],
                "lengthMenu": [10, 25, 50, 100, 200],
                "destroy": true,
                // "destroy": true,
                // "language": {
                //     "url": "js/datatable_Spanish.json"
                // },
                "responsive": true,
                dom: 'lBfrtip',
                buttons: [{
                        extend: 'print',
                        title: "Seguimiento de ordenes realizadas del area comercial",
                        messageTop: function() {
                            return (
                                'Operador: ' + nombre + ''
                            );
                        },
                        messageBottom: null
                    },
                    'copy', 'csv', 'excel', 'pdf'
                ],
                "searching": true,
                "processing": true,
                "serverSide": true,
                "ajax": {
                    url: url_ordenes_realizadas,
                    type: "GET",
                    data: function(d) {
                        d.op = op;
                        d.fInicial = fInicial;
                        d.fFinal = fFinal;
                    }
                },
                "columns": [{
                        data: 'IdTrabajoAP'
                    },
                    {
                        data: 'Inmueble'
                    },
                    {
                        data: 'Situacion'
                    },
                    {
                        data: 'Clase'
                    },

                    {
                        data: 'FechaInicio'
                    },

                    {
                        data: 'FechaFinalizacion'
                    },
                    {
                        data: 'CALLE_D'
                    },
                    {
                        data: 'COLONIA_D'
                    },
                    {
                        data: 'det-orden',
                        name: 'det-orden',
                        orderable: false,
                        searchable: false
                    },
                ]
            });

            const url = "asignaciones-list";
            $('#datatable-buttons').DataTable({
                "order": [
                    [3, "ASC"]
                ],
                "destroy": true,
                // "destroy": true,
                // "language": {
                //     "url": "js/datatable_Spanish.json"
                // },
                "responsive": true,
                dom: 'lBfrtip',
                buttons: [{
                        extend: 'print',
                        title: "Seguimiento de ordenes pendientes del area comercial",
                        messageTop: function() {
                            return (
                                'Operador: ' + nombre + ''
                            );
                        },
                        messageBottom: null
                    },
                    'copy', 'csv', 'excel', 'pdf'
                ],
                "searching": true,
                "processing": true,
                "serverSide": true,
                "ajax": {
                    url: url,
                    type: "GET",
                    data: function(d) {
                        d.op = op;
                        // d.fechaInicio = "";
                        // d.fechaFinal = "";
                    }
                },
                "columns": [{
                        data: 'Inmueble'
                    },
                    {
                        data: 'IdTrabajoAP'
                    },
                    {
                        data: 'Situacion'
                    },
                    {
                        data: 'Clase'
                    },
                    {
                        data: 'FechaAsignada'
                    },
                    {
                        data: 'CALLE_D'
                    },
                    {
                        data: 'COLONIA_D'
                    },
                    {
                        data: 'mat-siat',
                        name: 'mat-siat',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'mat-almacen',
                        name: 'mat-almacen',
                        orderable: false,
                        searchable: false
                    }, {
                        data: 'det-orden',
                        name: 'det-orden',
                        orderable: false,
                        searchable: false
                    },
                ]
            });

        };

        function addMarker(Latitud, Longitud, etiqueta, titulo, icono, map) {

            let marker = new google.maps.Marker({
                position: {
                    lat: parseFloat(Latitud),
                    lng: parseFloat(Longitud)
                },
                label: {
                    text: etiqueta,
                    color: 'black',
                    fontSize: "25px"
                },
                map: map,
                title: titulo
            });


            return marker;
        }
    </script>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCe80QyakqMJd_s_4Lq2eFvWpRGHLYTc9A&callback=initMap">
    </script>
@endpush