@extends('layouts.app')
@section('title','Dashboard')
@section('page-title','Dashboard')
@section('breadcrumb','SpaceHR/ Overview')

@section('content')
<div class="page-body">

  <div class="page-header animate-entry">
    <div class="page-header-title">
      <h1>Welcome back, {{ explode(' ', auth()->user()->name)[0] }} 👋</h1>
      <p>{{ now()->format('l, F j, Y') }} — Here's your HR overview</p>
    </div>
    <button class="btn btn-primary" onclick="exportDashboard()"><i class="fas fa-download"></i> Export Report</button>
  </div>

  {{-- KPI Cards --}}
  <div class="stat-grid" id="kpi-grid">
    <div class="stat-card cyan animate-entry">
      <div class="stat-icon"><i class="fas fa-users"></i></div>
      <div class="stat-num" id="k-total">—</div>
      <div class="stat-label">Total Employees</div>
      <div class="stat-change up" id="k-active"></div>
    </div>
    <div class="stat-card teal animate-entry">
      <div class="stat-icon"><i class="fas fa-calendar-check"></i></div>
      <div class="stat-num" id="k-present">—</div>
      <div class="stat-label">Present Today</div>
      <div class="stat-change up" id="k-rate"></div>
    </div>
    <div class="stat-card amber animate-entry">
      <div class="stat-icon"><i class="fas fa-bullhorn"></i></div>
      <div class="stat-num" id="k-jobs">—</div>
      <div class="stat-label">Open Positions</div>
      <div class="stat-change down" id="k-apps"></div>
    </div>
    <div class="stat-card rose animate-entry">
      <div class="stat-icon"><i class="fas fa-file-invoice-dollar"></i></div>
      <div class="stat-num" id="k-payroll">—</div>
      <div class="stat-label">Monthly Payroll</div>
      <div class="stat-change up">Processed this month</div>
    </div>
  </div>

  <div class="grid-70-30">
    {{-- Weekly Chart --}}
    <div class="panel animate-entry">
      <div class="panel-header">
        <span class="panel-title"><i class="fas fa-chart-bar" style="color:var(--accent-cyan);margin-right:8px"></i>Weekly Attendance</span>
        <div style="display:flex;gap:16px">
          <span style="display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-secondary)"><span style="width:10px;height:10px;border-radius:2px;background:var(--accent-cyan);display:inline-block"></span>Present</span>
          <span style="display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-secondary)"><span style="width:10px;height:10px;border-radius:2px;background:var(--accent-rose);display:inline-block"></span>Absent</span>
          <span style="display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-secondary)"><span style="width:10px;height:10px;border-radius:2px;background:var(--accent-amber);display:inline-block"></span>Leave</span>
        </div>
      </div>
      <div class="panel-body"><div style="height:220px;position:relative"><canvas id="weeklyChart"></canvas></div></div>
    </div>

    <div style="display:flex;flex-direction:column;gap:16px">
      {{-- Leave Summary --}}
      <div class="panel animate-entry">
        <div class="panel-header"><span class="panel-title">Leave Summary</span></div>
        <div class="panel-body" style="padding:16px">
          <div class="chart-bar-wrap">
            <div class="chart-bar-row"><div class="chart-bar-label">Annual</div><div class="chart-bar-track"><div class="chart-bar-fill" style="width:72%;background:var(--accent-cyan)"></div></div><div class="chart-bar-val">72%</div></div>
            <div class="chart-bar-row"><div class="chart-bar-label">Sick</div><div class="chart-bar-track"><div class="chart-bar-fill" style="width:38%;background:var(--accent-rose)"></div></div><div class="chart-bar-val">38%</div></div>
            <div class="chart-bar-row"><div class="chart-bar-label">Casual</div><div class="chart-bar-track"><div class="chart-bar-fill" style="width:55%;background:var(--accent-amber)"></div></div><div class="chart-bar-val">55%</div></div>
            <div class="chart-bar-row"><div class="chart-bar-label">Maternity</div><div class="chart-bar-track"><div class="chart-bar-fill" style="width:18%;background:var(--accent-violet)"></div></div><div class="chart-bar-val">18%</div></div>
          </div>
        </div>
      </div>
      {{-- Pending Actions --}}
      <div class="panel animate-entry">
        <div class="panel-header"><span class="panel-title">Pending Actions</span></div>
        <div id="pending-actions" style="padding:0"></div>
      </div>
    </div>
  </div>

  {{-- Recent Hires + Activity --}}
  <div class="grid-2" style="margin-top:20px">
    <div class="panel animate-entry">
      <div class="panel-header">
        <span class="panel-title">Recent Hires</span>
        <a href="{{ route('employees.index') }}" class="btn btn-secondary btn-sm">View All</a>
      </div>
      <table class="data-table">
        <thead><tr><th>Employee</th><th>Department</th><th>Joined</th><th>Status</th></tr></thead>
        <tbody id="recent-hires"></tbody>
      </table>
    </div>
    <div class="panel animate-entry">
      <div class="panel-header"><span class="panel-title">Activity Feed</span></div>
      <div class="panel-body"><div class="timeline" id="activity-feed"></div></div>
    </div>
  </div>

</div>
@endsection

@push('scripts')
<script>
let weeklyChart;

$(document).ready(() => loadDashboard());

