@extends('admin.admin_dashboard')
@section('admin')

{{-- Select2 & jQuery --}}
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<div class="page-content">
  <div class="container-fluid">
    <div class="page-breadcrumb bg-primary text-white rounded p-3 mb-4 d-flex justify-content-between align-items-center">
      <h5 class="mb-0">New Payroll</h5>
      <a href="{{ route('payroll.index') }}" class="btn btn-light">
        <i class="bx bx-chevron-left me-1"></i> Back
      </a>
    </div>

    <div class="card shadow-sm rounded-lg border-0">
      <div class="card-body p-4">
        @if($errors->any())
          <div class="alert alert-danger">
            <ul class="mb-0">
              @foreach($errors->all() as $e)
                <li>{{ $e }}</li>
              @endforeach
            </ul>
          </div>
        @endif

        <form method="POST" action="{{ route('payroll.store') }}">
          @csrf

          <div class="row g-3 mb-4">
            <div class="col-md-6">
              <label class="form-label">Period Start</label>
              <input type="date" name="period_start" class="form-control datepicker" required>
            </div>
            <div class="col-md-6">
              <label class="form-label">Period End</label>
              <input type="date" name="period_end" class="form-control datepicker" required>
            </div>
          </div>

          <hr>

          <h6 class="mb-3">Salary Lines</h6>
          <div class="table-responsive mb-2">
            <table class="table table-striped table-bordered align-middle" id="linesTable">
              <thead class="table-dark">
                <tr>
                  <th>Employee</th>
                  <th class="text-end">Net Pay</th>
                  <th class="text-end">Taxable Income</th>
                  <th class="text-end">PAYE</th>
                  <th class="text-end">NSSF 5%</th>
                  <th class="text-end">NSSF 10%</th>
                  <th class="text-end">Mandatory Deductions</th>
                  <th class="text-end">NSSF Total</th>
                  <th class="text-center" style="width:1%"></th>
                </tr>
              </thead>
              <tbody>
                <tr class="line-row">
                  <td>
                    <select name="lines[0][account_id]" class="form-select js-employee" required>
                      <option value="">Select employee…</option>
                      @foreach($accounts as $id => $name)
                        <option value="{{ $id }}">{{ $name }}</option>
                      @endforeach
                    </select>
                  </td>
                  <td><input type="text" name="lines[0][amount]" class="form-control text-end amount-field" required></td>
                  <input type="hidden" name="lines[0][net_pay]" class="net-pay-hidden" value="0">
                  <td><input type="text" readonly class="form-control text-end taxable-income" value="0"></td>
                  <input type="hidden" name="lines[0][taxable_income]" class="taxable-income-hidden" value="0">
                  <td><input type="text" readonly class="form-control text-end paye" value="0"></td>
                  <input type="hidden" name="lines[0][paye]" class="paye-hidden" value="0">
                  <td><input type="text" readonly class="form-control text-end nssf5" value="0"></td>
                  <input type="hidden" name="lines[0][nssf_employee]" class="nssf5-hidden" value="0">
                  <td><input type="text" readonly class="form-control text-end nssf10" value="0"></td>
                  <input type="hidden" name="lines[0][nssf_employer]" class="nssf10-hidden" value="0">
                  <td><input type="text" readonly class="form-control text-end mandatory-deductions" value="0"></td>
                  <input type="hidden" name="lines[0][mandatory_deductions]" class="mandatory-deductions-hidden" value="0">
                  <td><input type="text" readonly class="form-control text-end nssf-total" value="0"></td>
                  <input type="hidden" name="lines[0][nssf_total]" class="nssf-total-hidden" value="0">
                  <td class="text-center">
                    <button type="button" class="btn btn-sm btn-danger js-remove" disabled>&times;</button>
                  </td>
                </tr>
              </tbody>
              <tfoot class="table-light fw-bold">
                <tr>
                  <td class="text-end">Totals:</td>
                  <td class="text-end" id="totalNetPay">0</td>
                  <td class="text-end" id="totalTaxableIncome">0</td>
                  <td class="text-end" id="totalPAYE">0</td>
                  <td class="text-end" id="totalNSSF5">0</td>
                  <td class="text-end" id="totalNSSF10">0</td>
                  <td class="text-end" id="totalMandatoryDeductions">0</td>
                  <td class="text-end" id="totalNSSF">0</td>
                  <td></td>
                </tr>
              </tfoot>
            </table>
          </div>

         

          <button type="button" id="addLineBtn" class="btn btn-sm btn-secondary mb-4 me-2">
            <i class="bx bx-plus me-1"></i> Add Line
          </button>

          <div class="text-end">
            <button type="submit" class="btn btn-success px-4">
              <i class="bx bx-save me-1"></i> Save Payroll
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
$(function(){
  const $tbody = $('#linesTable tbody');
  const $template = $tbody.find('tr.line-row').first().clone();
  let rowIndex = 1;

  $('.js-employee').select2({ theme: 'bootstrap-5', width: '100%' });

  function renderRemove(){
    const $rows = $tbody.children('tr');
    $rows.find('.js-remove').prop('disabled', $rows.length === 1);
  }

  $tbody.on('click', '.js-remove', function(){
    $(this).closest('tr').remove();
    renderRemove();
    updateTotals();
  });

 $('#addLineBtn').click(function(){
    const $row = $template.clone();

    $row.find('select.js-employee')
        .attr('name', `lines[${rowIndex}][account_id]`)
        .val(null)
        .select2({ theme: 'bootstrap-5', width: '100%' });

    $row.find('input.amount-field')
        .attr('name', `lines[${rowIndex}][amount]`)
        .val('');

    
    $row.find('.net-pay-hidden').attr('name', `lines[${rowIndex}][net_pay]`).val(0);
    $row.find('.taxable-income-hidden').attr('name', `lines[${rowIndex}][taxable_income]`).val(0);
    $row.find('.paye-hidden').attr('name', `lines[${rowIndex}][paye]`).val(0);
    $row.find('.nssf5-hidden').attr('name', `lines[${rowIndex}][nssf_employee]`).val(0);
    $row.find('.nssf10-hidden').attr('name', `lines[${rowIndex}][nssf_employer]`).val(0);
    $row.find('.mandatory-deductions-hidden').attr('name', `lines[${rowIndex}][mandatory_deductions]`).val(0);
    $row.find('.nssf-total-hidden').attr('name', `lines[${rowIndex}][nssf_total]`).val(0);

    $row.find('.taxable-income, .paye, .nssf5, .nssf10, .mandatory-deductions, .nssf-total').val('0');

    $tbody.append($row);
    rowIndex++;
    renderRemove();
});


  function computePAYE(taxable) {
    if (taxable <= 235000) return 0;
    if (taxable <= 335000) return (taxable - 235000) * 0.10;
    if (taxable <= 410000) return 10000 + (taxable - 335000) * 0.20;
    return 25000 + (taxable - 410000) * 0.30;
  }

  function computeGrossFromNet(netPay) {
    let low = netPay;
    let high = netPay * 3;
    let mid = 0;

    for (let i = 0; i < 50; i++) {
      mid = (low + high) / 2;
      const nssf5 = mid * 0.05;
      const paye = computePAYE(mid);
      const calculatedNet = mid - nssf5 - paye;

      if (Math.abs(calculatedNet - netPay) < 1) break;
      if (calculatedNet > netPay) high = mid;
      else low = mid;
    }

    return Math.round(mid);
  }

  function formatNumber(num) {
    return Math.round(num).toLocaleString();
  }

  $('#linesTable').on('input', '.amount-field', function(){
    const $row = $(this).closest('tr');
    let rawInput = $(this).val().replace(/,/g, '').replace(/[^\d]/g, '');
    const netPay = parseFloat(rawInput) || 0;

    if (netPay === 0) {
      $row.find('.taxable-income, .paye, .nssf5, .nssf10, .mandatory-deductions, .nssf-total').val('0');
      updateTotals();
      return;
    }

    const gross = computeGrossFromNet(netPay);
    const nssf5 = gross * 0.05;
    const paye = computePAYE(gross);
    const nssf10 = gross * 0.10;
    const mandatoryDeductions = nssf5 + paye;
    const totalNssf = nssf5 + nssf10;

    $row.find('.taxable-income').val(formatNumber(gross));
    $row.find('.paye').val(formatNumber(paye));
    $row.find('.nssf5').val(formatNumber(nssf5));
    $row.find('.nssf10').val(formatNumber(nssf10));
    $row.find('.mandatory-deductions').val(formatNumber(mandatoryDeductions));
    $row.find('.nssf-total').val(formatNumber(totalNssf));
    $(this).val(formatNumber(netPay));

$row.find('.taxable-income-hidden').val(Math.round(gross));
$row.find('.paye-hidden').val(Math.round(paye));
$row.find('.nssf5-hidden').val(Math.round(nssf5));
$row.find('.nssf10-hidden').val(Math.round(nssf10));
$row.find('.mandatory-deductions-hidden').val(Math.round(mandatoryDeductions));
$row.find('.nssf-total-hidden').val(Math.round(totalNssf));
$row.find('.net-pay-hidden').val(Math.round(netPay));



    updateTotals();
  });

  function updateTotals(){
    let totalNetPay = 0,
        totalTaxableIncome = 0,
        totalPAYE = 0,
        totalNSSF5 = 0,
        totalNSSF10 = 0,
        totalMandatoryDeductions = 0,
        totalNSSF = 0;

    $('#linesTable tbody tr').each(function(){
      const $row = $(this);
      totalNetPay += parseFloat($row.find('.amount-field').val().replace(/,/g, '')) || 0;
      totalTaxableIncome += parseFloat($row.find('.taxable-income').val().replace(/,/g, '')) || 0;
      totalPAYE += parseFloat($row.find('.paye').val().replace(/,/g, '')) || 0;
      totalNSSF5 += parseFloat($row.find('.nssf5').val().replace(/,/g, '')) || 0;
      totalNSSF10 += parseFloat($row.find('.nssf10').val().replace(/,/g, '')) || 0;
      totalMandatoryDeductions += parseFloat($row.find('.mandatory-deductions').val().replace(/,/g, '')) || 0;
      totalNSSF += parseFloat($row.find('.nssf-total').val().replace(/,/g, '')) || 0;
    });

    $('#totalNetPay').text(formatNumber(totalNetPay));
    $('#totalTaxableIncome').text(formatNumber(totalTaxableIncome));
    $('#totalPAYE').text(formatNumber(totalPAYE));
    $('#totalNSSF5').text(formatNumber(totalNSSF5));
    $('#totalNSSF10').text(formatNumber(totalNSSF10));
    $('#totalMandatoryDeductions').text(formatNumber(totalMandatoryDeductions));
    $('#totalNSSF').text(formatNumber(totalNSSF));
    $('#totalAmount').text(formatNumber(totalNetPay));
  }

  renderRemove();
  $('.amount-field').trigger('input');
});
</script>

@endsection