@extends('layouts.app')
@section('title','Leave Management')
@section('page-title','Leave Management')
@section('breadcrumb','SpaceHR/ Leave Management')
@section('content')
<div class="page-body">
  <div class="page-header animate-entry">
    <div class="page-header-title"><h1>Leave Management</h1><p>Apply, approve and track all employee leave requests</p></div>
    <button class="btn btn-primary" onclick="openModal('modal-apply')"><i class="fas fa-plus"></i> Apply Leave</button>
  </div>
  <div class="stat-grid">
    <div class="stat-card amber animate-entry"><div class="stat-icon"><i class="fas fa-clock"></i></div><div class="stat-num" id="ls-pending">—</div><div class="stat-label">Pending</div></div>
    <div class="stat-card teal animate-entry"><div class="stat-icon"><i class="fas fa-check-circle"></i></div><div class="stat-num" id="ls-approved">—</div><div class="stat-label">Approved</div></div>
    <div class="stat-card rose animate-entry"><div class="stat-icon"><i class="fas fa-times-circle"></i></div><div class="stat-num" id="ls-rejected">—</div><div class="stat-label">Rejected</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="ls-onleave">—</div><div class="stat-label">On Leave Now</div></div>
  </div>
  <div class="tab-row">
    <button class="tab-btn active" onclick="showLvTab('requests',this)">Leave Requests</button>
    <button class="tab-btn" onclick="showLvTab('balance',this);loadBalances()">Balances</button>
    <button class="tab-btn" onclick="showLvTab('types',this);loadTypes()">Leave Policy</button>
  </div>

  <!-- Requests -->
  <div id="lv-requests">
    <div class="panel">
      <div class="panel-header">
        <span class="panel-title">All Leave Requests</span>
        <div style="display:flex;gap:8px">
          <select class="form-control" id="lv-status-f" style="width:130px" onchange="loadLeaves()">
            <option value="">All Status</option><option value="pending">Pending</option><option value="approved">Approved</option><option value="rejected">Rejected</option>
          </select>
          <select class="form-control" id="lv-type-f" style="width:150px" onchange="loadLeaves()"><option value="">All Types</option></select>
        </div>
      </div>
      <div id="lv-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="lv-table" style="display:none">
        <thead><tr><th>Employee</th><th>Leave Type</th><th>From</th><th>To</th><th>Days</th><th>Reason</th><th>Applied</th><th>Status</th><th style="text-align:center">Actions</th></tr></thead>
        <tbody id="lv-tbody"></tbody>
      </table>
    </div>
  </div>

  <!-- Balance -->
  <div id="lv-balance" style="display:none">
    <div class="panel">
      <div class="panel-header">
        <span class="panel-title">Employee Leave Balances — {{ now()->year }}</span>
        <div style="display:flex;gap:8px">
          <input class="form-control" id="balance-search" placeholder="Search employee…" style="width:200px" oninput="filterBalances()">
          <button class="btn btn-secondary btn-sm" onclick="$.post('/leaves/accrue',{},r=>{showToast(r.message,'success');loadBalances();})"><i class="fas fa-sync"></i> Accrue</button>
        </div>
      </div>
      <table class="data-table">
        <thead><tr><th>Employee</th><th>Department</th><th>Annual</th><th>Sick</th><th>Casual</th><th>Maternity</th><th>Paternity</th><th>Total Used</th></tr></thead>
        <tbody id="balance-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>

  <!-- Policy -->
  <div id="lv-types" style="display:none">
    <div style="display:flex;justify-content:flex-end;margin-bottom:16px">
      <button class="btn btn-primary btn-sm" onclick="openTypeModal()"><i class="fas fa-plus"></i> Add Leave Type</button>
    </div>
    <div id="types-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>

