<?php 
    session_start();
    include('../../validadores/validarSession.php');
    
    include('../StoGlobal/include/conexion.php');
    include('../StoGlobal/include/conexion1.php');
    include('../StoGlobal/include/conexion3.php');
    error_reporting(0);
    
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" href="../../img/LogoBG.png">

    <title>Dashboard - Desert</title>
    <!-- <link rel="stylesheet" href="styles/principal.css" type="text/css"> -->



    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/js/all.min.js" crossorigin="anonymous"></script>

    <style>


        /* Animate */

            /* Show UP */
                @-webkit-keyframes ShowUp {
                    from {
                        opacity: 0;
                        -webkit-transform: translate3d(0, -50px, 0);
                        transform: translate3d(0, -50px, 0);

                        /* transform: translateX(-1000px); */
                    }

                    to {
                        opacity: 1;
                        -webkit-transform: none;
                        transform: none;
                        /* transform: translateX(0px); */
                    }
                }

                @keyframes ShowUp {
                    from {
                        opacity: 0;
                        -webkit-transform: translate3d(0, -50px, 0);
                        transform: translate3d(0, -50px, 0);
                        /* transform: translateX(-1000px); */
                    }

                    to {
                        opacity: 1;
                        -webkit-transform: none;
                        transform: none;
                        /* transform: translateX(0px); */
                    }
                }

                .ShowUp {

                    -webkit-animation-duration: 2s;
                    animation-duration: 2s;
                    -webkit-animation-fill-mode: both;
                    animation-fill-mode: both;

                    -webkit-animation-name: ShowUp;
                    animation-name: ShowUp;
                }
            /* Fin Show UP */

            /* Show BOTTOM */
                @-webkit-keyframes ShowBottom {
                    from {
                        opacity: 0;
                        -webkit-transform: translate3d(0, 50px, 0);
                        transform: translate3d(0, 50px, 0);
                        /* transform: translateX(-1000px); */
                    }

                    to {
                        opacity: 1;
                        -webkit-transform: none;
                        transform: none;
                        /* transform: translateX(0px); */
                    }
                }

                @keyframes ShowBottom {
                    from {
                        opacity: 0;
                        -webkit-transform: translate3d(0, 50px, 0);
                        transform: translate3d(0, 50px, 0);
                        /* transform: translateX(-1000px); */
                    }

                    to {
                        opacity: 1;
                        -webkit-transform: none;
                        transform: none;
                        /* transform: translateX(0px); */
                    }
                }

                .ShowBottom {

                    -webkit-animation-duration: 2s;
                    animation-duration: 2s;
                    -webkit-animation-fill-mode: both;
                    animation-fill-mode: both;

                    -webkit-animation-name: ShowBottom;
                    animation-name: ShowBottom;
                }
            /* Fin Show BOTTOM */

            /* Show LEFT */
                @-webkit-keyframes ShowLeft {
                    from {
                        opacity: 0;
                        /*-webkit-transform: translate3d(100%, 0, 0);
                        transform: translate3d(100%, 0, 0);*/
                        -webkit-transform: translate3d(-50px, 0, 0);
                        transform: translate3d(-50px, 0, 0);

                        /* transform: translateX(-1000px); */
                    }

                    to {
                        opacity: 1;
                        -webkit-transform: none;
                        transform: none;
                        /* transform: translateX(0px); */
                    }
                }

                @keyframes ShowLeft {
                    from {
                        opacity: 0;
                        /*-webkit-transform: translate3d(100%, 0, 0);
                        transform: translate3d(100%, 0, 0);*/
                        -webkit-transform: translate3d(-50px, 0, 0);
                        transform: translate3d(-50px, 0, 0);
                        /* transform: translateX(-1000px); */
                    }

                    to {
                        opacity: 1;
                        -webkit-transform: none;
                        transform: none;
                        /* transform: translateX(0px); */
                    }
                }

                .ShowLeft {

                    -webkit-animation-duration: 2s;
                    animation-duration: 2s;
                    -webkit-animation-fill-mode: both;
                    animation-fill-mode: both;

                    -webkit-animation-name: ShowLeft;
                    animation-name: ShowLeft;
                }
            /* Fin Show LEFT */

            /* Show RIGHT */
                @-webkit-keyframes ShowRight {
                    from {
                        opacity: 0;
                        /*-webkit-transform: translate3d(100%, 0, 0);
                        transform: translate3d(100%, 0, 0);*/
                        -webkit-transform: translate3d(50px, 0, 0);
                        transform: translate3d(50px, 0, 0);

                        /* transform: translateX(-1000px); */
                    }

                    to {
                        opacity: 1;
                        -webkit-transform: none;
                        transform: none;
                        /* transform: translateX(0px); */
                    }
                }

                @keyframes ShowRight {
                    from {
                        opacity: 0;
                        /*-webkit-transform: translate3d(100%, 0, 0);
                        transform: translate3d(100%, 0, 0);*/
                        -webkit-transform: translate3d(50px, 0, 0);
                        transform: translate3d(50px, 0, 0);
                        /* transform: translateX(-1000px); */
                    }

                    to {
                        opacity: 1;
                        -webkit-transform: none;
                        transform: none;
                        /* transform: translateX(0px); */
                    }
                }

                .ShowRight {

                    -webkit-animation-duration: 2s;
                    animation-duration: 2s;
                    -webkit-animation-fill-mode: both;
                    animation-fill-mode: both;

                    -webkit-animation-name: ShowRight;
                    animation-name: ShowRight;
                }
            /* Fin Show RIGHT */
        /* Fin Animate */

                

                
               

                
   
    </style>


