@extends('layouts.app')
@section('title','Recruitment')
@section('page-title','Recruitment Pipeline')
@section('breadcrumb','SpaceHR/ Recruitment')
@section('content')
<div class="page-body">
  <div class="page-header animate-entry">
    <div class="page-header-title"><h1>Recruitment Pipeline</h1><p>Manage job postings, applications and the full hiring pipeline</p></div>
    <button class="btn btn-primary" onclick="openModal('modal-add-job')"><i class="fas fa-plus"></i> Post New Job</button>
  </div>
  <div class="stat-grid">
    <div class="stat-card cyan animate-entry"><div class="stat-icon"><i class="fas fa-briefcase"></i></div><div class="stat-num" id="rs-open">—</div><div class="stat-label">Open Positions</div></div>
    <div class="stat-card teal animate-entry"><div class="stat-icon"><i class="fas fa-file-alt"></i></div><div class="stat-num" id="rs-apps">—</div><div class="stat-label">Applications</div></div>
    <div class="stat-card amber animate-entry"><div class="stat-icon"><i class="fas fa-user-friends"></i></div><div class="stat-num" id="rs-int">—</div><div class="stat-label">In Interview</div></div>
    <div class="stat-card rose animate-entry"><div class="stat-icon"><i class="fas fa-handshake"></i></div><div class="stat-num" id="rs-offer">—</div><div class="stat-label">Offers Made</div></div>
  </div>
  <div class="tab-row">
    <button class="tab-btn active" onclick="showRecTab('jobs',this)">Job Postings</button>
    <button class="tab-btn" onclick="showRecTab('apps',this);loadApps()">Applications</button>
    <button class="tab-btn" onclick="showRecTab('kanban',this);loadKanban()">Kanban Board</button>
  </div>
  <div id="rec-jobs">
    <div class="filter-bar" style="margin-bottom:16px">
      <select class="form-control" id="job-status-f" style="width:130px" onchange="loadJobs()"><option value="">All Status</option><option value="open">Open</option><option value="closed">Closed</option></select>
      <select class="form-control" id="job-dept-f" style="width:160px" onchange="loadJobs()"><option value="">All Departments</option></select>
    </div>
    <div id="jobs-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>
  <div id="rec-apps" style="display:none">
    <div class="panel">
      <div class="panel-header">
        <span class="panel-title">All Applications</span>
        <div style="display:flex;gap:8px">
          <select class="form-control" id="app-stage-f" style="width:150px" onchange="loadApps()">
            <option value="">All Stages</option><option value="applied">Applied</option><option value="screening">Screening</option>
            <option value="interview">Interview</option><option value="technical_test">Technical Test</option>
            <option value="offer">Offer</option><option value="hired">Hired</option>
          </select>
          <button class="btn btn-secondary btn-sm" onclick="openModal('modal-add-app')"><i class="fas fa-plus"></i> Add</button>
        </div>
      </div>
      <table class="data-table">
        <thead><tr><th>Applicant</th><th>Position</th><th>Department</th><th>Applied</th><th>Stage</th><th>Score</th><th style="text-align:center">Actions</th></tr></thead>
        <tbody id="apps-tbody"><tr><td colspan="7" 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 id="rec-kanban" style="display:none">
    <div id="kanban-board" style="display:grid;grid-template-columns:repeat(5,1fr);gap:12px"><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>
</div>

<div class="modal-overlay" id="modal-add-job">
  <div class="modal" style="max-width:600px">
    <div class="modal-header"><span class="modal-title"><i class="fas fa-briefcase" style="color:var(--accent-amber);margin-right:8px"></i>Post New Job</span><button class="modal-close" onclick="closeModal('modal-add-job')"><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">Job Title *</label><input class="form-control" id="jf-title" placeholder="Senior Software Engineer"></div>
        <div class="form-group"><label class="form-label">Department *</label><select class="form-control" id="jf-dept"><option value="">Select…</option></select></div>
        <div class="form-group"><label class="form-label">Type</label><select class="form-control" id="jf-type"><option value="full-time">Full-time</option><option value="part-time">Part-time</option><option value="contract">Contract</option><option value="remote">Remote</option></select></div>
        <div class="form-group"><label class="form-label">Salary Range</label><input class="form-control" id="jf-salary" placeholder="$5K–$8K"></div>
        <div class="form-group"><label class="form-label">Vacancies</label><input class="form-control" id="jf-vac" type="number" value="1" min="1"></div>
        <div class="form-group"><label class="form-label">Deadline</label><input class="form-control" id="jf-deadline" type="date"></div>
        <div class="form-group full"><label class="form-label">Requirements</label><textarea class="form-control" id="jf-req" rows="3" placeholder="Experience, skills…"></textarea></div>
        <div class="form-group full"><label class="form-label">Benefits</label><textarea class="form-control" id="jf-benefits" rows="2" placeholder="Health insurance, bonus…"></textarea></div>
      </div>
    </div>
    <div class="modal-footer"><button class="btn btn-secondary" onclick="closeModal('modal-add-job')">Cancel</button><button class="btn btn-primary" onclick="submitJob()"><i class="fas fa-bullhorn"></i> Post Job</button></div>
  </div>