<!-- Apply Leave Modal -->
<div class="modal-overlay" id="modal-apply">
  <div class="modal" style="max-width:520px">
    <div class="modal-header"><span class="modal-title"><i class="fas fa-calendar-plus" style="color:var(--accent-teal);margin-right:8px"></i>Apply for Leave</span><button class="modal-close" onclick="closeModal('modal-apply')"><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="lf-emp" onchange="showBalance()"><option value="">Select…</option></select></div>
        <div class="form-group"><label class="form-label">Leave Type *</label><select class="form-control" id="lf-type" onchange="showBalance()"><option value="">Select…</option></select></div>
        <div class="form-group"><label class="form-label">Balance</label><div id="lf-balance" style="background:var(--bg-hover);border-radius:var(--radius-sm);padding:9px 12px;font-size:12px;color:var(--text-secondary)">Select employee &amp; type</div></div>
        <div class="form-group"><label class="form-label">From Date *</label><input type="date" class="form-control" id="lf-from" onchange="calcDays()"></div>
        <div class="form-group"><label class="form-label">To Date *</label><input type="date" class="form-control" id="lf-to" onchange="calcDays()"></div>
        <div class="form-group" style="grid-column:1/-1"><div id="lf-days-preview" style="display:none;background:rgba(0,212,255,.06);border:1px solid rgba(0,212,255,.15);border-radius:8px;padding:8px 14px;font-size:12px;color:var(--accent-cyan)"><i class="fas fa-info-circle"></i> <span id="lf-days-text"></span></div></div>
        <div class="form-group full"><label class="form-label">Reason *</label><textarea class="form-control" id="lf-reason" rows="3" placeholder="Reason for leave…"></textarea></div>
      </div>
    </div>
    <div class="modal-footer"><button class="btn btn-secondary" onclick="closeModal('modal-apply')">Cancel</button><button class="btn btn-primary" id="btn-apply" onclick="submitLeave()"><i class="fas fa-paper-plane"></i> Submit</button></div>
  </div>
</div>

<!-- Reject Modal -->
<div class="modal-overlay" id="modal-reject">
  <div class="modal" style="max-width:400px">
    <div class="modal-header"><span class="modal-title"><i class="fas fa-times-circle" style="color:var(--accent-rose);margin-right:8px"></i>Reject Leave</span><button class="modal-close" onclick="closeModal('modal-reject')"><i class="fas fa-times"></i></button></div>
    <div class="modal-body"><input type="hidden" id="reject-id"><div class="form-group"><label class="form-label">Reason</label><textarea class="form-control" id="reject-reason" rows="3" placeholder="Optional reason…"></textarea></div></div>
    <div class="modal-footer"><button class="btn btn-secondary" onclick="closeModal('modal-reject')">Cancel</button><button class="btn btn-danger" onclick="confirmReject()"><i class="fas fa-times"></i> Reject</button></div>
  </div>
</div>

<!-- Add Type Modal -->
<div class="modal-overlay" id="modal-add-type">
  <div class="modal" style="max-width:460px">
    <div class="modal-header"><span class="modal-title" id="type-modal-title"><i class="fas fa-plus-circle" style="color:var(--accent-cyan);margin-right:8px"></i>Add Leave Type</span><button class="modal-close" onclick="closeModal('modal-add-type')"><i class="fas fa-times"></i></button></div>
    <div class="modal-body">
      <input type="hidden" id="tf-id">
      <div class="form-grid">
        <div class="form-group"><label class="form-label">Name *</label><input class="form-control" id="tf-name" placeholder="Study Leave"></div>
        <div class="form-group"><label class="form-label">Code *</label><input class="form-control" id="tf-code" placeholder="STL" maxlength="10" oninput="this.value=this.value.toUpperCase()"></div>
        <div class="form-group"><label class="form-label">Days Per Year *</label><input class="form-control" id="tf-days" type="number" value="5" min="0"></div>
        <div class="form-group"><label class="form-label">Color</label><input class="form-control" id="tf-color" type="color" value="#00d4ff"></div>
        <div class="form-group"><label class="form-label">Paid?</label><select class="form-control" id="tf-paid"><option value="1">Yes (Paid)</option><option value="0">No (Unpaid)</option></select></div>
        <div class="form-group"><label class="form-label">Carry Forward?</label><select class="form-control" id="tf-carry"><option value="0">No</option><option value="1">Yes</option></select></div>
        <div class="form-group"><label class="form-label">Max Carry Forward</label><input class="form-control" id="tf-max-carry" type="number" value="0" min="0"></div>
        <div class="form-group"><label class="form-label">Document Required?</label><select class="form-control" id="tf-document"><option value="0">No</option><option value="1">Yes</option></select></div>
        <div class="form-group full"><label class="form-label">Status</label><select class="form-control" id="tf-active"><option value="1">Active</option><option value="0">Inactive</option></select></div>
      </div>
    </div>
    <div class="modal-footer"><button class="btn btn-secondary" onclick="closeModal('modal-add-type')">Cancel</button><button class="btn btn-primary" id="btn-save-type" onclick="submitType()"><i class="fas fa-check"></i> Add</button></div>
  </div>
