<div id="nhs-calculator-container" style=" display: flex; justify-content: center;">
    <div class="calculator-wrapper">
      <h2>NHS Take-home Pay Calculator</h2>
      <div class="form-group">
        <label for="band">Band: <span id="band-value">5</span></label>
        <input type="range" id="band" min="0" max="11" value="4">
      </div>
      <div class="form-group">
        <label for="experience">Years of Experience: <span id="experience-value">0-1</span></label>
        <input type="range" id="experience" min="0" max="7" value="0">
      </div>
      <div class="form-group">
        <label for="period">Pay Period:</label>
        <select id="period">
          <option value="yearly">Yearly</option>
          <option value="monthly">Monthly</option>
          <option value="weekly">Weekly</option>
        </select>
      </div>
      <div class="result">
        <p><strong>Gross Pay:</strong> <span id="gross-pay">£31,048.00</span></p>
        <p><strong>Take-home Pay:</strong> <span id="take-home-pay">£23,812.57</span></p>
        <hr>
        <p><strong>Income Tax:</strong> <span id="tax">£3,180.20</span></p>
        <p><strong>National Insurance:</strong> <span id="ni">£1,478.24</span></p>
        <p><strong>Pension:</strong> <span id="pension">£2,576.98</span></p>
      </div>
      <button id="breakdown-btn">Show Calculation Breakdown</button>
      <div id="breakdown-details" style="display: none;">
        <h4>Income Tax Breakdown</h4>
        <div class="breakdown-item"><span>Personal Allowance:</span> <span id="personal-allowance">£12,570.00</span></div>
        <div class="breakdown-item"><span>Basic Rate (20%):</span> <span id="tax-basic">£3,180.20</span></div>
        <div class="breakdown-item"><span>Higher Rate (40%):</span> <span id="tax-higher">£0.00</span></div>
        <div class="breakdown-item"><span>Additional Rate (45%):</span> <span id="tax-additional">£0.00</span></div>
        <div class="breakdown-item"><strong><span>Total Income Tax:</span></strong> <strong id="tax-total">£3,180.20</strong></div>
        <h4>National Insurance Breakdown</h4>
        <div class="breakdown-item"><span>8% on earnings £12,570-£50,270:</span> <span id="ni-8">£1,478.24</span></div>
        <div class="breakdown-item"><span>2% on earnings &gt;£50,270:</span> <span id="ni-2">£0.00</span></div>
        <h4>Pension Breakdown</h4>
        <p class="note">Using rates from 1 April 2025</p>
        <div class="breakdown-item"><span>Contribution Rate:</span> <span id="pension-rate">8.3%</span></div>
        <div class="breakdown-item"><span>Total Contribution:</span> <span id="pension-total">£2,576.98</span></div>
      </div>
    </div>
  </div>

