<?php
require '../db.php';

// Ambil daftar shuttle untuk dropdown filter
$shuttles = $pdo->query("SELECT shuttle_id, route_name FROM shuttles ORDER BY shuttle_id")->fetchAll(PDO::FETCH_ASSOC);
$defStart = date('Y-m-d', strtotime('-7 days'));
$defEnd   = date('Y-m-d');
?>
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Shuttle Dashboard</title>

  <!-- Tailwind (CDN) -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    /* Pastikan script ini didefinisikan SETELAH cdn.tailwindcss.com agar tidak error "tailwind is not defined" */
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: { inter: ['Inter','ui-sans-serif','system-ui','sans-serif'] },
          colors: {
            brand: {50:'#eef2ff',100:'#dbe4ff',300:'#93abff',600:'#264fd6',700:'#1836bc'},
            emerald:{500:'#10b981'}, amber:{500:'#f59e0b'}, sky:{500:'#0ea5e9'}, rose:{500:'#ef4444'}
          },
          boxShadow: { card: '0 10px 30px rgba(24,54,188,.09)' }
        }
      }
    }
  </script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,600,0,0" rel="stylesheet" />
  <style>.material-symbols-rounded{vertical-align:-4px}</style>

  <!-- ApexCharts -->
  <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<body class="font-inter bg-slate-50 text-slate-800">
  <div class="max-w-7xl mx-auto p-4 sm:p-6">

    <h2 class="text-xl sm:text-2xl font-bold tracking-tight mb-4 flex items-center gap-2">
      <span class="material-symbols-rounded text-brand-700">insights</span>
      📘 Shuttle Dashboard Lamipak
    </h2>

    <!-- Filter -->
    <section class="bg-white border border-slate-200 rounded-2xl shadow-card p-4 sm:p-5 mb-5">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
        <div>
          <label class="block text-sm font-semibold mb-1">Shuttle</label>
          <select id="filterShuttle" class="w-full rounded-xl border border-slate-300 bg-white px-3 py-2 outline-none focus:ring-2 focus:ring-brand-700">
            <option value="">Semua Shuttle</option>
            <?php foreach($shuttles as $s): ?>
              <option value="<?php echo htmlspecialchars($s['shuttle_id']); ?>">
                <?php echo htmlspecialchars($s['shuttle_id'].' - '.$s['route_name']); ?>
              </option>
            <?php endforeach; ?>
          </select>
        </div>
        <div>
          <label class="block text-sm font-semibold mb-1">Jenis Trip</label>
          <select id="filterType" class="w-full rounded-xl border border-slate-300 bg-white px-3 py-2 outline-none focus:ring-2 focus:ring-brand-700">
            <option value="">Semua</option>
            <option value="departure">Berangkat</option>
            <option value="return">Pulang</option>
          </select>
        </div>
        <div>
          <label class="block text-sm font-semibold mb-1">Rentang Tanggal</label>
          <div class="grid grid-cols-2 gap-2">
            <input type="date" id="filterStart" value="<?php echo htmlspecialchars($defStart, ENT_QUOTES); ?>" class="rounded-xl border border-slate-300 bg-white px-3 py-2 outline-none focus:ring-2 focus:ring-brand-700" />
            <input type="date" id="filterEnd"   value="<?php echo htmlspecialchars($defEnd,   ENT_QUOTES); ?>" class="rounded-xl border border-slate-300 bg-white px-3 py-2 outline-none focus:ring-2 focus:ring-brand-700" />
          </div>
        </div>
        <div class="flex items-end gap-2">
          <button id="applyBtn" class="flex-1 rounded-xl bg-brand-700 text-white font-semibold px-4 py-2 shadow hover:bg-brand-700/90">Terapkan Filter</button>
          <button id="resetBtn" class="rounded-xl border border-slate-300 px-4 py-2">Reset</button>
        </div>
      </div>
      <div class="mt-3 text-sm text-slate-600" id="appliedFilterText"></div>
    </section>

    <!-- Summary Cards -->
    <section class="grid sm:grid-cols-2 lg:grid-cols-4 gap-3 mb-5" id="summaryCards">
      <!-- dirender via JS -->
    </section>

    <!-- Charts -->
    <section class="grid lg:grid-cols-2 gap-4 mb-6">
      <div class="bg-white border border-slate-200 rounded-2xl shadow-card p-4">
        <div class="flex items-center justify-between mb-2">
          <h5 class="font-semibold">Occupancy per Trip</h5>
        </div>
        <div id="chartOccupancy" class="min-h-[300px]"></div>
      </div>
      <div class="bg-white border border-slate-200 rounded-2xl shadow-card p-4">
        <div class="flex items-center justify-between mb-2">
          <h5 class="font-semibold">Daily Shuttle Usage</h5>
        </div>
        <div id="chartDaily" class="min-h-[300px]"></div>
      </div>
      <div class="bg-white border border-slate-200 rounded-2xl shadow-card p-4">
        <div class="flex items-center justify-between mb-2">
          <h5 class="font-semibold">Distribusi Shuttle</h5>
        </div>
        <div id="chartShuttleDist" class="min-h-[300px]"></div>
      </div>
      <div class="bg-white border border-slate-200 rounded-2xl shadow-card p-4">
        <div class="flex items-center justify-between mb-2">
          <h5 class="font-semibold">Peak Time / Shift Analysis</h5>
        </div>
        <div id="chartPeakTime" class="min-h-[300px]"></div>
      </div>
    </section>

    <!-- Tabel Laporan (Tailwind, vanilla) -->
    <section class="bg-white border border-slate-200 rounded-2xl shadow-card p-4">
      <div class="flex flex-wrap items-center justify-between gap-2">
        <h5 class="font-semibold">Laporan Kehadiran (Filtered)</h5>
        <div class="flex items-center gap-2 text-sm">
          <input id="attSearch" type="text" placeholder="Cari..." class="rounded-xl border border-slate-300 px-3 py-2" />
          <label class="text-sm">Rows</label>
          <select id="attPageSize" class="rounded-xl border border-slate-300 px-2 py-2">
            <option>10</option><option selected>25</option><option>50</option><option>100</option>
          </select>
          <button id="btnCsv" class="rounded-xl border border-slate-300 px-3 py-2">Download CSV</button>
        </div>
      </div>
      <div class="mt-3 overflow-x-auto">
        <table class="min-w-full text-sm" id="tblAttendance">
          <thead class="bg-slate-100">
            <tr>
              <th class="text-left px-3 py-2">No</th>
              <th class="text-left px-3 py-2">ID Karyawan</th>
              <th class="text-left px-3 py-2">Nama</th>
              <th class="text-left px-3 py-2">Telepon</th>
              <th class="text-left px-3 py-2">Shuttle</th>
              <th class="text-left px-3 py-2">Jenis Trip</th>
              <th class="text-left px-3 py-2">Shift</th>
              <th class="text-left px-3 py-2">Jam Naik</th>
              <th class="text-left px-3 py-2">Trip ID</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-slate-200"></tbody>
        </table>
      </div>
      <div class="mt-3 flex items-center justify-between text-sm">
        <div id="attInfo" class="text-slate-600">—</div>
        <div class="flex items-center gap-2">
          <button id="attPrev" class="rounded-lg border border-slate-300 px-3 py-1.5">Prev</button>
          <span id="attPage" class="min-w-[70px] text-center"></span>
          <button id="attNext" class="rounded-lg border border-slate-300 px-3 py-1.5">Next</button>
        </div>
      </div>
    </section>

  </div>

