Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

LiteSpeed

System:

Linux 5.14.0-687.66.1.el9_8.x86_64

PHP Version:

8.2.35

User:

flightbo

Directory:

/home2/flightbo/public_html/ticketsconfirmation.com/crm/assets

Free Space:

137.63 GB

🔧 Quick Actions

✏️ Editing: crm.js

/* ============================================================
   TICKETSCONFIRMATION.COM — CRM JavaScript
   ============================================================ */

// ── STATE ──
const CRM = {
  user: null,
  currentView: 'dashboard',
  data: {
    leads: [], customers: [], quotations: [], bookings: [],
    payments: [], itineraries: [], whatsapp: [], reports: {}
  },
  cache: {}
};

// ── API HELPER ──
async function api(endpoint, action, method = 'GET', body = null, params = {}) {
  const url = new URL(`api/${endpoint}.php`, window.location.href);
  url.searchParams.set('action', action);
  Object.entries(params).forEach(([k,v]) => v && url.searchParams.set(k, v));

const opts = { method, headers: { 'Content-Type': 'application/json' } };
  if (body && method !== 'GET') opts.body = JSON.stringify(body);

try {
    const res = await fetch(url, opts);
    if (res.status === 401) { window.location.href = 'index.php'; return null; }
    return await res.json();
  } catch (e) {
    toast('Connection error', 'error');
    return null;
  }
}

// ── TOAST ──
function toast(msg, type = 'success') {
  const icons = { success: 'fa-check-circle', error: 'fa-times-circle', warning: 'fa-exclamation-triangle' };
  const t = document.createElement('div');
  t.className = `toast ${type}`;
  t.innerHTML = `<i class="fas ${icons[type] || icons.success}"></i><span>${msg}</span>`;
  document.getElementById('toastContainer').appendChild(t);
  setTimeout(() => t.style.opacity = '0', 3000);
  setTimeout(() => t.remove(), 3300);
}

// ── NAVIGATION ──
function navigate(view) {
  document.querySelectorAll('.nav-item').forEach(el => el.classList.remove('active'));
  document.querySelectorAll('.view').forEach(el => el.classList.remove('active'));

const navEl = document.querySelector(`[data-view="${view}"]`);
  if (navEl) navEl.classList.add('active');

const viewEl = document.getElementById(`view-${view}`);
  if (viewEl) viewEl.classList.add('active');

CRM.currentView = view;

// Update page title
  const titles = {
    dashboard: 'Dashboard', leads: 'Leads', customers: 'Customers',
    itineraries: 'Itineraries', quotations: 'Quotations', bookings: 'Bookings',
    payments: 'Payments', whatsapp: 'WhatsApp Templates', reports: 'Reports', settings: 'Settings'
  };
  document.getElementById('pageTitle').textContent = titles[view] || view;

// Load data for the view
  loadView(view);
}

async function loadView(view) {
  switch(view) {
    case 'dashboard': await loadDashboard(); break;
    case 'leads': await loadLeads(); break;
    case 'customers': await loadCustomers(); break;
    case 'itineraries': await loadItineraries(); break;
    case 'quotations': await loadQuotations(); break;
    case 'bookings': await loadBookings(); break;
    case 'payments': await loadPayments(); break;
    case 'whatsapp': await loadWhatsApp(); break;
    case 'reports': await loadReports(); break;
    case 'settings': await loadSettings(); break;
  }
}

// ── CURRENCY FORMAT ──
function gbp(n) { return '£' + parseFloat(n || 0).toLocaleString('en-GB', {minimumFractionDigits: 2, maximumFractionDigits: 2}); }
function formatDate(d) { if (!d) return '—'; return new Date(d).toLocaleDateString('en-GB', {day:'numeric',month:'short',year:'numeric'}); }
function initials(name) { return (name || '?').split(' ').map(w=>w[0]).join('').toUpperCase().slice(0,2); }
function ago(ts) {
  const d = new Date(ts), now = new Date();
  const diff = Math.floor((now - d) / 1000);
  if (diff < 60) return 'just now';
  if (diff < 3600) return Math.floor(diff/60) + 'm ago';
  if (diff < 86400) return Math.floor(diff/3600) + 'h ago';
  return Math.floor(diff/86400) + 'd ago';
}

// ── MODAL HELPERS ──
function openModal(id) { document.getElementById(id).classList.add('open'); }
function closeModal(id) { document.getElementById(id).classList.remove('open'); }
function openDrawer(id) { document.getElementById(id).classList.add('open'); document.getElementById('drawerOverlay').classList.add('open'); }
function closeDrawer(id) { document.getElementById(id).classList.remove('open'); document.getElementById('drawerOverlay').classList.remove('open'); }

// ── CONFIRM DIALOG ──
function confirm(msg, onYes) {
  document.getElementById('confirmText').textContent = msg;
  openModal('confirmModal');
  document.getElementById('confirmYes').onclick = () => { closeModal('confirmModal'); onYes(); };
}

