<% if (user.account_type === "client") { %>
<div class="modal" id="cover-letter-modal">
  <div class="modal-backdrop"></div>
  <div class="modal-content">
    <div class="content">
      <h3 style="color: var(--accent-clr-light)">Cover Letter</h3>
      <div class="letter"></div>
    </div>
  </div>
</div>

<div class="proposals">
  <% if (proposals && proposals.length > 0) { %>

  <% for(const proposal of  proposals ) { %>
  <% if (proposal) { %>
  <div class="proposal card">
    <div class="title">
      <a href="/app/posted-job/<%= proposal.job_id %>">
        <%= proposal.job_title %>
      </a>
    </div>
    <div class="user-details flex-centered">
      <div class="image">
        <img class="circular" src="<%= proposal.freelancer_profile_image ?? "/assets/images/user.jpg" %>" alt="user" width="50" height="50">
      </div>
      <div class="info">
        <a class="link" href="/app/freelancer-details/?id=<%= proposal.freelancer_id %>" class="block">
          <div class="name"><%= proposal.freelancer_name %></div>
        </a>

        <div class="email silver">
          <%= proposal.freelancer_email %>
        </div>
      </div>


    </div>
    <div class="cover-letter">
      <h3>Cover Letter
        <div class="read-cover-letter">
          <div hidden class="hidden">
            <%= proposal.cover_letter %>
          </div>
          <button title="Read cover letter" class="btn inline-block iconbtn">
            <span class="material-symbols-outlined">
              library_books
            </span>
          </button>
          <button data-proposal-id="<%= proposal.proposal_id %>" title="Approve" class="approve-btn btn inline-block iconbtn">
            <span class="material-symbols-outlined">
              check_circle
            </span>
          </button>
        </div>
      </h3>
      <p>
        <%= proposal.cover_letter.slice(0,255) %>
      </p>
    </div>
    <div class="details">
      <div class="status job-status">
        <h3>Status</h3>
        <p class="<%= proposal.status  %>">
          <%= proposal.status %>
        </p>
      </div>
      <div class="bid-amount">
        <h3>Bid Amount</h3>
        <p class="gold">
          $ <%= proposal.payment_amount %>
        </p>
      </div>
      <div class="timeframe">
        <h3>Timeframe</h3>
        <p>
          <%= proposal.timeframe %> days
        </p>
      </div>
    </div>
  </div>


  <% } %>


  <% } %>

  <script>
    const coverLetterDivs = document.querySelectorAll(".read-cover-letter");
    const coverLetterModal = document.getElementById("cover-letter-modal");

    if (coverLetterDivs)
      coverLetterDivs.forEach(div => {
        const letterContent = div.querySelector(".hidden").textContent;

        const button = div.querySelector("button");
        button.addEventListener("click", () => {
          if (coverLetterModal) {
            coverLetterModal.querySelector(".letter").textContent = letterContent;
            coverLetterModal.classList.add("open");
          }
        });

      })

    const proposals = document.querySelectorAll(".proposal");

    if (proposals) {

      proposals.forEach(proposal => {


        const approveButton = proposal.querySelector(".approve-btn");
        if (approveButton) {
          approveButton.addEventListener("click", async () => {
            const jobStatus = proposal.querySelector(".job-status > p");
            const approved = confirm("Please confirm to continue");
            const proposalId = parseInt(approveButton.getAttribute("data-proposal-id"))
            if (approved) {
              try {
                showLoader();
                const res = await fetch(`/api/jobs/create-contract/${proposalId}`, {
                  method: "POST",
                });

                if (res.status === 200) {
                  proposals.forEach(x => {
                    if (
                      x.querySelectorAll(`[data-proposal-id='${proposalId}']`).length > 0) {
                      const js = proposal.querySelector(".job-status > p");
                      const button = proposal.querySelector(".approve-btn");

                      button.setAttribute("disabled", "");

                      js.className = "declined";
                      js.textContent = "declined";
                    };
                  })

                  approveButton.setAttribute("disabled", "");
                  jobStatus.className = "";
                  jobStatus.classList.add("accepted");
                  jobStatus.textContent = "accepted";
                  hideLoader();
                  showSnackBar("Prosposal accepted successfully", "success")
                } else {
                  const d = await res.json();
                  hideLoader();
                  showSnackBar(d.message, "error");
                }
              } catch (e) {
                console.log(e)
                hideLoader();
                showSnackBar("Something went wrong", "error");
              }
            }
          })
        }
      });
    }
  </script>

  <% } else { %>
  <div class="empty">Nothing to display</div>
  <% } %>

</div>

<% } else { %>
<% if(user.job_proposals) {%>
<div class="proposals">
  <% for(const proposal of  user.job_proposals ) { %>
  <% if (proposal.status != "accepted") { %>
  <div class="proposal card">
    <div class="title">
      <a href="/app/jobs/<%= proposal.job_id %>">
        <%= proposal.job_title %>
      </a>
    </div>
    <div class="cover-letter">
      <h3>Cover Letter
        <button class="btn inline-block iconbtn">
          <span class="material-symbols-outlined">
            edit
          </span>
        </button>
      </h3>
      <p>
        <%= proposal.cover_letter.slice(0,255) %>
      </p>
    </div>
    <div class="details">
      <div class="status">
        <h3>Status</h3>
        <p class="<%= proposal.status  %>">
          <%= proposal.status %>
        </p>
      </div>
      <div class="bid-amount">
        <h3>Bid Amount</h3>
        <p class="gold">
          $ <%= proposal.payment_amount %>
        </p>
      </div>
      <div class="timeframe">
        <h3>Timeframe</h3>
        <p>
          <%= proposal.timeframe %> days
        </p>
      </div>
    </div>
  </div>
  <% } %>
  <% } %>
</div>
<% } %>

<% if (user.job_proposals?.filter(x => x.status != "accepted").length === 0) { %>
<div class="empty">Nothing to display</div>
<% } %>

<% } %>