<script>
/* ====== Apex base config ====== */
function apexBase(){
  return {
    chart: { toolbar: { show:false }, foreColor: '#334155' },
    dataLabels: { enabled:false },
    grid: { borderColor:'#e2e8f0' },
    tooltip: { theme:'light' },
    legend: { show:true }
  };
}

let chartOccupancy, chartDaily, chartShuttleDist, chartPeakTime;
let attendanceAll = [], attendanceFiltered = [], attPage = 1;

/* ====== Init charts ====== */
function initCharts(){
  chartOccupancy = new ApexCharts(document.querySelector("#chartOccupancy"), {
    ...apexBase(),
    chart:{ type:'bar', height:300 },
    colors:['#1836bc'],
    plotOptions: { bar: { columnWidth:'55%', borderRadius: 6 } },
    series:[{ name:'Occupancy %', data:[] }],
    xaxis:{ categories:[] },
    yaxis:{ labels:{ formatter:(v)=> v+'%' } },
    fill:{ type:'gradient', gradient:{ shade:'light', type:'vertical', opacityFrom:.85, opacityTo:.6 } }
  });
  chartDaily = new ApexCharts(document.querySelector("#chartDaily"), {
    ...apexBase(),
    chart:{ type:'line', height:300 },
    colors:['#0ea5e9'],
    stroke:{ width:3, curve:'smooth' },
    series:[{ name:'Penumpang', data:[] }],
    xaxis:{ categories:[] },
    fill:{ type:'gradient', gradient:{ shadeIntensity:.3, opacityFrom:.6, opacityTo:.1, stops:[0,90,100] } }
  });
  chartShuttleDist = new ApexCharts(document.querySelector("#chartShuttleDist"), {
    ...apexBase(),
    chart:{ type:'donut', height:300 },
    colors:['#6c5ce7','#10b981','#f59e0b','#ef4444','#22d3ee','#a78bfa','#fb7185'],
    labels:[], series:[]
  });
  chartPeakTime = new ApexCharts(document.querySelector("#chartPeakTime"), {
    ...apexBase(),
    chart:{ type:'bar', stacked:true, height:300 },
    colors:['#fb7185','#10b981','#0ea5e9','#f59e0b','#6366f1','#22d3ee'],
    plotOptions:{ bar:{ borderRadius:6 }},
    series:[], xaxis:{ categories:[] }
  });

  chartOccupancy.render();
  chartDaily.render();
  chartShuttleDist.render();
  chartPeakTime.render();
}

