@extends('layouts.app')
@section('title','Payroll')
@section('page-title','Salary & Payroll')
@section('breadcrumb',  $companyName . ' / Payroll')
@section('content')
<div class="page-body">
  <div class="page-header animate-entry">
    <div class="page-header-title"><h1>Salary &amp; Payroll</h1><p>Manage salary structures, run payroll and generate payslips</p></div>
    <div style="display:flex;gap:10px">
      <button class="btn btn-secondary" onclick="openModal('modal-run')"><i class="fas fa-cog"></i> Run Payroll</button>
      <button class="btn btn-primary" onclick="disburseAll()"><i class="fas fa-paper-plane"></i> Disburse All</button>
    </div>
  </div>
  <div class="stat-grid">
    <div class="stat-card cyan animate-entry"><div class="stat-icon"><i class="fas fa-dollar-sign"></i></div><div class="stat-num" id="ss-total">—</div><div class="stat-label">Total Payroll</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="ss-proc">—</div><div class="stat-label">Processed</div></div>
    <div class="stat-card amber animate-entry"><div class="stat-icon"><i class="fas fa-hourglass-half"></i></div><div class="stat-num" id="ss-pend">—</div><div class="stat-label">Pending</div></div>
    <div class="stat-card violet animate-entry"><div class="stat-icon"><i class="fas fa-chart-pie"></i></div><div class="stat-num" id="ss-avg">—</div><div class="stat-label">Avg Salary</div></div>
  </div>
  <div class="tab-row">
    <button class="tab-btn active" onclick="showSalTab('list',this)">Payroll List</button>
    <button class="tab-btn" onclick="showSalTab('payslip',this)">Payslip Generator</button>
    <button class="tab-btn" onclick="showSalTab('adjustments',this);loadAdjustmentsTab()">Bonus &amp; Arrears</button>
    <button class="tab-btn" onclick="showSalTab('bands',this);loadBands()">Salary Bands</button>
    <button class="tab-btn" onclick="showSalTab('structures',this);loadStructures()">Structures</button>
    <button class="tab-btn" onclick="showSalTab('financials',this);loadFinancialTab()">Employee Financials</button>
    <button class="tab-btn" onclick="showSalTab('settlement',this);loadSettlementTab()">Final Settlement</button>
  </div>

  <!-- Payroll List -->
  <div id="sal-list">
    <div class="panel">
      <div class="panel-header">
        <span class="panel-title">Payroll — <span id="month-label">{{ now()->format('F Y') }}</span></span>
        <div style="display:flex;gap:8px">
          <input type="month" class="form-control" id="payroll-month" value="{{ now()->format('Y-m') }}" onchange="loadPayroll()">
          <button class="btn btn-success btn-sm" onclick="disburseAll()"><i class="fas fa-paper-plane"></i> Disburse All</button>
        </div>
      </div>
      <div id="payroll-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="payroll-table" style="display:none">
        <thead><tr><th>Employee</th><th>Basic</th><th>Allowances</th><th>Overtime</th><th>Gross</th><th>Deductions</th><th>Net Pay</th><th>Status</th><th style="text-align:center">Actions</th></tr></thead>
        <tbody id="payroll-tbody"></tbody>
      </table>
    </div>
  </div>

  <!-- Bonus & Arrears -->
  <div id="sal-adjustments" style="display:none">
    <div class="panel">
      <div class="panel-header">
        <span class="panel-title"><i class="fas fa-gift" style="color:var(--accent-amber);margin-right:8px"></i>Bonus, Arrear &amp; Profit Share</span>
        <button class="btn btn-primary btn-sm" onclick="openAdjustmentModal()"><i class="fas fa-plus"></i> Add Payment</button>
      </div>
      <div class="panel-body">
        <div class="form-grid">
          <div class="form-group"><label class="form-label">Year</label><input type="number" class="form-control" id="adj-filter-year" value="{{ now()->year }}" min="2000" max="2100"></div>
          <div class="form-group"><label class="form-label">Type</label><select class="form-control" id="adj-filter-type"><option value="">All Types</option><option value="eid_bonus">Eid Bonus</option><option value="profit_share">Profit Share</option><option value="arrear">Arrear</option><option value="performance_bonus">Performance Bonus</option><option value="other">Other</option></select></div>
        </div>
        <button class="btn btn-secondary" style="margin-top:12px" onclick="loadAdjustments()"><i class="fas fa-filter"></i> Apply Filter</button>
      </div>
      <table class="data-table">
        <thead><tr><th>Employee</th><th>Year</th><th>Type</th><th>Title</th><th>Gross</th><th>Deductions</th><th>Net</th><th>Status</th><th style="text-align:center">Actions</th></tr></thead>
        <tbody id="adjustments-tbody"><tr><td colspan="9" style="text-align:center;padding:28px;color:var(--text-muted)">Open tab to load payments</td></tr></tbody>
      </table>
    </div>
  </div>

  <!-- Payslip -->
  <div id="sal-payslip" style="display:none">
    <div class="grid-2">
      <div class="panel">
        <div class="panel-header"><span class="panel-title"><i class="fas fa-file-invoice-dollar" style="color:var(--accent-cyan);margin-right:8px"></i>Generate Payslip</span></div>
        <div class="panel-body">
          <div class="form-grid">
            <div class="form-group"><label class="form-label">Employee</label><select class="form-control" id="slip-emp"><option value="">Select…</option></select></div>
            <div class="form-group"><label class="form-label">Month / Year</label><input type="month" class="form-control" id="slip-month" value="{{ now()->format('Y-m') }}"></div>
          </div>
          <button class="btn btn-primary btn-block" style="margin-top:16px" onclick="generatePayslip()"><i class="fas fa-file-invoice-dollar"></i> Generate Payslip</button>
        </div>
      </div>
      <div id="payslip-wrap" style="display:none"><div class="salary-slip" id="payslip-content"></div></div>
      <div id="payslip-placeholder" style="display:flex;align-items:center;justify-content:center;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius)">
        <div style="text-align:center;color:var(--text-muted);padding:40px"><i class="fas fa-file-invoice-dollar fa-3x" style="display:block;margin-bottom:14px;opacity:.3"></i><p style="font-size:13px">Select employee &amp; month</p></div>
      </div>
    </div>
  </div>

  <!-- Bands -->
  <div id="sal-bands" style="display:none">
    <div class="panel">
      <div class="panel-header"><span class="panel-title">Salary Bands by Grade</span><button class="btn btn-primary btn-sm" onclick="openModal('modal-add-band')"><i class="fas fa-plus"></i> Add Band</button></div>
      <table class="data-table">
        <thead><tr><th>Grade</th><th>Level</th><th>Min Salary</th><th>Max Salary</th><th>Employees</th><th>Avg Salary</th></tr></thead>
        <tbody id="bands-tbody"><tr><td colspan="6" style="text-align:center;padding:28px;color:var(--text-muted)"><i class="fas fa-spinner fa-spin"></i></td></tr></tbody>
      </table>
    </div>
  </div>

  <!-- Structures -->
  <div id="sal-structures" style="display:none">
    <div class="panel">
      <div class="panel-header"><span class="panel-title">Employee Salary Structures</span></div>
      <table class="data-table">
        <thead><tr><th>Employee</th><th>Basic</th><th>HRA %</th><th>Transport</th><th>Medical</th><th>Tax %</th><th>PF %</th><th>Est. Net</th></tr></thead>
        <tbody id="struct-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>

  <!-- Employee Financials -->
  <div id="sal-financials" style="display:none">
    <div class="grid-2">
      <div class="panel">
        <div class="panel-header"><span class="panel-title"><i class="fas fa-wallet" style="color:var(--accent-cyan);margin-right:8px"></i>Employee Savings &amp; Salary</span></div>
        <div class="panel-body">
          <div class="form-grid">
            <div class="form-group full"><label class="form-label">Employee</label><select class="form-control" id="fin-emp"><option value="">Select employee...</option></select></div>
            <div class="form-group"><label class="form-label">As Of Date</label><input type="date" class="form-control" id="fin-date" value="{{ now()->format('Y-m-d') }}"></div>
          </div>
          <button class="btn btn-primary" style="margin-top:14px" onclick="checkFinancials()"><i class="fas fa-search-dollar"></i> Check Financials</button>
        </div>
      </div>
      <div class="panel">
        <div class="panel-header"><span class="panel-title">Financial Snapshot</span></div>
        <div class="panel-body" id="financial-summary">
          <div style="text-align:center;padding:28px;color:var(--text-muted)">Select an employee to check salary, PF, GF and other savings.</div>
        </div>
      </div>
    </div>
    <div class="panel" style="margin-top:20px">
      <div class="panel-header"><span class="panel-title">Payroll History</span></div>
      <table class="data-table">
        <thead><tr><th>Period</th><th>Gross</th><th>Net</th><th>PF</th><th>Tax</th><th>Other Ded.</th><th>Status</th></tr></thead>
        <tbody id="financial-payroll"><tr><td colspan="7" style="text-align:center;padding:28px;color:var(--text-muted)">No employee selected</td></tr></tbody>
      </table>
    </div>
    <div class="panel" style="margin-top:20px">
      <div class="panel-header"><span class="panel-title">Configured Settlement Savings</span></div>
      <table class="data-table">
        <thead><tr><th>Component</th><th>Bucket</th><th>Source</th><th style="text-align:right">Current Amount</th></tr></thead>
        <tbody id="financial-components"><tr><td colspan="4" style="text-align:center;padding:28px;color:var(--text-muted)">No employee selected</td></tr></tbody>
      </table>
    </div>
  </div>

  <!-- Final Settlement -->
  <div id="sal-settlement" style="display:none">
    <div class="grid-2">
      <div class="panel">
        <div class="panel-header">
          <span class="panel-title"><i class="fas fa-handshake" style="color:var(--accent-cyan);margin-right:8px"></i>Employee Final Settlement</span>
          <button class="btn btn-secondary btn-sm" onclick="openSettlementConfig()"><i class="fas fa-sliders"></i> Configure</button>
        </div>
        <div class="panel-body">
          <div class="form-grid">
            <div class="form-group full"><label class="form-label">Employee</label><select class="form-control" id="settle-emp"><option value="">Select employee...</option></select></div>
            <div class="form-group"><label class="form-label">Settlement Date</label><input type="date" class="form-control" id="settle-date" value="{{ now()->format('Y-m-d') }}"></div>
            <div class="form-group"><label class="form-label">Last Working Date</label><input type="date" class="form-control" id="settle-last" value="{{ now()->format('Y-m-d') }}"></div>
            <div class="form-group full"><label class="form-label">Notes</label><textarea class="form-control" id="settle-notes" rows="3" placeholder="Exit reason, handover status, clearance note"></textarea></div>
          </div>
          <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap">
            <button class="btn btn-secondary" onclick="previewSettlement()"><i class="fas fa-calculator"></i> Preview</button>
            <button class="btn btn-primary" onclick="saveSettlement('approved', false)"><i class="fas fa-save"></i> Save Approved</button>
            <button class="btn btn-danger" onclick="saveSettlement('paid', true)"><i class="fas fa-user-slash"></i> Pay &amp; Terminate</button>
          </div>
        </div>
      </div>

      <div class="panel">
        <div class="panel-header"><span class="panel-title"><i class="fas fa-piggy-bank" style="color:var(--accent-teal);margin-right:8px"></i>Savings &amp; Salary Snapshot</span></div>
        <div class="panel-body" id="settlement-summary">
          <div style="text-align:center;padding:28px;color:var(--text-muted)">Select an employee and preview settlement.</div>
        </div>
      </div>
    </div>

    <div class="panel" style="margin-top:20px">
      <div class="panel-header"><span class="panel-title">Settlement Calculation</span></div>
      <table class="data-table">
        <thead><tr><th>Component</th><th>Bucket</th><th>Source</th><th style="text-align:right">Amount</th></tr></thead>
        <tbody id="settlement-items"><tr><td colspan="4" style="text-align:center;padding:28px;color:var(--text-muted)">No preview yet</td></tr></tbody>
        <tfoot id="settlement-totals"></tfoot>
      </table>
    </div>

    <div class="panel" style="margin-top:20px">
      <div class="panel-header"><span class="panel-title">Recent Settlements</span><button class="btn btn-secondary btn-sm" onclick="loadSettlements()"><i class="fas fa-sync"></i> Refresh</button></div>
      <table class="data-table">
        <thead><tr><th>Employee</th><th>Date</th><th>Status</th><th>Earnings</th><th>Savings</th><th>Deductions</th><th>Net Payable</th></tr></thead>
        <tbody id="settlements-tbody"><tr><td colspan="7" style="text-align:center;padding:28px;color:var(--text-muted)">Open tab to load settlements</td></tr></tbody>
      </table>
    </div>
  </div>
