<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <meta name="theme-color" content="#F5A623">
  <title>EggspressIloilo</title>
  <link rel="manifest" href="manifest.json">
  <link rel="icon" href="/app/icons/icon-192.png">
  <link rel="stylesheet" href="styles/base.css">
  <link rel="stylesheet" href="styles/components.css">
  <script src="https://accounts.google.com/gsi/client" async defer></script>
</head>
<body>

<!-- ============================================================
     AUTH SCREEN — shown before Google sign-in
     ============================================================ -->
<div id="screen-auth" class="screen">
  <div class="auth-container">
    <div class="auth-logo">
      <div class="auth-logo-icon">🥚</div>
      <div class="auth-logo-name">EggspressIloilo</div>
      <div class="auth-logo-sub">Field Operations</div>
    </div>
    <div id="signin-button-container"></div>
    <div id="auth-error" class="auth-error" style="display:none"></div>
  </div>
</div>

<!-- ============================================================
     MAIN APP — shown after auth
     ============================================================ -->
<div id="screen-app" class="screen" style="display:none">

  <!-- Top bar -->
  <div class="topbar" id="topbar">
    <div class="topbar-left">
      <div class="topbar-title" id="topbar-title">EggspressIloilo</div>
      <div class="topbar-sub" id="topbar-shift-label"></div>
    </div>
    <div class="topbar-right">
      <div class="gps-status" id="gps-status"></div>
      <div class="sync-status" id="sync-status"></div>
      <div class="user-badge" id="user-badge"></div>
    </div>
  </div>

  <!-- Pending approval badge (admin only) -->
  <div id="approval-banner" class="approval-banner" style="display:none">
    <span id="approval-count"></span> pending approvals
    <button onclick="showPage('approvals')">Review</button>
  </div>

  <!-- Page: Start shift (shown when no active shift) -->
  <div class="page" id="page-start-shift">
    <div class="page-header">Start shift</div>
    <div class="card">
      <div class="field-label">Which shift?</div>
      <div class="shift-buttons" id="shift-select">
        <button class="btn-shift" data-shift="EARLY_MARKET">
          <div class="shift-time">2:00 AM – 5:00 AM</div>
          <div class="shift-name">Early market</div>
        </button>
        <button class="btn-shift" data-shift="DAY_STROLLING">
          <div class="shift-time">6:00 AM – afternoon</div>
          <div class="shift-name">Day strolling</div>
        </button>
        <button class="btn-shift" data-shift="EVENING">
          <div class="shift-time">5:00 PM – 10:00 PM</div>
          <div class="shift-name">Evening</div>
        </button>
      </div>
    </div>

    <div id="loadout-section" style="display:none">
      <div class="section-label">Trays loaded onto tricycle</div>
      <div class="card" id="loadout-inputs">
        <!-- Rendered by JS from active batches -->
      </div>
      <button class="btn-primary" id="btn-start-shift">Start shift</button>
    </div>
  </div>

  <!-- Page: Active shift - Sale -->
  <div class="page" id="page-sale" style="display:none">
    <div class="page-header">Record sale</div>

    <div class="card">
      <div class="field-label">Egg size</div>
      <select id="sale-size" onchange="onSaleSizeChange()">
        <option value="">Select size...</option>
      </select>

      <div class="field-label" style="margin-top:12px">Qty <span class="field-hint">(trays — use 0.5 for half tray)</span></div>
      <input type="number" id="sale-qty" min="0.5" step="0.5" value="1" oninput="updateSaleSummary()">

      <div class="field-label" style="margin-top:12px">Price per tray (₱)</div>
      <input type="number" id="sale-price" step="1" placeholder="0" oninput="updateSaleSummary()">
      <div class="price-hint" id="sale-price-hint"></div>

      <div class="field-label" style="margin-top:12px">Payment</div>
      <div class="toggle-buttons" id="sale-payment">
        <button class="btn-toggle active" data-value="CASH">Cash</button>
        <button class="btn-toggle" data-value="GCASH">GCash</button>
      </div>

      <div class="field-label" style="margin-top:12px">Channel</div>
      <div class="toggle-buttons" id="sale-channel">
        <button class="btn-toggle active" data-value="MARKET">Market</button>
        <button class="btn-toggle" data-value="STROLLING">Strolling</button>
      </div>

      <div id="market-select-wrapper" style="margin-top:12px">
        <div class="field-label">Market</div>
        <select id="sale-market">
          <option value="">Select market...</option>
        </select>
      </div>

      <div class="field-label" style="margin-top:12px">Customer</div>
      <div class="customer-row">
        <select id="sale-customer">
          <option value="">Select or add new...</option>
        </select>
        <button class="btn-new-contact" onclick="showNewContactModal('CUSTOMER')">+ New</button>
      </div>

      <div class="sale-total" id="sale-total" style="display:none">
        Total: ₱<span id="sale-total-amount">0</span>
      </div>
    </div>

    <div class="section-label">Photos <span class="required-badge">All 3 required</span></div>
    <div class="card">
      <div id="photo-capture-container"></div>
    </div>

    <button class="btn-primary" id="btn-submit-sale" disabled onclick="submitSale()">
      Confirm sale
    </button>
  </div>

  <!-- Page: Procurement (Buy) -->
  <div class="page" id="page-procurement" style="display:none">
    <div class="page-header">Request procurement</div>
    <div class="card">
      <div class="field-label">Supplier</div>
      <select id="proc-supplier">
        <option value="">Select supplier...</option>
      </select>

      <div class="field-label" style="margin-top:12px">Supplier contact / phone</div>
      <input type="text" id="proc-supplier-phone" placeholder="+63...">

      <div class="section-label" style="margin-top:16px">Sizes &amp; quantities</div>
      <div id="proc-lines">
        <!-- Rendered by renderProcurementLines() -->
      </div>
      <button class="btn-secondary" onclick="addProcLine()">+ Add size</button>

      <div class="field-label" style="margin-top:16px">Notes</div>
      <textarea id="proc-notes" placeholder="Any notes for the manager..." rows="2"></textarea>
    </div>

    <div class="section-label">Photos <span class="required-badge">All 3 required</span></div>
    <div class="card">
      <div id="proc-photo-container"></div>
    </div>

    <div class="proc-total card" id="proc-total-card" style="display:none">
      <div class="proc-total-row" id="proc-total-lines"></div>
      <div class="proc-total-sum">Estimated total: ₱<span id="proc-grand-total">0</span></div>
    </div>

    <button class="btn-primary" id="btn-submit-proc" disabled onclick="submitProcurement()">
      Submit for approval
    </button>
    <div class="submit-note">Your manager will be notified immediately.</div>
  </div>

  <!-- Page: Expense -->
  <div class="page" id="page-expense" style="display:none">
    <div class="page-header">Log expense</div>
    <div class="card">
      <div class="field-label">Category</div>
      <select id="exp-category">
        <option value="">Select category...</option>
      </select>

      <div class="field-label" style="margin-top:12px">Description</div>
      <input type="text" id="exp-description" placeholder="e.g. Petrol fill-up, SM City pump">

      <div class="field-label" style="margin-top:12px">Amount (₱)</div>
      <input type="number" id="exp-amount" step="1" placeholder="0">

      <div class="field-label" style="margin-top:12px">Payment</div>
      <div class="toggle-buttons" id="exp-payment">
        <button class="btn-toggle active" data-value="CASH">Cash</button>
        <button class="btn-toggle" data-value="GCASH">GCash</button>
      </div>
    </div>

    <div class="section-label">Receipt photo <span class="required-badge">Required</span></div>
    <div class="card">
      <div id="expense-photo-container"></div>
    </div>

    <button class="btn-primary" id="btn-submit-expense" disabled onclick="submitExpense()">
      Submit for approval
    </button>
    <div class="submit-note">Manager approval required before payment.</div>
  </div>

  <!-- Page: End shift -->
  <div class="page" id="page-end-shift" style="display:none">
    <div class="page-header">End shift</div>
    <div class="card">
      <div class="section-label">Trays returned (unsold)</div>
      <div id="return-inputs"></div>

      <div class="field-label" style="margin-top:16px">Cash collected (₱)</div>
      <input type="number" id="return-cash" step="1" placeholder="0" oninput="updateReconciliation()">

      <div class="field-label" style="margin-top:12px">GCash received (₱)</div>
      <input type="number" id="return-gcash" step="1" placeholder="0" oninput="updateReconciliation()">

      <div class="reconciliation-preview" id="recon-preview" style="display:none">
        <div class="recon-row"><span>Expected cash</span><span id="recon-expected-cash">₱0</span></div>
        <div class="recon-row"><span>Expected GCash</span><span id="recon-expected-gcash">₱0</span></div>
        <div class="recon-row recon-variance" id="recon-variance-row">
          <span>Variance</span><span id="recon-variance">₱0</span>
        </div>
      </div>
    </div>
    <button class="btn-primary" id="btn-end-shift" onclick="endShift()">Close shift</button>
  </div>

  <!-- Page: Today's sales log -->
  <div class="page" id="page-log" style="display:none">
    <div class="page-header">Today's sales</div>
    <div class="metrics-grid" id="log-metrics"></div>
    <div class="section-label">Transactions</div>
    <div class="card" id="log-list">
      <div class="empty-state">No transactions yet today</div>
    </div>
  </div>

  <!-- Page: Contacts -->
  <div class="page" id="page-contacts" style="display:none">
    <div class="page-header">Contacts</div>
    <div class="search-bar">
      <input type="text" id="contact-search" placeholder="Search name or phone..." oninput="filterContacts()">
    </div>
    <div id="contact-list"></div>
  </div>

  <!-- Page: Manager - Approvals (admin only) -->
  <div class="page" id="page-approvals" style="display:none">
    <div class="page-header">Approvals</div>
    <div class="section-label">Procurement batches</div>
    <div id="approvals-batches"></div>
    <div class="section-label" style="margin-top:16px">Expenses</div>
    <div id="approvals-expenses"></div>
  </div>

  <!-- Page: Manager - Dashboard (admin only) -->
  <div class="page" id="page-dashboard" style="display:none">
    <div class="page-header">Dashboard</div>
    <div class="metrics-grid" id="dashboard-metrics"></div>
    <div class="section-label">Active batches</div>
    <div id="dashboard-batches"></div>
    <div class="section-label" style="margin-top:16px">Recent transactions</div>
    <div id="dashboard-txns"></div>
  </div>

  <!-- Bottom navigation -->
  <nav class="bottomnav" id="bottomnav">
    <!-- Rendered by JS based on role and shift state -->
  </nav>