/* ====== Filters ====== */
function currentFilters(){
  return {
    shuttle_id: document.getElementById('filterShuttle').value || '',
    type: document.getElementById('filterType').value || '',
    start_date: document.getElementById('filterStart').value,
    end_date: document.getElementById('filterEnd').value
  };
}
function updateFilterCaption(){
  const f = currentFilters();
  const s = f.shuttle_id ? `Shuttle ${f.shuttle_id}` : 'Semua Shuttle';
  const t = f.type ? (f.type==='departure'?'Berangkat':'Pulang') : 'Semua Trip';
  document.getElementById('appliedFilterText').textContent = `${s} • ${t} • ${f.start_date} s/d ${f.end_date}`;
}

/* ====== Dashboard loader ====== */
async function loadDashboard(){
  const f = currentFilters();
  updateFilterCaption();
  const qs = new URLSearchParams(f).toString();

  // Summary + charts
  try{
    const res = await fetch('get_dashboard_data.php?' + qs);
    const data = await res.json();

    // Charts
    if (data.occupancy){
      chartOccupancy.updateOptions({ xaxis:{ categories:data.occupancy.labels || [] } });
      chartOccupancy.updateSeries([{ name:'Occupancy %', data:data.occupancy.values || [] }]);
    }
    if (data.daily){
      chartDaily.updateOptions({ xaxis:{ categories:data.daily.labels || [] } });
      chartDaily.updateSeries([{ name:'Penumpang', data:data.daily.values || [] }]);
    }
    if (data.shuttleDist){
      chartShuttleDist.updateOptions({ labels:data.shuttleDist.labels || [] });
      chartShuttleDist.updateSeries(data.shuttleDist.values || []);
    }
    if (data.peak){
      chartPeakTime.updateOptions({ xaxis:{ categories:data.peak.labels || [] } });
      chartPeakTime.updateSeries(data.peak.series || []);
    }

    // Summary (hitung di frontend dari data; tidak pakai summary_html bootstrap)
    renderSummaryFromData(data);
  }catch(e){
    console.error(e);
  }

  // Attendance table
  try{
    const res2 = await fetch('get_attendance_table.php?' + qs);
    const att = await res2.json();
    attendanceAll = (att && att.data) ? att.data : [];
    attPage = 1; renderAttendance();
  }catch(e2){
    console.error(e2);
  }
}

/* ====== Summary (frontend) ====== */
function renderSummaryFromData(d){
  const host = document.getElementById('summaryCards');
  const occ = (d.occupancy && Array.isArray(d.occupancy.values))? d.occupancy.values : [];
  const dailyVals = (d.daily && Array.isArray(d.daily.values))? d.daily.values : [];
  const dist = (d.shuttleDist && Array.isArray(d.shuttleDist.labels))? d.shuttleDist : {labels:[],values:[]};

  const totalTrips = (d.occupancy && Array.isArray(d.occupancy.labels)) ? d.occupancy.labels.length : 0;
  const totalPassengers = dailyVals.reduce((a,b)=> a + (parseInt(b,10)||0), 0);
  const avgOcc = occ.length ? Math.round(occ.reduce((a,b)=>a+b,0)/occ.length) : 0;

  let topShuttle = '—';
  if (dist.labels.length && Array.isArray(dist.values) && dist.values.length === dist.labels.length){
    const idx = dist.values.indexOf(Math.max.apply(null, dist.values));
    if (idx >= 0) topShuttle = dist.labels[idx] + ' (' + dist.values[idx] + ')';
  }

  const items = [
    { label:'Total Penumpang', value: totalPassengers, icon:'groups', cls:'text-emerald-600 bg-emerald-50' },
    { label:'Total Trips', value: totalTrips, icon:'route', cls:'text-sky-600 bg-sky-50' },
    { label:'Rata-rata Occupancy', value: (avgOcc?avgOcc+'%':'—'), icon:'percent', cls:'text-amber-600 bg-amber-50' },
    { label:'Shuttle Teratas', value: topShuttle, icon:'directions_bus', cls:'text-brand-700 bg-brand-50' },
  ];
  host.innerHTML = items.map(it=>`
    <div class="rounded-2xl border border-slate-200 bg-white shadow-card p-4">
      <div class="flex items-center justify-between">
        <div>
          <div class="text-xs text-slate-500">${it.label}</div>
          <div class="text-2xl font-bold">${it.value}</div>
        </div>
        <span class="material-symbols-rounded ${it.cls} rounded-xl p-2 ring-1 ring-slate-200">${it.icon}</span>
      </div>
    </div>
  `).join('');
}

