<?php
    include ("conexion.php");
    $conexion=mysqli_connect($dbhost,$dbuser,$dbpass,$dbname);
    if(!$conexion)
    {
        die("Error connecting to databse ".mysqli_connect_error());
    }
?>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>CONTROL ESP32</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=b7599ef2d63e81db55de92ffd832c8ef">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/fonts/fontawesome5-overrides.min.css?h=320bd0471c3e8d6b9dd55c98e185506c">
</head>

<body id="page-top">
    <div id="wrapper">
        <nav class="navbar navbar-dark align-items-start sidebar sidebar-dark accordion bg-gradient-primary p-0" style="background: rgb(5,26,86);">
            <div class="container-fluid d-flex flex-column p-0"><a class="navbar-brand d-flex justify-content-center align-items-center sidebar-brand m-0" href="#">
                    <div class="sidebar-brand-icon rotate-n-15"><i class="fas fa-microchip"></i></div>
                    <div class="sidebar-brand-text mx-3"><span>esp32 iot</span></div>
                </a>
                <hr class="sidebar-divider my-0">
                <ul class="navbar-nav text-light" id="accordionSidebar">
                    <li class="nav-item"><a class="nav-link active" href="principal.php"><i class="fas fa-tachometer-alt"></i><span>Principal</span></a></li>
                    <li class="nav-item dropdown" style="padding: 16px;color: rgb(237,238,241);">
                        <a class="nav-link" aria-expanded="false" data-toggle="dropdown" href="#" style="color: rgb(231,233,239);font-size: 16px;padding: 0px;"><i class="fas fa-user-circle"></i>&nbsp;Registrar</a>
                            <div class="dropdown-menu"><a class="dropdown-item" data-toggle="modal" href="#nuevo_usuario">Agregar</a>
                            <a class="dropdown-item" data-toggle="modal" href="#modificar_usuario">Modificar</a>
                            <a class="dropdown-item" data-toggle="modal" href="#eliminar_usuario">Eliminar</a>
                            <a class="dropdown-item" data-toggle="modal" href="#listar_usuario">Listar</a></div>
                    </li>
                    <li class="nav-item dropdown" style="padding: 0px;color: rgb(237,238,241);">
                        <a class="dropdown-toggle nav-link" aria-expanded="false" data-toggle="dropdown" href="#" style="color: rgb(231,233,239);font-size: 13,6px;"><i class="fa fa-vcard"></i>&nbsp;Tags RFID</a>
                        <div class="dropdown-menu"><a class="dropdown-item" href="#">Agregar</a><a class="dropdown-item" href="#">Eliminar</a><a class="dropdown-item" href="#">Listar</a></div>
                    </li>
                    <li class="nav-item"><a class="nav-link" href="blank.html"><i class="fas fa-window-maximize"></i><span>Reportes</span></a></li>
                </ul>
                <div class="text-center d-none d-md-inline"><button class="btn rounded-circle border-0" id="sidebarToggle" type="button"></button></div>
            </div>
        </nav>
        <div class="d-flex flex-column" id="content-wrapper">
            <div id="content">
                <nav class="navbar navbar-light navbar-expand bg-white shadow mb-4 topbar static-top">
                    <div class="container-fluid"><button class="btn btn-link d-md-none rounded-circle mr-3" id="sidebarToggleTop" type="button"><i class="fas fa-bars"></i></button></div>
                </nav>
                <div class="container-fluid">
                    <div class="d-sm-flex justify-content-between align-items-center mb-4">
                        <h3 class="text-dark mb-0">Monitoreo ESP32</h3><a class="btn btn-primary btn-sm d-none d-sm-inline-block" role="button" href="#"><i class="fas fa-download fa-sm text-white-50"></i>&nbsp;Generate Report</a>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-xl-3 mb-4">
                            <div class="card shadow border-left-primary py-2">
                                <div class="card-body">
                                    <div class="row align-items-center no-gutters">
                                        <div class="col mr-2">
                                            <div class="text-uppercase text-primary font-weight-bold text-xs mb-1"><span>temperaura</span></div>
                                            <div class="text-dark font-weight-bold h5 mb-0"><span id="temp"></span></div>
                                        </div>
                                        <div class="col-auto"><i class="fas fa-temperature-high fa-2x text-gray-300"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-xl-3 mb-4">
                            <div class="card shadow border-left-success py-2">
                                <div class="card-body">
                                    <div class="row align-items-center no-gutters">
                                        <div class="col mr-2">
                                            <div class="text-uppercase text-success font-weight-bold text-xs mb-1"><span>humedad</span></div>
                                            <div class="text-dark font-weight-bold h5 mb-0"><span id="hum"></span></div>
                                        </div>
                                        <div class="col-auto"><i class="fas fa-cloud-rain fa-2x text-gray-300"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-xl-3 mb-4">
                            <div class="card shadow border-left-warning py-2">
                                <div class="card-body">
                                    <div class="row align-items-center no-gutters">
                                        <div class="col mr-2">
                                            <div class="text-uppercase text-warning font-weight-bold text-xs mb-1"><span>Sensor Gas</span></div>
                                            <div class="text-dark font-weight-bold h5 mb-0"><span id="gas"></span></div>
                                        </div>
                                        <div class="col-auto"><i class="fab fa-soundcloud fa-2x text-gray-300"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-xl-3 mb-4">
                            <div class="card shadow border-left-primary py-2">
                                <div class="card-body">
                                    <div class="row align-items-center no-gutters">
                                        <div class="col mr-2">
                                            <div class="text-uppercase text-primary font-weight-bold text-xs mb-1"><span>ESTADO LED</span></div>
                                            <div class="text-dark font-weight-bold h5 mb-0"><span id="led"></span></div>
                                        </div>
                                        <div class="col-auto"><i class="fas fa-lightbulb fa-2x text-gray-300"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-xl-3 mb-4">
                            <div class="card shadow border-left-success py-2">
                                <div class="card-body">
                                    <div class="row align-items-center no-gutters">
                                        <div class="col mr-2">
                                            <div class="text-uppercase text-success font-weight-bold text-xs mb-1"><span>ESTADO RELE</span></div>
                                            <div class="text-dark font-weight-bold h5 mb-0"><span id="rele"></span></div>
                                        </div>
                                        <div class="col-auto"><i class="fas fa-ethernet fa-2x text-gray-300"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-xl-3 mb-4">
                            <div class="card shadow border-left-warning py-2">
                                <div class="card-body">
                                    <div class="row align-items-center no-gutters">
                                        <div class="col mr-2">
                                            <div class="text-uppercase text-warning font-weight-bold text-xs mb-1"><span>HORA Y FECHA</span></div>
                                            <div class="text-dark font-weight-bold h5 mb-0"><span id="tiempo"></span></div>
                                        </div>
                                        <div class="col-auto"><i class="fas fa-calendar-alt fa-2x text-gray-300"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- Start: Chart -->
                    <div class="row">
                        <div class="col-lg-7 col-xl-8">
                            <div class="card shadow mb-4">
                                <div class="card-header d-flex justify-content-between align-items-center">
                                    <h6 class="text-primary font-weight-bold m-0">LECTURAS DE TEMPERATURAS</h6>
                                </div>
                                <div class="card-body" style="width:700px; height:100px;">
                                    <div class="chart-area"><canvas id="graphCanvas2"></canvas></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-5 col-xl-4">
                            <div class="card shadow mb-4">
                                <div class="card-header d-flex justify-content-between align-items-center">
                                    <h6 class="text-primary font-weight-bold m-0">GRAFICA SENSORES</h6>
                                </div>
                                <div class="card-body">
                                    <div class="chart-area"><canvas id="graphCanvas"></canvas></div>
                                </div>
                            </div>
                        </div>
                    </div><!-- End: Chart -->
                    <div class="row">
                        <div class="col-lg-6 mb-4">
                            <div class="card shadow mb-4">
                                <div class="card-header py-3">
                                    <h6 class="text-primary font-weight-bold m-0">SENSORES</h6>
                                </div>
                                <div class="card-body">
                                    
                                    <h4 class="small font-weight-bold">TEMPERATURA<span class="float-right" id="temp"></span></h4>
                                    
                                    <div class="chart-area"><canvas id="temperatura"></canvas></div>
                                
                                </div>
                                <div class="card-body">
                                    
                                    <h4 class="small font-weight-bold">HUMEDAD<span class="float-right" id="hum"></span></h4>
                                    
                                    <div class="chart-area"><canvas id="humedad"></canvas></div>
                                
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="row">
                                <div class="col-lg-6 mb-4">
                                    <div class="card shadow">
                                        <div class="card-body"><button class="btn btn-primary btn-block btn-lg actuador" id="ledon" type="button">Encender&nbsp; Led</button></div>
                                    </div>
                                </div>
                                <div class="col-lg-6 mb-4">
                                    <div class="card shadow">
                                        <div class="card-body"><button class="btn btn-primary btn-block btn-lg actuador" id="ledoff" type="button">Apagar&nbsp; Led</button></div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6 mb-4">
                                    <div class="card shadow">
                                        <div class="card-body"><button class="btn btn-primary btn-block btn-lg actuador" id="activarrele" type="button">Activar Rele</button></div>
                                    </div>
                                </div>
                                <div class="col-lg-6 mb-4">
                                    <div class="card shadow">
                                        <div class="card-body"><button class="btn btn-primary btn-block btn-lg actuador" id="desactivarrele" type="button">Desactivar Rele</button></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <footer class="bg-white sticky-footer">
                <div class="container my-auto">
                    <div class="text-center my-auto copyright"><span>Copyright © ESP32_AGOSTO 2022</span></div>
                </div>
            </footer>
        </div><a class="border rounded d-inline scroll-to-top" href="#page-top"><i class="fas fa-angle-up"></i></a>
    </div>
        <div class="modal fade" role="dialog" tabindex="-1" id="nuevo_usuario">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Registro de Usuarios</h4><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    </div>
                    <div class="modal-body">
                        <div class="p-5">
                            <form class="user" method="post" action="guardar_usuario.php">
                                <div class="form-group row">
                                    <input class="form-control form-control-user" type="text" placeholder="Nombres de Usuario" name="nombres" required="" onKeyUp="this.value=this.value.toUpperCase();">
                                </div>
                                <div class="form-group row">
                                    <input class="form-control form-control-user" type="password" placeholder="Contraseña" name="password">
                                </div>
                                <div class="form-group row">
                                    <input class="form-control form-control-user" type="text" placeholder="Telefono" name="telefono" required="" inputmode="numeric">
                                </div>
                                <div class="form-group row">
                                    <select class="form-control" style="border-radius: 10PX;" name="cargo">
                                        <optgroup label="SELECCIONE CARGO">
                                            <option value="MONITOREO" selected="">MONITOREO</option>
                                            <option value="ADMINISTRADOR">ADMINISTRADOR</option>
                                        </optgroup>
                                    </select>
                                </div>
                                <div class="form-group row">
                                    <input class="form-control form-control-user" type="text" placeholder="Direccion" name="direccion" onKeyUp="this.value=this.value.toUpperCase();">
                                </div>
                                <div class="form-group row">
                                    <select class="form-control" style="border-radius: 10PX;" name="tag">
                                        <optgroup label="SELECCIONE TAG">
                                            <?php
                                                $sql=mysqli_query($conexion,"select tag from tags where estado='SIN ASIGNAR';");
                                                while($row=mysqli_fetch_array($sql))
                                                {
                                                    echo "<option value='".$row['tag']."'>".$row["tag"]."</option>";
                                                }
                                            ?>
                                            
                                        </optgroup>
                                    </select></div><button class="btn btn-primary btn-block text-white btn-user" type="submit">Registrar Usuario</button>
                                <hr>
                            </form>
                        </div>
                    </div>
                    <div class="modal-footer"><button class="btn btn-primary" type="button" data-dismiss="modal">Cerrar</button></div>
                </div>
            </div>
        </div>
    

    <div class="modal fade" role="dialog" tabindex="-1" id="listar_usuario">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Usuarios Registrados</h4><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    </div>
                    <div class="modal-body">
                        <div class="p-5">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Nombres</th>
                                        <th>Telefono</th>
                                        <th>Cargo</th>
                                        <th>Direccion</th>
                                        <th>Tag</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php
                                        $sql=mysqli_query($conexion,"select nombres,telefono,cargo,direccion,tag from usuarios order by nombres;");
                                        while($row=mysqli_fetch_array($sql))
                                        {
                                            echo "<tr>";
                                            echo "<td>".$row["nombres"]."</td>";
                                            echo "<td>".$row["telefono"]."</td>";
                                            echo "<td>".$row["cargo"]."</td>";
                                            echo "<td>".$row["direccion"]."</td>";
                                            echo "<td>".$row["tag"]."</td>";
                                            echo "</tr>";
                                        }
                                    ?>
                                </tbody>
                            </table>
                            
                                
                            <hr>
                            
                        </div>
                    </div>
                    <div class="modal-footer"><button class="btn btn-primary" type="button" data-dismiss="modal">Cerrar</button></div>
                </div>
            </div>
        </div>
   

    <div class="modal fade" role="dialog" tabindex="-1" id="modificar_usuario">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Modificar Usuarios</h4><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    </div>
                    <div class="modal-body">
                        <div class="p-5">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Nombres</th>
                                        <th>Tag</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                <?php
                                        $sql=mysqli_query($conexion,"select nombres,tag from usuarios;"); 
                                        while ($row = mysqli_fetch_array($sql))
                                        {
                                            echo "<tr>";
                                            echo "<form method='post' action='modificar.php'>";
                                            echo "<td><input name='nombres' readonly='' value='".$row['nombres']."' style='border:0px;width:200px;'></td>";
                                            echo "<td>".$row['tag']."</td>";
                                            echo "<td><button class='btn btn-info btn-circle ml-1' role='button' type='submit' ><i class='fas fa-user text-white'></i></button></td>";
                                            echo "</form>";
                                            echo "</tr>";
                                        }
                                ?>

                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer"><button class="btn btn-primary" type="button" data-dismiss="modal">Cerrar</button></div>
                </div>
            </div>
        </div>
    
        <div class="modal fade" role="dialog" tabindex="-1" id="eliminar_usuario">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Eliminar Usuarios</h4><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    </div>
                    <div class="modal-body">
                        <div class="p-5">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Nombres</th>
                                        <th>Tag</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                <?php
                                        $sql=mysqli_query($conexion,"select nombres,tag from usuarios;"); 
                                        while ($row = mysqli_fetch_array($sql))
                                        {
                                            echo "<tr>";
                                            echo "<form method='post' action='eliminar.php'>";
                                            echo "<td><input name='nombres' readonly='' value='".$row['nombres']."' style='border:0px;width:200px;'></td>";
                                            echo "<td>".$row['tag']."</td>";
                                            echo "<td><button class='btn btn-info btn-circle ml-1' role='button' type='submit' ><i class='fas fa-user text-white'></i></button></td>";
                                            echo "</form>";
                                            echo "</tr>";
                                        }
                                ?>

                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer"><button class="btn btn-primary" type="button" data-dismiss="modal">Cerrar</button></div>
                </div>
            </div>
        </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
    <script>
        $(document).ready(function () {
            graficas();
        });
        
        $(document).ready(function()
        {
            $(".actuador").click(function()
            {
                var p = $(this).attr('id'); 
                $.get("http://192.168.10.20:80/get?actuador="+p,); 
            }); 
        });
        function graficas()
        {
            showGraph();
            showGraph2();
        }

        function showGraph2()
        {
            {
                $.post("data2.php",
                function (data)
                {
                    console.log(data);
                     var name2 = [];
                     var k=0;
                     for(k=0;k<=7;k++)
                     {
                         name2[k]=data[k].temperatura;
                     }
                     var chartdata = 
                    {
                        labels: name2,
                        datasets: 
                        [
                            {
                                label: 'TEMPERATURA',
                                backgroundColor: '#49e2ff',
                                borderColor: '#46d5f1',
                                hoverBackgroundColor: '#CCCCCC',
                                hoverBorderColor: '#666666',
                                data: name2,
                                fill: false,
                                pointStyle: 'circle',
                                pointRadius: 5,
                                pointHoverRadius: 7,
                                lineTension: 0,
                            }
                        ]
                         
                    };
                         
                    
                   
                    var graphTarget = $("#graphCanvas2");
                    var chartOptions = {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero:true,
                                min: 0,
                                max: 100
                            }
                        }]
                    }
                    };

                    var barGraph = new Chart(graphTarget, 
                    {
                        type: 'line',
                        data: chartdata,
                        options: chartOptions
                    });

                });
            }
        }
        function showGraph()
        {
            {
                $.post("data.php",
                function (data)
                {
                    console.log(data);
                     var name = [];
                    name.push(data[0].temperatura);
                    name.push(data[0].humedad);
                    name.push(data[0].gas);
                    name.push(data[0].led);
                    name.push(data[0].rele);
                    name.push(data[0].fecha);
                    name.push(data[0].hora);
                    document.getElementById("temp").innerText=name[0];
                    document.getElementById("hum").innerText=name[1];
                    document.getElementById("gas").innerText=name[2];
                    document.getElementById("led").innerText=name[3];
                    document.getElementById("rele").innerText=name[4];
                    document.getElementById("tiempo").innerText=name[5]+" "+name[6];
                    var chartdata = 
                    {
                        labels: ['TEMPERATURA='+name[0],'HUMEDAD='+name[1],'GAS='+name[2]],
                        datasets: 
                        [
                            {
                                label: ['TEMPERATURA','HUMEDAD','GAS'],
                                backgroundColor: ['#5366f3','#07ca58','#0c737e'],
                                borderColor: ['#5366f3','#07ca58','#0c737e'],
                                hoverBackgroundColor: ['#CCCCCC','#CCCCCC','#CCCCCC'],
                                hoverBorderColor: ['#CCCCCC','#CCCCCC','#CCCCCC'],
                                data: [name[0],name[1],name[2]],
                                fill: false,
                                pointStyle: 'circle',
                                pointRadius: 5,
                                pointHoverRadius: 6,
                                lineTension: 0,
                            }
                        ]
                         
                    };
                    var temp = 
                    {
                        labels: ["TEMPERATURA="+name[0]],
                        datasets: 
                        [
                            {
                                label: 'TEMPERATURA',
                                backgroundColor: '#5366f3',
                                borderColor: '#5366f3',
                                hoverBackgroundColor: '#CCCCCC',
                                hoverBorderColor: '#CCCCCC',
                                data: [name[0]],
                            }
                        ]
                         
                    };
                    var hum = 
                    {
                        labels: ["HUMEDAD="+name[1]],
                        datasets: 
                        [
                            {
                                label: 'HUMEDAD',
                                backgroundColor: '#07ca58',
                                borderColor: '#07ca58',
                                hoverBackgroundColor: '#CCCCCC',
                                hoverBorderColor: '#CCCCCC',
                                data: [name[1]],
                            }
                        ]
                         
                    };
                    var graphTarget = $("#graphCanvas");
                    var tempe = $("#temperatura");
                    var hume = $("#humedad");
                    var chartOptions = {
                    scales: {
                        xAxes: [{
                            ticks: {
                                beginAtZero:true,
                                min: 0,
                                max: 100
                            }
                        }]
                    }
                    };
                    var chartOptions2 = {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero:true,
                                min: 0,
                                max: 100
                            }
                        }]
                    }
                    };

                    var barGraph = new Chart(graphTarget, 
                    {
                        type: 'pie',
                        data: chartdata
                    });
                    var barGraph1 = new Chart(tempe, 
                    {
                        type: 'horizontalBar',
                        data: temp,
                        options: chartOptions
                        
                    });
                    var barGraph2 = new Chart(hume, 
                    {
                        type: 'bar',
                        data: hum,
                        options: chartOptions2
                        
                    });

                });
            }
        }
        
        setInterval(graficas, 10000);        
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>
    <script src="assets/js/script.min.js?h=99c003fa89398340e3d8f90406f57bdc"></script>
</body>

</html>