<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      font-style: normal;
      font-family: Helvetica, Arial, sans-serif;
      font-size: 13px;
    }

    .text-center {
      text-align: center;
    }

    .text-left {
      text-align: left;
    }

    .text-right {
      text-align: right;
    }

    .b {
      font-weight: bold;
    }

    .app_name {
      font-size: 19px;
      letter-spacing: -0.06px;
    }

    .title_name {
      font-size: 14px;
      letter-spacing: -0.06px;
    }

    .user_address {
      font-size: 15px;
      letter-spacing: -0.06px;
    }

    .hospital_address {
      padding-top: 10px !important;
      padding-bottom: 10px;
    }

    .d-none {
      visibility: hidden;
    }

    .logo_img {
      /* width: 50px; */
      height: 50px;
      object-fit: cover;
    }

    .break {
      height: 100px;
      color: white;
      font-size: 2px;
    }

    .break_30 {
      height: 30px;
      color: white;
      font-size: 2px;
    }

    .blank {
      color: white;
      font-size: 0.1px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      border: 1px solid black;
    }

    td {
      border: 0.7px solid;
      vertical-align: baseline;
    }

    .table-row td {
      padding-top: 10px;
      /* Adjust the padding as needed */
      padding-left: 5px;
      /* Adjust the padding as needed */
      padding-bottom: 10px;
      /* Adjust the padding as needed */
    }

    .no_border {
      border: none;
    }

    .border_grey {
      border: 1px solid #E7E7E7,
    }

    .border_curve {
      border-radius: 20px;
      overflow: hidden;
    }

    .w_50_p_5 {
      width: 50%;
      padding: 5px;
    }

    .w_50_p_10 {
      width: 50%;
      padding: 10px;
    }

    .w_70_p_5 {
      width: 60% !important;
      padding: 5px;
    }

    .m-5 {
      margin-top: 5px;
      margin-bottom: 5px;
    }

    .pt-5 {
      padding-top: 5px;
    }

    .pt-20 {
      padding-top: 20px;
    }

    .w_50_p_5 td {
      padding-left: 25px;
      padding-top: 4px;
      padding-bottom: 4px;
    }

    .w_30_70 td:nth-child(1) {
      width: 30%
    }

    .w_30_70 td:nth-child(2) {
      width: 70%
    }

    th {
      padding: 4px;
    }

    .w_100 {
      width: 100%;
    }

    .pl_15 {
      padding-left: 15px;
    }

    .pr_15 {
      padding-right: 15px;
    }

    .pl_10 {
      padding-left: 10px;
    }

    .pl_5 {
      padding-left: 5px;
    }

    .pt-15 {
      padding-top: 15px;
    }

    .mt_20 {
      margin-top: 20px;
    }

    .thick_border {
      border: 0.5px solid #737A91
    }

    .div_b_color {
      background-color: #F2F2F2;
    }

    .border_spacing {
      margin-left: 20px;
      margin-right: 20px;
      width: 100%;
      overflow-x: auto;
      /* Enables horizontal scrolling */
    }

    .scrollable-table {
      min-width: 5000px !important;
      /* Set this to a suitable value for your content */
    }

    .colored-column {
      background-color: #87c5c5;
    }

    .no_row_border td {
      border-left: none !important;
      border-right: none !important;
    }

    th {
      white-space: nowrap !important;
      text-align: left !important;
    }

    /* Add padding for readability */
    th,
    td {
      padding: 8px;
      border: 1px solid #ddd;
    }

    td {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      /* Prevent content wrapping */
    }
  </style>
</head>