/* ====== Attendance Table (client-side) ====== */
function filteredRows(){
  const q = document.getElementById('attSearch').value.trim().toLowerCase();
  if (!q) return [...attendanceAll];
  return attendanceAll.filter(r=>[
    r.employee_id, r.name, r.phone, r.shuttle_id, r.checkin_type_label, r.shift, r.checkin_time_fmt, r.trip_id
  ].some(v=> String(v||'').toLowerCase().includes(q)));
}

function renderAttendance(){
  attendanceFiltered = filteredRows();
  const pageSize = parseInt(document.getElementById('attPageSize').value, 10) || 25;
  const total = attendanceFiltered.length;
  const pages = Math.max(1, Math.ceil(total / pageSize));
  attPage = Math.min(Math.max(1, attPage), pages);
  const start = (attPage-1) * pageSize;
  const slice = attendanceFiltered.slice(start, start + pageSize);

  const tbody = document.querySelector('#tblAttendance tbody');
  tbody.innerHTML = slice.map((r,i)=>`
    <tr>
      <td class="px-3 py-2">${start+i+1}</td>
      <td class="px-3 py-2">${r.employee_id||''}</td>
      <td class="px-3 py-2">${r.name||''}</td>
      <td class="px-3 py-2">${r.phone||''}</td>
      <td class="px-3 py-2">${r.shuttle_id||''}</td>
      <td class="px-3 py-2">${r.checkin_type_label||''}</td>
      <td class="px-3 py-2">${r.shift||''}</td>
      <td class="px-3 py-2 whitespace-nowrap">${r.checkin_time_fmt||''}</td>
      <td class="px-3 py-2">${r.trip_id||''}</td>
    </tr>
  `).join('');

  document.getElementById('attInfo').textContent = `${total} row(s) • Page ${attPage} / ${pages}`;
  document.getElementById('attPage').textContent = `${attPage} / ${pages}`;
}

function toCSV(rows){
  const headers = ['No','Employee ID','Name','Phone','Shuttle','Trip Type','Shift','Check-in Time','Trip ID'];
  const lines = [headers.join(',')];
  rows.forEach((r,idx)=>{
    const arr = [idx+1, r.employee_id, r.name, r.phone, r.shuttle_id, r.checkin_type_label, r.shift, r.checkin_time_fmt, r.trip_id]
      .map(v=> '"'+String(v??'').replace(/"/g,'""')+'"');
    lines.push(arr.join(','));
  });
  return lines.join('\n');
}
function downloadCSV(){
  const csv = toCSV(attendanceFiltered);
  const blob = new Blob([csv], {type:'text/csv;charset=utf-8;'});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url; a.download = 'laporan_kehadiran.csv'; a.click();
  URL.revokeObjectURL(url);
}

/* ====== Events ====== */
document.getElementById('applyBtn').addEventListener('click', loadDashboard);
document.getElementById('resetBtn').addEventListener('click', ()=>{
  document.getElementById('filterShuttle').value = '';
  document.getElementById('filterType').value = '';
  // biarkan value default start/end dari server (sudah ada di attribute value)
  loadDashboard();
});
document.getElementById('attSearch').addEventListener('input', ()=>{ attPage=1; renderAttendance(); });
document.getElementById('attPageSize').addEventListener('change', ()=>{ attPage=1; renderAttendance(); });
document.getElementById('attPrev').addEventListener('click', ()=>{ attPage=Math.max(1,attPage-1); renderAttendance(); });
document.getElementById('attNext').addEventListener('click', ()=>{ attPage=attPage+1; renderAttendance(); });
document.getElementById('btnCsv').addEventListener('click', downloadCSV);

/* ====== Init ====== */
initCharts();
loadDashboard();
</script>
</body>
</html>