<?php require_once 'config.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Worldsphere - Healthcare Risk Management</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link href="assets/cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
        <link rel="stylesheet" href="assets/css/dashboard.css?v=<?php echo time(); ?>">
    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
</head>
<body>
    <div id="app-container">
        <aside id="sidebar" class="sidebar-hidden">
            <header id="app-header">
                <a href="#" id="home-link"><h1>Menu</h1></a>
            </header>
            <nav id="app-nav">
                
                <div class="control-group">
                    <h3>Layers</h3>
                    <label><input type="checkbox" id="weatherLayerCheckbox" checked> Weather</label>
                    <label><input type="checkbox" id="wildfireLayerCheckbox" checked> Wildfires</label>
                    <label><input type="checkbox" id="spcLayerCheckbox" checked> SPC Outlook</label>
                    <label><input type="checkbox" id="weatherAlertsLayerCheckbox" checked> Weather Alerts</label>
                    <label><input type="checkbox" id="hurricaneLayerCheckbox" checked> Hurricanes</label>
                    <label><input type="checkbox" id="windLayerCheckbox" checked> Wind</label>
                </div>

                <div class="control-group">
                    <h3>Wind Animation</h3>
                    <label>Altitude: <span id="windAltitudeLabel">10000 m</span></label>
                    <input type="range" id="windAltitudeSlider" min="0" max="15000" step="500" value="10000">
                    <label>Particle Density:</label>
                    <input type="range" id="particleDensitySlider" min="0.1" max="1.0" step="0.1" value="0.5">
                    <button id="playPauseWind">Pause</button>
                </div>
            </nav>
        </aside>

        <main id="main-content">
            <div id="top-bar">
                <button id="hamburger-menu">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
                <nav class="top-nav">
                    <a href="#" id="dashboard-nav-link" class="nav-item">Dashboard</a>
                    <a href="#" id="analytics-nav-link" class="nav-item">Analytics</a>
                    <a href="#" id="reports-nav-link" class="nav-item">Reports</a>
                    <a href="#" id="settings-nav-link" class="nav-item">Settings</a>
                </nav>
            </div>
            <div id="split-container">
                <div id="left-panel">
                    <div id="dashboard-content" class="hidden">
                        <h2>Facilities Dashboard</h2>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Facility Name</th>
                                    <th>City</th>
                                    <th>State</th>
                                    <th>Risk Score</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Facility data will be loaded here -->
                            </tbody>
                        </table>
                    </div>
                    <div id="analytics-content" class="hidden">
                        <h2>Analytics</h2>
                        <p>This feature is under development. Detailed analytics and visualizations will be available here soon.</p>
                        <canvas id="facilitiesByStateChart"></canvas>
                    </div>
                    <div id="reports-content" class="hidden">
                        <h2>Reports</h2>
                        <p>Generate and download reports for your facilities.</p>
                        <button id="download-report-btn">Download Facility Risk Report (CSV)</button>
                    </div>
                    <div id="settings-content" class="hidden">
                        <h2>Settings</h2>
                        <p>Configure your application settings.</p>
                        <form id="settings-form">
                            <div class="form-group">
                                <label for="setting1">Example Setting 1</label>
                                <input type="text" id="setting1" name="setting1" value="Example Value">
                            </div>
                            <div class="form-group">
                                <label for="setting2">Example Setting 2</label>
                                <select id="setting2" name="setting2">
                                    <option>Option 1</option>
                                    <option>Option 2</option>
                                    <option>Option 3</option>
                                </select>
                            </div>
                            <button type="submit">Save Settings</button>
                        </form>
                    </div>
                    <div id="summary-content" class="hidden">
                        <h2>Summary</h2>
                        <p>This feature is under development. A summary of key information will be available here soon.</p>
                    </div>
                    <div id="help-content" class="hidden">
                        <h2>Help</h2>
                        <p>This feature is under development. Help and documentation will be available here soon.</p>
                    </div>
                </div>
                <div id="right-panel">
                    <div id="cesiumContainer"></div>
                </div>
            </div>
            <nav class="bottom-nav">
                <a href="#" id="summary-nav-link" class="nav-item">Summary</a>
                <a href="#" id="show-alerts-btn" class="nav-item">Alerts</a>
                <a href="#" id="help-nav-link" class="nav-item">Help</a>
                <a href="#" class="nav-item">&copy; 2025 Worldsphere</a>
            </nav>
        </main>
    </div>

    <!-- Modals -->
    <div id="alertsModal" class="modal">
        <div class="modal-content">
            <span class="close-button">&times;</span>
            <h2>Active Weather Alerts</h2>
            <div id="alerts-list-container">
                <p>Loading alerts...</p>
            </div>
        </div>
    </div>

    <div id="crossSectionModal" class="modal">
        <div class="modal-content">
            <span class="close-button">&times;</span>
            <div id="riskScoreContainer">
                <h3>Location Risk Assessment</h3>
                <div id="riskScoreSummary">
                    <strong>Overall Risk Score:</strong> <span id="riskScoreValue">Calculating...</span>
                </div>
                <div id="riskFactors">
                    <p><strong>Wildfire Risk:</strong> <span id="wildfireRisk">Calculating...</span></p>
                    <p><strong>Hurricane Risk (Live):</strong> <span id="hurricaneRisk">Calculating...</span></p>
                    <p><strong>Hurricane Risk (Historical):</strong> <span id="historicalHurricaneRisk">Calculating...</span></p>
                </div>
            </div>
            <hr>
            <h2>Atmospheric Cross-Section</h2>
            <div id="loadingIndicator" style="display: none;">Loading data...</div>
            <canvas id="crossSectionChart"></canvas>
        </div>
    </div>

    <script src="assets/cesium/Build/Cesium/Cesium.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="assets/js/wind.js?v=<?php echo time(); ?>"></script>
    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
</body>
</html>