</div>

<div class="modal-overlay" id="modal-run">
  <div class="modal" style="max-width:440px">
    <div class="modal-header"><span class="modal-title"><i class="fas fa-cog" style="color:var(--accent-cyan);margin-right:8px"></i>Run Payroll</span><button class="modal-close" onclick="closeModal('modal-run')"><i class="fas fa-times"></i></button></div>
    <div class="modal-body">
      <div class="form-group" style="margin-bottom:14px"><label class="form-label">Pay Period</label><input type="month" class="form-control" id="rp-period" value="{{ now()->format('Y-m') }}"></div>
      <div style="background:rgba(0,212,255,.06);border:1px solid rgba(0,212,255,.15);border-radius:8px;padding:12px;font-size:12px;color:var(--text-secondary)"><i class="fas fa-info-circle" style="color:var(--accent-cyan)"></i> Calculates salaries for all active employees based on salary structures and attendance. Existing records are skipped.</div>
    </div>
    <div class="modal-footer"><button class="btn btn-secondary" onclick="closeModal('modal-run')">Cancel</button><button class="btn btn-primary" onclick="runPayroll()"><i class="fas fa-play"></i> Run Now</button></div>
  </div>
</div>

<div class="modal-overlay" id="modal-add-band">
  <div class="modal" style="max-width:400px">
    <div class="modal-header"><span class="modal-title"><i class="fas fa-layer-group" style="color:var(--accent-violet);margin-right:8px"></i>Add Salary Band</span><button class="modal-close" onclick="closeModal('modal-add-band')"><i class="fas fa-times"></i></button></div>
    <div class="modal-body">
      <div class="form-group" style="margin-bottom:14px"><label class="form-label">Grade *</label><input class="form-control" id="band-grade" placeholder="L6"></div>
      <div class="form-group" style="margin-bottom:14px"><label class="form-label">Level Name *</label><input class="form-control" id="band-level" placeholder="Vice President"></div>
      <div class="form-grid">
        <div class="form-group"><label class="form-label">Min Salary ($)</label><input class="form-control" id="band-min" type="number" placeholder="18000" min="0"></div>
        <div class="form-group"><label class="form-label">Max Salary ($)</label><input class="form-control" id="band-max" type="number" placeholder="30000" min="0"></div>
      </div>
    </div>
    <div class="modal-footer"><button class="btn btn-secondary" onclick="closeModal('modal-add-band')">Cancel</button><button class="btn btn-primary" onclick="submitBand()"><i class="fas fa-check"></i> Add</button></div>
  </div>
