@extends('layouts.app')

@section('content')
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    {{--  <link rel="stylesheet" href="{{ asset('css/jquery.dataTables.min.css') }}">  --}}
    <link rel="stylesheet" type="text/css" href="{{ asset('css/jquery.dataTables.css') }}">
    <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: 40px;height: 40px; background-image: url({{ asset('imagenes/excel2.png') }});"
                            id="btnPrintExcel" onclick="imprimir(event,'xlsx','presion.jasper','reporte-presiones')"
                            name="btnPrintExcel" class="btn margen" title="Informe de presiones"></button>

                        <button style="width: 40px;height: 40px; background-image: url({{ asset('imagenes/pdf2.png') }});"
                            id="btnPrintPDF" onclick="imprimir(event,'pdf','presion.jasper','reporte-presiones')"
                            name="btnPrintPDF" class="btn margen" title="Informe de presiones"></button>

                        <button
                            style="width: 40px;height: 40px; background-image: url({{ asset('imagenes/excel2_valvula.png') }});"
                            id="btnPrintExcelV" onclick="imprimir(event,'xlsx','valvula.jasper','reporte-valvulas')"
                            name="btnPrintExcelV" class="btn margen" title="Informe de valvula"></button>

                        <button
                            style="width: 40px;height: 40px; background-image: url({{ asset('imagenes/pdf2_valvula.png') }});"
                            id="btnPrintPDFV" onclick="imprimir(event,'pdf','valvula.jasper','reporte-valvulas')"
                            name="btnPrintPDFV" class="btn margen" title="Informe de valvula"></button>

                        <button style="width: 40px;height: 40px; background-image: url({{ asset('imagenes/tools2.png') }});"
                            id="btnConfiguracion" name="btnConfiguracion" data-bs-toggle="modal"
                            onclick="showTanques(event)" data-bs-target="#addBookDialogConf" class="btn margen"
                            title="Configuración"></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-style 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>
                </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">

                        </div>
                    </div>


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

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

    <div class="modal fade" id="addBookDialogConf" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="background: #edf1f5">
                <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" id="modalContent">

                    <div class="row">
                        <div class="form-group col-md-6">
                            <h3>Administración de tanques y puntos de toma</h3>
                        </div>
                        <div class="form-group col-md-6">
                            <button type="submit" id="btnAsignar" title="Agregar Tanque" class="btn btn-info"
                                data-toggle="modal" href="#asignar-jefe" class="open-AddBookDialogUsuarioCreate">
                                <i class="fas fa-user-plus"></i>
                            </button>

                        </div>
                    </div>

                    <div class="row" id="zonas">
                    </div>

                    <div class="row">
                        <div class="form-group col-md-12">
                            <section id='content'>
                                <p id="areaSeleccionada" class="pvalvulero"></p>
                                <nav>
                                    <ul class='accion'>
                                        <li>TANQUES</li>
                                        <li>VALVULEROS</li>
                                    </ul>

                                </nav>
                                <hr>
                                <main>

                                    <section>

                                        <table class="table table-striped table-hover tanques" id="tanques"
                                            style="width:100%">
                                            <caption>
                                                Lista de tanques
                                            </caption>
                                            <thead class="table-dark">
                                                <tr>
                                                    <th>Id Tanque</th>
                                                    <th>Tanque</th>
                                                    <th>Estatus</th>
                                                    <th>Acciones</th>
                                                </tr>
                                            </thead>
                                            <tbody class="table-group-divider">
                                            </tbody>
                                        </table>
                                    </section>

                                    <section>
                                        <table class="table table-hover valvuleros" id="valvuleros" style="width:100%">
                                            <caption>
                                                Lista de valvuleros
                                            </caption>
                                            <thead class="thead-dark">
                                                <tr>
                                                    <th>Id Empleado</th>
                                                    <th>Nombre</th>
                                                    <th>Estatus</th>
                                                    <th>Acciones</th>
                                                </tr>
                                            </thead>
                                        </table>
                                    </section>

                                    <section>
                                        <h3>JS</h3>
                                        <p>It is a long established fact that a reader will be distracted by the readable
                                            content of a page
                                            when looking at its layout.</p>
                                    </section>

                                    <section>
                                        <h3>Favor de seleccionar una zona y la opción de tanques o valvuleros.</h3>
                                        <p>Para visualizar la información.</p>
                                    </section>
                                </main>

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

                    <hr>
                    <div id="puntoToma" name="puntoToma" class="oculta">
                        <div class="row">
                            <div class="form-group col-md-12" style="text-align: center">
                                <h3>PUNTOS DE TOMA</h3>
                            </div>
                            <div class="form-group col-md-12" style="padding: 10px 100px 10px 100px;background: #dedede;"
                                id="formAddPuntoToma">
                                <input id="idTanqueSeleccionado" type="hidden">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <div class="input-group-text">Nombre del punto de toma</div>
                                    </div>
                                    <input type="text" id="namePuntoToma" class="form-control"
                                        id="inlineFormInputGroup" name="namePuntoToma"
                                        value="{{ @old('namePuntoToma') }}" />
                                </div>
                                <div style="text-align: right;">
                                    <button class="btn btn-primary" style="margin-top:10px"
                                        onclick="visualizarFormPuntoToma(event,0)"> CERRAR</button>
                                    <button class="btn btn-primary" style="margin-top:10px"
                                        onclick="agregarPuntoToma(event)"> AGREGAR</button>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="form-group col-md-12">
                                <div style="text-align: right">
                                    <button id="btnCrearPuntoToma" onclick="visualizarFormPuntoToma(event,1)"
                                        title="Agregar Punto Toma" class="btn btn-success"> <i
                                            class="fa-solid fa-file-circle-plus"></i></button>
                                </div>
                                <table class="table table-striped table-hover" id="t-puntoToma" style="width:100%">
                                    <thead class="table-dark">
                                        <tr>
                                            <th scope="col">Tanque</th>
                                            <th scope="col">Punto de toma</th>
                                            <th scope="col">Estatus</th>
                                            <th scope="col">Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody class="table-group-divider">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>


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

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

