@extends('layouts.app')
@section('title','Appraisal')
@section('page-title','Appraisal & Increment')
@section('breadcrumb','SpaceHR/ Appraisal')
@section('content')
<div class="page-body">
  <div class="page-header animate-entry">
    <div class="page-header-title"><h1>Appraisal &amp; Increment</h1><p>Conduct performance reviews, assign ratings and apply salary increments</p></div>
    <div style="display:flex;gap:10px">
      <button class="btn btn-secondary" onclick="openModal('modal-add-cycle')"><i class="fas fa-calendar-plus"></i> New Cycle</button>
      <button class="btn btn-primary" onclick="openModal('modal-appraisal')"><i class="fas fa-plus"></i> Start Appraisal</button>
    </div>
  </div>
  <div class="stat-grid">
    <div class="stat-card violet animate-entry"><div class="stat-icon"><i class="fas fa-star"></i></div><div class="stat-num" id="ap-avg">—</div><div class="stat-label">Avg Rating</div></div>
    <div class="stat-card teal animate-entry"><div class="stat-icon"><i class="fas fa-check-double"></i></div><div class="stat-num" id="ap-done">—</div><div class="stat-label">Completed</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="ap-pending">—</div><div class="stat-label">Pending</div></div>
    <div class="stat-card cyan animate-entry"><div class="stat-icon"><i class="fas fa-gift"></i></div><div class="stat-num" id="ap-inc-total">—</div><div class="stat-label">Total Increments</div></div>
  </div>
  <div class="tab-row">
    <button class="tab-btn active" onclick="showApprTab('list',this)">Appraisals</button>
    <button class="tab-btn" onclick="showApprTab('cycles',this);loadCycles()">Review Cycles</button>
    <button class="tab-btn" onclick="showApprTab('increments',this);loadIncrements()">Increment History</button>
  </div>

  <!-- Appraisal List -->
  <div id="ap-list">
    <div class="panel">
      <div class="panel-header">
        <span class="panel-title">Performance Reviews</span>
        <div style="display:flex;gap:8px">
          <select class="form-control" id="ap-cycle-f" style="width:160px" onchange="loadAppraisals()"><option value="">All Cycles</option></select>
          <select class="form-control" id="ap-status-f" style="width:130px" onchange="loadAppraisals()">
            <option value="">All Status</option><option value="pending">Pending</option><option value="completed">Completed</option><option value="finalized">Finalized</option>
          </select>
        </div>
      </div>
      <div id="ap-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="ap-table" style="display:none">
        <thead><tr><th>Employee</th><th>Department</th><th>Cycle</th><th>Rating</th><th>KPI</th><th>Increment</th><th>Reviewer</th><th>Status</th><th style="text-align:center">Actions</th></tr></thead>
        <tbody id="ap-tbody"></tbody>
      </table>
    </div>
  </div>

  <!-- Cycles -->
  <div id="ap-cycles" style="display:none">
    <div id="cycles-grid" style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px"><div style="grid-column:1/-1;text-align:center;padding:40px;color:var(--text-muted)"><i class="fas fa-spinner fa-spin fa-2x"></i></div></div>
  </div>

  <!-- Increments -->
  <div id="ap-increments" style="display:none">
    <div class="panel">
      <div class="panel-header">
        <span class="panel-title">Salary Increment History</span>
        <button class="btn btn-primary btn-sm" onclick="openModal('modal-manual-inc')"><i class="fas fa-plus"></i> Manual Increment</button>
      </div>
      <table class="data-table">
        <thead><tr><th>Employee</th><th>Dept</th><th>Previous</th><th>Increment %</th><th>Amount</th><th>New Salary</th><th>Effective</th><th>Cycle</th></tr></thead>
        <tbody id="inc-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>

