@extends('layouts.app')

@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-12 col-lg-12">

                <label for="numTrabajoR">Número de trabajo</label>
                <input type="text" id="numTrabajoR" class="form-control" name="numTrabajoR"
                    value="{{ @old('numTrabajoR') }}" />

                <button type="text" style="margin-top:20px" onclick="busquedaTrabajos(event)" id="btnFiterSubmitSearchHoy"
                    name="btnFiterSubmitSearchHoy" class="btn btn-info margen" title="Búscar">
                    <i class="fas fa-search"></i> BUSCAR
                </button>
                <hr>

                <table class="table table-bordered reponsive table-d">
                    <thead>
                        <tr>
                            <th>
                                <h5 class="title">Número de orden</h5>
                            </th>
                            <th class="subtitlefondo" style="background-color: rgb(242, 246, 250);">
                                <h6 class="subtitle">Inmueble</h6>
                            </th>
                            <th class="subtitleBlack">
                                Subtotal
                            </th>
                            <th class="subtitleBlack">
                                Iva
                            </th>
                            <th class="subtitleBlack">
                                Total
                            </th>
                            <th class="subtitleBlack">
                                Capturista
                            </th>
                            <th class="subtitleBlack">
                                Fecha
                            </th>
                            <th class="subtitleBlack">
                                Estatus de cobro
                            </th>
                            <th class="subtitleBlack">
                                Salidas de almacen
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <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">

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

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

        .container-mio {
            padding-left: 50px;
            padding-right: 50px;
        }

        .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);
        }
    </style>
@endpush

@push('scripts')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.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>
        $(function() {
            var table = $('.table-d').DataTable({
                /*fnCreatedRow: function( rowEL, data){
                     $(rowEL).attr('id', data['IdEmpleado']);
                },*/
                searching: false,
                processing: true,
                serverSide: true,
                "ajax": {
                    "url": "{{ route('convenio.info') }}",
                    "type": "GET",
                    "dataSrc": "data",
                },
                "columns": [{
                        data: 'idTrabajoAp',
                        name: 'idTrabajoAp'
                    },
                    {
                        data: 'inmueble',
                        name: 'inmueble'
                    },
                    {
                        data: 'subtotal',
                        name: 'subtotal'
                    },
                    {
                        data: 'iva',
                        name: 'iva',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'total',
                        name: 'total',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'nombre',
                        name: 'nombre',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'updated_at',
                        name: 'updated_at',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'idEstatusCobro',
                        name: 'idEstatusCobro',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'salidas',
                        name: 'salidas',
                        orderable: false,
                        searchable: false
                    },

                ]
            });


        });
    </script>

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





            initMap();

            function initMap() {

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

                const map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 14,
                    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,
                });

            }
        });




        window.axios.get('/siat/public/api/operadores')
            .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: '30%'
                        },
                        hAxis: {
                            title: 'Total de trabajos pendientes',
                            minValue: 0
                        },
                        'fontSize': 10,
                        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 busquedaTrabajos = async (event, op) => {
            event.preventDefault();

            //console.log(op);

            let payload = {
                operador: op
            };

            // const params = new url.URLSearchParams(payload);

            //let res = await axios.get(`http://httpbin.org/get?${params}`);

            window.axios.get(`/siat/public/api/ordenesTerminadas/${op}`)
                .then((response) => {
                    for (var ordenes of response.data) {
                        console.log(ordenes.terminadas);
                        $("#pnumber").val(ordenes.terminadas);
                    }
                });

            $.ajax({
                url: "{{ route('getCoordenadas') }}",
                type: 'get',
                data: {
                    idEmpleado: op
                },
                dataType: 'json',
                success: function(response) {

                    console.log(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.7636718,
                                lng: -102.606128
                            },
                            zoom: 14,
                            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">' +
                                    '<img style="width:32px" class="card-img-top img-fluid1" src="{{ asset('images/ic_desc_agua.png') }}" alt="Card image cap">' +
                                    '<div class="card-body1">' +
                                    '<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/>' +
                                    '<button onclick="busquedaTrabajos(event)" class="btn btn-info margen" title="Asignar"> <i class="fas fa-search"></i></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++;
                            });

                        }

                    }

                }

            });

            console.log("voy a mostrar las rutas" + op);

        };
    </script>  --}}

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