<script>
(function() {
  // The ID of the div where the calculator will be injected.
  const containerId = 'nhs-calculator-container';

  // --- 1. Define the HTML and CSS for the calculator ---
  const calculatorHTML = `
    <div class="calculator-wrapper">
      <h2>NHS Take-home Pay Calculator</h2>
      <div class="form-group">
        <label for="band">Band: <span id="band-value">5</span></label>
        <input type="range" id="band" min="0" max="11" value="4">
      </div>
      <div class="form-group">
        <label for="experience">Years of Experience: <span id="experience-value">0-1</span></label>
        <input type="range" id="experience" min="0" max="8" value="0">
      </div>
      <div class="form-group">
        <label for="period">Pay Period:</label>
        <select id="period">
          <option value="yearly">Yearly</option>
          <option value="monthly">Monthly</option>
          <option value="weekly">Weekly</option>
        </select>
      </div>
      <div class="result">
        <p><strong>Gross Pay:</strong> <span id="gross-pay"></span></p>
        <p><strong>Take-home Pay:</strong> <span id="take-home-pay"></span></p>
        <hr>
        <p><strong>Income Tax:</strong> <span id="tax"></span></p>
        <p><strong>National Insurance:</strong> <span id="ni"></span></p>
        <p><strong>Pension:</strong> <span id="pension"></span></p>
      </div>
      <button id="breakdown-btn">Show Calculation Breakdown</button>
      <div id="breakdown-details" style="display: none;">
        <h4>Income Tax Breakdown</h4>
        <div class="breakdown-item"><span>Personal Allowance:</span> <span id="personal-allowance"></span></div>
        <div class="breakdown-item"><span>Basic Rate (20%):</span> <span id="tax-basic"></span></div>
        <div class="breakdown-item"><span>Higher Rate (40%):</span> <span id="tax-higher"></span></div>
        <div class="breakdown-item"><span>Additional Rate (45%):</span> <span id="tax-additional"></span></div>
        <div class="breakdown-item"><strong><span>Total Income Tax:</span></strong> <strong id="tax-total"></strong></div>
        <h4>National Insurance Breakdown</h4>
        <div class="breakdown-item"><span>8% on earnings £12,570-£50,270:</span> <span id="ni-8"></span></div>
        <div class="breakdown-item"><span>2% on earnings >£50,270:</span> <span id="ni-2"></span></div>
        <h4>Pension Breakdown</h4>
        <p class="note">Using rates from 1 April 2025</p>
        <div class="breakdown-item"><span>Contribution Rate:</span> <span id="pension-rate"></span></div>
        <div class="breakdown-item"><span>Total Contribution:</span> <span id="pension-total"></span></div>
      </div>
    </div>
  `;

  const calculatorCSS = `
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
    .calculator-wrapper {
      font-family: 'Poppins', sans-serif;
      width: 450px;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 8px;
      background-color: #fff;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      box-sizing: border-box;
    }
    .calculator-wrapper .form-group { margin-bottom: 15px; }
    .calculator-wrapper label { display: block; margin-bottom: 5px; font-weight: bold; color: #333; }
    .calculator-wrapper input[type="range"] { width: 100%; }
    .calculator-wrapper .result { margin-top: 20px; padding-top: 15px; border-top: 1px solid #eee; }
    .calculator-wrapper .result p { display: flex; justify-content: space-between; margin: 8px 0; }
    .calculator-wrapper #period { width: 100%; padding: 5px; font-family: 'Poppins', sans-serif; }
    .calculator-wrapper #breakdown-btn {
      width: 100%; padding: 10px; margin-top: 15px; border: 1px solid #007bff;
      background-color: #007bff; color: white; border-radius: 5px; cursor: pointer;
      font-size: 16px; font-family: 'Poppins', sans-serif;
    }
    .calculator-wrapper #breakdown-btn:hover { background-color: #0056b3; }
    .calculator-wrapper #breakdown-details {
      margin-top: 15px; padding: 15px; border: 1px dashed #ccc;
      border-radius: 5px; background-color: #fafafa;
    }
    .calculator-wrapper .breakdown-item { display: flex; justify-content: space-between; font-size: 0.9em; padding: 4px 0; }
    .calculator-wrapper .breakdown-item span:first-child { color: #555; }
    .calculator-wrapper .note { font-size: 0.8em; color: #666; margin-top: -5px; margin-bottom: 10px; }
  `;

  // --- 2. Inject the HTML and CSS into the page ---
  const container = document.getElementById(containerId);
  if (container) {
    const styleSheet = document.createElement("style");
    styleSheet.innerText = calculatorCSS;
    document.head.appendChild(styleSheet);
    container.innerHTML = calculatorHTML;
  } else {
    console.error(`Calculator container with ID #${containerId} not found.`);
    return;
  }

  // --- 3. Calculator Logic (Data, Functions, Event Listeners) ---
  const paytable = [{"band":"1","spines":[{"name":"2","pay":24464,"yearsexperience":"0-1+"}]},{"band":"2","spines":[{"name":"2","pay":24464,"yearsexperience":"0-1"},{"name":"3","pay":24464,"yearsexperience":"1-2"},{"name":"4","pay":24464,"yearsexperience":"2-3"},{"name":"5","pay":24464,"yearsexperience":"3-4"},{"name":"6","pay":24464,"yearsexperience":"4-5"},{"name":"7","pay":24464,"yearsexperience":"5-6"},{"name":"8","pay":24464,"yearsexperience":"6+"}]},{"band":"3","spines":[{"name":"6","pay":24938,"yearsexperience":"0-1"},{"name":"7","pay":24938,"yearsexperience":"1-2"},{"name":"8","pay":26598,"yearsexperience":"2-3"},{"name":"9","pay":26598,"yearsexperience":"3-4"},{"name":"10","pay":26598,"yearsexperience":"4-5"},{"name":"11","pay":26598,"yearsexperience":"5-6"},{"name":"12","pay":26598,"yearsexperience":"6+"}]},{"band":"4","spines":[{"name":"11","pay":27485,"yearsexperience":"0-1"},{"name":"12","pay":27485,"yearsexperience":"1-2"},{"name":"13","pay":27485,"yearsexperience":"2-3"},{"name":"14","pay":30122,"yearsexperience":"3-4"},{"name":"15","pay":30122,"yearsexperience":"4-5"},{"name":"16","pay":30122,"yearsexperience":"5-6"},{"name":"17","pay":30122,"yearsexperience":"6+"}]},{"band":"5","spines":[{"name":"16","pay":31048,"yearsexperience":"0-1"},{"name":"17","pay":31048,"yearsexperience":"1-2"},{"name":"18","pay":33488,"yearsexperience":"2-3"},{"name":"19","pay":33488,"yearsexperience":"3-4"},{"name":"20","pay":37796,"yearsexperience":"4-5"},{"name":"21","pay":37796,"yearsexperience":"5-6"},{"name":"22","pay":37796,"yearsexperience":"6-7"},{"name":"23","pay":37796,"yearsexperience":"7+"}]},{"band":"6","spines":[{"name":"21","pay":38638,"yearsexperience":"0-1"},{"name":"22","pay":38638,"yearsexperience":"1-2"},{"name":"23","pay":40823,"yearsexperience":"2-3"},{"name":"24","pay":40823,"yearsexperience":"3-4"},{"name":"25","pay":40823,"yearsexperience":"4-5"},{"name":"26","pay":46581,"yearsexperience":"5-6"},{"name":"27","pay":46581,"yearsexperience":"6-7"},{"name":"28","pay":46581,"yearsexperience":"7-8"},{"name":"29","pay":46581,"yearsexperience":"8+"}]},{"band":"7","spines":[{"name":"26","pay":47809,"yearsexperience":"0-1"},{"name":"27","pay":47809,"yearsexperience":"1-2"},{"name":"28","pay":50273,"yearsexperience":"2-3"},{"name":"29","pay":50273,"yearsexperience":"3-4"},{"name":"30","pay":50273,"yearsexperience":"4-5"},{"name":"31","pay":54710,"yearsexperience":"5-6"},{"name":"32","pay":54710,"yearsexperience":"6-7"},{"name":"33","pay":54710,"yearsexperience":"7-8"},{"name":"34","pay":54710,"yearsexperience":"8+"}]},{"band":"8a","spines":[{"name":"33","pay":55689,"yearsexperience":"0-1"},{"name":"34","pay":55689,"yearsexperience":"1-2"},{"name":"35","pay":58486,"yearsexperience":"2-3"},{"name":"36","pay":58486,"yearsexperience":"3-4"},{"name":"37","pay":58486,"yearsexperience":"4-5"},{"name":"38","pay":62681,"yearsexperience":"5+"}]},{"band":"8b","spines":[{"name":"37","pay":64455,"yearsexperience":"0-1"},{"name":"38","pay":64455,"yearsexperience":"1-2"},{"name":"39","pay":68632,"yearsexperience":"2-3"},{"name":"40","pay":68632,"yearsexperience":"3-4"},{"name":"41","pay":68632,"yearsexperience":"4-5"},{"name":"42","pay":74897,"yearsexperience":"5+"}]},{"band":"8c","spines":[{"name":"41","pay":76964,"yearsexperience":"0-1"},{"name":"42","pay":76964,"yearsexperience":"1-2"},{"name":"43","pay":81651,"yearsexperience":"2-3"},{"name":"44","pay":81651,"yearsexperience":"3-4"},{"name":"45","pay":81651,"yearsexperience":"4-5"},{"name":"46","pay":88638,"yearsexperience":"5+"}]},{"band":"8d","spines":[{"name":"45","pay":91341,"yearsexperience":"0-1"},{"name":"46","pay":91341,"yearsexperience":"1-2"},{"name":"47","pay":96940,"yearsexperience":"2-3"},{"name":"48","pay":96940,"yearsexperience":"3-4"},{"name":"49","pay":96940,"yearsexperience":"4-5"},{"name":"50","pay":105337,"yearsexperience":"5+"}]},{"band":"9","spines":[{"name":"49","pay":109179,"yearsexperience":"0-1"},{"name":"50","pay":109179,"yearsexperience":"1-2"},{"name":"51","pay":115762,"yearsexperience":"2-3"},{"name":"52","pay":115762,"yearsexperience":"3-4"},{"name":"53","pay":115762,"yearsexperience":"4-5"},{"name":"54","pay":125637,"yearsexperience":"5+"}]}];
  
  const bandInput = document.getElementById('band');
  const experienceInput = document.getElementById('experience');
  const periodSelect = document.getElementById('period');
  const breakdownBtn = document.getElementById('breakdown-btn');
  const breakdownDetails = document.getElementById('breakdown-details');
  const bandValueSpan = document.getElementById('band-value');
  const experienceValueSpan = document.getElementById('experience-value');
  const grossPaySpan = document.getElementById('gross-pay');
  const takeHomePaySpan = document.getElementById('take-home-pay');
  const taxSpan = document.getElementById('tax');
  const niSpan = document.getElementById('ni');
  const pensionSpan = document.getElementById('pension');
  const personalAllowanceSpan = document.getElementById('personal-allowance');
  const taxBasicSpan = document.getElementById('tax-basic');
  const taxHigherSpan = document.getElementById('tax-higher');
  const taxAdditionalSpan = document.getElementById('tax-additional');
  const taxTotalSpan = document.getElementById('tax-total');
  const ni8Span = document.getElementById('ni-8');
  const ni2Span = document.getElementById('ni-2');
  const pensionRateSpan = document.getElementById('pension-rate');
  const pensionTotalSpan = document.getElementById('pension-total');

  function calculateTakeHomePay() {
    const bandIndex = parseInt(bandInput.value);
    const experienceIndex = parseInt(experienceInput.value);
    const period = periodSelect.value;
    const bandData = paytable[bandIndex];
    experienceInput.max = bandData.spines.length - 1;
    const experienceData = bandData.spines[Math.min(experienceIndex, experienceInput.max)];
    const grossPay = experienceData.pay;
    const pension = calculatePension(grossPay);
    const tax = calculateTax(grossPay, pension.total);
    const ni = calculateNI(grossPay);
    const takeHomePay = grossPay - tax.total - ni.total - pension.total;

    bandValueSpan.textContent = bandData.band;
    experienceValueSpan.textContent = experienceData.yearsexperience;
    displayValue(grossPay, period, grossPaySpan);
    displayValue(takeHomePay, period, takeHomePaySpan);
    displayValue(tax.total, period, taxSpan);
    displayValue(ni.total, period, niSpan);
    displayValue(pension.total, period, pensionSpan);
    displayValue(tax.personalAllowance, period, personalAllowanceSpan)
    displayValue(tax.basic, period, taxBasicSpan);
    displayValue(tax.higher, period, taxHigherSpan);
    displayValue(tax.additional, period, taxAdditionalSpan);
    displayValue(tax.total, period, taxTotalSpan);
    displayValue(ni.at8, period, ni8Span);
    displayValue(ni.at2, period, ni2Span);
    pensionRateSpan.textContent = `${(pension.rate * 100).toFixed(1)}%`;
    displayValue(pension.total, period, pensionTotalSpan);
  }

  function calculateTax(grossPay, pensionTotal) {
    let personalAllowance = 12570;
    const basicRateLimit = 50270;
    const higherRateLimit = 125140;
    const paTaperStart = 100000;
    if (grossPay > paTaperStart) {
        personalAllowance = Math.max(0, personalAllowance - (grossPay - paTaperStart) / 2);
    }
    const taxablePay = grossPay - pensionTotal;
    let tax = { total: 0, basic: 0, higher: 0, additional: 0, personalAllowance: personalAllowance };
    let income = taxablePay;
    if (income > personalAllowance) {
        income -= personalAllowance;
        if (income > 0) {
            const basicTaxable = Math.min(income, basicRateLimit - personalAllowance);
            tax.basic = basicTaxable * 0.20;
            income -= basicTaxable;
        }
        if (income > 0) {
            const higherTaxable = Math.min(income, higherRateLimit - basicRateLimit);
            tax.higher = higherTaxable * 0.40;
            income -= higherTaxable;
        }
        if (income > 0) {
            tax.additional = income * 0.45;
        }
    }
    tax.total = tax.basic + tax.higher + tax.additional;
    return tax;
  }
  
  function calculateNI(grossPay) {
    const primaryThreshold = 12570;
    const upperEarningsLimit = 50270;
    let ni = { total: 0, at8: 0, at2: 0 };
    if (grossPay > primaryThreshold) {
        const earningsAt8 = Math.min(grossPay, upperEarningsLimit) - primaryThreshold;
        if (earningsAt8 > 0) {
            ni.at8 = earningsAt8 * 0.08;
        }
        if (grossPay > upperEarningsLimit) {
            const earningsAt2 = grossPay - upperEarningsLimit;
            ni.at2 = earningsAt2 * 0.02;
        }
    }
    ni.total = ni.at8 + ni.at2;
    return ni;
  }

  function calculatePension(grossPay) {
    let pensionRate = 0;
    if (grossPay <= 13259) pensionRate = 0.052;
    else if (grossPay <= 27797) pensionRate = 0.065;
    else if (grossPay <= 33868) pensionRate = 0.083;
    else if (grossPay <= 50845) pensionRate = 0.098;
    else if (grossPay <= 65190) pensionRate = 0.107;
    else pensionRate = 0.125;
    return { total: grossPay * pensionRate, rate: pensionRate };
  }

  function displayValue(value, period, element) {
    let displayValue = value;
    if (period === 'monthly') displayValue = value / 12;
    else if (period === 'weekly') displayValue = value / 52;
    element.textContent = `£${displayValue.toLocaleString('en-GB', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
  }

  function toggleBreakdown() {
    const isHidden = breakdownDetails.style.display === 'none';
    breakdownDetails.style.display = isHidden ? 'block' : 'none';
    breakdownBtn.textContent = isHidden ? 'Hide Calculation Breakdown' : 'Show Calculation Breakdown';
  }

  bandInput.addEventListener('input', calculateTakeHomePay);
  experienceInput.addEventListener('input', calculateTakeHomePay);
  periodSelect.addEventListener('change', calculateTakeHomePay);
  breakdownBtn.addEventListener('click', toggleBreakdown);

  calculateTakeHomePay();
})();
</script>