<!-- Appraisal Modal -->
<div class="modal-overlay" id="modal-appraisal">
  <div class="modal" style="max-width:600px">
    <div class="modal-header"><span class="modal-title"><i class="fas fa-star" style="color:var(--accent-amber);margin-right:8px"></i>Performance Appraisal</span><button class="modal-close" onclick="closeModal('modal-appraisal')"><i class="fas fa-times"></i></button></div>
    <div class="modal-body">
      <div class="form-grid">
        <div class="form-group"><label class="form-label">Employee *</label><select class="form-control" id="af-emp" onchange="previewApprInc()"><option value="">Select…</option></select></div>
        <div class="form-group"><label class="form-label">Review Cycle *</label><select class="form-control" id="af-cycle"><option value="">Select…</option></select></div>
        <div class="form-group full">
          <label class="form-label">Overall Rating *</label>
          <div style="display:flex;align-items:center;gap:12px;margin-top:4px">
            <div id="star-row" style="display:flex;gap:6px">
              <span class="star" data-v="1" onclick="setRating(1)">★</span><span class="star" data-v="2" onclick="setRating(2)">★</span>
              <span class="star" data-v="3" onclick="setRating(3)">★</span><span class="star" data-v="4" onclick="setRating(4)">★</span>
              <span class="star" data-v="5" onclick="setRating(5)">★</span>
            </div>
            <span id="rating-desc" style="font-size:12px;color:var(--text-muted)">Not rated</span>
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">KPI Score (0–100) *</label>
          <input class="form-control" type="number" id="af-kpi" placeholder="85" min="0" max="100">
        </div>
        <div class="form-group">
          <label class="form-label">Increment % *</label>
          <input class="form-control" type="number" id="af-inc" placeholder="10" min="0" max="100" oninput="previewApprInc()">
          <span style="font-size:10px;color:var(--accent-teal);margin-top:3px;display:block" id="inc-preview"></span>
        </div>
        <div class="form-group full"><label class="form-label">Strengths</label><textarea class="form-control" id="af-str" rows="2" placeholder="Key achievements…"></textarea></div>
        <div class="form-group full"><label class="form-label">Areas to Improve</label><textarea class="form-control" id="af-imp" rows="2" placeholder="Areas needing improvement…"></textarea></div>
        <div class="form-group full"><label class="form-label">Comments</label><textarea class="form-control" id="af-cmt" rows="2" placeholder="Overall summary…"></textarea></div>
      </div>
    </div>
    <div class="modal-footer"><button class="btn btn-secondary" onclick="closeModal('modal-appraisal')">Cancel</button><button class="btn btn-primary" id="btn-submit-appr" onclick="submitAppraisal()"><i class="fas fa-check"></i> Submit</button></div>
  </div>
</div>

<!-- Cycle Modal -->
<div class="modal-overlay" id="modal-add-cycle">
  <div class="modal" style="max-width:480px">
    <div class="modal-header"><span class="modal-title"><i class="fas fa-calendar-plus" style="color:var(--accent-cyan);margin-right:8px"></i>New Review Cycle</span><button class="modal-close" onclick="closeModal('modal-add-cycle')"><i class="fas fa-times"></i></button></div>
    <div class="modal-body">
      <div class="form-grid">
        <div class="form-group"><label class="form-label">Cycle Name *</label><input class="form-control" id="cf-name" placeholder="Q3 2026"></div>
        <div class="form-group"><label class="form-label">Period Label *</label><input class="form-control" id="cf-period" placeholder="Jul–Sep 2026"></div>
        <div class="form-group"><label class="form-label">Start Date *</label><input class="form-control" id="cf-start" type="date"></div>
        <div class="form-group"><label class="form-label">End Date *</label><input class="form-control" id="cf-end" type="date"></div>
        <div class="form-group full"><label class="form-label">Review Due Date *</label><input class="form-control" id="cf-due" type="date"></div>
        <div class="form-group full"><label class="form-label">Description</label><textarea class="form-control" id="cf-desc" rows="2" placeholder="Optional…"></textarea></div>
      </div>
    </div>
    <div class="modal-footer"><button class="btn btn-secondary" onclick="closeModal('modal-add-cycle')">Cancel</button><button class="btn btn-primary" onclick="submitCycle()"><i class="fas fa-check"></i> Create</button></div>
  </div>
