{% load static i18n horillafilters %}
<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link rel="preconnect" href="https://fonts.googleapis.com" />
      <link
        href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
        rel="stylesheet"
      />
      <style>
        html {
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          overflow-x: hidden;
          font-family: "Inter", serif;
        }

        body {
          background-color: #f5f7ff;
          margin: 0;
        }

        table {
          caption-side: bottom;
          border-collapse: collapse;
          border: 1px solid #ccc;
        }
        table tr,
        table td,
        table th {
          border: 1px solid #ccc;
          padding: 10px;
          text-align: left;
        }

        .oh-payslip {
          background: #fff;
          padding: 40px;
          font-size: 16px;
        }

        .oh-payslip-container {
          max-width: 880px;
          padding: 30px 15px;
          margin-left: auto;
          margin-right: auto;
        }

        .oh-payslip-table .oh-payslip-td-head {
          color: #777;
          margin-right: 16px;
        }
        .oh-payslip-table .oh-payslip-td-value {
          color: #111;
        }

        .oh-footer-total .oh-footer-gross-text {
          margin: 0;
          color: #777;
        }
        .oh-footer-total .oh-footer-total-amount {
          font-weight: 700;
          width: 25%;
        }
        .oh-footer-total h5 {
          font-weight: 700;
          margin: 0px 0 12px 0;
        }

        .oh-payslip_head {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: justify;
          -ms-flex-pack: justify;
          justify-content: space-between;
          -webkit-box-align: end;
          -ms-flex-align: end;
          align-items: flex-end;
          padding-bottom: 25px;
          border-bottom: 1px solid #eaeaea;
          margin-bottom: 25px;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
        }

        .oh-logo img {
          width: 150px;
          -o-object-fit: cover;
          object-fit: cover;
        }

        .oh-payslip-secondhead p {
          color: #777;
        }
        .oh-payslip-secondhead h4 {
          font-size: 16px;
          margin: 10px 0;
          font-weight: 700;
        }

        .oh-payslip-company-name {
          font-weight: 700;
          font-size: 20px;
        }

        .oh-payslip-company-address {
          font-size: 16px;
          color: #777;
          width: 90%;
          word-wrap: break-word;
          margin-bottom: 0;
        }

        .oh-payslip_left .oh-payslip-left-title {
          font-size: 16px;
          color: #777;
        }
        .oh-payslip_left .oh-payslip-left-value {
          font-size: 16px;
          font-weight: 700;
          color: #111;
          margin: 10px 0;
        }

        .oh-allowance-table td {
          color: #777;
        }
        .oh-allowance-table .oh-allowance-amount {
          color: #111;
          width: 25%;
        }

        .oh-bg-color {
          background-color: #f7f7f7;
        }

        .oh-footer-page-number {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          margin-top: 24px;
        }
        .oh-footer-page-number p {
          color: #777;
          margin: 0;
        }
        .mt-4 {
          margin-top: 24px;
        }
        .w-100 {
          width: 100%;
        }
        .w-50 {
          width: 50%;
        }
        .d-flex {
          display: flex;
        }
        .justify-content-between {
          justify-content: space-between;
        }
        .align-item-center {
          align-items: center;
        }
        .gap-2 {
          gap: 16px;
        }
      </style>

      <script>
          function printDiv() {
              const printContents = document.getElementById('printDiv').innerHTML;
              const originalContents = document.body.innerHTML;

              // Replace body content with print content
              document.body.innerHTML = printContents;

              // Add event listener for after printing
              window.onafterprint = () => {
                  window.location.href = document.referrer; // Redirect to the previous page
              };

              // Open print dialog
              window.print();

              // Restore original content
              document.body.innerHTML = originalContents;

            }

            // Call printDiv on page load
            window.onload = printDiv;

      </script>

    </head>
    <body id="printDiv">
          <div class="container oh-payslip-container">
      <div class="oh-payslip">
        <div class="oh-payslip_in" id="download_section">
          {% if employee.employee_work_info.company_id %}
            <div class="oh-payslip_head">
              <div class="oh-payslip_left">
                <p class="oh-payslip-company-name">{{employee.employee_work_info.company_id}}</p>
                <p class="oh-payslip-company-address">
                  {{employee.employee_work_info.company_id.address}}
                  {{employee.employee_work_info.company_id.country}} {{employee.employee_work_info.company_id.state}}, {{employee.employee_work_info.company_id.city}}
                  {{employee.employee_work_info.company_id.zip}}
                </p>
              </div>
              <div class="cs-payslip_right cs-text_right">
                <div class="oh-logo cs-mb5">
                  <img src="{{protocol}}://{{host}}{{employee.employee_work_info.company_id.icon.url}}" alt="Logo" />
                </div>
              </div>
            </div>
          {% else %}
            <div class="oh-payslip_head">
              <div class="oh-payslip_left">
                <p class="oh-payslip-company-name">{{company}} - Headquarters</p>
                <p class="oh-payslip-company-address">
                  {{company.address}}
                  {{company.country}} {{company.state}}, {{company.city}}
                  {{company.zip}}
                </p>
              </div>
              <div class="cs-payslip_right cs-text_right">
                <div class="oh-logo cs-mb5">
                  <img src="{{protocol}}://{{host}}{{company.icon.url}}" alt="Logo" />
                </div>
              </div>
            </div>
          {% endif %}
          <div
            class="oh-payslip-secondhead d-flex justify-content-between cs-mb10"
          >
            <h4>{{month_start_name}} {% trans "to" %} {{month_end_name}} {% trans "Payslip" %}</h4>
            <div class="oh-payslip_left">
              <div class="d-flex align-item-center gap-2">
                <span class="oh-payslip-left-title">{% trans "Employee Netpay :" %} </span>
                <p class="oh-payslip-left-value">{{net_pay|floatformat:2|currency_symbol_position}}<br /></p>
              </div>
            </div>
          </div>

          <table class="oh-payslip-table w-100 mt-4">
            <tbody>
              <tr class="">
                <td class="w-50">
                  <span class="oh-payslip-td-head">{% trans "Employee ID :" %}</span>
                  <span class="oh-payslip-td-value">{{employee.badge_id}}</span>
                </td>
                <td class="w-50">
                  <span class="oh-payslip-td-head">{% trans "Employee Name :" %}</span>
                  <span class="oh-payslip-td-value">{{employee}}</span>
                </td>
              </tr>
              <tr>
                <td class="w-50">
                  <span class="oh-payslip-td-head">{% trans "Department :" %}</span>
                  <span class="oh-payslip-td-value">{{employee.employee_work_info.department_id.department}}</span>
                </td>
                <td class="w-50">
                  <span class="oh-payslip-td-head">{% trans "Bank Acc./Cheque No :" %}</span>
                  <span class="oh-payslip-td-value">{{employee.employee_bank_details.account_number}}</span>
                </td>
              </tr>
            </tbody>
          </table>

          <table class="w-100 oh-allowance-table mt-4">
            <thead>
              <tr class="oh-bg-color">
                <th class="">{% trans "Allowance" %}</th>
                <th class="">{% trans "Amount" %}</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
									{% trans "Basic Pay" %}</td>
                <td class="oh-allowance-amount">
                  {{basic_pay|floatformat:2|currency_symbol_position}}
                </td>
              </tr>
              {% for allowance in all_allowances %}
                <tr>
                  <td class="">{{allowance.title}}</td>
                  <td class="oh-allowance-amount">
                    {{allowance.amount|floatformat:2|currency_symbol_position}}
                  </td>
                </tr>
              {% endfor %}
            </tbody>
            <tfoot class="oh-payslip__table-tfoot">
							<tr class="oh-payslip__table-tr">
								<th
									class="oh-payslip__table-tf"
								>
									{% trans "Total Gross Pay" %}
								</th>
								<th class="oh-payslip__table-tf">
									{{gross_pay|floatformat:2|currency_symbol_position}}
								</th>
							</tr>
						</tfoot>
          </table>

          <table class="w-100 oh-allowance-table mt-4">
            <thead>
              <tr class="oh-bg-color">
                <th class="">{% trans "Deducation" %}</th>
                <th class="">{% trans "Amount" %}</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="">{% trans "Loss of Pay" %}</td>
                <td class="oh-allowance-amount">
                  {{loss_of_pay|floatformat:2|currency_symbol_position}}
                </td>
              </tr>
              {% for deduction in basic_pay_deductions %}
                <tr>
                  <td class="">{{deduction.title}}</td>
                  <td class="oh-allowance-amount">
                    {{deduction.amount|floatformat:2|currency_symbol_position}}
                  </td>
                </tr>
              {% endfor %}
              {% for deduction in gross_pay_deductions %}
                <tr>
                  <td class="">{{deduction.title}}</td>
                  <td class="oh-allowance-amount">
                    {{deduction.amount|floatformat:2|currency_symbol_position}}
                  </td>
                </tr>
              {% endfor %}
              {% for deduction in pretax_deductions %}
                <tr>
                  <td class="">{{deduction.title}}</td>
                  <td class="oh-allowance-amount">
                    {{deduction.amount|floatformat:2|currency_symbol_position}}
                  </td>
                </tr>
              {% endfor %}
              {% for deduction in post_tax_deductions %}
                <tr>
                  <td class="">{{deduction.title}}</td>
                  <td class="oh-allowance-amount">
                    {{deduction.amount|floatformat:2|currency_symbol_position}}
                  </td>
                </tr>
              {% endfor %}
              <tr>
                <td class="">{% trans "Federal Tax" %}</td>
                <td class="oh-allowance-amount">
									{{federal_tax|floatformat:2|currency_symbol_position}}
                </td>
              </tr>
              {% for deduction in tax_deductions %}
                <tr>
                  <td class="">{{deduction.title}}</td>
                  <td class="oh-allowance-amount">
										{{deduction.amount|floatformat:2|currency_symbol_position}}
                  </td>
                </tr>
              {% endfor %}
              {% for deduction in net_deductions %}
                <tr>
                  <td class="">{{deduction.title}}</td>
                  <td class="oh-allowance-amount">
										{{deduction.amount|floatformat:2|currency_symbol_position}}
                  </td>
                </tr>
              {% endfor %}
            </tbody>
            <tfoot class="oh-payslip__table-tfoot">
							<tr class="oh-payslip__table-tr">
								<th class="oh-payslip__table-tf">{% trans "Total Deductions" %}</th>
								<th class="oh-payslip__table-tf">
									{{total_deductions|floatformat:2|currency_symbol_position}}
								</th>
							</tr>
						</tfoot>
          </table>
        </div>
        <div class="oh-footer-total mt-4">
          <table class="w-100">
            <tbody>
              <tr class="">
                <td class="">
                  <h5>{% trans "Total Net Payable" %}</h5>
                  <p class="oh-footer-gross-text">
                    {% trans "Gross earning - Total Deduction" %}
                  </p>
                </td>
                <td class="oh-footer-total-amount">
                  {{net_pay|floatformat:2|currency_symbol_position}}
                </td>
              </tr>
            </tbody>
          </table>
        </div>

      </div>
    </div>
    </body>
    <button type="button" onclick="printDiv()" id="" style="display:none;">
        print as PDF
    </button>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</html>
