<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="version" content="2025-08-05-HAMBURGER-NAVIGATION-FIXED-v6">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ref Assistant</title>
    
    <!-- PWA Meta Tags -->
    <meta name="description" content="Professional referee game and expense tracking application with calendar integration">
    <meta name="theme-color" content="#3b82f6">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="Ref Assistant">
    <meta name="mobile-web-app-capable" content="yes">
    
    <!-- PWA Manifest -->
    <link rel="manifest" href="manifest.json">
    
    <!-- Favicon -->
    <link rel="icon" href="favicon.svg" type="image/svg+xml">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    
    <!-- Apple Touch Icons -->
    <link rel="apple-touch-icon" sizes="152x152" href="icons/icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="icons/icon-180x180.png">
    
    <!-- Standard Favicon Sizes -->
    <link rel="icon" type="image/png" sizes="32x32" href="icons/icon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="icons/icon-16x16.png">
    
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/auth.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Orbitron:wght@700;900&display=swap" rel="stylesheet">
</head>
<body>
    <div class="app">
        <!-- Hamburger Menu Button -->
        <button id="hamburgerBtn" class="hamburger-btn">
            <span class="hamburger-line"></span>
            <span class="hamburger-line"></span>
            <span class="hamburger-line"></span>
        </button>
        
        <!-- Navigation Overlay -->
        <div id="navOverlay" class="nav-overlay"></div>
        
        <aside id="sidebar" class="sidebar">
            <div class="logo" id="logoButton">
                <div class="whistle-icon">
                    <svg viewBox="0 0 32 32" fill="currentColor">
                        <!-- Background circle -->
                        <circle cx="16" cy="16" r="16" fill="#3b82f6"/>
                        
                        <!-- Whistle body -->
                        <g fill="white">
                            <!-- Main rectangle -->
                            <rect x="8" y="7" width="3" height="18" rx="1"/>
                            
                            <!-- Top horizontal bar -->
                            <rect x="8" y="7" width="11" height="3" rx="1"/>
                            
                            <!-- Middle horizontal bar -->
                            <rect x="8" y="14" width="8" height="3" rx="1"/>
                            
                            <!-- R top vertical -->
                            <rect x="16" y="7" width="3" height="10" rx="1"/>
                            
                            <!-- R diagonal leg -->
                            <path d="M 13 17 L 19 25 L 16 25 L 11 17 Z"/>
                        </g>
                    </svg>
                </div>
                <h1>Ref Assistant</h1>
            </div>
            
            <div class="nav-section">
                <div class="nav-section-title">Main</div>
                <button class="nav-btn active" data-screen="dashboard">Dashboard</button>
                <button class="nav-btn" data-screen="games">Games</button>
                <button class="nav-btn" data-screen="calendar">Calendar</button>
            </div>
            
            <div class="nav-divider"></div>
            
            <div class="nav-section">
                <div class="nav-section-title">Tracking</div>
                <button class="nav-btn" data-screen="mileage">Mileage</button>
                <button class="nav-btn" data-screen="expenses">Expenses</button>
                <button class="nav-btn" data-screen="reports">Reports</button>
            </div>
            
            <div class="spacer"></div>
            <div class="nav-divider"></div>
            <button class="nav-btn" data-screen="settings">Settings</button>
        </aside>        <main>
            <!-- Profile Picture in Top Right -->
            <div id="profilePicture" class="profile-picture hidden">
                <div class="avatar" id="userAvatar">
                    <span id="userInitials">U</span>
                </div>
                <div id="profileDropdown" class="profile-dropdown hidden">
                    <div class="dropdown-item" data-action="settings">
                        <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/>
                            <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"/>
                        </svg>
                        Settings
                    </div>
                    <div class="dropdown-item" data-action="edit-profile">
                        <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
                        </svg>
                        Edit Profile
                    </div>
                </div>
            </div>

            <!-- DASHBOARD -->
            <section id="dashboard" class="screen">
                <h2>Dashboard</h2>
                <div class="cards">
                    <div class="card">
                        <div class="muted">Games This Month</div>
                        <div id="dashGamesThisMonth" style="font-size: 24px; font-weight: 600;">0</div>
                    </div>
                    <div class="card">
                        <div class="muted">Need Availability Update</div>
                        <div id="dashNeedUpdate" style="font-size: 24px; font-weight: 600;">0</div>
                    </div>
                    <div class="card">
                        <div class="muted">Unpaid Games</div>
                        <div id="dashUnpaid" style="font-size: 24px; font-weight: 600;">0</div>
                    </div>
                    <div class="card">
                        <div class="muted">YTD Expenses</div>
                        <div id="dashYTDExpenses" style="font-size: 24px; font-weight: 600;">$0</div>
                    </div>
                </div>

                <div class="section">
                    <div class="flex">
                        <h3 style="margin:0;">Upcoming (Next 7 Days)</h3>
                        <div class="spacer"></div>
                        <button class="btn btn-small secondary" data-screen="games" onclick="showScreen('games')">Go to Games</button>
                    </div>
                    <div class="table-container">
                        <table id="upcomingTable">
                            <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>Time</th>
                                    <th>Location</th>
                                    <th>Pay</th>
                                    <th>Updated?</th>
                                    <th>Paid?</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </section>

            <!-- CALENDAR -->
            <section id="calendar" class="screen hidden">
                <h2>Calendar</h2>
                <div class="calendar-controls">
                    <button id="calendarTodayBtn" class="btn secondary">Today</button>
                    <button id="calendarPrevBtn" class="btn secondary">‹</button>
                    <button id="calendarNextBtn" class="btn secondary">›</button>
                </div>
                
                <div class="calendar-header">
                    <h3 id="calendarMonthYear">August 2025</h3>
                    <div class="calendar-sync-status">
                        <span class="calendar-sync-indicator" id="calendarSyncStatus">
                            📅
                            <span id="syncStatusText">Calendar ready</span>
                        </span>
                    </div>
                </div>
                
                <div class="calendar-container">
                    <div class="calendar-grid">
                        <!-- Calendar days will be generated by JavaScript -->
                        <div class="calendar-day-header">Sun</div>
                        <div class="calendar-day-header">Mon</div>
                        <div class="calendar-day-header">Tue</div>
                        <div class="calendar-day-header">Wed</div>
                        <div class="calendar-day-header">Thu</div>
                        <div class="calendar-day-header">Fri</div>
                        <div class="calendar-day-header">Sat</div>
                        <!-- Calendar days will be inserted here -->
                    </div>
                </div>
            </section>

            <!-- GAMES -->
            <section id="games" class="screen hidden">
                <div class="flex">
                    <h2>Games</h2>
                    <div class="spacer"></div>
                    <button id="btnAddGame" class="btn">+ Add Game</button>
                </div>

                <div class="filters">
                    <select id="filterUpdated">
                        <option value="all">All (Updated)</option>
                        <option value="yes">Updated Only</option>
                        <option value="no">Not Updated</option>
                    </select>
                    <select id="filterPaid">
                        <option value="all">All (Paid)</option>
                        <option value="yes">Paid Only</option>
                        <option value="no">Unpaid Only</option>
                    </select>
                    <input type="date" id="filterFrom" />
                    <input type="date" id="filterTo" />
                    <button id="btnClearFilters" class="btn secondary">Clear</button>
                </div>

                <div class="table-container">
                    <table id="gamesTable">
                        <thead>
                            <tr>
                                <th>Date</th><th>Time</th><th>League</th><th>Teams</th><th>Pay</th>
                                <th>Updated</th><th>Paid</th><th></th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

                <!-- Add/Edit Game Modal -->
                <div id="gameFormSection" class="section hidden">
                    <h3 id="gameFormTitle">Add Game</h3>
                    <form id="gameForm">
                        <div class="grid-2">
                            <div>
                                <label>Date</label>
                                <input type="date" name="date" required />
                            </div>
                            <div>
                                <label>Time</label>
                                <input type="text" name="time" placeholder="7:00 PM" required />
                            </div>
                        </div>
                        <div class="grid-2">
                            <div>
                                <label>League</label>
                                <input type="text" name="league" placeholder="Varsity Boys" />
                            </div>
                            <div>
                                <label>Pay</label>
                                <input type="number" name="pay" step="0.01" placeholder="100" />
                            </div>
                        </div>
                        <div class="grid-2">
                            <div>
                                <label>Home Team</label>
                                <input type="text" name="home" placeholder="Home" />
                            </div>
                            <div>
                                <label>Away Team</label>
                                <input type="text" name="away" placeholder="Away" />
                            </div>
                        </div>

                        <div class="flex">
                            <button type="submit" class="btn">Save</button>
                            <button type="button" id="cancelGameForm" class="btn secondary">Cancel</button>
                            <div class="spacer"></div>
                            <button type="button" id="deleteGameBtn" class="btn secondary hidden">Delete</button>
                        </div>
                    </form>
                </div>
            </section>

            <!-- MILEAGE -->
            <section id="mileage" class="screen hidden">
                <div class="flex">
                    <h2>Mileage</h2>
                    <div class="spacer"></div>
                </div>

                <div class="section">
                    <h3>Add Mileage</h3>
                    <form id="mileageForm">
                        <div class="grid-2">
                            <div>
                                <label>Date</label>
                                <input type="date" name="date" required />
                            </div>
                            <div>
                                <label>Miles Driven</label>
                                <input type="number" name="miles" step="0.1" required />
                            </div>
                        </div>
                        <div>
                            <label>Game</label>
                            <select name="gameId" id="mileageGameId">
                                <option value="">(Optional) Link to game…</option>
                            </select>
                        </div>
                        <div>
                            <button type="submit" class="btn">Add Mileage</button>
                        </div>
                    </form>
                </div>

                <div class="section">
                    <h3>All Mileage</h3>
                    <div class="table-container">
                        <table id="mileageTable">
                            <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>Miles Driven</th>
                                    <th>Game</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </section>

            <!-- EXPENSES -->
            <section id="expenses" class="screen hidden">
                <div class="flex">
                    <h2>Expenses</h2>
                    <div class="spacer"></div>
                </div>

                <div class="section">
                    <h3>Add Expense</h3>
                    <form id="expenseForm">
                        <div class="grid-2">
                            <div>
                                <label>Date</label>
                                <input type="date" name="date" required />
                            </div>
                            <div>
                                <label>Game</label>
                                <select name="gameId" id="expenseGameId">
                                    <option value="">(Optional) Link to game…</option>
                                </select>
                            </div>
                        </div>
                        <div class="grid-2">
                            <div>
                                <label>Category</label>
                                <select name="category">
                                    <option value="Meals">Meals</option>
                                    <option value="Lodging">Lodging</option>
                                    <option value="Flight">Flight</option>
                                    <option value="Other">Other</option>
                                </select>
                            </div>
                            <div>
                                <label>Amount</label>
                                <input type="number" name="amount" step="0.01" placeholder="0.00" required />
                            </div>
                        </div>
                        <div>
                            <label>Notes</label>
                            <textarea name="notes" rows="2" placeholder="Optional"></textarea>
                        </div>
                        <div>
                            <label>Receipt Photo</label>
                            <div class="photo-upload">
                                <input type="file" name="receipt" id="receiptInput" accept="image/*" capture="environment">
                                <label for="receiptInput" class="btn secondary photo-btn">
                                    📷 Take/Upload Receipt Photo
                                </label>
                                <div id="receiptPreview" class="receipt-preview hidden">
                                    <img id="receiptImage" alt="Receipt preview">
                                    <button type="button" id="removeReceipt" class="btn-remove">×</button>
                                </div>
                            </div>
                        </div>
                        <div>
                            <button type="submit" class="btn">Add Expense</button>
                        </div>
                    </form>
                </div>

                <div class="section">
                    <h3>All Expenses</h3>
                    <div class="table-container">
                        <table id="expensesTable">
                            <thead>
                                <tr>
                                    <th>Date</th><th>Category</th><th>Amount</th><th>Game</th><th>Notes</th><th>Receipt</th><th></th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </section>

    <!-- REPORTS -->
    <section id="reports" class="screen hidden">
      <div class="flex">
        <h2>Reports</h2>
        <div class="spacer"></div>
      </div>

      <div class="section">
        <h3>Year-to-Date Summary</h3>
        <div class="cards">
          <div class="card">
            <div class="muted">Total Income</div>
            <div id="rptYTDIncome" style="font-size: 24px; font-weight: 600;">$0</div>
          </div>
          <div class="card">
            <div class="muted">Total Expenses</div>
            <div id="rptYTDExpenses" style="font-size: 24px; font-weight: 600;">$0</div>
          </div>
          <div class="card">
            <div class="muted">Net Income</div>
            <div id="rptYTDNet" style="font-size: 24px; font-weight: 600;">$0</div>
          </div>
        </div>
      </div>

      <div class="section">
        <h3>Expenses by Category</h3>
        <div class="table-container">
          <table id="categoryReportTable">
            <thead>
              <tr>
                <th>Category</th>
                <th>Total Amount</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
        <div style="margin-top: 12px;">
          <button id="exportCSV" class="btn secondary">Export Expenses CSV</button>
        </div>
      </div>

      <div class="section">
        <h3>Mileage Summary</h3>
        <div class="cards">
          <div class="card">
            <div class="muted">Total Miles Driven</div>
            <div id="rptTotalMiles" style="font-size: 24px; font-weight: 600;">0</div>
          </div>
          <div class="card">
            <div class="muted">Average Miles per Trip</div>
            <div id="rptAvgMiles" style="font-size: 24px; font-weight: 600;">0</div>
          </div>
        </div>
        <div class="table-container">
          <table id="mileageReportTable">
            <thead>
              <tr>
                <th>Date</th>
                <th>Miles</th>
                <th>Game</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
        <div style="margin-top: 12px;">
          <button id="exportMileageCSV" class="btn secondary">Export Mileage CSV</button>
        </div>
      </div>
    </section>

            <!-- SETTINGS -->
            <section id="settings" class="screen hidden">
                <h2>Settings</h2>
                <div class="section">
                    <h3>Appearance</h3>
                    <div class="setting-item">
                        <label for="darkModeToggle">Dark Mode</label>
                        <div class="toggle-container">
                            <input type="checkbox" id="darkModeToggle" class="toggle-input">
                            <label for="darkModeToggle" class="toggle-label">
                                <span class="toggle-slider"></span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="section">
                    <h3>Profile</h3>
                    <div class="setting-item">
                        <div class="profile-info">
                            <span class="muted">Signed in as:</span>
                            <span id="settingsUserEmail">user@example.com</span>
                        </div>
                    </div>
                    <div class="setting-item">
                        <label for="displayNameInput">Display Name</label>
                        <div class="name-edit-container">
                            <input type="text" id="displayNameInput" placeholder="Enter your display name">
                            <button id="updateNameBtn" class="btn btn-small">Update</button>
                        </div>
                    </div>
                    <div class="setting-item">
                        <div></div>
                        <button id="signOutBtn" class="btn btn-small secondary">Sign Out</button>
                    </div>
                </div>
                <div class="section">
                    <h3>Security</h3>
                    <div class="setting-item">
                        <label>Change Password</label>
                        <button id="changePasswordBtn" class="btn btn-small">Change Password</button>
                    </div>
                </div>
                <div class="section">
                    <h3>Data</h3>
                    <button class="btn secondary" id="resetData">Clear All Data</button>
                </div>
            </section>
        </main>
    </div>

    <!-- Data Sync Status -->
    <div id="syncStatus" class="sync-status">
        <span id="syncText">Data synced</span>
        <div id="syncSpinner" class="spinner hidden"></div>
    </div>

    <!-- Change Password Modal -->
    <div id="changePasswordModal" class="modal hidden">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Change Password</h3>
                <button type="button" id="closePasswordModal" class="btn-close">&times;</button>
            </div>
            <div class="modal-body">
                <p class="modal-info">A password reset email will be sent to your email address. Please check your inbox and follow the instructions to reset your password.</p>
                <form id="changePasswordForm">
                    <div>
                        <label for="confirmEmail">Confirm your email address:</label>
                        <input type="email" id="confirmEmail" name="confirmEmail" required readonly>
                    </div>
                    <div class="modal-actions">
                        <button type="submit" class="btn">Send Reset Email</button>
                        <button type="button" id="cancelPasswordChange" class="btn secondary">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Toast Notification -->
    <div id="toast" class="toast hidden">
        <div class="toast-content">
            <span id="toastMessage">Message</span>
        </div>
    </div>

    <!-- Firebase SDK -->
    <script type="module">
        import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js';        import { getAuth } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js';
        import { getFirestore } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js';
        
        const firebaseConfig = {
            apiKey: "AIzaSyA6UeVbO46lCVvTW0CdFbmvpuu1lfG5bn4",
            authDomain: "ref-assistant-clean.firebaseapp.com",
            projectId: "ref-assistant-clean",
            storageBucket: "ref-assistant-clean.firebasestorage.app",
            messagingSenderId: "551093175028",
            appId: "1:551093175028:web:00ecb556ce6dc10f8054a1"
        };
        
        const app = initializeApp(firebaseConfig);
        window.firebaseApp = app;
        window.firebaseAuth = getAuth(app);
        window.firebaseDb = getFirestore(app);
    </script>
    
    <script src="js/store.js"></script>
    <script src="js/auth.js"></script>
    <script src="js/calendar.js"></script>
    <script src="calendar-ui.js"></script>
    <script src="js/app.js"></script>
    
    <!-- PWA Service Worker -->
    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('sw.js')
                    .then((registration) => {
                        console.log('SW registered: ', registration);
                    })
                    .catch((registrationError) => {
                        console.log('SW registration failed: ', registrationError);
                    });
            });
        }
    </script>
</body>
</html>
