@extends('layouts/contentLayoutMaster')

@section('title', 'Reporte de Cheques y Dinero')

@section('vendor-style')
    <!-- vendor css files -->
    <link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>
    <link rel="stylesheet" href="{{asset('vendors/css/pickers/flatpickr/flatpickr.min.css')}}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/charts/apexcharts.css')) }}">
@endsection
@section('page-style')

    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/charts/chart-apex.css')) }}">
@endsection

@section('content')
    <!-- Dashboard Analytics Start -->
    <section id="dashboard-analytics">
        <div class="card">
            <div class="card-body p-1">
                <div class="text-center">
                    <h3>Reporte de Rutas</h3>
                </div>
                <form class="row" id="filters">
                    <div class="col-6 col-md-3 col-xl-1 pt-1">

                        <input id="desde" type="text" name="date_start"
                               class="text-center ml-1 form-control filter-date form-control-sm date-picker flatpickr-input col"
                               value="{{$date_start}}">

                    </div>
                    <div class="col-6 col-md-3 col-xl-1 pt-1">

                        <input id="hasta" type="text" name="date_end"
                               class="text-center ml-1 form-control filter-date form-control-sm date-picker flatpickr-input col"
                               value="{{$date_end}}">
                    </div>
                    <div class="col-6 col-md-3 col-xl-1 pt-1">
                        <select class="select2 select2-size-sm form-control form-control-sm" name="tipo"
                                onchange="query()">

                            <option value="*" {{$filters['tipo']??'selected'}}>TODOS</option>
                            <option value="VENTA" {{$filters['tipo']=='VENTA'?'selected':''}}>VENTAS</option>
                            <option value="RECAUDACION" {{$filters['tipo']=='RECAUDACION'?'selected':''}}>
                                RECAUDACIONES
                            </option>


                        </select>


                    </div>

                    @if($seccionUser->essupervisor)
                        <div class="col-md-4 mb-1">
                            <select class="select2 select2-size-sm form-control form-control-sm" name="salesmans[]"
                                    multiple>
                                @foreach($salesmans as $salesman)
                                    <option
                                        value="{{$salesman->id}}" {{in_array($salesman->id,$filters['salesmans'])?'selected':''}}>{{$salesman->name}}</option>
                                @endforeach

                            </select>


                        </div>
                    @endif


                    <div class="col-md-1 text-center pt-1">
                        <button class="btn btn-sm btn-success" type="submit">Cargar</button>
                    </div>
                </form>


                <section id="basic-datatable" class="mt-1">

                    <div id="charts">
                        <div class="row">
                            @if(isset($cards))
                                @foreach($cards as $card)
                                    <div class="col-lg-3 col-sm-6 col-12">
                                        <div class="card border-secondary">
                                            <div class="card-header">
                                                <div>
                                                    <h2 class="font-weight-bolder mb-0">{{$card['value']??''}}</h2>
                                                    <p class="card-text">{{$card['title']??''}}</p>
                                                </div>
                                                <div class="avatar bg-light-{{$card['color']??'primary'}} p-50 m-0">
                                                    <div class="avatar-content">
                                                        <i data-feather="{{$card['icon']??'alert-octagon'}}"
                                                           class="font-medium-5"></i>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div id="spline"></div>
                            </div>

                        </div>
                    </div>


                    <div id="map" style="height: 600px"></div>


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


    </section>
    <!-- Dashboard Analytics end -->
@endsection

@section('vendor-script')
    <!-- vendor files -->
    <script src="{{asset('vendors/js/pickers/flatpickr/flatpickr.min.js')}}"></script>
    <script src="{{asset('vendors/js/pickers/flatpickr/es.js')}}"></script>




    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
    <script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.0.5/jspdf.plugin.autotable.js"></script>

    <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/charts/apexcharts.min.js')) }}"></script>

