{% extends "admin/dashboard.html" %}
{% load static %}

{% block title %}
    <title>Admin | Profile Details</title>
{% endblock title %}

{% block content %}
     <!-- START Wrapper -->
     <div class="wrapper">
          <div class="page-content">
               <!-- Start Container xxl -->
               <div class="container-xxl">
                    <div class="row">
                         <div class="col-xl-8 col-lg-8">
                              <div class="card overflow-hidden">
                                   <div class="card-body">
                                        <div class="bg-primary profile-bg rounded-top position-relative mx-n3 mt-n3">
                                             <!-- Edit icon -->
                                             <i class="bi bi-pencil-square position-absolute top-100 end-0 translate-middle me-5 text-black fs-4 cursor-pointer" id="edit-profile-image-icon" style="cursor: pointer;"></i>
                                             
                                             <!-- Profile Image or Default Image -->
                                             {% if admin_profile.profile_image %}
                                             <img src="{{ admin_profile.profile_image.url }}" alt="User Image" class="avatar-xl border border-light border-3 rounded-circle position-absolute top-100 start-0 translate-middle ms-5">
                                             {% else %}
                                                 <img src="{% static 'assets/images/users/default_avatar.png' %}" alt="Default Image" class="avatar-xl border border-light border-3 rounded-circle position-absolute top-100 start-0 translate-middle ms-5">
                                             {% endif %}
                                         </div>

                                        <!-- File input for profile image -->
                                        <form id="profile-image-form" method="POST" enctype="multipart/form-data" action="" style="display: none;">
                                             {% csrf_token %}
                                             <div class="mt-5">
                                                  <label for="profile-image" class="form-label">Change Profile Image</label>
                                                  <input class="form-control form-control-sm" type="file" id="profile-image" name="profile_image" accept="image/*" onchange="previewFile()">
                                             </div>
                                             <!-- Image preview -->
                                             <div class="mt-3">
                                                  <img id="profile-image-preview" src="#" alt="Image Preview" class="img-thumbnail" style="display:none; max-width: 150px;">
                                             </div>
                                             <!-- Submit button -->
                                             <div class="mt-3">
                                                  <button type="submit" class="btn btn-primary btn-sm">Submit</button>
                                             </div>
                                        </form>

                                        <div class="mt-5 d-flex flex-wrap align-items-center justify-content-between">
                                             <div>
                                                  <h4 class="mb-1">{{ admin_profile.user.username|capfirst }}<i class='bx bxs-badge-check text-warning align-middle'></i></h4>
                                                  <p class="mb-0">{{ admin_profile.user.username }}</p>
                                             </div>
                                        </div>
                                   </div>
                              </div>
                         </div>
                         <div class="col-xl-4 col-lg-4">
                              <div class="card">
                                   <div class="card-header">
                                        <h4 class="card-title">Personal Information</h4>
                                   </div>
                                   <div class="card-body">
                                        <div class="">
                                             <div class="d-flex align-items-center gap-2 mb-2">
                                                  <div class="avatar-sm bg-light d-flex align-items-center justify-content-center rounded">
                                                       <iconify-icon icon="solar:users-group-rounded-bold-duotone" class="fs-20 text-secondary"></iconify-icon>
                                                  </div>
                                                  <p class="mb-0 fs-13">Username - <span class="text-dark fw-semibold">{{ admin_profile.user.username|capfirst }}<i class='bx bxs-badge-check text-success align-middle'></i></span></p>
                                             </div>
                                             <div class="d-flex align-items-center gap-2 mb-2">
                                                  <div class="avatar-sm bg-light d-flex align-items-center justify-content-center rounded">
                                                       <iconify-icon icon="solar:letter-bold-duotone" class="fs-20 text-secondary"></iconify-icon>
                                                  </div>
                                                  <p class="mb-0 fs-13">Email - <a href="mailto:{{ admin_profile.user.email }}" class="text-primary fw-semibold">{{ admin_profile.user.email }}</a></p>
                                             </div>

                                             <div class="d-flex align-items-center gap-2">
                                                  <div class="avatar-sm bg-light d-flex align-items-center justify-content-center rounded">
                                                       <iconify-icon icon="solar:check-circle-bold-duotone" class="fs-20 text-secondary"></iconify-icon>
                                                  </div>
                                                  <p class="mb-0 fs-13">Status -
                                                    {% if admin_profile.user.is_active %}
                                                        <span class="badge bg-success-subtle text-success ms-1">Active</span>
                                                    {% else %}
                                                        <span class="badge bg-danger-subtle text-danger ms-1">Inactive</span>
                                                    {% endif %}
                                                </p>
                                             </div>
                                        </div>
                                   </div>

                                   <div class="card-header">
                                        <h4 class="card-title">Change Password</h4>
                                   </div>
                                   <div class="card-body">
                                        <div class="">
                                             <form method="POST" action="{% url 'admin_change_password'  admin_profile.user.id %}">
                                                  {% csrf_token %}
                                                  <!-- Current Password -->
                                                  <div class="mb-2">
                                                       <div class="input-group input-group-sm">
                                                            <input type="password" name="current_password" id="current-password" class="form-control form-control-sm" placeholder="Enter Current Password" required>
                                                            <button type="button" class="btn btn-outline-secondary btn-sm" id="toggle-current-password" onclick="togglePasswordVisibility('current-password')">
                                                                 <i class="bi bi-eye" id="current-password-eye"></i>
                                                            </button>
                                                       </div>
                                                  </div>
                                                  <!-- New Password -->
                                                  <div class="mb-2">
                                                       <div class="input-group input-group-sm">
                                                            <input type="password" name="new_password" id="new-password" class="form-control form-control-sm" placeholder="Enter New Password" required>
                                                            <button type="button" class="btn btn-outline-secondary btn-sm" id="toggle-new-password" onclick="togglePasswordVisibility('new-password')">
                                                                 <i class="bi bi-eye" id="new-password-eye"></i>
                                                            </button>
                                                       </div>
                                                  </div>
                                                  <!-- Confirm New Password -->
                                                  <div class="mb-2">
                                                       <div class="input-group input-group-sm">
                                                            <input type="password" name="confirm_new_password" id="confirm-new-password" class="form-control form-control-sm" placeholder="Confirm New Password" required>
                                                            <button type="button" class="btn btn-outline-secondary btn-sm" id="toggle-confirm-new-password" onclick="togglePasswordVisibility('confirm-new-password')">
                                                                 <i class="bi bi-eye" id="confirm-new-password-eye"></i>
                                                            </button>
                                                       </div>
                                                  </div>
                                                  <!-- Submit Button -->
                                                  <div class="mb-2">
                                                       <button type="submit" class="btn btn-primary btn-sm">Update Password</button>
                                                  </div>
                                             </form>
                                        </div>
                                   </div>
                              </div>
                         </div>
                    </div>
               </div>
          </div>

          <!-- Footer -->
          <footer class="footer">
               <div class="container-fluid">
                    <div class="row">
                         <div class="col-12 text-center">
                              <script>document.write(new Date().getFullYear())</script> &copy; Aquarium E-Commerce. Developed by 
                              <iconify-icon icon="iconamoon:heart-duotone" class="fs-18 align-middle text-danger"></iconify-icon> 
                              <a href="https://geegatechnologies.com/" class="fw-bold footer-text" target="_blank">GeegaTechnologies</a>
                         </div>
                    </div>
               </div>
          </footer>
     </div>
     
     <!-- Add Bootstrap Icons for the eye icon -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
     <!-- JavaScript for toggling password visibility and profile image upload -->
     <script>
          document.getElementById('edit-profile-image-icon').addEventListener('click', function() {
               document.getElementById('profile-image-form').style.display = 'block';
          });

          function previewFile() {
               const file = document.getElementById('profile-image').files[0];
               const preview = document.getElementById('profile-image-preview');
               const reader = new FileReader();

               reader.onloadend = function() {
                    preview.src = reader.result;
                    preview.style.display = 'block';
               }

               if (file) {
                    reader.readAsDataURL(file);
               } else {
                    preview.src = '';
                    preview.style.display = 'none';
               }
          }

          function togglePasswordVisibility(id) {
               const passwordField = document.getElementById(id);
               const eyeIcon = document.getElementById(`${id}-eye`);

               if (passwordField.type === 'password') {
                    passwordField.type = 'text';
                    eyeIcon.classList.remove('bi-eye');
                    eyeIcon.classList.add('bi-eye-slash');
               } else {
                    passwordField.type = 'password';
                    eyeIcon.classList.remove('bi-eye-slash');
                    eyeIcon.classList.add('bi-eye');
               }
          }
     </script>
{% endblock content %}