<%- include("partials/navbar.ejs") %>
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Water Consumption</title>

        <link rel="stylesheet" href="/electricityStyle.css" />

        <link href='https://fonts.googleapis.com/css?family=Akshar' rel='stylesheet'>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">
            google.charts.load('current', { packages: ['corechart'] });
            google.charts.setOnLoadCallback(drawChart);

            function drawChart() {
                const data = JSON.parse('<%- dataJson %>');

                var chartData = google.visualization.arrayToDataTable([
                    ['Month', 'Consumption'],
                    ['September', Math.floor(data.upcomingMonthWaterExpected_1)],
                    ['October', Math.floor(data.upcomingMonthWaterExpected_2)],
                    ['November', Math.floor(data.upcomingMonthWaterExpected_3)],
                    ['December', Math.floor(data.upcomingMonthWaterExpected_4)],
                ]);
                var options = {
                    width: 600,
                    height: 400,
                    bar: {
                        groupWidth: "85%"
                    },
                    legend: {
                        position: "none"
                    },
                    backgroundColor: '#2A3142',
                    colors: ['#626ED4'],
                    titleTextStyle: {
                        color: 'white',
                        fontSize: 18,
                    },
                    hAxis: {
                        title: 'Month',
                        titleTextStyle: {
                            color: 'white',
                            fontSize: 14,
                        },
                        textStyle: {
                            color: 'white',
                            fontSize: 12,
                        },
                    },
                    vAxis: {
                        title: 'Consumption',
                        titleTextStyle: {
                            color: 'white',
                            fontSize: 14,
                        },
                        textStyle: {
                            color: 'white',
                            fontSize: 14,
                        },
                        viewWindow: {
                            mode: 'explicit',
                            min: 0,
                            max: 800
                        }
                    },

                };
                var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_values'));
                chart.draw(chartData, options);
            }
        </script>
        <script>
            window.onload = function () {
                const data = JSON.parse('<%- dataJson %>');

                var actual = Math.floor(data.currentMonthWaterActual);
                var expected = Math.floor(data.currentMonthWaterExpected);
                var percentage = (actual / expected) * 100;
                var progressBar = document.querySelector('.progress-bar');
                if (actual > expected) {
                    progressBar.classList.remove('bg-success');
                    progressBar.classList.add('bg-danger');
                } else {
                    percentage - 100;
                    progressBar.classList.remove('bg-danger');
                    progressBar.classList.add('bg-success');
                }
            };
        </script>

   


    </head>

    <body>
    


        <h2 class="head"><span>Water Consumption</span></h2>
        <div class="container">
            <script>
                const data = JSON.parse('<%- dataJson %>');
            </script>
            <div class="curMonth">
                <h5 class="label">Current Month</h5>
                <h6>Expected</h6>
                <p>
                    <script>document.write(Math.floor(data.currentMonthWaterExpected) + ' SAR');</script>
                </p>
                <h6 id="Actual">Actual</h6>
                <p id="right">
                    <script>document.write(Math.floor(data.currentMonthWaterActual) + ' SAR');</script>
                </p>
            </div>
            <div class="curMonth">
                <h5 class="label">Previous Month</h5>
                <h6>Expected</h6>
                <p>
                    <script>document.write(Math.floor(data.prevMonthWaterExpected) + ' SAR');</script>
                </p>
                <h6 id="Actual">Actual</h6>
                <p id="right">
                    <script>document.write(Math.floor(data.prevMonthWaterActual[1].billPrice) + ' SAR');</script>
                </p>
            </div>

            <div class="upMonth">
                <h5 class="label">Previous Months Bills</h5>
                <h6>Expected</h6>
                <div class="consumptionUp">
                    <p style="margin-left: 40px;">Sep</p>
                    <p style="color: white; margin-left: 40px; margin-top: 40px;">
                        <script>document.write(Math.floor(data.upcomingMonthWaterExpected_1) + ' SAR');</script>
                    </p>
                    <p style="margin-left: 160px;">Oct</p>
                    <p style="color: white; margin-left: 160px; margin-top: 40px;">
                        <script>document.write(Math.floor(data.upcomingMonthWaterExpected_2) + ' SAR');</script>
                    </p>

                    <p style="margin-left: 290px;">Nov</p>
                    <p style="color: white;  margin-left: 290px; margin-top: 40px;">
                        <script>document.write(Math.floor(data.upcomingMonthWaterExpected_3) + ' SAR');</script>
                    </p>

                    <p style="margin-left:410px;">Dec</p>
                    <p style="color: white; margin-left:410px; margin-top: 40px;">
                        <script>document.write(Math.floor(data.upcomingMonthWaterExpected_4) + ' SAR');</script>
                    </p>
                </div>
            </div>

            <div class="graph">
                <h5 class="shop"> <span>Your Monthly Consumption</span </h5> <br><br>
                    <div id="columnchart_values"></div>
                    <div class="waste">
                        <span>
                            <h5 style="font-size: 22px;" id="waterStatus">Water Status</h5>

                            <script>
                                const data1 = JSON.parse('<%- dataJson %>');
                                let percentage = (Math.floor(data1.currentMonthWaterActual) / Math.floor(data1.currentMonthWaterExpected)) * 100;
                                let message = '';

                                if (percentage > 100) {
                                    message = `Your water consumption is above the average by`;
                                    percentage = percentage - 100;
                                } else {
                                    message = `Your water consumption is below the average by`;
                                }

                                document.querySelector('#waterStatus').textContent = message;

                                document.write(`
                                <div class="progress" role="progressbar" aria-label="Success example"
                                    aria-valuenow="${percentage}" aria-valuemin="0" aria-valuemax="100">
                                    <div class="progress-bar" style="width: ${percentage}%; max-width: ${Math.floor(percentage)}%;">
                                        ${Math.floor(percentage)}%
                                    </div>
                                </div>
                                `);
                            </script>
                            </script>
                    </div>
                    <div class="waste">
                        <span>
                            <h5>Average Consumption</h5>
                        </span>
                        <script>
                            const avgExpected = Math.floor(((
                                data.upcomingMonthWaterExpected_1 + data.upcomingMonthWaterExpected_2 +
                                data.upcomingMonthWaterExpected_3 + data.upcomingMonthWaterExpected_4) / 4));
                            document.write(`
            <div style="width: 100%; height: 50px; background: #252735; border-radius: 9999px; border: 10px rgba(70.27, 66.87, 236.71, 0) solid">
                <p>${avgExpected} SAR</p>
            </div>
        `);
                        </script>
                    </div>
            </div>
            <div class="map">
                <h5 class="shop"> <span>Search for your nearest shop</span </h5> <br>
                    <iframe class="google"
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d463877.3124272635!2d46.4928839843283!3d24.725455373048284!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e2f03890d489399%3A0xba974d1c98e79fd5!2sRiyadh!5e0!3m2!1sen!2ssa!4v1703105322751!5m2!1sen!2ssa"
                        width="300" height="350" style="border:0;" allowfullscreen="" loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade"></iframe>
                    <p class="dont">We do not know any of these company's</p>
            </div>
        </div>
    </body>

    </html>