</div>

<!-- Manual Increment Modal -->
<div class="modal-overlay" id="modal-manual-inc">
  <div class="modal" style="max-width:420px">
    <div class="modal-header"><span class="modal-title"><i class="fas fa-gift" style="color:var(--accent-teal);margin-right:8px"></i>Manual Increment</span><button class="modal-close" onclick="closeModal('modal-manual-inc')"><i class="fas fa-times"></i></button></div>
    <div class="modal-body">
      <div class="form-group" style="margin-bottom:14px"><label class="form-label">Employee *</label><select class="form-control" id="mi-emp" onchange="previewManualInc()"><option value="">Select…</option></select></div>
      <div class="form-grid">
        <div class="form-group"><label class="form-label">Increment % *</label><input class="form-control" id="mi-pct" type="number" placeholder="10" min="0" max="100" oninput="previewManualInc()"></div>
        <div class="form-group"><label class="form-label">Effective Date *</label><input class="form-control" id="mi-date" type="date" value="{{ now()->addMonth()->format('Y-m-d') }}"></div>
      </div>
      <div id="mi-preview" style="display:none;background:rgba(0,184,148,.08);border:1px solid rgba(0,184,148,.2);border-radius:8px;padding:10px 14px;margin-top:12px;font-size:12px;color:var(--accent-teal)"><span id="mi-preview-text"></span></div>
      <div class="form-group" style="margin-top:14px"><label class="form-label">Reason</label><input class="form-control" id="mi-reason" placeholder="Annual merit increase…"></div>
    </div>
    <div class="modal-footer"><button class="btn btn-secondary" onclick="closeModal('modal-manual-inc')">Cancel</button><button class="btn btn-primary" onclick="submitManualInc()"><i class="fas fa-check"></i> Apply</button></div>
  </div>
</div>
@endsection
@push('scripts')
<script>
let currentRating=0;
const ratingLabels=['','Poor','Below Average','Average','Good','Excellent'];
let empListCache=[];

$(document).ready(function(){
  loadAppraisals();loadCycleSelects();
  loadEmpSelect('#af-emp');loadEmpSelect('#mi-emp');
  $.get('/employees/list',{status:'active',per_page:200},res=>{empListCache=res.data?.data||[];});
});

function showApprTab(tab,btn){$('#ap-list,#ap-cycles,#ap-increments').hide();$(`#ap-${tab}`).show();$(btn).addClass('active').siblings('.tab-btn').removeClass('active');}

function loadCycleSelects(){
  $.get('/appraisal/cycles/all',cycles=>{
    $('#ap-cycle-f,#af-cycle').find('option:not(:first)').remove();
    cycles.forEach(c=>$('#ap-cycle-f,#af-cycle').append(`<option value="${c.id}">${c.name} (${c.status})</option>`));
  });
}

