<!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" />
    <title>Acknowledgement slip - <%= project.project_submissions[0].project_topic.student.username%></title>
    <style>
      .box{
          background-color: white;
          height: 100vh;
          background-image: url("img/kpb.png");
          background-position: center center;
          background-repeat: no-repeat;
          background-size: cover;
          /* background-size: 40%;  */
      }
      .img_size{
          width: 50px;
          height: 50px;
        }
        .title_text{
          text-align: center;
          font-weight: bold;
          font-size: 22px;
        }
        .pmb{
          text-align: center;
          font-weight: bold;
          font-size: 13px;
        }
        .pas{
          text-decoration: underline;
          font-weight:900;
          text-align: center;
          font-size: large;
          font-size: 13px;
        }
        .heading{
          text-decoration: underline;
          font-weight:900;
        }
        .img_box{
          height: 110px;
          width: inherit;
          background-color: rgb(233, 230, 230);
        }
        .cont{
          display: inline-block;
        }
        .b_text{
          display: inline-block;
        }
        .value{
          font-size: 11px;
        }
        .p_sub{
          font-size: 11px;
        }
        .pr_text{
          font-size: 11px;
        }
        .line {
          border-top: 1px solid black;
          width: 10rem;
          /* margin-bottom: 10px; */
        }
        
        .signature-line {
          border-top: 1px solid black;
          justify-content: end;
          width: 20rem;
          margin-top: 10px;
        }
        .line_text{
          text-align: center;
          align-items: center;
          font-size: 11px;
        }
        .date{
          float: left;
          align-items: start;
        }
        .sign{
          float: right;
          align-items: flex-end;
        }
        .nbred{
          color: red;
          font-size: 10px;
        }
    </style>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"
    ></script>
  </head>
  <body onload="window.print()" >
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-lg-12 box">
            <div class="row mt-3">
              <div class="col-lg-2 col-md-2 col-2">
                <img class="img_size" src="/img/kp.png" alt="" />
              </div>
              <div class="col-lg-10 col-md-10 col-10">
                <h2 class="title_text">Kwara State Polytechnic</h2>
                <h4 class="pmb">P.M.B 1375, Ilorin</h4>
                <h4 class="pas">Project Acknowledgement Slip (PAS)</h4>
                <h4 class="pas">[Final year Research Report]</h4>
              </div>
            </div>
            <div class="heading mt-3">
              <h6><strong>PERSONAL DATA</strong></h6>
            </div>
            <div class="row">
              <div class="col-lg-9 col-md-8 col-9">
                <div class="row">
                  <div class="col-lg-4 col-4">
                    <span class="p_sub"
                      ><strong>Matriculation No:</strong></span
                    >
                  </div>
                  <div class="col-lg-8 col-8">
                    <span class="value"><%= project.project_submissions[0].project_topic.student.username%></span>
                  </div>
                  <div class="col-lg-4">
                    <span class="p_sub"><strong>Student Name:</strong></span>
                  </div>
                  <div class="col-lg-8 col-8">
                    <span class="value"><%= project.project_submissions[0].project_topic.student.profile.lastname%>
                      <%= project.project_submissions[0].project_topic.student.profile.middlename%>
                      <%= project.project_submissions[0].project_topic.student.profile.firstname%></span>
                  </div>
                  <div class="col-lg-4">
                    <span class="p_sub"><strong>Email Address:</strong></span>
                  </div>
                  <div class="col-lg-8 col-8">
                    <span class="value"><%= project.project_submissions[0].project_topic.student.email%></span>
                  </div>
                  <div class="col-lg-4">
                    <span class="p_sub"><strong>Institue:</strong></span>
                  </div>
                  <div class="col-lg-8 col-8">
                    <span class="value"
                      ><%= project.project_submissions[0].project_topic.student.profile.department.institute.name%></span
                    >
                  </div>
                  <div class="col-lg-4">
                    <span class="p_sub"><strong>Department:</strong></span>
                  </div>
                  <div class="col-lg-8 col-8">
                    <span class="value"
                      ><%= project.project_submissions[0].project_topic.student.profile.department.name%></span
                    >
                  </div>
                  <div class="col-lg-2">
                    <span class="p_sub"><strong>Study Mode:</strong></span>
                  </div>
                  <div class="col-lg-8 col-8">
                    <span class="value"><%= project.project_submissions[0].project_topic.student.profile.study_mode.name%></span>
                  </div>
                </div>
              </div>
              <div class="col-lg-2 col-md-2 col-3">
                <div class="img_box">

                <img  src="/avatar/<%= project.project_submissions[0].project_topic.student.profile.photo_path%>" alt="" width="53" height="53"  >
                </div>
                
              </div>
            </div>
            <br>
            <div class="heading mt-3">
              <h6><strong>QUALITY ASSURANCE UNIT CERTIFICATION:</strong></h6>
            </div>
            <div>
              <p class="pr_text">
                This is to Certify that <strong><%= project.project_submissions[0].project_topic.student.profile.lastname%>
                  <%= project.project_submissions[0].project_topic.student.profile.middlename%>
                  <%= project.project_submissions[0].project_topic.student.profile.firstname%></strong> with the project topic
                <strong><%=project.topic %></strong> has successfully completed and submitted the
                Research for <%= Sessions%> academic session.<br /><br />
                Kindly proceed with binding of the said project.
              </p>
            </div>
            <br>
            <div class="row mt-4">
              <div class="col-lg-3 date">
                <div class="line"></div>
                <span class="line_text">Date</span>
              </div>
              <div class="col-lg-2 date"></div>

              <div class="col-lg-5 sign">
                <div class="signature-line"></div>
                <span class="line_text"
                  >Director Signature and Official Stamp</span
                >
              </div>
            </div>
            <div class="row">
              <div class="col-lg-2 mt-3">
                <img src="img/qr.png" alt="" />
              </div>
            </div>
            <div class="nbred mt-4">
              <p>
                This Document Admits Student for Project defense. No Project
                Grade Will be issued unless Student Signed and Stamped this
                Document
              </p>
            </div>
          </div>
        </div>
      </div>
  </body>
</html>
