@extends('layouts.inspinia.app')
@section('title', 'Rutas chofer')
@section('titulopagina', 'Chofer en ruta')

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="float-right">
                <form class="form-inline" action="{{ route('rutachoferesresumen') }}" method="POST" name="frm">
                    @csrf



                    <select class="form-control  form-control-sm" id="cod_agencia" name="cod_agencia" required>
                        @if (Auth::user()->hasRole('Agente') != 1)
                            <option value="">Seleccione Agencia</option>
                            -- <option value="0">Todos</option> 
                        @endif

                        @if (Auth::user()->hasRole('Agente') != 1)
                            @foreach ($agencias as $r)
                                <option value="{{ $r->cod_agencia }}"
                                    @if ($codigoagencia == $r->cod_agencia) {{ 'selected' }} @endif>
                                    {{ $r->nom_agencia }}
                                </option>
                            @endforeach
                        @else
                            @foreach ($agencias as $r)
                                <option value="{{ $r->cod_agencia }}"
                                    @if (Auth::user()->cod_agencia == $r->cod_agencia) {{ 'selected' }} @endif>
                                    {{ $r->nom_agencia }}
                                </option>
                            @endforeach
                        @endif


                    </select>



                    @error('cod_agencia')
                        <small class="text-danger">
                            *{{ $message }}
                        </small>
                    @enderror

                    <input type="text" name="fecha" id="fecha" class="form-control form-control-sm" required
                        value="{{ $fechadesde }}">

                    @error('fecha')
                        <small class="text-danger">
                            *{{ $message }}
                        </small>
                    @enderror


                    <button id="buscar" class="btn btn-xs btn-primary" type="submit">
                        Buscar
                    </button>
                    &nbsp;&nbsp;&nbsp;
                    <button id="exportarexcel" class="btn btn-xs btn-primary" type="button">
                        Excel
                    </button>

                </form>
            </div>
        </div>
    </div>
    <div class="row">

        @foreach ($datoscabecera as $item)
            @if ($item->ASIGNADOS === 'ASIGNADOS')
                <div class="col-lg-2">
                    <div class="widget style1 yellow-bg">
                        <div class="row vertical-align">
                            <div class="col-3">
                                <i class="fa fa-cubes fa-3x"></i>

                            </div>
                            <div class="col-9 text-right">
                                <h6>{{ $item->ASIGNADOS }}</h6>
                                <h5 style="font-weight: bold;">{{ $item->CANTIDAD }}</h5>
                            </div>
                        </div>

                    </div>
                </div>
            @endif

            @if ($item->ASIGNADOS === 'GESTIONADOS')
                <div class="col-lg-2">
                    <div class="widget style1 navy-bg">
                        <div class="row vertical-align">
                            <div class="col-3">
                                <i class="fa fa-cube fa-3x"></i>

                            </div>
                            <div class="col-9 text-right">
                                <h6>{{ $item->ASIGNADOS }}</h6>
                                <h5 style="font-weight: bold;">{{ $item->CANTIDAD }}</h5>
                            </div>
                        </div>

                    </div>
                </div>
            @endif


            @if ($item->ASIGNADOS === 'ENTREGADOS')
                <div class="col-lg-2">
                    <div class="widget style1 navy-bg">
                        <div class="row vertical-align">
                            <div class="col-3">
                                <i class="fa fa-handshake-o fa-3x"></i>

                            </div>
                            <div class="col-9 text-right">
                                <h6>{{ $item->ASIGNADOS }}</h6>
                                <h5 style="font-weight: bold;">{{ $item->CANTIDAD }}</h5>
                            </div>
                        </div>

                    </div>
                </div>
            @endif

            @if ($item->ASIGNADOS === 'NO ENTREGADOS')
                <div class="col-lg-2">
                    <div class="widget style1 red-bg">
                        <div class="row vertical-align">
                            <div class="col-3">
                                <i class="fa fa-info-circle fa-3x"></i>

                            </div>
                            <div class="col-9 text-right">
                                <h6>{{ $item->ASIGNADOS }}</h6>
                                <h5 style="font-weight: bold;">{{ $item->CANTIDAD }}</h5>
                            </div>
                        </div>

                    </div>
                </div>
            @endif

            @if ($item->ASIGNADOS === 'OTROS')
                <div class="col-lg-2">
                    <div class="widget style1 lazur-bg">
                        <div class="row vertical-align">
                            <div class="col-3">
                                <i class="fa fa-circle-o-notch fa-3x"></i>

                            </div>
                            <div class="col-9 text-right">
                                <h6>{{ $item->ASIGNADOS }}</h6>
                                <h5 style="font-weight: bold;">{{ $item->CANTIDAD }}</h5>
                            </div>
                        </div>

                    </div>
                </div>
            @endif

            @if ($item->ASIGNADOS === 'VEHICULOS')
                <div class="col-lg-2">
                    <div class="widget style1 navy-bg">
                        <div class="row vertical-align">
                            <div class="col-3">
                                <i class="fa fa-truck fa-3x"></i>

                            </div>
                            <div class="col-9 text-right">
                                <h6>{{ $item->ASIGNADOS }}</h6>
                                <h5 style="font-weight: bold;">{{ $item->CANTIDAD }}</h5>
                            </div>
                        </div>

                    </div>
                </div>
            @endif
        @endforeach

    </div>
    <div class="wrapper wrapper-content animated fadeInRight">

        @foreach ($arraychofer as $i)
            <div class="ibox">
                <div class="ibox-content">
                    <div class="row border-bottom">
                        <div class="col-2">
                        @if(is_array($i['nombre']) || is_object($i['nombre']))
                            @foreach ($i['nombre'] as $itemchofer)
                                <i class="fa fa-user text-navy"></i>
                                <span class="nav-label">{{ $itemchofer->nombre }}</span>
                                <h5><i class="fa fa-map-marker"></i> {{ $itemchofer->nom_agencia }}</h5>
                            @endforeach
                        @else
                        <i class="fa fa-user text-navy"></i>
                                <span class="nav-label">{{ $i['nombre'] }}</span>
                                <h5><i class="fa fa-map-marker"></i> {{ $i['nom_agencia'] }}</h5>
                        @endif
                        </div>
                        <div class="col-2">
                        @if(is_array($i['patente']))
                            @foreach ($i['patente'] as $itempatente)
                                <span class="nav-label"><i class="fa fa-truck"></i> PATENTE: {{ $itempatente->patente  }}</span>
                            @endforeach
                        @else
                        <span class="nav-label"><i class="fa fa-truck"></i> PATENTE: {{ $i['patente']  }}</span>
                        @endif
                        </div>
                        <div class="col-2">
                            @if(is_array($i['inicioruta']))
                            @foreach ($i['inicioruta'] as $iteminicioruta)
                                <span class="nav-label"><i class="fa fa-flag"></i> INICIO: {{ $iteminicioruta->inicioruta  }}</span>
                            @endforeach
                            @else
                            <span class="nav-label"><i class="fa fa-flag"></i> INICIO: {{ $i['inicioruta']  }}</span>
                        @endif

                        </div>
                        <div class="col-3">
                            <div class="text-left">
                                <a href="" class="btn btn-xs btn-warning"><i class="fa fa-truck"></i>
                                    {{ $i['asignadas'] }} Asignadas </a>
                                <a href="" class="btn btn-xs btn-primary"><i class="fa fa-cubes"></i>
                                    {{ $i['gestionadas'] }} Gestionadas</a>
                            </div>

                        </div>
                        <div class="col-7">
                            <div class="text-right">

                                <small>Cumplimiento:
                                    @foreach ($i['rutas'] as $item)
                                        {{ $item->CUMPLIMIENTO }}
                                    @break
                                @endforeach
                            </small>

                            <div class="progress progress-mini">

                                <div @foreach ($i['rutas'] as $item)
                                   style=" width:{{ str_replace(' ', '', $item->CUMPLIMIENTO) }};"
                                    @break @endforeach
                                    class="progress-bar">
                                </div>
                            </div>

                        </div>

                    </div>
                </div>

                <div class="row">
                    <div class="col-3">
                        <div style="padding-left: 15px;">
                            <div>
                                <small>Entregadas:
                                    @foreach ($i['rutas'] as $item)
                                        {{ $item->ENTREGADAS }}
                                    @break
                                @endforeach

                            </small>
                            <div class="progress progress-mini">
                                <div style="width: {{ $i['entregados'] }}%;" class="progress-bar"></div>
                            </div>
                        </div>
                        <!--<div>
                        <small>Parciales: {{ $i['parcial'] }}%</small>
                        <div class="progress progress-mini">
                            <div style="width: %;"
                                class="progress-bar progress-bar-success">
                            </div>
                        </div>

                    </div>-->
                        <div>
                            <small>No Entregadas:
                                @foreach ($i['rutas'] as $item)
                                    {{ $item->NO_ENTREGADAS }}
                                @break
                            @endforeach
                        </small>
                        <div class="progress progress-mini ">
                            <div style="width: {{ $i['noentregados'] }}%;"
                                class="progress-bar progress-bar-danger"></div>
                        </div>
                    </div>
                    <div>
                        <small>Estado:
                            @foreach ($i['rutas'] as $item)
                                {{ $item->RUTA }}
                            @break
                        @endforeach
                    </small>

                </div>
            </div>

        </div>
        <div class="col-9">
            <div class="card">
                <div class="hori-timeline" dir="ltr">
                    <ul class="list-inline events">
                        <li class="list-inline-item event-list">
                            <div class="px-2">
                                <div class="event-date3 bg-soft-warning text-primary">
                                    {{ date('H:i', strtotime($i['fechamin'])) }}
                                </div>
                            </div>
                        </li>

                        @foreach ($i['rutas'] as $item)
                                <li class="list-inline-item event-list">
                                    <div class="px-2">

                                        @if ($item->ESTADO == 0)
                                            <div onclick="ver({{ $i['cod_chofer'] }},{{ $item->N_ORDEN }})"
                                                class="event-date bg-soft-success text-primary"
                                                data-toggle="tooltip" data-placement="top"
                                                data-html="true" title
                                                data-original-title="{{ date('H:i', strtotime($item->FECHA)) }} <br> OS: {{ $item->N_ORDEN }}">
                                                &nbsp;
                                            </div>
                                        @elseif ($item->ESTADO == 4)
                                            <div onclick="ver({{ $i['cod_chofer'] }},{{ $item->N_ORDEN }})"
                                                class="event-date bg-soft-primary text-primary"
                                                data-toggle="tooltip" data-placement="top"
                                                data-html="true" title
                                                data-original-title="{{ date('H:i', strtotime($item->FECHA)) }} <br> OS: {{ $item->N_ORDEN }}">
                                                &nbsp;
                                            </div>
                                        @elseif ($item->ESTADO == 3)
    <div onclick="ver({{ $i['cod_chofer'] }},{{ $item->N_ORDEN }})"
        class="event-date bg-secondary text-primary"
        data-toggle="tooltip" data-placement="bottom"
        data-html="true" title
        data-original-title="{{ date('H:i', strtotime($item->FECHA)) }} <br> OS: {{ $item->N_ORDEN }}">    
        <i class="fa-circle-o" style="color: grey;"></i>    
