@extends('layouts.app', [
'namePage' => 'Table List',
'class' => 'sidebar-mini',
'activePage' => 'table',
])
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker.standalone.min.css">
<link rel="stylesheet" href="{{ asset('assets/css/custom.css') }}?v={{ rand() }}">

@section('content')

<div class="panel-header panel-header-sm">
</div>
<div class="container" style="margin-top:50px;background:red !important;">
    <div class="row">
    </div>
</div>

<div class="content" style="background:#f1f6f2 !important;">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-lg-6 col-sx-12">
                            <h4 class="nombre_estacion"></h4>
                            @if($tabla === 'e-1b' || $tabla === 'e-2' || $tabla === 'e-4' || $tabla === 'e-5')
                            <button class="btn btn-primary botones_header" onclick="window.location.href='{{ route("dashboard-detalle-ev", ['parametros' => $tabla]) }}'">Dashboard</button>
                            @endif
                            @if($tabla === 'mh-6' || $tabla === 'mh-11' || $tabla === 'mh-16')
                            <button class="btn btn-primary botones_header" onclick="window.location.href='{{ route("dashboard-detalle-eh", ['parametros' => $tabla]) }}'">Dashboard</button>
                            @endif
                            @if($tabla === 'suez')
                            <button class="btn btn-primary botones_header" onclick="window.location.href='{{ route("dashboard-detalle-ep", ['parametros' => $tabla]) }}'">Dashboard</button>
                            @endif
                            @if($tabla === 'cienaga' || $tabla === 'mirador' || $tabla === 'thy3' || $tabla === 'gaviotas')
                            <button class="btn btn-primary botones_header" onclick="window.location.href='{{ route("dashboard-detalle-em", ['parametros' => $tabla]) }}'">Dashboard</button>
                            @endif

                            <button class="btn btn-primary botones_header" onclick="window.location.href='{{ route("dashboard-datos", ['parametros' => $tabla]) }}'">Datos</button>
                            <button class="btn btn-primary botones_header" onclick="window.location.href='{{ route("graficos", ['parametros' => $tabla]) }}'">Graficos</button>                            
                            <button class="btn btn-primary botones_header" onclick="window.location.href='{{ route("alarmas", ['parametros' => $tabla]) }}'">Alarmas</button>
                        </div>
                        <div class="col-lg-6 col-sx-12">
                            <h6 id="fecha-hora-actual oculto"></h6>
                            <p class="oculto">Nuevo dato cada 1 minuto</p>
                        </div>
                    </div>

                </div>
                <div class="card-body">
                    <div class="fondo_blanco">
                        <div class="row mb-2">
                            <div class="col-12">
                                <p>Ingrese los valores minimos y maximos para recibir alarmas {!! $opciones_graficos['nombre_estacion'] !!}</p>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-xl-4 col-sm-12">
                                <div class="datos {!! $opciones_graficos['tipo_estacion'] !!}">
                                    <h5>{!! $opciones_graficos['titulo_estacion'] !!}</h5>
                                    <table class="table">
                                        <tr>
                                            <td></td>
                                            <td class="text-center">Valor Maximo</td>
                                            <td class="text-center">Valor Minimo</td>
                                        </tr>
                                        @foreach($opciones_graficos['parametros'] as $item_opcion)
                                        <tr>
                                            <td>{!! $item_opcion['etiqueta'] !!}</td>
                                            <td class="text-center"><input type="text" class="input-double" size="8" id="{!! $item_opcion['tipo'] !!}__{!! $opciones_graficos['nombre_tabla'] !!}__{!! $item_opcion['columna'] !!}__maximo" name="{!! $item_opcion['tipo'] !!}__{!! $opciones_graficos['nombre_tabla'] !!}__{!! $item_opcion['columna'] !!}__maximo" value="@if(isset($item_opcion['maximo'])){!! $item_opcion['maximo'] !!}@endif"></td>
                                            <td class="text-center"><input type="text" class="input-double" size="8" id="{!! $item_opcion['tipo'] !!}__{!! $opciones_graficos['nombre_tabla'] !!}__{!! $item_opcion['columna'] !!}__minimo" name="{!! $item_opcion['tipo'] !!}__{!! $opciones_graficos['nombre_tabla'] !!}__{!! $item_opcion['columna'] !!}__minimo" value="@if(isset($item_opcion['minimo'])){!! $item_opcion['minimo'] !!}@endif"></td>
                                        </tr>
                                        @endforeach
                                    </table>
                                    <button id="guardar" name="guardar" type="button" class="btn btn-primary" data-bloque="{!! $opciones_graficos['tipo_estacion'] !!}" style="top: 10px; right: 10px;background:#EAE012;padding:8px;">Guardar</button>                                
                                </div>
                            </div>
                            <div class="col-xl-8 col-sm-12">
                                <div class="contactos">
                                    <h5>Listado de Contactos</h5>

                                    @if(count($opciones_graficos['contactos']) != 0)
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>N°</th>
                                                <th>Nombres</th>
                                                <th>Telefono</th>
                                                <th>Email</th>
                                                <th>Medio Contacto</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php
                                            $i = 0;
                                            @endphp
                                            @foreach($opciones_graficos['contactos'] as $item_contacto)
                                            @php
                                            $i++;
                                            @endphp
                                            <tr>
                                                <td>{!! $i !!}</td>
                                                <td>{!! $item_contacto['nombres'] !!}</td>
                                                <td>{!! $item_contacto['telefono'] !!}</td>
                                                <td>{!! $item_contacto['email'] !!}</td>
                                                <td>
                                                    @php
                                                    $map = [
                                                        'S' => 'SMS',
                                                        'W' => 'WhatsApp',
                                                        'E' => 'Email',
                                                    ];   

                                                    $items = explode('-', $item_contacto['medio_contacto']);

                                                    $valores = array_map(function($item) use ($map) {
                                                        return $map[$item] ?? $item;
                                                    }, $items);

                                                    $resultado = implode(', ', $valores);
                                                    
                                                    @endphp

                                                    {!! $resultado !!}
                                                </td>
                                                <td><button type="button" class="btn btn-sm btn-icon eliminar" data-id="{!! $item_contacto['id'] !!}">X</button></td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                    @endif

                                    <div class="row">
                                        <div class="form-group col-md-3">
                                            <label for="nombres">Nombres</label>
                                            <input type="text" class="col-12" id="nombres" name="nombres" maxlength="100">
                                        </div>
                                        <div class="form-group col-md-2">
                                            <label for="telefono">Telefono</label>
                                            <input type="text" class="col-12" id="telefono" name="telefono" maxlength="20">
                                        </div>
                                        <div class="form-group col-md-3">
                                            <label for="email">Email</label>
                                            <input type="text" class="col-12" id="email" name="email" maxlength="100">
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label>Medio de Contacto</label>
                                            <div class="col-12">
                                                <label><input type="checkbox" name="medio_contacto" value="S"> <span>SMS</span></label>
                                                <label><input type="checkbox" name="medio_contacto" value="W"> <span>WhatsApp</span></label>
                                                <label><input type="checkbox" name="medio_contacto" value="E"> <span>Email</span></label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-lg-12 text-right">
                                            <button id="agregar_contacto" name="agregar_contacto" type="button" class="btn btn-primary" style="top: 10px; right: 10px;background:#EAE012;padding:8px;">Agregar</button> 
                                            <input type="hidden" id="proceso" name="proceso" value="">
                                        </div>
                                    </div>

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

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="{{ asset('assets') }}/js/core/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="{{ asset('assets/js/datepicker-es.js') }}"></script>
<script src="{{ asset('assets/js/custom.js') }}?v={{ rand() }}"></script>