@push('styles')
    <style>
        thead,
        tbody,
        tfoot,
        tr,
        td,
        th {
            border-color: inherit;
            border-style: none;
            border-width: 100;
        }

        .card-bold-title {
            font-weight: 600;
        }

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

        .pvalvulero {
            background: #ffffff75;
            padding: 10px;
            width: fit-content;
            font-weight: 500;
            color: #313131eb;
            box-shadow: 3px 4px 8px #787878;
            display: block;
        }


        #content {
            width: 100%;
            gap: 30px;
            flex-wrap: wrap;
            justify-content: center;
        }


        #main-content {
            display: none;
            min-height: 200px;
        }

        .modal-body main section {
            display: none;
            min-height: 200px;
        }

        .modal-body main section.ativo {
            display: block;
            animation: anime .5s forwards;
        }

        .modal-body #puntoToma.ativo {
            display: block;
            animation: anime .5s forwards;
        }

        .modal-body #puntoToma {
            display: none;
            min-height: 200px;
        }

        .accion li {
            cursor: pointer;
            background: rgba(147, 147, 147, 0.35);
            backdrop-filter: blur(7.5px);

            padding: 8px;
            width: 100%;
            max-width: 110px;
            height: 40px;
            border-radius: 3px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 15px;
        }

        .accion {
            display: flex;
            list-style: none;
            gap: 10px;
        }

        #formAddPuntoToma {
            display: none;
        }

        #formAddPuntoToma.visible {
            display: block;
            animation: anime .5s forwards;
        }

        @keyframes anime {

            from {
                opacity: 0;
                transform: translatex(-30px);
            }

            to {
                opacity: 1;
                transform: translatex(0px);
            }
        }
    </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 type="text/javascript" charset="utf8" src=" {{ asset('js/jquery.dataTables.js') }}"></script>
    <script src="https://kit.fontawesome.com/75e8980d04.js" crossorigin="anonymous"></script>

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

    <script>
        function initMap() {

            const myLatLng = {
                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/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
                        });

                        if (marker) {
                            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/public/api/presiones')
                .then((response) => {
                    let presiones = response.data;

                    console.log(presiones);
                    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, airport.puntoToma);

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

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

                        if (marker) {
                            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/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, valvula.Nombre);

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

                        if (marker) {
                            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/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, infoValvula.Nombre);

                        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, e.datosValvula
                        .valvulas.Nombre);

                    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, e.valvula.Nombre);

                    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) => {
                    console.log(e);
                    console.log(e.presion);

                    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, e.presion.punto_toma.Nombre);

                    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, e.presion.FechaToma);

                    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 && presion < 1) {
                $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, origenCaptura) {
            const content = document.createElement('div');
            const lat = parseFloat(Latitud);
            const lng = parseFloat(Longitud);

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

                //Uso de diametros
                /*const centerPoint = { lat: lat, lng: lng };

                const circle = new google.maps.Circle({
                    map: map,
                    center: centerPoint, // Centro del círculo
                    radius: 1000, // Radio en metros (1 km = 1000 metros)
                    fillColor: "#FF00007D", // Color de relleno del círculo
                    fillOpacity: 0.35,
                    strokeColor: "#FF00004E", // Color del borde del círculo
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                });*/
                //Uso de diametros
            }

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

            if (!isNaN(lat) && !isNaN(lng)) {
                let marker = new google.maps.marker.AdvancedMarkerElement({
                    map: map,
                    content: content,
                    position: new google.maps.LatLng(lat, lng),
                    title: origenCaptura
                });

                return marker;
            } else {
                return;
            }


        }

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

        }

        function addInfo(Año, Mes, NombreFoto, IdRealizador, Presion, tanque_Nombre, punto_toma_Nombre, idPuntoToma,
            fechaToma) {
            return '<div class="card1">' +
                '<img style="width:320px" class="card-img-top img-fluid1" src=//images.weserv.nl/?url=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/>' +
                '<h10 class="card-title1">' + '<strong>' +
                "Fecha de toma : " + '</strong>' + fechaToma +
                '</h10>' + '<br/>' +
                '<button onClick="getHistorial(' + idPuntoToma + ',' + "'" + tanque_Nombre + "'" + ',' + "'" +
                punto_toma_Nombre + "'" +
                ')" 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, $tanque, $puntoToma) {
            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
                        $title = 'Historial de presiones del tanque: ' + $tanque;
                        $subtitle = 'punto de toma: ' + $puntoToma;
                        var options = {
                            chart: {
                                title: $title,
                                subtitle: $subtitle
                            },
                            '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, nameFileJasperE, nameFileExportE) {
            event.preventDefault();
            let hostname = location.hostname;
            const host = hostname;
            const inicio = "https://";
            const url = inicio + host + "/siat_sockets/public/api/appValvula/generarPdf";
            const fInicial = $('#fechaInicio').val();
            const fFinal = $('#fechaFinal').val();
            const nameFileJasper = nameFileJasperE;
            const nameFileExport = nameFileExportE;
            const formatoReporte = formato

            if (formato == "pdf") {
                document.getElementById("btnPrintPDF").disabled = true;
                document.getElementById("btnPrintPDFV").disabled = true;
            } else {
                document.getElementById("btnPrintExcel").disabled = true;
                document.getElementById("btnPrintExcelV").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;
                document.getElementById("btnPrintPDFV").disabled = false;
                document.getElementById("btnPrintExcelV").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;
                    document.getElementById("btnPrintPDFV").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;
                    document.getElementById("btnPrintExcelV").disabled = false;
                }

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

        const showTanques = async (event) => {
            event.preventDefault();
            document.getElementById("areaSeleccionada").style.display = "none";

            /**LIMPIAR VALORES POR DEFAULT*/
            const itensContent = document.querySelectorAll('.modal-body main section');
            itensContent.forEach((item) => {
                item.classList.remove('ativo')
            })


            /**LIMPIAR VALORES POR DEFAULT*/

            toggleTabItem();

            url = "http://10.45.224.61/siat_sockets/public/api/getZonas";
            try {

                const response = await axios.get(url);
                const data = response.data;

                const listTanques = document.getElementById('zonas');
                listTanques.innerHTML = "";

                data.forEach(zona => {
                    const card = '<div class="col-md-2" style="height: 200px">' +
                        '<div class="card border-light" style="margin:5px;height: 150px">' +
                        '<div class="card-body">' +
                        '<h5 class="card-title card-bold-title">' + zona.Descripcion + '</h5>' +
                        `<a class="btn btn-primary text-white" onclick="obtenerTanquesValvuleros(event,${zona.IdZona},'${zona.Descripcion}')">Configurar</a>` +
                        '</div></div></div>';
                    listTanques.innerHTML += card;
                });

            } catch (error) {
                Swal.fire({
                    title: "Error al momento de obtener los tanques",
                    text: error,
                    icon: 'error',
                    confirmButtonText: 'Aceptar'
                })
            }

        }

        const obtenerTanquesValvuleros = async (event, $id, $zona) => {
            event.preventDefault();

            const inicio = "https://";
            const host = location.hostname;
            const url = inicio + host + "/siat_sockets/public/api/configuracionTanques";

            document.getElementById("areaSeleccionada").innerHTML = $zona;
            document.getElementById("areaSeleccionada").style.display = "block";

            $("#tanques").DataTable({
                destroy: true,
                language: {
                    url: "../../siat_sockets/public/js/datatable_Spanish.json",
                },
                searching: false,
                processing: true,
                serverSide: true,
                pageLength: 25,
                ajax: {
                    url: url,
                    type: "GET",
                    data: function(d) {
                        d.idZona = $id;
                    },
                },
                columns: [{
                        data: "IdTanque"
                    }, {
                        data: "Nombre"
                    }, {
                        data: "estatus",
                        name: "estatus",
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: "eliminar",
                        name: "eliminar",
                        orderable: false,
                        searchable: false
                    },
                ],
            });

        };

        function toggleTabItem() {
            const itensMenu = document.querySelectorAll('.modal-body .accion li');
            const itensContent = document.querySelectorAll('.modal-body main section');

            itensContent[3].classList.add('ativo')

            function ativo(index) {

                itensContent.forEach((item) => {
                    item.classList.remove('ativo')
                })

                itensContent[index].classList.add('ativo')

            }

            //elemento - posição
            itensMenu.forEach((itemMenu, index) => {
                itemMenu.addEventListener('click', () => {
                    ativo(index)
                    mostrarAtivo(index)

                })
            })


            function mostrarAtivo(index) {
                itensMenu.forEach((item) => {
                    item.style.background = '';
                })

                itensMenu[index].style.background = "#fff";
            }
        };

        const operacionTanque = async (event, id, idZona, accion) => {
            event.preventDefault();

            if (accion == 1) { //activar
                inhabilitarOHabilitar(event, id, idZona, true)
            } else { //desactivar
                inhabilitarOHabilitar(event, id, idZona, false)
            }

        }

        const inhabilitarOHabilitar = async (event, id, idZona, accion) => {
            console.log("aqui voy a inhabilitar");
            const fFinal = $('#idTanque').val();
            url = `http://10.45.224.61/siat_sockets/public/api/tanques/${id}/${idZona}/${accion}`;
            const data = [];

            try {
                const response = await axios.patch(url, data, {
                    headers: {
                        'Content-Type': 'application/json', // Tipo de contenido
                    }
                });

                console.log('Respuesta del servidor:', response.data);

                let area = document.getElementById("areaSeleccionada");
                let valorArea = area.innerHTML;

                obtenerTanquesValvuleros(event, idZona,
                    valorArea); //aqui solo falta mandar bien tanto la zona como el id checar

            } catch (error) {
                if (error.response) {
                    // Respuesta de error del servidor
                    console.error('Error del servidor:', error.response.data);
                } else {
                    // Otro tipo de error (red, timeout, etc.)
                    console.error('Error:', error.message);
                }
            }

        }

        const mostrarPuntosToma = async (event, $id) => {
            event.preventDefault();
            const div = document.getElementById('puntoToma');
            const inicio = "http://";
            const host = location.hostname;
            const url = inicio + host + "/siat_sockets/public/api/configuracionPuntosToma";

            div.classList.remove('ativo');

            document.getElementById('idTanqueSeleccionado').value = $id;

            $("#t-puntoToma").DataTable({
                destroy: true,
                order: [
                    [1, 'asc']
                ],
                language: {
                    url: "../../siat_sockets/public/js/datatable_Spanish.json",
                },
                searching: false,
                processing: true,
                serverSide: true,
                pageLength: 100,
                ajax: {
                    url: url,
                    type: "GET",
                    data: function(d) {
                        d.idTanque = $id;
                    },
                },
                columns: [{
                        data: "tanque"
                    }, {
                        data: "Nombre"
                    }, {
                        data: "estatus",
                        name: "estatus",
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: "eliminar",
                        name: "eliminar",
                        orderable: false,
                        searchable: false
                    },
                ],
            });

            setTimeout(function() {
                div.classList.add('ativo');
            }, 300);

        }

        const operacionPuntoToma = async (event, id, accion, idTanque, idZona) => {
            event.preventDefault();

            if (accion == 1) { //activar
                inhabilitarOHabilitarPuntoToma(event, id, true, idTanque, idZona)
            } else { //desactivar
                inhabilitarOHabilitarPuntoToma(event, id, false, idTanque, idZona)
            }

            console.log(id);
            console.log(accion);
        }

        const inhabilitarOHabilitarPuntoToma = async (event, id, accion, idTanque, idZona) => {
            url = `http://10.45.224.61/siat_sockets/public/api/puntosToma/${id}/${accion}/${idZona}`;
            const data = [];

            try {
                const response = await axios.patch(url, data, {
                    headers: {
                        'Content-Type': 'application/json', // Tipo de contenido
                    }
                });

                console.log('Respuesta del servidor:', response.data);

                mostrarPuntosToma(event, idTanque, "");

            } catch (error) {
                if (error.response) {
                    // Respuesta de error del servidor
                    console.error('Error del servidor:', error.response.data);
                } else {
                    // Otro tipo de error (red, timeout, etc.)
                    console.error('Error:', error.message);
                }
            }

        }

        function visualizarFormPuntoToma(event, accion) {
            event.preventDefault();

            const div = document.getElementById('formAddPuntoToma');
            if (accion == 1) {
                div.classList.add('visible');
            } else {
                div.classList.remove('visible');
            }

        }

        function agregarPuntoToma(event) {
            const idTanque = document.getElementById('idTanqueSeleccionado').value;
            const namePuntoToma = document.getElementById('namePuntoToma').value;
            const url = "http://10.45.224.61/siat_sockets/public/api/insertarPuntoToma";
            const data = {
                idTanque: idTanque,
                nombre: namePuntoToma
            };

            if (namePuntoToma == "") {
                Swal.fire({
                    title: "Favor de capturar el nombre de el punto de toma",
                    text: "El campo es obligatorio",
                    icon: 'error',
                    confirmButtonText: 'Aceptar'
                })
            } else {
                enviarPuntoToma(event, url, data);
            }

        }

        const enviarPuntoToma = async (event, url, data) => {
            try {

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

                let timerInterval;
                Swal.fire({
                    title: "Punto de toma guarado correctamente!",
                    timer: 800,
                    timerProgressBar: false,
                    /*didOpen: () => {
                        Swal.showLoading();
                        const timer = Swal.getPopup().querySelector("b");
                        timerInterval = setInterval(() => {
                            timer.textContent = `${Swal.getTimerLeft()}`;
                        }, 100);
                    },
                    willClose: () => {
                        clearInterval(timerInterval);
                    }*/
                }).then((result) => {
                    /* Read more about handling dismissals below */
                    if (result.dismiss === Swal.DismissReason.timer) {
                        mostrarPuntosToma(event, data.idTanque, data);
                    }
                });




            } catch (error) {
                Swal.fire({
                    title: "Error al momento de generar el punto de toma",
                    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