<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>
    <%= username %> | Wandrlust
  </title>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>
</head>

<body>
  <%- include('partials/navbar.ejs', { name: name, isLoggedIn: isLoggedIn, email: email}); %>
    <section class="h-100 gradient-custom-2">3      <div class="container py-5 h-100">
        <div class="row d-flex justify-content-center align-items-center h-100">
          <div class="col col-lg-9 col-xl-7 w-100"  style="padding-top: 2rem;">
            <div class="card">
              <div class="rounded-top text-white d-flex flex-row" style="background-color: #000; height:210px;">
                <div class="ms-4 mt-5 d-flex flex-column" style="width: 150px;">
                  <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-profiles/avatar-1.webp"
                    alt="Generic placeholder image" class="img-fluid img-thumbnail mt-4 mb-2"
                    style="width: 150px; z-index: 1;">
                    <br>
                  <button type="button" class="btn btn-dark " data-mdb-toggle="modal" data-mdb-target="#exampleModal"
                    data-mdb-whatever="<%= username%>" style="z-index: 1;">
                    Edit profile
                  </button>
                  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                    aria-hidden="true">
                    <div class="modal-dialog">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h5 class="modal-title" id="exampleModalLabel" style="color: #000;">Edit Your Profile</h5>
                          <button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                          <form id="editProfileform" method="post" action="/editprofile">
                            <div class="mb-3">
                              <label for="recipient-name" class="col-form-label">Change username</label>
                              <input onchange={validateHandleUsername()} type="text" class="form-control"
                                id="recipient-name" name="username" />
                            </div>
                            <div class="mb-3">
                              <label for="recipient-email" class="col-form-label">Change email-Id</label>
                              <input onchange="validateHandleEmail()" type="text" class="form-control"
                                id="recipient-email" name="email" value="<%= email%>" />
                            </div>
                            <div class="mb-3">
                              <label for="recipient-phone" class="col-form-label">Change contact number</label>
                              <input onchange="handlePhoneNumberValidation()" type="text" class="form-control"
                                id="recipient-phone" name="phonenumber" value="<%= phonenumber%>" />
                            </div>
                            <div class="mb-3" hidden>
                              <label for="recipient-id" class="col-form-label">Object Id</label>
                              <input value="<%= id %>" type="text" class="form-control" id="recipient-id" name="id" />
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-outline-dark"
                                data-mdb-dismiss="modal">Cancel</button>
                              <input type="submit" class="btn" style="color: #f94566;"></input>
                            </div>
                          </form>
                        </div>
                      </div>
                    </div>
                  </div>

                </div>
                <div class="ms-3"
                  style="margin-top: 130px;display: flex;justify-content: space-between;width: 100%; margin-bottom: 2rem; ">
                  <div>
                    <h3>
                      <%= name %>
                    </h3>
                    <p>
                      <%= username %>
                    </p>
                  </div>
                  <div style="display: flex;justify-content: space-evenly;width: 30%;">
                    <div
                      style="color: white;display: flex;flex-direction: column;justify-content: center;align-items: center;">
                      <h3>
                        <%= followers.length %>
                      </h3>
                      <div>
                        Followers
                      </div>
                    </div>
                    <div
                      style="color: white;display: flex;flex-direction: column;justify-content: center;align-items: center;">
                      <h3>
                        <%= following.length %>
                      </h3>
                      <div>
                        Following
                      </div>
                    </div>
                    <div
                      style="color: white;display: flex;flex-direction: column;justify-content: center;align-items: center;">
                      <h3>
                        <%= images.length %>
                      </h3>
                      <div>
                        Posts
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="p-4 text-black" style="background-color: #f8f9fa;">
                <div class="d-flex justify-content-end text-center py-1">
                  <div>
                    <p class="mb-2 h3">
                      <%= email%>
                    </p>
                    <p class="small text-muted mb-0">Email Id</p>
                  </div>
                </div>
              </div>
              <div class="card-body p-4 text-black">
                <div class="mb-5">
                  <p class="lead h3 fw-normal mb-1">Bio</p>
                  <div class="p-4" style="background-color: #f8f9fa;">
                    <p class="font-italic mb-1">Web Developer</p>
                    <p class="font-italic mb-1">Lives in India</p>
                    <p class="font-italic mb-0">Photographer</p>
                  </div>
                </div>
                <div class="d-flex justify-content-between align-items-center mb-4">
                  <p class="lead fw-normal mb-0">Recent photos</p>
                </div>
                <div class="row g-2">
                  <%if(images) { images.forEach(function (image){ %>
                    <div class="row g-2">
                      <div class="col flex">
                        <img class="w-100 rounded-3" src="data:image/<%=image.image.contentType%>;base64,
                              <%=image.image.data.toString('base64')%>">
                      </div>
                      <div class="d-flex justify-content-between mb-3">
                        <div>
                          <i class="fas fa-heart text-danger"></i>
                          <span>
                            <%= image.likes.length %>
                          </span>
                        </div>
                        <a href="" style="text-decoration: none;" onclick="deletePost('<%=image._id%>')">
                          <i class="fas fa-trash text-danger"></i>
                          <span>
                            Delete
                          </span>
                        </a>
                      </div>
                    </div>
                    <% }) }%>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <%- include('partials/footer') %>
      <script>

        let regexEmail = /^[A-Za-z0-9._]+@[A-Za-z]+[.][A-Za-z]+$/
        let regexUsername = /^[A-Za-z][A-Za-z0-9_]{7,29}$/
        let regexPhonenumber = /^[6-9]\d{9}$/


        const deletePost = async (imageId) => {
          await fetch("/deletePost", {
            method: "delete",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              imageId
            })
          })
        }

        const exampleModal = document.getElementById('exampleModal');
        exampleModal.addEventListener('show.mdb.modal', (e) => {
          // Button that triggered the modal
          const button = e.relatedTarget;
          // Extract info from data-mdb-* attributes
          const recipient = button.getAttribute('data-mdb-whatever');
          // If necessary, you could initiate an AJAX request here
          // and then do the updating in a callback.
          //
          // Update the modal's content.
          const modalTitle = exampleModal.querySelector('.modal-title');
          const modalBodyInput = exampleModal.querySelector('.modal-body input');

          modalTitle.textContent = `Edit Your Profile`;
          modalBodyInput.value = recipient;
        })

        const validateHandleUsername = () => {
          let username = document.getElementById("recipient-name")
          if (!username.value.match(regexUsername)) {
            alert("Please enter valid Username")
            username.value = "";
          }
        }

        const validateHandleEmail = () => {
          let email = document.getElementById("recipient-email")
          if (!email.value.match(regexEmail)) {
            alert("Please enter valid Email")
            email.value = "";
          }
        }

        const handlePhoneNumberValidation = () => {
          let phonenumber = document.getElementById("recipient-phone")
          if (!phonenumber.value.match(regexPhonenumber)) {
            alert("Please enter valid Phone Number")
            phonenumber.value = "";
          }
        }

      </script>
</body>

</html>