</div>
@endsection
@push('scripts')
<script>
let allBalances=[];
let leaveTypesCache={};
$(document).ready(function(){loadLeaves();loadTypeFilter();loadEmpSelect('#lf-emp');});

function showLvTab(tab,btn){$('#lv-requests,#lv-balance,#lv-types').hide();$(`#lv-${tab}`).show();$(btn).addClass('active').siblings('.tab-btn').removeClass('active');}

function loadTypeFilter(){$.get('/leaves/types/all',types=>types.forEach(t=>{$('#lv-type-f,#lf-type').append(`<option value="${t.id}">${t.name} (${t.code})</option>`);}));}

function loadLeaves(){
  $('#lv-loading').show();$('#lv-table').hide();
  $.get('/leaves/list',{status:$('#lv-status-f').val(),leave_type_id:$('#lv-type-f').val()},function(res){
    const d=res.data||[];
    $('#ls-pending').text(res.meta?.pending||0);$('#ls-approved').text(res.meta?.approved||0);$('#ls-rejected').text(res.meta?.rejected||0);$('#ls-onleave').text(res.meta?.on_leave||0);
    $('#lv-loading').hide();$('#lv-table').show();
    const tbody=$('#lv-tbody').empty();
    if(!d.length){tbody.html('<tr><td colspan="9" style="text-align:center;padding:36px;color:var(--text-muted)"><i class="fas fa-calendar-times fa-2x" style="display:block;margin-bottom:12px;opacity:.3"></i>No leave requests found</td></tr>');return;}
    d.forEach(lv=>tbody.append(`<tr>
      <td><div class="emp-cell"><div class="emp-avatar">${lv.employee?.initials||'?'}</div><div class="emp-info"><h4>${lv.employee?.full_name||'—'}</h4><span>${lv.employee?.department?.name||''}</span></div></div></td>
      <td><span style="display:inline-flex;align-items:center;gap:5px"><span style="width:8px;height:8px;border-radius:50%;background:${lv.leave_type?.color||'#00d4ff'};display:inline-block"></span>${lv.leave_type?.name||'—'}</span></td>
      <td style="font-size:11px">${fmtDate(lv.from_date)}</td>
      <td style="font-size:11px">${fmtDate(lv.to_date)}</td>
      <td><span style="font-family:'Syne',sans-serif;font-weight:800;color:var(--accent-cyan)">${lv.days}</span></td>
      <td style="font-size:11px;color:var(--text-secondary);max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis" title="${lv.reason}">${lv.reason}</td>
      <td style="font-size:10px;color:var(--text-muted)">${fmtDate(lv.created_at)}</td>
      <td>${statusBadge(lv.status)}</td>
      <td style="text-align:center">
        ${lv.status==='pending'?`<div style="display:flex;gap:4px;justify-content:center"><button class="btn btn-success btn-sm" title="Approve" onclick="approveLeave(${lv.id})"><i class="fas fa-check"></i></button><button class="btn btn-danger btn-sm" title="Reject" onclick="openReject(${lv.id})"><i class="fas fa-times"></i></button></div>`:`<span style="font-size:10px;color:var(--text-muted)">Actioned</span>`}
      </td>
    </tr>`));
  }).fail(()=>$('#lv-loading').html('<i class="fas fa-exclamation-triangle" style="color:var(--accent-rose)"></i> Error <button class="btn btn-sm btn-secondary" onclick="loadLeaves()">Retry</button>'));
}