<script>
    var resumen = @json($resumen);

    $( document ).ready(function() {
        mostrarUltimaActualizacion(resumen['Resumen']['fecha_transmisor'], resumen['Resumen']['hora_transmisor'], resumen['Resumen']['nombre_estacion']);

        setInterval(() => {
        }, 60000);

        var csrfToken = $('input[name="_token"]').val();

        $(".datos #guardar").on("click", function() {
            bloque = $(this).attr('data-bloque');
            error = 0;
            var datos = {};

            $('.' + bloque + ' input[type="text"]').each(function(index, element){
                var id = $(element).attr('id');
                var valor = $(element).val();
                datos_elemento = id.split('__');

                if (datos_elemento[0] == bloque) {
                    var minimo = datos_elemento[0] + '__' + datos_elemento[1] + '__minimo';
                    var maximo = datos_elemento[0] + '__' + datos_elemento[1] + '__maximo';

                    valor_minimo = $('#' + minimo).val();
                    valor_maximo = $('#' + maximo).val();

                    if ((valor_minimo != "") && (valor_maximo != "")) {
                        if (parseFloat(valor_minimo) > parseFloat(valor_maximo)) {
                            error = 1;
                        }                    
                    }

                    datos[id] = valor;
                }
            });  

            if (error == 1) {
                alert("El valor minimo NO puede ser mayor al valor maximo, por favor revise los valores ingresados.");
                return false;
            } else {
                datos['_token'] = csrfToken;
                GrabarParametros(datos);
            }                
        });

        $(".contactos .eliminar").on("click", function() {
            id = $(this).attr('data-id');

            var datos = {};
            datos['_token'] = csrfToken;
            datos['id'] = id;

            EliminarContactos(datos);
        });

        $(".contactos #agregar_contacto").on("click", function() {
            var datos = {};

            nombres = $('#nombres');
            telefono = $('#telefono');
            email = $('#email');
            temporal = [];
            medio_contacto = "";

            if (nombres.val() == "") {
                alert("Debe de ingresar los Nombres.");
                nombres.focus();
                return false;
            }
            if (telefono.val() == "") {
                alert("Debe de ingresar un Teléfono.");
                telefono.focus();
                return false;
            }
			if (!EsEmail(email.val())) {
				alert("Debe de ingresar un Email correcto.");
				email.focus();
				return false;
			}

            $('input[name="medio_contacto"]:checked').each(function() {
                temporal.push($(this).val()); // Agregar el valor del checkbox a la variable
            });   

            if (temporal.length == 0) {
				alert("Debe de seleccionar al menos 1 Medio de Contacto.");
				return false;
            } else {
                medio_contacto = temporal.join('-');                
            }

            datos['nombres'] = nombres.val();
            datos['telefono'] = telefono.val();
            datos['email'] = email.val();
            datos['medio_contacto'] = medio_contacto;
            datos['tipo'] = "{!! $opciones_graficos['tipo_estacion'] !!}";
            datos['tabla'] = "{!! $opciones_graficos['nombre_tabla'] !!}";
            datos['_token'] = csrfToken;

            GrabarContactos(datos);
        });

        $(".input-double").keypress(function (e) {
            if(e.which == 46){
                if($(this).val().indexOf('.') != -1) {
                    return false;
                }
            }

            if (e.which != 8 && e.which != 0 && e.which != 46 && (e.which < 48 || e.which > 57)) {
                return false;
            }
        });          
    }); 
    
    function GrabarParametros(datos) {   
        $.ajax({
            url: '{{ route("grabar-alarmas") }}',
            method: 'POST',
            data: datos,
            success: function(response){
                alert(response.message);
                window.location.reload();             
            },
            error: function(response){
                alert(response.message)
            }
        });
    }

    function EliminarContactos(datos) {   
        $.ajax({
            url: '{{ route("eliminar-contactos") }}',
            method: 'POST',
            data: datos,
            success: function(response){
                alert(response.message);
                window.location.reload();
            },
            error: function(response){
                alert(response.message)
            }
        });
    }

    function GrabarContactos(datos) {   
        $.ajax({
            url: '{{ route("grabar-contactos") }}',
            method: 'POST',
            data: datos,
            success: function(response){
                alert(response.message);
                window.location.reload();
            },
            error: function(response){
                alert(response.message)
            }
        });
    }

</script>
@endsection