</div>

<div class="modal-overlay" id="modal-adjustment">
  <div class="modal" style="max-width:620px">
    <div class="modal-header"><span class="modal-title"><i class="fas fa-gift" style="color:var(--accent-amber);margin-right:8px"></i>Add Bonus / Arrear Payment</span><button class="modal-close" onclick="closeModal('modal-adjustment')"><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="adj-emp"><option value="">Select employee...</option><option value="all">All Active Employees</option></select></div>
        <div class="form-group"><label class="form-label">Year</label><input type="number" class="form-control" id="adj-year" value="{{ now()->year }}" min="2000" max="2100"></div>
        <div class="form-group"><label class="form-label">Payment Type</label><select class="form-control" id="adj-type"><option value="eid_bonus">Eid Bonus</option><option value="profit_share">Profit Share</option><option value="arrear">Arrear</option><option value="performance_bonus">Performance Bonus</option><option value="other">Other</option></select></div>
        <div class="form-group full"><label class="form-label">Title</label><input class="form-control" id="adj-title" value="Eid Bonus"></div>
        <div class="form-group"><label class="form-label">Gross Amount</label><input type="number" class="form-control" id="adj-amount" min="0" step="0.01"></div>
        <div class="form-group"><label class="form-label">Status</label><select class="form-control" id="adj-status"><option value="approved">Approved</option><option value="paid">Paid</option><option value="draft">Draft</option></select></div>
        <div class="form-group"><label class="form-label">Tax Deduction</label><input type="number" class="form-control" id="adj-tax" min="0" step="0.01" value="0"></div>
        <div class="form-group"><label class="form-label">PF Deduction</label><input type="number" class="form-control" id="adj-pf" min="0" step="0.01" value="0"></div>
        <div class="form-group"><label class="form-label">Other Deduction</label><input type="number" class="form-control" id="adj-other" min="0" step="0.01" value="0"></div>
        <div class="form-group"><label class="form-label">Paid Date</label><input type="date" class="form-control" id="adj-paid-date" value="{{ now()->format('Y-m-d') }}"></div>
        <div class="form-group full"><label class="form-label">Notes</label><textarea class="form-control" id="adj-notes" rows="3" placeholder="Festival bonus, salary arrear, yearly profit share..."></textarea></div>
      </div>
      <div style="background:var(--bg-hover);border:1px solid var(--border);border-radius:8px;padding:12px;margin-top:12px;font-size:12px;color:var(--text-secondary)">Net payable: <strong id="adj-net-preview" style="color:var(--accent-cyan)">$0.00</strong></div>
    </div>
    <div class="modal-footer"><button class="btn btn-secondary" onclick="closeModal('modal-adjustment')">Cancel</button><button class="btn btn-primary" onclick="saveAdjustment()"><i class="fas fa-save"></i> Save Payment</button></div>
  </div>
</div>

<div class="modal-overlay" id="modal-settlement-config">
  <div class="modal" style="max-width:760px">
    <div class="modal-header"><span class="modal-title"><i class="fas fa-sliders" style="color:var(--accent-cyan);margin-right:8px"></i>Final Settlement Components</span><button class="modal-close" onclick="closeModal('modal-settlement-config')"><i class="fas fa-times"></i></button></div>
    <div class="modal-body">
      <div style="background:rgba(0,212,255,.06);border:1px solid rgba(0,212,255,.15);border-radius:8px;padding:12px;font-size:12px;color:var(--text-secondary);margin-bottom:14px">
        Configure settlement lines dynamically. Sources: <strong>unpaid_net_salary</strong>, <strong>payroll_sum:provident_fund</strong>, <strong>basic_per_year_pct</strong>, <strong>leave_balance_basic_daily</strong>, <strong>fixed</strong>, <strong>manual</strong>, <strong>percent_basic</strong>.
      </div>
      <textarea class="form-control" id="settlement-config-json" rows="16" style="font-family:monospace;font-size:12px"></textarea>
    </div>
    <div class="modal-footer"><button class="btn btn-secondary" onclick="closeModal('modal-settlement-config')">Cancel</button><button class="btn btn-primary" onclick="saveSettlementConfig()"><i class="fas fa-save"></i> Save Config</button></div>
  </div>
</div>
@endsection
@push('scripts')
<script>
$(document).ready(function(){loadStats();loadPayroll();loadEmpSelect('#slip-emp');});

function showSalTab(tab,btn){['list','payslip','adjustments','bands','structures','financials','settlement'].forEach(t=>$(`#sal-${t}`).hide());$(`#sal-${tab}`).show();$(btn).addClass('active').siblings('.tab-btn').removeClass('active');}

function loadStats(){
  $.get('/salary/stats',function(d){
    const p=d.total_payroll||0;
    $('#ss-total').text(p>=1000000?'$'+(p/1000000).toFixed(2)+'M':'$'+(p/1000).toFixed(0)+'K');
    $('#ss-proc').text(d.processed||0);$('#ss-pend').text(d.pending||0);$('#ss-avg').text(fmtCurrency(Math.round(d.avg_salary||0)));
  });
}

function loadPayroll(){
  const month=$('#payroll-month').val()||'{{ now()->format("Y-m") }}';
  $('#month-label').text(new Date(month+'-01').toLocaleDateString('en-US',{month:'long',year:'numeric'}));
  $('#payroll-loading').show();$('#payroll-table').hide();
  $.get(`/salary/payroll/${month}`,function(records){
    $('#payroll-loading').hide();
    const tbody=$('#payroll-tbody').empty();
    if(!records.length){
      tbody.html('<tr><td colspan="9" style="text-align:center;padding:36px;color:var(--text-muted)"><i class="fas fa-inbox fa-2x" style="display:block;margin-bottom:12px"></i>No payroll data.<br><button class="btn btn-primary" style="margin-top:14px" onclick="openModal(\'modal-run\')"><i class="fas fa-cog"></i> Run Payroll</button></td></tr>');
      $('#payroll-table').show();return;
    }
    records.forEach(r=>{
      const allow=parseFloat(r.house_allowance||0)+parseFloat(r.transport_allowance||0)+parseFloat(r.medical_allowance||0);
      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||''} · ${r.employee?.department?.name||''}</span></div></div></td>
        <td>${fmtCurrency(r.basic_salary)}</td>
        <td style="color:var(--accent-teal)">${fmtCurrency(allow)}</td>
        <td>${parseFloat(r.overtime_pay||0)>0?`<span style="color:var(--accent-amber)">+${fmtCurrency(r.overtime_pay)}</span>`:'—'}</td>
        <td style="font-weight:600">${fmtCurrency(r.gross_salary)}</td>
        <td style="color:var(--accent-rose)">-${fmtCurrency(r.total_deductions)}</td>
        <td style="font-family:'Syne',sans-serif;font-weight:800;color:var(--accent-cyan)">${fmtCurrency(r.net_salary)}</td>
        <td>${statusBadge(r.status)}</td>
        <td style="text-align:center"><div style="display:flex;gap:4px;justify-content:center">
          <button class="btn btn-secondary btn-sm" title="Payslip" onclick="viewPayslip(${r.employee_id},'${r.pay_period}')"><i class="fas fa-file-invoice"></i></button>
          <a href="/salary/payslip/${r.employee_id}/${r.pay_period}/pdf" class="btn btn-secondary btn-sm" title="PDF"><i class="fas fa-download"></i></a>
          ${r.status!=='disbursed'?`<button class="btn btn-success btn-sm" title="Disburse" onclick="disbOne(${r.employee_id},'${r.pay_period}')"><i class="fas fa-paper-plane"></i></button>`:''}
        </div></td>
      </tr>`);
    });
    $('#payroll-table').show();
  }).fail(()=>$('#payroll-loading').html('<i class="fas fa-exclamation-triangle" style="color:var(--accent-rose)"></i> Error <button class="btn btn-sm btn-secondary" onclick="loadPayroll()">Retry</button>'));
}

function generatePayslip(){
  const empId=$('#slip-emp').val(),month=$('#slip-month').val();
  if(!empId||!month){showToast('Select employee and month','error');return;}
  $.get(`/salary/payslip/${empId}/${month}`,function(r){
    const house=parseFloat(r.house_allowance||0),trans=parseFloat(r.transport_allowance||0),med=parseFloat(r.medical_allowance||0);
    $('#payslip-placeholder').hide();$('#payslip-wrap').show();
    $('#payslip-content').html(`
      <div class="slip-header">
        <div><div style="font-family:'Syne',sans-serif;font-size:22px;font-weight:800;color:var(--accent-cyan)">{{  $companyName }}</div><div style="font-size:11px;color:var(--text-secondary)">Enterprise Solutions Ltd.</div></div>
        <div style="text-align:right"><div style="font-family:'Syne',sans-serif;font-weight:800;font-size:15px">PAYSLIP</div><div style="font-size:11px;color:var(--text-secondary)">${new Date(r.pay_period+'-01').toLocaleDateString('en-US',{month:'long',year:'numeric'})}</div></div>
      </div>
      <div style="background:var(--bg-hover);border-radius:8px;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px">
        <div><div style="font-size:10px;color:var(--text-muted)">Employee</div><div style="font-weight:600;font-size:13px">${r.employee?.full_name||'—'}</div></div>
        <div><div style="font-size:10px;color:var(--text-muted)">Employee ID</div><div style="font-weight:600;font-size:13px">${r.employee?.employee_id||'—'}</div></div>
        <div><div style="font-size:10px;color:var(--text-muted)">Department</div><div style="font-weight:600;font-size:13px">${r.employee?.department?.name||'—'}</div></div>
        <div><div style="font-size:10px;color:var(--text-muted)">Position</div><div style="font-weight:600;font-size:13px">${r.employee?.position||'—'}</div></div>
      </div>
      <div class="slip-grid" style="margin-bottom:12px">
        <div><div style="font-size:10px;font-weight:700;color:var(--accent-teal);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px">Earnings</div>
          <table class="slip-table"><tr><td>Basic Salary</td><td>${fmtCurrency(r.basic_salary)}</td></tr><tr><td>House Allow.</td><td>${fmtCurrency(house)}</td></tr><tr><td>Transport</td><td>${fmtCurrency(trans)}</td></tr><tr><td>Medical</td><td>${fmtCurrency(med)}</td></tr><tr><td>Overtime</td><td>${fmtCurrency(r.overtime_pay||0)}</td></tr>${parseFloat(r.bonus||0)>0?`<tr><td>Bonus</td><td>${fmtCurrency(r.bonus)}</td></tr>`:''}<tr class="slip-total"><td><strong>Gross</strong></td><td><strong>${fmtCurrency(r.gross_salary)}</strong></td></tr></table></div>
        <div><div style="font-size:10px;font-weight:700;color:var(--accent-rose);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px">Deductions</div>
          <table class="slip-table"><tr><td>Income Tax</td><td style="color:var(--accent-rose)">-${fmtCurrency(r.income_tax)}</td></tr><tr><td>Provident Fund</td><td style="color:var(--accent-rose)">-${fmtCurrency(r.provident_fund)}</td></tr><tr><td>Health Ins.</td><td style="color:var(--accent-rose)">-${fmtCurrency(r.health_insurance)}</td></tr><tr><td>Absent Ded.</td><td style="color:var(--accent-rose)">-${fmtCurrency(r.absent_deduction||0)}</td></tr><tr class="slip-total"><td><strong>Total Ded.</strong></td><td><strong style="color:var(--accent-rose)">-${fmtCurrency(r.total_deductions)}</strong></td></tr></table></div>
      </div>
      <div class="net-box"><span style="font-family:'Syne',sans-serif;font-weight:700">NET PAY</span><span style="font-family:'Syne',sans-serif;font-size:26px;font-weight:800;color:var(--accent-cyan)">${fmtCurrency(r.net_salary)}</span></div>
      <div style="font-size:10px;color:var(--text-muted);text-align:center;margin:10px 0">Days: ${r.present_days}/${r.working_days} · Absent: ${r.absent_days} · OT: ${r.overtime_hours}h · ${r.payment_method?.replace('_',' ')||'Bank Transfer'}</div>
      <div style="display:flex;gap:8px">
        <a href="/salary/payslip/${empId}/${month}/pdf" class="btn btn-primary" style="flex:1;justify-content:center"><i class="fas fa-download"></i> Download PDF</a>
        <button class="btn btn-secondary" onclick="window.print()"><i class="fas fa-print"></i></button>
      </div>`);
  }).fail(()=>showToast('No payroll record found. Run payroll first.','error'));
}

function viewPayslip(empId,month){showSalTab('payslip',$('.tab-btn').eq(1)[0]);setTimeout(()=>{$('#slip-emp').val(empId);$('#slip-month').val(month);generatePayslip();},200);}

function runPayroll(){
  $.post('/salary/run-payroll',{pay_period:$('#rp-period').val()},res=>{showToast(`Payroll processed for ${res.processed} employees!`,'success');closeModal('modal-run');loadPayroll();loadStats();})
   .fail(xhr=>showToast(xhr.responseJSON?.message||'Error running payroll','error'));
}

function disburseAll(){
  const month=$('#payroll-month').val()||'{{ now()->format("Y-m") }}';
  if(!confirm(`Disburse all salaries for ${month}?`))return;
  $.post('/salary/disburse',{pay_period:month,payment_method:'bank_transfer'},res=>{showToast(`${res.disbursed} salaries disbursed!`,'success');loadPayroll();loadStats();})
   .fail(xhr=>showToast(xhr.responseJSON?.message||'Nothing to disburse','info'));
}

function disbOne(empId,period){$.post(`/salary/disburse/${empId}`,{pay_period:period},()=>{showToast('Salary disbursed!','success');loadPayroll();});}

function loadBands(){
  $.get('/salary/bands',data=>{
    const tbody=$('#bands-tbody').empty();
    data.forEach(b=>tbody.append(`<tr><td><span style="font-family:'Syne',sans-serif;font-weight:800;font-size:16px;color:var(--accent-cyan)">${b.grade}</span></td><td>${b.level_name}</td><td>${fmtCurrency(b.min_salary)}</td><td>${fmtCurrency(b.max_salary)}</td><td><span style="background:rgba(0,212,255,.1);color:var(--accent-cyan);padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600">${b.employee_count||0}</span></td><td style="color:var(--accent-teal);font-weight:600">${fmtCurrency(Math.round(b.avg_salary||0))}</td></tr>`));
  });
}

function loadStructures(){
  $.get('/salary/structures',data=>{
    const tbody=$('#struct-tbody').empty();
    if(!data.length){tbody.html('<tr><td colspan="8" style="text-align:center;padding:28px;color:var(--text-muted)">No structures found</td></tr>');return;}
    data.forEach(s=>tbody.append(`<tr><td><div class="emp-cell"><div class="emp-avatar">${s.employee?.initials||'?'}</div><div class="emp-info"><h4>${s.employee?.full_name||'—'}</h4><span>${s.employee?.department?.name||''}</span></div></div></td><td>${fmtCurrency(s.basic_salary)}</td><td>${s.house_allowance_pct}%</td><td>${fmtCurrency(s.transport_allowance)}</td><td>${fmtCurrency(s.medical_allowance)}</td><td>${s.income_tax_pct}%</td><td>${s.provident_fund_pct}%</td><td style="color:var(--accent-cyan);font-weight:700">${fmtCurrency(s.net_salary)}</td></tr>`));
  });
}

function submitBand(){
  const d={grade:$('#band-grade').val().toUpperCase(),level_name:$('#band-level').val(),min_salary:$('#band-min').val(),max_salary:$('#band-max').val()};
  if(!d.grade||!d.level_name||!d.min_salary||!d.max_salary){showToast('Fill all fields','error');return;}
  $.post('/salary/bands',d,()=>{showToast('Band added!','success');closeModal('modal-add-band');$('#band-grade,#band-level,#band-min,#band-max').val('');loadBands();})
   .fail(xhr=>showToast(Object.values(xhr.responseJSON?.errors||{}).flat()[0]||'Error','error'));
}

let settlementPreviewCache = null;
let settlementTabLoaded = false;
let financialTabLoaded = false;
let adjustmentsTabLoaded = false;

function loadAdjustmentsTab(){
  if(!adjustmentsTabLoaded){
    adjustmentsTabLoaded = true;
    loadAdjustments();
  }
}

function loadAdjustments(){
  const data={year:$('#adj-filter-year').val(),type:$('#adj-filter-type').val()};
  $.get('/salary/adjustments',data,rows=>{
    const tbody=$('#adjustments-tbody').empty();
    if(!rows.length){tbody.html('<tr><td colspan="9" style="text-align:center;padding:28px;color:var(--text-muted)">No bonus, arrear or profit share payments found</td></tr>');return;}
    rows.forEach(a=>{
      const deductions=parseFloat(a.tax_deduction||0)+parseFloat(a.pf_deduction||0)+parseFloat(a.other_deduction||0);
      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||''} · ${a.employee?.department?.name||''}</span></div></div></td>
        <td>${a.year}</td><td>${a.type_label||a.adjustment_type}</td><td>${a.title}</td>
        <td style="color:var(--accent-teal);font-weight:700">${fmtCurrency(a.amount)}</td>
        <td style="color:var(--accent-rose)">-${fmtCurrency(deductions)}</td>
        <td style="font-family:'Syne',sans-serif;font-weight:800;color:var(--accent-cyan)">${fmtCurrency(a.net_amount)}</td>
        <td>${statusBadge(a.status)}</td>
        <td style="text-align:center"><div style="display:flex;gap:4px;justify-content:center">
          ${a.status!=='paid'?`<button class="btn btn-success btn-sm" title="Mark Paid" onclick="markAdjustmentPaid(${a.id})"><i class="fas fa-paper-plane"></i></button>`:''}
          <a href="/salary/adjustments/${a.id}/pdf" class="btn btn-secondary btn-sm" title="Download Slip"><i class="fas fa-download"></i></a>
        </div></td>
      </tr>`);
    });
  });
}

function openAdjustmentModal(){
  const $sel=$('#adj-emp');
  if($sel.find('option').length<=2){
    $.get('/employees/list',{per_page:200},res=>{
      (res.data?.data||[]).forEach(e=>$sel.append(`<option value="${e.id}">${e.full_name} (${e.employee_id}) - ${e.status}</option>`));
    });
  }
  openModal('modal-adjustment');
  updateAdjustmentPreview();
}

$('#adj-type').on('change',function(){
  const labels={eid_bonus:'Eid Bonus',profit_share:'Profit Share',arrear:'Salary Arrear',performance_bonus:'Performance Bonus',other:'Other Payment'};
  $('#adj-title').val(labels[$(this).val()]||'Payment');
});
$('#adj-amount,#adj-tax,#adj-pf,#adj-other').on('input',updateAdjustmentPreview);

function updateAdjustmentPreview(){
  const net=Math.max(0,(parseFloat($('#adj-amount').val())||0)-(parseFloat($('#adj-tax').val())||0)-(parseFloat($('#adj-pf').val())||0)-(parseFloat($('#adj-other').val())||0));
  $('#adj-net-preview').text(fmtCurrency(net));
}

function saveAdjustment(){
  const data={
    employee_id:$('#adj-emp').val(),
    year:$('#adj-year').val(),
    adjustment_type:$('#adj-type').val(),
    title:$('#adj-title').val(),
    amount:$('#adj-amount').val(),
    tax_deduction:$('#adj-tax').val(),
    pf_deduction:$('#adj-pf').val(),
    other_deduction:$('#adj-other').val(),
    status:$('#adj-status').val(),
    paid_date:$('#adj-paid-date').val(),
    notes:$('#adj-notes').val()
  };
  if(!data.employee_id||!data.year||!data.title||!data.amount){showToast('Employee, year, title and amount are required','error');return;}
  $.post('/salary/adjustments',data,res=>{
    showToast(`${res.created} payment record(s) saved`,'success');
    closeModal('modal-adjustment');
    $('#adj-amount,#adj-tax,#adj-pf,#adj-other,#adj-notes').val('');
    $('#adj-tax,#adj-pf,#adj-other').val(0);
    loadAdjustments();
  }).fail(xhr=>showToast(xhr.responseJSON?.message||Object.values(xhr.responseJSON?.errors||{}).flat()[0]||'Unable to save payment','error'));
}

function markAdjustmentPaid(id){
  $.post(`/salary/adjustments/${id}/mark-paid`,{},()=>{showToast('Payment marked paid','success');loadAdjustments();})
    .fail(xhr=>showToast(xhr.responseJSON?.message||'Unable to mark paid','error'));
}

function loadFinancialTab(){
  if(!financialTabLoaded){
    financialTabLoaded = true;
    loadFinancialEmployees();
  }
}

function loadFinancialEmployees(){
  const $sel = $('#fin-emp').html('<option value="">Select employee...</option>');
  $.get('/employees/list',{per_page:200},res=>{
    (res.data?.data||[]).forEach(e=>$sel.append(`<option value="${e.id}">${e.full_name} (${e.employee_id}) - ${e.status}</option>`));
  });
}

function checkFinancials(){
  const employeeId=$('#fin-emp').val();
  if(!employeeId){showToast('Select employee first','error');return;}
  $('#financial-summary').html('<div style="text-align:center;padding:28px;color:var(--text-muted)"><i class="fas fa-spinner fa-spin"></i></div>');
  $.get(`/salary/employee-financials/${employeeId}`,{as_of_date:$('#fin-date').val()},renderFinancials)
   .fail(xhr=>showToast(xhr.responseJSON?.message||'Unable to load employee financials','error'));
}

function renderFinancials(res){
  const e=res.employee||{}, s=res.summary||{};
  $('#financial-summary').html(`
    <div class="emp-cell" style="margin-bottom:14px"><div class="emp-avatar">${e.initials||'?'}</div><div class="emp-info"><h4>${e.full_name||'—'}</h4><span>${e.employee_id||''} · ${e.department?.name||''} · ${e.status||''}</span></div></div>
    <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:10px">
      ${settleMetric('Current Basic',s.current_basic_salary,'var(--accent-cyan)')}
      ${settleMetric('Current Gross',s.current_gross_salary,'var(--accent-teal)')}
      ${settleMetric('Net Salary Paid',s.net_salary_paid,'var(--accent-cyan)')}
      ${settleMetric('Unpaid Salary',s.unpaid_net_salary,'var(--accent-amber)')}
      ${settleMetric('PF Saved',s.provident_fund,'var(--accent-teal)')}
      ${settleMetric('GF Estimated',s.gratuity_fund,'var(--accent-violet)')}
      ${settleMetric('Other Savings',s.other_savings,'var(--accent-teal)')}
      ${settleMetric('Total Savings',s.total_savings,'var(--accent-cyan)')}
      ${settleMetric('Income Tax',s.income_tax,'var(--accent-rose)')}
      ${settleMetric('Other Deductions',s.other_deductions,'var(--accent-rose)')}
    </div>`);

  const payrollRows=(res.payroll_records||[]).map(r=>`<tr>
    <td>${r.pay_period}</td><td>${fmtCurrency(r.gross_salary)}</td><td style="color:var(--accent-cyan);font-weight:700">${fmtCurrency(r.net_salary)}</td>
    <td style="color:var(--accent-teal)">${fmtCurrency(r.provident_fund)}</td><td style="color:var(--accent-rose)">${fmtCurrency(r.income_tax)}</td>
    <td style="color:var(--accent-rose)">${fmtCurrency(r.other_deductions)}</td><td>${statusBadge(r.status)}</td>
  </tr>`).join('');
  $('#financial-payroll').html(payrollRows||'<tr><td colspan="7" style="text-align:center;padding:28px;color:var(--text-muted)">No payroll records found</td></tr>');

  const componentRows=(res.settlement_items||[]).map(item=>{
    const color=item.bucket==='deduction'?'var(--accent-rose)':(item.bucket==='saving'?'var(--accent-teal)':'var(--accent-cyan)');
    const sign=item.bucket==='deduction'?'-':'';
    return `<tr><td><strong>${item.label}</strong><div style="font-size:10px;color:var(--text-muted)">${item.code}</div></td><td>${item.bucket}</td><td style="font-size:11px;color:var(--text-secondary)">${item.source}</td><td style="text-align:right;color:${color};font-weight:800">${sign}${fmtCurrency(item.amount)}</td></tr>`;
  }).join('');
  $('#financial-components').html(componentRows||'<tr><td colspan="4" style="text-align:center;padding:28px;color:var(--text-muted)">No configured components found</td></tr>');
}

function loadSettlementTab(){
  if(!settlementTabLoaded){
    settlementTabLoaded = true;
    loadSettlementEmployees();
    loadSettlements();
  }
}

function loadSettlementEmployees(){
  const $sel = $('#settle-emp').html('<option value="">Select employee...</option>');
  $.get('/employees/list',{per_page:200},res=>{
    (res.data?.data||[]).forEach(e=>$sel.append(`<option value="${e.id}">${e.full_name} (${e.employee_id}) - ${e.status}</option>`));
  });
}

function previewSettlement(){
  const employeeId=$('#settle-emp').val();
  if(!employeeId){showToast('Select employee first','error');return;}
  $('#settlement-summary').html('<div style="text-align:center;padding:28px;color:var(--text-muted)"><i class="fas fa-spinner fa-spin"></i></div>');
  $('#settlement-items').html('<tr><td colspan="4" style="text-align:center;padding:28px;color:var(--text-muted)"><i class="fas fa-spinner fa-spin"></i></td></tr>');
  $.post('/salary/settlement/preview',{employee_id:employeeId,settlement_date:$('#settle-date').val(),last_working_date:$('#settle-last').val()},res=>{
    settlementPreviewCache=res;
    renderSettlementPreview(res);
  }).fail(xhr=>showToast(xhr.responseJSON?.message||'Unable to preview settlement','error'));
}

function renderSettlementPreview(res){
  const e=res.employee||{}, s=res.summary||{}, t=res.totals||{};
  $('#settlement-summary').html(`
    <div class="emp-cell" style="margin-bottom:14px"><div class="emp-avatar">${e.initials||'?'}</div><div class="emp-info"><h4>${e.full_name||'—'}</h4><span>${e.employee_id||''} · ${e.department?.name||''} · ${e.status||''}</span></div></div>
    <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:10px">
      ${settleMetric('Net Salary Paid',s.net_salary_paid,'var(--accent-cyan)')}
      ${settleMetric('Unpaid Salary',s.unpaid_net_salary,'var(--accent-amber)')}
      ${settleMetric('Provident Fund',s.provident_fund,'var(--accent-teal)')}
      ${settleMetric('Health Insurance',s.health_insurance,'var(--accent-violet)')}
      ${settleMetric('Income Tax',s.income_tax,'var(--accent-rose)')}
      ${settleMetric('Net Payable',t.net_payable,'var(--accent-cyan)')}
    </div>`);
  const rows=(res.items||[]).map(item=>{
    const color=item.bucket==='deduction'?'var(--accent-rose)':(item.bucket==='saving'?'var(--accent-teal)':'var(--accent-cyan)');
    const sign=item.bucket==='deduction'?'-':'';
    return `<tr><td><strong>${item.label}</strong><div style="font-size:10px;color:var(--text-muted)">${item.code}</div></td><td><span class="badge badge-approved">${item.bucket}</span></td><td style="font-size:11px;color:var(--text-secondary)">${item.source}</td><td style="text-align:right;color:${color};font-weight:800">${sign}${fmtCurrency(item.amount)}</td></tr>`;
  }).join('');
  $('#settlement-items').html(rows||'<tr><td colspan="4" style="text-align:center;padding:28px;color:var(--text-muted)">No active components</td></tr>');
  $('#settlement-totals').html(`<tr><td colspan="3" style="text-align:right;font-weight:800">Earnings + Savings - Deductions</td><td style="text-align:right;font-family:'Syne',sans-serif;font-size:16px;font-weight:800;color:var(--accent-cyan)">${fmtCurrency(t.net_payable||0)}</td></tr>`);
}

function settleMetric(label,value,color){
  return `<div style="background:var(--bg-hover);border:1px solid var(--border);border-radius:8px;padding:10px"><div style="font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px">${label}</div><div style="font-family:'Syne',sans-serif;font-size:17px;font-weight:800;color:${color};margin-top:3px">${fmtCurrency(value||0)}</div></div>`;
}

function saveSettlement(status, terminateEmployee){
  const employeeId=$('#settle-emp').val();
  if(!employeeId){showToast('Select employee first','error');return;}
  if(!settlementPreviewCache){previewSettlement();showToast('Preview first, then save','info');return;}
  if(terminateEmployee&&!confirm('Mark this employee as terminated after saving paid settlement?')) return;
  $.post('/salary/settlement',{
    employee_id:employeeId,
    settlement_date:$('#settle-date').val(),
    last_working_date:$('#settle-last').val(),
    status,
    notes:$('#settle-notes').val(),
    terminate_employee:terminateEmployee?1:0
  },res=>{
    showToast('Final settlement saved','success');
    settlementPreviewCache=null;
    loadSettlements();
    loadSettlementEmployees();
    loadStats();
  }).fail(xhr=>showToast(xhr.responseJSON?.message||Object.values(xhr.responseJSON?.errors||{}).flat()[0]||'Unable to save settlement','error'));
}

function loadSettlements(){
  $.get('/salary/settlements',rows=>{
    const tbody=$('#settlements-tbody').empty();
    if(!rows.length){tbody.html('<tr><td colspan="7" style="text-align:center;padding:28px;color:var(--text-muted)">No settlements saved yet</td></tr>');return;}
    rows.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||''} · ${r.employee?.department?.name||''}</span></div></div></td>
      <td>${fmtDate(r.settlement_date)}</td><td>${statusBadge(r.status)}</td>
      <td>${fmtCurrency(r.total_earnings)}</td><td style="color:var(--accent-teal)">${fmtCurrency(r.total_savings)}</td><td style="color:var(--accent-rose)">${fmtCurrency(r.total_deductions)}</td>
      <td style="font-family:'Syne',sans-serif;font-weight:800;color:var(--accent-cyan)">${fmtCurrency(r.net_payable)}</td>
    </tr>`));
  });
}

function openSettlementConfig(){
  $.get('/salary/settlement/config',res=>{
    $('#settlement-config-json').val(JSON.stringify(res.components||[],null,2));
    openModal('modal-settlement-config');
  });
}

function saveSettlementConfig(){
  let components;
  try{components=JSON.parse($('#settlement-config-json').val());}
  catch(e){showToast('Invalid JSON config','error');return;}
  $.ajax({url:'/salary/settlement/config',method:'PUT',data:{components}})
    .done(()=>{showToast('Settlement config saved','success');closeModal('modal-settlement-config');if($('#settle-emp').val())previewSettlement();})
    .fail(xhr=>showToast(xhr.responseJSON?.message||Object.values(xhr.responseJSON?.errors||{}).flat()[0]||'Unable to save config','error'));
}
</script>
@endpush