<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <title>The Blue Boat Initiative</title>
        <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
        <!-- Font Awesome icons (free version)-->
        <script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
        <!-- Google fonts-->
        <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" />
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet" />
        <link href="https://demos.creative-tim.com/black-dashboard/assets/css/black-dashboard.min.css?v=1.0.0" rel="stylesheet">
        <!-- Core theme CSS (includes Bootstrap)-->
        <link href="css/styles.css" rel="stylesheet" />

        <!-- Bootstrap core JS-->
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
        <!-- Core theme JS-->
        <script src="js/scripts.js"></script>
        <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
        <!-- * *                               SB Forms JS                               * *-->
        <!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->
        <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
        <script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
        <script src="https://demos.creative-tim.com/black-dashboard/assets/js/plugins/chartjs.min.js"></script>
    </head>
    <body id="page-top">
        <!-- Navigation-->
        <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
            <div class="container px-4 px-lg-5">
                <a class="navbar-brand" href="#page-top"><img src="assets/img/logo.png" /></a>
                <button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                    Menu
                    <i class="fas fa-bars"></i>
                </button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ms-auto">
                        <li class="nav-item"><a class="nav-link" href="#var1">Variables Oceanográficas</a></li>
                        <li class="nav-item"><a class="nav-link" href="#var2">Variables Acústicas</a></li>
                        <li class="nav-item"><a class="nav-link" href="#var3">Conoce los oceanos</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <!-- Masthead-->
        <header class="masthead">
            <div class="container px-4 px-lg-5 d-flex h-100 justify-content-center pt-120">
                <div class="d-flex justify-content-center">
                    <div class="text-center">
                        <h1 class="mx-auto my-0 text-uppercase">THE BLUE BOAT INITIATIVE</h1>
                        <h2 class="text-white-50 mx-auto mt-4 mb-5">Conoce, escucha y revisa material directo desde el oceano y en tiempo real</h2>
                        <a class="btn-tbbp" href="#var1">Comenzar</a>
                    </div>
                </div>
            </div>
        </header>
        <!-- Oceanograficas -->
        <section class="about-section text-center hv-100" id="var1">
            <div class="container px-2 px-lg-2">
                <div class="row gx-2 gx-lg-2">
                    <div class="col-lg-12 mt-5">
                        <h5 class="text-left pb-3">Variables Oceanográficas</h5>
                        <div class="row">
                            <div class="col-6 pt-3">
                                <ul class="nav nav-pills mb-5" id="pills-tab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                      <button class="nav-link active" id="pills-salinidad-tab" data-bs-toggle="pill" data-bs-target="#pills-salinidad" type="button" role="tab" aria-controls="pills-salinidad" aria-selected="true">Salinidad</button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                      <button class="nav-link" id="pills-temperatura-tab" data-bs-toggle="pill" data-bs-target="#pills-temperatura" type="button" role="tab" aria-controls="pills-temperatura" aria-selected="false">Temperatura</button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                      <button class="nav-link" id="pills-oxigeno-tab" data-bs-toggle="pill" data-bs-target="#pills-oxigeno" type="button" role="tab" aria-controls="pills-oxigeno" aria-selected="false">Oxígeno Disuelto</button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="pills-clorofila-tab" data-bs-toggle="pill" data-bs-target="#pills-clorofila" type="button" role="tab" aria-controls="pills-clorofila" aria-selected="false">Clorofila</button>
                                    </li> 
                                </ul>
                            </div>
                            <div class="col-6 text-right">
                                <div class="form-tbb">
                                    <label>País:</label>
                                    <div class="darkselect-wrapper">
                                        <select class="darkselect">
                                            <option value="">Chile</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-tbb ml-2">
                                    <label>Desde:</label>
                                    <div class="input-wrapper">
                                        <input type="date" value="2023-01-01" class="darkinput" id="from" />
                                    </div>
                                </div>
                                <div class="form-tbb ml-2">
                                    <label>Hasta:</label>
                                    <div class="input-wrapper">
                                        <input type="date" value="2023-03-02" class="darkinput" id="to" disabled />
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-content mb-5" id="pills-tabContent">
                            <div class="tab-pane fade show active" id="pills-salinidad" role="tabpanel" aria-labelledby="pills-salinidad-tab">
                                <div class="chart-area">
                                    <canvas id="chartLine1"></canvas>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pills-temperatura" role="tabpanel" aria-labelledby="pills-temperatura-tab">
                                <div class="chart-area">
                                    <canvas id="chartLine2"></canvas>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pills-oxigeno" role="tabpanel" aria-labelledby="pills-oxigeno-tab">
                                <div class="chart-area">
                                    <canvas id="chartLine3"></canvas>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pills-clorofila" role="tabpanel" aria-labelledby="pills-clorofila-tab">
                                <div class="chart-area">
                                    <canvas id="chartLine4"></canvas>
                                </div>
                            </div>
                        </div>



                    </div>
                </div> 
            </div>
        </section>
        <!-- Acustica -->
        <section class="about-section text-center hv-100" id="var2">
            <div class="container px-2 px-lg-2">
                <div class="row gx-2 gx-lg-2">
                    <div class="col-lg-12 mt-5">
                        <h5 class="text-left pb-1">Variables acústicas</h5>
                        <div class="pt-1 text-left"><em style="padding:0;margin:0;font-size:12px;color:#FFF;text-align:left;">Actualización: 2023-02-06 17:15:31 UTC</em></div>
                        <div class="row">
                            <div class="col-6 pt-3">
                                <ul class="nav nav-pills mb-5" id="pills-tab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                      <button class="nav-link active" id="pills-listen-tab" data-bs-toggle="pill" data-bs-target="#pills-salinidad" type="button" role="tab" aria-controls="pills-listen" aria-selected="true">Escucha las ballenas</button>
                                    </li> 
                                </ul>
                            </div>
                            <div class="col-6 text-right">
 
                            </div>
                        </div>

                        <div class="tab-content mb-5" id="pills-tabContent">
                            <div class="tab-pane fade show active" id="pills-listen" role="tabpanel" aria-labelledby="pills-listen-tab">
                            <audio style="width:100%; height:400px;" controls> 
                            <source src="mar.mp3" type="audio/mpeg"> 
                            </audio>
                            </div> 
                        </div>



                    </div>
                </div> 
            </div>
        </section>
        <!-- Conoce-->
        <section class="projects-section bg-light" id="var3">
            <div class="container px-4 px-lg-5">
                <!-- Featured Project Row-->
                <div class="row gx-0 mb-4 mb-lg-5 align-items-center">
                    <div class="col-xl-8 col-lg-7"><img class="img-fluid mb-3 mb-lg-0" src="assets/img/cetaceos-7.jpg" alt="..." /></div>
                    <div class="col-xl-4 col-lg-5">
                        <div class="featured-text text-center text-lg-left">
                            <h4>Dataset 1</h4>
                            <p class="text-black-50 mb-0">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever.</p>
                        </div>
                    </div>
                </div>
                <!-- Project One Row-->
                <div class="row gx-0 mb-5 mb-lg-0 justify-content-center">
                    <div class="col-lg-6"><img class="img-fluid" src="assets/img/cetaceos-7.jpg" alt="..." /></div>
                    <div class="col-lg-6">
                        <div class="bg-black text-center h-100 project">
                            <div class="d-flex h-100">
                                <div class="project-text w-100 my-auto text-center text-lg-left">
                                    <h4 class="text-white">Dataset 2</h4>
                                    <p class="mb-0 text-white-50">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever..</p>
                                    <hr class="d-none d-lg-block mb-0 ms-0" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Project Two Row-->
                <div class="row gx-0 justify-content-center">
                    <div class="col-lg-6"><img class="img-fluid" src="assets/img/cetaceos-7.jpg" alt="..." /></div>
                    <div class="col-lg-6 order-lg-first">
                        <div class="bg-black text-center h-100 project">
                            <div class="d-flex h-100">
                                <div class="project-text w-100 my-auto text-center text-lg-right">
                                    <h4 class="text-white">Dataset 3</h4>
                                    <p class="mb-0 text-white-50">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever.!</p>
                                    <hr class="d-none d-lg-block mb-0 me-0" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section> 
        <!-- Footer-->
        <footer class="footer bg-black small text-center text-white-50"><div class="container px-4 px-lg-5">Copyright 2023 &copy; Fundación Meri</div></footer>

        <script type="text/javascript">
            jQuery(document).ready( function() {
            document.getElementById('from').value = "2023-01-01";
            document.getElementById('to').value = "2023-02-06";
            // Javascript method's body can be found in assets/js/demos.js
            var gradientChartOptionsConfigurationWithTooltipPurple = {
                maintainAspectRatio: false,
                legend: {
                    display: false
                },
                tooltips: {
                    backgroundColor: '#f5f5f5',
                    titleFontColor: '#333',
                    bodyFontColor: '#666',
                    bodySpacing: 4,
                    xPadding: 12,
                    mode: "nearest",
                    intersect: 0,
                    position: "nearest"
                },
                responsive: true,
                scales: {
                    yAxes: [{ 
                        gridLines: {
                        drawBorder: false,
                        color: 'rgba(29,140,248,0.0)',
                        zeroLineColor: "transparent",
                        },
                        ticks: {
                            suggestedMin: 0,
                            suggestedMax: 1,
                            padding: 20,
                            fontColor: "#9a9a9a"
                        }
                    }],

                    xAxes: [{ 
                        gridLines: {
                            drawBorder: false,
                            color: 'rgba(225,78,202,0.1)',
                            zeroLineColor: "transparent",
                        },
                        ticks: { 
                            fontColor: "#9a9a9a"
                        }
                    }]
                }
            };

            var d1 = [];
            var d2 = [];
            var d3 = [];
            var d4 = [];

            
            var ctx1 = document.getElementById("chartLine1").getContext("2d");
            var ctx2 = document.getElementById("chartLine2").getContext("2d");
            var ctx3 = document.getElementById("chartLine3").getContext("2d");
            var ctx4 = document.getElementById("chartLine4").getContext("2d");
            var gradientStroke1 = ctx1.createLinearGradient(0, 230, 0, 50);
            var gradientStroke2 = ctx2.createLinearGradient(0, 230, 0, 50);
            var gradientStroke3 = ctx3.createLinearGradient(0, 230, 0, 50);
            var gradientStroke4 = ctx4.createLinearGradient(0, 230, 0, 50);
            
            gradientStroke1.addColorStop(1, 'rgba(72,72,176,0.2)');
            gradientStroke1.addColorStop(0.2, 'rgba(72,72,176,0.0)');
            gradientStroke1.addColorStop(0, 'rgba(119,52,169,0)'); //purple colors
            gradientStroke2.addColorStop(1, 'rgba(72,72,176,0.2)');
            gradientStroke2.addColorStop(0.2, 'rgba(72,72,176,0.0)');
            gradientStroke2.addColorStop(0, 'rgba(119,52,169,0)'); //purple colors
            gradientStroke3.addColorStop(1, 'rgba(72,72,176,0.2)');
            gradientStroke3.addColorStop(0.2, 'rgba(72,72,176,0.0)');
            gradientStroke3.addColorStop(0, 'rgba(119,52,169,0)'); //purple colors
            gradientStroke4.addColorStop(1, 'rgba(72,72,176,0.2)');
            gradientStroke4.addColorStop(0.2, 'rgba(72,72,176,0.0)');
            gradientStroke4.addColorStop(0, 'rgba(119,52,169,0)'); //purple colors

            
            var data = {
                    <?php 
                    if ($_GET["from"]) { $from = $_GET["from"]; } else { $from = "2023-01-01"; }
                    if ($_GET["to"]) { $to = $_GET["to"]; } else { $to = "2023-02-06"; }

                    $begin = new DateTime($from);
                    $end = new DateTime($to);

                    $interval = DateInterval::createFromDateString('1 day');
                    $period = new DatePeriod($begin, $interval, $end);
                    $dadys=[];
                    foreach ($period as $dt) {
                        $dadys[] = $dt->format("Y-m-d");
                    }
                    ?>
                    labels: ['<?=implode("','", $dadys);?>'],
                    datasets: [{
                        label: "Medida",
                        fill: true,
                        backgroundColor: null,
                        borderColor: 'rgba(100,161,157,1)',
                        borderWidth: 2,
                        borderDash: [],
                        borderDashOffset: 0.0,
                        pointBackgroundColor: 'rgba(100,161,157,1)',
                        pointBorderColor: 'rgba(100,161,157,0)',
                        pointHoverBackgroundColor: '#d048b6',
                        pointBorderWidth: 20,
                        pointHoverRadius: 4,
                        pointHoverBorderWidth: 15,
                        pointRadius: 4,
                        data: null
                    }]
            };
            <?php 
            $begin = new DateTime($from);
            $end = new DateTime($to);

            $interval = DateInterval::createFromDateString('1 day');
            $period = new DatePeriod($begin, $interval, $end);

            $v = [  0.24,0.24,0.26,0.25,0.24,0.33,0.55,0.66,0.31,0.41,0.11,0.33,0.14,0.19,0.3,0.14,0.5,0.04,0.25,0.24,0.25,0.24,0.25,0.24,0.25,
                    0.21,0.31,0.31,0.13,0.14,0.62,0.34,0.65,0.14,0.15,0.14,0.33,0.14,0.19,0.3,0.14,0.5,0.04,0.33,0.14,0.19,0.3,0.14,0.5,0.04,
                    0.14,0.15,0.14,0.14,0.15,0.14,0.14,0.14,0.14];
            foreach ($period as $di=>$dt) {
                ?>
                d1.push(<?=$v[$di];?>);
                <?php
            }
            ?>
            console.log(d1);
            var data1 = JSON.parse(JSON.stringify(data));
            data1.datasets[0].data = d1; 
            data1.datasets[0].backgroundColor = gradientStroke1;
            console.log(data1);
            

            <?php 
            $begin = new DateTime($from);
            $end = new DateTime($to);

            $interval = DateInterval::createFromDateString('1 day');
            $period = new DatePeriod($begin, $interval, $end);

            $v = [  14,15,15.6,17.5,15.4,13.4,11.3,16.5,16.3,11.5,6.5,6.3,6.5,6.9,6.3,6.5,6.3,4.5,11.3,16.5,16.3,11.5,11.9,11.3,16.5,16.3,11.5,
            6.5,6.3,4.5,3.9,2.3,8.5,7.3,11.5,6.5,6.3,6.5,6.9,6.3,6.5,6.3,4.5,
                    5.5,6.9,7.3,6.5,6.3,6.5,6.9,6.3,6.5,6.3,4.5,3.9,2.3,8.5,7.3,7.5,6.9,6.3,7.5,8.3,10.5,11.9,12.3,13.5];
            foreach ($period as $di=>$dt) {
                ?>
                d2.push(<?=$v[$di];?>);
                <?php
            }
            ?>
            var data2 = JSON.parse(JSON.stringify(data));
            data2.datasets[0].label = "Temperatura (C)";
            data2.datasets[0].data = d2;
            data2.datasets[0].backgroundColor = gradientStroke2;

            <?php 
            $begin = new DateTime($from);
            $end = new DateTime($to);

            $interval = DateInterval::createFromDateString('1 day');
            $period = new DatePeriod($begin, $interval, $end);

            $v = [  6.2, 6.241,6.876,6.541,5.673,4.368,6.879,6.167,6.239,6.825,6.21,6.11,6.167,6.239,6.825,6.21,6.11,5.673,4.368,5.673,4.368,5.673,4.368,6.2, 6.241,6.876,6.541,6.2, 6.241,6.876,6.541,6.2, 6.241,6.876,6.541,
            6.2, 6.241, 6.876, 6.541, 6.241, 6.876, 6.541, 6.2, 6.241,6.876,6.541, 6.2, 6.241,6.876,6.5412, 6.241,6.876,6.541,6.2, 6.241,6.876,
            6.541,6.167,6.239,6.825,6.21,6.11,5.673,6.167,6.239,6.825,6.21,6.11,5.673,4.5,6.11];
            foreach ($period as $di=>$dt) {
                ?>
                d3.push(<?=$v[$di];?>);
                <?php
            }
            ?>
            var data3 = JSON.parse(JSON.stringify(data));
            data3.datasets[0].data = d3;
            data3.datasets[0].label = "PPM";
            data3.datasets[0].backgroundColor = gradientStroke3;

            var data4 = JSON.parse(JSON.stringify(data));
            data4.datasets[0].data = d4;
            data4.datasets[0].backgroundColor = gradientStroke4;

            var myChart1 = new Chart(ctx1, { type: 'line', data: data1, options: gradientChartOptionsConfigurationWithTooltipPurple });
            var myChart2 = new Chart(ctx2, { type: 'line', data: data2, options: gradientChartOptionsConfigurationWithTooltipPurple });
            var myChart3 = new Chart(ctx3, { type: 'line', data: data3, options: gradientChartOptionsConfigurationWithTooltipPurple });
            var myChart4 = new Chart(ctx4, { type: 'line', data: data4, options: gradientChartOptionsConfigurationWithTooltipPurple });

        });
        </script>

    </body>
</html>