function approveLeave(id){$.post(`/leaves/${id}/approve`,{},()=>{showToast('Leave approved!','success');loadLeaves();}).fail(xhr=>showToast(xhr.responseJSON?.message||'Error','error'));}
function openReject(id){$('#reject-id').val(id);$('#reject-reason').val('');openModal('modal-reject');}
function confirmReject(){$.post(`/leaves/${$('#reject-id').val()}/reject`,{reason:$('#reject-reason').val()},()=>{showToast('Leave rejected','info');closeModal('modal-reject');loadLeaves();});}

function loadBalances(){
  $.get('/leaves/balances/all',function(employees){
    allBalances=employees;renderBalances(employees);
  });
}
function renderBalances(employees){
  const tbody=$('#balance-tbody').empty();
  if(!employees.length){tbody.html('<tr><td colspan="8" style="text-align:center;padding:28px;color:var(--text-muted)">No employees</td></tr>');return;}
  employees.forEach(emp=>{
    const bm={};(emp.leave_balances||[]).forEach(b=>{bm[b.leave_type?.code]=b;});
    const cell=code=>{const b=bm[code];if(!b)return'<td style="color:var(--text-muted)">—</td>';const av=parseFloat(b.available??(b.entitled-b.used-b.pending));const c=av>5?'var(--accent-teal)':av>0?'var(--accent-amber)':'var(--accent-rose)';return`<td><span style="color:${c};font-weight:700">${av}</span><span style="color:var(--text-muted);font-size:10px">/${b.entitled}</span></td>`;};
    const tu=(emp.leave_balances||[]).reduce((s,b)=>s+parseFloat(b.used||0),0);
    tbody.append(`<tr><td><div class="emp-cell"><div class="emp-avatar">${emp.initials}</div><div class="emp-info"><h4>${emp.full_name}</h4><span>${emp.employee_id}</span></div></div></td><td style="font-size:11px">${emp.department?.name||'—'}</td>${cell('AL')}${cell('SL')}${cell('CL')}${cell('ML')}${cell('PL')}<td><strong>${tu}</strong></td></tr>`);
  });
}
function filterBalances(){const q=$('#balance-search').val().toLowerCase();renderBalances(q?allBalances.filter(e=>e.full_name.toLowerCase().includes(q)||(e.employee_id||'').toLowerCase().includes(q)):allBalances);}

function loadTypes(){
  $.get('/leaves/types/all',{include_inactive:1},function(types){
    const grid=$('#types-grid').empty();
    leaveTypesCache={};
    if(!types.length){grid.html('<div style="grid-column:1/-1;text-align:center;padding:40px;color:var(--text-muted)">No leave types found</div>');return;}
    types.forEach(t=>{
      leaveTypesCache[t.id]=t;
      grid.append(`<div class="panel"><div class="panel-body">
      <div style="display:flex;align-items:center;gap:12px;margin-bottom:14px">
        <div style="width:44px;height:44px;border-radius:12px;background:${t.color}22;display:grid;place-items:center"><i class="fas fa-calendar-check" style="color:${t.color};font-size:18px"></i></div>
        <div><div style="font-family:'Syne',sans-serif;font-weight:700;font-size:14px">${t.name}</div><div style="font-size:10px;color:var(--text-muted);letter-spacing:1px">CODE: ${t.code}</div></div>
        <span class="badge ${t.is_active?'badge-active':'badge-inactive'}" style="margin-left:auto">${t.is_active?'Active':'Inactive'}</span>
      </div>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
        <div style="background:var(--bg-hover);border-radius:8px;padding:10px"><div style="font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px">Days/Year</div><div style="font-family:'Syne',sans-serif;font-size:20px;font-weight:800;color:${t.color}">${t.days_per_year}</div></div>
        <div style="background:var(--bg-hover);border-radius:8px;padding:10px"><div style="font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px">Type</div><div style="font-size:13px;font-weight:600">${t.is_paid?'✅ Paid':'❌ Unpaid'}</div></div>
        <div style="background:var(--bg-hover);border-radius:8px;padding:10px"><div style="font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px">Carry Fwd</div><div style="font-size:12px;font-weight:600">${t.carry_forward?`Yes (max ${t.max_carry_forward})`:'No'}</div></div>
        <div style="background:var(--bg-hover);border-radius:8px;padding:10px"><div style="font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px">Document</div><div style="font-size:12px;font-weight:600">${t.requires_document?'Required':'Optional'}</div></div>
      </div>
      <div style="display:flex;gap:6px;margin-top:12px">
        <button class="btn btn-secondary btn-sm" onclick="openTypeModal(${t.id})"><i class="fas fa-pen"></i> Edit</button>
        <button class="btn btn-${t.is_active?'danger':'success'} btn-sm" onclick="toggleType(${t.id},${t.is_active?1:0})"><i class="fas fa-${t.is_active?'ban':'check'}"></i> ${t.is_active?'Deactivate':'Activate'}</button>
      </div>
    </div></div>`);
    });
  });
}
function toggleType(id,active){$.ajax({url:`/leaves/types/${id}`,type:'PUT',data:{is_active:active?0:1},success:()=>{showToast('Updated','success');refreshTypeLists();}});}

