.elementor-6002 .elementor-element.elementor-element-26f9849{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS */<script src="https://unpkg.com/@supabase/supabase-js@2"></script>

<style>
  body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background-color: #f4f7f6; margin: 0; padding: 20px; }
  .admin-app { max-width: 1200px; margin: 0 auto; background: #fff; padding: 30px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
  
  .header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #eee; padding-bottom: 15px; margin-bottom: 20px; }
  .header h3 { color: #064fa3; margin: 0; font-size: 24px; }
  .btn-back { background: #6c757d; color: #ffffff !important; text-decoration: none; padding: 10px 15px; border-radius: 6px; font-size: 13px; font-weight: bold; }
  
  /* Top Controls */
  .controls-bar { display: flex; justify-content: space-between; align-items: center; background: #f8f9fa; padding: 15px 20px; border-radius: 10px; margin-bottom: 25px; border: 1px solid #e1e8f0; }
  
  .tab-group button { background: #e9ecef; border: none; padding: 10px 20px; border-radius: 6px; font-weight: bold; color: #555; cursor: pointer; margin-right: 10px; transition: 0.2s; }
  .tab-group button.active { background: #064fa3; color: white; }
  
  .btn-export { background: #28a745; color: white; border: none; padding: 10px 20px; border-radius: 6px; font-weight: bold; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: 0.2s; }
  .btn-export:hover { background: #218838; }

  /* Data Table */
  .table-container { overflow-x: auto; }
  .data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .data-table th { background: #f8f9fa; padding: 12px; text-align: left; border-bottom: 2px solid #064fa3; color: #064fa3; text-transform: uppercase; white-space: nowrap; }
  .data-table td { padding: 12px; border-bottom: 1px solid #eee; }
  .data-table tr:hover { background: #fcfcfc; }
  
  .badge { padding: 4px 8px; border-radius: 4px; font-weight: bold; font-size: 11px; }
  .bg-blue { background: #e7f0fd; color: #064fa3; border: 1px solid #b8daff; }
  .bg-green { background: #e6fcf5; color: #099268; border: 1px solid #a3ebd5; }
  .bg-gray { background: #f1f3f5; color: #495057; border: 1px solid #dee2e6; }

  .d-none { display: none !important; }
  #loading-screen { max-width: 600px; margin: 100px auto; background: #fff; padding: 40px; border-radius: 15px; text-align: center; }
</style>

<div id="loading-screen">
  <h3 style="color:#064fa3;">📊 Checking Security Credentials...</h3>
  <p id="loading-text" style="color:#666; font-weight:bold;">Loading Database Ledgers...</p>
</div>

<div class="admin-app" id="secure-app-content" style="display:none;">
  <div class="header">
    <h3>📊 Reports & Export</h3>
    <a href="/staffportal/" class="btn-back">← กลับสู่หน้า Dashboard</a>
  </div>

  <div class="controls-bar">
    <div class="tab-group">
      <button id="tab-txn" class="active" onclick="switchTab('txn')">💰 Transaction Ledger</button>
      <button id="tab-log" onclick="switchTab('log')">🛡️ System Activity Log</button>
    </div>
    
    <button class="btn-export" onclick="exportToCSV()">📥 Export to CSV</button>
  </div>

  <div id="view-txn" class="table-container">
    <table class="data-table">
      <thead>
        <tr>
          <th>Date / Time</th>
          <th>Processed By</th>
          <th>Customer Email</th>
          <th>Serial Number</th>
          <th>Transaction Type</th>
          <th>Platform Action</th>
          <th>SIM Action</th>
        </tr>
      </thead>
      <tbody id="txn-list-body">
        <tr><td colspan="7" style="text-align:center; color:#999; padding:30px;">Loading transactions...</td></tr>
      </tbody>
    </table>
  </div>

  <div id="view-log" class="table-container d-none">
    <table class="data-table">
      <thead>
        <tr>
          <th>Date / Time</th>
          <th>Performed By (Staff/System)</th>
          <th>Action Type</th>
          <th>Target SN</th>
          <th>System Details / Changes</th>
        </tr>
      </thead>
      <tbody id="log-list-body">
        <tr><td colspan="5" style="text-align:center; color:#999; padding:30px;">Loading activity logs...</td></tr>
      </tbody>
    </table>
  </div>
</div>

<script>
  const SUPABASE_URL = 'https://bqwalpyeaecphpeksppl.supabase.co';
  const SUPABASE_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJxd2FscHllYWVjcGhwZWtzcHBsIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzA5NzM1NTAsImV4cCI6MjA4NjU0OTU1MH0.3l6RLs7E3bzbgDVLViY73LPdgUb27dN6WGPfEleShSs';
  
  let client = null;
  let currentTab = 'txn';
  let txnsData = [];
  let logsData = [];

  // --- 1. SECURITY & INITIALIZATION ---
  let loadInterval = setInterval(async () => {
    if (typeof window.supabase !== 'undefined') {
      clearInterval(loadInterval);
      client = window.supabase.createClient(SUPABASE_URL, SUPABASE_KEY);
      
      const { data: { session } } = await client.auth.getSession();
      
      if (!session) {
        window.location.href = "/staffportal/"; 
      } else {
        const { data: adminUser } = await client.from('admin_list').select('role').eq('email', session.user.email).single();
        
        // ALLOW SUPERADMIN, SUPERVISOR, AND OBSERVER
        if (adminUser && ['superadmin', 'supervisor', 'observer'].includes(adminUser.role.toLowerCase())) {
          document.getElementById('loading-screen').style.display = 'none';
          document.getElementById('secure-app-content').style.display = 'block';
          
          fetchTransactions();
          fetchActivityLogs();
        } else {
          document.getElementById('loading-text').innerText = "Access Denied: You do not have permission to view reports.";
          document.getElementById('loading-text').style.color = "red";
          setTimeout(() => { window.location.href = "/staffportal/"; }, 2000);
        }
      }
    }
  }, 50);

  // --- 2. TAB SWITCHING LOGIC ---
  function switchTab(tab) {
    currentTab = tab;
    document.getElementById('tab-txn').classList.remove('active');
    document.getElementById('tab-log').classList.remove('active');
    document.getElementById('view-txn').classList.add('d-none');
    document.getElementById('view-log').classList.add('d-none');

    document.getElementById(`tab-${tab}`).classList.add('active');
    document.getElementById(`view-${tab}`).classList.remove('d-none');
  }

  // --- 3. FETCH TRANSACTIONS ---
  async function fetchTransactions() {
    try {
      const { data, error } = await client.from('transactions').select('*').order('created_at', { ascending: false }).limit(500);
      if (error) throw error;
      
      txnsData = data || [];
      const body = document.getElementById('txn-list-body');
      body.innerHTML = '';

      if (txnsData.length === 0) {
        body.innerHTML = '<tr><td colspan="7" style="text-align:center;">No transactions found.</td></tr>';
        return;
      }

      txnsData.forEach(req => {
        let dateObj = new Date(req.created_at);
        let dateStr = dateObj.toLocaleDateString('en-GB') + " " + dateObj.toLocaleTimeString('en-GB', {hour: '2-digit', minute:'2-digit'});

        body.innerHTML += `
          <tr>
            <td>${dateStr}</td>
            <td><strong>${req.processed_by || '-'}</strong></td>
            <td>${req.customer_mail || '-'}</td>
            <td><strong style="color:#064fa3;">${req.asset_serial || '-'}</strong></td>
            <td><span class="badge bg-blue">${req.transaction_type || '-'}</span></td>
            <td><span class="badge bg-green">${req.platform_action || '-'}</span></td>
            <td><span class="badge bg-gray">${req.sim_action || '-'}</span></td>
          </tr>
        `;
      });
    } catch (err) {
      document.getElementById('txn-list-body').innerHTML = `<tr><td colspan="7" style="color:red; text-align:center;">Error: ${err.message}</td></tr>`;
    }
  }

  // --- 4. FETCH ACTIVITY LOGS ---
  async function fetchActivityLogs() {
    try {
      const { data, error } = await client.from('activity_log').select('*').order('created_at', { ascending: false }).limit(500);
      if (error) throw error;
      
      logsData = data || [];
      const body = document.getElementById('log-list-body');
      body.innerHTML = '';

      if (logsData.length === 0) {
        body.innerHTML = '<tr><td colspan="5" style="text-align:center;">No activity logs found.</td></tr>';
        return;
      }

      logsData.forEach(log => {
        let dateObj = new Date(log.created_at);
        let dateStr = dateObj.toLocaleDateString('en-GB') + " " + dateObj.toLocaleTimeString('en-GB', {hour: '2-digit', minute:'2-digit'});

        body.innerHTML += `
          <tr>
            <td style="white-space:nowrap;">${dateStr}</td>
            <td><strong>${log.performed_by || 'System'}</strong></td>
            <td><span class="badge bg-gray">${log.action_type || '-'}</span></td>
            <td><strong style="color:#dc3545;">${log.asset_serial || '-'}</strong></td>
            <td style="font-size:12px; color:#555;">${log.details || '-'}</td>
          </tr>
        `;
      });
    } catch (err) {
      document.getElementById('log-list-body').innerHTML = `<tr><td colspan="5" style="color:red; text-align:center;">Error: ${err.message}</td></tr>`;
    }
  }

  // --- 5. EXPORT TO CSV LOGIC ---
  function exportToCSV() {
    let csvContent = "data:text/csv;charset=utf-8,\uFEFF"; // \uFEFF ensures UTF-8 Thai characters display correctly in Excel
    let filename = "";

    if (currentTab === 'txn') {
      if (txnsData.length === 0) return alert("No data to export.");
      filename = "Transaction_Ledger_Export.csv";
      csvContent += "Date,Processed By,Customer Email,Serial Number,Transaction Type,Platform Action,SIM Action\n";
      
      txnsData.forEach(req => {
        let row = [
          req.created_at,
          req.processed_by,
          req.customer_mail,
          req.asset_serial,
          req.transaction_type,
          req.platform_action,
          req.sim_action
        ].map(e => `"${(e || '').toString().replace(/"/g, '""')}"`).join(",");
        csvContent += row + "\n";
      });

    } else {
      if (logsData.length === 0) return alert("No data to export.");
      filename = "Activity_Log_Export.csv";
      csvContent += "Date,Performed By,Action Type,Target SN,Details\n";
      
      logsData.forEach(log => {
        let row = [
          log.created_at,
          log.performed_by,
          log.action_type,
          log.asset_serial,
          log.details
        ].map(e => `"${(e || '').toString().replace(/"/g, '""')}"`).join(",");
        csvContent += row + "\n";
      });
    }

    // Trigger Download
    const encodedUri = encodeURI(csvContent);
    const link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", filename);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }
</script>/* End custom CSS */