// ══════════════════════════════════════════════════════════════
// DASHBOARD
// ══════════════════════════════════════════════════════════════
async function loadDashboard() {
  const [overview, pipeline, revenue, recentLeads] = await Promise.all([
    api('reports','overview'),
    api('reports','lead_pipeline'),
    api('reports','monthly_revenue'),
    api('reports','recent_leads'),
  ]);

if (overview?.success) {
    const d = overview.data;
    document.getElementById('statLeads').textContent = d.total_leads;
    document.getElementById('statBookings').textContent = d.active_bookings;
    document.getElementById('statRevenue').textContent = gbp(d.month_revenue);
    document.getElementById('statConversion').textContent = d.conversion_rate + '%';
    document.getElementById('statCustomers').textContent = d.total_customers;
    document.getElementById('statOutstanding').textContent = gbp(d.outstanding);
  }

if (pipeline?.success) renderPipeline(pipeline.data);
  if (revenue?.success) renderRevenueChart(revenue.data);
  if (recentLeads?.success) renderRecentLeads(recentLeads.data);
}

function renderPipeline(data) {
  const statuses = ['new','contacted','quoted','booked','closed','lost'];
  const map = {};
  data.forEach(r => map[r.status] = parseInt(r.count));
  const max = Math.max(1, ...Object.values(map));

// ══════════════════════════════════════════════════════════════
// LEADS
// ══════════════════════════════════════════════════════════════
let leadsView = 'table'; // table | kanban

async function loadLeads(filters = {}) {
  const tbody = document.getElementById('leadsBody');
  if (tbody) tbody.innerHTML = '<tr><td colspan="8" class="loading-row"><div class="spinner"></div></td></tr>';

const res = await api('leads','list','GET', null, filters);
  if (!res?.success) return;
  CRM.data.leads = res.data;

// Update badge
  const badge = document.querySelector('[data-view="leads"] .nav-badge');
  if (badge) badge.textContent = res.data.filter(l=>l.status==='new').length || '';

if (leadsView === 'kanban') renderKanban(res.data);
  else renderLeadsTable(res.data);
}

function renderLeadsTable(leads) {
  const tbody = document.getElementById('leadsBody');
  if (!leads.length) { tbody.innerHTML = '<tr><td colspan="8" class="loading-row"><div class="empty-state" style="padding:30px"><i class="fas fa-users" style="font-size:2rem"></i><p>No leads found</p></div></td></tr>'; return; }

tbody.innerHTML = leads.map(l => `
    <tr>
      <td>
        <div style="display:flex;align-items:center;gap:10px">
          <div class="user-avatar" style="width:32px;height:32px;font-size:0.72rem">${initials(l.name)}</div>
          <div>
            <div style="font-weight:600">${l.name}</div>
            <div style="font-size:0.75rem;color:var(--text-muted)">${l.email || ''}</div>
          </div>
        </div>
      </td>
      <td>${l.phone || '—'}</td>
      <td><i class="fas fa-map-marker-alt" style="color:var(--green);margin-right:4px;font-size:0.8rem"></i>${l.destination || '—'}</td>
      <td>${formatDate(l.travel_date)}</td>
      <td><span class="badge ${l.status}">${l.status}</span></td>
      <td>${l.source_name ? `<span style="background:${l.source_color}20;color:${l.source_color};padding:3px 8px;border-radius:12px;font-size:0.72rem;font-weight:600">${l.source_name}</span>` : '—'}</td>
      <td>${l.agent_name || '—'}</td>
      <td>
        <div style="display:flex;gap:4px">
          <button class="btn btn-sm btn-secondary btn-icon" onclick="viewLead(${l.id})" title="View"><i class="fas fa-eye"></i></button>
          <button class="btn btn-sm btn-secondary btn-icon" onclick="editLead(${l.id})" title="Edit"><i class="fas fa-edit"></i></button>
          <button class="btn btn-sm btn-danger btn-icon" onclick="deleteLead(${l.id},'${l.name}')" title="Delete"><i class="fas fa-trash"></i></button>
        </div>
      </td>
    </tr>`).join('');
}

async function viewLead(id) {
  const res = await api('leads','get','GET',null,{id});
  if (!res?.success) return;
  const l = res.data;
  document.getElementById('drawerLeadName').textContent = l.name;
  document.getElementById('drawerLeadStatus').innerHTML = `<span class="badge ${l.status}">${l.status}</span>`;
  document.getElementById('drawerLeadBody').innerHTML = `
    <div class="detail-section">
      <h4><i class="fas fa-user"></i> Contact Info</h4>
      <div class="detail-grid">
        <div class="detail-field"><label>Phone</label><p>${l.phone || '—'}</p></div>
        <div class="detail-field"><label>Email</label><p>${l.email || '—'}</p></div>
      </div>
    </div>
    <div class="detail-section">
      <h4><i class="fas fa-plane"></i> Trip Details</h4>
      <div class="detail-grid">
        <div class="detail-field"><label>Destination</label><p>${l.destination || '—'}</p></div>
        <div class="detail-field"><label>Budget</label><p style="color:var(--green);font-weight:700">${gbp(l.budget)}</p></div>
        <div class="detail-field"><label>Travel Date</label><p>${formatDate(l.travel_date)}</p></div>
        <div class="detail-field"><label>Return Date</label><p>${formatDate(l.return_date)}</p></div>
        <div class="detail-field"><label>Passengers</label><p>${l.num_passengers}</p></div>
        <div class="detail-field"><label>Priority</label><p><span class="badge ${l.priority}">${l.priority}</span></p></div>
      </div>
    </div>
    <div class="detail-section">
      <h4><i class="fas fa-info-circle"></i> Assignment</h4>
      <div class="detail-grid">
        <div class="detail-field"><label>Source</label><p>${l.source_name || '—'}</p></div>
        <div class="detail-field"><label>Agent</label><p>${l.agent_name || '—'}</p></div>
        <div class="detail-field"><label>Follow Up</label><p>${formatDate(l.follow_up_date)}</p></div>
        <div class="detail-field"><label>Created</label><p>${formatDate(l.created_at)}</p></div>
      </div>
    </div>
    ${l.notes ? `<div class="detail-section"><h4><i class="fas fa-sticky-note"></i> Notes</h4><p style="font-size:0.875rem;line-height:1.6">${l.notes}</p></div>` : ''}
    <div style="display:flex;gap:8px;margin-top:16px;flex-wrap:wrap">
      <button class="btn btn-primary btn-sm" onclick="editLead(${l.id});closeDrawer('leadDrawer')"><i class="fas fa-edit"></i> Edit</button>
      <button class="btn btn-secondary btn-sm" onclick="sendWhatsApp('${l.phone}','${l.name}','${l.destination}')"><i class="fab fa-whatsapp"></i> WhatsApp</button>
      <select class="form-control" style="width:auto;padding:6px 10px;font-size:0.78rem" onchange="updateLeadStatus(${l.id}, this.value)">
        ${['new','contacted','quoted','booked','closed','lost'].map(s=>`<option value="${s}" ${l.status===s?'selected':''}>${s}</option>`).join('')}
      </select>
    </div>`;
  openDrawer('leadDrawer');
}

async function updateLeadStatus(id, status) {
  const res = await api('leads','update_status','POST',{status},{id});
  if (res?.success) { toast('Status updated'); loadLeads(); }
}

function openLeadModal(leadId = null) {
  document.getElementById('leadModalTitle').textContent = leadId ? 'Edit Lead' : 'Add New Lead';
  document.getElementById('leadForm').reset();
  document.getElementById('leadId').value = leadId || '';

if (leadId) {
    const lead = CRM.data.leads.find(l=>l.id==leadId);
    if (lead) {
      ['name','phone','email','destination','travel_date','return_date','num_passengers','budget','source_id','status','assigned_to','priority','notes','follow_up_date']
        .forEach(k => { const el = document.getElementById('lead_'+k); if (el && lead[k]) el.value = lead[k]; });
    }
  }
  openModal('leadModal');
}

async function editLead(id) {
  const res = await api('leads','get','GET',null,{id});
  if (!res?.success) return;
  const l = res.data;
  document.getElementById('leadModalTitle').textContent = 'Edit Lead';
  document.getElementById('leadId').value = l.id;
  ['name','phone','email','destination','travel_date','return_date','num_passengers','budget','source_id','status','assigned_to','priority','notes','follow_up_date']
    .forEach(k => { const el = document.getElementById('lead_'+k); if (el) el.value = l[k] || ''; });
  openModal('leadModal');
}

async function saveLead() {
  const id = document.getElementById('leadId').value;
  const data = {};
  ['name','phone','email','destination','travel_date','return_date','num_passengers','budget','source_id','status','assigned_to','priority','notes','follow_up_date']
    .forEach(k => { data[k] = document.getElementById('lead_'+k)?.value || ''; });

if (!data.name) { toast('Name is required','error'); return; }

async function deleteLead(id, name) {
  confirm(`Delete lead "${name}"? This cannot be undone.`, async () => {
    const res = await api('leads','delete','DELETE',null,{id});
    if (res?.success) { toast('Lead deleted'); loadLeads(); loadDashboard(); }
    else toast(res?.error || 'Error', 'error');
  });
}

// Lead search/filter
function filterLeads() {
  const search = document.getElementById('leadSearch').value;
  const status = document.getElementById('leadStatusFilter').value;
  loadLeads({ search, status });
}

function toggleLeadsView(view) {
  leadsView = view;
  document.getElementById('tableViewBtn').classList.toggle('btn-primary', view==='table');
  document.getElementById('tableViewBtn').classList.toggle('btn-secondary', view!=='table');
  document.getElementById('kanbanViewBtn').classList.toggle('btn-primary', view==='kanban');
  document.getElementById('kanbanViewBtn').classList.toggle('btn-secondary', view!=='kanban');
  document.getElementById('leadsTable').style.display = view==='table'?'':'none';
  document.getElementById('kanbanBoard').style.display = view==='kanban'?'grid':'none';
  if (view==='kanban') renderKanban(CRM.data.leads);
}

// ══════════════════════════════════════════════════════════════
// CUSTOMERS
// ══════════════════════════════════════════════════════════════
async function loadCustomers() {
  const search = document.getElementById('custSearch')?.value || '';
  const res = await api('customers','list','GET',null,{search});
  if (!res?.success) return;
  CRM.data.customers = res.data;
  renderCustomers(res.data);
}

async function viewCustomer(id) {
  const res = await api('customers','get','GET',null,{id});
  if (!res?.success) return;
  const c = res.data;
  document.getElementById('drawerCustomerName').textContent = c.name;
  document.getElementById('drawerCustomerBody').innerHTML = `
    <div class="detail-section">
      <h4><i class="fas fa-user"></i> Personal Information</h4>
      <div class="detail-grid">
        <div class="detail-field"><label>Phone</label><p>${c.phone||'—'}</p></div>
        <div class="detail-field"><label>Email</label><p>${c.email||'—'}</p></div>
        <div class="detail-field"><label>Date of Birth</label><p>${formatDate(c.dob)}</p></div>
        <div class="detail-field"><label>Nationality</label><p>${c.nationality||'—'}</p></div>
        <div class="detail-field"><label>Passport No.</label><p>${c.passport_no||'—'}</p></div>
        <div class="detail-field"><label>Passport Expiry</label><p>${formatDate(c.passport_expiry)}</p></div>
      </div>
    </div>
    ${c.address ? `<div class="detail-section"><h4><i class="fas fa-home"></i> Address</h4><p style="font-size:0.875rem">${c.address}</p></div>` : ''}
    <div class="detail-section">
      <h4><i class="fas fa-suitcase"></i> Bookings (${c.bookings?.length||0})</h4>
      ${c.bookings?.length ? c.bookings.map(b=>`
        <div style="background:var(--bg);border-radius:var(--radius-sm);padding:12px;margin-bottom:8px">
          <div style="display:flex;justify-content:space-between;align-items:center">
            <strong>${b.booking_ref}</strong>
            <span class="badge ${b.status}">${b.status}</span>
          </div>
          <div style="font-size:0.8rem;color:var(--text-muted);margin-top:4px">${b.destination} &bull; ${formatDate(b.travel_date)}</div>
          <div style="font-size:0.85rem;margin-top:4px">Paid: <strong>${gbp(b.paid)}</strong> / Total: ${gbp(b.total_amount)}</div>
        </div>`).join('') : '<p style="color:var(--text-muted);font-size:0.875rem">No bookings</p>'}
    </div>
    <div style="display:flex;gap:8px;margin-top:8px">
      <button class="btn btn-primary btn-sm" onclick="editCustomer(${c.id});closeDrawer('customerDrawer')"><i class="fas fa-edit"></i> Edit</button>
      ${c.phone ? `<button class="btn btn-secondary btn-sm" onclick="sendWhatsApp('${c.phone}','${c.name}','')"><i class="fab fa-whatsapp"></i> WhatsApp</button>` : ''}
    </div>`;
  openDrawer('customerDrawer');
}

async function editCustomer(id) {
  const res = await api('customers','get','GET',null,{id});
  if (!res?.success) return;
  const c = res.data;
  document.getElementById('custModalTitle').textContent = 'Edit Customer';
  document.getElementById('custId').value = c.id;
  ['name','phone','email','dob','nationality','passport_no','passport_expiry','address','emergency_contact','notes']
    .forEach(k => { const el = document.getElementById('cust_'+k); if(el) el.value=c[k]||''; });
  openModal('customerModal');
}

function openCustomerModal(custId=null) {
  document.getElementById('custModalTitle').textContent = custId?'Edit Customer':'Add Customer';
  document.getElementById('custForm').reset();
  document.getElementById('custId').value = custId||'';
  openModal('customerModal');
}

async function saveCustomer() {
  const id = document.getElementById('custId').value;
  const data = {};
  ['name','phone','email','dob','nationality','passport_no','passport_expiry','address','emergency_contact','notes']
    .forEach(k => { data[k]=document.getElementById('cust_'+k)?.value||''; });
  if (!data.name) { toast('Name required','error'); return; }
  const action = id?'update':'create';
  const res = await api('customers', action, 'POST', data, id?{id}:{});
  if (res?.success) { toast(id?'Customer updated':'Customer created'); closeModal('customerModal'); loadCustomers(); }
  else toast(res?.error||'Error','error');
}

// ══════════════════════════════════════════════════════════════
// ITINERARIES
// ══════════════════════════════════════════════════════════════
let itineraryDays = [];
let editingItinId = null;

async function loadItineraries() {
  const res = await api('itineraries','list');
  if (!res?.success) return;
  CRM.data.itineraries = res.data;
  renderItineraries(res.data);
}

function openItineraryModal(id=null) {
  document.getElementById('itinForm').reset();
  document.getElementById('itinId').value = '';
  itineraryDays = [{title:'Day 1',activities:[]}];
  editingItinId = id;
  renderDays();
  openModal('itinModal');
}

async function editItinerary(id) {
  const res = await api('itineraries','get','GET',null,{id});
  if(!res?.success) return;
  const it = res.data;
  document.getElementById('itinId').value = it.id;
  ['title','destination','start_date','end_date','status'].forEach(k=>{
    const el = document.getElementById('itin_'+k); if(el) el.value=it[k]||'';
  });
  if(document.getElementById('itin_customer_id')) document.getElementById('itin_customer_id').value=it.customer_id||'';
  itineraryDays = it.days_data||[{title:'Day 1',activities:[]}];
  renderDays();
  openModal('itinModal');
}

function addDay() {
  itineraryDays.push({title:`Day ${itineraryDays.length+1}`, activities:[]});
  renderDays();
}

function removeDay(i) {
  itineraryDays.splice(i,1);
  itineraryDays.forEach((d,idx)=>d.title=`Day ${idx+1}`);
  renderDays();
}

function addActivity(dayIdx) {
  const actText = prompt('Activity (e.g. "Hotel: Hilton Dubai" or "Visit: Burj Khalifa")');
  if (!actText) return;
  itineraryDays[dayIdx].activities.push(actText);
  renderDays();
}

function removeActivity(dayIdx, actIdx) {
  itineraryDays[dayIdx].activities.splice(actIdx,1);
  renderDays();
}

async function saveItinerary() {
  const id = document.getElementById('itinId').value;
  const data = {days_data: itineraryDays};
  ['title','destination','start_date','end_date','status'].forEach(k=>{
    const el=document.getElementById('itin_'+k); if(el) data[k]=el.value;
  });
  const custEl = document.getElementById('itin_customer_id');
  if(custEl) data.customer_id = custEl.value;
  data.num_days = itineraryDays.length;
  if(!data.title) { toast('Title required','error'); return; }
  const action = id?'update':'create';
  const res = await api('itineraries', action, 'POST', data, id?{id}:{});
  if (res?.success) { toast(id?'Itinerary updated':'Itinerary created'); closeModal('itinModal'); loadItineraries(); }
  else toast(res?.error||'Error','error');
}

async function deleteItinerary(id) {
  confirm('Delete this itinerary?', async()=>{
    const res = await api('itineraries','delete','DELETE',null,{id});
    if(res?.success){toast('Deleted');loadItineraries();}
  });
}

// ══════════════════════════════════════════════════════════════
// QUOTATIONS
// ══════════════════════════════════════════════════════════════
let quoteItems = [];

async function loadQuotations() {
  const res = await api('quotations','list');
  if (!res?.success) return;
  CRM.data.quotations = res.data;
  renderQuotations(res.data);
}

function openQuoteModal(id=null) {
  document.getElementById('quoteForm').reset();
  document.getElementById('quoteId').value='';
  quoteItems = [{desc:'',qty:1,price:0}];
  renderQuoteItems();
  calcQuoteTotal();
  openModal('quoteModal');
}

async function editQuotation(id) {
  const res = await api('quotations','get','GET',null,{id});
  if(!res?.success) return;
  const q = res.data;
  document.getElementById('quoteId').value=q.id;
  ['markup_percent','tax_percent','discount','currency','valid_until','status','notes'].forEach(k=>{
    const el=document.getElementById('quote_'+k); if(el) el.value=q[k]||'';
  });
  if(document.getElementById('quote_lead_id')) document.getElementById('quote_lead_id').value=q.lead_id||'';
  quoteItems = q.items?.length ? q.items : [{desc:'',qty:1,price:0}];
  renderQuoteItems();
  calcQuoteTotal();
  openModal('quoteModal');
}

function addQuoteItem() {
  quoteItems.push({desc:'',qty:1,price:0});
  renderQuoteItems();
}

function removeQuoteItem(i) {
  quoteItems.splice(i,1);
  if(!quoteItems.length) quoteItems=[{desc:'',qty:1,price:0}];
  renderQuoteItems();
  calcQuoteTotal();
}

function calcQuoteTotal() {
  const subtotal = quoteItems.reduce((sum,it)=>sum+(parseFloat(it.qty||1)*parseFloat(it.price||0)),0);
  const markup = parseFloat(document.getElementById('quote_markup_percent')?.value||10);
  const markupAmt = subtotal*(markup/100);
  const tax = parseFloat(document.getElementById('quote_tax_percent')?.value||0);
  const taxAmt = (subtotal+markupAmt)*(tax/100);
  const discount = parseFloat(document.getElementById('quote_discount')?.value||0);
  const total = subtotal + markupAmt + taxAmt - discount;

document.getElementById('qSubtotal').textContent = gbp(subtotal);
  document.getElementById('qMarkup').textContent = gbp(markupAmt);
  document.getElementById('qTax').textContent = gbp(taxAmt);
  document.getElementById('qDiscount').textContent = gbp(discount);
  document.getElementById('qTotal').textContent = gbp(total);
}

async function saveQuotation() {
  const id = document.getElementById('quoteId').value;
  const subtotal = quoteItems.reduce((s,it)=>s+(parseFloat(it.qty||1)*parseFloat(it.price||0)),0);
  const data = {
    items: quoteItems,
    subtotal,
    markup_percent: parseFloat(document.getElementById('quote_markup_percent').value||10),
    tax_percent: parseFloat(document.getElementById('quote_tax_percent').value||0),
    discount: parseFloat(document.getElementById('quote_discount').value||0),
    currency: document.getElementById('quote_currency').value||'GBP',
    valid_until: document.getElementById('quote_valid_until').value,
    status: document.getElementById('quote_status').value||'draft',
    notes: document.getElementById('quote_notes').value,
    lead_id: document.getElementById('quote_lead_id')?.value||null,
  };
  const action = id?'update':'create';
  const res = await api('quotations',action,'POST',data,id?{id}:{});
  if (res?.success) {
    toast(id?`Quote updated`:`Quote ${res.ref} created`);
    closeModal('quoteModal');
    loadQuotations();
  } else toast(res?.error||'Error','error');
}

async function deleteQuotation(id) {
  confirm('Delete this quotation?', async()=>{
    const res = await api('quotations','delete','DELETE',null,{id});
    if(res?.success){toast('Deleted');loadQuotations();}
  });
}

// ══════════════════════════════════════════════════════════════
// BOOKINGS
// ══════════════════════════════════════════════════════════════
async function loadBookings() {
  const status = document.getElementById('bookingStatusFilter')?.value||'';
  const res = await api('bookings','list','GET',null,{status});
  if (!res?.success) return;
  CRM.data.bookings = res.data;
  renderBookings(res.data);
}

async function viewBooking(id) {
  const res = await api('bookings','get','GET',null,{id});
  if(!res?.success) return;
  const b = res.data;
  const pct = b.total_amount>0?Math.min(100,Math.round((b.paid_amount/b.total_amount)*100)):0;
  document.getElementById('drawerBookingRef').textContent = b.booking_ref;
  document.getElementById('drawerBookingStatus').innerHTML = `<span class="badge ${b.status}">${b.status}</span>`;
  document.getElementById('drawerBookingBody').innerHTML = `
    <div class="detail-section">
      <h4><i class="fas fa-suitcase"></i> Booking Details</h4>
      <div class="detail-grid">
        <div class="detail-field"><label>Customer</label><p>${b.customer_name||'—'}</p></div>
        <div class="detail-field"><label>Destination</label><p>${b.destination||'—'}</p></div>
        <div class="detail-field"><label>Travel Date</label><p>${formatDate(b.travel_date)}</p></div>
        <div class="detail-field"><label>Return Date</label><p>${formatDate(b.return_date)}</p></div>
        <div class="detail-field"><label>Passengers</label><p>${b.num_passengers}</p></div>
        <div class="detail-field"><label>Ref No.</label><p style="color:var(--green);font-weight:700">${b.booking_ref}</p></div>
      </div>
    </div>
    <div class="detail-section">
      <h4><i class="fas fa-pound-sign"></i> Payment Summary</h4>
      <div style="background:var(--bg);border-radius:var(--radius-sm);padding:14px">
        <div class="quote-row"><span>Total Amount</span><strong>${gbp(b.total_amount)}</strong></div>
        <div class="quote-row"><span>Paid</span><strong style="color:var(--green)">${gbp(b.paid_amount)}</strong></div>
        <div class="quote-row total"><span>Outstanding</span><strong style="color:${b.total_amount>b.paid_amount?'var(--red)':'var(--green)'}">${gbp(b.total_amount-b.paid_amount)}</strong></div>
      </div>
      <div class="progress-bar" style="margin-top:10px;height:8px"><div class="progress-fill" style="width:${pct}%"></div></div>
      <p style="font-size:0.75rem;color:var(--text-muted);margin-top:4px">${pct}% paid</p>
    </div>
    <div class="detail-section">
      <h4><i class="fas fa-history"></i> Payment History (${b.payments?.length||0})</h4>
      ${b.payments?.length ? b.payments.map(p=>`
        <div style="display:flex;justify-content:space-between;align-items:center;padding:10px;background:var(--bg);border-radius:var(--radius-sm);margin-bottom:6px">
          <div>
            <strong>${gbp(p.amount)}</strong>
            <span style="font-size:0.75rem;color:var(--text-muted);margin-left:8px">${p.method}</span>
          </div>
          <div style="text-align:right">
            <span class="badge ${p.status}" style="font-size:0.65rem">${p.status}</span>
            <div style="font-size:0.72rem;color:var(--text-muted)">${formatDate(p.paid_date)}</div>
          </div>
        </div>`).join('') : '<p style="color:var(--text-muted);font-size:0.875rem">No payments recorded</p>'}
    </div>
    <div style="display:flex;gap:8px;flex-wrap:wrap">
      <button class="btn btn-primary btn-sm" onclick="openPaymentModal(${b.id})"><i class="fas fa-plus"></i> Record Payment</button>
      <select class="form-control" style="width:auto;padding:6px 10px;font-size:0.78rem" onchange="updateBookingStatus(${b.id},this.value)">
        ${['pending','confirmed','cancelled','completed'].map(s=>`<option value="${s}" ${b.status===s?'selected':''}>${s}</option>`).join('')}
      </select>
    </div>`;
  openDrawer('bookingDrawer');
}

async function updateBookingStatus(id, status) {
  const res = await api('bookings','update_status','POST',{status},{id});
  if(res?.success){toast('Status updated');loadBookings();}
}

function openBookingModal() {
  document.getElementById('bookingForm').reset();
  document.getElementById('bookingId').value='';
  openModal('bookingModal');
}

async function saveBooking() {
  const id = document.getElementById('bookingId').value;
  const data = {};
  ['customer_id','destination','travel_date','return_date','num_passengers','total_amount','status','notes']
    .forEach(k=>{data[k]=document.getElementById('booking_'+k)?.value||'';});
  if(!data.customer_id){toast('Customer required','error');return;}
  const action = id?'update':'create';
  const res = await api('bookings',action,'POST',data,id?{id}:{});
  if(res?.success){toast(id?'Updated':`Booking ${res.ref} created`);closeModal('bookingModal');loadBookings();}
  else toast(res?.error||'Error','error');
}

async function deleteBooking(id) {
  confirm('Delete this booking?', async()=>{
    const res = await api('bookings','delete','DELETE',null,{id});
    if(res?.success){toast('Deleted');loadBookings();}
  });
}

// ══════════════════════════════════════════════════════════════
// PAYMENTS
// ══════════════════════════════════════════════════════════════
async function loadPayments() {
  const [statsRes, listRes] = await Promise.all([
    api('payments','stats'),
    api('payments','list')
  ]);
  if(statsRes?.success){
    const s = statsRes.data;
    document.getElementById('payTotalPaid').textContent = gbp(s.total_paid);
    document.getElementById('payThisMonth').textContent = gbp(s.this_month);
    document.getElementById('payOutstanding').textContent = gbp(s.outstanding);
  }
  if(listRes?.success){
    CRM.data.payments = listRes.data;
    renderPayments(listRes.data);
  }
}

function openPaymentModal(bookingId=null) {
  document.getElementById('paymentForm').reset();
  document.getElementById('paymentBookingId').value = bookingId||'';
  document.getElementById('payment_paid_date').value = new Date().toISOString().split('T')[0];
  openModal('paymentModal');
}

async function savePayment() {
  const data = {
    booking_id: document.getElementById('paymentBookingId').value,
    amount: document.getElementById('payment_amount').value,
    method: document.getElementById('payment_method').value,
    transaction_ref: document.getElementById('payment_ref').value,
    paid_date: document.getElementById('payment_paid_date').value,
    notes: document.getElementById('payment_notes').value,
  };
  if(!data.booking_id||!data.amount){toast('Booking and amount required','error');return;}
  const res = await api('payments','create','POST',data);
  if(res?.success){toast('Payment recorded!');closeModal('paymentModal');closeDrawer('bookingDrawer');loadPayments();loadBookings();}
  else toast(res?.error||'Error','error');
}

// ══════════════════════════════════════════════════════════════
// WHATSAPP
// ══════════════════════════════════════════════════════════════
async function loadWhatsApp() {
  const res = await api('whatsapp','list');
  if(!res?.success) return;
  CRM.data.whatsapp = res.data;
  renderWhatsApp(res.data);
}

function copyTemplate(id) {
  const t = CRM.data.whatsapp.find(t=>t.id==id);
  if(!t) return;
  navigator.clipboard.writeText(t.message).then(()=>toast('Template copied to clipboard!'));
}

function openTemplateModal(id=null) {
  document.getElementById('templateForm').reset();
  document.getElementById('templateId').value='';
  openModal('templateModal');
}

async function editTemplate(id) {
  const t = CRM.data.whatsapp.find(t=>t.id==id);
  if(!t) return;
  document.getElementById('templateId').value=t.id;
  document.getElementById('tmpl_name').value=t.name;
  document.getElementById('tmpl_category').value=t.category;
  document.getElementById('tmpl_message').value=t.message;
  openModal('templateModal');
}

async function saveTemplate() {
  const id = document.getElementById('templateId').value;
  const msg = document.getElementById('tmpl_message').value;
  const vars = [...msg.matchAll(/\{(\w+)\}/g)].map(m=>m[1]);
  const data = {
    name: document.getElementById('tmpl_name').value,
    category: document.getElementById('tmpl_category').value,
    message: msg,
    variables: vars,
  };
  if(!data.name||!data.message){toast('Name and message required','error');return;}
  const action = id?'update':'create';
  const res = await api('whatsapp',action,'POST',data,id?{id}:{});
  if(res?.success){toast(id?'Updated':'Template created');closeModal('templateModal');loadWhatsApp();}
  else toast(res?.error||'Error','error');
}

async function deleteTemplate(id) {
  confirm('Delete this template?', async()=>{
    const res = await api('whatsapp','delete','DELETE',null,{id});
    if(res?.success){toast('Deleted');loadWhatsApp();}
  });
}

// ══════════════════════════════════════════════════════════════
// REPORTS
// ══════════════════════════════════════════════════════════════
async function loadReports() {
  const [sources, agents, destinations, revenue] = await Promise.all([
    api('reports','lead_sources'),
    api('reports','agent_performance'),
    api('reports','top_destinations'),
    api('reports','monthly_revenue'),
  ]);
  if(sources?.success) renderSourceReport(sources.data);
  if(agents?.success) renderAgentReport(agents.data);
  if(destinations?.success) renderDestinations(destinations.data);
  if(revenue?.success) renderReportRevenue(revenue.data);
}

function renderSourceReport(data) {
  const total = data.reduce((s,d)=>s+parseInt(d.count),0)||1;
  document.getElementById('sourceReport').innerHTML = data.map(s=>`
    <li class="source-item">
      <span class="source-dot" style="background:${s.color}"></span>
      <span class="source-name">${s.name}</span>
      <span class="source-count">${s.count}</span>
      <span class="source-pct">${Math.round(s.count/total*100)}%</span>
    </li>`).join('');
}

// ══════════════════════════════════════════════════════════════
// SETTINGS
// ══════════════════════════════════════════════════════════════
async function loadSettings() {
  const [settings, users] = await Promise.all([
    api('settings','get_settings'),
    api('settings','list_users')
  ]);
  if(settings?.success){
    const s = settings.data;
    ['agency_name','agency_phone','agency_email','agency_address','agency_website','default_currency','default_markup']
      .forEach(k=>{ const el=document.getElementById('setting_'+k); if(el) el.value=s[k]||''; });
  }
  if(users?.success) renderUsersTable(users.data);
}

async function saveAgencySettings() {
  const data = {};
  ['agency_name','agency_phone','agency_email','agency_address','agency_website','default_currency','default_markup']
    .forEach(k=>{ const el=document.getElementById('setting_'+k); if(el) data[k]=el.value; });
  const res = await api('settings','update_settings','POST',data);
  if(res?.success) toast('Settings saved!');
  else toast(res?.error||'Error','error');
}

function openUserModal(id=null) {
  document.getElementById('userForm').reset();
  document.getElementById('userId').value='';
  document.getElementById('userModalTitle').textContent=id?'Edit User':'Add User';
  const passGroup = document.getElementById('passwordGroup');
  if(passGroup) passGroup.style.display = id?'none':'block';
  openModal('userModal');
}

async function editUser(id) {
  const res = await api('settings','list_users');
  if(!res?.success) return;
  const u = res.data.find(u=>u.id==id);
  if(!u) return;
  document.getElementById('userId').value=u.id;
  document.getElementById('userModalTitle').textContent='Edit User';
  document.getElementById('user_name').value=u.name;
  document.getElementById('user_email').value=u.email;
  document.getElementById('user_role').value=u.role;
  document.getElementById('user_phone').value=u.phone||'';
  document.getElementById('user_is_active').value=u.is_active;
  const pg=document.getElementById('passwordGroup'); if(pg) pg.style.display='none';
  openModal('userModal');
}

async function saveUser() {
  const id=document.getElementById('userId').value;
  const data={
    name:document.getElementById('user_name').value,
    email:document.getElementById('user_email').value,
    role:document.getElementById('user_role').value,
    phone:document.getElementById('user_phone').value,
    is_active:document.getElementById('user_is_active')?.value||1,
  };
  if(!id){
    data.password=document.getElementById('user_password')?.value||'';
    if(!data.password||data.password.length<6){toast('Password must be at least 6 characters','error');return;}
  }
  if(!data.name||!data.email){toast('Name and email required','error');return;}
  const action=id?'update_user':'create_user';
  const res=await api('settings',action,'POST',data,id?{id}:{});
  if(res?.success){toast(id?'User updated':'User created');closeModal('userModal');loadSettings();}
  else toast(res?.error||'Error','error');
}

async function deleteUser(id,name) {
  confirm(`Delete user "${name}"?`, async()=>{
    const res=await api('settings','delete_user','DELETE',null,{id});
    if(res?.success){toast('User deleted');loadSettings();}
    else toast(res?.error||'Error','error');
  });
}

// ── CHANGE PASSWORD ──
async function changePassword() {
  const current=document.getElementById('cp_current').value;
  const newp=document.getElementById('cp_new').value;
  const conf=document.getElementById('cp_confirm').value;
  if(newp!==conf){toast('Passwords do not match','error');return;}
  if(newp.length<6){toast('Password must be at least 6 characters','error');return;}
  const res=await api('auth','change_password','POST',{current_password:current,new_password:newp});
  if(res?.success){toast('Password changed!');document.getElementById('changePasswordForm').reset();}
  else toast(res?.error||'Error','error');
}

// ── LOGOUT ──
async function logout() {
  await api('auth','logout');
  window.location.href='index.php';
}

// ── POPULATE DROPDOWNS ──
async function populateDropdowns() {
  const [sourcesRes, usersRes, customersRes, leadsRes] = await Promise.all([
    api('leads','sources'),
    api('settings','list_users'),
    api('customers','list'),
    api('leads','list'),
  ]);

// Lead sources
  if(sourcesRes?.success) {
    const opts = sourcesRes.data.map(s=>`<option value="${s.id}">${s.name}</option>`).join('');
    ['lead_source_id'].forEach(id=>{const el=document.getElementById(id);if(el)el.innerHTML='<option value="">Select source</option>'+opts;});
  }

// Users/agents
  if(usersRes?.success) {
    const opts = usersRes.data.map(u=>`<option value="${u.id}">${u.name}</option>`).join('');
    ['lead_assigned_to'].forEach(id=>{const el=document.getElementById(id);if(el)el.innerHTML='<option value="">Unassigned</option>'+opts;});
  }

// Customers
  if(customersRes?.success) {
    const opts = customersRes.data.map(c=>`<option value="${c.id}">${c.name}</option>`).join('');
    ['itin_customer_id','booking_customer_id'].forEach(id=>{const el=document.getElementById(id);if(el)el.innerHTML='<option value="">Select customer</option>'+opts;});
  }

// Leads
  if(leadsRes?.success) {
    const opts = leadsRes.data.map(l=>`<option value="${l.id}">${l.name} - ${l.destination||'?'}</option>`).join('');
    ['quote_lead_id'].forEach(id=>{const el=document.getElementById(id);if(el)el.innerHTML='<option value="">Select lead</option>'+opts;});
  }
}

// ── INIT ──
document.addEventListener('DOMContentLoaded', async () => {
  await populateDropdowns();
  navigate('dashboard');

// Global search
  document.getElementById('globalSearch')?.addEventListener('input', (e) => {
    const q = e.target.value;
    if(CRM.currentView==='leads'&&q) filterLeads();
  });

// Close drawer overlay
  document.getElementById('drawerOverlay')?.addEventListener('click', ()=>{
    document.querySelectorAll('.detail-drawer').forEach(d=>d.classList.remove('open'));
    document.getElementById('drawerOverlay').classList.remove('open');
  });
});

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: crm.js

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation