@extends('layouts.app')
@section('title','Attendance')
@section('page-title','Attendance Management')
@section('breadcrumb','SpaceHR/ Attendance')
@section('content')
<div class="page-body">
  <div class="page-header animate-entry">
    <div class="page-header-title"><h1>Attendance Management</h1><p>Track daily check-ins, work hours, overtime and monthly reports</p></div>
    <div style="display:flex;gap:10px">
      <button class="btn btn-secondary" onclick="openModal('modal-mark')"><i class="fas fa-plus"></i> Mark Attendance</button>
      <a id="export-btn" href="/attendance/export?month={{ now()->format('Y-m') }}" class="btn btn-primary"><i class="fas fa-download"></i> Export CSV</a>
    </div>
  </div>
  <div class="stat-grid">
    <div class="stat-card teal animate-entry"><div class="stat-icon"><i class="fas fa-user-check"></i></div><div class="stat-num" id="as-present">—</div><div class="stat-label">Present Today</div></div>
    <div class="stat-card rose animate-entry"><div class="stat-icon"><i class="fas fa-user-times"></i></div><div class="stat-num" id="as-absent">—</div><div class="stat-label">Absent</div></div>
    <div class="stat-card amber animate-entry"><div class="stat-icon"><i class="fas fa-clock"></i></div><div class="stat-num" id="as-late">—</div><div class="stat-label">Late</div></div>
    <div class="stat-card cyan animate-entry"><div class="stat-icon"><i class="fas fa-umbrella-beach"></i></div><div class="stat-num" id="as-leave">—</div><div class="stat-label">On Leave</div></div>
  </div>
  <div class="tab-row">
    <button class="tab-btn active" onclick="showAttTab('daily',this)">Daily Log</button>
    <button class="tab-btn" onclick="showAttTab('monthly',this);loadMonthly()">Monthly Report</button>
  </div>

  <div id="att-daily">
    <div class="grid-70-30" style="align-items:start">
      <div class="panel">
        <div class="panel-header">
          <span class="panel-title" id="att-title">Today's Attendance Log</span>
          <div class="filter-bar" style="margin-bottom:0">
            <input type="date" class="form-control" id="att-date" value="{{ now()->format('Y-m-d') }}" onchange="loadAttendance()">
            <select class="form-control" id="att-status-f" style="width:120px" onchange="loadAttendance()">
              <option value="">All</option><option value="present">Present</option><option value="absent">Absent</option><option value="late">Late</option><option value="leave">Leave</option>
            </select>
          </div>
        </div>
        <div id="att-loading" style="text-align:center;padding:32px;color:var(--text-muted)"><i class="fas fa-spinner fa-spin fa-2x"></i></div>
        <table class="data-table" id="att-table" style="display:none">
          <thead><tr><th>Employee</th><th>Dept</th><th>Check-In</th><th>Check-Out</th><th>Hours</th><th>OT</th><th>Status</th></tr></thead>
          <tbody id="att-tbody"></tbody>
        </table>
        <div id="att-empty" style="display:none;text-align:center;padding:40px;color:var(--text-muted)"><i class="fas fa-calendar-times fa-2x" style="display:block;margin-bottom:12px;opacity:.3"></i>No records for this date</div>
      </div>
      <div style="display:flex;flex-direction:column;gap:16px">
        <div class="panel">
          <div class="panel-header" style="justify-content:space-between">
            <button class="topbar-btn" onclick="prevCalMonth()"><i class="fas fa-chevron-left" style="font-size:10px"></i></button>
            <span class="panel-title" id="cal-label">{{ now()->format('F Y') }}</span>
            <button class="topbar-btn" onclick="nextCalMonth()"><i class="fas fa-chevron-right" style="font-size:10px"></i></button>
          </div>
          <div class="panel-body" style="padding:16px">
            <div class="cal-grid" id="cal-head"></div>
            <div class="cal-grid" id="cal-body" style="margin-top:4px;gap:5px"></div>
            <div style="display:flex;gap:10px;margin-top:12px;flex-wrap:wrap">
              <span style="display:flex;align-items:center;gap:4px;font-size:10px;color:var(--text-secondary)"><span style="width:8px;height:8px;background:var(--accent-teal);border-radius:2px;display:inline-block"></span>Present</span>
              <span style="display:flex;align-items:center;gap:4px;font-size:10px;color:var(--text-secondary)"><span style="width:8px;height:8px;background:var(--accent-rose);border-radius:2px;display:inline-block"></span>Absent</span>
              <span style="display:flex;align-items:center;gap:4px;font-size:10px;color:var(--text-secondary)"><span style="width:8px;height:8px;background:var(--accent-amber);border-radius:2px;display:inline-block"></span>Late</span>
            </div>
          </div>
        </div>
        <div class="panel">
          <div class="panel-header"><span class="panel-title">Monthly Summary</span></div>
          <div class="panel-body">
            <div class="chart-bar-wrap">
              <div class="chart-bar-row"><div class="chart-bar-label">Present</div><div class="chart-bar-track"><div class="chart-bar-fill" style="width:88%;background:var(--accent-teal)"></div></div><div class="chart-bar-val">88%</div></div>
              <div class="chart-bar-row"><div class="chart-bar-label">Absent</div><div class="chart-bar-track"><div class="chart-bar-fill" style="width:7%;background:var(--accent-rose)"></div></div><div class="chart-bar-val">7%</div></div>
              <div class="chart-bar-row"><div class="chart-bar-label">Late</div><div class="chart-bar-track"><div class="chart-bar-fill" style="width:5%;background:var(--accent-amber)"></div></div><div class="chart-bar-val">5%</div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="att-monthly" style="display:none">
    <div class="panel">
      <div class="panel-header">
        <span class="panel-title">Monthly Report</span>
        <div style="display:flex;gap:8px">
          <input type="month" class="form-control" id="report-month" value="{{ now()->format('Y-m') }}" onchange="loadMonthly()">
          <button class="btn btn-secondary btn-sm" onclick="$('#export-btn').attr('href','/attendance/export?month='+$('#report-month').val());$('#export-btn')[0].click()"><i class="fas fa-download"></i></button>
        </div>
      </div>
      <table class="data-table">
        <thead><tr><th>Employee</th><th>Department</th><th>Present</th><th>Absent</th><th>Late</th><th>Leave</th><th>OT Hours</th><th>Rate</th></tr></thead>
        <tbody id="report-tbody"><tr><td colspan="8" style="text-align:center;padding:28px;color:var(--text-muted)"><i class="fas fa-spinner fa-spin"></i></td></tr></tbody>
      </table>
    </div>
  </div>
</div>

<div class="modal-overlay" id="modal-mark">
  <div class="modal" style="max-width:460px">
    <div class="modal-header"><span class="modal-title"><i class="fas fa-calendar-plus" style="color:var(--accent-cyan);margin-right:8px"></i>Mark Attendance</span><button class="modal-close" onclick="closeModal('modal-mark')"><i class="fas fa-times"></i></button></div>
    <div class="modal-body">
      <div class="form-grid">
        <div class="form-group full"><label class="form-label">Employee *</label><select class="form-control" id="mf-emp"><option value="">Select…</option></select></div>
        <div class="form-group"><label class="form-label">Date *</label><input type="date" class="form-control" id="mf-date" value="{{ now()->format('Y-m-d') }}"></div>
        <div class="form-group"><label class="form-label">Status *</label>
          <select class="form-control" id="mf-status"><option value="present">Present</option><option value="absent">Absent</option><option value="late">Late</option><option value="half_day">Half Day</option><option value="leave">Leave</option></select></div>
        <div class="form-group"><label class="form-label">Check-in</label><input type="time" class="form-control" id="mf-in" value="09:00"></div>
        <div class="form-group"><label class="form-label">Check-out</label><input type="time" class="form-control" id="mf-out" value="18:00"></div>
        <div class="form-group full"><label class="form-label">Note</label><input class="form-control" id="mf-note" placeholder="Optional…"></div>
      </div>
    </div>
    <div class="modal-footer"><button class="btn btn-secondary" onclick="closeModal('modal-mark')">Cancel</button><button class="btn btn-primary" onclick="submitAttendance()"><i class="fas fa-check"></i> Save</button></div>
  </div>
</div>
@endsection
@push('scripts')
<script>
let calM={{ now()->month-1 }},calY={{ now()->year }};
const months=['January','February','March','April','May','June','July','August','September','October','November','December'];
$(document).ready(function(){loadEmpSelect('#mf-emp');loadAttendance();renderCal();});

function showAttTab(tab,btn){$('#att-daily,#att-monthly').hide();$(`#att-${tab}`).show();$(btn).addClass('active').siblings('.tab-btn').removeClass('active');}

function loadAttendance(){
  const date=$('#att-date').val(),status=$('#att-status-f').val();
  $('#att-title').text('Attendance — '+new Date(date+'T12:00:00').toLocaleDateString('en-US',{weekday:'long',month:'long',day:'numeric'}));
  $('#att-loading').show();$('#att-table,#att-empty').hide();
  $.get('/attendance/list',{date,status},function(data){
    $('#as-present').text(data.summary.present);$('#as-absent').text(data.summary.absent);$('#as-late').text(data.summary.late);$('#as-leave').text(data.summary.leave||0);
    $('#att-loading').hide();
    const tbody=$('#att-tbody').empty();
    if(!data.records.length){$('#att-empty').show();return;}
    $('#att-table').show();
    data.records.forEach(r=>{
      tbody.append(`<tr>
        <td><div class="emp-cell"><div class="emp-avatar">${r.employee?.initials||'?'}</div><div class="emp-info"><h4>${r.employee?.full_name||'—'}</h4><span>${r.employee?.employee_id||''}</span></div></div></td>
        <td style="font-size:11px">${r.employee?.department?.name||'—'}</td>
        <td style="color:${r.status==='late'?'var(--accent-amber)':'var(--accent-teal)'};font-weight:600">${r.check_in||'—'}</td>
        <td>${r.check_out||'—'}</td>
        <td>${r.worked_hours||0}h</td>
        <td>${parseFloat(r.overtime_hours||0)>0?`<span style="color:var(--accent-amber);font-weight:600">+${r.overtime_hours}h</span>`:'—'}</td>
        <td>${statusBadge(r.status)}</td>
      </tr>`);
    });
  }).fail(()=>$('#att-loading').html('<i class="fas fa-exclamation-triangle" style="color:var(--accent-rose)"></i> Error <button class="btn btn-sm btn-secondary" onclick="loadAttendance()">Retry</button>'));
}

function loadMonthly(){
  const month=$('#report-month').val();
  $('#report-tbody').html('<tr><td colspan="8" style="text-align:center;padding:28px;color:var(--text-muted)"><i class="fas fa-spinner fa-spin"></i></td></tr>');
  $.get('/attendance/monthly-report',{month},function(data){
    const tbody=$('#report-tbody').empty();
    if(!data.length){tbody.html('<tr><td colspan="8" style="text-align:center;padding:28px;color:var(--text-muted)">No data for this month</td></tr>');return;}
    data.forEach(row=>{
      const total=row.present_days+row.absent_days+row.late_days+row.leave_days;
      const pct=total>0?Math.round(((row.present_days+row.late_days)/total)*100):0;
      const pc=pct>=90?'var(--accent-teal)':pct>=75?'var(--accent-amber)':'var(--accent-rose)';
      tbody.append(`<tr>
        <td><div class="emp-cell"><div class="emp-avatar">${row.employee?.name?.split(' ').map(n=>n[0]).join('').toUpperCase().slice(0,2)||'?'}</div><div class="emp-info"><h4>${row.employee?.name||'—'}</h4></div></div></td>
        <td style="font-size:11px">${row.employee?.dept||'—'}</td>
        <td style="color:var(--accent-teal);font-weight:600">${row.present_days}</td>
        <td style="color:var(--accent-rose)">${row.absent_days}</td>
        <td style="color:var(--accent-amber)">${row.late_days}</td>
        <td>${row.leave_days}</td>
        <td>${parseFloat(row.overtime_hours||0)>0?`<span style="color:var(--accent-amber)">${parseFloat(row.overtime_hours).toFixed(1)}h</span>`:'—'}</td>
        <td><div style="display:flex;align-items:center;gap:7px"><div style="width:55px;height:5px;background:var(--bg-hover);border-radius:3px;overflow:hidden"><div style="width:${pct}%;height:100%;background:${pc}"></div></div><span style="font-size:11px;font-weight:700;color:${pc}">${pct}%</span></div></td>
      </tr>`);
    });
  });
}

function renderCal(){
  $('#cal-label').text(months[calM]+' '+calY);
  const head=$('#cal-head').empty();
  ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'].forEach(d=>head.append(`<div class="cal-head">${d}</div>`));
  const body=$('#cal-body').empty();
  const first=new Date(calY,calM,1).getDay(),total=new Date(calY,calM+1,0).getDate();
  const offset=first===0?6:first-1;
  const today=new Date();
  for(let i=0;i<offset;i++)body.append('<div></div>');
  for(let d=1;d<=total;d++){
    const isToday=d===today.getDate()&&calM===today.getMonth()&&calY===today.getFullYear();
    const past=new Date(calY,calM,d)<today;
    const r=d%7;
    const cls=isToday?'today':past?(r===0?'absent':r===6?'has-event':'present'):'';
    const dateStr=`${calY}-${String(calM+1).padStart(2,'0')}-${String(d).padStart(2,'0')}`;
    body.append(`<div class="cal-day ${cls}" onclick="$('#att-date').val('${dateStr}');loadAttendance()">${d}</div>`);
  }
}
function prevCalMonth(){if(--calM<0){calM=11;calY--;}renderCal();}
function nextCalMonth(){if(++calM>11){calM=0;calY++;}renderCal();}

function submitAttendance(){
  const d={employee_id:$('#mf-emp').val(),date:$('#mf-date').val(),status:$('#mf-status').val(),check_in:$('#mf-in').val(),check_out:$('#mf-out').val(),note:$('#mf-note').val()};
  if(!d.employee_id){showToast('Select an employee','error');return;}
  $.post('/attendance/mark',d,()=>{showToast('Attendance marked!','success');closeModal('modal-mark');if(d.date===$('#att-date').val())loadAttendance();})
   .fail(()=>showToast('Error marking attendance','error'));
}
</script>
@endpush