<div class="modal" id="proposal-modal">
  <div class="modal-backdrop"></div>
  <div class="modal-content">
    <div class="content">
      <form class="form" id="proposal-form">
        <h3>Proposal</h3>
        <div class="form-element-wrapper">
          <div class="form-element">
            <label for="time_frame">Timeframe </label>
            <input name="time_frame" id="time_frame" type="number" min="1" placeholder="1 ( in days )" />
          </div>
        </div>
        <div class="form-element-wrapper">
          <div class="form-element">
            <label for="bid-amount">Bid amount</label>
            <input name="bid_amount" id="bid-amount" type="number" min="10" placeholder="10 (in $)" />
          </div>
        </div>
        <div class="form-element-wrapper">
          <div class="form-element">
            <label for="cover-letter">Cover Letter</label>
            <textarea placeholder="Write your cover letter here " name="cover_letter" id="cover-letter" rows="5"></textarea>
          </div>
        </div>
        <button class="btn" type="submit">Submit</button>
      </form>
    </div>
  </div>
</div>


<% if (user.account_type === "client") { %>
<div class="edit-modal modal" id="edit-modal">
  <div class="modal-backdrop"></div>
  <div class="modal-content">
    <div class="content">
      <form class="form">
        <h3>Edit job details</h3>
        <div class="form-element-wrapper">
          <div class="form-element">
            <label for="budget">Budget</label>
            <input type="number" id="budget" name="budget" value="<%= jobDetails.budget %>" placeholder="10 (in dollars)" />
          </div>
        </div>
        <div class="form-element-wrapper">
          <div class="form-element">
            <label for="skillset">Required Skillset</label>
            <input type="text" id="skillset" name="skillset" placeholder="e.g. react,react-native,flutter" value="<%= jobDetails?.required_skillset?.join(",") %>">
          </div>
        </div>
        <div class="form-element-wrapper">
          <div class="form-element">
            <label for="title">Title</label>
            <input type="text" id="title" value="<%= jobDetails.title %>" placeholder="Find luffy">
          </div>
        </div>
        <div class="form-element-wrapper">
          <div class="form-element">
            <label for="description">Description</label>
            <textarea name="description" id="description" rows="5" placeholder="Write description about the job"><%= jobDetails.description?.trim() %></textarea>
          </div>
        </div>

        <button type="submit" class="btn">Submit</button>
      </form>
    </div>
  </div>
</div>

<div class="job-details <%= jobDetails.status %>">
  <div class="posted-at flex-centered space-between"> Posted at :
    <%= jobDetails.created_at.toLocaleString() %>

    <button <%= jobDetails.status === "open" ? '': "disabled"  %> title="edit" class="btn iconbtn" id="edit-btn">
      <span class="material-symbols-outlined">
        edit
      </span>
    </button>
  </div>

  <div class="client-details">
    <div class="client_avatar">
      <img src="<%= jobDetails.client_profile_image ?? "/assets/images/user.jpg"%>" alt="User" width="40" height="40">
    </div>

    <div class="client-info">
      <div class="company-name">
        <% if (jobDetails.is_user_verified ) { %>
        <span class="material-symbols-outlined">
          verified
        </span>
        <% } %>
        <%= jobDetails.client_details.company_name %>
      </div>
      <div class="detail">
        <div class="name">
          <%= jobDetails.client_name %>
        </div>
        <span>•</span>
        <a class="email" href="mailto:<%= jobDetails.client_email %>">
          <%= jobDetails.client_email %>
        </a>
      </div>
    </div>

  </div>
  <div class="meta">
    <div class="budget"><%= jobDetails.budget %></div>
    <div class="status <%= jobDetails.status %>"><%= jobDetails.status %></div>
  </div>
  <div class="title"><%= jobDetails.title %></div>
  <div class="skillset">
    <% if (jobDetails.required_skillset != null) { %>
    <% for( const skillset of jobDetails.required_skillset) { %>
    <div class="skill">
      <%= skillset %>
    </div>
    <% } %>
    <% } %>
  </div>
  <div class="desc"><%= jobDetails.description %></div>

</div>

<script>
  const editButton = document.querySelector("#edit-btn");
  const editModal = document.querySelector("#edit-modal");
  const editForm = editModal.querySelector("form");

  editButton.addEventListener("click", (e) => {
    editModal.classList.add("open");
  });

  editForm?.addEventListener("submit", async (e) => {
    e.preventDefault();
    const {
      title,
      budget,
      skillset,
      description

    } = editForm;

    try {

      const approved = confirm("Please confirm to continue");
      if (approved) {
        showLoader();

        const res = await fetch("/api/jobs/update-details/<%= jobDetails.id %>", {
          method: "POST",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify({
            title: title.value,
            budget: budget.value,
            description: description.value,
            skillset: skillset.value?.trim()?.split(",")?.filter(x => x != null || x != "")
          })
        });
        if (res.status === 200) {
          editModal.classList.remove("open");
          hideLoader();
          showSnackBar("Job details updated successfully", "success");
          setTimeout(() => {
            window.location.reload();
          }, 300);
        } 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="job-details <%= jobDetails.status %>">
  <div class="posted-at"> Posted at :
    <%= jobDetails.created_at.toLocaleString() %>
  </div>

  <div class="client-details">
    <div class="client_avatar">
      <img src="<%= jobDetails.client_profile_image ?? "/assets/images/user.jpg"%>" alt="User" width="40" height="40">
    </div>

    <div class="client-info">
      <a class="link" href="/app/client-details/?id=<%= jobDetails.client_details.client_id %>">
        <div class="company-name">
          <% if (jobDetails.is_user_verified ) { %>
          <span class="material-symbols-outlined">
            verified
          </span>
          <% } %>
          <%= jobDetails.client_details.company_name %>
        </div>
      </a>

      <div class="detail">
        <div class="name">
          <%= jobDetails.client_name %>
        </div>
        <span>•</span>
        <a class="email" href="mailto:<%= jobDetails.client_email %>">
          <%= jobDetails.client_email %>
        </a>
      </div>
    </div>

  </div>
  <div class="meta">
    <div class="budget"><%= jobDetails.budget %></div>
    <div class="status <%= jobDetails.status %>"><%= jobDetails.status %></div>
  </div>
  <div class="title"><%= jobDetails.title %></div>
  <div class="skillset">
    <% if (jobDetails.required_skillset != null) { %>
    <% for( const skillset of jobDetails.required_skillset) { %>
    <div class="skill">
      <%= skillset %>
    </div>
    <% } %>
    <% } %>
  </div>
  <div class="desc"><%= jobDetails.description %></div>
  <div class="mt2 icon-btn justify-right">
    <button data-job-id="<%= jobDetails.id %>" id="send-proposal-btn" class="btn icon-btn" <%= jobDetails.proposal_sent ? 'disabled' : '' %>>
      Send Proposal
      <span class="material-symbols-outlined">
        send
      </span>
    </button>
  </div>
</div>


<script>
  const proposalBtn = document.querySelector("#send-proposal-btn");
  const proposalModal = document.querySelector("#proposal-modal");
  const proposalForm = document.querySelector("#proposal-form");

  proposalBtn.addEventListener("click", (e) => {
    proposalModal.classList.add("open")

  });

  proposalForm.addEventListener("submit", async (e) => {
    e.preventDefault();
    const jobId = parseInt(proposalBtn.getAttribute(
      "data-job-id"
    ));
    const {
      bid_amount,
      cover_letter,
      time_frame
    } = proposalForm;
    try {
      proposalModal.classList.remove("open");
      showLoader();

      const res = await fetch(`/api/proposals/create/${jobId}`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          bid_amount: bid_amount.value,
          cover_letter: cover_letter.value,
          timeframe: time_frame.value
        })
      });
      if (res.status === 200) {
        hideLoader();
        showSnackBar("Proposal sent successfully", "success");
        proposalBtn.setAttribute("disabled", "");
      } else {
        const d = await res.json();
        hideLoader();
        showSnackBar(d.message, "error");
      }
    } catch (e) {
      hideLoader();
      showSnackBar("Something went wrong", "error")
    }
  })
</script>
<% } %>