{% extends "layout_unbranded.html" %}

{% block page_title %}
  GOV.UK prototype kit
{% endblock %}

{% block content %}
<main id="content" role="main">
  <div class="grid-row">

    <div class="column-full">
      <div id="global-breadcrumb" class="breadcrumb">
        <a class="link-back" href="results_confirm2?search=QQ123456C">Back</a>
      </div>
      <h1 class="heading-large">QQ123456C</h1>
      <div class="tab-content">
        <div class="js-tabs nav-tabs">
          <ul class="tabs-nav" role="tablist">
            <li class="active"><a href="#current-sp-value" id="tab-overview">Overview</a></li>
            <li><a href="#options-sp-value" id="tab-options">Filling gaps</a></li>
            <li><a href="#improve-sp-value" id="tab-contracting-out">Starting amount</a></li>
            <li><a href="#contracted-out" id="tab-ni-record">National Insurance summary</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div id="forecast" class="tab-pane">
      <div class="column-half">
        <div class="forecast-wrapper2">
          <span class="forecast-label2">State Pension date</span> <span class="forecast-data-bold2">4 May 2034</span>
        </div>
        <div class="forecast-wrapper2">
          <span class="forecast-label2">Final relevant year (FRY)</span> <span class="forecast-data-bold2">2033-34</span>
          <span class="forecast-label2">&nbsp;</span><span class="forecast-data-bold2  forecast-label2-inline">18 years to FRY
          </span>
        </div>
        <div class="forecast-wrapper2">
          <span class="forecast-label2">COPE estimate</span> <span class="forecast-data-bold2">£18.84 a week</span>
          <span class="forecast-no-data  forecast-header forecast-label2-inline">Was contracted out</span>
        </div>
      </div>
      <div class="column-half">
        <div class="forecast-wrapper2">
          <span class="forecast-label2">Estimate up to 5 April 2016
          </span> <span class="forecast-data-bold2">£120.10 a week</span>
          <span class="forecast-label2 forecast-label2-inline">Qualifying years</span> <span class="forecast-data-bold2 forecast-label2-inline">28</span>
        </div>

        <div class="forecast-wrapper2">
          <span class="forecast-label2">Forecast contributing future years</span> <span class="forecast-data-bold2">£159.55 a week</span>
          <span class="forecast-label2 forecast-label2-inline">Future years needed</span> <span class="forecast-data-bold2 forecast-label2-inline">9</span>

        </div>
        <div class="forecast-wrapper2">
          <span class="forecast-label2">Most they can get</span> <span class="forecast-data-bold2">£159.55 a week</span>
        </div>

      </div>
    </div>
    <div id="options" class="tab-pane">
      <div class="column-two-thirds">
   
       
         <h3 class="heading-small">Improve by filling gaps</h3>
     
       <table class="vnics"><tr><th>Gaps filled</th><th>Old rules</th><th>New rules</th></tr>
        <tr><td>Estimate 05 April 2016</td><td class="vnics_bold">£120.10 a week</td><td>£108.33 a week</td></tr>
           <tr><td>1</td><td class="vnics_bold">£124.17 a week</td><td>£112.89 a week</td></tr>
              <tr><td>2</td><td class="vnics_bold">£128.24 a week<td>£117.45 a week</td></tr>
              <tr><td>3</td><td><td>£122.00 a week</td></tr>
              <tr><td>4</td><td><td>£126.56 a week</td></tr>
              <tr><td>5</td><td><td class="vnics_bold">£131.12 a week</td></tr>
              </table>
      
      </div>
    </div>

    <div id="contracting-out" class="tab-pane">
      <div class="column-two-thirds">
        <h3 class="heading-small">Starting amount at April 2016 is £117.16 a week</h3>
      </div>
      <div class="column-one-half column-half-left">
        <div class="forecast-wrapper2">
          <p class="heading-small">Old rules</p>
          <span class="forecast-label2">Basic</span>
          <span class="forecast-data2">£111.35 a week</span>

          <span class="forecast-label2 forecast-label2-inline">Additional Pension and Grad</span>
          <span class="forecast-data2 forecast-label2-inline">£5.81 a week</span>
          <span class="forecast-label2 forecast-label2-inline">Total</span>
          <span class="forecast-data-bold2 forecast-label2-inline">£117.16 a week
          </span>
        </div>
      </div>

      <div class="column-one-half column-half-right">
        <div class="forecast-wrapper2">
          <p class="heading-small">New rules</p>
          <span class="forecast-label2">New State Pension</span>
          <span class="forecast-data2">£124.52 a week</span>

          <span class="forecast-label2 forecast-label2-inline">RDA</span> <span class="forecast-data2 forecast-label2-inline">£18.84 a week</span>
          <span class="forecast-label2 forecast-label2-inline">Total</span> <span class="forecast-data-bold2 forecast-label2-inline">£105.68 a week</span>
        </div>
      </div>
      
    </div>
    <div id="ni-record" class="tab-pane">
      <div class="column-two-thirds">

        <h2 class="heading-small">Shortfalls in record</h2>
        <p>5 years can be filled</p>
        <dl class="accordion2">
          <dt>
            <div class="ni-wrapper">
              <div class="ni-years2">2016-17</div>
              <div class="ni-notfull">This year is not available yet</div>
            </div>
          </dt>
          <dt>
            <div class="ni-wrapper">
              <div class="ni-years2">2015-16</div>
              <div class="ni-notfull">£733.20 shortfall</div>
            </div>
          </dt>
          <dt>
            <div class="ni-wrapper">
              <div class="ni-years2">2014-15</div>
              <div class="ni-notfull">£722.80 shortfall</div>
            </div>
          </dt>
          <dt>
            <div class="ni-wrapper">
              <div class="ni-years2">2013-14</div>
              <div class="ni-notfull">£704.60 shortfall</div>
            </div>
          </dt>
          <dt>
            <div class="ni-wrapper">
              <div class="ni-years2">2012-13</div>
              <div class="ni-notfull">£689.00 shortfall</div>
            </div>
          </dt>
          <dt>
            <div class="ni-wrapper">
              <div class="ni-years2">2011-12</div>
              <div class="ni-notfull">£289.80 shortfall</div>
            </div>
          </dt>
        </dl>
      </div>
      <div class="column-one-third">
        <aside class="govuk-related-items dwp-related-items" role="complementary">
          <h2 class="heading-small" id="subsection-title">Full years and shortfalls</h2>
          <nav role="navigation" aria-labelledby="subsection-title">
            <ul class="font-xsmall">

              <nav role="navigation" aria-labelledby="parent-subsection">
                <ul class="list-bullets">
                  <li><span style="font-size: 16px"><span style="font-weight: 700">28</span> qualifying years </span>
                  </li>
                  <li><span style="font-size: 16px"><span style="font-weight: 700">18</span> years to contribute before 05 April
                    2034</span>
                  </li>
                  <li><span style="font-size: 16px"><span style="font-weight: 700">5</span> years with a shortfall</span>
                  </li>
                </ul>
            </ul>
            </nav>
        </aside>
      </div>
    </div>
  </div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