</div>

<div class="modal-overlay" id="modal-add-app">
  <div class="modal" style="max-width:480px">
    <div class="modal-header"><span class="modal-title"><i class="fas fa-file-alt" style="color:var(--accent-teal);margin-right:8px"></i>Add Application</span><button class="modal-close" onclick="closeModal('modal-add-app')"><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">Job Position *</label><select class="form-control" id="af-job"></select></div>
        <div class="form-group"><label class="form-label">Applicant Name *</label><input class="form-control" id="af-name" placeholder="Full name"></div>
        <div class="form-group"><label class="form-label">Email *</label><input class="form-control" id="af-email" type="email"></div>
        <div class="form-group"><label class="form-label">Phone</label><input class="form-control" id="af-phone"></div>
        <div class="form-group"><label class="form-label">Score (0-100)</label><input class="form-control" id="af-score" type="number" value="70" min="0" max="100"></div>
        <div class="form-group full"><label class="form-label">Notes</label><textarea class="form-control" id="af-cover" rows="2" placeholder="Cover letter or notes…"></textarea></div>
      </div>
    </div>
    <div class="modal-footer"><button class="btn btn-secondary" onclick="closeModal('modal-add-app')">Cancel</button><button class="btn btn-primary" onclick="submitApp()"><i class="fas fa-check"></i> Add</button></div>
  </div>
</div>
@endsection
@push('scripts')
<script>
const stageOrder=['applied','screening','interview','technical_test','offer','hired'];
const stageBadge={applied:'badge-pending',screening:'badge-approved',interview:'badge-approved',technical_test:'badge-pending',offer:'badge-active',hired:'badge-active',rejected:'badge-rejected'};
const stageColors={applied:'var(--text-muted)',screening:'var(--accent-amber)',interview:'var(--accent-cyan)',technical_test:'var(--accent-violet)',offer:'var(--accent-teal)'};
let currentRecTab='jobs';

$(document).ready(function(){
  loadJobs();
  $.get('/employees/departments/list',d=>d.forEach(dept=>$('#job-dept-f,#jf-dept').append(`<option value="${dept.id}">${dept.name}</option>`)));
});

function showRecTab(tab,btn){
  currentRecTab=tab;
  $('#rec-jobs,#rec-apps,#rec-kanban').hide();$(`#rec-${tab}`).show();
  $(btn).addClass('active').siblings('.tab-btn').removeClass('active');
}

