M.Security Master Hub · Ultimate Workshop Terminal

New immobiliser job

UK Registration (number plate)

</textara>
        <div style="margin-top: 1rem; display: flex; gap: 0.8rem; flex-wrap: wrap;">
          <button class="btn btn-primary" id="logJobBtn"><i class="fas fa-save"></i> Log job</button>
          <button class="btn btn-outline" id="printJobSheetBtn"><i class="fas fa-print"></i> Print job sheet</button>
        </div>
      </div>
      <div>
        <div class="badge" style="margin-bottom: 0.8rem;"><i class="fas fa-coins"></i> COST ESTIMATOR</div>
        <div id="profitPreview" style="background: #c0c0e; padding: 1rem; border-radius: 1rem; font-family: 'JetBrains Mono';"></div>
      </div>
    </div>
  </div>

<div class="grid-2">
    
    <div>
      <div class="card">
        <h3><i class="fas fa-project-diagram"></i> Vehicle blueprint · cut point</h3>
        <div id="blueprintDisplay" style="background: #0a0a0c; border-radius: 1rem; padding: 1rem; margin-top: 0.8rem; font-family: 'JetBrains Mono'; font-size: 0.85rem;">
          <span class="badge">⟳ Select vhicle above</span>
        </div>
      </div>
      <div class="card">
        <h3><i class="fas fa-boxes"></i> Component stock (consumables)</h3>
        <div id="stockContainer"></div>
        <p class="badge" style="margin-top: 1rem;"><i class="fas fa-lightbulb"></i> Stock auto‑decrements when logging a job (Full package uses more)</p>
      </div>
    </div>

<div>
      <div class="card">
        <h3><i class="fas fa-chart-line"></i>Revenue dashboard</h3>
        <div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
          <div><span class="badge">📆 This month</span><br><span style="font-size: 1.8rem; font-weight: bold;" id="monthRevenue">£0</span></div>
          <div><span class="badge">✅ Completed/Paid jobs</span><br><span id="completedCount">0</span></div>
          <div><span class="badge">💰 Pending jobs value</span><br><span id="pendingValue">£0</span></div>
        </div>
        <div class="badge style="margin-top: 1rem;">profit margin avg: <span id="avgMargin">-</span>%</div>
      </div>
      <div class="card">
        <h3><i class="fas fa-stream"></i> Live activity feed · job status</h3>
        <div id="jobFeed" style="max-height: 380px; overflow-y: auto;"></div>
        <button class="btn btn-outline" id="refreshFeedBtn" style="margin-top: 1rem; width: 100%;"><i class="fas fa-sync-alt"></i> Refresh feed</button>
      </div>
    </div>
  </div>
</div>