// function show(elementId) {
//   document.getElementById("id1").style.display = "none";
//   document.getElementById("id2").style.display = "block";
//   document.getElementById(elementId).style.display = "block";
// }


jQuery(document).ready(function($){


  $("a#tab-overview").click(function() {
    $(".tabs-nav li").removeClass("active");

    $(this).parent().addClass("active");
    $("#forecast").show();
    $("#ni-record").hide();
    $("#contracting-out").hide();
    $("#contracting-out").hide();
    $("#options").hide();
    window.location.hash = "#lie-forecast";
    return false;
  });

  $("a#tab-options").click(function() {
    $(".tabs-nav li").removeClass("active");

    $(this).parent().addClass("active");
     $("#options").show();
    $("#forecast").hide();
    $("#ni-record").hide();
    $("#contracting-out").hide();
    window.location.hash = "#lie-options";
    return false;
  });

  $("a#tab-ni-record").click(function() {
    $(".tabs-nav li").removeClass("active");

    $(this).parent().addClass("active");
    $("#ni-record").show();
    $("#contracting-out").hide();
    $("#forecast").hide();
    $("#options").hide();
    window.location.hash = "#lie-ni-record";
    return false;
  });


  $("a#tab-contracting-out").click(function() {
    $(".tabs-nav li").removeClass("active");

    $(this).parent().addClass("active");
    $("#contracting-out").show();
    $("#ni-record").hide();
    $("#forecast").hide();
    $("#options").hide();
    window.location.hash = "#lie-contracting-out";
    return false;
  });

  if(window.location.hash === "#lie-forecast") {
    $("a#tab-overview").trigger('click');
  }
  else if (window.location.hash === "#lie-ni-record") {
    $("a#tab-ni-record").trigger('click');
  }

  else if (window.location.hash === "#lie-contracting-out") {
    $("a#tab-contracting-out").trigger('click');
  }

  else if (window.location.hash === "#lie-optionst") {
    $("a#tab-options").trigger('click');
  }
});


</script>
        </div>
</main>
<script type="text/javascript">
    function removeWhitespaces() {
        var txtbox = document.getElementById('search-main');
        txtbox.value = txtbox.value.replace(/\s/g, "");
    }

</script>
{% endblock %}