function loadJobs(){
  $.get('/recruitment/jobs',{status:$('#job-status-f').val(),department:$('#job-dept-f').val()},function(jobs){
    $('#rs-open').text(jobs.filter(j=>j.status==='open').length);
    const grid=$('#jobs-grid').empty();
    if(!jobs.length){grid.html('<div style="grid-column:1/-1;text-align:center;padding:40px;color:var(--text-muted)"><i class="fas fa-briefcase fa-2x" style="display:block;margin-bottom:12px;opacity:.3"></i>No job postings found</div>');return;}
    jobs.forEach(job=>grid.append(`
      <div class="panel job-card">
        <div class="panel-body">
          <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px">
            <div style="width:42px;height:42px;border-radius:10px;background:rgba(0,212,255,.1);display:grid;place-items:center"><i class="fas fa-briefcase" style="color:var(--accent-cyan)"></i></div>
            <span class="badge ${job.status==='open'?'badge-open':'badge-closed'}">${job.status}</span>
          </div>
          <h3 style="font-family:'Syne',sans-serif;font-size:14px;font-weight:700;margin-bottom:4px">${job.title}</h3>
          <p style="font-size:11px;color:var(--text-secondary);margin-bottom:12px">${job.department?.name||'—'} · ${job.employment_type}</p>
          <div class="job-meta">
            ${job.salary_range?`<span class="job-tag"><i class="fas fa-dollar-sign"></i> ${job.salary_range}</span>`:''}
            <span class="job-tag"><i class="fas fa-users"></i> ${job.vacancies} open</span>
            <span class="job-tag"><i class="fas fa-file-alt"></i> ${job.applications_count||0} applied</span>
          </div>
          <div style="display:flex;justify-content:space-between;align-items:center;margin-top:12px">
            <span style="font-size:10px;color:var(--text-muted)">${job.deadline_date?'Due: '+fmtDate(job.deadline_date):job.job_code}</span>
            <div style="display:flex;gap:5px">
              <button class="btn btn-secondary btn-sm" onclick="preloadAddApp(${job.id},'${job.title.replace(/'/g,"\\'")}')"><i class="fas fa-plus"></i></button>
              ${job.status==='open'?`<button class="btn btn-danger btn-sm" onclick="closeJob(${job.id})"><i class="fas fa-ban"></i></button>`:`<button class="btn btn-success btn-sm" onclick="reopenJob(${job.id})"><i class="fas fa-redo"></i></button>`}
            </div>
          </div>
        </div>
      </div>`));
    $.get('/recruitment/applications',apps=>{$('#rs-apps').text(apps.length);$('#rs-int').text(apps.filter(a=>a.stage==='interview').length);$('#rs-offer').text(apps.filter(a=>a.stage==='offer').length);});
  });
}

function loadApps(){
  $.get('/recruitment/applications',{stage:$('#app-stage-f').val()},function(apps){
    const tbody=$('#apps-tbody').empty();
    if(!apps.length){tbody.html('<tr><td colspan="7" style="text-align:center;padding:32px;color:var(--text-muted)">No applications found</td></tr>');return;}
    apps.forEach(a=>{
      const sc=a.score>=80?'var(--accent-teal)':a.score>=60?'var(--accent-amber)':'var(--accent-rose)';
      tbody.append(`<tr>
        <td><div class="emp-cell"><div class="emp-avatar">${a.applicant_name.split(' ').map(n=>n[0]).join('').toUpperCase().slice(0,2)}</div><div class="emp-info"><h4>${a.applicant_name}</h4><span>${a.applicant_email}</span></div></div></td>
        <td>${a.job_post?.title||'—'}</td>
        <td style="font-size:11px">${a.job_post?.department?.name||'—'}</td>
        <td style="font-size:11px">${fmtDate(a.applied_date)}</td>
        <td><span class="badge ${stageBadge[a.stage]||'badge-pending'}">${a.stage.replace('_',' ')}</span></td>
        <td><div style="display:flex;align-items:center;gap:7px"><div style="width:60px;height:5px;background:var(--bg-hover);border-radius:3px;overflow:hidden"><div style="width:${a.score}%;height:100%;background:${sc}"></div></div><span style="font-size:11px;font-weight:600;color:${sc}">${a.score}</span></div></td>
        <td style="text-align:center"><div style="display:flex;gap:4px;justify-content:center">
          <button class="btn btn-success btn-sm" title="Move stage" onclick="moveStage(${a.id},'${a.stage}')"><i class="fas fa-arrow-right"></i></button>
          <button class="btn btn-amber btn-sm" title="Hire" onclick="hireApp(${a.id},'${a.applicant_name.replace(/'/g,"\\'")}')"><i class="fas fa-user-check"></i></button>
          <button class="btn btn-danger btn-sm" title="Reject" onclick="rejectApp(${a.id})"><i class="fas fa-times"></i></button>
        </div></td>
      </tr>`);
    });
  });
}