<script type="text/javascript" src="../../js/sweetalert2.js"></script>
    <script type="text/javascript" src="../../js/sweetalert2.min.js"></script>
    <link rel="stylesheet" href="../../css/sweetalert2.css" type="text/css">
    <link rel="stylesheet" href="../../css/sweetalert2.min.css" type="text/css">
    <script src="../../js/jquery-2.1.4.min.js"></script>

</head>
<body class="w-100" style="background-color: rgb(5 96 103); ">

     <?php
        include('../../NavBar.php');
    ?>
        <div class="w-100" >
            <div class="container display:flex " style="padding-top:60px; max-width:90%; max-height:100%;">

                <div class="row w-100 mt-1 text-center">

                    <div class="mb-3 pt-5" style="text-align:center;">
                        <h1>DesertGraphicsLtda</h1>
                    </div>
                
                    <div class="col-md-3 w-100 p-2 ShowUp" >

                        <div class="card text-whitebg-gradient"  >
                            <div class="card-body d-flex">                                

                                <div class="card text-white bg-warning bg-gradient w-50 p-2 m-1 m-auto" >
                                    <div class='d-flex'>
                                    
                                        <div class="form-floating  w-75 m-auto mt-4">
                                            <div class="card-header w-100 fs-6 text-dark fw-bolder">Valor del Dolar </div>
                                            <select name="BrutoNeto" id="BrutoNeto" onchange="sumar();"   class="form-select" required>
                                                <option value="0" selected>Selecciona la operación </option>
                                                <option value="1" >Valor Neto</option>
                                                <option value="2" >Valor Bruto</option>
                                                <option value="3" >Dolar a CLP</option>
                                            </select>
                                            <!-- <label for="floatingSelectGrid">Selecciona la operación</label> -->
                                        </div>
                                    </div>
                                    <div class='' style="display:none" id="selectInput" >
                                        <div class=' w-75 m-auto p-3 text-left' id='vari'>
                                            <input type='text' class='form-control text-left' id='vari1'  onchange="sumar();"  name='vari1' >
                                        </div>
                                    </div>
                                </div>



                                <div class="card text-white bg-danger bg-gradient  w-50 p-2 m-1 " style="display:none" id="NetoBrutoDiv"  onchange="sumar();"  >
                                    <div class='w-75 m-auto'>
                                        <div class="h6" id="textNeto">Neto</div>
                                        <input type="text" class='form-control text-left' id="neto">
                                    </div>
                                    <div class=' w-75 m-auto text-left'>
                                        <div class="h6">IVA</div>
                                        <input type="text" class='form-control text-left' id="iva">
                                    </div>

                                    <div class='w-75 m-auto'>
                                        <div class="h6" id="textBruto">Bruto</div>
                                        <input type="text" class='form-control text-left' placeholder="Bruto" id="bruto">
                                    </div>
                                </div>

                                <div class="card text-white bg-danger bg-gradient  w-50 p-2 m-1 " style="display:none" id="DolarDiv"  onchange="sumar();"  >
                                    <div class='w-75 m-auto'>
                                        <div class="h6" id="textNeto">Valor del Dolar</div>
                                        <input type="text" class='form-control text-left' id="USD" value="840">
                                    </div>

                                    <div class='w-75 m-auto'>
                                        <div class="h6" id="textBruto">CLP</div>
                                        <input type="text" class='form-control text-left' id="CLP">
                                    </div>
                                </div>

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

                <script>
                    // si la respuesta que se espera es sumar
                    function sumar(){
                        var numero1 = document.getElementById('vari1').value;
                        var usd = document.getElementById('USD').value;
                        var selector = document.getElementById('BrutoNeto').value;
                        var NetoBrutoDiv = document.getElementById("NetoBrutoDiv");
                        var Dolar = document.getElementById("DolarDiv");
                        var selectInput = document.getElementById("selectInput");

                        if(selector==0){
                            NetoBrutoDiv.style.display = "none";
                            Dolar.style.display = "none";
                            selectInput.style.display = "none";
                        }
                        
                        if(selector==1){
                            NetoBrutoDiv.style.display = "block";
                            Dolar.style.display = "none";
                            selectInput.style.display = "block";
                            if(numero1!==''){
                                //Neto
                                
                                var neto = parseInt(numero1);
                                var iva = parseInt(numero1)*0.19;
                                var bruto = neto+iva;
                                
                                document.getElementById('neto').value = Math.floor(neto);
                                document.getElementById('iva').value = Math.floor(iva);
                                document.getElementById('bruto').value = Math.floor(bruto);
                                document.getElementById("textBruto").style.color = "white";
                                document.getElementById("textNeto").style.color = "black";
                            }
                        }
                        if(selector==2){
                            NetoBrutoDiv.style.display = "block";
                            Dolar.style.display = "none";
                            selectInput.style.display = "block";
                            if(numero1!==''){
                                
                                //Bruto
                                var neto = parseInt(numero1)/1.19;
                                var bruto = parseInt(numero1);
                                var iva = bruto-neto;
                                
                                document.getElementById('neto').value = Math.floor(neto);
                                document.getElementById('iva').value = Math.floor(iva);
                                document.getElementById('bruto').value = Math.floor(bruto);
                                document.getElementById("textNeto").style.color = "white";
                                document.getElementById("textBruto").style.color = "black";
                            }
                        }
                        if(selector==3){

                            NetoBrutoDiv.style.display = "none";
                            Dolar.style.display = "block";
                            selectInput.style.display = "block";

                            if(numero1!==''){
                                
                                //Bruto
                                var USDaCLP = parseInt(numero1)*usd;
                                document.getElementById('CLP').value = USDaCLP;
                                // document.getElementById("textNeto").style.color = "white";
                                // document.getElementById("textBruto").style.color = "black";
                            
                            }
                        }
                        
                    }
                </script>


                <div class="row w-100 mt-1 text-center">
                    

                    <div class="col-md-3 w-50 p-2 ShowUp" >
                        <div class="card text-whitebg-gradient"  >
                            <div class="card-header fs-6 ">Resumen Costos</div>
                            <div class="card-body d-flex">

                                <div class="card text-white bg-warning bg-gradient w-50 m-1" >
                                    <div class="card-header fs-6 text-dark fw-bolder">Tools(Herramientas) </div>
                                    <div class="card-body">
                                        <h5 class="card-title fw-normal">
                                            <?php 
                                                $sqlBencina=mysqli_query($con,"select SUM(valor_bruto) as valor_bruto from sto_insumos where estado='1'");
                                                while($row7=mysqli_fetch_array($sqlBencina))
                                                { 
                                                    $ValorTotalHerramientas=$row7['valor_bruto'];  
                                                    echo " $";echo number_format($ValorTotalHerramientas,0,",",".");;
                                                }
                                            ?>
                                        </h5>
                                    
                                    </div>
                                </div>
                                <div class="card text-white bg-warning bg-gradient w-50 m-1" >
                                    <div class="card-header fs-6 text-dark fw-bolder">Store(Bodega StoGlobal)</div>
                                    <div class="card-body">
                                        <h5 class="card-title fw-normal">
                                            <?php 

                                                $precioProductosfila1=0;
                                                $query1 = "select * from sto_bodega where estado='1'";
                                                $stmt1 = $DBcon->prepare( $query1 );
                                                $stmt1->execute();
                                                if($stmt1->rowCount() > 0) {
                                                    while($row1=$stmt1->fetch(PDO::FETCH_ASSOC)) {
                                                        extract($row1);

                                                        // echo $cod_producto;

                                                        $precioProductosfila=$precio_venta*$stock_actual;

                                                     
                                                        $precioProductosfila1=$precioProductosfila+$precioProductosfila1;
                                                    }
                                                   
                                                    
                                                    // echo round($precioProductoFinal);
                                                    echo " $";echo number_format($precioProductosfila1,0,",",".");;

                                                }
                                                
                                            ?>    
                                        </h5>
                                    
                                    </div>
                                </div>

                                <div class="card text-white bg-danger bg-gradient  w-50 m-1"  >
                                    <div class="card-header fs-6 text-dark fw-bolder text-dark fw-bolder"> Gas</div>
                                    <div class="card-body">
                                        <h5 class="card-title fw-normal">-</h5>
                                    </div>
                                </div>

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

                    <div class="col-md-3 w-50 m-auto p-2 ShowUp " >
                        <div class="card text-black "  >
                            <div class="card-header w-100 d-flex">
                                <div class="fs-6  w-50">Neto ></div>
                                <div class=" w-50 "> 
                                    <h5 class="fw-normal w-100 m-auto border-bottom border-4 border-success" style="border-width:1px;">
                                    </h5>
                                </div>
                            <div>
                           
                            </div>
                            </div>
                            
                            <div class="card-body d-flex ">

                                <div class="card text-white bg-success bg-gradient w-50 m-1" >
                                    <div class="card-header fs-6 text-dark fw-bolder">Km</div>
                                    <div class="card-body">
                                        <h5 class="card-title fw-normal">
                                        </h5>
                                    
                                    </div>
                                </div>

                                <div class="card text-white bg-success bg-gradient w-50 m-1" >
                                    <div class="card-header fs-6 text-dark fw-bolder">Otros</div>
                                    <div class="card-body">
                                        <h5 class="card-title fw-normal">
                                        </h5>
                                    
                                    </div>
                                </div>

                                <div class="card text-white bg-success bg-gradient  w-50 m-1"  >
                                    <div class="card-header fs-6 text-dark fw-bolder">Viajes</div>
                                    <div class="card-body">
                                        <h5 class="card-title fw-normal"></h5>
                                    </div>
                                </div>
                                

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

                    <div class=" row m-auto  w-100 ShowBottom"  >
                        <!-- <div class="col-xl-7 m-auto">
                            <div class="card mb-4">
                                <div class="card-header">
                                <i class="fas fa-chart-area mr-1"></i>
                                Area Chart Example
                                </div>
                                <div class="card-body"><canvas id="myAreaChart" width="100%" height="40"></canvas></div>
                            </div>
                        </div> -->

                        <div class=" col-xl-12 "  >
                            <div class="card mb-4">
                                <div class="card-header">
                                <i class="fas fa-chart-bar mr-1"></i>
                                Balance Mensual
                                </div>
                                <div class="card-body"><canvas id="myBarChart" height="65" ></canvas></div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
            
   
