<%- include('../layouts/header'); -%>

<style>
  @media screen and (max-width: 600px) {
    .contact-form {
      width: 100% !important;
    }
    .forget-password {
      text-align: left !important;
    }
  }
  @media screen and (min-width: 600px) {
    .input-file-btn {
      justify-content: center !important;
    }
  }

  .profile-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 20px;
    border: 2px solid #ccc;
  }
  .profile-image img {
    object-fit: cover;
  }
  .upload-btn {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    text-align: center;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
</style>
<div
  class="hero-wrap"
  style="background-image: url('<%- baseUrl %>/images/bg_2.jpg')"
  data-stellar-background-ratio="0.5"
>
  <div class="overlay"></div>
  <div class="overlay-2"></div>
  <div class="container">
    <div
      class="row no-gutters slider-text justify-content-center align-items-center"
      style="width: 100% !important"
    >
      <div class="row block-9 justify-content-center mb-5" style="width: 100%">
        <div
          class="col-md-12 align-items-stretch d-flex"
          style="display: flex !important; justify-content: center"
        >
          <form
            action="/profile/updateProfile"
            method="post"
            class="bg-light p-5 contact-form"
            enctype="multipart/form-data"
            style="width: 80%"
          >
            <h2 style="display: flex; justify-content: center">Profile</h2>
            <% if(successMessage){ %>
            <div class="alert alert-success">
              <strong>Success!</strong> <%- successMessage %>
            </div>
            <% } %> <% if(errorMessage){ %>
            <div class="alert alert-danger">
              <strong>Error!</strong> <%- errorMessage %>
            </div>
            <% } %>
            <div class="row">
              <div class="col-md-6 col-sm-12">
                <div class="profile-image">
                  <img
                    id="preview-image"
                    src="<% if(user?.image){ %><%- user?.image %><% }else{ %><%- baseUrl %>/images/profile-image.png<% } %>"
                    alt="Profile Image"
                    style="width: 150px !important"
                  />
                </div>
              </div>
              <div
                class="col-md-6 col-sm-12 mb-2 input-file-btn"
                style="display: flex; align-items: center"
              >
                <div class="form-group">
                  <input
                    type="file"
                    id="image-upload"
                    name="image"
                    accept="image/*"
                    onchange="previewImage(event)"
                  />
                </div>
              </div>
              <div class="col-md-6 col-sm-12">
                <div class="form-group">
                  <input
                    type="text"
                    class="form-control"
                    name="firstName"
                    placeholder="Your First Name"
                    value="<%- user?.firstName %>"
                    required
                  />
                </div>
              </div>
              <div class="col-md-6 col-sm-12">
                <div class="form-group">
                  <input
                    type="text"
                    class="form-control"
                    name="lastName"
                    placeholder="Your Last Name"
                    value="<%- user?.lastName %>"
                    required
                  />
                </div>
              </div>
              <div class="col-md-6 col-sm-12">
                <div class="form-group">
                  <input
                    type="text"
                    class="form-control"
                    name="userName"
                    placeholder="Your UserName"
                    value="<%- user?.userName %>"
                    required
                    disabled
                  />
                </div>
              </div>
              <div class="col-md-6 col-sm-12">
                <div class="form-group">
                  <input
                    type="text"
                    class="form-control"
                    name="email"
                    placeholder="Your Email"
                    value="<%- user?.email %>"
                    required
                    disabled
                  />
                </div>
              </div>
              <div class="col-md-6 col-sm-12">
                <div class="form-group">
                  <input
                    type="text"
                    class="form-control"
                    name="mobileNo"
                    placeholder="Your Mobile No"
                    value="<%- user?.mobileNo %>"
                    required
                    disabled
                  />
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-md-6 col-sm-12">
                <div class="form-group">
                  <input
                    type="submit"
                    value="Update"
                    class="btn btn-primary py-3 px-5"
                  />
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<%- include('../layouts/footer'); -%>

<script>
  function previewImage(event) {
    const reader = new FileReader();
    reader.onload = function () {
      const preview = document.getElementById("preview-image");
      preview.src = reader.result;
    };
    reader.readAsDataURL(event.target.files[0]);
  }
  setTimeout(() => {
    $(".alert").hide();
  }, 2000);
</script>