// ======================= STOCK MANAGEMENT =======================
  let stock = { esp32: 8, relay: 12, buckConverter:6, vagConnector: 4, wireMeter: 20, box: 9 };
  const STOCK_KEY = "msecurity_stock";
  function loadStock() {
    const saved = localStorage.getItem(STOCK_KEY);
    if(saved) stock = JSON.parse(saved);
    else localStorage.setItem(STOCK_KEY, JSON.stringify(stock));
    renderStockUI();
  }
  function saveStock() { localStorage.setItem(STOCK_KEY, JSON.stringify(stock)); renderStockUI(); }
  function adjustStock(item, delta) { stock[item] = Math.max(0, (stock[item] || 0) + delta); saveStock(); }
  functiondeductStockForPackage(pkg) {
    if(pkg === 'full') {
      stock.esp32 = Math.max(0, stock.esp32 - 1);
      stock.relay = Math.max(0, stock.relay - 1);
      stock.buckConverter = Math.max(0, stock.buckConverter - 1);
      stock.vagConnector = Math.max(0, stock.vagConnector - 1);
      stock.wireMeter = Math.max(0, stock.wireMeter - 2);
      stock.box = Math.max(0, stock.box - 1);
    } else {
      stock.esp32 = Math.max(0, stock.esp32 - 1);
      stock.relay = Math.max(0, stock.relay - 1);
      sock.vagConnector = Math.max(0, stock.vagConnector - 1);
      stock.wireMeter = Math.max(0, stock.wireMeter - 1);
    }
    saveStock();
  }
  function renderStockUI() {
    const container = document.getElementById('stockContainer');
    if(!container) return;
    container.innerHTML = `
      <div class="stock-item"><span><i class="fab fa-bluetooth-b"></i> ESP32 modules</span><div><button onclick="adjustStock('esp32',-1)">-</button> ${stock.esp32} <button onclick="adjustStock('esp32',1)">+</button></di></div>
      <div class="stock-item"><span><i class="fas fa-microchip"></i> 5V Relay (optocoupler)</span><div><button onclick="adjustStock('relay',-1)">-</button> ${stock.relay} <button onclick="adjustStock('relay',1)">+</button></div></div>
      <div class="stock-item"><span><i class="fas fa-bolt"></i> Buck Converter 12V→5V</span><div><button onclick="adjustStock('buckConverter',-1)">-</button> ${stock.buckConverter} <button onclick="adjustStock('buckConverter',1)">+</button></div></div>
      <div cass="stock-item"><span><i class="fas fa-plug"></i> VAG Connector kit (5/3pin)</span><div><button onclick="adjustStock('vagConnector',-1)">-</button> ${stock.vagConnector} <button onclick="adjustStock('vagConnector',1)">+</button></div></div>
      <div class="stock-item"><span><i class="fas fa-ruler"></i> Wire (metres, 20AWG)</span><div><button onclick="adjustStock('wireMeter',-2)">-2m</button> ${stock.wireMeter}m <button onclick="adjustStock('wireMeter',2)">+2m</button></div></div>
      <div class="stok-item"><span><i class="fas fa-box"></i> Enclosure box</span><div><button onclick="adjustStock('box',-1)">-</button> ${stock.box} <button onclick="adjustStock('box',1)">+</button></div></div>
    `;
  }

// ======================= JOBS DATA (LocalStorage) =======================
  let jobs = [];
  const JOBS_KEY = "msecurity_jobs";
  function loadJobs() {
    const stored = localStorage.getItem(JOBS_KEY);
    if(stored) jobs = JSON.parse(stored);
    else jobs = [];
    renderJobFeed();
    updateReveueDashboard();
  }
  function saveJobs() { localStorage.setItem(JOBS_KEY, JSON.stringify(jobs)); renderJobFeed(); updateRevenueDashboard(); }
  function updateJobStatus(index, newStatus) { if(jobs[index]) { jobs[index].status = newStatus; saveJobs(); } }

// ======================= LOG JOB =======================
  function logJob() {
    const customer = document.getElementById('customerName').value.trim();
    if(!customer) { alert("Customer name required"); return; }
    const phone = document.getElementById('customerPhone').value.trim();
    const reg = document.getElementById('regInput').value.trim().toUpperCase();
   const brand = document.getElementById('brandSelect').value;
    const model = document.getElementById('modelSelect').value;
    const pkg = document.getElementById('packageSelect').value;
    const notes = document.getElementById('jobNotes').value;
    if(!brand || !model) { alert("Select brand and model"); return; }
    deductStockForPackage(pkg);
    const newJob = {
      id: Date.now(),
      customer, phone, reg, vehicleBrand: brand, vehicleModel: model,
      pkg: pkg, notes, status: "Pending",
     date: new Date().toLocaleDateString('en-GB')
    };
    jobs.push(newJob);
    saveJobs();
    alert(`Job logged for ${customer} · Stock updated.`);
    document.getElementById('customerName').value = '';
    document.getElementById('customerPhone').value = '';
    document.getElementById('jobNotes').value = '';
    document.getElementById('regInput').value = '';
    document.getElementById('platePreview').innerHTML = '';
  }