<body>
  <table class="text-center no_border">
    <tbody>
    </tbody>
  </table>

  <table class="text-center no_border">
    <tbody>
      <tr>
        <td style="width: 20%;" class="no_border"></td>
        <td style="width: 60%;" class="no_border">
          <div class="text-center b app_name" style="color: #000000">Otemu Educational Foundation</div>
        </td>
        <td style="width: 20%;" class="no_border"></td>
      </tr>
    </tbody>
  </table>

  <table class="text-center no_border" style="margin-top: 1px">
    <tbody>
      <tr>
        <td style="width: 10%;" class="no_border"></td>
        <td style="width: 80%;" class="no_border">
          <div class="text-center b user_address">Learn Today, Lead Tomorrow</div>
        </td>
        <td style="width: 10%;" class="no_border"></td>
      </tr>
    </tbody>
  </table>

  <div class="border_spacing">
    <table class="scrollable-table" style="margin-top: 30px; border-bottom:none">
      <thead>
        <tr class="colored-column">
          <th>S/N</th>
          <th>Applied At</th>
          <th>Unique ID</th>
          <th>First Name</th>
          <th>Middle Name</th>
          <th>Last Name</th>
          <th>Date of Birth</th>
          <th>Gender</th>
          <th>State</th>
          <th>LGA</th>
          <th>Relationship Status</th>
          <th>Residential Address</th>
          <th>Secondary School Name</th>
          <th>Email</th>
          <th>Phone Number</th>
          <th>WhatsApp Number</th>
          <th>NIN</th>
          <th>BVN</th>
          <th>Mother Name</th>
          <th>Mother LGA</th>
          <th>Mother State</th>
          <th>Mother Maiden Name</th>
          <th>Mother Phone</th>
          <th>Mother BVN</th>
          <th>Mother NIN</th>
          <th>Father Name</th>
          <th>Father LGA</th>
          <th>Father State</th>
          <th>Father Phone</th>
          <th>Father BVN</th>
          <th>Father NIN</th>
          <th>Is Scholarship Beneficiary</th>
          <th>Is Open to Western Delta University</th>
          <th>Course of Study</th>
          <th>Duration of Study</th>
          <th>Year of Entry</th>
          <th>Current Year of Study</th>
        </tr>
      </thead>
      <tbody>
        @each((application, index) in applications)
        <tr class="table-row">
          <td class="text-center">{{ index + 1 }}</td>
          <td>{{ application.createdAt }}</td>
          <td>{{ application.uuid }}</td>
          <td>{{ application.user.first_name }}</td>
          <td>{{ application.user.middle_name }}</td>
          <td>{{ application.user.last_name }}</td>
          <td>{{ application.user.dob }}</td>
          <td>{{ application.user.gender }}</td>
          <td>{{ application.state.name }}</td>
          <td>{{ application.lga.name }}</td>
          <td>{{ application.relationship_status }}</td>
          <td>{{ application.residential_address }}</td>
          <td>{{ application.secondary_school_name }}</td>
          <td>{{ application.user.email }}</td>
          <td>{{ application.user.phone_number }}</td>
          <td>{{ application.user.whatsapp_number }}</td>
          <td>{{ application.nin }}</td>
          <td>{{ application.bvn }}</td>
          <td>{{ application.mother_name }}</td>
          <td>{{ application.motherLga?.name }}</td>
          <td>{{ application.motherState?.name }}</td>
          <td>{{ application.mother_maiden_name }}</td>
          <td>{{ application.mother_phone }}</td>
          <td>{{ application.mother_nin }}</td>
          <td>{{ application.mother_bvn }}</td>
          <td>{{ application.father_name }}</td>
          <td>{{ application.fatherLga?.name }}</td>
          <td>{{ application.fatherState?.name }}</td>
          <td>{{ application.father_phone }}</td>
          <td>{{ application.father_nin }}</td>
          <td>{{ application.father_bvn }}</td>
          <td>{{ boolOptions[application.is_scholarship_beneficiary] || null }}</td>
          <td>{{ boolOptions[application.is_open_to_western_delta_university] || null }}</td>
          <td>{{ application.course_of_study }}</td>
          <td>{{ application.duration_of_study }}</td>
          <td>{{ application.year_of_entry }}</td>
          <td>{{ application.current_year_of_study }}</td>
        </tr>
        @endeach
      </tbody>
    </table>
  </div>
</body>