function loadDashboard() {
  $.get('/dashboard/stats', data => {
    $('#k-total').text(data.total_employees);
    $('#k-active').html(`<i class="fas fa-arrow-up"></i> ${data.active_employees} active`);
    $('#k-present').text(data.present_today);
    $('#k-rate').html(`<i class="fas fa-arrow-up"></i> ${data.attendance_rate}% rate`);
    $('#k-jobs').text(data.open_positions);
    $('#k-apps').html(`<i class="fas fa-file-alt"></i> ${data.new_applications} new today`);
    const p = data.monthly_payroll;
    $('#k-payroll').text(p >= 1000000 ? '$'+(p/1000000).toFixed(1)+'M' : '$'+(p/1000).toFixed(0)+'K');

    buildWeeklyChart(data.weekly_chart || []);
    renderRecentHires(data.recent_hires || []);
    renderPendingActions(data);
    renderActivityFeed();
  });
}

function buildWeeklyChart(data) {
  const ctx = document.getElementById('weeklyChart');
  if (!ctx) return;
  if (weeklyChart) weeklyChart.destroy();
  weeklyChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: data.map(d => d.date),
      datasets: [
        { label:'Present', data:data.map(d=>d.present), backgroundColor:'rgba(0,212,255,.7)',  borderRadius:6, barPercentage:.55 },
        { label:'Absent',  data:data.map(d=>d.absent),  backgroundColor:'rgba(244,63,94,.6)',  borderRadius:6, barPercentage:.55 },
        { label:'Leave',   data:data.map(d=>d.leave),   backgroundColor:'rgba(245,158,11,.6)', borderRadius:6, barPercentage:.55 },
      ]
    },
    options: {
      responsive:true, maintainAspectRatio:false,
      plugins:{ legend:{ display:false }, tooltip:{ backgroundColor:'#131826', borderColor:'#1e2840', borderWidth:1, titleColor:'#f0f4ff', bodyColor:'#8892a4' } },
      scales:{
        x:{ grid:{ color:'rgba(255,255,255,.03)' }, ticks:{ color:'#8892a4', font:{ size:11 } } },
        y:{ grid:{ color:'rgba(255,255,255,.03)' }, ticks:{ color:'#8892a4', font:{ size:11 } } },
      }
    }
  });
}

function renderRecentHires(hires) {
  const tbody = $('#recent-hires').empty();
  if (!hires.length) { tbody.html('<tr><td colspan="4" style="text-align:center;padding:20px;color:var(--text-muted)">No recent hires</td></tr>'); return; }
  hires.forEach(e => tbody.append(`
    <tr>
      <td><div class="emp-cell"><div class="emp-avatar">${e.initials}</div><div class="emp-info"><h4>${e.full_name}</h4><span>${e.position}</span></div></div></td>
      <td>${e.department?.name || '—'}</td>
      <td>${fmtDate(e.join_date)}</td>
      <td>${statusBadge(e.status)}</td>
    </tr>`));
}

function renderPendingActions(d) {
  const el = $('#pending-actions').empty();
  const items = [
    { icon:'fas fa-file-signature', color:'var(--accent-amber)', bg:'rgba(245,158,11,.12)', title:`${d.pending_leaves} Leave Requests`, sub:'Awaiting approval', href:'{{ route("leaves.index") }}?status=pending' },
    { icon:'fas fa-user-check',     color:'var(--accent-cyan)',  bg:'rgba(0,212,255,.1)',   title:`${d.open_positions} Open Positions`, sub:'Active recruitment', href:'{{ route("recruitment.index") }}' },
    { icon:'fas fa-star',           color:'var(--accent-violet)',bg:'rgba(139,92,246,.1)',  title:`${d.pending_appraisals} Pending Reviews`, sub:'Q2 appraisals due', href:'{{ route("appraisal.index") }}' },
  ];
  items.forEach(i => el.append(`
    <a href="${i.href}" class="notif-item" style="text-decoration:none">
      <div class="notif-icon" style="background:${i.bg};color:${i.color}"><i class="${i.icon}"></i></div>
      <div class="notif-body"><h4>${i.title}</h4><p>${i.sub}</p></div>
      <i class="fas fa-chevron-right" style="margin-left:auto;font-size:10px;color:var(--text-muted)"></i>
    </a>`));
}

function renderActivityFeed() {
  const activities = [
    { icon:'fas fa-user-plus',  color:'var(--accent-teal)',  bg:'rgba(0,184,148,.12)',  title:'New employee onboarded', time:'Today, 11:30 AM', desc:'Engineering team — Software Engineer' },
    { icon:'fas fa-check-circle',color:'var(--accent-cyan)', bg:'rgba(0,212,255,.12)',  title:'Leave approved',         time:'Today, 10:15 AM', desc:'Annual leave — 3 days' },
    { icon:'fas fa-dollar-sign', color:'var(--accent-amber)',bg:'rgba(245,158,11,.12)', title:'Payroll processed',      time:'Today, 9:00 AM',  desc:'May 2026 — 25 employees' },
    { icon:'fas fa-bullhorn',    color:'var(--accent-violet)',bg:'rgba(139,92,246,.12)', title:'New job posted',         time:'Yesterday',       desc:'Senior Engineer — 2 vacancies' },
  ];
  const el = $('#activity-feed').empty();
  activities.forEach(a => el.append(`
    <div class="tl-item">
      <div class="tl-dot" style="background:${a.bg};color:${a.color}"><i class="${a.icon}" style="font-size:11px"></i></div>
      <div class="tl-body"><div class="tl-title">${a.title}</div><div class="tl-time">${a.time}</div><div class="tl-desc">${a.desc}</div></div>
    </div>`));
}

function exportDashboard() { showToast('Dashboard report exported!','success'); }
</script>
@endpush