<%- include('includes/header', {username: admin[0].name,email: admin[0].email } ) %>

  <div class="body-wrapper">
    <div class="container-fluid">
      <div class="card bg-info-subtle shadow-none position-relative overflow-hidden mb-4">
        <div class="card-body px-4 py-3">
          <div class="row align-items-center">
            <div class="col-9">
              <h4 class="fw-semibold mb-8">Profile</h4>
            </div>
          </div>
        </div>
      </div>
      <div class="row g-4">

        <!-- ================= LEFT PROFILE CARD ================= -->
        <div class="col-lg-4 col-md-12 order-1">
          <div class="col-md-6 col-lg-12 d-flex align-items-stretch">
            <div class="card w-100">
              <div class="p-4 d-flex align-items-stretch h-100">
                <div class="row w-100 align-items-center">

                  <!-- Profile Image Column -->
                  <div class="col-4 col-md-3 d-flex align-items-center">
                    <div class="position-relative d-inline-block w-100">
                      <div class="rounded-circle overflow-hidden" style="width:60px; height:60px;">
                        <img src="<%= admin[0].profile ? admin[0].profile : '/images/profile/user.svg' %>"
                          class="w-100 h-100 object-fit-cover profilePreview" alt="Profile">
                      </div>
                      <!-- Camera Icon -->
                      <div class="position-absolute bottom-0 end-0">
                        <button type="button" class="btn btn-primary btn-sm rounded-circle p-1" id="cameraBtn">
                          <i class="ti ti-camera fs-6"></i>
                        </button>
                        <input type="file" id="profileInput" hidden accept="image/*">
                      </div>
                    </div>
                  </div>

                  <!-- Name & Email Column -->
                  <div class="col-8 col-md-9 d-flex align-items-center">
                    <div>
                      <a href="javascript:void(0)" class="card-title link-primary fw-semibold text-dark mb-1"
                        style="font-size:16px;" id="adminProfileName">
                        <%= admin[0].name %>
                      </a>
                      <p class="card-subtitle text-muted mb-0" style="font-size:14px;">
                        <%= admin[0].email %>
                      </p>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </div>

        </div>

        <!-- ================= RIGHT UPDATE FORM ================= -->
        <div class="col-lg-8 col-md-12 order-2">
          <div class="col-lg-12">
            <div class="card shadow-none border">
              <div class="card-body">
                <div class="col-lg-12">
                  <h4 class="card-title">Update Profile</h4>
                  <p class="card-subtitle mb-3">Change your name or password</p>

           <form id="updateNameForm">

  <div class="card mb-4 p-3">
    <h5 class="card-title mb-3">Update Name</h5>

    <div class="form-floating mb-3">
      <input type="text"
             class="form-control"
             id="nameinput"
             name="name"
             value="<%= admin[0].name %>"
             placeholder="Name"
             required>
      <label><i class="ti ti-user me-2 fs-4"></i>Name<span class="text-danger">*</span></label>
    </div>

    <div class="text-start">
      <button type="submit" class="btn btn-primary">
        Update Name
      </button>
    </div>
  </div>

</form>
<form id="changePasswordForm">

  <div class="card mb-4 p-3">
    <h5 class="card-title mb-3">Change Password</h5>

    <div class="form-floating mb-3">
      <input type="password"
             class="form-control"
             name="currentPassword"
             placeholder="Current Password"
             required>
      <label><i class="ti ti-lock me-2 fs-4"></i>Current Password <span class="text-danger">*</span></label>
    </div>

    <div class="form-floating mb-3">
      <input type="password"
             class="form-control"
             name="newPassword"
             placeholder="New Password"
             required>
      <label><i class="ti ti-lock me-2 fs-4"></i>New Password <span class="text-danger">*</span></label>
    </div>

    <div class="form-floating mb-3">
      <input type="password"
             class="form-control"
             name="confirmPassword"
             placeholder="Confirm Password"
             required>
      <label><i class="ti ti-lock me-2 fs-4"></i>Confirm Password <span class="text-danger">*</span></label>
    </div>

    <div class="text-start">
      <button type="submit" class="btn btn-primary">
        Change Password
      </button>
    </div>
  </div>

</form>


                </div>
              </div>
            </div>
          </div>
        </div>

      </div>


    </div>
  </div>
  <%- include('includes/allscripts') %>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="/js/view/profile.js"></script>