function loadAppraisals(){
  $('#ap-loading').show();$('#ap-table').hide();
  $.get('/appraisal/list',{cycle_id:$('#ap-cycle-f').val(),status:$('#ap-status-f').val()},function(data){
    const done=data.filter(a=>['completed','finalized'].includes(a.status)).length;
    const pend=data.filter(a=>a.status==='pending').length;
    const avgR=data.length?(data.reduce((s,a)=>s+parseFloat(a.rating||0),0)/data.length).toFixed(1):'—';
    $('#ap-avg').text(avgR);$('#ap-done').text(done);$('#ap-pending').text(pend);
    $('#ap-loading').hide();$('#ap-table').show();
    const tbody=$('#ap-tbody').empty();
    if(!data.length){tbody.html('<tr><td colspan="9" style="text-align:center;padding:36px;color:var(--text-muted)"><i class="fas fa-chart-line fa-2x" style="display:block;margin-bottom:12px;opacity:.3"></i>No appraisals found</td></tr>');return;}
    data.forEach(a=>{
      const r=parseFloat(a.rating||0);
      const stars='★'.repeat(Math.round(r))+'☆'.repeat(5-Math.round(r));
      const kc=parseInt(a.kpi_score)>=80?'var(--accent-teal)':parseInt(a.kpi_score)>=60?'var(--accent-amber)':'var(--accent-rose)';
      tbody.append(`<tr>
        <td><div class="emp-cell"><div class="emp-avatar">${a.employee?.initials||'?'}</div><div class="emp-info"><h4>${a.employee?.full_name||'—'}</h4><span>${a.employee?.employee_id||''}</span></div></div></td>
        <td style="font-size:11px">${a.employee?.department?.name||'—'}</td>
        <td style="font-size:11px;color:var(--text-secondary)">${a.cycle?.name||'—'}</td>
        <td><div style="display:flex;align-items:center;gap:6px"><span style="color:var(--accent-amber);font-size:14px;letter-spacing:-1px">${stars}</span><span style="font-size:11px;font-weight:700">${a.rating}</span></div></td>
        <td><div style="display:flex;align-items:center;gap:6px"><div style="width:50px;height:5px;background:var(--bg-hover);border-radius:3px;overflow:hidden"><div style="width:${a.kpi_score}%;height:100%;background:${kc}"></div></div><span style="font-size:11px;font-weight:600;color:${kc}">${a.kpi_score}%</span></div></td>
        <td><span style="color:var(--accent-teal);font-weight:700;font-size:13px">+${a.increment_percent}%</span></td>
        <td style="font-size:11px;color:var(--text-secondary)">${a.reviewer?.name||'—'}</td>
        <td>${statusBadge(a.status)}</td>
        <td style="text-align:center">
          ${a.status!=='finalized'?`<button class="btn btn-success btn-sm" title="Finalize & apply increment" onclick="finalizeAppraisal(${a.id},'${a.employee?.full_name?.replace(/'/g,"\\'")}',${ a.increment_percent})"><i class="fas fa-check-double"></i></button>`:`<span style="font-size:10px;color:var(--accent-violet)"><i class="fas fa-lock"></i></span>`}
        </td>
      </tr>`);
    });
  }).fail(()=>$('#ap-loading').html('<i class="fas fa-exclamation-triangle" style="color:var(--accent-rose)"></i> Error <button class="btn btn-sm btn-secondary" onclick="loadAppraisals()">Retry</button>'));
}

function finalizeAppraisal(id,name,pct){
  if(!confirm(`Finalize appraisal for ${name}?\n\nThis will apply a ${pct}% salary increment effective next month.`))return;
  $.post(`/appraisal/${id}/finalize`,{},res=>{showToast(res.message,'success');loadAppraisals();loadIncrements();})
   .fail(xhr=>showToast(xhr.responseJSON?.message||'Error','error'));
}

function loadCycles(){
  $.get('/appraisal/cycles/all',function(cycles){
    const grid=$('#cycles-grid').empty();
    if(!cycles.length){grid.html('<div style="grid-column:1/-1;text-align:center;padding:40px;color:var(--text-muted)">No review cycles yet</div>');return;}
    const sm={upcoming:'badge-pending',active:'badge-active',completed:'badge-approved',closed:'badge-closed'};
    cycles.forEach(c=>grid.append(`<div class="panel"><div class="panel-body">
      <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px">
        <div><div style="font-family:'Syne',sans-serif;font-size:18px;font-weight:800;color:var(--accent-cyan)">${c.name}</div><div style="font-size:11px;color:var(--text-secondary)">${c.period}</div></div>
        <span class="badge ${sm[c.status]||'badge-pending'}">${c.status}</span>
      </div>
      <div style="margin-bottom:10px">
        <div style="display:flex;justify-content:space-between;font-size:11px;margin-bottom:5px"><span style="color:var(--text-secondary)">Progress</span><span style="font-weight:700">${c.progress||0}%</span></div>
        <div style="height:7px;background:var(--bg-hover);border-radius:4px;overflow:hidden"><div style="width:${c.progress||0}%;height:100%;background:var(--accent-cyan)"></div></div>
      </div>
      <div style="display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--text-muted)">
        <div><i class="fas fa-calendar-alt" style="width:14px"></i> ${fmtDate(c.start_date)} – ${fmtDate(c.end_date)}</div>
        <div><i class="fas fa-clock" style="width:14px"></i> Due: ${fmtDate(c.review_due_date)}</div>
        <div><i class="fas fa-users" style="width:14px"></i> ${c.appraisals_count||0} appraisals</div>
      </div>
      <div style="display:flex;gap:6px;margin-top:12px">
        ${c.status==='upcoming'?`<button class="btn btn-success btn-sm" onclick="setCycleStatus(${c.id},'active')"><i class="fas fa-play"></i> Activate</button>`:''}
        ${c.status==='active'?`<button class="btn btn-amber btn-sm" onclick="setCycleStatus(${c.id},'completed')"><i class="fas fa-flag-checkered"></i> Complete</button>`:''}
        ${c.status==='upcoming'?`<button class="btn btn-danger btn-sm" onclick="deleteCycle(${c.id})"><i class="fas fa-trash"></i></button>`:''}
      </div>
    </div></div>`));
  });
}
function setCycleStatus(id,status){$.ajax({url:`/appraisal/cycles/${id}`,type:'PUT',data:{status},success:()=>{showToast('Cycle updated!','success');loadCycles();}});}
function deleteCycle(id){if(!confirm('Delete this cycle?'))return;$.ajax({url:`/appraisal/cycles/${id}`,type:'DELETE',success:()=>{showToast('Deleted','info');loadCycles();}});}

function loadIncrements(){
  $.get('/appraisal/increments/all',function(data){
    const tbody=$('#inc-tbody').empty();
    if(!data.length){tbody.html('<tr><td colspan="8" style="text-align:center;padding:28px;color:var(--text-muted)">No increments yet</td></tr>');return;}
    const total=data.reduce((s,i)=>s+parseFloat(i.increment_amount||0),0);
    $('#ap-inc-total').text('$'+Math.round(total/1000)+'K');
    data.forEach(i=>tbody.append(`<tr>
      <td><div class="emp-cell"><div class="emp-avatar">${i.employee?.initials||'?'}</div><div class="emp-info"><h4>${i.employee?.full_name||'—'}</h4><span>${i.employee?.employee_id||''}</span></div></div></td>
      <td style="font-size:11px">${i.employee?.department?.name||'—'}</td>
      <td>${fmtCurrency(i.previous_salary)}</td>
      <td><span style="color:var(--accent-teal);font-weight:700;font-size:13px">+${i.increment_percent}%</span></td>
      <td style="color:var(--accent-teal)">${fmtCurrency(i.increment_amount)}</td>
      <td style="font-family:'Syne',sans-serif;font-weight:800;color:var(--accent-cyan)">${fmtCurrency(i.new_salary)}</td>
      <td style="font-size:11px">${fmtDate(i.effective_date)}</td>
      <td style="font-size:11px;color:var(--text-secondary)">${i.appraisal?.cycle?.name||'Manual'}</td>
    </tr>`));
  });
}

function setRating(val){currentRating=val;$('.star').each(function(){$(this).toggleClass('lit',parseInt($(this).data('v'))<=val);});$('#rating-desc').text(ratingLabels[val]||'').css('color','var(--accent-amber)');previewApprInc();}

function previewApprInc(){
  const empId=$('#af-emp').val(),pct=parseFloat($('#af-inc').val())||0;
  if(!empId||!pct){$('#inc-preview').text('');return;}
  const emp=empListCache.find(e=>String(e.id)===String(empId));
  if(emp){const amt=Math.round(parseFloat(emp.basic_salary)*pct/100);const nw=parseFloat(emp.basic_salary)+amt;$('#inc-preview').text(`${fmtCurrency(emp.basic_salary)} → ${fmtCurrency(nw)} (+${fmtCurrency(amt)})`);}
}

function previewManualInc(){
  const empId=$('#mi-emp').val(),pct=parseFloat($('#mi-pct').val())||0;
  if(!empId||!pct){$('#mi-preview').hide();return;}
  const emp=empListCache.find(e=>String(e.id)===String(empId));
  if(emp){const amt=Math.round(parseFloat(emp.basic_salary)*pct/100);const nw=parseFloat(emp.basic_salary)+amt;$('#mi-preview-text').text(`${emp.full_name}: ${fmtCurrency(emp.basic_salary)} → ${fmtCurrency(nw)} (+${fmtCurrency(amt)})`);$('#mi-preview').show();}
}

function submitAppraisal(){
  if(!currentRating){showToast('Set a rating (1–5 stars)','error');return;}
  const d={employee_id:$('#af-emp').val(),cycle_id:$('#af-cycle').val(),rating:currentRating,kpi_score:$('#af-kpi').val(),increment_percent:$('#af-inc').val(),strengths:$('#af-str').val().trim(),improvements:$('#af-imp').val().trim(),comments:$('#af-cmt').val().trim()};
  if(!d.employee_id||!d.cycle_id||!d.kpi_score||!d.increment_percent){showToast('Fill required fields','error');return;}
  const $btn=$('#btn-submit-appr').prop('disabled',true).html('<i class="fas fa-spinner fa-spin"></i> Saving…');
  $.post('/appraisal',d,()=>{showToast('Appraisal submitted!','success');closeModal('modal-appraisal');loadAppraisals();currentRating=0;$('.star').removeClass('lit');$('#rating-desc').text('Not rated').css('color','var(--text-muted)');$('#af-kpi,#af-inc,#af-str,#af-imp,#af-cmt').val('');$('#inc-preview').text('');})
   .fail(xhr=>showToast(Object.values(xhr.responseJSON?.errors||{}).flat()[0]||'Error','error'))
   .always(()=>$btn.prop('disabled',false).html('<i class="fas fa-check"></i> Submit'));
}

function submitCycle(){
  const d={name:$('#cf-name').val().trim(),period:$('#cf-period').val().trim(),start_date:$('#cf-start').val(),end_date:$('#cf-end').val(),review_due_date:$('#cf-due').val(),description:$('#cf-desc').val().trim()};
  if(!d.name||!d.period||!d.start_date||!d.end_date||!d.review_due_date){showToast('Fill required fields','error');return;}
  $.post('/appraisal/cycles',d,()=>{showToast('Cycle created!','success');closeModal('modal-add-cycle');loadCycles();loadCycleSelects();$('#cf-name,#cf-period,#cf-desc').val('');$('#cf-start,#cf-end,#cf-due').val('');})
   .fail(xhr=>showToast(Object.values(xhr.responseJSON?.errors||{}).flat()[0]||'Error','error'));
}

function submitManualInc(){
  const d={employee_id:$('#mi-emp').val(),increment_percent:$('#mi-pct').val(),effective_date:$('#mi-date').val(),reason:$('#mi-reason').val().trim()};
  if(!d.employee_id||!d.increment_percent||!d.effective_date){showToast('Fill required fields','error');return;}
  $.post('/appraisal/increment/apply',d,res=>{showToast(`Increment applied! New salary: ${fmtCurrency(res.new_salary)}`,'success');closeModal('modal-manual-inc');loadIncrements();$('#mi-pct,#mi-reason').val('');$('#mi-preview').hide();})
   .fail(xhr=>showToast(xhr.responseJSON?.message||'Error','error'));
}
</script>
@endpush