</div><!-- /screen-app -->

<!-- New contact modal -->
<div id="modal-contact" class="modal" style="display:none">
  <div class="modal-backdrop" onclick="closeContactModal()"></div>
  <div class="modal-content">
    <div class="modal-header">
      <div class="modal-title">New contact</div>
      <button class="modal-close" onclick="closeContactModal()">✕</button>
    </div>
    <div class="field-label">Name</div>
    <input type="text" id="new-contact-name" placeholder="Full name">
    <div class="field-label" style="margin-top:10px">Phone (GCash number)</div>
    <input type="tel" id="new-contact-phone" placeholder="+63 9XX XXX XXXX">
    <div class="field-label" style="margin-top:10px">Notes</div>
    <input type="text" id="new-contact-notes" placeholder="e.g. stall #14, buys 10 trays weekly">
    <button class="btn-primary" onclick="saveNewContact()" style="margin-top:16px">Save contact</button>
  </div>
</div>

<!-- Toast notification -->
<div id="toast" class="toast"></div>

<!-- Scripts — load order matters -->
<script src="./core/auth.js"></script>
<script src="./core/sync.js"></script>
<script src="/app/core/gps.js"></script>
<script src="/app/core/camera.js"></script>
<script src="/app/modules/shift/shift.js"></script>
<script src="/app/modules/sale/sale.js"></script>
<script src="/app/modules/manager/manager.js"></script>
<script src="/app/app.js"></script>

</body>
</html>