@endsection
@section('page-script')
    <script>
        flatpickr.localize(flatpickr.l10ns.es);
        let formFilter = document.getElementById("filters");

        let date = new Date();
        let filterDate = $(".filter-date").flatpickr({
            dateFormat: "Y-m-d",

            onChange: () => {
                query();
            }
        });


        function query() {
            $("#filters").submit();
        }

        let map = null;

        let markers = [];

        function initMap() {
            map = new google.maps.Map(document.getElementById("map"), {
                zoom: 15,
                styles: [
                    {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
                    {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
                    {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
                    {
                        featureType: 'administrative.locality',
                        elementType: 'labels.text.fill',
                        stylers: [{color: '#d59563'}]
                    },
                    {
                        featureType: 'poi',
                        elementType: 'labels.text.fill',
                        stylers: [{color: '#d59563'}]
                    },
                    {
                        featureType: 'poi.park',
                        elementType: 'geometry',
                        stylers: [{color: '#263c3f'}]
                    },
                    {
                        featureType: 'poi.park',
                        elementType: 'labels.text.fill',
                        stylers: [{color: '#6b9a76'}]
                    },
                    {
                        featureType: 'road',
                        elementType: 'geometry',
                        stylers: [{color: '#38414e'}]
                    },
                    {
                        featureType: 'road',
                        elementType: 'geometry.stroke',
                        stylers: [{color: '#212a37'}]
                    },
                    {
                        featureType: 'road',
                        elementType: 'labels.text.fill',
                        stylers: [{color: '#9ca5b3'}]
                    },
                    {
                        featureType: 'road.highway',
                        elementType: 'geometry',
                        stylers: [{color: '#746855'}]
                    },
                    {
                        featureType: 'road.highway',
                        elementType: 'geometry.stroke',
                        stylers: [{color: '#1f2835'}]
                    },
                    {
                        featureType: 'road.highway',
                        elementType: 'labels.text.fill',
                        stylers: [{color: '#f3d19c'}]
                    },
                    {
                        featureType: 'transit',
                        elementType: 'geometry',
                        stylers: [{color: '#2f3948'}]
                    },
                    {
                        featureType: 'transit.station',
                        elementType: 'labels.text.fill',
                        stylers: [{color: '#d59563'}]
                    },
                    {
                        featureType: 'water',
                        elementType: 'geometry',
                        stylers: [{color: '#17263c'}]
                    },
                    {
                        featureType: 'water',
                        elementType: 'labels.text.fill',
                        stylers: [{color: '#515c6d'}]
                    },
                    {
                        featureType: 'water',
                        elementType: 'labels.text.stroke',
                        stylers: [{color: '#17263c'}]
                    }
                ],
                center: {lat: {{$initialPosition[0]}}, lng: {{$initialPosition[1]}}}
            });
                        @foreach($registrosXVendedorGPS as $idSalesman=>$registros)

            @foreach($registros as $key=>$row)
            @php
            $idMarker++;
            @endphp
            let marker{{$idMarker}} = new google.maps.Marker({
                position: {lat: {{$row[0]->latitude}}, lng: {{$row[0]->longitude}}},
                map,
                title: "",
                @if($row[0]->tipo!=='VENTAS')
                icon: "{{asset('images/marker1.png')}}",
                @endif
            });

            google.maps.event.addListener(marker{{$idMarker}}, 'click', function () {
                (new google.maps.InfoWindow({
                    content:
                        @foreach($row as $transaction)
                            "<div><b> {{ $transaction->tipo}}</b></div> " +
                        "<div><b> Nro. </b>{{ $transaction->nroTr}}</div> " +
                        "<div><b>Cliente: </b>{{$transaction->customer_name}}</div>" +
                        "<div><b>Total: </b>{{$transaction->total_mostrar}}</div>" +
                        "<div><b>Fecha: </b>{{$transaction->tini}}</div>"+
                    @endforeach
                    ""
                })).open(map, marker{{$idMarker}});
            });
            @endforeach


            @if(isset($polylines[$idSalesman]))
            @foreach($polylines[$idSalesman] as $polyline)
            new google.maps.Polyline({
                path: {!! json_encode($polyline) !!},
                icons: [
                    {
                        icon: {
                            path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                        },
                        offset: "100%",
                    },
                ],
                map: map,
                strokeColor: '{{$colorsShow[$idSalesman]}}',
                strokeOpacity: 1.0,
                strokeWeight: 2
            });
            @endforeach
            @endif

            @endforeach


        }


    </script>

    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDx7eGwfUe3O6QPnDCZS3un2R7uQeQcqss&callback=initMap"></script>
    <script src="{{ asset(mix('js/scripts/forms/form-select2.js')) }}"></script>


@endsection