// ======================= PRINT JOB SHEET =======================
  funcion printJobSheet() {
    const brand = document.getElementById('brandSelect').value;
    const model = document.getElementById('modelSelect').value;
    const customer = document.getElementById('customerName').value || "______";
    const phone = document.getElementById('customerPhone').value || "______";
    const reg = document.getElementById('regInput').value.toUpperCase() || "N/A";
    const pkg = document.getElementById('packageSelect').value === 'full' ? 'Full Package (£60)' : 'Switch Only (£30)'
    const notes = document.getElementById('jobNotes').value || "None";
    let blueprintHtml = "";
    if(brand && model && vehicleDB[brand] && vehicleDB[brand][model]) {
      const bp = vehicleDB[brand][model];
      blueprintHtml = `<div><strong>Cut point:</strong> ${bp.cutPoint}</div><div><strong>Wire colour:</strong> ${bp.wireColor}</div><div><strong>Connector:</strong> ${bp.connector}</div><div><strong>Location:</strong> ${bp.location}</div>`;
    } else { blueprintHtml = "<div>⚠️ No data for seleted vehicle</div>"; }
    const printWindow = window.open('', '_blank');
    printWindow.document.write(`
      <html><head><title>M.Security Job Sheet</title><style>body{font-family:monospace; padding:2rem;} h2{color:#f59e0b;}</style></head>
      <body><h2>M.Security · Install Job Sheet</h2>
      <p><strong>Customer:</strong> ${customer} | ${phone}<br><strong>Vehicle:</strong> ${brand} ${model} | Reg: ${reg}<br><strong>Package:</strong> ${pkg}<br><strong>Notes:</strong> ${notes}</p>
      <hr><h3>Tecnical Specs (intercept blueprint)</h3>${blueprintHtml}<hr><footer>Generated from M.Security Master Hub</footer>
      </body></html>`);
    printWindow.document.close();
    printWindow.print();
  }

// ======================= UI Helpers =======================
  function populateBrands() {
    const brandSel = document.getElementById('brandSelect');
    brandSel.innerHTML = '<option value="">-- Select brand --</option>';
    Object.keys(vehicleDB).sort().forEach(b => {
      brandSel.innerHTML += `<opion value="${b}">${b}</option>`;
    });
    brandSel.addEventListener('change', function() {
      const selectedBrand = this.value;
      const modelSel = document.getElementById('modelSelect');
      if(!selectedBrand) { modelSel.innerHTML = '<option value="">--</option>'; return; }
      const models = Object.keys(vehicleDB[selectedBrand] || {});
      modelSel.innerHTML = '<option value="">-- model --</option>';
      models.forEach(m => { modelSel.innerHTML += `<option value="${m}">${m}</option>`;});
      modelSel.dispatchEvent(new Event('change'));
    });
    document.getElementById('modelSelect').addEventListener('change', function() {
      const brand = document.getElementById('brandSelect').value;
      const model = this.value;
      if(brand && model && vehicleDB[brand] && vehicleDB[brand][model]) {
        const bp = vehicleDB[brand][model];
        document.getElementById('blueprintDisplay').innerHTML = `
          <div><i class="fas fa-cut"></i> <strong>Cut point:</strong> ${bp.cutPoit}</div>
          <div><i class="fas fa-palette"></i> <strong>Wire colour:</strong> ${bp.wireColor}</div>
          <div><i class="fas fa-plug"></i> <strong>Connector:</strong> ${bp.connector}</div>
          <div><i class="fas fa-map-marker-alt"></i> <strong>Location:</strong> ${bp.location}</div>
          ${bp.notes ? `<div class="badge" style="margin-top: 6px;">⚠️ ${bp.notes}</div>` : ''}
        `;
      } else {
        document.getElementById('blueprintDisplay').innerHTML = '<span class="badge">️ No blueprint for this combination</span>';
      }
    });
    brandSel.dispatchEvent(new Event('change'));
  }

function setDate() { document.getElementById('dateToday').innerText = new Date().toLocaleDateString('en-GB', {year:'numeric', month:'short', day:'numeric'}; }

// ======================= EVENT BINDING & INIT =======================
  document.addEventListener('DOMContentLoaded', () => {
    loadStock();
    loadJobs();
    populateBrands();
    setDate();
    document.getElementById('regInput').addEventListener('input', updatePlatePreview);
    document.getElementById('packageSelect').addEventListener('change', updateProfitPreview);
    document.getElementById('logJobBtn').addEventListener('click', logJob);
    document.getElementById('printJobSheetBtn'.addEventListener('click', printJobSheet);
    document.getElementById('refreshFeedBtn').addEventListener('click', () => { renderJobFeed(); updateRevenueDashboard(); });
    updateProfitPreview();
    window.adjustStock = adjustStock;
    window.updateJobStatus = updateJobStatus;
  });
</script>
</body>
</html>