</div>
                                        @else
                                            <div onclick="ver({{ $i['cod_chofer'] }},{{ $item->N_ORDEN }})"
                                                class="event-date2 bg-soft-danger text-primary"
                                                data-toggle="tooltip" data-placement="bottom"
                                                data-html="true" title
                                                data-original-title="{{ date('H:i', strtotime($item->FECHA)) }} <br> OS: {{ $item->N_ORDEN }}">
                                                &nbsp;
                                            </div>
@endif
</div>
</li>


                        @endforeach

                        <li class="list-inline-item event-list">
                            <div class="px-2">
                                <div class="event-date4 bg-soft-warning text-primary">
                                    {{ date('H:i', strtotime($i['fechamax'])) }}
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</div>
</div>




<div class="row">
<div class="col-lg-12">
    <div class="ibox collapsed">
        <div class="ibox-title">
            <h5>Detalle</h5>
            <div class="ibox-tools">
                <a class="collapse-link">
                    <i class="fa fa-chevron-up"></i>
                </a>
            </div>
        </div>
        <div class="ibox-content detalle" id="{{ $i['cod_chofer'] }}" style="display: none;">
            <div class="row">
                <div class="col-6">
                    <div class="scroll_content" id="scroll{{ $i['cod_chofer'] }}">
                        @foreach ($i['rutas'] as $item)
                            <div class="timeline-item">
                                <div class="row">
                                    <div class="col-3 date">
                                        <i class="fa fa-file-text"></i>
                                        {{ $item->HORA }}
                                        <br>
                                        @if ($item->ESTADO == 0)
                                            <span id="{{ $item->N_ORDEN }}"
                                                class=" float-right label label-primary">
                                                <a href="{{ route('asignaciones.show', $item->ULTIMA_ASIGNACION) }}"
                                                    rel="tooltip" title="Click para ver"
                                                    class=" float-right label label-primary">
                                                    {{ $item->N_ORDEN }}
                                                </a>
                                            </span>
                                        @elseif($item->ESTADO == 3)
                                            <span id="{{ $item->N_ORDEN }}"
                                                class=" float-right label label-warning">
                                                <a href="{{ route('asignaciones.show', $item->ULTIMA_ASIGNACION) }}"
                                                    rel="tooltip" title="Click para ver"
                                                    class=" float-right label label-warning">
                                                    {{ $item->N_ORDEN }}
                                                </a>
                                            </span>
                                        @elseif($item->ESTADO == 1)
                                            <span id="{{ $item->N_ORDEN }}"
                                                class=" float-right label label-danger">
                                                <a href="{{ route('asignaciones.show', $item->ULTIMA_ASIGNACION) }}"
                                                    rel="tooltip" title="Click para ver"
                                                    class=" float-right label label-danger">
                                                    {{ $item->N_ORDEN }}
                                                </a>
                                            </span>
                                        @else
                                            <span id="{{ $item->N_ORDEN }}"
                                                class=" float-right label label-info">

                                                <a href="{{ route('asignaciones.show', $item->ULTIMA_ASIGNACION) }}"
                                                    rel="tooltip" title="Click para ver"
                                                    class=" float-right label label-info">
                                                    {{ $item->N_ORDEN }}
                                                </a>

                                            </span>
                                        @endif


                                    </div>
                                    <div class="col-7 content">
                                        <p class="m-b-xs">
                                            <strong>
                                                {{ $item->CLIENTE }}</strong>
                                        </p>
                                        <p>
                                            {{ $item->SUB_ESTADO }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="col-6">
                    <div class="google-map" id="map{{ $i['cod_chofer'] }}"
                        style="position: relative; overflow: hidden;">
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>


</div>
@endforeach




@endsection

@section('javascript')

<!-- style -->

<style>
.hori-timeline .events {
border-top: 2px solid #e9ecef;
}

.hori-timeline .events .event-list {
display: block;
position: relative;
text-align: center;
padding-top: 70px;
margin-right: 0;

}

.hori-timeline .events .event-list:before {
content: "";
position: absolute;
height: 16px;
border-right: 1px dashed #dee2e6;
top: 0;
}

.hori-timeline .events .event-list .event-date {
position: absolute;
top: 38px;
left: 0;
right: 0;
width: 20px;
margin: 0 auto;
border-radius: 18px;
padding: 2px 4px;
}

.hori-timeline .events .event-list .event-date2 {
position: absolute;
top: 38px;
left: 0;
right: 0;
width: 20px;
margin: 0 auto;
border-radius: 18px;
padding: 2px 4px;
}

.hori-timeline .events .event-list .event-date3 {
position: absolute;
top: 38px;
left: 50;
right: 0;
width: 45px;
margin: 0 auto;
border-radius: 18px;
padding: 2px 4px;
}

.hori-timeline .events .event-list .event-date4 {
position: absolute;
top: 38px;
left: 0;
right: 40;
width: 45px;
margin: 0 auto;
border-radius: 18px;
padding: 2px 4px;
}

@media (min-width: 1140px) {

.hori-timeline .events .event-list {
    display: inline-block;
    width: 2%;
    padding-top: 45px;
}

.hori-timeline .events .event-list .event-date {
    top: -40px;
}

.hori-timeline .events .event-list .event-date2 {
    top: 20px;
}

.hori-timeline .events .event-list .event-date3 {
    top: -12px;
}

.hori-timeline .events .event-list .event-date4 {
    top: -12px;
}

}

.bg-soft-primary {
background-color: rgba(35, 198, 200, 1) !important;
}

.bg-soft-success {
/*background-color: rgba(71, 189, 154, .3) !important;*/
background-color: #1ab394 !important;
}

.bg-soft-danger {
/*background-color: rgba(231, 76, 94, .3) !important;*/
background-color: #ed5565 !important;
}

.bg-soft-warning {
background-color: rgba(249, 213, 112, .3) !important;
}


.card {
padding-top: 50px;
padding-left: 15px;
border: none;
margin-bottom: 20px;
-webkit-box-shadow: 0 0 13px 0 rgba(236, 236, 241, .44);
box-shadow: 0 0 13px 0 rgba(236, 236, 241, .44);

}

.my-custom-class-for-label {
width: 50px;
height: 20px;

border: 1px solid #eb3a44;
border-radius: 5px;
background: #fee1d7;
text-align: center;
line-height: 20px;
font-weight: bold;
font-size: 14px;
color: #eb3a44;
}
</style>

<!-- fin css -->



<script>
    $('#exportarexcel').on('click', function() {
        var agencia = $("#cod_agencia").val();
        var fecha = $("#fecha").val();

        if (agencia == '') {
            swal({
                title: "Atención",
                text: " Selecciona una agencia para generar el reporte en Excel"
            });
            return false;
        }

        if (fecha == '') {
            swal({
                title: "Atención",
                text: " Selecciona una fecha para generar el reporte en Excel"
            });
            return false;
        }

        fecha = fecha.replaceAll("/", "-");
        frm.action = "detallereporteexcelruta/" + agencia + "/" + fecha;
        frm.method = "GET";
        frm.submit();

    });

    function ver(chofer, os) {

        $(".detalle").css("display", "none");
        $("#" + chofer).css("display", "block");
        $('html, body').stop().animate({
            scrollTop: jQuery('#' + os).offset().top
        }, 2000);

        $('#scroll' + chofer).slimScroll({
            alwaysVisible: true,
            start: $('#' + os)
        });

        return false;


    }
    $(function() {
        $('[data-toggle="tooltip"]').tooltip();
        /* $('.scroll_content').slimscroll();*/

    })

    let rutas = '';
    let macc = '';
    let markers = [];

    @foreach ($arraychofer as $i)

        var map{{ $i['cod_chofer'] }};
    @endforeach

    const crearMarker = (coord, name, map) => {

        let marker = new google.maps.Marker({
            position: coord,
            map: map,
            title: name,
            icon: '{{ asset('inspinia/img/markermap/markermap.png') }}'
        })

        markers.push(marker);
    }


    function createSvgIcon(color, text, id) {

        //svgString ='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="76" height="77" viewBox="0 0 76 77"> <defs> <filter id="Rectangle_283" x="6.5" y="0" width="61" height="61" filterUnits="userSpaceOnUse"> <feOffset dy="4" input="SourceAlpha"/> <feGaussianBlur stdDeviation="1.5" result="blur"/> <feFlood flood-opacity="0.161"/> <feComposite operator="in" in2="blur"/> <feComposite in="SourceGraphic"/> </filter> <filter id="Polygon_39" x="19.5" y="51" width="36" height="26" filterUnits="userSpaceOnUse"> <feOffset dy="4" input="SourceAlpha"/> <feGaussianBlur stdDeviation="1.5" result="blur-2"/> <feFlood flood-opacity="0.161"/> <feComposite operator="in" in2="blur-2"/> <feComposite in="SourceGraphic"/> </filter> </defs> <g id="Group_418" data-name="Group 418" transform="translate(0 0.641)"> <ellipse id="Ellipse_46" data-name="Ellipse 46" cx="38" cy="7" rx="38" ry="7" transform="translate(0 61.859)" fill="#129400"/> <g transform="matrix(1, 0, 0, 1, 0, -0.64)" filter="url(#Rectangle_283)"> <rect id="Rectangle_283-2" data-name="Rectangle 283" width="52" height="52" rx="2" transform="translate(11 0.5)" fill="#129400"/> </g> <g transform="matrix(1, 0, 0, 1, 0, -0.64)" filter="url(#Polygon_39)"> <path id="Polygon_39-2" data-name="Polygon 39" d="M13.5,0,27,17H0Z" transform="translate(51 68.5) rotate(180)" fill="#129400"/> </g> <text id="_2" data-name="2" transform="translate(20 36.859)" fill="#fff" font-size="31" font-family="HelveticaNeueCyr-Roman, HelveticaNeueCyr"><tspan x="0" y="0">'+ rutas[i]['N'] +'</tspan></text> </g></svg>';


        var svgnew = '<svg id="mk_' + id +
            '" width="32px" height="43px"  viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
            '<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M 10.453 14.016 z M 12 2.016 q 2.906 0 4.945 2.039 t 2.039 4.945 q 0 1.453 -0.727 3.328 t -1.758 3.516 t -2.039 3.07 t -1.711 2.273 l -0.75 0.797 q -0.281 -0.328 -0.75 -0.867 t -1.688 -2.156 t -2.133 -3.141 t -1.664 -3.445 t -0.75 -3.375 q 0 -2.906 2.039 -4.945 t 4.945 -2.039 z"/>' +
            '<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>' +
            '<text x="16" y="20" id="TXT_' + id + '"" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' +
            text + '</text>' +
            '</svg>';


        return svgnew;
    };

    const createLocationMarkers = (rutas, map) => {

        var svgAmarrillo =
            '<svg width="91px" height="91px" viewBox="-4 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" stroke="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>map-marker</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="Vivid.JS" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Vivid-Icons" transform="translate(-125.000000, -643.000000)"> <g id="Icons" transform="translate(37.000000, 169.000000)"> <g id="map-marker" transform="translate(78.000000, 468.000000)"> <g transform="translate(10.000000, 6.000000)"> <path d="M14,0 C21.732,0 28,5.641 28,12.6 C28,23.963 14,36 14,36 C14,36 0,24.064 0,12.6 C0,5.641 6.268,0 14,0 Z" id="Shape" fill="#f8ac59"> </path> <circle id="Oval" fill="#0C0058" fill-rule="nonzero" cx="14" cy="14" r="7"> </circle> </g> </g> </g> </g> </g> </g></svg>';
        var svgVerde =
            '<svg width="81px" height="81px" viewBox="-4 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>map-marker</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="Vivid.JS" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Vivid-Icons" transform="translate(-125.000000, -643.000000)"> <g id="Icons" transform="translate(37.000000, 169.000000)"> <g id="map-marker" transform="translate(78.000000, 468.000000)"> <g transform="translate(10.000000, 6.000000)"> <path d="M14,0 C21.732,0 28,5.641 28,12.6 C28,23.963 14,36 14,36 C14,36 0,24.064 0,12.6 C0,5.641 6.268,0 14,0 Z" id="Shape" fill="#1ab394"> </path> <circle id="Oval" fill="#0C0058" fill-rule="nonzero" cx="14" cy="14" r="7"> </circle> </g> </g> </g> </g> </g> </g></svg>';
        var svgRojo =
            '<svg width="91px" height="91px" viewBox="-4 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" stroke="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>map-marker</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="Vivid.JS" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Vivid-Icons" transform="translate(-125.000000, -643.000000)"> <g id="Icons" transform="translate(37.000000, 169.000000)"> <g id="map-marker" transform="translate(78.000000, 468.000000)"> <g transform="translate(10.000000, 6.000000)"> <path d="M14,0 C21.732,0 28,5.641 28,12.6 C28,23.963 14,36 14,36 C14,36 0,24.064 0,12.6 C0,5.641 6.268,0 14,0 Z" id="Shape" fill="#ec4758"> </path> <circle id="Oval" fill="#0C0058" fill-rule="nonzero" cx="14" cy="14" r="7"> </circle> </g> </g> </g> </g> </g> </g></svg>';
        const svgMarker = {
            path: "M18.6765 11.4545V18H17.2927V12.7681H17.2543L15.7554 13.7077V12.4805L17.3758 11.4545H18.6765Z",
            fillColor: "#FF6E6E",
            fillOpacity: 0.6,
            strokeWeight: 0,
            rotation: 0,
            scale: 2,
            title: 'Hola',
            anchor: new google.maps.Point(15, 30),
        };

        const svgMarker2 = {
            path: "M 10.453 14.016 z M 12 2.016 q 2.906 0 4.945 2.039 t 2.039 4.945 q 0 1.453 -0.727 3.328 t -1.758 3.516 t -2.039 3.07 t -1.711 2.273 l -0.75 0.797 q -0.281 -0.328 -0.75 -0.867 t -1.688 -2.156 t -2.133 -3.141 t -1.664 -3.445 t -0.75 -3.375 q 0 -2.906 2.039 -4.945 t 4.945 -2.039 z",
            fillColor: "#787878",
            fillOpacity: 1,
            strokeWeight: 1,
            rotation: 0,
            scale: 2,
            anchor: new google.maps.Point(15, 30),
            //scaledSize: new google.maps.Size(80, 80),
            //origin: new google.maps.Point(0, 0),
            //labelOrigin: new google.maps.Point(40,33)
        };


        var markerIcon = {
            url: 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svgVerde),
            //url: 'https://www.svgrepo.com/show/302636/map-marker.svg',
            scaledSize: new google.maps.Size(50, 50),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(32, 65)
        };

        var markerIconAmarillo = {
            url: 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svgAmarrillo),
            //url: 'https://www.svgrepo.com/show/302636/map-marker.svg',
            scaledSize: new google.maps.Size(50, 50),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(32, 65)
        };

        var markerIconRojo = {
            url: 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(svgRojo),
            //url: 'https://www.svgrepo.com/show/302636/map-marker.svg',
            scaledSize: new google.maps.Size(50, 50),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(32, 65)
        };





        for (let i in rutas) {


            //let coord = new google.maps.LatLng(rutas[i]['Y'], rutas[i]['X']);
            let name = rutas[i]['N_ORDEN'];
            /*crearMarker(coord, name, map);*/
            const coord = {
                lat: parseFloat(rutas[i]['Y']),
                lng: parseFloat(rutas[i]['X'])
            };

            if (rutas[i]['ESTADO'] == 1) {

                new google.maps.Marker({
                    position: coord,
                    //icon: '{{ asset('inspinia/img/markermap/map-marker-') }}' + rutas[i]['N'] + '.png',
                    map: map,
                    icon: markerIconRojo,
                    label: {
                        text: "" + rutas[i]['N'] + "",
                        color: "#ffffff",
                        fontSize: "16px",
                        fontWeight: "bold"
                    },
                    title: "" + name + "",
                    labelClass: "my-custom-class-for-label", // your desired CSS class
                    labelInBackground: true,




                });

            } else if (rutas[i]['ESTADO'] == 3) {

                new google.maps.Marker({
                    position: coord,
                    icon: markerIconAmarillo,
                    label: {
                        text: "" + rutas[i]['N'] + "",
                        color: "#ffffff",
                        fontSize: "16px",
                        fontWeight: "bold"
                    },
                    title: "" + name + "",
                    //icon: { url: 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(createSvgIcon("#787878", rutas[i]['N'], rutas[i]['N']) )},
                    //scaledSize: new google.maps.Size(20, 20) },
                    //optimized: false,
                    map: map,
                });

            } else {

                new google.maps.Marker({
                    position: coord,
                    icon: markerIcon,
                    label: {
                        text: "" + rutas[i]['N'] + "",
                        color: "#ffffff",
                        fontSize: "16px",
                        fontWeight: "bold"
                    },
                    title: "" + name + "",
                    labelClass: "my-custom-class-for-label", // your desired CSS class
                    labelInBackground: true,
                    //icon: { url: 'data:image/svg+xml;charset=UTF-8;base64,' + btoa(createSvgIcon("#787878", rutas[i]['N'], rutas[i]['N']) )},
                    //scaledSize: new google.maps.Size(20, 20) },
                    //optimized: false,
                    map: map,
                });

            }

            /* marker.setMap(map);*/

        }
    }

    function initMap() {


        var macc = {

            lat: 0,
            lng: 0

        };



        @foreach ($arraychofer as $i)

            var macc = {

                lat: @if ($i['lat'] != '')
                    {{ $i['lat'] }}
                @else
                    0
                @endif ,
                lng: @if ($i['lng'] != '')
                    {{ $i['lng'] }}
                @else
                    0
                @endif




            };

            const map{{ $i['cod_chofer'] }} = new google.maps.Map(
                document.getElementById('map{{ $i['cod_chofer'] }}'), {
                    zoom: 10,
                    center: macc,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });
            rutas = @json($i['rutas']);
            createLocationMarkers(rutas, map{{ $i['cod_chofer'] }});
        @endforeach




    }

    window.initMap = initMap;
</script>


// AIzaSyAONsqodcvDkZqZvPpDcauTeAK668tsR0w
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBmcJrUbCnVTxHt6NkgiGDNfDlOOGK_rTw&callback=initMap"></script>
<script>
    $(document).ready(function() {

        $('#fecha').datepicker({
            minDate: 0,
            endDate: new Date(),
            //startDate: '1d',
            keyboardNavigation: false,
            forceParse: false,
            autoclose: true,
            language: 'es'
        });

        $('#fechafin').datepicker({
            minDate: 0,
            startDate: '1d',
            keyboardNavigation: false,
            forceParse: false,
            autoclose: true,
            language: 'es'
        });

        // Add slimscroll to element
        $('.scroll_content').slimscroll({
            height: '200px'
        })

    });
</script>

@endsection