<!DOCTYPE html>
<html lang="en" data-theme="light">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>URAIO Community Hub</title>
    <meta name="description" content="Offline-first community network hub">
    <link rel="manifest" href="<?php echo e(asset('manifest.json')); ?>">
    <link rel="stylesheet" href="<?php echo e(asset('style.css')); ?>">
    <!-- Font Awesome for Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Inter Font -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>

<body>
    <!-- Status Bar -->
    <header class="status-bar">
        <div class="status-item" title="Battery Level">
            <i class="fas fa-battery-three-quarters status-icon"></i>
            <span id="battery-level">85%</span>
        </div>
        <div class="status-item" title="Solar Input">
            <i class="fas fa-solar-panel status-icon text-warning"></i>
            <span id="solar-input">120W</span>
        </div>
        <div class="status-item" title="Online Users">
            <i class="fas fa-users status-icon text-success"></i>
            <span id="online-users">42</span>
        </div>
        <div class="status-item" title="Temperature">
            <i class="fas fa-thermometer-half status-icon"></i>
            <span id="temperature">28°C</span>
        </div>
        <button id="theme-toggle" class="icon-btn" aria-label="Toggle Dark Mode">
            <i class="fas fa-moon"></i>
        </button>
    </header>

    <!-- Main Content Area -->
    <main id="main-content">
        <!-- Home View -->
        <section id="view-home" class="view active">
            <!-- Welcome / Hero -->
            <div class="hero-card">
                <h1>Welcome to URAIO</h1>
                <p>Community Node #042 • <span class="badge badge-success">Online</span></p>
                <div class="weather-widget">
                    <i class="fas fa-cloud-sun"></i>
                    <span>Partly Cloudy</span>
                </div>
            </div>

            <!-- Quick Actions Grid -->
            <div class="section-header">
                <h2>Quick Actions</h2>
            </div>
            <div class="grid-menu">
                <button class="grid-item" onclick="app.navigateTo('chat')">
                    <div class="icon-box bg-primary-light"><i class="fas fa-comments text-primary"></i></div>
                    <span>Chat</span>
                </button>
                <button class="grid-item" onclick="app.openModal('files')">
                    <div class="icon-box bg-secondary-light"><i class="fas fa-share-alt text-secondary"></i></div>
                    <span>Files</span>
                </button>
                <button class="grid-item" onclick="app.openModal('wiki')">
                    <div class="icon-box bg-accent-light"><i class="fas fa-book text-accent"></i></div>
                    <span>Wiki</span>
                </button>
                <button class="grid-item" onclick="app.openModal('maps')">
                    <div class="icon-box bg-success-light"><i class="fas fa-map-marked-alt text-success"></i></div>
                    <span>Maps</span>
                </button>
                <button class="grid-item" onclick="app.openModal('health')">
                    <div class="icon-box bg-danger-light"><i class="fas fa-heartbeat text-danger"></i></div>
                    <span>Health</span>
                </button>
                <button class="grid-item" onclick="app.openModal('emergency')">
                    <div class="icon-box bg-warning-light"><i class="fas fa-exclamation-triangle text-warning"></i>
                    </div>
                    <span>SOS</span>
                </button>
                <!-- New Features -->
                <button class="grid-item" onclick="app.openModal('ticket')">
                    <div class="icon-box bg-primary-light"><i class="fas fa-ticket-alt text-primary"></i></div>
                    <span>Ticket</span>
                </button>
                <button class="grid-item" onclick="app.openModal('shop')">
                    <div class="icon-box bg-secondary-light"><i class="fas fa-shopping-basket text-secondary"></i></div>
                    <span>Shop</span>
                </button>
                <button class="grid-item" onclick="app.openModal('kitchen')">
                    <div class="icon-box bg-accent-light"><i class="fas fa-utensils text-accent"></i></div>
                    <span>Kitchen</span>
                </button>
                <button class="grid-item" onclick="app.openModal('drive')">
                    <div class="icon-box bg-success-light"><i class="fas fa-hdd text-success"></i></div>
                    <span>Drive</span>
                </button>
            </div>

            <!-- Community Feed -->
            <div class="section-header">
                <h2>Community Feed</h2>
                <button class="btn-text" onclick="app.openModal('new-post')">See All</button>
            </div>
            <div id="feed-container" class="feed-list">
                <!-- Feed items will be injected here -->
            </div>
        </section>

        <!-- Chat View -->
        <section id="view-chat" class="view">
            <div class="chat-header">
                <button class="icon-btn" onclick="app.navigateTo('home')"><i class="fas fa-arrow-left"></i></button>
                <h3>Public Channel</h3>
                <span class="online-count">12 online</span>
            </div>
            <div id="chat-messages" class="chat-messages">
                <!-- Messages injected here -->
            </div>
            <div class="chat-input-area">
                <button class="icon-btn"><i class="fas fa-paperclip"></i></button>
                <input type="text" id="message-input" placeholder="Type a message...">
                <button class="icon-btn btn-primary" onclick="app.sendMessage()"><i
                        class="fas fa-paper-plane"></i></button>
            </div>
        </section>

        <!-- Explore View (Placeholder) -->
        <section id="view-explore" class="view">
            <div class="placeholder-view">
                <i class="fas fa-compass fa-3x text-accent"></i>
                <h2>Explore</h2>
                <p>Discover local resources and community events.</p>
            </div>
        </section>

        <!-- Notifications View (Placeholder) -->
        <section id="view-notifications" class="view">
            <div class="section-header">
                <h2>Notifications</h2>
                <button class="btn-text">Clear All</button>
            </div>
            <div id="notification-list" class="list-group">
                <!-- Notifications injected here -->
            </div>
        </section>

        <!-- Profile View -->
        <section id="view-profile" class="view">
            <div class="profile-header">
                <div class="avatar-large">
                    <i class="fas fa-user"></i>
                </div>
                <h2 id="profile-name">User #1234</h2>
                <p id="profile-house" class="text-muted" style="margin-top: 4px;">House: <span
                        id="house-number-display">--</span> <button class="icon-btn"
                        style="width: 24px; height: 24px; font-size: 0.8rem;" onclick="app.editHouseNumber()"><i
                            class="fas fa-pen"></i></button></p>
                <p>Member since 2023</p>
            </div>
            <div class="list-group">
                <div class="list-item">
                    <i class="fas fa-cog list-icon"></i>
                    <span>Settings</span>
                    <i class="fas fa-chevron-right list-arrow"></i>
                </div>
                <div class="list-item">
                    <i class="fas fa-history list-icon"></i>
                    <span>Activity History</span>
                    <i class="fas fa-chevron-right list-arrow"></i>
                </div>
                <div class="list-item" onclick="app.openModal('emergency')">
                    <i class="fas fa-life-ring list-icon text-danger"></i>
                    <span class="text-danger">Emergency Hub</span>
                    <i class="fas fa-chevron-right list-arrow"></i>
                </div>
            </div>
        </section>
    </main>

    <!-- Bottom Navigation -->
    <nav class="bottom-nav">
        <button class="nav-item active" data-target="home" onclick="app.navigateTo('home')">
            <i class="fas fa-home"></i>
            <span>Home</span>
        </button>
        <button class="nav-item" data-target="chat" onclick="app.navigateTo('chat')">
            <i class="fas fa-comments"></i>
            <span>Chat</span>
        </button>
        <button class="nav-item" data-target="explore" onclick="app.navigateTo('explore')">
            <i class="fas fa-compass"></i>
            <span>Explore</span>
        </button>
        <button class="nav-item" data-target="notifications" onclick="app.navigateTo('notifications')">
            <div class="badge-container">
                <i class="fas fa-bell"></i>
                <span class="badge-dot"></span>
            </div>
            <span>Alerts</span>
        </button>
        <button class="nav-item" data-target="profile" onclick="app.navigateTo('profile')">
            <i class="fas fa-user"></i>
            <span>Profile</span>
        </button>
    </nav>

    <!-- Floating Action Button (FAB) -->
    <button class="fab" onclick="app.openModal('new-post')" aria-label="New Post">
        <i class="fas fa-plus"></i>
    </button>

    <!-- Modals -->
    <div id="modal-overlay" class="modal-overlay hidden"></div>

    <!-- New Post Modal -->
    <div id="modal-new-post" class="modal hidden">
        <div class="modal-header">
            <h3>New Post</h3>
            <button class="icon-btn" onclick="app.closeModals()"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
            <textarea id="post-content" placeholder="What's happening in the community?" rows="4"></textarea>
            <div class="file-preview hidden" id="post-file-preview"></div>
        </div>
        <div class="modal-footer">
            <button class="icon-btn"><i class="fas fa-image"></i></button>
            <button class="icon-btn"><i class="fas fa-map-marker-alt"></i></button>
            <button class="btn btn-primary" onclick="app.createPost()">Post</button>
        </div>
    </div>

    <!-- Emergency Modal -->
    <div id="modal-emergency" class="modal hidden">
        <div class="modal-header bg-danger text-white">
            <h3>EMERGENCY HUB</h3>
            <button class="icon-btn text-white" onclick="app.closeModals()"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body text-center">
            <button class="sos-btn">
                <span>SOS</span>
            </button>
            <p class="text-muted mt-2">Press and hold for 3 seconds to broadcast distress signal</p>

            <div class="emergency-contacts mt-4">
                <h4>Quick Contacts</h4>
                <div class="list-group">
                    <div class="list-item">
                        <i class="fas fa-user-md list-icon text-danger"></i>
                        <span>Medical Aid</span>
                        <button class="btn-sm btn-outline-danger">Call</button>
                    </div>
                    <div class="list-item">
                        <i class="fas fa-fire-extinguisher list-icon text-warning"></i>
                        <span>Fire Response</span>
                        <button class="btn-sm btn-outline-warning">Call</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Generic Modal Container (for other features) -->
    <div id="modal-generic" class="modal hidden">
        <div class="modal-header">
            <h3 id="generic-modal-title">Title</h3>
            <button class="icon-btn" onclick="app.closeModals()"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body" id="generic-modal-content">
            <!-- Content injected via JS -->
        </div>
    </div>

    <script src="<?php echo e(asset('script.js')); ?>"></script>
    <script>
        // Register Service Worker
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/service-worker.js')
                    .then(reg => console.log('Service Worker registered'))
                    .catch(err => console.log('Service Worker registration failed: ', err));
            });
        }
    </script>
</body>

</html>
<?php /**PATH /Users/doosuur/Downloads/airboxOS/uraio/resources/views/welcome.blade.php ENDPATH**/ ?>