</body>
</html>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>


        <script src="js/scripts.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
        <script src="assets/demo/chart-area-demo.js"></script>
        <script src="assets/demo/chart-bar-demo.js"></script>
        <script src="assets/demo/chart-pie-demo.js"></script>

       

        <script>
            // Set new default font family and font color to mimic Bootstrap's default styling
            Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
            Chart.defaults.global.defaultFontColor = 'black';

            // Bar Chart Example
            var ctx = document.getElementById("myBarChart");
            var myLineChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio","Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
                datasets: [{
                label: "Sueldo Neto",
                backgroundColor: "rgba(2,117,216,1)",
                borderColor: "rgba(2,117,216,1)",

            


                data: [
                   
                        <?php 
                            $AnioActual = date("Y");
                            echo $fecha_actual;
                            $fecha_in=$AnioActual."-01";
                            $fecha_fin=$AnioActual."-12";
                            $sql222=mysqli_query($con,"select sueldoNeto from meses where fecha BETWEEN '{$fecha_in}' AND '{$fecha_fin}'");
                            while($row222=mysqli_fetch_array($sql222))
                            {
                                echo($row222['sueldoNeto'].",");
                            }

                        ?>
                    ],
                }],
            },
            options: {
                scales: {
                    xAxes: [{
                        time: {
                        unit: 'month'
                        },
                        gridLines: {
                        display: false
                        },
                        ticks: {
                        maxTicksLimit: 12
                        }
                    }],
                    yAxes: [{
                        ticks: {
                        min: 0,
                        max: 1200000,
                        maxTicksLimit: 12
                        },
                        gridLines: {
                        display: true
                        }
                    }],
                },
                legend: {
                display: false
                }
            }
            });
        </script>