function loadKanban(){
  $.get('/recruitment/applications',function(apps){
    const board=$('#kanban-board').empty();
    [['applied','Applied'],['screening','Screening'],['interview','Interview'],['technical_test','Technical'],['offer','Offer']].forEach(([s,label])=>{
      const cards=apps.filter(a=>a.stage===s);
      board.append(`<div class="kanban-col">
        <div class="kanban-head"><span style="width:8px;height:8px;border-radius:50%;background:${stageColors[s]};display:inline-block"></span><span style="font-size:11px;font-weight:700">${label}</span><span style="margin-left:auto;background:var(--bg-card);font-size:10px;padding:2px 7px;border-radius:10px">${cards.length}</span></div>
        ${cards.map(c=>`<div class="kanban-card">
          <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px"><div class="emp-avatar" style="width:26px;height:26px;font-size:9px">${c.applicant_name.split(' ').map(n=>n[0]).join('').toUpperCase().slice(0,2)}</div><div style="font-size:11px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${c.applicant_name}</div></div>
          <div style="font-size:10px;color:var(--text-muted);margin-bottom:5px">${c.job_post?.title||'—'}</div>
          <div style="display:flex;justify-content:space-between;align-items:center"><div style="height:4px;width:${c.score}%;background:${c.score>=80?'var(--accent-teal)':'var(--accent-amber)'};border-radius:2px;max-width:80px"></div><span style="font-size:10px;color:var(--text-muted)">${c.score}pts</span></div>
        </div>`).join('')}
        ${!cards.length?'<div style="text-align:center;padding:16px 0;font-size:11px;color:var(--text-muted);border:1px dashed var(--border);border-radius:8px">Empty</div>':''}
      </div>`);
    });
  });
}

function preloadAddApp(jobId,jobTitle){
  $.get('/recruitment/jobs',jobs=>{
    const sel=$('#af-job').empty();
    jobs.filter(j=>j.status==='open').forEach(j=>sel.append(`<option value="${j.id}" ${j.id===jobId?'selected':''}>${j.title}</option>`));
  });
  openModal('modal-add-app');
}

function closeJob(id){$.post(`/recruitment/jobs/${id}/close`,{},()=>{showToast('Job closed','info');loadJobs();});}
function reopenJob(id){$.post(`/recruitment/jobs/${id}/reopen`,{},()=>{showToast('Job reopened','success');loadJobs();});}

function moveStage(id,current){
  const next=stageOrder[stageOrder.indexOf(current)+1];
  if(!next||next==='hired'){showToast('Already at final stage','info');return;}
  $.ajax({url:`/recruitment/applications/${id}/stage`,type:'PUT',data:{stage:next},success:()=>{showToast(`Moved to ${next.replace('_',' ')}`,'success');loadApps();if(currentRecTab==='kanban')loadKanban();}});
}
function hireApp(id,name){if(!confirm(`Hire ${name}?`))return;$.post(`/recruitment/applications/${id}/hire`,{},()=>{showToast(`${name} hired!`,'success');loadApps();});}
function rejectApp(id){$.post(`/recruitment/applications/${id}/reject`,{},()=>{showToast('Rejected','info');loadApps();if(currentRecTab==='kanban')loadKanban();});}

function submitJob(){
  const d={title:$('#jf-title').val().trim(),department_id:$('#jf-dept').val(),employment_type:$('#jf-type').val(),salary_range:$('#jf-salary').val(),vacancies:$('#jf-vac').val(),deadline_date:$('#jf-deadline').val(),requirements:$('#jf-req').val(),benefits:$('#jf-benefits').val()};
  if(!d.title||!d.department_id){showToast('Title and department required','error');return;}
  $.post('/recruitment/jobs',d,()=>{showToast('Job posted!','success');closeModal('modal-add-job');$('#jf-title,#jf-salary,#jf-req,#jf-benefits,#jf-deadline').val('');$('#jf-vac').val(1);loadJobs();})
   .fail(xhr=>showToast(Object.values(xhr.responseJSON?.errors||{}).flat()[0]||'Error','error'));
}
function submitApp(){
  const d={job_post_id:$('#af-job').val(),applicant_name:$('#af-name').val().trim(),applicant_email:$('#af-email').val().trim(),applicant_phone:$('#af-phone').val().trim(),score:$('#af-score').val(),cover_letter:$('#af-cover').val()};
  if(!d.job_post_id||!d.applicant_name||!d.applicant_email){showToast('Fill required fields','error');return;}
  $.post('/recruitment/applications',d,()=>{showToast('Application added!','success');closeModal('modal-add-app');$('#af-name,#af-email,#af-phone,#af-cover').val('');$('#af-score').val(70);loadApps();loadJobs();})
   .fail(xhr=>showToast(Object.values(xhr.responseJSON?.errors||{}).flat()[0]||'Error','error'));
}
</script>
@endpush