<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Second City Blinds - Live Logistics Board</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
  <style>
    .custom-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
    .custom-scrollbar::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; }
    .custom-scrollbar::-webkit-scrollbar-track { background: #0f172a; }
    .day-cell { min-height: 185px; max-height: 185px; }
  </style>
</head>
<body class="bg-slate-900 text-slate-100 antialiased min-h-screen flex flex-col font-sans">

  <!-- TOP APP BAR -->
  <header class="bg-slate-950 text-white border-b border-slate-800 sticky top-0 z-30 shadow-xl">
    <div class="max-w-[1700px] mx-auto px-4 sm:px-6 py-2.5 flex flex-wrap items-center justify-between gap-3">
      
      <!-- Brand & Title -->
      <div class="flex items-center space-x-3">
        <div class="bg-amber-500 text-slate-950 font-black px-2.5 py-1 rounded text-base tracking-wider shadow">SCB</div>
        <div>
          <h1 class="font-extrabold text-base leading-tight tracking-tight text-white flex items-center gap-2">
            SECOND CITY BLINDS <span class="text-xs bg-amber-500/20 text-amber-400 px-2 py-0.5 rounded border border-amber-500/30">Live Master Board</span>
          </h1>
          <p class="text-[11px] text-slate-400">Google Sheet Database: 1h_KMbK1YCHjGq60Y0Gn4Q_1L1EgGBBHOkzUlOW8LLpw</p>
        </div>
      </div>

      <!-- FITTER FILTER TOOLBAR -->
      <div class="flex items-center bg-slate-900/90 p-1 rounded-xl border border-slate-800 space-x-1">
        <span class="text-[10px] uppercase font-bold text-slate-400 px-2 flex items-center">
          <i class="fa-solid fa-filter text-amber-400 mr-1.5"></i> Fitter:
        </span>
        <div id="dynamic-filter-bar" class="flex items-center space-x-1"></div>
      </div>

      <!-- Financial & Live Operations Stats -->
      <div class="hidden 2xl:flex items-center space-x-5 bg-slate-900 px-3.5 py-1.5 rounded-lg border border-slate-800 text-xs">
        <div>
          <div class="text-[9px] uppercase font-bold text-slate-400">Filtered Balances</div>
          <div id="stat-total-balance" class="text-sm font-black text-amber-400">£0.00</div>
        </div>
        <div class="h-5 w-px bg-slate-800"></div>
        <div>
          <div class="text-[9px] uppercase font-bold text-slate-400">Scheduled (2-Mos)</div>
          <div id="stat-scheduled-count" class="text-sm font-black text-emerald-400">0</div>
        </div>
        <div class="h-5 w-px bg-slate-800"></div>
        <div>
          <div class="text-[9px] uppercase font-bold text-slate-400">Unscheduled Queue</div>
          <div id="stat-unscheduled-count" class="text-sm font-black text-sky-400">0</div>
        </div>
      </div>

      <!-- Action Buttons & Live Sync Indicator -->
      <div class="flex items-center space-x-1.5">
        <button onclick="fetchLiveDatabase()" id="btn-sync-status" class="bg-slate-900 hover:bg-slate-800 text-emerald-400 border border-emerald-500/40 px-2.5 py-1.5 rounded-lg text-xs font-bold flex items-center transition" title="Click to refresh from Google Sheet">
          <i id="sync-icon" class="fa-solid fa-circle-nodes mr-1.5 text-emerald-400"></i>
          <span id="sync-text">Live in Sync</span>
        </button>

        <button onclick="changeTwoMonths(-1)" class="bg-slate-800 hover:bg-slate-700 text-slate-200 px-2 py-1.5 rounded-lg text-xs font-semibold border border-slate-700" title="Previous 2 Months">
          <i class="fa-solid fa-chevron-left"></i>
        </button>
        <button onclick="resetToCurrentMonth()" class="bg-slate-800 hover:bg-slate-700 text-slate-200 px-2.5 py-1.5 rounded-lg text-xs font-semibold border border-slate-700">
          Current
        </button>
        <button onclick="changeTwoMonths(1)" class="bg-slate-800 hover:bg-slate-700 text-slate-200 px-2.5 py-1.5 rounded-lg text-xs font-semibold border border-slate-700" title="Next 2 Months">
          <i class="fa-solid fa-chevron-right"></i>
        </button>
        <button onclick="openManageFittersModal()" class="bg-slate-800 hover:bg-slate-700 text-slate-200 px-2.5 py-1.5 rounded-lg font-bold text-xs border border-slate-700 transition">
          <i class="fa-solid fa-users-gear mr-1"></i> Fitters
        </button>
        <button onclick="openJobModal()" class="bg-amber-500 hover:bg-amber-400 text-slate-950 px-3 py-1.5 rounded-lg font-bold text-xs flex items-center shadow transition ml-1">
          <i class="fa-solid fa-plus mr-1"></i> Book Job
        </button>
        <button onclick="openTimeOffModal()" class="bg-rose-600/90 hover:bg-rose-600 text-white px-2.5 py-1.5 rounded-lg font-bold text-xs border border-rose-500/30 transition">
          <i class="fa-solid fa-calendar-xmark mr-1"></i> Fitter Off
        </button>
      </div>
    </div>
  </header>

  <!-- MAIN DUAL-MONTH + QUEUE WORKSPACE -->
  <main class="max-w-[1700px] mx-auto px-3 sm:px-6 py-4 flex-1 w-full grid grid-cols-1 xl:grid-cols-12 gap-4">

    <!-- 2-MONTH CALENDAR CONTAINER (10 Cols on Desktop) -->
    <div class="xl:col-span-10 space-y-4">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">

        <!-- MONTH 1 -->
        <div class="bg-slate-950/80 rounded-xl border border-slate-800 p-3 shadow-lg flex flex-col">
          <div class="flex items-center justify-between pb-2 mb-2 border-b border-slate-800">
            <h2 id="month-1-title" class="text-base font-black tracking-wide text-amber-400 uppercase"></h2>
            <span class="text-[11px] text-slate-400 font-bold" id="month-1-job-count">0 Jobs</span>
          </div>
          <div class="grid grid-cols-7 gap-1 text-center font-black text-[10px] uppercase text-slate-400 mb-1.5">
            <div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div><div>Sun</div>
          </div>
          <div id="grid-month-1" class="grid grid-cols-7 gap-1"></div>
        </div>

        <!-- MONTH 2 -->
        <div class="bg-slate-950/80 rounded-xl border border-slate-800 p-3 shadow-lg flex flex-col">
          <div class="flex items-center justify-between pb-2 mb-2 border-b border-slate-800">
            <h2 id="month-2-title" class="text-base font-black tracking-wide text-amber-400 uppercase"></h2>
            <span class="text-[11px] text-slate-400 font-bold" id="month-2-job-count">0 Jobs</span>
          </div>
          <div class="grid grid-cols-7 gap-1 text-center font-black text-[10px] uppercase text-slate-400 mb-1.5">
            <div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div><div>Sun</div>
          </div>
          <div id="grid-month-2" class="grid grid-cols-7 gap-1"></div>
        </div>

      </div>
    </div>

    <!-- RIGHT: UNSCHEDULED QUEUE & FITTERS (2 Cols on Desktop) -->
    <div class="xl:col-span-2 space-y-4">

      <!-- Unscheduled Jobs Drawer -->
      <div class="bg-slate-950/90 rounded-xl border border-slate-800 flex flex-col h-[520px] shadow-lg">
        <div class="p-3 border-b border-slate-800 bg-slate-900 rounded-t-xl flex justify-between items-center">
          <div>
            <h3 class="font-bold text-xs text-white uppercase tracking-wider flex items-center">
              <i class="fa-solid fa-clock-rotate-left text-amber-500 mr-1.5"></i> Unscheduled Queue
            </h3>
            <p class="text-[10px] text-slate-400 mt-0.5">Awaiting fitting date allocation</p>
          </div>
          <span id="unscheduled-badge-count" class="bg-amber-500 text-slate-950 font-black text-xs px-2 py-0.5 rounded-full">0</span>
        </div>

        <div id="unscheduled-job-list" class="p-2 space-y-2 overflow-y-auto custom-scrollbar flex-1"></div>
      </div>

      <!-- Fitter Absences Box -->
      <div class="bg-slate-950/90 rounded-xl border border-slate-800 p-3 shadow-lg">
        <h3 class="font-bold text-white text-xs uppercase tracking-wider flex items-center justify-between mb-2">
          <span><i class="fa-solid fa-user-xmark text-rose-500 mr-1.5"></i> Fitter Time Off</span>
        </h3>
        <div id="time-off-list" class="space-y-1.5 max-h-36 overflow-y-auto custom-scrollbar text-xs"></div>
      </div>

    </div>
  </main>

  <!-- MODAL: MANAGE FITTERS -->
  <div id="fitterModal" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 hidden items-center justify-center p-4">
    <div class="bg-slate-900 text-slate-100 rounded-2xl border border-slate-700 shadow-2xl max-w-md w-full overflow-hidden flex flex-col">
      <div class="bg-slate-950 px-5 py-3 border-b border-slate-800 flex justify-between items-center">
        <h3 class="font-bold text-xs uppercase text-white tracking-wide"><i class="fa-solid fa-users-gear text-amber-400 mr-1.5"></i> Manage Fitters</h3>
        <button onclick="closeManageFittersModal()" class="text-slate-400 hover:text-white"><i class="fa-solid fa-xmark"></i></button>
      </div>

      <div class="p-5 space-y-4 text-xs">
        <form onsubmit="addNewFitter(event)" class="bg-slate-950 p-3 rounded-xl border border-slate-800 space-y-3">
          <span class="text-[10px] font-bold text-amber-400 uppercase tracking-wider block">Add New Fitter</span>
          <div class="grid grid-cols-3 gap-2">
            <div class="col-span-2">
              <input type="text" id="new-fitter-name" required placeholder="Fitter Name (e.g. Sam)" class="w-full bg-slate-900 border border-slate-700 rounded-lg px-2.5 py-1.5 text-white focus:outline-none focus:ring-1 focus:ring-amber-400" />
            </div>
            <div>
              <select id="new-fitter-color" class="w-full bg-slate-900 border border-slate-700 rounded-lg px-2 py-1.5 text-white focus:outline-none">
                <option value="blue">Blue</option>
                <option value="emerald">Emerald</option>
                <option value="purple">Purple</option>
                <option value="cyan">Cyan</option>
                <option value="orange">Orange</option>
                <option value="pink">Pink</option>
              </select>
            </div>
          </div>
          <button type="submit" class="w-full py-1.5 bg-amber-500 hover:bg-amber-400 text-slate-950 font-bold rounded-lg transition shadow">
            <i class="fa-solid fa-user-plus mr-1"></i> Add to Database
          </button>
        </form>

        <div>
          <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-2">Team Fitters in Google Sheet</span>
          <div id="fitters-list-display" class="space-y-1.5 max-h-48 overflow-y-auto custom-scrollbar"></div>
        </div>
      </div>
    </div>
  </div>

  <!-- MODAL: ADD / EDIT JOB -->
  <div id="jobModal" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 hidden items-center justify-center p-4">
    <div class="bg-slate-900 text-slate-100 rounded-2xl border border-slate-700 shadow-2xl max-w-lg w-full overflow-hidden flex flex-col max-h-[92vh]">
      <div class="bg-slate-950 px-6 py-3.5 border-b border-slate-800 flex justify-between items-center">
        <h3 id="job-modal-title" class="font-bold text-sm text-white uppercase tracking-wide">Fitting Details</h3>
        <button onclick="closeJobModal()" class="text-slate-400 hover:text-white text-base"><i class="fa-solid fa-xmark"></i></button>
      </div>

      <form id="jobForm" onsubmit="saveJob(event)" class="p-5 overflow-y-auto custom-scrollbar space-y-3.5 text-xs">
        <input type="hidden" id="job-id" />

        <!-- Postcode Header -->
        <div class="bg-amber-500/10 p-3 rounded-xl border border-amber-500/40">
          <label class="block text-[10px] font-black uppercase tracking-wider text-amber-400 mb-1">
            Postcode (Primary Header) *
          </label>
          <input type="text" id="job-postcode" required placeholder="e.g. B13 9PR" class="w-full uppercase font-black text-lg bg-slate-950 border border-amber-500/50 rounded-lg px-3 py-1.5 text-amber-300 focus:ring-2 focus:ring-amber-400 focus:outline-none placeholder:text-slate-600" />
        </div>

        <div class="grid grid-cols-2 gap-2.5">
          <div>
            <label class="block font-bold text-slate-300 mb-1">Customer Name *</label>
            <input type="text" id="job-customer" required placeholder="e.g. John Davies" class="w-full bg-slate-950 border border-slate-700 rounded-lg px-3 py-1.5 text-white focus:ring-1 focus:ring-amber-400 focus:outline-none" />
          </div>
          <div>
            <label class="block font-bold text-slate-300 mb-1">Phone Number</label>
            <input type="tel" id="job-phone" placeholder="e.g. 07123 456789" class="w-full bg-slate-950 border border-slate-700 rounded-lg px-3 py-1.5 text-white focus:ring-1 focus:ring-amber-400 focus:outline-none" />
          </div>
        </div>

        <div>
          <label class="block font-bold text-slate-300 mb-1">Full Address</label>
          <input type="text" id="job-address" placeholder="e.g. 14 Woodbridge Rd, Moseley, Birmingham" class="w-full bg-slate-950 border border-slate-700 rounded-lg px-3 py-1.5 text-white focus:ring-1 focus:ring-amber-400 focus:outline-none" />
        </div>

        <!-- Financial Section -->
        <div class="bg-slate-950 p-3 rounded-xl border border-slate-800 grid grid-cols-3 gap-2.5">
          <div>
            <label class="block text-[10px] font-bold uppercase text-slate-400 mb-1">Total Quote (£)</label>
            <input type="number" step="0.01" id="job-total" required oninput="calculateBalance()" placeholder="0.00" class="w-full bg-slate-900 border border-slate-700 rounded-lg px-2 py-1 font-bold text-white focus:outline-none" />
          </div>
          <div>
            <label class="block text-[10px] font-bold uppercase text-slate-400 mb-1">Deposit Paid (£)</label>
            <input type="number" step="0.01" id="job-deposit" oninput="calculateBalance()" placeholder="0.00" class="w-full bg-slate-900 border border-slate-700 rounded-lg px-2 py-1 font-bold text-white focus:outline-none" />
          </div>
          <div>
            <label class="block text-[10px] font-bold uppercase text-amber-400 mb-1">Balance Due (£)</label>
            <input type="text" id="job-balance" readonly class="w-full bg-amber-500/20 border border-amber-500/50 text-amber-300 font-black rounded-lg px-2 py-1 focus:outline-none" value="0.00" />
          </div>
        </div>

        <!-- Logistics -->
        <div class="grid grid-cols-2 gap-2.5">
          <div>
            <label class="block font-bold text-slate-300 mb-1">Fitting Date</label>
            <input type="date" id="job-date" class="w-full bg-slate-950 border border-slate-700 rounded-lg px-3 py-1.5 text-white focus:ring-1 focus:ring-amber-400 focus:outline-none" />
            <span class="text-[9px] text-slate-500">Leave blank for Unscheduled</span>
          </div>
          <div>
            <label class="block font-bold text-slate-300 mb-1">Assign Fitter</label>
            <select id="job-fitter" class="w-full bg-slate-950 border border-slate-700 rounded-lg px-3 py-1.5 text-white focus:ring-1 focus:ring-amber-400 focus:outline-none"></select>
          </div>
        </div>

        <div>
          <label class="block font-bold text-slate-300 mb-1">Job Specifications / Blinds Notes</label>
          <textarea id="job-notes" rows="2" placeholder="e.g. 5x Faux Wood 50mm, 1x Roller in Bay..." class="w-full bg-slate-950 border border-slate-700 rounded-lg px-3 py-1.5 text-white focus:ring-1 focus:ring-amber-400 focus:outline-none"></textarea>
        </div>

        <!-- Fitting Sheet Scan -->
        <div>
          <label class="block font-bold text-slate-300 mb-1">
            <i class="fa-solid fa-camera mr-1 text-amber-400"></i> Fitting Sheet Scan / Photo
          </label>
          <input type="file" id="job-photo-input" accept="image/*" capture="environment" onchange="handlePhotoUpload(event)" class="text-[11px] text-slate-400 file:mr-2 file:py-1 file:px-2.5 file:rounded-lg file:border-0 file:text-[10px] file:font-bold file:bg-slate-800 file:text-amber-400 hover:file:bg-slate-700" />
          <div id="photo-preview-container" class="mt-2 hidden">
            <img id="photo-preview" src="" alt="Fitting Sheet" class="h-24 rounded-lg border border-slate-700 object-cover cursor-pointer hover:border-amber-400 transition" onclick="openPhotoViewer(this.src)" />
            <p class="text-[9px] text-slate-400 mt-0.5">Click photo to view full size</p>
          </div>
        </div>

        <!-- Actions -->
        <div class="flex items-center justify-between pt-3 border-t border-slate-800">
          <button type="button" id="btn-delete-job" onclick="deleteCurrentJob()" class="text-rose-400 hover:text-rose-300 font-bold text-xs hidden">
            <i class="fa-solid fa-trash mr-1"></i> Delete
          </button>
          <div class="flex space-x-2 ml-auto">
            <button type="button" onclick="closeJobModal()" class="px-3.5 py-1.5 font-bold text-slate-400 hover:text-white">Cancel</button>
            <button type="submit" id="btn-save-job" class="px-4 py-1.5 font-black bg-amber-500 hover:bg-amber-400 text-slate-950 rounded-lg shadow flex items-center">
              <span>Save & Sync</span>
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <!-- MODAL: TIME OFF -->
  <div id="timeOffModal" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 hidden items-center justify-center p-4">
    <div class="bg-slate-900 text-slate-100 rounded-2xl border border-slate-700 shadow-2xl max-w-sm w-full overflow-hidden">
      <div class="bg-slate-950 px-5 py-3 border-b border-slate-800 flex justify-between items-center">
        <h3 class="font-bold text-xs uppercase text-white">Block Fitter Date Off</h3>
        <button onclick="closeTimeOffModal()" class="text-slate-400 hover:text-white"><i class="fa-solid fa-xmark"></i></button>
      </div>
      <form onsubmit="saveTimeOff(event)" class="p-4 space-y-3 text-xs">
        <div>
          <label class="block font-bold text-slate-300 mb-1">Select Fitter *</label>
          <select id="timeoff-fitter" required class="w-full bg-slate-950 border border-slate-700 rounded-lg px-3 py-1.5 text-white"></select>
        </div>
        <div>
          <label class="block font-bold text-slate-300 mb-1">Date Off *</label>
          <input type="date" id="timeoff-date" required class="w-full bg-slate-950 border border-slate-700 rounded-lg px-3 py-1.5 text-white" />
        </div>
        <div>
          <label class="block font-bold text-slate-300 mb-1">Reason</label>
          <input type="text" id="timeoff-reason" placeholder="e.g. Holiday, Van Service" class="w-full bg-slate-950 border border-slate-700 rounded-lg px-3 py-1.5 text-white" />
        </div>
        <div class="flex justify-end space-x-2 pt-2 border-t border-slate-800">
          <button type="button" onclick="closeTimeOffModal()" class="px-3 py-1.5 font-bold text-slate-400">Cancel</button>
          <button type="submit" class="px-4 py-1.5 font-bold bg-rose-600 hover:bg-rose-500 text-white rounded-lg">Confirm & Sync</button>
        </div>
      </form>
    </div>
  </div>

  <!-- LIGHTBOX VIEWER -->
  <div id="photoViewerModal" class="fixed inset-0 bg-black/95 z-[70] hidden items-center justify-center p-4 cursor-pointer" onclick="closePhotoViewer()">
    <div class="relative max-w-4xl max-h-[92vh] flex flex-col items-center">
      <img id="viewer-img" src="" alt="Fitting Sheet" class="max-h-[85vh] max-w-full rounded-lg shadow-2xl object-contain border border-slate-700" />
      <span class="text-slate-400 text-xs mt-3 bg-slate-900 px-3 py-1 rounded-full border border-slate-800">Tap anywhere to close</span>
    </div>
  </div>

  <!-- JAVASCRIPT LOGIC -->
  <script>
    const GOOGLE_SCRIPT_URL = "https://script.google.com/macros/s/AKfycbxaf8dHvxIh90BQ9RTAWOWaqFSPL1HT0-9bzpNX1VqD8piDW4S_EkncLmc2xA2ltYvzoA/exec";

    let fitters = JSON.parse(localStorage.getItem('scb_fitters')) || [
      { id: 'f1', name: 'Dave', color: 'blue' },
      { id: 'f2', name: 'Mo', color: 'emerald' },
      { id: 'f3', name: 'Tariq', color: 'purple' }
    ];

    let jobs = JSON.parse(localStorage.getItem('scb_dual_jobs')) || [];
    let timeOffs = JSON.parse(localStorage.getItem('scb_dual_timeoffs')) || [];

    const colorThemes = {
      blue: { dot: 'bg-blue-400', border: 'border-blue-500/50', text: 'text-blue-400', activeBtn: 'bg-blue-600 text-white' },
      emerald: { dot: 'bg-emerald-400', border: 'border-emerald-500/50', text: 'text-emerald-400', activeBtn: 'bg-emerald-600 text-white' },
      purple: { dot: 'bg-purple-400', border: 'border-purple-500/50', text: 'text-purple-400', activeBtn: 'bg-purple-600 text-white' },
      cyan: { dot: 'bg-cyan-400', border: 'border-cyan-500/50', text: 'text-cyan-400', activeBtn: 'bg-cyan-600 text-white' },
      orange: { dot: 'bg-orange-400', border: 'border-orange-500/50', text: 'text-orange-400', activeBtn: 'bg-orange-600 text-white' },
      pink: { dot: 'bg-pink-400', border: 'border-pink-500/50', text: 'text-pink-400', activeBtn: 'bg-pink-600 text-white' }
    };

    let baseDate = new Date();
    baseDate.setDate(1);
    let currentUploadedPhotoBase64 = '';
    let selectedFitterFilter = 'ALL';

    // Helper: Normalize any messy date string from Google Sheets to standard 'YYYY-MM-DD'
    function normalizeDateString(dateVal) {
      if (!dateVal) return '';
      const str = String(dateVal).trim();
      if (!str) return '';
      
      // If already in YYYY-MM-DD
      if (/^\d{4}-\d{2}-\d{2}$/.test(str)) return str;
      
      // If timestamp like "2026-08-26T00:00:00.000Z"
      if (str.includes('T')) return str.split('T')[0];
      
      // Parse Date object or text
      const d = new Date(str);
      if (!isNaN(d.getTime())) {
        const year = d.getFullYear();
        const month = String(d.getMonth() + 1).padStart(2, '0');
        const day = String(d.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      }
      return str;
    }

    function setSyncStatus(state, msg) {
      const icon = document.getElementById('sync-icon');
      const text = document.getElementById('sync-text');
      if (!icon || !text) return;

      if (state === 'syncing') {
        icon.className = 'fa-solid fa-spinner fa-spin mr-1.5 text-amber-400';
        text.textContent = msg || 'Saving...';
      } else if (state === 'connected') {
        icon.className = 'fa-solid fa-circle-check mr-1.5 text-emerald-400';
        text.textContent = msg || 'Live in Sync';
      } else if (state === 'error') {
        icon.className = 'fa-solid fa-triangle-exclamation mr-1.5 text-rose-400';
        text.textContent = msg || 'Sync Failed';
      }
    }

    async function pushToLiveDatabase() {
      // 1. Immediately persist and render locally
      localStorage.setItem('scb_fitters', JSON.stringify(fitters));
      localStorage.setItem('scb_dual_jobs', JSON.stringify(jobs));
      localStorage.setItem('scb_dual_timeoffs', JSON.stringify(timeOffs));
      refreshFitterDependencies();
      render();

      setSyncStatus('syncing', 'Saving to Sheet...');

      try {
        const payload = JSON.stringify({ jobs, fitters, timeOffs });
        const response = await fetch(GOOGLE_SCRIPT_URL, {
          method: 'POST',
          body: payload,
          headers: {
            'Content-Type': 'text/plain;charset=utf-8'
          }
        });

        const result = await response.json();

        if (result.status === 'success') {
          if (result.updatedJobs) {
            jobs = result.updatedJobs.map(j => ({
              ...j,
              date: normalizeDateString(j.date),
              balance: (parseFloat(j.balance) || 0).toFixed(2)
            }));
            localStorage.setItem('scb_dual_jobs', JSON.stringify(jobs));
          }
          setSyncStatus('connected', 'Live in Sync');
          render();
        } else {
          throw new Error(result.message || 'Server error');
        }
      } catch (err) {
        console.error("Database write error:", err);
        setSyncStatus('error', 'Error Saving');
        alert("Google Sheet Sync Error: " + err.message);
      }
    }

    async function fetchLiveDatabase() {
      setSyncStatus('syncing', 'Loading Data...');
      try {
        const response = await fetch(GOOGLE_SCRIPT_URL, {
          method: 'GET',
          redirect: 'follow'
        });

        const data = await response.json();

        if (data.status === 'success') {
          if (Array.isArray(data.fitters) && data.fitters.length > 0) {
            fitters = data.fitters;
          }
          if (Array.isArray(data.jobs)) {
            jobs = data.jobs.map(j => ({
              ...j,
              date: normalizeDateString(j.date),
              total: parseFloat(j.total) || 0,
              deposit: parseFloat(j.deposit) || 0,
              balance: (parseFloat(j.balance) || ((parseFloat(j.total) || 0) - (parseFloat(j.deposit) || 0))).toFixed(2)
            }));
          }
          if (Array.isArray(data.timeOffs)) {
            timeOffs = data.timeOffs.map(t => ({
              ...t,
              date: normalizeDateString(t.date)
            }));
          }

          localStorage.setItem('scb_fitters', JSON.stringify(fitters));
          localStorage.setItem('scb_dual_jobs', JSON.stringify(jobs));
          localStorage.setItem('scb_dual_timeoffs', JSON.stringify(timeOffs));

          setSyncStatus('connected', 'Live in Sync');
          refreshFitterDependencies();
          render();
        } else {
          throw new Error(data.message || 'Parse error');
        }
      } catch (err) {
        console.error("Database fetch error:", err);
        setSyncStatus('error', 'Using Offline Data');
      }
    }

    function refreshFitterDependencies() {
      const filterBar = document.getElementById('dynamic-filter-bar');
      let filterHtml = `
        <button onclick="setFitterFilter('ALL')" class="px-2.5 py-1 rounded-lg text-xs font-bold transition ${selectedFitterFilter === 'ALL' ? 'bg-amber-500 text-slate-950 shadow' : 'text-slate-300 hover:text-white hover:bg-slate-800'}">All</button>
      `;

      fitters.forEach(f => {
        const c = colorThemes[f.color] || colorThemes.blue;
        const isActive = selectedFitterFilter === f.name;
        filterHtml += `
          <button onclick="setFitterFilter('${f.name}')" class="px-2.5 py-1 rounded-lg text-xs font-bold transition ${isActive ? c.activeBtn : 'text-slate-300 hover:text-white hover:bg-slate-800'}">
            <span class="inline-block w-2 h-2 rounded-full ${c.dot} mr-1"></span>${f.name}
          </button>
        `;
      });

      filterHtml += `
        <button onclick="setFitterFilter('UNASSIGNED')" class="px-2 py-1 rounded-lg text-xs font-bold transition ${selectedFitterFilter === 'UNASSIGNED' ? 'bg-slate-700 text-amber-400 shadow' : 'text-slate-400 hover:text-white hover:bg-slate-800'}">Unassigned</button>
      `;
      filterBar.innerHTML = filterHtml;

      const jobFitterSelect = document.getElementById('job-fitter');
      let selectHtml = `<option value="">Unassigned</option>`;
      fitters.forEach(f => {
        selectHtml += `<option value="${f.name}">${f.name}</option>`;
      });
      jobFitterSelect.innerHTML = selectHtml;

      const timeOffSelect = document.getElementById('timeoff-fitter');
      let timeOffHtml = ``;
      fitters.forEach(f => {
        timeOffHtml += `<option value="${f.name}">${f.name}</option>`;
      });
      timeOffSelect.innerHTML = timeOffHtml;

      const manageList = document.getElementById('fitters-list-display');
      manageList.innerHTML = fitters.map(f => {
        const c = colorThemes[f.color] || colorThemes.blue;
        return `
          <div class="flex items-center justify-between p-2 bg-slate-950 rounded-lg border border-slate-800">
            <div class="flex items-center space-x-2">
              <span class="w-3 h-3 rounded-full ${c.dot}"></span>
              <span class="font-bold text-white">${f.name}</span>
            </div>
            <button onclick="deleteFitter('${f.id}')" class="text-rose-500 hover:text-rose-400 font-bold text-[11px] px-2 py-0.5 rounded bg-rose-950/40 border border-rose-800/40">Remove</button>
          </div>
        `;
      }).join('');
    }

    function openManageFittersModal() {
      refreshFitterDependencies();
      document.getElementById('fitterModal').classList.remove('hidden');
      document.getElementById('fitterModal').classList.add('flex');
    }

    function closeManageFittersModal() {
      document.getElementById('fitterModal').classList.add('hidden');
      document.getElementById('fitterModal').classList.remove('flex');
    }

    function addNewFitter(e) {
      e.preventDefault();
      const nameInput = document.getElementById('new-fitter-name');
      const colorInput = document.getElementById('new-fitter-color');
      const name = nameInput.value.trim();
      const color = colorInput.value;

      if (!name) return;
      if (fitters.some(f => f.name.toLowerCase() === name.toLowerCase())) {
        alert('A fitter with this name already exists!');
        return;
      }

      fitters.push({ id: 'f_' + Date.now(), name, color });
      nameInput.value = '';
      pushToLiveDatabase();
    }

    function deleteFitter(id) {
      if (!confirm('Remove this fitter from Google Sheet database?')) return;
      fitters = fitters.filter(f => f.id !== id);
      pushToLiveDatabase();
    }

    function setFitterFilter(fitterKey) {
      selectedFitterFilter = fitterKey;
      refreshFitterDependencies();
      render();
    }

    function getFilteredJobs() {
      if (selectedFitterFilter === 'ALL') return jobs;
      if (selectedFitterFilter === 'UNASSIGNED') return jobs.filter(j => !j.fitter);
      return jobs.filter(j => j.fitter === selectedFitterFilter);
    }

    function getFilteredTimeOffs() {
      if (selectedFitterFilter === 'ALL' || selectedFitterFilter === 'UNASSIGNED') return timeOffs;
      return timeOffs.filter(t => t.fitter === selectedFitterFilter);
    }

    function changeTwoMonths(direction) {
      baseDate.setMonth(baseDate.getMonth() + (direction * 2));
      render();
    }

    function resetToCurrentMonth() {
      baseDate = new Date();
      baseDate.setDate(1);
      render();
    }

    function render() {
      const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
      const activeJobs = getFilteredJobs();
      const activeTimeOffs = getFilteredTimeOffs();
      
      const m1Date = new Date(baseDate);
      const m1Year = m1Date.getFullYear();
      const m1Month = m1Date.getMonth();
      document.getElementById('month-1-title').textContent = `${monthNames[m1Month]} ${m1Year}`;
      renderSingleMonthGrid(m1Year, m1Month, 'grid-month-1', 'month-1-job-count', activeJobs, activeTimeOffs);

      const m2Date = new Date(baseDate);
      m2Date.setMonth(m2Date.getMonth() + 1);
      const m2Year = m2Date.getFullYear();
      const m2Month = m2Date.getMonth();
      document.getElementById('month-2-title').textContent = `${monthNames[m2Month]} ${m2Year}`;
      renderSingleMonthGrid(m2Year, m2Month, 'grid-month-2', 'month-2-job-count', activeJobs, activeTimeOffs);

      renderUnscheduled(activeJobs);
      renderTimeOffs(activeTimeOffs);
      updateKPIs(activeJobs);
    }

    function renderSingleMonthGrid(year, month, gridId, countId, activeJobs, activeTimeOffs) {
      const grid = document.getElementById(gridId);
      grid.innerHTML = '';

      const firstDayIndex = (new Date(year, month, 1).getDay() + 6) % 7;
      const totalDays = new Date(year, month + 1, 0).getDate();
      const prevMonthTotalDays = new Date(year, month, 0).getDate();

      let monthJobCount = 0;

      for (let i = firstDayIndex - 1; i >= 0; i--) {
        const d = prevMonthTotalDays - i;
        grid.innerHTML += `<div class="day-cell bg-slate-950/40 rounded-lg p-1 opacity-25 border border-slate-900"><span class="text-[10px] font-bold text-slate-500">${d}</span></div>`;
      }

      const todayIso = new Date().toISOString().split('T')[0];

      for (let day = 1; day <= totalDays; day++) {
        const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
        const isToday = dateStr === todayIso;

        // Compare normalized dates
        const dayJobs = activeJobs.filter(j => normalizeDateString(j.date) === dateStr);
        monthJobCount += dayJobs.length;
        const dayOffs = activeTimeOffs.filter(t => normalizeDateString(t.date) === dateStr);

        let jobsHtml = dayJobs.map(j => {
          const fitterObj = fitters.find(f => f.name === j.fitter);
          const style = fitterObj ? (colorThemes[fitterObj.color] || colorThemes.blue) : { border: 'border-slate-700', text: 'text-slate-400' };
          return `
            <div onclick="editJob('${j.id}')" class="p-1 rounded mb-1 bg-slate-900 border ${style.border} hover:border-amber-400 cursor-pointer shadow-sm transition hover:scale-[1.01]">
              <div class="flex justify-between items-center leading-tight">
                <span class="font-black text-[11px] text-amber-400 uppercase tracking-tight">${j.postcode}</span>
                <span class="font-extrabold text-[10px] text-slate-200">£${j.balance}</span>
              </div>
              <div class="flex justify-between items-center text-[9px] text-slate-400 mt-0.5 leading-none">
                <span class="truncate max-w-[70px] text-slate-300 font-medium">${j.customer}</span>
                <span class="${style.text} font-bold">${j.fitter ? j.fitter.slice(0,5) : 'Unass.'}</span>
              </div>
            </div>
          `;
        }).join('');

        let timeOffsHtml = dayOffs.map(t => `
          <div class="p-1 rounded bg-rose-950/80 border border-rose-500/50 text-rose-300 text-[9px] font-bold mb-1 flex items-center justify-between">
            <span><i class="fa-solid fa-ban mr-1"></i>${t.fitter} (OFF)</span>
            <button onclick="deleteTimeOff('${t.id}')" class="text-rose-400 hover:text-rose-200"><i class="fa-solid fa-xmark"></i></button>
          </div>
        `).join('');

        grid.innerHTML += `
          <div class="day-cell bg-slate-900/90 rounded-lg p-1.5 border ${isToday ? 'border-amber-500 ring-1 ring-amber-500/40 bg-amber-950/10' : 'border-slate-800'} flex flex-col">
            <div class="flex justify-between items-center mb-1 pb-0.5 border-b border-slate-800/80">
              <span class="text-[11px] font-black ${isToday ? 'bg-amber-500 text-slate-950 px-1.5 rounded' : 'text-slate-400'}">${day}</span>
              ${dayJobs.length > 0 ? `<span class="text-[9px] font-black text-amber-500/90">${dayJobs.length} fit</span>` : ''}
            </div>
            <div class="flex-1 overflow-y-auto custom-scrollbar pr-0.5 space-y-1">
              ${timeOffsHtml}
              ${jobsHtml}
            </div>
          </div>
        `;
      }

      document.getElementById(countId).textContent = `${monthJobCount} Jobs`;
    }

    function renderUnscheduled(activeJobs) {
      const container = document.getElementById('unscheduled-job-list');
      const unscheduledJobs = activeJobs.filter(j => !normalizeDateString(j.date));

      if (unscheduledJobs.length === 0) {
        container.innerHTML = `<div class="text-center py-8 text-slate-500 text-xs"><i class="fa-solid fa-check-circle text-emerald-500 text-xl mb-1 block"></i>No unscheduled jobs</div>`;
        return;
      }

      container.innerHTML = unscheduledJobs.map(j => `
        <div onclick="editJob('${j.id}')" class="p-2.5 bg-slate-900 border border-slate-800 hover:border-amber-400 rounded-lg cursor-pointer transition shadow-sm">
          <div class="flex justify-between items-start">
            <span class="font-black text-xs text-amber-400 uppercase tracking-wide">${j.postcode}</span>
            <span class="text-[10px] font-black bg-amber-500/20 text-amber-300 px-1.5 py-0.5 rounded border border-amber-500/30">Bal: £${j.balance}</span>
          </div>
          <div class="text-xs font-semibold text-slate-200 mt-1">${j.customer}</div>
          ${j.notes ? `<div class="text-[10px] text-slate-400 mt-0.5 truncate">${j.notes}</div>` : ''}
          <div class="flex justify-between items-center mt-2 pt-1.5 border-t border-slate-800 text-[9px]">
            <span class="text-sky-400 font-bold"><i class="fa-solid fa-calendar-plus mr-1"></i>Set Date</span>
            ${j.sheetUrl ? '<span class="text-emerald-400 font-bold"><i class="fa-solid fa-paperclip mr-0.5"></i>Sheet</span>' : ''}
          </div>
        </div>
      `).join('');
    }

    function renderTimeOffs(activeTimeOffs) {
      const list = document.getElementById('time-off-list');
      if (activeTimeOffs.length === 0) {
        list.innerHTML = `<div class="text-slate-500 italic text-[11px]">No fitter days off.</div>`;
        return;
      }
      list.innerHTML = activeTimeOffs.map(t => `
        <div class="flex items-center justify-between p-1.5 bg-slate-900 rounded border border-slate-800">
          <div>
            <span class="font-bold text-white">${t.fitter}</span> <span class="text-slate-400">(${normalizeDateString(t.date)})</span>
            <div class="text-[9px] text-rose-400 font-semibold">${t.reason || 'Off'}</div>
          </div>
          <button onclick="deleteTimeOff('${t.id}')" class="text-slate-500 hover:text-rose-400 p-1"><i class="fa-solid fa-trash"></i></button>
        </div>
      `).join('');
    }

    function updateKPIs(activeJobs) {
      const totalOutstanding = activeJobs.reduce((sum, j) => sum + (parseFloat(j.balance) || 0), 0);
      const scheduledCount = activeJobs.filter(j => normalizeDateString(j.date)).length;
      const unscheduledCount = activeJobs.filter(j => !normalizeDateString(j.date)).length;

      document.getElementById('stat-total-balance').textContent = `£${totalOutstanding.toFixed(2)}`;
      document.getElementById('stat-scheduled-count').textContent = scheduledCount;
      document.getElementById('stat-unscheduled-count').textContent = unscheduledCount;
      document.getElementById('unscheduled-badge-count').textContent = unscheduledCount;
    }

    function openJobModal() {
      document.getElementById('jobForm').reset();
      document.getElementById('job-id').value = '';
      document.getElementById('job-modal-title').textContent = 'Book New Fitting';
      document.getElementById('btn-delete-job').classList.add('hidden');
      document.getElementById('photo-preview-container').classList.add('hidden');
      currentUploadedPhotoBase64 = '';
      document.getElementById('jobModal').classList.remove('hidden');
      document.getElementById('jobModal').classList.add('flex');
    }

    function closeJobModal() {
      document.getElementById('jobModal').classList.add('hidden');
      document.getElementById('jobModal').classList.remove('flex');
    }

    function calculateBalance() {
      const total = parseFloat(document.getElementById('job-total').value) || 0;
      const deposit = parseFloat(document.getElementById('job-deposit').value) || 0;
      const balance = Math.max(0, total - deposit);
      document.getElementById('job-balance').value = balance.toFixed(2);
    }

    function handlePhotoUpload(e) {
      const file = e.target.files[0];
      if (!file) return;
      const reader = new FileReader();
      reader.onload = function(event) {
        currentUploadedPhotoBase64 = event.target.result;
        document.getElementById('photo-preview').src = currentUploadedPhotoBase64;
        document.getElementById('photo-preview-container').classList.remove('hidden');
      };
      reader.readAsDataURL(file);
    }

    function saveJob(e) {
      e.preventDefault();
      const id = document.getElementById('job-id').value || String(Date.now());
      const postcode = document.getElementById('job-postcode').value.trim().toUpperCase();
      const customer = document.getElementById('job-customer').value.trim();
      const phone = document.getElementById('job-phone').value.trim();
      const address = document.getElementById('job-address').value.trim();
      const total = parseFloat(document.getElementById('job-total').value) || 0;
      const deposit = parseFloat(document.getElementById('job-deposit').value) || 0;
      const balance = (total - deposit).toFixed(2);
      const date = normalizeDateString(document.getElementById('job-date').value);
      const fitter = document.getElementById('job-fitter').value;
      const notes = document.getElementById('job-notes').value.trim();

      const existingIndex = jobs.findIndex(j => j.id === id);
      const jobData = {
        id, postcode, customer, phone, address, total, deposit, balance, date, fitter, notes,
        sheetUrl: currentUploadedPhotoBase64 || (existingIndex > -1 ? jobs[existingIndex].sheetUrl : '')
      };

      if (existingIndex > -1) jobs[existingIndex] = jobData;
      else jobs.unshift(jobData);

      closeJobModal();
      pushToLiveDatabase();
    }

    function editJob(id) {
      const j = jobs.find(job => job.id === id);
      if (!j) return;

      document.getElementById('job-id').value = j.id;
      document.getElementById('job-postcode').value = j.postcode;
      document.getElementById('job-customer').value = j.customer;
      document.getElementById('job-phone').value = j.phone || '';
      document.getElementById('job-address').value = j.address || '';
      document.getElementById('job-total').value = j.total;
      document.getElementById('job-deposit').value = j.deposit;
      document.getElementById('job-balance').value = j.balance;
      document.getElementById('job-date').value = normalizeDateString(j.date) || '';
      document.getElementById('job-fitter').value = j.fitter || '';
      document.getElementById('job-notes').value = j.notes || '';

      if (j.sheetUrl) {
        currentUploadedPhotoBase64 = j.sheetUrl;
        document.getElementById('photo-preview').src = j.sheetUrl;
        document.getElementById('photo-preview-container').classList.remove('hidden');
      } else {
        currentUploadedPhotoBase64 = '';
        document.getElementById('photo-preview-container').classList.add('hidden');
      }

      document.getElementById('job-modal-title').textContent = `Fitting: ${j.postcode}`;
      document.getElementById('btn-delete-job').classList.remove('hidden');
      document.getElementById('jobModal').classList.remove('hidden');
      document.getElementById('jobModal').classList.add('flex');
    }

    function deleteCurrentJob() {
      const id = document.getElementById('job-id').value;
      if (!id || !confirm('Delete this job from Google Sheet?')) return;
      jobs = jobs.filter(j => j.id !== id);
      closeJobModal();
      pushToLiveDatabase();
    }

    function openTimeOffModal() {
      refreshFitterDependencies();
      document.getElementById('timeOffModal').classList.remove('hidden');
      document.getElementById('timeOffModal').classList.add('flex');
    }

    function closeTimeOffModal() {
      document.getElementById('timeOffModal').classList.add('hidden');
      document.getElementById('timeOffModal').classList.remove('flex');
    }

    function saveTimeOff(e) {
      e.preventDefault();
      const fitter = document.getElementById('timeoff-fitter').value;
      const date = normalizeDateString(document.getElementById('timeoff-date').value);
      const reason = document.getElementById('timeoff-reason').value.trim();

      timeOffs.push({ id: String(Date.now()), fitter, date, reason });
      closeTimeOffModal();
      pushToLiveDatabase();
    }

    function deleteTimeOff(id) {
      timeOffs = timeOffs.filter(t => t.id !== id);
      pushToLiveDatabase();
    }

    function openPhotoViewer(src) {
      document.getElementById('viewer-img').src = src;
      document.getElementById('photoViewerModal').classList.remove('hidden');
      document.getElementById('photoViewerModal').classList.add('flex');
    }

    function closePhotoViewer() {
      document.getElementById('photoViewerModal').classList.add('hidden');
      document.getElementById('photoViewerModal').classList.remove('flex');
    }

    refreshFitterDependencies();
    render();
    fetchLiveDatabase();
    setInterval(fetchLiveDatabase, 30000);
  </script>
</body>
</html>