<script>let  verifyBtn = null;</script>
<% if (user.account_type === "client") { %>
<div class="details">
  <h3>
    Howdy <%= user._name %>, Welcome to Dropin!</h3>
  <p>Thank you for choosing Dropin as your staffing partner. We're excited to work with you and help you achieve your business goals.</p>

</div>

<div class="grid">
  <div class="balance card card-bg">
    <h2>Pending Payments </h2>
    <%= user.payment_history.filter(x => x.status !== "success").length %>
  </div>
  <div class="proposals card">
    <h2>Jobs Posted</h2>
    <div class="success"><%= user.postedJobs.filter(x => x.status != "accepted")?.length ??  0 %></div>
  </div>
  <div class="contracts card">
    <h2>Contracts</h2>
    <div class="orange"><%= user.contracts?.length ??  0 %></div>
  </div>
  <div class="about-me card card-bg ">
    <h2>Email Verified</h2>
    <% if(user.verified) {%>
    <div class="flex-centered verify">
      <span class="material-symbols-outlined">
        verified
      </span><span>Verified</span>
    </div>
    <% }else { %>
    <button id="verify-btn" class="orange text-btn">Verify Now</button>
    <script>
      verifyBtn = document.querySelector("#verify-btn");
      verifyBtn.addEventListener("click", async () => {
        try {
          showLoader();
          const res = await fetch('/api/user/get-verified');

          if (res.status === 200) {
            verifyBtn.setAttribute("disabled", "")
            hideLoader();
            showSnackBar("Verfication link sent successsfully to registered email id", "success");
          } else {
            const d = await res.json();
            hideLoader();
            showSnackBar(d.message, "error");
          }

        } catch (e) {
          console.log(e)
          hideLoader();
          showSnackBar("Something went wrong", "error");
        }
      })
    </script>

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

<div class="card rflex align-center">
  Feel like posting a new job ?

  <a href="/app/post-job" class="inline-block btn">
    Post Job
  </a>
</div>

<% } else { %>
<div class="details">
  <h3>
    Howdy <%= user._name %>, Welcome to Dropin!</h3>
  <p>
    Welcome to your dashboard! Here, you'll be able to manage your projects, view your earnings, and communicate with clients.Remember to keep your profile and portfolio up-to-date to attract more clients and showcase your skills.
  </p>

</div>

<div class="grid">
  <div class="balance card card-bg">
    <h2>Balance</h2>
    <div class="gold">
      $ <%= user.balance %>
    </div>
  </div>
  <div class="proposals card">
    <h2>Proposals</h2>
    <div class="success"><%= user.job_proposals.filter(x => x.status != "accepted")?.length ??  0 %></div>
  </div>
  <div class="contracts card">
    <h2>Contracts</h2>
    <div class="orange"><%= user.contracts?.length ??  0 %></div>
  </div>
  <div class="about-me card card-bg ">
    <h2>Email Verified</h2>
    <% if(user.verified) {%>
    <div class="flex-centered verify">
      <span class="material-symbols-outlined">
        verified
      </span><span>Verified</span>
    </div>
    <% }else { %>
      <button id="verify-btn" class="orange text-btn">Verify Now</button>
    <script>
      verifyBtn = document.querySelector("#verify-btn");
      verifyBtn.addEventListener("click", async () => {
        try {
          showLoader();
          const res = await fetch('/api/user/get-verified');

          if (res.status === 200) {
            verifyBtn.setAttribute("disabled", "")
            hideLoader();
            showSnackBar("Verfication link sent successsfully to registered email id", "success");
          } else {
            const d = await res.json();
            hideLoader();
            showSnackBar(d.message, "error");
          }

        } catch (e) {
          console.log(e)
          hideLoader();
          showSnackBar("Something went wrong", "error");
        }
      })
    </script>
    <% } %>
  </div>
</div>

<div class="card rflex align-center">
  Checkout jobs that may suit your skills.

  <a href="/app/jobs" class="inline-block btn">
    View Jobs
  </a>
</div>

<% } %>