<% if (user.account_type === "client") { %>
<% if (contracts) { %>

<div class="contracts">
  <% for( let index = 0; index < contracts.length; index++ ) { %>

  <div class="contract card">
    <div class="title flex-centered space-between">
      <a class="block" href="/app/posted-job/<%= contracts[index].job_id %>?status=<%=  contracts[index].job_status %>">
        <%= contracts[index].job_title %>
      </a>

      <a target="_blank" href="/app/freelancer-details?id=<%= contracts[index].freelancer_id %>" class="block link">
        <button title="Freelancer Details" class="icon-btn btn">
          <span class="material-symbols-outlined">
            badge
          </span>
        </button>
      </a>
    </div>
    <div class="desc">
      <%= contracts[index].job_description.slice(0,255) %>
    </div>
    <div class="contract-details">
      <div class="amount">
        <%= contracts[index].payment_amount %>
      </div>
      <div class="flex-centered">
        <div class="contract-status status <%= contracts[index].end_date?  "closed" : "open"   %>">
          <% if (contracts[index].end_date) { %>
          ENDED
          <% } else { %>
          PROGRESS
          <% } %>
        </div>
        <% if (contracts[index].end_date === null) { %>
        <button class="end-contract btn" data-contract-id="<%= contracts[index].contract_id %>" <%= contracts[index].job_status === "closed" ? '' : 'disabled'%>>
          End Contract
        </button>


        <% } %>
      </div>
    </div>
  </div>
  <% } %>


  <script>
    const contract = document.querySelectorAll('.contract');
    contract.forEach(contract => {

      const contractEndButton = contract.querySelector(".end-contract");
      const contractStatus = contract.querySelector(".contract-status");

      if (contractEndButton)
        contractEndButton.addEventListener("click", async (e) => {
          const contractId = parseInt(contractEndButton.getAttribute("data-contract-id"));
          const approved = confirm("Are you sure you want to end contract ?");
          if (approved) {
            try {
              showLoader();
              const res = await fetch(`/api/jobs/end-contract/${contractId}`, {
                method: "POST"
              });
              if (res.status === 200) {
                contractEndButton.setAttribute("disabled", "");
                contractStatus.className = "";
                contractStatus.className = "contract-status status closed";
                contractStatus.textContent = "ENDED";

                hideLoader();
                showSnackBar("Contract ended successfully", "success");
                setTimeout(() => {
                  window.location = "/app/payments"
                }, 300)
              } else {
                const d = await res.json();
                hideLoader();
                showSnackBar(d.message, "error");
              }
            } catch (e) {
              hideLoader();
              showSnackBar("Something went wrong", "error");
            }

          }
        })
    })
  </script>


</div>

<% } %>


<% } else { %>
<% if (contracts) { %>
<div class="contracts">
  <% for( let index = 0; index < contracts.length; index++ ) { %>
  <div class="contract card">
    <div class="title flex-centered space-between">
      <a href="/app/jobs/<%= contracts[index].job_id %>?status=<%=  contracts[index].job_status %>">
        <%= contracts[index].job_title %>
      </a>
      <% if (contracts[index].job_status === "progress") { %>
      <button title="Submit Job" data-job-id="<%=contracts[index].job_id %>" class="btn iconbtn finish-job">
        <span class="material-symbols-outlined">
          task_alt
        </span>
      </button>

      <% } %>
    </div>
    <div class="desc">
      <%= contracts[index].job_description.slice(0,255) %>
    </div>
    <div class="contract-details">
      <div class="amount">
        <%= contracts[index].payment_amount %>
      </div>
      <div class="status <%= contracts[index].end_date?  "closed" : "open"   %>">
        <% if (contracts[index].end_date) { %>
        ENDED
        <% } else { %>
        PROGRESS
        <% } %>
      </div>
    </div>
  </div>
  <% } %>
</div>

<script>
  const finishJobButtons = document.querySelectorAll(".finish-job");
  finishJobButtons.forEach(finishJobButton => {
    finishJobButton.addEventListener("click", async (e) => {
      const approved = confirm("Mark this job as complete ?");
      const jobId = parseInt(finishJobButton.getAttribute("data-job-id"));

      if (approved) {
        showLoader();
        try {
          const res = await fetch(`/api/jobs/submit/${jobId}`, {
            method: "POST"
          });
          if (res.status === 200) {
            finishJobButton.setAttribute("disabled", "");
            hideLoader();
            showSnackBar("Job ended successfully", "success")
          } else {
            const d = await res.json();
            hideLoader();
            showSnackBar(d.message, "error")
          }
        } catch (e) {
          hideLoader();
          showSnackBar("Something went wrong", "error");
        }
      }
    });
  })
</script>
<% } %>
<% } %>


<% if (contracts?.length === 0 || !contracts) { %>
<div class="empty">Nothing to display</div>
<% } %>