function showBalance(){
  const empId=$('#lf-emp').val(),typeId=$('#lf-type').val();
  if(!empId||!typeId){$('#lf-balance').html('Select employee &amp; type');return;}
  $.get(`/leaves/balance/${empId}`,balances=>{
    const b=balances.find(x=>String(x.leave_type_id)===String(typeId));
    if(b){const av=parseFloat(b.available??(b.entitled-b.used-b.pending));const c=av>5?'var(--accent-teal)':av>0?'var(--accent-amber)':'var(--accent-rose)';$('#lf-balance').html(`<span style="color:${c};font-weight:700">${av} days available</span> <span style="color:var(--text-muted)">of ${b.entitled} (${b.used} used, ${b.pending} pending)</span>`);}
    else $('#lf-balance').html('<span style="color:var(--text-muted)">No balance data</span>');
  });
}

function calcDays(){
  const from=$('#lf-from').val(),to=$('#lf-to').val();
  if(!from||!to)return;
  let days=0,d=new Date(from),end=new Date(to);
  while(d<=end){if(d.getDay()!==0&&d.getDay()!==6)days++;d.setDate(d.getDate()+1);}
  if(days>0){$('#lf-days-text').text(`${days} working day${days>1?'s':''} (${fmtDate(from)} – ${fmtDate(to)})`);$('#lf-days-preview').show();}
}

function submitLeave(){
  const d={employee_id:$('#lf-emp').val(),leave_type_id:$('#lf-type').val(),from_date:$('#lf-from').val(),to_date:$('#lf-to').val(),reason:$('#lf-reason').val().trim()};
  if(!d.employee_id||!d.leave_type_id||!d.from_date||!d.to_date||!d.reason){showToast('Fill all required fields','error');return;}
  const $btn=$('#btn-apply').prop('disabled',true).html('<i class="fas fa-spinner fa-spin"></i> Submitting…');
  $.post('/leaves',d,()=>{showToast('Leave request submitted!','success');closeModal('modal-apply');loadLeaves();$('#lf-emp,#lf-type').val('');$('#lf-from,#lf-to,#lf-reason').val('');$('#lf-days-preview').hide();$('#lf-balance').html('Select employee &amp; type');})
   .fail(xhr=>showToast(xhr.responseJSON?.message||Object.values(xhr.responseJSON?.errors||{}).flat()[0]||'Error','error'))
   .always(()=>$btn.prop('disabled',false).html('<i class="fas fa-paper-plane"></i> Submit'));
}

function submitType(){
  const d={name:$('#tf-name').val().trim(),code:$('#tf-code').val().trim(),days_per_year:$('#tf-days').val(),color:$('#tf-color').val(),is_paid:$('#tf-paid').val(),carry_forward:$('#tf-carry').val()};
  if(!d.name||!d.code){showToast('Name and code required','error');return;}
  $.post('/leaves/types',d,()=>{showToast('Leave type added!','success');closeModal('modal-add-type');$('#tf-name,#tf-code').val('');loadTypes();$('#lf-type').html('<option value="">Select…</option>');loadTypeFilter();})
   .fail(xhr=>showToast(Object.values(xhr.responseJSON?.errors||{}).flat()[0]||'Error','error'));
}
</script>
@endpush