<!DOCTYPE html>
<html>

<head>
  <title>View Reader</title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
</head>

<header>
  <%- include('../yellowtoolbar.ejs', {pageLocation: 'Readers'}) %>

</header>

<body>
  <div id="wrapper" class="mx-6 my-6">
    <div class="mb-4">
      <div class="uppercase">Readers</div>
      <div class="text-4xl font-semibold">Viewing <%= reader.firstName %> <%= reader.surName %> </div>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-6">
      <div class="col-span-2">

        <div class="grid sm:grid-cols-2 gap-3">
          <div>
            <div class="mt-4 ml-1 uppercase badge badge-md badge-primary rounded-sm text-xs block">Identification</div>
            <label class="label"><span class="label-text">Reader ID Number</span></label>
            <div class="text-2xl border-b-2 border-base-200 w-full max-w-xs ml-1 mb-2"><%= reader.readerIDNumber %></div>
            <div class="mt-4 ml-1 uppercase badge badge-md badge-primary rounded-sm text-xs block">General</div>
            <label class="label"><span class="label-text">First Name</span></label>
            <div class="text-2xl border-b-2 border-base-200 w-full max-w-xs ml-1 mb-2"><%= reader.firstName %></div>
            <label class="label"><span class="label-text">Surname</span></label>
            <div class="text-2xl border-b-2 border-base-200 w-full max-w-xs ml-1 mb-2"><%= reader.surName %></div>
            <div class="mt-4 ml-1 uppercase text-base-500 text-xs">Contact</div>
            <label class="label"><span class="label-text">E-mail Address</span></label>
            <div class="text-2xl border-b-2 border-base-200 w-full max-w-xs ml-1 mb-2"><%= reader.emailAddress %></div>
            <label class="label"><span class="label-text">Phone Number</span></label>
            <div class="text-2xl border-b-2 border-base-200 w-full max-w-xs ml-1 mb-2"><%= reader.phoneNumber %></div>
          </div>
          <div>
            <div class="mt-4 ml-1 uppercase badge badge-md badge-primary rounded-sm text-xs block">Residence Address</div>
            <label class="label"><span class="label-text">Address Line 1</span></label>
            <div class="text-2xl border-b-2 border-base-200 w-full max-w-xs ml-1 mb-2"><%= reader.address1 %></div>
            <label class="label"><span class="label-text">Address Line 2</span></label>
            <div class="text-2xl border-b-2 border-base-200 w-full max-w-xs ml-1 mb-2"><%= reader.address2 %></div>
            <label class="label"><span class="label-text">Postcode</span></label>
            <div class="text-2xl border-b-2 border-base-200 w-full max-w-xs ml-1 mb-2"><%= reader.addressPostcode %></div>
            <label class="label"><span class="label-text">City</span></label>
            <div class="text-2xl border-b-2 border-base-200 w-full max-w-xs ml-1 mb-2"><%= reader.addressCity %></div>
            <div class="mt-4 ml-1 uppercase badge badge-md badge-primary rounded-sm text-xs block">Additional</div>
            <label class="label"><span class="label-text">Reader's Residence Status</span></label>
            <div class="text-2xl border-b-2 border-base-200 w-full max-w-xs ml-1 mb-2">
              <% if (locals.reader.localResidence === 'true') { %>
              Yes
              <% } %>
              <% if (locals.reader.localResidence === 'false') { %>
              No
              <% } %>
            </div>
            <label class="label"><span class="label-text">Reader's Education Status</span></label>
            <div class="text-2xl border-b-2 border-base-200 w-full max-w-xs ml-1 mb-2">

              <% var options = ['', 'Yes - Primary & Middle', 'Yes - Higher', 'No - Obtained Higher Education Diploma', 'No - Obtained Diploma below Higher Education', 'No - No Education Record', 'Other'] %>
              <%= options[locals.reader.educationStatus] %>

            </div>

          </div>
        </div>
      </div>
      <div class="col-span-2 xl:col-span-1">
        <div class="border-2 border-primary h-full w-full rounded-xl px-4 py-4">
          <div class="mb-4 btn-control flex flex-col gap-4">
            <div class="text-3xl font-semibold"> Current Loans </div>
            <% for( let index = 0; index < locals.relevantLoans.length; index++ ) { %>
            <div tabindex="0" class="collapse collapse-arrow border border-base-300 bg-base-100 rounded-box p-0">
              <div class="collapse-title min-h-0 py-1">
                <div class="flex justify-between items-center">
                  <div>
                    <div class="text-xs">Copy ID <%= relevantLoans[index]['collectionCopy'][0]['copyIDNumber'] %></div>
                    <div class="text-l font-medium"><%= relevantLoans[index]['book']['title'] %> </div>
                  </div>
                  <div class="badge badge-primary badge-sm"><span class="hidden md:inline">Return&nbsp</span><%= relevantLoans[index]['dateToReturn'].toLocaleDateString() %> </div>
                </div>
              </div>
              <div class="collapse-content">
                <p class="text-sm mt-2">
                  <button class="btn btn-primary btn-sm" onclick="window.location.href='/yellow/counter/loans/return/<%= relevantLoans[index][`_id`] %>'">Return</button>
                  <button class="btn btn-primary btn-sm" onclick="window.location.href='/yellow/counter/loans/prolong/<%= relevantLoans[index][`_id`] %>'">Prolong</button>
                  <!-- Button to return -->
                </p>
              </div>
            </div>
            <% } %>
          </div>
        </div>
      </div>

    </div>



  </div>