<?php
header('Access-Control-Allow-Origin: *');
require_once './Mobile_Api/connection.php';
?>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>Water Monitoring Dashboard</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
        <style>
            body {
                margin: 0;
                padding: 0;
                font-family: 'Segoe UI', sans-serif;
                background: linear-gradient(to right, #b2fefa, #0ed2f7);
                min-height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .dashboard {
                background: #fff;
                border-radius: 20px;
                padding: 40px;
                width: 90%;
                max-width: 1000px;
                box-shadow: 0 0 30px rgba(0,0,0,0.1);
            }

            .dashboard h1 {
                text-align: center;
                margin-bottom: 40px;
                font-size: 2.5rem;
                color: #0066cc;
            }

            .grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
                gap: 30px;
            }

            .card {
                background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
                border-radius: 15px;
                padding: 25px;
                color: #003566;
                position: relative;
                box-shadow: 0 6px 20px rgba(0,0,0,0.1);
            }

            .card i {
                font-size: 2rem;
                color: #1d3557;
                position: absolute;
                top: 20px;
                right: 20px;
            }

            .card h3 {
                margin: 0;
                font-size: 1rem;
                font-weight: 600;
            }

            .card p {
                font-size: 1.8rem;
                font-weight: bold;
                margin-top: 10px;
            }

            .footer {
                margin-top: 30px;
                text-align: center;
                font-size: 0.9rem;
                color: #444;
            }

            @media(max-width: 600px) {
                .dashboard h1 {
                    font-size: 2rem;
                }
            }
        </style>
    </head>
    <body>

        <div class="dashboard">
            <h1>💧 Water Monitoring Dashboard</h1>
            <div class="grid">
                <?php
                $query1 = 'SELECT *,DATE_FORMAT(created_date,"%d-%m-%Y %H:%i:%s") AS created_date_new FROM `tbl_radar_flow_meter_data` ORDER by id desc LIMIT 1';
                mysqli_set_charset($con, 'utf8');
                $result1 = mysqli_query($con, $query1);
                if (mysqli_num_rows($result1) > 0) {
                    $i = 1;
                    while ($row1 = mysqli_fetch_assoc($result1)) {
                        $water_level = $row1["water_level"];
                        $created_date_new = $row1["created_date_new"];
                        $flow_velocity = $row1["flow_velocity"];
                        $empty_height = $row1["empty_height"];
                    }
                }
                
                
                
// Input values
                $h=0.69;
                $width = 0.60;      // m (canal width)
                $depth = $h - $empty_height;      // m (actual water level)
                // echo " $depth m<br>";
                $slope = 0.001;     // canal slope (m/m)
                $n = 0.015;         // Manning's roughness coefficient
// Step 1: Cross-sectional Area (A)
                $area = $width * $depth; // in m²
// Step 2: Wetted Perimeter (P)
                $perimeter = $width + 2 * $depth; // in m
// Step 3: Hydraulic Radius (R)
                $radius = $area / $perimeter;

// Step 4: Velocity (V) using Manning's formula
                $velocity = (1 / $n) * pow($radius, 2 / 3) * pow($slope, 0.5);

// Step 5: Discharge (Q)
                $discharge = $area * $velocity;

// Output
//                echo "Canal Width: $width m<br>";
//                echo "Water Depth: $depth m<br>";
//                echo "Slope: $slope<br>";
//                echo "Manning's n: $n<br><br>";

//                echo "Cross-sectional Area (A): " . round($area, 3) . " m²<br>";
//                echo "Wetted Perimeter (P): " . round($perimeter, 3) . " m<br>";
//                echo "Hydraulic Radius (R): " . round($radius, 3) . " m<br>";
//                echo "Velocity (V): " . round($velocity, 3) . " m/s<br>";
//                echo "Discharge (Q): " . round($discharge, 3) . " m³/s";
                
                $velocity_final=round($velocity, 3) . " m/s";
                $discharge_final=round($discharge, 3) . " m³/s";
                ?>


                <div class="card">
                    <i class="fas fa-ruler-horizontal"></i>
                    <h3>Canal Width</h3>
                    <p>0.60 m</p>
                </div>
                <div class="card">
                    <i class="fas fa-water"></i>
                    <h3>Water Level</h3>
                    <p><?php echo $depth; ?> m</p>
                </div>
                <div class="card">
                    <i class="fas fa-tachometer-alt"></i>
                    <h3>Flow Velocity</h3>
                    <p><?php echo $velocity_final; ?> </p>
                </div>
                <div class="card">
                    <i class="fas fa-tint"></i>
                    <h3>Discharge</h3>
                    <p><?php echo $discharge_final; ?></p>
                </div>
                <!--                <div class="card">
                                    <i class="fas fa-mountain"></i>
                                    <h3>Slope</h3>
                                    <p>0.001</p>
                                </div>
                                <div class="card">
                                    <i class="fas fa-tools"></i>
                                    <h3>Material Type</h3>
                                    <p>Concrete</p>
                                </div>-->
            </div>
            <div class="footer">
                <p><?php echo $created_date_new; ?></p>
            </div>
        </div>

    </body>
</html>
