<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WrkPulse | Instant Local Pros</title>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700;900&family=Inter:wght@400;500;700;800&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
    
    <script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
    <script>
        (function() {
            emailjs.init("jjwL3UQbUjjrytJA9"); 
        })();
    </script>

    <style>
        /* --- BRANDING VARIABLES (FOREST GREEN THEME) --- */
        :root { 
            --primary: #0F3D3E; --accent: #36D1DC; --bg: #f3f4f6; 
            --success: #10b981; --danger: #ef4444; --gray: #6b7280; --warning: #f59e0b; 
        }
        body { font-family: 'Inter', sans-serif; background-color: var(--bg); margin: 0; color: #111827; display: flex; flex-direction: column; min-height: 100vh; }
        h1, h2, h3, .logo-text { font-family: 'Nunito', sans-serif; }

        /* --- NAVIGATION --- */
        nav { display: flex; justify-content: space-between; align-items: center; padding: 15px 30px; background: var(--primary); border-bottom: 1px solid #064e3b; position: sticky; top: 0; z-index: 1000; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
        .logo-container { display: inline-flex; align-items: center; background: white; padding: 8px 20px 8px 10px; border-radius: 99px; gap: 12px; cursor: pointer; transition: transform 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        .logo-container:hover { transform: scale(1.05); }
        .logo-icon-h { width: 40px; height: 40px; background-color: var(--primary); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 12px; flex-shrink: 0; }
        .pulse-h { position: absolute; border-radius: 50%; border: 1.5px solid transparent; background: linear-gradient(var(--primary), var(--primary)) padding-box, conic-gradient(from 0deg, var(--accent), transparent, var(--accent)) border-box; opacity: 0; animation: pulse-kf 4s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94); }
        .pin-h { position: absolute; width: 14px; height: 14px; background-color: rgba(255,255,255,0.1); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: flex; align-items: center; justify-content: center; top: 18%; right: 18%; animation: pin-kf 4s infinite; }
        .logo-dot { width: 6px; height: 6px; background: white; border-radius: 50%; z-index: 10; }
        .pin-dot { width: 4px; height: 4px; background: var(--primary); border-radius: 50%; }
        .logo-text { font-size: 1.2rem; font-weight: 900; color: var(--primary); letter-spacing: -0.5px; margin: 0; }
        .logo-text span { color: var(--accent); }
        @keyframes pulse-kf { 0% { width: 5px; height: 5px; opacity: 0; transform: rotate(0deg); } 10% { opacity: 0.8; } 100% { width: 150px; height: 150px; opacity: 0; transform: rotate(180deg); } }
        @keyframes pin-kf { 0%, 55% { background-color: rgba(255,255,255,0.1); transform: rotate(-45deg) scale(0.9); } 65% { background-color: var(--accent); box-shadow: 0 0 10px var(--accent); transform: rotate(-45deg) scale(1.1); } 85%, 100% { background-color: var(--accent); transform: rotate(-45deg) scale(1); } }
        .nav-links { display: flex; gap: 10px; align-items: center; }
        .nav-item, #authStatus button { cursor: pointer; font-weight: 700; color: #e2e8f0; font-size: 0.9rem; border: 1px solid transparent; padding: 8px 16px; border-radius: 50px; transition: all 0.2s; background: transparent; text-decoration: none; position: relative; }
        .nav-item:hover { color: var(--accent); background: rgba(255,255,255,0.1); }
        .nav-item.active-view { background: var(--accent); color: var(--primary); }
        #authStatus button { background: var(--accent); color: var(--primary); padding: 8px 20px; border-radius: 50px; font-weight: 900; box-shadow: 0 4px 10px rgba(54, 209, 220, 0.3); }
        #authStatus button:hover { background: white; }
        #navAdmin { color: var(--accent); border: 1px solid var(--accent); font-weight: 800; }
        .badge-count { position: absolute; top: -2px; right: -2px; background-color: #ef4444; color: white; font-size: 0.7rem; font-weight: 800; padding: 2px 6px; border-radius: 10px; min-width: 16px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.2); border: 2px solid var(--primary); }

        .hero { background: linear-gradient(180deg, #f3f4f6 0%, #e5e7eb 100%); padding: 60px 20px; text-align: center; border-bottom: 1px solid #d1d5db; }
        .hero-logo-wrapper { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-bottom: 40px; }
        .logo-icon-v { width: 140px; height: 140px; background-color: var(--primary); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 40px; box-shadow: 0 20px 40px rgba(15, 61, 62, 0.3); }
        .pulse-v { position: absolute; border-radius: 50%; border: 2px solid transparent; background: linear-gradient(var(--primary), var(--primary)) padding-box, conic-gradient(from 0deg, var(--accent), transparent, var(--accent)) border-box; opacity: 0; animation: pulse-kf 4s infinite cubic-bezier(0.25, 0.46, 0.45, 0.94); }
        .pin-v { position: absolute; width: 35px; height: 35px; background-color: rgba(255,255,255,0.1); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: flex; align-items: center; justify-content: center; top: 18%; right: 18%; animation: pin-kf 4s infinite; }
        .hero-title { font-size: 3.5rem; font-weight: 900; color: var(--primary); margin: 0; line-height: 1; letter-spacing: -2px; }
        .hero-title span { color: var(--accent); }
        .hero-subtitle { color: var(--primary); opacity: 0.6; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; font-size: 0.9rem; margin-top: 10px; }
        .container { max-width: 900px; margin: 40px auto; padding: 0 20px; flex: 1; }
        .hidden { display: none !important; }

        .search-container { background: white; padding: 30px; border-radius: 20px; max-width: 600px; margin: 0 auto; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.1); text-align: left; border: 1px solid #e5e7eb; position: relative; z-index: 10; }
        .search-row { display: flex; gap: 10px; margin-bottom: 10px; }
        .search-row.location-row { display: grid; grid-template-columns: 2fr 1fr 1fr; } 
        .suggestions-box { position: absolute; top: 100%; left: 0; width: 100%; background: white; border: 1px solid #d1d5db; border-radius: 8px; z-index: 100; max-height: 200px; overflow-y: auto; display: none; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
        .suggestion-item { padding: 10px; cursor: pointer; border-bottom: 1px solid #f3f4f6; color: #374151; }
        .suggestion-item:hover { background: #eff6ff; color: var(--primary); }
        input, select, textarea { width: 100%; padding: 14px; border: 2px solid #e5e7eb; border-radius: 12px; font-family: inherit; box-sizing: border-box; font-size: 1rem; transition: border 0.2s; font-weight: 500; }
        input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; }
        label { font-weight: 800; font-size: 0.8rem; color: #64748b; display: block; margin: 15px 0 5px 0; text-transform: uppercase; letter-spacing: 0.5px; }
        .pricing-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 5px; margin-bottom: 15px; }
        .pricing-chip { background: #f0fdfa; color: var(--primary); border: 1px solid #ccfbf1; padding: 6px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: all 0.2s; }
        .pricing-chip:hover { background: var(--accent); color: var(--primary); border-color: var(--accent); }
        .review-chip { background: #fff; border: 1px solid #d1d5db; padding: 5px 10px; border-radius: 20px; font-size: 0.75rem; cursor: pointer; color: #374151; margin-bottom: 5px; transition: all 0.2s; }
        .review-chip:hover { background: var(--primary); color: white; border-color: var(--primary); }
        button.action { width: 100%; padding: 14px; background: var(--accent); color: var(--primary); border: none; border-radius: 12px; font-weight: 900; cursor: pointer; margin-top: 10px; transition: transform 0.2s, box-shadow 0.2s; font-size: 1.1rem; box-shadow: 0 4px 6px rgba(54, 209, 220, 0.2); }
        button.action:hover { transform: translateY(-2px); box-shadow: 0 10px 15px rgba(54, 209, 220, 0.3); background: #22d3ee; }
        button.cancel-btn { background: var(--danger); color: white; border: none; padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: 0.8rem; margin-top: 5px; font-weight: bold; }
        button:disabled { opacity: 0.6; cursor: not-allowed; background-color: #9ca3af !important; color: white !important; transform: none !important; box-shadow: none !important; }
        .card { background: white; padding: 25px; border-radius: 16px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); margin-bottom: 20px; border: 1px solid #e5e7eb; }
        .result-card { border: 1px solid #f3f4f6; padding: 20px; margin-bottom: 15px; border-radius: 12px; background: white; display: flex; gap: 15px; align-items: center; transition: all 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
        .result-card:hover { box-shadow: 0 10px 20px -5px rgba(0,0,0,0.08); transform: translateY(-1px); border-color: #e5e7eb; }
        .result-content { flex: 1; }
        .status-pill { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; }
        .status-pending { background: #fee2e2; color: #991b1b; }
        .status-chat { background: #dbeafe; color: #1e40af; }
        .status-active { background: #dcfce7; color: #166534; }
        .status-done { background: #fef3c7; color: #92400e; }
        .status-returning { background: #fffbeb; color: #b45309; border: 1px solid #fcd34d; }
        .review-item { background: #f9fafb; border: 1px solid #e5e7eb; padding: 15px; border-radius: 12px; margin-bottom: 10px; }
        .review-stars { color: #f59e0b; font-size: 0.9rem; margin-bottom: 5px; }
        .review-text { font-style: italic; color: #374151; font-size: 0.95rem; line-height: 1.5; }
        .review-author { text-align: right; font-weight: 800; font-size: 0.8rem; color: var(--primary); margin-top: 8px; }
        .client-score-badge { cursor: pointer; background-color: #fffbeb; color: #b45309; border: 1px solid #fcd34d; padding: 2px 8px; border-radius: 12px; font-weight: bold; font-size: 0.8rem; transition: all 0.2s; text-decoration: underline; margin-left: 5px; }
        .client-score-badge:hover { background-color: #fcd34d; color: white; transform: scale(1.05); }
        .verified-badge { background-color: #dbeafe; color: #1e40af; padding: 4px 8px; border-radius: 6px; font-size: 0.75rem; font-weight: 800; display: inline-flex; align-items: center; gap: 5px; }
        .star-badge { color: #b45309; background: #fffbeb; font-weight:bold; padding: 4px 8px; border-radius: 6px; border: 1px solid #fcd34d; font-size: 0.8rem; display:inline-flex; gap:5px; cursor: pointer; }
        .online-text { color: #166534; font-size: 0.8rem; font-weight: bold; display: flex; align-items: center; gap: 5px; background: #dcfce7; padding: 2px 8px; border-radius: 20px; }
        .match-badge { display: inline-block; background: #ccfbf1; color: var(--primary); font-size: 0.75rem; font-weight: bold; padding: 2px 8px; border-radius: 4px; margin-top: 5px; }
        footer { background: var(--primary); padding: 30px; margin-top: auto; text-align: center; color: #9ca3af; font-size: 0.9rem; border-top: 5px solid var(--accent); }
        .legal-link { color: #e2e8f0; text-decoration: underline; cursor: pointer; font-weight: bold; margin-left: 10px; }
        .avatar-circle { width: 60px; height: 60px; border-radius: 50%; background: #e5e7eb; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; color: var(--gray); overflow: hidden; border: 2px solid white; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        .avatar-img { width: 100%; height: 100%; object-fit: cover; }
        .upload-group { display: flex; align-items: center; gap: 15px; margin-top: 10px; background: white; padding: 15px; border: 1px solid #e5e7eb; border-radius: 12px; }
        .load-more-container { text-align: center; margin: 20px 0; }
        .btn-load-more { background: white; color: var(--primary); border: 2px solid var(--primary); padding: 10px 25px; border-radius: 50px; font-weight: 800; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
        .btn-load-more:hover { background: var(--primary); color: white; }
        .tab-container { display: flex; gap: 5px; margin-bottom: 20px; border-bottom: 2px solid #e5e7eb; padding-bottom: 0; }
        .tab-btn { background: none; border: none; padding: 12px 20px; font-weight: 800; color: #9ca3af; cursor: pointer; font-size: 0.95rem; border-radius: 8px 8px 0 0; position: relative; }
        .tab-btn:hover { color: var(--primary); }
        .tab-btn.active { background: white; color: var(--primary); border: 2px solid #e5e7eb; border-bottom: none; margin-bottom: -2px; z-index: 10; border-top: 3px solid var(--accent); }
        .tab-content { display: none; padding-top: 10px; }
        .tab-content.active { display: block; }
        #activeRequestsArea, #historyRequestsArea, #clientActiveList, #clientHistoryList { max-height: 500px; overflow-y: auto; padding-right: 10px; scroll-behavior: smooth; }
        .modal { position: fixed; bottom: 20px; right: 20px; width: 350px; background: white; box-shadow: 0 20px 50px rgba(0,0,0,0.2); border-radius: 16px; z-index: 1000; border: 1px solid #e5e7eb; display:flex; flex-direction:column; overflow:hidden;}
        #chatModal { height: 450px; }
        #ratingModal, #rateClientModal, #warningModal, #reportModal, #trustModal { height: auto; padding: 20px; bottom: 50%; right: 50%; transform: translate(50%, 50%); width: 320px; }
        #readReviewsModal, #readClientReviewsModal { height: 400px; padding: 0; }
        #legalModal { height: 600px; width: 500px; bottom: 50%; right: 50%; transform: translate(50%, 50%); border-radius: 16px; }
        .chat-header, .reviews-header { background: var(--primary); color: white; padding: 15px; display: flex; justify-content: space-between; align-items: center; font-weight: bold; }
        .chat-body, .reviews-body { padding: 15px; overflow-y: auto; flex: 1; background: #f9fafb; }
        .legal-body { padding: 20px; overflow-y: auto; flex: 1; background: #fff; font-size: 0.9rem; line-height: 1.6; color: #374151; }
        .legal-section { margin-bottom: 20px; }
        .legal-section h4 { color: var(--primary); border-bottom: 2px solid var(--accent); display: inline-block; margin-bottom: 10px; margin-top: 0; }
        .msg { max-width: 80%; padding: 8px 12px; border-radius: 12px; font-size: 0.9rem; line-height: 1.4; margin-bottom: 8px; }
        .msg-me { align-self: flex-end; background: var(--accent); color: var(--primary); border-bottom-right-radius: 2px; font-weight: 600; margin-left: auto; }
        .msg-them { align-self: flex-start; background: white; color: #1f2937; border: 1px solid #e5e7eb; border-bottom-left-radius: 2px; }
        .btn-report-small { color: #ef4444; background: none; border: 1px solid #ef4444; padding: 4px 8px; border-radius: 4px; font-size: 0.7rem; cursor: pointer; font-weight: bold; margin-top: 5px; }
        .btn-report-small:hover { background: #fee2e2; }
        @media (max-width: 600px) { 
            /* FIX: Align Nav with Content (20px side padding) */
            nav { padding: 15px 20px; flex-direction: column; gap: 10px; } 
            .nav-links { gap: 5px; width: 100%; justify-content: center; flex-wrap: wrap; }
            .nav-item { font-size: 0.8rem; padding: 6px 12px; }
            
            .hero-title { font-size: 2.5rem; }
            .hero-subtitle { font-size: 0.8rem; letter-spacing: 2px; }
            .search-container { padding: 20px; margin-top: 20px; }
            .search-row.location-row { grid-template-columns: 1fr; gap: 10px; }
            .pricing-chips { justify-content: center; }
            
            /* FIX: Mobile Modals (Clean iPhone Layout) */
            #chatModal:not(.hidden), #readReviewsModal:not(.hidden), #readClientReviewsModal:not(.hidden), #legalModal:not(.hidden), #donateModal:not(.hidden), #loginModal:not(.hidden) { 
                width: 100% !important; height: 100% !important; bottom: 0 !important; right: 0 !important; top:0 !important; left:0 !important; 
                border-radius: 0 !important; transform: none !important; border: none !important; 
                
                /* Layout Logic */
                display: flex !important; flex-direction: column; justify-content: flex-start !important;
                
                /* iPhone Safe Area Spacing */
                padding-top: 80px !important;    /* Clears the Notch */
                padding-bottom: 60px !important; /* Clears the Swipe Bar */
                padding-left: 20px !important;
                padding-right: 20px !important;
                
                overflow-y: auto !important;
                background: white !important;
                position: fixed !important; 
                z-index: 9999 !important;
                box-sizing: border-box !important; /* Ensures padding doesn't break width */
            } 
            .modal { width: 90%; max-height: 90vh; overflow-y: auto; }
            
            /* Clean up Donate Modal specifically */
            #donateModal { padding: 20px !important; }
        }        
        .clean-time-container { display: flex; gap: 15px; align-items: center; margin-bottom: 15px; }
        .clean-time-box { flex: 1; display: flex; flex-direction: column; }
        .clean-time-box label { font-size: 0.7rem; font-weight: 800; color: #6b7280; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.5px; }
        .clean-time-input { background: white; border: 1px solid #d1d5db; border-radius: 8px; padding: 10px; font-size: 1rem; text-align: center; color: #111827; outline: none; transition: border 0.2s; width: 100%; box-sizing: border-box; }
        .clean-time-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(54, 209, 220, 0.1); }
        @media (max-width: 600px) { .clean-time-container { flex-direction: row !important; } } 
    </style>
    <script>window.onerror = function(m){ console.error("Err:", m); };</script>
</head>
<body>

    <nav>
        <div class="logo-container" onclick="location.reload()">
            <div class="logo-icon-h"><div class="pulse-h"></div><div class="logo-dot"></div><div class="pin-h"><div class="pin-dot"></div></div></div>
            <h1 class="logo-text">Wrk<span>Pulse</span></h1>
        </div>
        <div class="nav-links">
            <div class="nav-item hidden" id="navAdmin" onclick="location.href='admin.html'"><i class="ri-lock-2-line"></i> Admin</div>
            <div class="nav-item" id="navMyRequests" onclick="window.handleAction('customer')">My Requests</div>
            <div class="nav-item" id="navDashboard" onclick="window.handleAction('business')">For Business</div>
            <div class="nav-item" onclick="document.getElementById('settingsModal').classList.remove('hidden')" title="Settings"><i class="ri-settings-3-fill"></i></div>
            <div id="authStatus"><button>...</button></div>
        </div>
    </nav>

    <div class="hero">
        <div class="hero-logo-wrapper">
            <div class="logo-icon-v"><div class="pulse-v"></div><div class="logo-dot" style="width:12px; height:12px;"></div><div class="pin-v"><div class="pin-dot" style="width:10px; height:10px;"></div></div></div>
            <div><h1 class="hero-title">Wrk<span>Pulse</span></h1><div class="hero-subtitle">Instant Local Pros</div></div>
        </div>
        <div id="searchSection" class="search-container">
            <input type="hidden" id="searchLat"><input type="hidden" id="searchLon">
            <label style="margin-top:0;">I need help with...</label>
            <div style="position:relative; margin-bottom:10px;">
                <input type="text" id="jobInput" placeholder="e.g. Plumber, Cleaner" autocomplete="off">
                <div id="jobSuggestions" class="suggestions-box"></div>
            </div>
            <label>In this location...</label>
            <div class="search-row location-row" style="display:flex; gap:5px; align-items:center;">
                <input type="text" id="searchCity" class="smart-city" placeholder="City (Mission)" style="flex:2;">
                <select id="searchProv" style="flex:1;"><option value="">Prov</option><option value="BC">BC</option><option value="AB">AB</option><option value="SK">SK</option><option value="MB">MB</option><option value="ON">ON</option><option value="QC">QC</option><option value="NB">NB</option><option value="NS">NS</option><option value="PE">PE</option><option value="NL">NL</option><option value="YT">YT</option><option value="NT">NT</option><option value="NU">NU</option></select>
                <input type="text" id="searchPostal" class="smart-postal" placeholder="V4S" style="flex:1;">
                
                <button onclick="window.locateUser('search')" title="Use my location" style="width:46px; height:46px; flex-shrink:0; background:white; border:2px solid #e5e7eb; border-radius:12px; cursor:pointer; color:var(--primary); display:flex; align-items:center; justify-content:center; transition:all 0.2s;">
                    <i class="ri-map-pin-user-fill" style="font-size:1.2rem;"></i>
                </button>
            </div>
            <button id="btnPing" class="action" style="margin-top:10px;"><i class="ri-search-line"></i> Find Pros Now</button>
        </div>
    </div>

    <div class="container">
        <div id="customerSection" class="card hidden">
            <h2 style="margin-top:0;">My Requests</h2>
            <div id="resultsArea" class="hidden"></div> 
            <div style="padding-top:10px;">
                <div class="tab-container">
                    <button class="tab-btn active" id="tabClientActive">Active Requests</button>
                    <button class="tab-btn" id="tabClientHistory">History</button>
                </div>
                <div id="clientContentActive" class="tab-content active"><div id="clientActiveList"><p style="color:gray;">Loading...</p></div></div>
                <div id="clientContentHistory" class="tab-content"><div id="clientHistoryList"><p style="color:gray;">Loading...</p></div></div>
            </div>
        </div>

        <div id="searchResultsSection" class="card hidden">
            <h2 style="margin-top:0;">Local Professionals</h2>
            <div id="finalResultsArea"></div>
            <button onclick="location.reload()" style="background:#6b7280; color:white; border:none; padding:10px 20px; border-radius:50px; cursor:pointer; margin-top:20px;">Back to Home</button>
        </div>

        <div id="businessSection" class="card hidden" style="border-top: 5px solid var(--primary);">
            <div id="createBizForm" class="card hidden">
                <h2 style="margin-top:0;">Join WrkPulse</h2>
                <input type="text" id="regName" placeholder="Business Name">
                <label>Main Category</label>
                <div style="position:relative;">
                    <input type="text" id="regService" placeholder="e.g. Plumbing" autocomplete="off">
                    <div id="regSuggestions" class="suggestions-box"></div>
                </div>
                <button id="btnRegister" class="action" style="background:var(--success);">Launch Business Profile</button>
                <button onclick="window.loadMyBusiness(true)" style="width:100%; background:none; border:none; color:#6b7280; margin-top:15px; cursor:pointer; font-weight:bold; font-size:0.9rem;">Cancel & Go Back</button>
            </div>
            
            <div id="businessPortal" class="card hidden">
                <h2 style="margin-top:0; color:var(--primary);">🏢 My Businesses</h2>
                <div id="myBusinessList" style="text-align:left; margin-bottom:20px;"></div>
                <button onclick="showCreateBizForm()" class="action" style="background:white; color:var(--primary); border:2px dashed var(--primary); box-shadow:none;">+ Create Another Business</button>
            </div>

            <div id="manageBizForm" class="hidden">
                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;">
                    <div>
                        <div style="display:flex; align-items:center; gap:10px;">
                            <button onclick="loadMyBusiness(true)" style="background:#e5e7eb; border:none; padding:4px 8px; border-radius:4px; cursor:pointer; font-size:0.7rem; font-weight:bold; color:#374151;">⬅ My Businesses</button>
                        </div>
                        <h2 id="myBizName" style="margin:5px 0 0 0;">...</h2>
                        <div id="ownerBadgeArea"></div> 
                    </div>
                    <div id="ownerAvatarPreview" class="avatar-circle" style="width:50px; height:50px;">?</div>
                </div>                
                <div id="ratingOverview" style="font-weight:bold; color:#b45309; margin:10px 0;">⭐ New (No reviews)</div>
                <div id="statusBadge" style="padding:8px 15px; border-radius:8px; font-weight:bold; text-align:center;">Loading Status...</div>
                
                <div class="tab-container" style="margin-top:20px;">
                    <button class="tab-btn active" id="tabActive">Workspace</button>
                    <button class="tab-btn" id="tabHistory">History</button>
                    <button class="tab-btn" id="tabProfile">Profile</button>
                </div>

                <div id="contentActive" class="tab-content active">
                    <div id="activeRequestsArea"><p style="color:gray;">No active jobs.</p></div>
                    <div style="background:white; padding:20px; border:1px solid #e5e7eb; border-radius:12px; margin-top:20px; box-shadow:0 2px 4px rgba(0,0,0,0.02);">
                        <h4 style="margin-top:0; margin-bottom:15px; color:#111827;">🕒 Quick Status</h4>
                        <div class="clean-time-container">
                            <div class="clean-time-box"><label>Open</label><input type="time" id="timeOpen" class="clean-time-input"></div>
                            <div class="clean-time-box"><label>Close</label><input type="time" id="timeClose" class="clean-time-input"></div>
                        </div>
                        <div style="display:flex; align-items:center; justify-content:space-between; margin-top:5px;">
                            <label style="display:flex; align-items:center; gap:8px; margin:0; cursor:pointer;">
                                <input type="checkbox" id="checkAuto" style="width:18px; height:18px; margin:0;"> 
                                <span style="font-size:0.9rem; font-weight:600; color:#374151;">Enable Auto-Schedule</span>
                            </label>
                            <button id="btnToggleOnline" style="background:white; border:1px solid #d1d5db; color:#374151; padding:8px 12px; border-radius:8px; font-weight:bold; font-size:0.75rem; cursor:pointer;">Toggle Manual</button>
                        </div>
                    </div>
                    
<div style="background:#f0fdfa; padding:20px; border:1px solid #ccfbf1; border-radius:12px; margin-top:20px;">
    <h4 style="margin-top:0; color:#0f766e;">🚀 Growth & Ads</h4>
    <p style="font-size:0.9rem; color:#115e59; margin-bottom:10px;">Boost your business to the top of search results.</p>
    
    <label style="margin-top:0; color:#0f766e;">Duration</label>
    <select id="adDuration" style="margin-bottom:10px; border:1px solid #ccfbf1; width:100%; padding:10px; border-radius:8px;">
        <option value="3 Days">3 Days (Trial)</option>
        <option value="7 Days">7 Days</option>
        <option value="30 Days">30 Days</option>
        <option value="Ongoing">Ongoing (Until Cancelled)</option>
    </select>

    <button id="btnRequestSponsor" class="action" style="background:#0f766e; color:white; font-size:0.9rem; padding:10px;">Request Sponsorship Ad</button>
</div>                </div>

                <div id="contentHistory" class="tab-content"><div id="historyRequestsArea"><p style="color:gray;">No job history.</p></div></div>

                <div id="contentProfile" class="tab-content">
                    <input type="hidden" id="editLat"><input type="hidden" id="editLon">
                     <h3 style="margin-top:0;">📝 Edit Public Profile</h3>
                    <label>Profile Image</label>
                    <div class="upload-group">
                        <div id="uploadPreview" class="avatar-circle" style="background:#fff;">?</div>
                        <div><input type="file" id="fileInput" accept="image/*"><p id="uploadMsg" style="font-size:0.8rem; color:gray; margin:5px 0;">Formats: JPG, PNG.</p></div>
                    </div>
                    <input type="hidden" id="editImage"> 
                    <label>Service Tags</label>
                    <div style="position:relative;"><input type="text" id="editService" placeholder="Plumbing, Heating" autocomplete="off"><div id="bizTagSuggestions" class="suggestions-box"></div></div>
                    <label>Pricing Model</label>
                    <input type="text" id="editPrice" placeholder="e.g. Free Estimates or $80/hr">
                    <div class="pricing-chips">
                        <button class="pricing-chip" onclick="setPrice('Free Estimates')">Free Estimates</button>
                        <button class="pricing-chip" onclick="setPrice('Starting at $')">Starting at $...</button>
                        <button class="pricing-chip" onclick="setPrice('$ /hr')">$ /hr</button>
                        <button class="pricing-chip" onclick="setPrice('Contact for Quote')">Contact for Quote</button>
                    </div>
                    <label>Tagline / Bio</label>
                    <p style="font-size:0.8rem; color:gray; margin-top:0; margin-bottom:5px;">Example: "Licensed plumbers serving Mission for 10 years."</p>
                    <textarea id="editDesc" rows="3"></textarea>
                    <label>Home Base</label>
                    <div class="search-row location-row" style="display:flex; gap:5px; align-items:center;">
                        <input type="text" id="editCity" class="smart-city" placeholder="City" style="flex:2;">
                        <select id="editProv" style="flex:1;"><option value="BC">BC</option><option value="AB">AB</option><option value="SK">SK</option><option value="MB">MB</option><option value="ON">ON</option><option value="QC">QC</option><option value="NB">NB</option><option value="NS">NS</option><option value="PE">PE</option><option value="NL">NL</option><option value="YT">YT</option><option value="NT">NT</option><option value="NU">NU</option></select>
                        <input type="text" id="editPostal" class="smart-postal" placeholder="V4S" style="flex:1;">
                        
                        <button onclick="window.locateUser('business')" title="Use my location" style="width:46px; height:46px; flex-shrink:0; background:white; border:2px solid #e5e7eb; border-radius:12px; cursor:pointer; color:var(--primary); display:flex; align-items:center; justify-content:center; transition:all 0.2s;">
                            <i class="ri-map-pin-user-fill" style="font-size:1.2rem;"></i>
                        </button>
                    </div>
                    <label>Expanded Service Areas</label>
                    <textarea id="editServiceArea" class="smart-area" rows="2" placeholder="e.g. Abbotsford, Chilliwack"></textarea>
                    <label>Contact Email (For Alerts)</label>
                    <input type="text" id="editEmail" placeholder="you@yourbusiness.com">
                    <div style="display:grid; grid-template-columns: 1fr; gap:10px; margin-top:10px;">
                        <div><label>Business Phone (Optional - Displayed to Clients)</label><input type="text" id="editPhone"></div>
                    </div>
                    <button id="btnSaveProfile" class="action" style="width: auto; display: block; margin: 30px auto 0 auto; padding: 15px 50px; background: var(--primary); color: white;">Save Changes</button>
                    <p id="saveMsg" style="color:var(--success); display:none; text-align:center; margin-top:10px;">✅ Profile Saved!</p>
                    
                    <div style="margin-top:40px; border-top:2px dashed #ef4444; padding-top:20px; text-align:center; opacity:0.8;">
                        <h4 style="color:#ef4444; margin:0 0 10px 0; font-size:0.9rem;">⚠️ Danger Zone</h4>
                        <p style="font-size:0.8rem; color:gray; margin-bottom:10px;">This will permanently delete your account and data.</p>
                        <button onclick="window.deleteMyAccount()" style="background:white; border:1px solid #ef4444; color:#ef4444; padding:8px 15px; border-radius:8px; cursor:pointer; font-size:0.8rem; font-weight:bold;">Delete My Account</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="warningModal" class="modal hidden" style="height:auto; padding:20px; bottom:50%; right:50%; transform:translate(50%, 50%); width:320px; text-align:center;">
        <h2 id="warningTitle" style="color:#ef4444;">⚠️ Warning</h2>
        <p id="warningText" style="margin-bottom:20px; font-weight:500;"></p>
        <button id="btnAckWarning" class="action">I Acknowledge</button>
    </div>

    <div id="reportModal" class="modal hidden" style="height:auto; padding:20px; bottom:50%; right:50%; transform:translate(50%, 50%); width:320px;">
        <h3>🚩 Report User</h3>
        <p style="font-size:0.85rem; color:gray;">Tell us what happened.</p>
        <textarea id="reportReason" rows="3" placeholder="Explain the issue..."></textarea>
        <button id="btnSubmitReport" class="action" style="background:#ef4444; color:white;">Submit Report</button>
        <button onclick="document.getElementById('reportModal').classList.add('hidden')" style="background:none; border:none; color:gray; margin-top:10px; cursor:pointer;">Cancel</button>
    </div>

    <div id="trustModal" class="modal hidden" style="height:auto; padding:20px; bottom:50%; right:50%; transform:translate(50%, 50%); width:320px; text-align:center;">
        <h2 style="color:var(--primary);">🤝 Trust & Safety</h2>
        <p style="margin-bottom:20px; font-weight:500; font-size:0.9rem;">To keep WrkPulse a secure community for everyone, we require all users to sign in before contacting pros or booking jobs.</p>
        <button onclick="window.login()" class="action">Sign In to Continue</button>
        <button onclick="document.getElementById('trustModal').classList.add('hidden')" style="background:none; border:none; color:gray; margin-top:10px; cursor:pointer; font-size:0.8rem;">Dismiss</button>
    </div>

    <footer>
        &copy; <span id="year"></span> WrkPulse Inc. 
        <span onclick="document.getElementById('legalModal').classList.remove('hidden')" class="legal-link">Legal</span>
        <span onclick="document.getElementById('bugReportModal').classList.remove('hidden')" class="legal-link" style="color:#ef4444; white-space:nowrap;"><i class="ri-bug-2-line"></i> Report Bug</span>
        <span onclick="document.getElementById('donateModal').classList.remove('hidden')" class="legal-link" style="color:var(--accent); white-space:nowrap;"><i class="ri-cup-line"></i> Donate</span>
    </footer>

    <div id="legalModal" class="modal hidden">
        <div class="reviews-header"><span>⚖️ Legal Hub</span><button onclick="document.getElementById('legalModal').classList.add('hidden')" style="background:none; border:none; font-size:1.2rem; cursor:pointer; color:white;">&times;</button></div>
        <div class="legal-body">
            <div class="legal-section"><h4>1. The "Handshake" Protocol</h4><p>WrkPulse is a neutral venue. We connect neighbors with local pros. We do not employ these professionals, nor do we guarantee their work. All agreements, payments, and warranties are strictly between the Client and the Service Provider.</p></div>
            <div class="legal-section"><h4>2. Zero-Tolerance Policy</h4><p>We believe in community safety. Any user found engaging in harassment, hate speech, fraud, or unsafe behavior will be permanently banned without warning. Play nice.</p></div>
            <div class="legal-section"><h4>3. Limitation of Liability</h4><p>By using WrkPulse, you agree to release us from any damages, disputes, or claims arising from your interactions with other users. Always verify credentials and insurance before hiring.</p></div>
            <div class="legal-section"><h4>4. Data Privacy</h4><p>We respect your data. We only share your location and contact info with the specific Pros you choose to engage with. We do not sell your personal data to third-party ad networks.</p></div>
            <p style="text-align:center; color:gray; font-size:0.8rem; margin-top:20px;">Last Updated: Jan 2026</p>
        </div>
    </div>

    <div id="donateModal" class="modal hidden" style="text-align:center; padding:30px;">
        <h2 style="color:var(--primary); margin-top:0; display:flex; align-items:center; justify-content:center; gap:10px;">
            <i class="ri-rocket-2-fill" style="color:var(--accent);"></i> Solo Dev Project
        </h2>
        
        <div style="margin:20px 0; color:var(--primary);">
            <i class="ri-code-box-line" style="font-size:4rem;"></i>
        </div>

        <p style="font-size:1rem; line-height:1.6; color:#374151;">
            Hi! I'm building <b>WrkPulse</b> on my own to help our community connect without the expensive middleman fees.
        </p>
        <p style="color:#6b7280; font-size:0.9rem;">
            I don't have big investors. Just me and my laptop. If you like the app, a small contribution helps keep the servers running!
        </p>

        <button class="action" onclick="window.open('https://ko-fi.com/wrkpulse', '_blank')" style="background:#5D4037; color:white; margin-top:20px; box-shadow:0 4px 10px rgba(93, 64, 55, 0.4); border:none;">
            <i class="ri-cup-line"></i> Buy me a Hot Chocolate
        </button>
        
        <button onclick="document.getElementById('donateModal').classList.add('hidden')" style="background:none; border:none; color:#9ca3af; margin-top:15px; cursor:pointer; font-weight:600;">
            Close
        </button>
    </div>

    <div id="chatModal" class="modal hidden">
        <div class="chat-header"><span id="chatTitle">Chat</span><button onclick="window.closeChat()" style="background:none; border:none; color:white; font-size:1.2rem;">&times;</button></div>
        <div id="pinnedArea" class="hidden pinned-appointment" style="background:#fffbeb; padding:10px; font-weight:bold; border-bottom:1px solid #eee;"><span>📅</span> <span id="pinnedText"></span></div>
        <div id="chatBody" class="chat-body"></div>
        <div class="chat-footer" style="padding:10px; border-top:1px solid #eee; display:flex; gap:10px;">
            <button id="btnProposeTime" title="Schedule Appointment" style="width:40px; padding:0; border:none; font-size:1.2rem; cursor:pointer;">📅</button>
            <input type="text" id="chatInput" placeholder="Message...">
            <button id="btnSendMsg" style="width:auto; padding:0 15px; background:var(--accent); color:var(--primary); font-weight:bold; border:none; border-radius:8px;">Send</button>
        </div>
    </div>

    <div id="ratingModal" class="modal hidden">
        <h3>Rate Pro</h3>
        <select id="ratingValue"><option value="5">⭐⭐⭐⭐⭐ (Excellent)</option><option value="4">⭐⭐⭐⭐ (Good)</option><option value="3">⭐⭐⭐ (Okay)</option><option value="2">⭐⭐ (Poor)</option><option value="1">⭐ (Bad)</option></select>
        <div style="display:flex; flex-wrap:wrap; gap:5px; margin:10px 0;">
            <button class="review-chip" onclick="addReviewText('ratingComment', 'Professional.')">Professional</button>
            <button class="review-chip" onclick="addReviewText('ratingComment', 'On time.')">On time</button>
            <button class="review-chip" onclick="addReviewText('ratingComment', 'Great value.')">Great value</button>
            <button class="review-chip" onclick="addReviewText('ratingComment', 'Clean work.')">Clean work</button>
        </div>
        <textarea id="ratingComment" rows="4" maxlength="300" placeholder="Describe your experience (Max 300 chars)..."></textarea>
        <button id="btnSubmitRating" class="action">Submit Review</button>
        <button onclick="document.getElementById('ratingModal').classList.add('hidden')" style="background:none; border:none; color:gray; margin-top:10px;">Cancel</button>
    </div>

    <div id="rateClientModal" class="modal hidden">
        <h3>Rate Client</h3>
        <select id="clientRatingValue"><option value="5">⭐⭐⭐⭐⭐ (Perfect)</option><option value="4">⭐⭐⭐⭐ (Good)</option><option value="3">⭐⭐⭐ (Average)</option><option value="2">⭐⭐ (Difficult)</option><option value="1">⭐ (Avoid)</option></select>
        <div style="display:flex; flex-wrap:wrap; gap:5px; margin:10px 0;">
            <button class="review-chip" onclick="addReviewText('clientRatingComment', 'Easy to work with.')">Easy to work with</button>
            <button class="review-chip" onclick="addReviewText('clientRatingComment', 'Fast payment.')">Fast payment</button>
            <button class="review-chip" onclick="addReviewText('clientRatingComment', 'Friendly communication.')">Friendly</button>
        </div>
        <textarea id="clientRatingComment" rows="3" maxlength="300" placeholder="How was this client? (Max 300 chars)..."></textarea>
        <button id="btnSubmitClientRating" class="action">Submit</button>
        <button onclick="document.getElementById('rateClientModal').classList.add('hidden')" style="background:none; border:none; color:gray; margin-top:10px;">Cancel</button>
    </div>

    <div id="readReviewsModal" class="modal hidden"><div class="reviews-header"><span>Reviews</span><button onclick="document.getElementById('readReviewsModal').classList.add('hidden')" style="background:none; border:none; font-size:1.2rem; color:white;">&times;</button></div><div id="reviewsBody" class="reviews-body"></div></div>
    <div id="readClientReviewsModal" class="modal hidden"><div class="reviews-header"><span id="clientReviewsTitle">Reviews</span><button onclick="document.getElementById('readClientReviewsModal').classList.add('hidden')" style="background:none; border:none; font-size:1.2rem; color:white;">&times;</button></div><div id="clientReviewsBody" class="reviews-body"></div></div>

    <div id="bugReportModal" class="modal hidden" style="padding:20px; text-align:center;">
        <h2 style="color:#ef4444; margin-top:0;">🐛 Report a Bug</h2>
        <p style="color:gray; font-size:0.9rem;">Found something broken? Let us know!</p>
        <select id="bugType" style="margin-bottom:10px;">
            <option value="glitch">Visual Glitch</option>
            <option value="broken_feature">Button/Feature Not Working</option>
            <option value="login">Login Issue</option>
            <option value="other">Other</option>
        </select>
        <textarea id="bugDesc" rows="4" placeholder="Describe what happened..." style="width:100%; margin-bottom:10px;"></textarea>
        <button onclick="submitBugReport()" class="action" style="background:#ef4444; color:white;">Submit Report</button>
        <button onclick="document.getElementById('bugReportModal').classList.add('hidden')" style="background:none; border:none; color:gray; margin-top:10px; cursor:pointer;">Cancel</button>
    </div>
    <div id="loginModal" class="modal hidden" style="text-align:center; padding:30px;">
        <h2 style="color:var(--primary); margin-top:0;">Sign In</h2>
        <p style="color:gray; font-size:0.9rem; margin-bottom:20px;">Welcome back to WrkPulse!</p>
        
        <button onclick="window.loginGoogle()" class="action" style="background:white; color:#374151; border:1px solid #d1d5db; display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:20px;">
            <img src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg" width="20"> Continue with Google
        </button>

        <div style="display:flex; align-items:center; gap:10px; margin:20px 0; color:gray; font-size:0.8rem;">
            <div style="height:1px; background:#e5e7eb; flex:1;"></div> OR <div style="height:1px; background:#e5e7eb; flex:1;"></div>
        </div>

        <div id="phoneStep1">
            <label style="text-align:left;">Phone Number</label>
            <input type="tel" id="phoneInput" placeholder="+1 555 123 4567" style="font-size:1.1rem; letter-spacing:1px;">
            <div id="recaptcha-container" style="margin:15px auto;"></div>
            <button id="btnSendCode" onclick="window.sendPhoneCode()" class="action" style="margin-top:10px;">Send SMS Code</button>
        </div>

        <div id="phoneStep2" class="hidden">
            <label style="text-align:left;">Enter 6-Digit Code</label>
            <input type="text" id="codeInput" placeholder="123456" style="font-size:1.5rem; text-align:center; letter-spacing:5px;">
            <button onclick="window.verifyPhoneCode()" class="action" style="margin-top:10px; background:var(--success);">Verify & Sign In</button>
            <button onclick="resetLogin()" style="background:none; border:none; color:gray; margin-top:10px; font-size:0.8rem; cursor:pointer;">Wrong number?</button>
        </div>

        <button onclick="document.getElementById('loginModal').classList.add('hidden')" style="background:none; border:none; color:gray; margin-top:20px; cursor:pointer;">Close</button>
    </div>
    <div id="settingsModal" class="modal hidden" style="padding:20px; width:350px; bottom:50%; right:50%; transform:translate(50%, 50%); height:auto; max-height:80vh; overflow-y:auto;">
        <div class="reviews-header"><span>⚙️ Account Settings</span><button onclick="document.getElementById('settingsModal').classList.add('hidden')" style="background:none; border:none; font-size:1.2rem; color:white; cursor:pointer;">&times;</button></div>
        <div class="reviews-body" style="background:white;">
            
            <h4 style="margin-top:0;">👤 My Details</h4>
            <label>Display Name</label>
            <div style="display:flex; gap:5px;">
                <input type="text" id="settingsName" placeholder="Your Name">
                <button onclick="saveSettingsName()" class="action" style="width:auto; margin:0; padding:10px;"><i class="ri-save-line"></i></button>
            </div>

            <hr style="border:0; border-top:1px solid #e5e7eb; margin:20px 0;">

            <h4>📱 Verified Phone</h4>
            <p style="font-size:0.8rem; color:gray; margin-bottom:10px;">Link a phone number to get the <b>Verified Badge</b> and enable SMS alerts.</p>
            
            <div id="phoneLinkArea">
                <div style="display:flex; gap:5px;">
                    <input type="tel" id="linkPhoneInput" placeholder="+1 555..." style="font-size:1rem;">
                    <button id="btnLinkPhone" onclick="startPhoneLinking()" class="action" style="width:auto; margin:0; padding:10px; font-size:0.9rem;">Verify</button>
                </div>
                <div id="recaptcha-linker"></div>
            </div>
            
            <div id="phoneVerifyArea" class="hidden" style="margin-top:10px; background:#f0fdfa; padding:10px; border-radius:8px;">
                <label style="margin-top:0;">Enter Code</label>
                <div style="display:flex; gap:5px;">
                    <input type="text" id="linkCodeInput" placeholder="123456" style="text-align:center; letter-spacing:3px;">
                    <button onclick="confirmPhoneLink()" class="action" style="width:auto; margin:0; padding:10px; background:var(--success);">Confirm</button>
                </div>
            </div>

            <hr style="border:0; border-top:1px solid #e5e7eb; margin:20px 0;">

            <h4>🔔 Notifications</h4>
            <div style="display:flex; flex-direction:column; gap:15px; margin-top:10px;">
                <label style="display:flex; align-items:center; cursor:pointer; margin:0; gap:10px;">
                    <input type="checkbox" id="notifEmail" checked style="width:20px; height:20px; margin:0; cursor:pointer;"> 
                    <span style="font-weight:500;">Email Alerts</span>
                </label>
                <label style="display:flex; align-items:center; cursor:pointer; margin:0; gap:10px;">
                    <input type="checkbox" id="notifSMS" style="width:20px; height:20px; margin:0; cursor:pointer;"> 
                    <span style="font-weight:500;">SMS Alerts <small style="color:var(--accent); font-weight:bold;">(Requires Verified Phone)</small></span>
                </label>
            </div>
            <button onclick="saveNotifPrefs()" class="action" style="margin-top:20px; background:#f3f4f6; color:#374151; border:1px solid #d1d5db;">Save Preferences</button>

            <div style="margin-top:30px; border-top:1px solid #e5e7eb; padding-top:20px; text-align:center;">
                 <button onclick="window.logout()" style="background:none; border:none; color:#374151; font-weight:bold; cursor:pointer; margin-bottom:15px;">Log Out</button>
                 
                 <div>
                    <button onclick="window.deleteMyAccount()" style="background:none; border:none; color:#ef4444; font-size:0.75rem; text-decoration:underline; cursor:pointer; opacity:0.7;">Delete My Account</button>
                 </div>
            </div>
        </div>
    </div>

    <div id="finishProfileModal" class="modal hidden" style="text-align:center; padding:30px; width:300px; bottom:50%; right:50%; transform:translate(50%, 50%);">
        <h2 style="color:var(--primary); margin-top:0;">👋 One Last Thing!</h2>
        <p style="color:gray; font-size:0.9rem;">What should we call you?</p>
        <input type="text" id="newUserName" placeholder="Your Name (e.g. John)" style="text-align:center; font-size:1.1rem; margin-bottom:15px;">
        <button onclick="window.saveMissingName()" class="action">Save & Continue</button>
    </div>

    <script type="module">
        import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js";
        import { getAuth, signInWithPopup, GoogleAuthProvider, signOut, onAuthStateChanged, RecaptchaVerifier, signInWithPhoneNumber, updateProfile, linkWithPhoneNumber } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js";
        import { getFirestore, collection, addDoc, query, where, getDocs, updateDoc, doc, onSnapshot, orderBy, getDoc, deleteField, setDoc, increment, deleteDoc } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js";
        import { deleteUser } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js";
        import { getStorage, ref, uploadBytes, getDownloadURL } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-storage.js";

        console.log("WrkPulse V20.40 - GROWTH");
        document.getElementById('year').innerText = new Date().getFullYear();

        const firebaseConfig = { apiKey: "AIzaSyCRhl0jcgAegjc_3G5Nlk_3mf4ehvHdeC0", authDomain: "taskradar-42bff.firebaseapp.com", projectId: "taskradar-42bff", storageBucket: "taskradar-42bff.firebasestorage.app", messagingSenderId: "505128719514", appId: "1:505128719514:web:849b28a4d031e142677b23" };
        const app = initializeApp(firebaseConfig); const auth = getAuth(app); const db = getFirestore(app); const storage = getStorage(app); const provider = new GoogleAuthProvider();
        let currentUser = null; let myBizId = null; let currentChatUnsubscribe = null; let activeChatRequestId = null; let ratingTargetBizId = null; let ratingTargetReqId = null; let clientRateTargetReqId = null; let uploadedImageURL = "";
        const commonJobs = ["Plumber","Electrician","Cleaner","Handyman","Mover","Painter","Landscaper","Carpenter","Roofer","HVAC","Locksmith","Mechanic","Tutor","Photographer","Web Designer","Dog Walker"];
        let allSearchResults = []; let currentResultIndex = 0; const BATCH_SIZE = 10;
        let jobNeededGlobal = ""; let sCityGlobal = ""; let sProvGlobal = ""; let sPostalGlobal = "";
        let declinedTimersGlobal = {}; let myReviewPendingCategoriesGlobal = []; let myActiveCategoriesGlobal = []; let pendingRequestsGlobal = [];
        let reportTargetUid = null; let reportTargetName = "";

        // --- NEW AUTH LOGIC (Google + Phone) ---
        window.recaptchaVerifier = null;
        window.confirmationResult = null;

        // 1. Open the Login Modal instead of auto-Google
        window.login = () => { 
            document.getElementById('trustModal').classList.add('hidden'); // Close trust modal if open
            document.getElementById('loginModal').classList.remove('hidden');
            setupRecaptcha();
        };

        // 2. Setup Recaptcha (Required by Firebase to prevent bots)
        function setupRecaptcha() {
            if(!window.recaptchaVerifier) {
                window.recaptchaVerifier = new RecaptchaVerifier(auth, 'recaptcha-container', {
                    'size': 'normal',
                    'callback': (response) => {
                        // reCAPTCHA solved, allow signInWithPhoneNumber.
                    }
                });
                window.recaptchaVerifier.render();
            }
        }

        // 3. Send SMS Code
        window.sendPhoneCode = async () => {
            let phoneNumber = document.getElementById('phoneInput').value.trim();
            
            // AUTO-FIX: Remove spaces/dashes and add +1 if missing
            phoneNumber = phoneNumber.replace(/[\s-]/g, '');
            if (!phoneNumber.startsWith('+')) {
                phoneNumber = "+1" + phoneNumber;
            }

            if(phoneNumber.length < 11) return alert("Please enter a valid phone number (Area Code + Number)");
            
            const btn = document.getElementById('btnSendCode');
            btn.innerText = "Sending...";
            
            try {
                window.confirmationResult = await signInWithPhoneNumber(auth, phoneNumber, window.recaptchaVerifier);
                document.getElementById('phoneStep1').classList.add('hidden');
                document.getElementById('phoneStep2').classList.remove('hidden');
                btn.innerText = "Send SMS Code";
            } catch (error) {
                console.error("SMS Error:", error);
                alert("Error sending SMS. Make sure you included +1 (e.g., +1604...)");
                btn.innerText = "Send SMS Code";
                if(window.recaptchaVerifier) {
                    window.recaptchaVerifier.clear(); // Reset captcha on error
                    window.recaptchaVerifier = null;
                }
                setupRecaptcha();
            }
        };

        // 4. Verify Code
        window.verifyPhoneCode = async () => {
            const code = document.getElementById('codeInput').value.trim();
            if(!code) return alert("Enter the 6-digit code.");
            
            try {
                await window.confirmationResult.confirm(code);
                document.getElementById('loginModal').classList.add('hidden');
                // Auth listener will handle the rest (reloading UI)
            } catch (error) {
                alert("Incorrect code. Please try again.");
            }
        };

        // 5. Google Login (Moved here)
        window.loginGoogle = async () => {
            try { 
                await signInWithPopup(auth, provider); 
                document.getElementById('loginModal').classList.add('hidden'); 
            } catch(e) { console.error(e); }
        };

        window.resetLogin = () => {
            document.getElementById('phoneStep1').classList.remove('hidden');
            document.getElementById('phoneStep2').classList.add('hidden');
        };
        window.logout = () => { signOut(auth); location.reload(); };
        window.handleAction = (type) => { 
            if(!currentUser) { document.getElementById('trustModal').classList.remove('hidden'); return; } 
            
            // 1. Hide everything first
            document.querySelector('.hero').classList.add('hidden'); 
            document.getElementById('customerSection').classList.add('hidden'); 
            document.getElementById('searchResultsSection').classList.add('hidden'); 
            document.getElementById('businessSection').classList.add('hidden'); 
            
            // 2. Turn off all highlights
            document.querySelectorAll('.nav-item').forEach(el => el.classList.remove('active-view')); 
            
            // 3. Show the right section & Highlight the specific button ID
            if(type === 'customer') { 
                document.getElementById('customerSection').classList.remove('hidden'); 
                document.getElementById('navMyRequests').classList.add('active-view'); 
            } 
            else if(type === 'business') { 
                document.getElementById('businessSection').classList.remove('hidden'); 
                document.getElementById('navDashboard').classList.add('active-view'); 
            } 
        };
        
        onAuthStateChanged(auth, async (user) => { 
            if (user) { 
                currentUser = user; 
                document.getElementById('authStatus').innerHTML = `<button onclick="window.logout()">Logout</button>`; 
                
                // CHECK: If user has no name (Phone Login), force them to set one.
                if(!user.displayName && !document.getElementById('finishProfileModal').classList.contains('active-force')) {
                    document.getElementById('finishProfileModal').classList.remove('hidden');
                    document.getElementById('finishProfileModal').classList.add('active-force'); 
                }

                try { const settingsSnap = await getDoc(doc(db, "system_settings", "admin_access")); let isEmployee = false; if (settingsSnap.exists()) { const adminList = settingsSnap.data().admins || []; if (adminList.find(a => a.email === user.email)) isEmployee = true; } if (user.email === 'johnmacabinguel@gmail.com' || isEmployee) { document.getElementById('navAdmin').classList.remove('hidden'); } } catch(e) {}
                const userRef = doc(db, "users", user.uid); const userSnap = await getDoc(userRef); if (!userSnap.exists()) { await setDoc(userRef, { email: user.email, name: user.displayName, status: 'clear' }); } else { const userData = userSnap.data(); if (userData.status === 'banned') { document.body.innerHTML = `<div style="text-align:center; padding:100px; font-family:sans-serif;"><h1>🚫 Account Banned</h1><p>Your access to WrkPulse has been permanently disabled.</p></div>`; return; } else if (userData.status === 'warning1' || userData.status === 'warning2') { document.getElementById('warningModal').classList.remove('hidden'); document.getElementById('warningTitle').innerText = userData.status === 'warning1' ? "⚠️ 1st Warning" : "🔥 Final Warning"; document.getElementById('warningText').innerText = userData.warningMsg || "Please review our terms."; document.getElementById('btnAckWarning').onclick = async () => { await updateDoc(userRef, { status: 'clear' }); document.getElementById('warningModal').classList.add('hidden'); }; } }
                await loadMyBusiness(); listenToClientRequests(); const sugSnap = await getDocs(collection(db, "approved_suggestions")); sugSnap.forEach(doc => { const word = doc.data().keyword; if (word && !commonJobs.includes(word)) commonJobs.push(word); }); 
            } else { currentUser = null; document.getElementById('authStatus').innerHTML = `<button onclick="window.login()">Sign In</button>`; document.getElementById('navAdmin').classList.add('hidden'); } 
        });

        // NEW: Save Name for Phone Users
        window.saveMissingName = async () => {
            const name = document.getElementById('newUserName').value.trim();
            if(!name) return alert("Please enter your name.");
            
            const btn = document.querySelector('#finishProfileModal button');
            btn.innerText = "Saving...";
            
            try {
                // 1. Update Firebase Auth Profile
                await updateProfile(currentUser, { displayName: name });
                
                // 2. Update Database User Record
                await setDoc(doc(db, "users", currentUser.uid), { 
                    name: name, 
                    email: currentUser.email || "",
                    phone: currentUser.phoneNumber || "" 
                }, { merge: true });

                alert("✅ Profile Updated!");
                location.reload(); 
            } catch(e) {
                console.error(e);
                alert("Error saving name.");
                btn.innerText = "Save & Continue";
            }
        };

        window.setPrice = (val) => { document.getElementById('editPrice').value = val; document.getElementById('editPrice').focus(); };
        window.addReviewText = (id, text) => { const box = document.getElementById(id); if(box.value.length + text.length > 300) return alert("Review too long!"); box.value = box.value ? box.value + " " + text : text; };
        function setupSmartInputs() { document.querySelectorAll('.smart-city').forEach(input => { input.addEventListener('blur', (e) => { if(e.target.value) e.target.value = e.target.value.charAt(0).toUpperCase() + e.target.value.slice(1); }); }); document.querySelectorAll('.smart-postal').forEach(input => { input.addEventListener('input', (e) => { let val = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, ''); if(val.length > 3) val = val.substring(0, 3); e.target.value = val; }); }); const areaBox = document.querySelector('.smart-area'); if(areaBox) { areaBox.addEventListener('blur', (e) => { if(e.target.value) { e.target.value = e.target.value.split(',').map(part => part.trim()).map(part => part.charAt(0).toUpperCase() + part.slice(1)).join(', '); } }); } } setupSmartInputs();

        document.getElementById('btnPing').addEventListener('click', async () => {
            let jobNeeded = document.getElementById('jobInput').value.trim();
            if (jobNeeded) jobNeeded = jobNeeded.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(' '); document.getElementById('jobInput').value = jobNeeded;
            const sCity = document.getElementById('searchCity').value.trim(); const sProv = document.getElementById('searchProv').value; const sPostal = document.getElementById('searchPostal').value.trim();
            if(!jobNeeded) { alert("Please type a job."); return; } if(!sCity && !sPostal) { alert("Please enter a City or Postal Code."); return; }

            document.querySelector('.hero').classList.add('hidden'); document.getElementById('customerSection').classList.add('hidden'); document.getElementById('businessSection').classList.add('hidden'); document.getElementById('searchResultsSection').classList.remove('hidden'); const resultsArea = document.getElementById('finalResultsArea'); 
            // NEW: Professional Loading Spinner
            resultsArea.innerHTML = `<div style="text-align:center; padding:40px; color:var(--primary);"><i class="ri-loader-4-line ri-spin" style="font-size:3rem;"></i><p style="margin-top:10px; font-weight:bold; color:var(--gray);">Searching network...</p></div>`;
            
            jobNeededGlobal = jobNeeded; const validJob = commonJobs.find(j => j.toLowerCase() === jobNeeded.toLowerCase());
            if (validJob && currentUser) { try { const statsRef = doc(db, "search_stats", validJob); const statsSnap = await getDoc(statsRef); if (statsSnap.exists()) { await updateDoc(statsRef, { count: increment(1) }); } else { await setDoc(statsRef, { count: 1, keyword: validJob }); } } catch(e) {} }            
            sCityGlobal = sCity; sProvGlobal = sProv; sPostalGlobal = sPostal; allSearchResults = []; currentResultIndex = 0; declinedTimersGlobal = {}; myReviewPendingCategoriesGlobal = []; myActiveCategoriesGlobal = []; pendingRequestsGlobal = [];

            if(currentUser) { const reqSnap = await getDocs(query(collection(db, "requests"), where("fromUid", "==", currentUser.uid))); reqSnap.forEach(doc => { const r = doc.data(); if(['pending', 'chat_open'].includes(r.status)) pendingRequestsGlobal.push(r.bizId); if(r.status === 'job_started' && r.serviceCategory) myActiveCategoriesGlobal.push(r.serviceCategory.toLowerCase()); if(r.status === 'work_done' && r.serviceCategory) myReviewPendingCategoriesGlobal.push(r.serviceCategory.toLowerCase()); if(r.status === 'rejected' && r.unlockDate) declinedTimersGlobal[r.bizId] = r.unlockDate; }); }

            const snapshot = await getDocs(collection(db, "businesses")); let foundPros = []; const now = new Date(); const currentMins = now.getHours() * 60 + now.getMinutes();
            snapshot.forEach(docSnap => {
                const biz = docSnap.data(); biz.id = docSnap.id; if (!(biz.service || "").toLowerCase().includes(jobNeeded.toLowerCase())) return;
                const primaryLoc = (biz.city || "").toUpperCase(); const secondaryLoc = (biz.serviceArea || "").toUpperCase(); const totalLoc = primaryLoc + " " + secondaryLoc; let match = true;
                if (sPostal && !totalLoc.includes(sPostal.toUpperCase())) match = false; if (sCity && !totalLoc.includes(sCity.toUpperCase())) match = false; if (sProv && !primaryLoc.includes(sProv)) match = false; if (!match) return;
                biz.isSecondaryMatch = false; if (sCity && secondaryLoc.includes(sCity.toUpperCase()) && !primaryLoc.includes(sCity.toUpperCase())) { biz.isSecondaryMatch = true; biz.matchedCity = sCity; }
                let isAvailable = (biz.status === 'online');
                if (!isAvailable && biz.autoSchedule && biz.openTime && biz.closeTime) { try { const [oH, oM] = biz.openTime.split(':').map(Number); const [cH, cM] = biz.closeTime.split(':').map(Number); if (currentMins >= (oH * 60 + oM) && currentMins < (cH * 60 + cM)) isAvailable = true; } catch (e) {} }
                if (isAvailable) { biz.rankScore = ((biz.rating || 0) * (biz.reviewCount || 0) + 20) / ((biz.reviewCount || 0) + 5); foundPros.push(biz); }
            }); 

            foundPros.sort((a,b) => { if (a.sponsored && !b.sponsored) return -1; if (!a.sponsored && b.sponsored) return 1; return b.rankScore - a.rankScore; });            
            window.renderNextBatch = function() {
                // FIX 1: Clear the "Searching..." spinner properly
                if (currentResultIndex === 0) resultsArea.innerHTML = ""; 

                const nextBatch = allSearchResults.slice(currentResultIndex, currentResultIndex + BATCH_SIZE);
                
                if (allSearchResults.length === 0) { 
                    resultsArea.innerHTML = `<div style="background: white; padding: 40px; border-radius: 16px; text-align: center; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1); border: 1px solid #e5e7eb; margin-top: 20px;"><div style="font-size: 50px; margin-bottom: 20px;">🚀</div><h2 style="margin: 0 0 10px 0; color: #111827;">No ${jobNeededGlobal || 'Pros'} found here yet.</h2><p style="color: #6b7280; font-size: 1.1rem; margin-bottom: 30px; max-width: 400px; margin-left: auto; margin-right: auto;">Be the first to claim this territory!</p><button onclick="window.handleAction('business')" style="background: #166534; color: white; border: none; padding: 12px 30px; border-radius: 50px; cursor: pointer; font-weight: 700;">Create Business Profile</button></div>`; 
                    return; 
                }

                nextBatch.forEach(biz => {let locationHTML = `<div style="font-size:0.8rem; color:gray; margin-top:5px;">📍 ${biz.city || "No area listed"}</div>`;
                    
                    // NEW: Distance Calculation
                    const searchLat = parseFloat(document.getElementById('searchLat').value);
                    const searchLon = parseFloat(document.getElementById('searchLon').value);
                    if(searchLat && searchLon && biz.geo && biz.geo.lat) {
                        const dist = getDistanceKm(searchLat, searchLon, biz.geo.lat, biz.geo.lon);
                        if(dist) {
                            locationHTML = `<div style="font-size:0.8rem; color:var(--primary); font-weight:bold; margin-top:5px;">📍 ${dist} km away <span style="color:gray; font-weight:normal;">(${biz.city})</span></div>`;
                            biz.rankScore += (100 - parseFloat(dist)); // Boost closer results slightly
                        }
                    }
                    
                    if(biz.isSecondaryMatch) { locationHTML += `<div class="match-badge">✅ Covers ${biz.matchedCity}</div>`; }
                    const uniqueId = biz.id;
                    let badgeHTML = ""; 
                    if (biz.sponsored) { 
                        badgeHTML = `<div style="background:#fef3c7; color:#b45309; border:1px solid #fcd34d; font-size:0.7rem; font-weight:bold; padding:2px 8px; border-radius:4px; display:inline-block; margin-right:5px;"><i class="ri-flashlight-fill"></i> Sponsored</div>`; 
                    } else if (biz.verified) { 
                        badgeHTML = `<div class="verified-badge"><i class="ri-shield-check-fill"></i> Verified Pro</div>`; 
                    }
                    const starHTML = biz.rating ? `<div class="star-badge" data-id="${uniqueId}"><i class="ri-star-fill"></i> ${biz.rating} (${biz.reviewCount})</div>` : `<div class="star-badge" style="background:#f3f4f6; color:gray;"><i class="ri-star-line"></i> New</div>`;
                    let avatarHTML = `<div class="avatar-circle">${biz.name.charAt(0)}</div>`; if(biz.image) avatarHTML = `<div class="avatar-circle"><img src="${biz.image}" class="avatar-img"></div>`;
                    
                    // FIX 2: ALIGNMENT. Added 'align-items:center' and 'min-height' so "Online" doesn't jump.
                    let btnHTML = ""; let displayService = jobNeededGlobal.charAt(0).toUpperCase() + jobNeededGlobal.slice(1);
                    const requestLocation = sCityGlobal ? `${sCityGlobal}, ${sProvGlobal}` : (sPostalGlobal || "Unspecified Location");
                    if (declinedTimersGlobal[uniqueId]) { let daysLeft = Math.ceil((new Date(declinedTimersGlobal[uniqueId]) - new Date()) / (86400000)); if(daysLeft > 0) btnHTML = `<button class="action btn-cooldown" disabled>🚫 Cooldown (${daysLeft} Days)</button>`; else btnHTML = `<button class="action btn-request-info" data-id="${uniqueId}" data-owner-uid="${biz.owner_uid || ''}" data-email="${biz.email || ''}" data-name="${encodeURIComponent(biz.name)}" data-service="${encodeURIComponent(displayService)}" data-req-loc="${encodeURIComponent(requestLocation)}">Request Info</button>`; }
                    else if (myReviewPendingCategoriesGlobal.includes(jobNeededGlobal)) btnHTML = `<button class="action btn-locked" disabled>🔒 Locked: Review Required</button>`;
                    else if (myActiveCategoriesGlobal.includes(jobNeededGlobal)) btnHTML = `<button class="action btn-locked" disabled>🔒 Locked: Active Job</button>`;
                    else if (pendingRequestsGlobal.includes(uniqueId)) btnHTML = `<button class="action btn-locked" disabled>⏳ Request Sent</button>`;
                    else btnHTML = `<button class="action btn-request-info" data-id="${uniqueId}" data-owner-uid="${biz.owner_uid || ''}" data-email="${biz.email || ''}" data-name="${encodeURIComponent(biz.name)}" data-service="${encodeURIComponent(displayService)}" data-req-loc="${encodeURIComponent(requestLocation)}">Request Info</button>`;

                    resultsArea.innerHTML += `
                    <div class="result-card">
                        ${avatarHTML}
                        <div class="result-content">
                            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; min-height:26px;">
                                <div>${badgeHTML}</div>
                                <div class="online-text">● Online</div>
                            </div>
                            <div style="display:flex; justify-content:space-between; align-items:center;">${starHTML}</div>
                            <h3 style="margin:5px 0 0 0;">${biz.name}</h3>
                            <p style="color:#64748b; font-size:0.9rem;">${biz.desc || "Ready to help."}</p>
                             ${locationHTML}
                            <div style="font-weight:bold; color:var(--primary); margin:10px 0;">${biz.price || "Contact for quote"}</div>
                            ${btnHTML}
                        </div>
                    </div>`;
                });
                currentResultIndex += nextBatch.length; const oldBtn = document.getElementById('loadMoreContainer'); if(oldBtn) oldBtn.remove();
                
                // PAGINATION OR FOOTER COUNT
                if(currentResultIndex < allSearchResults.length) { 
                    resultsArea.innerHTML += `<div id="loadMoreContainer" class="load-more-container"><button id="btnLoadMore" class="btn-load-more">👇 Show More</button></div>`; 
                    setTimeout(() => { const btn = document.getElementById('btnLoadMore'); if(btn) btn.onclick = () => { renderNextBatch(); }; }, 100); 
                } else {
                    // Show Clean Footer Count
                    resultsArea.innerHTML += `<div style="text-align:center; margin-top:30px; padding-top:20px; border-top:1px solid #e5e7eb; color:#6b7280; font-size:0.9rem; font-weight:600;">
                        <i class="ri-check-double-line" style="vertical-align:middle;"></i> Found ${allSearchResults.length} Professionals in this area.
                    </div>`;
                }
            };
            allSearchResults = foundPros; renderNextBatch();
        });

        window.openReport = (uid, name) => { if(!currentUser) { document.getElementById('trustModal').classList.remove('hidden'); return; } reportTargetUid = uid; reportTargetName = decodeURIComponent(name); document.getElementById('reportModal').classList.remove('hidden'); };
        document.getElementById('btnSubmitReport').onclick = async () => { const r = document.getElementById('reportReason').value; if(!r) return alert("Enter reason."); await addDoc(collection(db, "reports"), { reporterUid: currentUser.uid, reporterEmail: currentUser.email, reportedUid: reportTargetUid, reportedName: reportTargetName, reason: r, timestamp: new Date() }); await updateDoc(doc(db, "users", reportTargetUid), { reportCount: increment(1) }); document.getElementById('reportModal').classList.add('hidden'); alert("Report sent to Admin."); };

        setupAutocomplete('jobInput', 'jobSuggestions', (val) => { document.getElementById('jobInput').value = val; });
        setupAutocomplete('regService', 'regSuggestions', (val) => { document.getElementById('regService').value = val; });
        const tagInput = document.getElementById('editService'); const tagBox = document.getElementById('bizTagSuggestions');
        tagInput.addEventListener('input', (e) => { const val = e.target.value; const parts = val.split(','); const currentWord = parts[parts.length - 1].trim().toLowerCase(); tagBox.innerHTML = ""; if(!currentWord) { tagBox.style.display = 'none'; return; } const matches = commonJobs.filter(j => j.toLowerCase().includes(currentWord)); if(matches.length > 0) { tagBox.style.display = 'block'; matches.forEach(job => { const div = document.createElement('div'); div.className = 'suggestion-item'; div.innerText = job; div.onclick = () => { parts.pop(); parts.push(job); tagInput.value = parts.join(', ') + ", "; tagBox.style.display = 'none'; tagInput.focus(); }; tagBox.appendChild(div); }); } else { tagBox.style.display = 'none'; } }); 
        document.addEventListener('click', (e) => { if(e.target !== tagInput) tagBox.style.display = 'none'; });
        function autoCap(id) { const el = document.getElementById(id); if(el) { el.addEventListener('blur', (e) => { if (e.target.value) { e.target.value = e.target.value.split(/([,\s]+)/).map(word => word.length > 0 ? word.charAt(0).toUpperCase() + word.slice(1) : word).join(''); } }); } } autoCap('regService'); autoCap('editService');        
        function setupAutocomplete(inputId, boxId, onSelect) { const input = document.getElementById(inputId); const box = document.getElementById(boxId); input.addEventListener('input', (e) => { const val = e.target.value.split(',').pop().trim().toLowerCase(); box.innerHTML = ""; if(!val) { box.style.display = 'none'; return; } const matches = commonJobs.filter(j => j.toLowerCase().includes(val)); if(matches.length > 0) { box.style.display = 'block'; matches.forEach(job => { const div = document.createElement('div'); div.className = 'suggestion-item'; div.innerText = job; div.onclick = () => { onSelect(job); box.style.display = 'none'; }; box.appendChild(div); }); } else { box.style.display = 'none'; } }); document.addEventListener('click', (e) => { if(e.target !== input) box.style.display = 'none'; }); }
// FIX: RESTORE 'LAUNCH BUSINESS' BUTTON
        // FIX: RESTORE 'LAUNCH BUSINESS' BUTTON (Robust Version)
        document.getElementById('btnRegister').addEventListener('click', async () => {
            if(!currentUser) return alert("Please sign in first.");
            
            const name = document.getElementById('regName').value.trim();
            const service = document.getElementById('regService').value.trim();
            if(!name || !service) return alert("Please enter Business Name and Category.");
            
            const btn = document.getElementById('btnRegister');
            const originalText = btn.innerText;
            btn.innerText = "Creating...";
            btn.disabled = true;

            try {
                // Check for existing business
                const q = query(collection(db, "businesses"), where("owner_uid", "==", currentUser.uid));
                const snap = await getDocs(q);
                if(!snap.empty) {
                    alert("You already have a business profile!");
                    await window.loadMyBusiness();
                    return;
                }

                // Create business (Handle missing email for Phone Users)
                await addDoc(collection(db, "businesses"), {
                    owner_uid: currentUser.uid,
                    name: name,
                    service: service,
                    email: currentUser.email || "No Email", // Fixes crash if email is null
                    phone: currentUser.phoneNumber || "",    // Auto-save phone if available
                    status: 'online',
                    verified: false,
                    rating: 0,
                    reviewCount: 0,
                    timestamp: new Date()
                });

                await loadMyBusiness();
                // success!
            } catch(e) {
                console.error("Business Create Error:", e);
                alert("Error creating profile: " + e.message);
                btn.innerText = originalText;
                btn.disabled = false;
            }
        });
        document.getElementById('btnSaveProfile').addEventListener('click', async () => { 
            if(!myBizId) return; 
            const combinedLocation = `${document.getElementById('editCity').value}, ${document.getElementById('editProv').value}, ${document.getElementById('editPostal').value}`; 
            
            const bizData = { 
                desc: document.getElementById('editDesc').value, 
                price: document.getElementById('editPrice').value, 
                phone: document.getElementById('editPhone').value, 
                email: document.getElementById('editEmail').value, 
                image: document.getElementById('editImage').value, 
                service: document.getElementById('editService').value, 
                city: combinedLocation, 
                serviceArea: document.getElementById('editServiceArea').value, 
                openTime: document.getElementById('timeOpen').value, 
                closeTime: document.getElementById('timeClose').value, 
                autoSchedule: document.getElementById('checkAuto').checked,
                // NEW: Save Coordinates
                geo: {
                    lat: parseFloat(document.getElementById('editLat').value) || null,
                    lon: parseFloat(document.getElementById('editLon').value) || null
                }
            }; 
            
            await updateDoc(doc(db, "businesses", myBizId), bizData); 
            document.getElementById('saveMsg').style.display = 'block'; 
            setTimeout(() => document.getElementById('saveMsg').style.display='none', 3000); 
            if(bizData.image) document.getElementById('ownerAvatarPreview').innerHTML = `<img src="${bizData.image}" class="avatar-img">`; 
            bizData.status = document.getElementById('statusBadge').innerText.includes("Manual Override") ? 'online' : 'offline'; 
            calculateSmartStatus(bizData); 
        });

        // NEW: REQUEST SPONSORSHIP HANDLER (UPDATED WITH DURATION)
        document.getElementById('btnRequestSponsor').addEventListener('click', async () => {
            if(!myBizId) return;
            const btn = document.getElementById('btnRequestSponsor');
            const duration = document.getElementById('adDuration').value; // Get the dropdown value

            btn.innerText = "Sending Request...";
            
            // Check if already requested
            const q = query(collection(db, "sponsorship_requests"), where("bizId", "==", myBizId), where("status", "==", "pending"));
            const snap = await getDocs(q);
            if(!snap.empty) { alert("You already have a pending request!"); btn.innerText = "Request Pending"; return; }

            try {
                const bizName = document.getElementById('myBizName').innerText;
                await addDoc(collection(db, "sponsorship_requests"), {
                    bizId: myBizId,
                    bizName: bizName,
                    ownerUid: currentUser.uid,
                    ownerEmail: currentUser.email,
                    requestedDuration: duration, // Save the duration to database
                    timestamp: new Date(),
                    status: 'pending'
                });
                alert("🚀 Request Sent! An Admin will review your profile shortly.");
                btn.innerText = "Request Sent ✅";
                btn.disabled = true;
                btn.style.backgroundColor = "#9ca3af";
            } catch(e) {
                console.error(e);
                alert("Error sending request.");
                btn.innerText = "Request Sponsorship Ad";
            }
        });

        document.addEventListener('click', async (e) => { 
            // 1. REQUEST INFO BUTTON (The Logic You Wanted)
            if (e.target && e.target.classList.contains('btn-request-info')) { 
                const btn = e.target; 
                if(btn.disabled) return; 
                if(!currentUser) { document.getElementById('trustModal').classList.remove('hidden'); return; } 
                
                const bizId = btn.getAttribute('data-id'); 
                const ownerUid = btn.getAttribute('data-owner-uid'); 
                if(ownerUid && ownerUid === currentUser.uid) { alert("🚫 Self-Hiring Blocked"); return; } 
                
                const bizName = decodeURIComponent(btn.getAttribute('data-name')); 
                const newService = decodeURIComponent(btn.getAttribute('data-service')); 
                const reqLocation = decodeURIComponent(btn.getAttribute('data-req-loc') || ""); 
                const bizEmail = btn.getAttribute('data-email'); 
                
                btn.innerText = "Sending..."; 
                btn.disabled = true; 
                
                try { 
                    // SMART VERIFICATION: If they have verified email OR a phone number -> They are Verified.
                    const isVerified = (currentUser.emailVerified || (currentUser.phoneNumber ? true : false));

                    await addDoc(collection(db, "requests"), { 
                        fromUid: currentUser.uid, 
                        clientName: currentUser.displayName || currentUser.phoneNumber || "User", // Fallback to Phone if Name is missing
                        clientEmail: currentUser.email || "Phone User", 
                        clientVerified: isVerified, // <--- SAVES TRUE IF PHONE EXISTS
                        bizId, 
                        bizName, 
                        bizOwnerUid: ownerUid, 
                        serviceCategory: newService, 
                        clientLocation: reqLocation, 
                        status: 'pending', 
                        timestamp: new Date() 
                    }); 
                    
                    if(bizEmail && bizEmail.includes('@')) { 
                        emailjs.send("service_7wf29fh", "template_iz1jx14", { to_email: bizEmail, biz_name: bizName, client_name: currentUser.displayName || "Client", client_location: reqLocation, service_requested: newService }); 
                    } 
                    btn.innerText = "✅ Sent"; 
                } catch(err) { 
                    console.error(err);
                    alert("Error sending request: " + err.message);
                    btn.innerText = "Retry"; 
                    btn.disabled = false; 
                } 
            } 
            
            // 2. OTHER BUTTON HANDLERS
            if (e.target && e.target.classList.contains('star-badge')) { if(!currentUser) { document.getElementById('trustModal').classList.remove('hidden'); return; } const bizId = e.target.getAttribute('data-id'); if(bizId) openReviewsModal(bizId); } 
            if (e.target && e.target.classList.contains('btn-open-chat')) { const reqId = e.target.getAttribute('data-id'); const name = decodeURIComponent(e.target.getAttribute('data-name')); openChat(reqId, name); } 
            if (e.target && e.target.classList.contains('btn-rate-pro')) { ratingTargetBizId = e.target.getAttribute('data-biz-id'); ratingTargetReqId = e.target.getAttribute('data-req-id'); document.getElementById('ratingComment').value = ""; document.getElementById('ratingModal').classList.remove('hidden'); } 
            if (e.target && e.target.classList.contains('btn-cancel-req')) { const reqId = e.target.getAttribute('data-id'); if(confirm("Cancel this request?")) await updateDoc(doc(db, "requests", reqId), { status: 'cancelled' }); } 
        });

        // FIX: Missing function that caused the crash
        async function getClientReputationHTML(uid, verified, name) {
            if(!uid) return "";
            let html = "";
            if(verified) html += `<span style="color:#1e40af; background:#dbeafe; padding:2px 6px; border-radius:4px; font-size:0.7rem; margin-left:5px; font-weight:bold;"><i class="ri-shield-check-fill"></i> Verified</span>`;
            // You can add more reputation logic here later (e.g. star ratings)
            return html;
        }
        window.loadMyBusiness = async (forcePortal = false) => { 
            document.getElementById('createBizForm').classList.add('hidden'); document.getElementById('manageBizForm').classList.add('hidden'); document.getElementById('businessPortal').classList.add('hidden');
            
            const q = query(collection(db, "businesses"), where("owner_uid", "==", currentUser.uid)); 
            const snapshot = await getDocs(q); 
            
            if (snapshot.empty) { document.getElementById('createBizForm').classList.remove('hidden'); return; }
            const businesses = snapshot.docs;
            
            // If only 1 business, go straight to dashboard (unless forced)
            if (businesses.length === 1 && !forcePortal) { selectBusiness(businesses[0].id, businesses[0].data()); return; }
            
            document.getElementById('businessPortal').classList.remove('hidden'); 
            const listArea = document.getElementById('myBusinessList'); 
            listArea.innerHTML = "";
            
            let totalGlobalNotifications = 0;

            // FETCH COUNTS & RENDER LIST
            for (const docSnap of businesses) {
                const b = docSnap.data(); const bId = docSnap.id; 
                const verifiedTag = b.verified ? '<i class="ri-shield-check-fill" style="color:#1e40af;"></i>' : '';
                
                // 1. Check Status (Online/Offline)
                let statusColor = "#ef4444"; // Red (Offline)
                let statusTitle = "Offline";
                if(b.status === 'online') { statusColor = "#10b981"; statusTitle = "Online"; }
                if (b.status !== 'online' && b.autoSchedule && b.openTime && b.closeTime) {
                    const now = new Date(); const currentMins = now.getHours() * 60 + now.getMinutes(); 
                    const [oH, oM] = b.openTime.split(':').map(Number); const [cH, cM] = b.closeTime.split(':').map(Number); 
                    if (currentMins >= (oH*60+oM) && currentMins < (cH*60+cM)) { statusColor = "#10b981"; statusTitle = "Online (Auto)"; }
                }

                // 2. Check Pending Requests
                const reqQ = query(collection(db, "requests"), where("bizId", "==", bId), where("status", "==", "pending"));
                const reqSnap = await getDocs(reqQ);
                const count = reqSnap.size;
                totalGlobalNotifications += count;

                const notifBadge = count > 0 ? `<div style="background:#ef4444; color:white; font-size:0.75rem; font-weight:bold; padding:4px 10px; border-radius:20px; margin-left:auto; display:flex; align-items:center; gap:5px; flex-shrink:0;"><i class="ri-notification-3-fill"></i> ${count} New</div>` : "";
                // FIX #2: Removed the ${b.service} line as requested
                listArea.innerHTML += `
                <div onclick="window.selectBusiness('${bId}')" class="result-card" style="cursor:pointer; border-left:4px solid var(--accent); transition:transform 0.2s; align-items:center;">
                    <div style="width:12px; height:12px; background:${statusColor}; border-radius:50%; margin-right:10px; box-shadow:0 0 5px ${statusColor}; border:2px solid white;" title="${statusTitle}"></div>
                    <div class="avatar-circle" style="background:var(--primary); color:white; width:45px; height:45px; font-size:1.1rem; border:none;">${b.name.charAt(0)}</div>
                    <div style="flex:1; padding-left:10px;">
                        <div style="font-weight:900; font-size:1.1rem; color:var(--primary); display:flex; align-items:center; gap:5px;">${b.name} ${verifiedTag}</div>
                    </div>
                    ${notifBadge}
                    <div style="font-size:1.2rem; color:var(--accent); font-weight:bold; margin-left:10px;">➔</div>
                </div>`; 
            }

            // FIX #3: Update the main "For Business" nav button with total notifications
            const navBtn = document.getElementById('navDashboard');
            if(totalGlobalNotifications > 0) {
                navBtn.innerHTML = `For Business <span class="badge-count">${totalGlobalNotifications}</span>`;
            } else {
                navBtn.innerHTML = `For Business`;
            }

            const btnCreate = document.querySelector('#businessPortal button.action'); 
            if (businesses.length >= 3) { 
                btnCreate.style.display = 'none'; 
                listArea.innerHTML += `<div style="text-align:center; color:gray; font-size:0.9rem; margin-top:20px;">Maximum of 3 businesses allowed.</div>`; 
            } else { 
                btnCreate.style.display = 'block'; 
            }
        }
        window.showCreateBizForm = () => { document.getElementById('businessPortal').classList.add('hidden'); document.getElementById('createBizForm').classList.remove('hidden'); }
        window.selectBusiness = async (id, data = null) => {
            myBizId = id; let biz = data; if (!biz) { const docSnap = await getDoc(doc(db, "businesses", id)); biz = docSnap.data(); }
            document.getElementById('businessPortal').classList.add('hidden'); document.getElementById('createBizForm').classList.add('hidden'); document.getElementById('manageBizForm').classList.remove('hidden');
            document.getElementById('myBizName').innerText = biz.name; 
            // ICON UPDATE: Dashboard Status
            if (biz.verified) { 
                document.getElementById('ownerBadgeArea').innerHTML = `<span class="verified-badge">✅ VERIFIED</span>`; 
            } else { 
                const statusText = biz.verificationEvidence ? "<i class='ri-time-line'></i> Pending Review" : "<i class='ri-shield-check-line'></i> Get Verified";
                const action = biz.verificationEvidence ? "alert('Please wait for Admin to review your proof.')" : "requestVerification()"; 
                document.getElementById('ownerBadgeArea').innerHTML = `<span style="color:gray; font-size:0.8rem;">(Unverified)</span> <button onclick="${action}" style="margin-left:5px; background:none; border:1px solid var(--primary); border-radius:4px; cursor:pointer; font-size:0.7rem; color:var(--primary); font-weight:bold;">${statusText}</button>`; 
            } 
            const ratingDiv = document.getElementById('ratingOverview'); if(biz.rating) { ratingDiv.innerHTML = `⭐ ${biz.rating} (${biz.reviewCount} reviews) <span onclick="openReviewsModal('${myBizId}')" style="cursor:pointer; text-decoration:underline; color:var(--primary); margin-left:10px; font-size:0.85rem;">See Reviews</span>`; } else { ratingDiv.innerHTML = `⭐ New (No reviews)`; } 
            calculateSmartStatus(biz); 
            try { document.getElementById('editDesc').value = biz.desc || ""; document.getElementById('editPrice').value = biz.price || ""; document.getElementById('editPhone').value = biz.phone || ""; document.getElementById('editEmail').value = biz.email || ""; document.getElementById('editImage').value = biz.image || ""; document.getElementById('editService').value = biz.service || ""; if(biz.city) { const parts = biz.city.split(',').map(s=>s.trim()); if(parts.length>=1) document.getElementById('editCity').value=parts[0]; if(parts.length>=2) document.getElementById('editProv').value=parts[1]; if(parts.length>=3) document.getElementById('editPostal').value=parts[2]; } document.getElementById('editServiceArea').value = biz.serviceArea || ""; document.getElementById('timeOpen').value = biz.openTime || "09:00"; document.getElementById('timeClose').value = biz.closeTime || "17:00"; document.getElementById('checkAuto').checked = biz.autoSchedule || false; if(biz.image) document.getElementById('ownerAvatarPreview').innerHTML = `<img src="${biz.image}" class="avatar-img">`; else document.getElementById('ownerAvatarPreview').innerHTML = "?"; } catch(e) { console.error("Form Fill Error:", e); } 
            
            // CHECK FOR ACTIVE SPONSORSHIP STATUS
            const btnSponsor = document.getElementById('btnRequestSponsor');
            if(biz.sponsored) {
                btnSponsor.innerText = "⚡ Sponsored Active";
                btnSponsor.disabled = true;
                btnSponsor.style.backgroundColor = "#10b981"; // Green
            } else {
                // Check pending
                const q = query(collection(db, "sponsorship_requests"), where("bizId", "==", myBizId), where("status", "==", "pending"));
                const snap = await getDocs(q);
                if(!snap.empty) {
                    btnSponsor.innerText = "Request Pending...";
                    btnSponsor.disabled = true;
                    btnSponsor.style.backgroundColor = "#9ca3af";
                }
            }

            listenToIncomingLeads(); 
        };
        function listenToClientRequests() {
            const q = query(collection(db, "requests"), where("fromUid", "==", currentUser.uid));
            onSnapshot(q, (snapshot) => {
                const activeList = document.getElementById('clientActiveList'); const historyList = document.getElementById('clientHistoryList'); activeList.innerHTML = ""; const activeTabBtn = document.getElementById('tabClientActive'); const navBtn = document.getElementById('navMyRequests');
                if(snapshot.empty) { activeList.innerHTML = "<p style='color:gray;'>No requests.</p>"; historyList.innerHTML = "<p style='color:gray;'>No past history.</p>"; activeTabBtn.innerHTML = "Active Requests"; if(navBtn) navBtn.innerHTML = "My Requests"; return; }
                let completedHTML = ""; let archivedHTML = ""; let count = 0;
                snapshot.forEach(docSnap => {
                    const req = docSnap.data(); const reqId = docSnap.id; const dateStr = req.timestamp ? req.timestamp.toDate().toLocaleDateString() : 'Date N/A';
                    if(req.status === 'pending' || req.status === 'chat_open' || req.status === 'job_started' || req.status === 'work_done') { count++; }
                    
                    // ICON UPDATE: Status Pills & Buttons
                    if (req.status === 'pending') { 
                        activeList.innerHTML += `<div class="result-card"><div><div style="font-weight:bold;">${req.bizName}</div><div class="status-pill status-pending"><i class="ri-loader-2-line"></i> Pending</div><div style="font-size:0.8rem; color:gray;">Sent: ${dateStr}</div></div><button class="cancel-btn btn-cancel-req" data-id="${reqId}" style="margin-left:auto; border:1px solid #ef4444; color:#ef4444; background:white;">Cancel Request</button></div>`; 
                    }
                    else if (req.status === 'chat_open') { 
                        activeList.innerHTML += `<div class="result-card" style="border-left:4px solid #3b82f6;"><div><div style="font-weight:bold;">${req.bizName}</div><div class="status-pill status-chat"><i class="ri-message-3-line"></i> Chatting</div><div style="font-size:0.8rem; color:gray;">Check messages!</div></div><div style="margin-left:auto; display:flex; gap:5px; flex-direction:column; align-items:flex-end;"><button class="btn-open-chat action" data-id="${reqId}" data-name="${encodeURIComponent(req.bizName)}" style="padding:8px 15px; font-size:0.8rem; margin:0;"><i class="ri-chat-1-line"></i> Open Chat</button><button class="btn-cancel-req" data-id="${reqId}" style="border:1px solid #ef4444; color:#ef4444; background:white; padding:5px 10px; border-radius:8px; font-size:0.7rem; cursor:pointer;"><i class="ri-close-circle-line"></i> End Chat</button><button onclick="window.openReport('${req.bizOwnerUid}', '${encodeURIComponent(req.bizName)}')" class="btn-report-small" style="font-size:0.7rem; border:1px solid gray; color:gray;"><i class="ri-flag-line"></i> Report Pro</button></div></div>`; 
                    }  
                    else if (req.status === 'job_started') { 
                        activeList.innerHTML += `<div class="result-card" style="border-left:4px solid green;"><div><div style="font-weight:bold;">${req.bizName}</div><div class="status-pill status-active"><i class="ri-hammer-line"></i> Working</div><div style="font-size:0.8rem; color:gray;">Job is active.</div></div><div style="margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:5px;"><button class="btn-open-chat action" data-id="${reqId}" data-name="${encodeURIComponent(req.bizName)}" style="padding:8px 15px; font-size:0.8rem; margin:0;"><i class="ri-chat-1-line"></i> Chat</button><button onclick="window.openReport('${req.bizOwnerUid}', '${encodeURIComponent(req.bizName)}')" class="btn-report-small" style="font-size:0.7rem; border:1px solid gray; color:gray;"><i class="ri-flag-line"></i> Report Pro</button></div></div>`; 
                    } 
                    else if (req.status === 'work_done') { 
                        activeList.innerHTML += `<div class="result-card" style="border-left:4px solid #f59e0b;"><div><div style="font-weight:bold;">${req.bizName}</div><div class="status-pill status-done"><i class="ri-checkbox-circle-line"></i> Done</div><div style="font-size:0.8rem; color:gray;">Please rate.</div></div><div style="margin-left:auto;"><button class="btn-rate-pro" data-biz-id="${req.bizId}" data-req-id="${reqId}" style="background:#f59e0b; color:white; border:none; padding:8px 15px; border-radius:8px; font-weight:bold; cursor:pointer;"><i class="ri-star-line"></i> Rate</button></div></div>`; 
                    }
                    else { 
                        let statusColor = "gray"; let statusText = req.status; 
                        if(req.status === 'completed') { statusColor = "green"; statusText = `<i class="ri-flag-line"></i> Completed (${req.rating}<i class="ri-star-fill"></i>)`; } 
                        else if(req.status === 'rejected') { statusColor = "red"; statusText = `<i class="ri-close-circle-line"></i> Declined`; } 
                        else if(req.status === 'cancelled') { statusColor = "red"; statusText = `<i class="ri-prohibited-line"></i> Cancelled`; } 
                        const itemHTML = `<div class="result-card" style="opacity:0.8; padding:15px;"><div><b>${req.bizName}</b></div><div style="font-size:0.8rem; color:${statusColor}; font-weight:bold;">${statusText}</div><div style="font-size:0.8rem; color:gray;">${dateStr}</div></div>`; 
                        if(req.status === 'completed') completedHTML += itemHTML; else archivedHTML += itemHTML; 
                    }
                });
                historyList.innerHTML = `<h4 style="margin:10px 0; color:#166534; border-bottom:1px solid #e5e7eb; padding-bottom:5px;">🏁 Completed Jobs</h4>${completedHTML || "<p style='color:gray; font-size:0.8rem; margin-bottom:20px;'>No completed jobs yet.</p>"}<h4 style="margin:20px 0 10px 0; color:#6b7280; border-bottom:1px solid #e5e7eb; padding-bottom:5px;">📂 Archived</h4>${archivedHTML || "<p style='color:gray; font-size:0.8rem;'>No archived jobs.</p>"}`;
                try { const badgeHTML = count > 0 ? `<span class="badge-count">${count}</span>` : ``; activeTabBtn.innerHTML = `Active Requests ${badgeHTML}`; if(navBtn) navBtn.innerHTML = `My Requests ${badgeHTML}`; } catch(e) {}
            });
        }
function listenToIncomingLeads() { 
            const q = query(collection(db, "requests"), where("bizId", "==", myBizId)); 
            onSnapshot(q, async (snapshot) => { 
                const activeArea = document.getElementById('activeRequestsArea'); const historyArea = document.getElementById('historyRequestsArea'); activeArea.innerHTML = ""; const activeTabBtn = document.getElementById('tabActive'); const navBtn = document.getElementById('navDashboard'); 
                if (snapshot.empty) { activeArea.innerHTML = "<p style='color:gray;'>No active jobs.</p>"; historyArea.innerHTML = "<p style='color:gray;'>No history.</p>"; activeTabBtn.innerHTML = "Workspace"; if(navBtn) navBtn.innerHTML = "For Business"; return; } 
                let completedHTML = ""; let archivedHTML = ""; let count = 0; 
                
                for (const docSnap of snapshot.docs) { 
                    const req = docSnap.data(); const reqId = docSnap.id; const safeClientName = encodeURIComponent(req.clientName); const dateStr = req.timestamp ? req.timestamp.toDate().toLocaleDateString() : 'Date N/A'; 
                    const clientLocText = req.clientLocation ? `<div style="font-size:0.75rem; color:#6b7280; background:#f3f4f6; padding:2px 6px; border-radius:4px; display:inline-block; margin-top:2px;"><i class="ri-map-pin-line"></i> ${req.clientLocation}</div>` : ``; 
                    if(req.status === 'pending' || req.status === 'chat_open' || req.status === 'job_started') { count++; } 
                    
                    if(req.status === 'pending') { 
                        const repHTML = await getClientReputationHTML(req.fromUid, req.clientVerified, req.clientName); 
                        const historySnap = await getDocs(query(collection(db, "requests"), where("bizId", "==", myBizId), where("fromUid", "==", req.fromUid), where("status", "==", "completed"))); 
                        const badge = historySnap.empty ? `<span class="status-pill status-pending">New Lead</span>` : `<span class="status-pill status-returning"><i class="ri-star-smile-line"></i> Returning</span>`; 
                        activeArea.innerHTML += `<div class="result-card"><div><div style="font-weight:bold;">${req.clientName} ${repHTML}</div>${clientLocText}${badge}</div><div style="margin-left:auto; display:flex; flex-direction:column; gap:5px;"><button onclick="window.respondToLead('${reqId}', 'chat_open')" style="background:#10b981; color:white; border:none; padding:8px 15px; border-radius:8px; font-weight:bold; cursor:pointer;"><i class="ri-check-line"></i> Accept</button></div></div>`; 
                    } 
                    else if (req.status === 'chat_open') { 
                        activeArea.innerHTML += `
                        <div class="result-card" style="border-left:4px solid #3b82f6; flex-direction:column; align-items:flex-start;">
                            <div style="width:100%;">
                                <div style="display:flex; justify-content:space-between;"><b>${req.clientName}</b> <div class="status-pill status-chat"><i class="ri-message-3-line"></i> Chatting</div></div>
                                ${clientLocText}
                            </div>
                            <div style="margin-top:10px; display:flex; gap:8px; width:100%; flex-wrap:wrap;">
                                <button class="btn-open-chat action" data-id="${reqId}" data-name="${safeClientName}" style="flex:1; padding:10px; font-size:0.85rem; margin:0; min-width:80px;"><i class="ri-chat-1-line"></i> Chat</button>
                                <button onclick="window.respondToLead('${reqId}', 'job_started')" class="action" style="flex:1; background:#10b981; padding:10px; font-size:0.85rem; margin:0; min-width:80px;"><i class="ri-hammer-line"></i> Start Job</button>
                                <button onclick="if(confirm('End negotiation?')) window.respondToLead('${reqId}', 'rejected')" class="action" style="width:100%; background:white; border:1px solid #ef4444; color:#ef4444; padding:8px; font-size:0.8rem; margin-top:5px;"><i class="ri-close-circle-line"></i> End Chat</button>
                                <button onclick="window.openReport('${req.fromUid}', '${encodeURIComponent(req.clientName)}')" class="action" style="width:100%; background:#f3f4f6; border:1px solid #d1d5db; color:#374151; padding:8px; font-size:0.8rem; margin-top:0;"><i class="ri-flag-line"></i> Report Client</button>
                            </div>
                        </div>`; 
                    } 
                    else if (req.status === 'job_started') { 
                        activeArea.innerHTML += `
                        <div class="result-card" style="border-left:4px solid green; flex-direction:column; align-items:flex-start;">
                            <div style="width:100%;">
                                <div style="display:flex; justify-content:space-between;"><b>${req.clientName}</b> <div class="status-pill status-active"><i class="ri-hammer-line"></i> In Progress</div></div>
                                ${clientLocText}
                            </div>
                            <div style="margin-top:10px; display:flex; gap:8px; width:100%; flex-wrap:wrap;">
                                <button class="btn-open-chat action" data-id="${reqId}" data-name="${safeClientName}" style="flex:1; padding:10px; font-size:0.85rem; margin:0; min-width:80px;"><i class="ri-chat-1-line"></i> Chat</button>
                                <button onclick="window.respondToLead('${reqId}', 'work_done')" class="action" style="flex:1; background:#10b981; padding:10px; font-size:0.85rem; margin:0; min-width:80px;"><i class="ri-checkbox-circle-line"></i> Finish</button>
                                <button onclick="window.openReport('${req.fromUid}', '${encodeURIComponent(req.clientName)}')" class="action" style="width:100%; background:#f3f4f6; border:1px solid #d1d5db; color:#374151; padding:8px; font-size:0.8rem; margin-top:5px;"><i class="ri-flag-line"></i> Report Client</button>
                            </div>
                        </div>`; 
                    } 
                    else if (req.status === 'work_done') { 
                        activeArea.innerHTML += `<div class="result-card" style="border-left:4px solid #f59e0b;"><div><b>${req.clientName}</b></div>${clientLocText}<div class="status-pill status-done"><i class="ri-checkbox-circle-line"></i> Done</div><div style="font-size:0.8rem; color:#b45309; margin-top:5px;">Waiting for client rating.</div></div>`; 
                    } 
                    else if (req.status === 'rejected') { 
                        activeArea.innerHTML += `<div class="result-card" style="border-left:4px solid #ef4444; opacity:0.8;"><div><b>${req.clientName}</b></div><div style="font-size:0.8rem; color:#ef4444;"><i class="ri-close-circle-line"></i> Declined</div><div style="margin-top:5px;"><button onclick="window.respondToLead('${reqId}', 'pending')" style="background:#6b7280; color:white; border:none; padding:5px 10px; border-radius:5px; cursor:pointer; font-size:0.8rem;"><i class="ri-arrow-go-back-line"></i> Undo</button></div></div>`; 
                    } 
                    else { 
                        const itemHTML = `<div class="result-card" style="opacity:0.8; padding:15px;"><div><b>${req.clientName}</b></div><div style="font-size:0.8rem; color:gray;">${req.status}</div><div style="font-size:0.8rem; color:gray;">${dateStr}</div></div>`; 
                        if(req.status === 'completed') completedHTML += itemHTML; else archivedHTML += itemHTML; 
                    } 
                } 
                historyArea.innerHTML = `<h4 style="margin:10px 0; color:#166534; border-bottom:1px solid #e5e7eb; padding-bottom:5px;">🏁 Completed Jobs</h4>${completedHTML || "<p style='color:gray; font-size:0.8rem; margin-bottom:20px;'>No completed jobs yet.</p>"}<h4 style="margin:20px 0 10px 0; color:#6b7280; border-bottom:1px solid #e5e7eb; padding-bottom:5px;">📂 Archived</h4>${archivedHTML || "<p style='color:gray; font-size:0.8rem;'>No archived jobs.</p>"}`; 
                try { const badgeHTML = count > 0 ? `<span class="badge-count">${count}</span>` : ``; activeTabBtn.innerHTML = `Workspace ${badgeHTML}`; if(navBtn) navBtn.innerHTML = `For Business ${badgeHTML}`; } catch(e) {} 
            }); 
        }        
        
        function calculateSmartStatus(biz) { 
            const badge = document.getElementById('statusBadge'); 
            try { 
                if (biz.status === 'online') { 
                    badge.innerHTML = "<i class='ri-checkbox-circle-line'></i> STATUS: ONLINE (Manual Override)"; 
                    badge.style.backgroundColor = "#dcfce7"; badge.style.color = "#166534"; return; 
                } 
                const openTime = String(biz.openTime || "09:00"); const closeTime = String(biz.closeTime || "17:00"); 
                if (biz.autoSchedule) { 
                    const now = new Date(); const currentMins = now.getHours() * 60 + now.getMinutes(); 
                    const [oH, oM] = openTime.split(':').map(Number); const [cH, cM] = closeTime.split(':').map(Number); 
                    const openV = oH*60+oM; const closeV = cH*60+cM; 
                    if (currentMins >= openV && currentMins < closeV) { 
                        badge.innerHTML = "<i class='ri-time-line'></i> STATUS: ONLINE (Auto-Schedule)"; 
                        badge.style.backgroundColor = "#ede9fe"; badge.style.color = "#6d28d9"; return; 
                    } 
                } 
                badge.innerHTML = "<i class='ri-shut-down-line'></i> STATUS: OFFLINE"; 
                badge.style.backgroundColor = "#fee2e2"; badge.style.color = "#991b1b"; 
            } catch(e) { 
                badge.innerHTML = "<i class='ri-shut-down-line'></i> STATUS: OFFLINE"; 
            } 
        }
        document.getElementById('btnToggleOnline').addEventListener('click', async () => { if(!myBizId) return; const badge = document.getElementById('statusBadge'); const newStatus = badge.innerText.includes("Manual") ? 'offline' : 'online'; await updateDoc(doc(db, "businesses", myBizId), { status: newStatus }); await loadMyBusiness(); });
        
        window.respondToLead = async (reqId, response) => { 
            const updates = { status: response }; 
            if (response === 'chat_open') { const reqRef = doc(db, "requests", reqId); const reqSnap = await getDoc(reqRef); if (reqSnap.exists()) { const data = reqSnap.data(); if(data.clientEmail) { emailjs.send("service_7wf29fh", "template_wrdyibr", { client_email: data.clientEmail, client_name: data.clientName, biz_name: data.bizName, service_category: data.serviceCategory }); } } }
            if (response === 'rejected') { let unlock = new Date(); unlock.setDate(unlock.getDate() + 3); updates.unlockDate = unlock.toISOString(); } 
            if (response === 'pending') { updates.unlockDate = deleteField(); } 
            if (response === 'work_done') { const reqDoc = await getDoc(doc(db, "requests", reqId)); if (reqDoc.exists()) { const data = reqDoc.data(); if (data.timestamp) { const now = new Date().getTime(); const start = data.timestamp.toDate ? data.timestamp.toDate().getTime() : new Date(data.timestamp).getTime(); const diffMins = (now - start) / 1000 / 60; if (diffMins < 1) { alert("⏳ Too Fast (Testing Mode)\n\nPlease wait at least 1 minute before marking this job as finished."); return; } } } } 
            await updateDoc(doc(db, "requests", reqId), updates); 
        };
        window.requestVerification = async () => { if(!myBizId) return; alert("🛡️ Community Safety Check\n\nTo keep WrkPulse safe from bots and spammers, we verify that every business is run by a real local person.\n\nYou don't need a business license! Just show us you exist."); const proof = prompt("Please paste a link to ANY of these:\n\n• Your Instagram/Facebook profile\n• A Kijiji/Craigslist ad you posted\n• Your Website or Google Maps\n\n(This is just for us to verify you are human.)"); if(proof) { await updateDoc(doc(db, "businesses", myBizId), { verificationEvidence: proof }); alert("✅ Thanks! We'll verify your badge shortly."); loadMyBusiness(); } };   
        window.submitBugReport = async () => { const type = document.getElementById('bugType').value; const desc = document.getElementById('bugDesc').value; if(!desc) return alert("Please describe the issue."); const btn = document.querySelector('#bugReportModal .action'); btn.innerText = "Sending..."; try { await addDoc(collection(db, "bugs"), { type, desc, reporter: currentUser ? currentUser.email : "Guest", userAgent: navigator.userAgent, timestamp: new Date(), status: 'open' }); alert("✅ Bug reported! Thanks for helping us improve."); document.getElementById('bugReportModal').classList.add('hidden'); document.getElementById('bugDesc').value = ""; } catch(e) { console.error(e); alert("Error sending report."); } btn.innerText = "Submit Report"; };  
   // FIX: DASHBOARD TAB SWITCHING LOGIC
        document.getElementById('tabActive').addEventListener('click', () => switchDashTab('Active'));
        document.getElementById('tabHistory').addEventListener('click', () => switchDashTab('History'));
        document.getElementById('tabProfile').addEventListener('click', () => switchDashTab('Profile'));

        function switchDashTab(name) {
            ['Active', 'History', 'Profile'].forEach(t => {
                document.getElementById(`tab${t}`).classList.remove('active');
                document.getElementById(`content${t}`).classList.remove('active');
            });
            document.getElementById(`tab${name}`).classList.add('active');
            document.getElementById(`content${name}`).classList.add('active');
        }
        // FIX: RESTORE MISSING CUSTOMER TABS & CHAT
        // 1. Customer Tabs (Active / History)
        document.getElementById('tabClientActive').addEventListener('click', () => switchClientTab('ClientActive'));
        document.getElementById('tabClientHistory').addEventListener('click', () => switchClientTab('ClientHistory'));

        window.switchClientTab = (tab) => {
            document.getElementById('tabClientActive').classList.remove('active');
            document.getElementById('tabClientHistory').classList.remove('active');
            document.getElementById('clientContentActive').classList.remove('active');
            document.getElementById('clientContentHistory').classList.remove('active');
            
            if(tab === 'ClientActive') {
                document.getElementById('tabClientActive').classList.add('active');
                document.getElementById('clientContentActive').classList.add('active');
            } else {
                document.getElementById('tabClientHistory').classList.add('active');
                document.getElementById('clientContentHistory').classList.add('active');
            }
        };

        // 2. Chat System (Fixes "openChat is not defined")
        window.openChat = async (reqId, name) => {
            activeChatRequestId = reqId;
            document.getElementById('chatTitle').innerText = name || "Chat";
            document.getElementById('chatModal').classList.remove('hidden');
            
            // Reset Pinned Area
            document.getElementById('pinnedArea').classList.add('hidden');
            document.getElementById('pinnedText').innerText = "";

            const q = query(collection(db, "requests", reqId, "messages"), orderBy("timestamp", "asc"));
            currentChatUnsubscribe = onSnapshot(q, (snapshot) => {
                const chatBody = document.getElementById('chatBody');
                chatBody.innerHTML = "";
                let latestAppt = null;

                snapshot.forEach(doc => {
                    const msg = doc.data();
                    
                    // CHECK FOR APPOINTMENT
                    if(msg.text.includes("📅 Proposed Time:")) {
                        latestAppt = msg.text;
                    }

                    const isMe = msg.senderUid === currentUser.uid;
                    chatBody.innerHTML += `<div style="display:flex; justify-content:${isMe ? 'flex-end' : 'flex-start'};"><div class="${isMe ? 'msg-me' : 'msg-them'} msg">${msg.text}</div></div>`;
                });

                // UPDATE PINNED AREA IF APPOINTMENT EXISTS
                if(latestAppt) {
                    document.getElementById('pinnedArea').classList.remove('hidden');
                    document.getElementById('pinnedText').innerText = latestAppt.replace("📅 ", "");
                }

                chatBody.scrollTop = chatBody.scrollHeight;
            });
        };

        window.closeChat = () => {
            if(currentChatUnsubscribe) currentChatUnsubscribe();
            document.getElementById('chatModal').classList.add('hidden');
            activeChatRequestId = null;
        };

        document.getElementById('btnSendMsg').onclick = async () => {
            const input = document.getElementById('chatInput');
            const text = input.value.trim();
            if(!text || !activeChatRequestId) return;
            await addDoc(collection(db, "requests", activeChatRequestId, "messages"), {
                text, senderUid: currentUser.uid, timestamp: new Date()
            });
            input.value = "";
        };
        // FIX: APPOINTMENT BUTTON LOGIC
        document.getElementById('btnProposeTime').onclick = async () => {
            const time = prompt("Propose a time (e.g. 'Tuesday at 2pm'):");
            if(!time) return;
            const text = `📅 Proposed Time: ${time}`;
            if(!activeChatRequestId) return;
            await addDoc(collection(db, "requests", activeChatRequestId, "messages"), {
                text, senderUid: currentUser.uid, timestamp: new Date()
            });
            // Optional: Scroll to bottom
            const chatBody = document.getElementById('chatBody');
            chatBody.scrollTop = chatBody.scrollHeight;
        };
        // NEW: Allow User to Delete Their Own Account
        window.deleteMyAccount = async () => {
            if(!currentUser) return;
            const confirm1 = confirm("⚠️ Are you sure? This will permanently delete your account and business.");
            if(!confirm1) return;
            
            // Safety Check: Verify intent
            const confirm2 = prompt("To confirm, please type 'DELETE' below:");
            if(confirm2 !== "DELETE") return alert("Deletion cancelled.");

            const btn = document.querySelector('button[onclick="window.deleteMyAccount()"]');
            btn.innerText = "Deleting...";
            btn.disabled = true;

            try {
                const uid = currentUser.uid;
                
                // 1. Delete Business (if exists)
                const q = query(collection(db, "businesses"), where("owner_uid", "==", uid));
                const snap = await getDocs(q);
                snap.forEach(async (docSnap) => {
                    await deleteDoc(doc(db, "businesses", docSnap.id));
                });

                // 2. Delete User Data
                await deleteDoc(doc(db, "users", uid));

                // 3. Delete Auth Login (Must be last)
                await deleteUser(currentUser);
                
                alert("Account Deleted. Goodbye! 👋");
                location.reload();
            } catch(e) {
                console.error("Delete Error:", e);
                // If the user hasn't logged in recently, Firebase requires re-login
                if(e.code === 'auth/requires-recent-login') {
                    alert("Security: Please Log Out and Log In again, then try deleting.");
                    window.logout();
                } else {
                    alert("Error deleting account: " + e.message);
                }
                btn.innerText = "Delete My Account";
                btn.disabled = false;
            }
        };
        // --- SETTINGS & PHONE LINKING LOGIC ---
        
        // 1. Load Settings when Modal Opens
        const settingsModalObserver = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                if(mutation.target.classList.contains('hidden') === false) loadSettingsUI();
            });
        });
        const settingsModalEl = document.getElementById('settingsModal');
        if(settingsModalEl) settingsModalObserver.observe(settingsModalEl, { attributes: true, attributeFilter: ['class'] });

        function loadSettingsUI() {
            if(!currentUser) return;
            document.getElementById('settingsName').value = currentUser.displayName || "";
            
            // Check if Phone is already linked
            if(currentUser.phoneNumber) {
                document.getElementById('phoneLinkArea').innerHTML = `<div style="background:#dcfce7; color:#166534; padding:10px; border-radius:8px; font-weight:bold; text-align:center;">✅ Linked: ${currentUser.phoneNumber}</div>`;
                document.getElementById('notifSMS').disabled = false;
            } else {
                // Reset UI for linking
                document.getElementById('notifSMS').disabled = true;
                document.getElementById('notifSMS').checked = false;
            }

            // Load Notification Prefs (from DB)
            getDoc(doc(db, "users", currentUser.uid)).then(snap => {
                if(snap.exists()) {
                    const data = snap.data();
                    if(data.notifEmail !== undefined) document.getElementById('notifEmail').checked = data.notifEmail;
                    if(data.notifSMS !== undefined) document.getElementById('notifSMS').checked = data.notifSMS;
                }
            });
        }

        // 2. Save Name
        window.saveSettingsName = async () => {
            const name = document.getElementById('settingsName').value.trim();
            if(!name) return alert("Name cannot be empty.");
            try {
                await updateProfile(currentUser, { displayName: name });
                await updateDoc(doc(db, "users", currentUser.uid), { name: name }, { merge: true });
                alert("✅ Name Updated!");
            } catch(e) { alert("Error: " + e.message); }
        };

        // 3. Link Phone (The Upgrade Logic)
        window.linkRecaptcha = null;
        window.linkConfirmResult = null;

        window.startPhoneLinking = async () => {
            let phone = document.getElementById('linkPhoneInput').value.trim();
            
            // AUTO-FIX: Remove spaces/dashes and add +1 if missing
            phone = phone.replace(/[\s-]/g, '');
            if (!phone.startsWith('+')) {
                phone = "+1" + phone;
            }

            if(phone.length < 11) return alert("Enter valid phone number (+1...)");

            if(!window.linkRecaptcha) {
                window.linkRecaptcha = new RecaptchaVerifier(auth, 'recaptcha-linker', { 'size': 'normal' });
                await window.linkRecaptcha.render();
            }

            const btn = document.getElementById('btnLinkPhone');
            btn.innerText = "...";
            
            try {
                window.linkConfirmResult = await linkWithPhoneNumber(currentUser, phone, window.linkRecaptcha);
                document.getElementById('phoneLinkArea').classList.add('hidden');
                document.getElementById('phoneVerifyArea').classList.remove('hidden');
                alert("💬 Code sent! Check your SMS.");
            } catch(e) {
                console.error(e);
                alert("Error: " + e.message);
                btn.innerText = "Verify";
                window.linkRecaptcha.clear();
                window.linkRecaptcha = null;
            }
        };

        window.confirmPhoneLink = async () => {
            const code = document.getElementById('linkCodeInput').value.trim();
            if(!code) return alert("Enter code.");
            
            try {
                // Try to link the phone credential to the current user
                await window.linkConfirmResult.confirm(code);
                
                alert("🎉 Phone Linked Successfully! You are now Verified.");
                
                // Update DB to reflect Verified Status
                await updateDoc(doc(db, "users", currentUser.uid), { phone: currentUser.phoneNumber, phoneVerified: true }, { merge: true });
                
                // Refresh UI
                document.getElementById('phoneVerifyArea').classList.add('hidden');
                document.getElementById('phoneLinkArea').classList.remove('hidden'); 
                loadSettingsUI();

            } catch(e) {
                console.error("Link Error:", e);
                
                // FIX: Catch BOTH types of "Already Exists" errors
                if (e.code === 'auth/credential-already-in-use' || e.code === 'auth/account-exists-with-different-credential') {
                    alert("⚠️ CONFLICT DETECTED\n\nThis phone number is already associated with another account.\n\nTo link it here, you must:\n1. Log out.\n2. Log in with this Phone Number.\n3. Delete that account (in Settings).\n4. Log back in here and try linking again.");
                } else if (e.code === 'auth/invalid-verification-code') {
                    alert("❌ Incorrect Code. Please check your SMS and try again.");
                } else {
                    alert("Error: " + e.message);
                }
            }
        };

        // 4. Save Preferences
        window.saveNotifPrefs = async () => {
            const emailPref = document.getElementById('notifEmail').checked;
            const smsPref = document.getElementById('notifSMS').checked;
            
            if(smsPref && !currentUser.phoneNumber) return alert("You must verify a phone number to enable SMS.");

            await updateDoc(doc(db, "users", currentUser.uid), { 
                notifEmail: emailPref,
                notifSMS: smsPref
            }, { merge: true }); // Merge ensures we don't overwrite name/other data
            
            alert("✅ Preferences Saved");
        };
        // NEW: Free Geolocation Logic (With Coordinates)
        window.locateUser = (mode) => {
            if (!navigator.geolocation) {
                return alert("Geolocation is not supported by this browser.");
            }

            const cityId = mode === 'search' ? 'searchCity' : 'editCity';
            const provId = mode === 'search' ? 'searchProv' : 'editProv';
            const latId = mode === 'search' ? 'searchLat' : 'editLat';
            const lonId = mode === 'search' ? 'searchLon' : 'editLon';

            // Show loading state
            document.getElementById(cityId).value = "Locating...";
            
            navigator.geolocation.getCurrentPosition(async (position) => {
                const lat = position.coords.latitude;
                const lon = position.coords.longitude;
                
                // SAVE COORDINATES
                document.getElementById(latId).value = lat;
                document.getElementById(lonId).value = lon;
                
                try {
                    const response = await fetch(`https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${lat}&longitude=${lon}&localityLanguage=en`);
                    const data = await response.json();
                    
                    document.getElementById(cityId).value = data.city || data.locality || "";
                    const prov = data.principalSubdivisionCode ? data.principalSubdivisionCode.split('-').pop() : "BC"; 
                    document.getElementById(provId).value = prov;
                    document.getElementById(cityId).focus();

                } catch (e) {
                    console.error("Geo Error:", e);
                    document.getElementById(cityId).value = ""; 
                    alert("Could not fetch address. Please type it manually.");
                }

            }, (error) => {
                console.error("GPS Error:", error);
                document.getElementById(cityId).value = "";
                if(error.code === 1) alert("Please allow location access to use this feature.");
                else alert("Unable to retrieve location.");
            });
        };

        // MATH: Calculate distance between two points (Haversine Formula)
        function getDistanceKm(lat1, lon1, lat2, lon2) {
            if(!lat1 || !lon1 || !lat2 || !lon2) return null;
            const R = 6371; // Earth Radius in km
            const dLat = (lat2 - lat1) * Math.PI / 180;
            const dLon = (lon2 - lon1) * Math.PI / 180;
            const a = Math.sin(dLat/2) * Math.sin(dLat/2) +
                      Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLon/2) * Math.sin(dLon/2);
            const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
            return (R * c).toFixed(1); // Return string "5.2"
        }
   </script>
</body>
</html>