@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-9 col-lg-9">
                <div class="row">
                    <div class="col-md-4 col-lg-4">
                        <input type="date" class="form-control datepicker" name="fechaInicio" id="fechaInicio"
                            value="{{ @old('fechaInicio') }}">
                    </div>
                    <div class="col-md-4 col-lg-4">
                        <input type="date" class="form-control datepicker" name="fechaFinal" id="fechaFinal"
                            value="{{ @old('fechaFinal') }}">
                    </div>
                    <div class="col-md-4 col-lg-4">
                        <button style="width: 35px;height: 35px; background-image: url({{ asset('imagenes/excel.png') }});"
                            id="btnPrintExcel" onclick="imprimir(event,'xlsx')" name="btnPrintExcel" class="btn margen"
                            title="Informe Global"></button>

                        <button style="width: 35px;height: 35px; background-image: url({{ asset('imagenes/pdf.png') }});"
                            id="btnPrintPDF" onclick="imprimir(event,'pdf')" name="btnPrintPDF" class="btn margen"
                            title="Informe Global"></button>
                    </div>
                </div>
                <div id="map" style="width:100%;height:800px"></div>
            </div>
            <div class="mt-3 col-md-3 col-lg-3">
                <div class="row">
                    <div class="mt-12 col-md-12 col-lg-12">
                        <div class="card">
                            <div class="card-body table-responsive altoTabla">
                                <table class="table table-borderless reponsive" id="table">
                                    <thead>
                                        <tr>
                                            <th>
                                                <h5 class="title">Tanque</h5>
                                            </th>
                                            <th class="subtitlefondo" style="background-color: rgb(242, 246, 250);">
                                                <h6 class="subtitle">Punto de toma</h6>
                                            </th>
                                            <th class="subtitleBlack">
                                                Presion
                                            </th>
                                            <th class="subtitleBlack">
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="mt-12 col-md-12 col-lg-12" style="margin-top:20px">
                        <div class="card">
                            <div class="card-body table-responsive altoTabla">
                                <table class="table table-borderless reponsive" id="table-v">
                                    <thead>
                                        <tr>
                                            <th>
                                                <h5 class="title">Valvula</h5>
                                            </th>
                                            <th class="subtitlefondo" style="background-color: rgb(242, 246, 250);">
                                                <h6 class="subtitle">Acción realizada</h6>
                                            </th>
                                            <th class="subtitleBlack">
                                                Vueltas
                                            </th>
                                            <th class="subtitleBlack">
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <hr>
        <div class="row">
            <div class="mt-3 col-md-12 col-lg-12">
                aqui iran la info por punto de toma tanque y fechas

            </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-8" style="margin-top:10px">
                            <div id="chart" style="width:100%; height:600"></div>
                        </div>
                        <div class="col-md-4" style="margin-top:10px">
                            ghfhggg
                        </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')
    <style>
        .altoTabla {
            height: 400px;
            width: 100%;
        }

        .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);
        }

        .contenedor {
            position: relative;
            display: inline-block;
            text-align: center;
            font-size: 13px;
            color: white;
        }


        .centrado {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .modal-dialog {
            max-width: 90%;
            margin: 1.75rem auto;
        }
    </style>
@endpush

@push('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        function habilitarNotificaciones() {
            Notification.requestPermission().then(resultado => {})
        }
    </script>

    <script>
        function initMap() {

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

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

            window.axios.get('/siat_sockets_2/public/api/getTanques')
                .then((response) => {
                    let data = response.data;

                    data.forEach(function(airport) {
                        iconD = '{{ asset('imagenes/ic_tanque3.png') }}';
                        let marker = addMarker(airport.Latitude, airport.Longitude, null, airport.Nombre, iconD,
                            map);

                        var content = '<div class="card1">' +
                            '<div class="card-body1">' +
                            '<h10 class="card-title1">' + '<strong>' + "Tanque: " +
                            '</strong>' + airport.Nombre + '</h10>' +
                            '</div>'

                        var infowindow = new google.maps.InfoWindow({
                            content: content
                        });

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

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

                    });

                });

            window.axios.get('/siat_sockets_2/public/api/presiones')
                .then((response) => {
                    let presiones = response.data;
                    presiones.forEach(function(airport) {
                        let iconD = imagePresion(airport.Presion, false, null, null);
                        let marker = addMarker(airport.Latitud, airport.Longitud, airport.Presion, airport
                            .tanqueNom, iconD, map);

                        let content = addInfo(airport.Año, airport.Mes, airport.NombreFoto, airport.Nombre,
                            airport.Presion, airport.tanqueNom, airport.puntoToma, airport.IdPuntoToma);

                        var infowindow = new google.maps.InfoWindow({
                            content: content
                        });

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

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

                        document.getElementById('table').insertRow(-1).innerHTML = '<td class="tdstyle">' +
                            airport.tanqueNom + '</td><td>' + airport.puntoToma +
                            '</td><td><div class="bar"><div class="progress" style="width:' + parseFloat(airport
                                .Presion) * 1 + '%"></div></div></td><td>' + parseFloat(airport.Presion) +
                            ' M.C.A</td>';
                    });

                });

            window.axios.get('/siat_sockets_2/public/api/getValvulas')
                .then((response) => {
                    let valvulas = response.data;
                    valvulas.forEach(function(valvula) {

                        const iconD = '{{ asset('imagenes/ic_valvula_3.png') }}';

                        let marker = addMarker(valvula.Latitud, valvula.Longitud, null, valvula.Nombre, iconD,
                            map);

                        var content = '<div class="card1">' +
                            '<div class="card-body1">' +
                            '<h10 class="card-title1">' + '<strong>' + "Valvula: " +
                            '</strong>' + valvula.Nombre + '</h10>' +
                            '</div>'

                        var infowindow = new google.maps.InfoWindow({
                            content: content
                        });

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

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

                    });

                });

            window.axios.get('/siat_sockets_2/public/api/getValvulasInfo')
                .then((response) => {
                    let infoValvulas = response.data;

                    infoValvulas.forEach(function(infoValvula) {

                        const iconD = '{{ asset('imagenes/ic_incidencias2.png') }}';

                        let marker = addMarker(infoValvula.Latitud, infoValvula.Longitud, null, infoValvula
                            .Nombre, iconD, map);

                        var content = '<div class="card1">' +
                            '<div class="card-body1">' +
                            '<h10 class="card-title1">' + '<strong>' + "Valvula ubicación: " +
                            '</strong>' + infoValvula.Nombre + '</h10>' +
                            '<br/>' +
                            '<h10 class="card-title1">' + '<strong>' + "Accion realizada: " +
                            '</strong>' + infoValvula.Descripcion + '</h10>' +
                            '</div>' +
                            '<h10 class="card-title1">' + '<strong>' +
                            "Vueltas: " + '</strong>' + infoValvula.totalVueltas +
                            '</h10>' + '<br/>' +
                            '<h10 class="card-title1">' + '<strong>' +
                            "Observacion: " + '</strong>' + infoValvula.Observacion +
                            '</h10>' + '<br/>' +
                            '<button" 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() {
                            habilitarNotificaciones();
                            infowindow.open(map, marker);
                        });

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

                        document.getElementById('table-v').insertRow(-1).innerHTML = '<td class="tdstyle">' +
                            infoValvula.Nombre +
                            '</td><td>' + infoValvula.Descripcion +
                            '</td><td>' + '</td><td>' + infoValvula.totalVueltas +
                            '</td><td>';
                    });

                });

            Echo.channel('valvulas_datos')
                .listen('valvulas.ValvulaDatosCreated', (e) => {
                    console.log(e);

                    /*const iconD = '{{ asset('imagenes/ic_incidencias2.png') }}';

                    let marker = addMarker(e.datosValvula.Latitud, e.datosValvula.Longitud, null, e.datosValvula
                        .valvulas.Nombre, iconD, map);*/

                    document.getElementById('table-v').insertRow(-1).innerHTML = '<td class="tdstyle">' + e.datosValvula
                        .valvulas.Nombre +
                        '</td><td>' + e.datosValvula.operaciones.Descripcion +
                        '</td><td>' + '</td><td>' + e.datosValvula.totalVueltas +
                        '</td><td>';


                    /*var content = '<div class="card1">' +
                        '<div class="card-body1">' +
                        '<h10 class="card-title1">' + '<strong>' + "Valvula ubicación: " +
                        '</strong>' + e.datosValvula.valvulas.Nombre + '</h10>' +
                        '<br/>' +
                        '<h10 class="card-title1">' + '<strong>' + "Accion realizada: " +
                        '</strong>' + e.datosValvula.operaciones.Descripcion + '</h10>' +
                        '</div>' +
                        '<h10 class="card-title1">' + '<strong>' +
                        "Vueltas: " + '</strong>' + e.datosValvula.totalVueltas +
                        '</h10>' + '<br/>' +
                        '<h10 class="card-title1">' + '<strong>' +
                        "Observacion: " + '</strong>' + e.datosValvula.Observacion +
                        '</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() {
                        habilitarNotificaciones();
                        infowindow.open(map, marker);
                    });


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

                });

            Echo.channel('valvulas')
                .listen('valvulas.ValvulaCreated', (e) => {
                    console.log(e);
                    console.log("valvulaCreada");

                    const iconD = '{{ asset('imagenes/ic_valvula_3.png') }}';

                    //let marker = addMarker(e.valvula.Latitud, e.valvula.Longitud, null, e.valvula.Nombre, iconD,
                    //    map);

                    /*var content = '<div class="card1">' +
                        '<div class="card-body1">' +
                        '<h10 class="card-title1">' + '<strong>' + "Valvula ubicación: " +
                        '</strong>' + e.valvula.Nombre + '</h10>' +
                        '<br/>' +
                        '<h10 class="card-title1">' + '<strong>' + "Tipo de valvula: " +
                        '</strong>' + e.valvula.tipo.Nombre + '</h10>' +
                        '</div>' +
                        '<h10 class="card-title1">' + '<strong>' +
                        "Marca: " + '</strong>' + e.valvula.marca.Nombre +
                        '</h10>' + '<br/>' +
                        '<h10 class="card-title1">' + '<strong>' +
                        "Diametro: " + '</strong>' + e.valvula.diametro.diametro +
                        '</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() {
                        habilitarNotificaciones();
                        infowindow.open(map, marker);
                    });


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





                });

            Echo.channel('presiones')
                .listen('PresionCreated', (e) => {
                    let iconD = imagePresion(e.presion.Presion, true, e.presion.tanque.Nombre, e.presion.punto_toma
                        .Nombre);

                    let marker = addMarker(e.presion.Latitud, e.presion.Longitud, e.presion.Presion, e.presion.tanque
                        .Nombre, iconD, map);

                    let content = addInfo(e.presion.Año, e.presion.Mes, e.presion.NombreFoto, e.presion.IdRealizador, e
                        .presion.Presion, e.presion.tanque.Nombre, e.presion.punto_toma.Nombre, e.presion.punto_toma
                        .IdPuntoToma);

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


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

                    document.getElementById('table').insertRow(-1).innerHTML = '<td class="tdstyle">' + e.presion.tanque
                        .Nombre + '</td><td>' + e.presion.punto_toma.Nombre +
                        '</td><td><div class="bar"><div class="progress" style="width:' + parseFloat(e.presion
                            .Presion) * 1 + '%"></div></div></td><td>' + parseFloat(e.presion.Presion) + 'M.C.A </td>'
                });
        }

        function imagePresion(presion, lanzar, tanque, puntoToma) {
            if (presion == 0) {
                $alerta = '{{ asset('imagenes/ic_presion0mca.png') }}';
                if (lanzar) {
                    lanzarNotificacion("Alerta", $alerta, "Presión baja en el tanque:" + tanque + " Punto de toma: " +
                        puntoToma + " Presión:" + presion);
                }
                return '{{ asset('imagenes/ic_presion0mca.png') }}';
            } else if (presion >= 1 && presion < 10) {
                return '{{ asset('imagenes/ic_presion1xy.png') }}';
            } else if (presion >= 10 && presion <= 35) {
                return '{{ asset('imagenes/ic_presion10mca.png') }}';
            } else if (presion > 35) {
                return '{{ asset('imagenes/ic_presion2xy.png') }}';
            }
        }

        function addMarker(Latitud, Longitud, etiqueta, titulo, icono, map) {
            const content = document.createElement('div');

            $encabezado = "";
            if (etiqueta == null) {
                $encabezado = ``;
            } else {
                $encabezado = `<div class="centrado"><strong>${etiqueta}</strong></div>`;
            }

            content.innerHTML = `
                <div class="contenedor">` +
                $encabezado + `
                    <img src="${icono}" alt="${titulo}" />
                </div>
            `;

            let marker = new google.maps.marker.AdvancedMarkerElement({
                map: map,
                content: content,
                position: new google.maps.LatLng(parseFloat(Latitud), parseFloat(Longitud))
            });



            return marker;
        }

        function lanzarNotificacion(Titulo, icono, Mensaje) {
            /*switch(estatus){
                case "alerta":
                    break;
                case "correcto":
                    break;
            }*/

            const notification = new Notification(Titulo, {
                icon: icono,
                body: Mensaje,
            });

            /*const notification = new Notification('Nueva presión ingresada', {
                icon: '{{ asset('imagenes/ic_tanque3.png') }}',
                body: 'Alerta presiones bajas en colonia europa.',
            });*/
        }

        function addInfo(Año, Mes, NombreFoto, IdRealizador, Presion, tanque_Nombre, punto_toma_Nombre, idPuntoToma) {
            return '<div class="card1">' +
                '<img style="width:320px" class="card-img-top img-fluid1" src=http://201.144.50.35:807/public_storage/siat_presiones/' +
                +Año + '/' + Mes + '/' + NombreFoto + ' alt="Card image cap">' +
                '<div class="card-body1">' +
                '<h10 class="card-title1">' + '<strong>' + "Valvulero: " +
                '</strong>' + IdRealizador + '</h10>' +
                '<br/>' +
                '<h10 class="card-title1">' + '<strong>' + "Presion: " +
                '</strong>' + Presion + '</h10>' +
                '</div>' +
                '<h10 class="card-title1">' + '<strong>' +
                "Tanque: " + '</strong>' + tanque_Nombre +
                '</h10>' + '<br/>' +
                '<h10 class="card-title1">' + '<strong>' +
                "Punto de Toma : " + '</strong>' + punto_toma_Nombre +
                '</h10>' + '<br/>' +
                '<button onClick="getHistorial(' + idPuntoToma +
                ')" class="btn btn-info margen" title="Asignar" data-bs-toggle="modal" data-bs-target="#addBookDialogV"> Historial</button>' +
                '<input type="date" class="form-control datepicker" name="start_date" id="start_date" value="{{ @old('start_date') }}">' +
                '<input type="date" class="form-control datepicker" name="final_date" id="final_date" value="{{ @old('final_date') }}">' +
                '</div>'
        }

        function getHistorial($data) {
            const fInicial = $('#start_date').val();
            const fFinal = $('#final_date').val();

            if (fInicial == '' || fFinal == '') {
                return "";
            }
            console.log($data);
            const IdPuntoToma = $data;
            window.axios.get(`api/appValvula/getHistorialPresiones/${IdPuntoToma}/${fInicial}/${fFinal}`)
                .then((response) => {

                    google.load('visualization', '1.1', {
                        packages: ['line']
                    });

                    google.setOnLoadCallback(drawChart);

                    function drawChart() {

                        // Create the data table.
                        var data = new google.visualization.DataTable();
                        data.addColumn('number', 'Dia');
                        data.addColumn('number', 'Presion');

                        let ordenes = response.data;
                        for (var orden of ordenes) {
                            const fecha = new Date(orden.FechaToma);
                            const diaSemana = fecha.getDate();

                            data.addRows([
                                [diaSemana, parseFloat(orden.Presion)],
                            ]);
                        }

                        // Set chart options
                        var options = {
                            chart: {
                                title: 'Box Office Earnings in First Two Weeks of Opening',
                                subtitle: 'in millions of dollars (USD)'
                            },
                            'width': 800,
                            'height': 600
                        };

                        // Instantiate and draw our chart, passing in some options.
                        var chart = new google.charts.Line(document.getElementById('chart'));

                        chart.draw(data, options);
                    }


                    let ordenes = response.data;
                    console.log(ordenes);
                });

        }

        function imprimir(event, formato) {
            event.preventDefault();
            let hostname = location.hostname;
            const host = hostname;
            const inicio = "https://";
            const url = inicio + host + "/siat_sockets_2/public/api/appValvula/generarPdf";
            const fInicial = $('#fechaInicio').val();
            const fFinal = $('#fechaFinal').val();
            const nameFileJasper = "presion.jasper";
            const nameFileExport = "reporte-presiones";
            const formatoReporte = formato

            if (formato == "pdf") {
                document.getElementById("btnPrintPDF").disabled = true;
            } else {
                document.getElementById("btnPrintExcel").disabled = true;
            }


            if (fInicial == '' || fFinal == '') {
                Swal.fire({
                    title: "Fechas obligatorias",
                    text: "Favor de capturar las fechas obligatoriamente",
                    icon: 'error',
                    confirmButtonText: 'Aceptar'
                })

                document.getElementById("btnPrintPDF").disabled = false;
                document.getElementById("btnPrintExcel").disabled = false;
                return "";
            }

            const data = {
                fechaInicio: fInicial,
                fechaFinal: fFinal,
                fileBaseName: nameFileJasper,
                fileNameExport: nameFileExport,
                tipoReporte: formatoReporte
            };

            enviarDatos(url, data);

        }


        const enviarDatos = async (url, data) => {
            console.log(url);
            console.log(data.tipoReporte);
            try {

                const response = await axios.post(url, data, {
                    responseType: 'blob' // Configura el tipo de respuesta para recibir un blob
                });

                if (data.tipoReporte == "pdf") {
                    const urlBlob = window.URL.createObjectURL(new Blob([response.data], {
                        type: 'application/pdf'
                    }));
                    window.open(urlBlob, '_blank');
                    window.URL.revokeObjectURL(urlBlob);
                    document.getElementById("btnPrintPDF").disabled = false;
                } else {
                    console.log("xlsx");
                    const urlBlob = window.URL.createObjectURL(new Blob([response.data], {
                        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                    }));
                    const link = document.createElement('a');
                    link.href = urlBlob;
                    link.setAttribute('download', 'archivo.xlsx'); // Nombre del archivo a descargar
                    document.body.appendChild(link);
                    link.click();
                    link.remove();
                    window.URL.revokeObjectURL(urlBlob);
                    document.getElementById("btnPrintExcel").disabled = false;
                }

            } catch (error) {
                document.getElementById("btnPrintExcel").disabled = false;
                document.getElementById("btnPrintPDF").disabled = false;
                Swal.fire({
                    title: "Error al momento de generar el reporte",
                    text: error,
                    icon: 'error',
                    confirmButtonText: 'Aceptar'
                })
            }
        };
    </script>

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