{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
<title>Kila Kolis | Edit User Details</title>

<div class="main-content pt-0">
  <div class="content-wrapper">
    <div class="row justify-content-center">
      <div class="col-10">
        <h2 class="f-20 bold pb-2">Edit User Details</h2>
      </div>
    </div>

    <form action='/edit-user-details/{{doc_obj.id}}' method="post" class="form-reset" enctype="multipart/form-data">
      {% csrf_token %}
      <div class="row new-user-table bookings edit-doctor justify-content-center mt-4">
        <div class="col-12 col-md-10">
          <div class="card dashboard-card p-4">
            <div class="top-card px-0">
              <p class="f-18 bold pb-2">Users Details</p>
            </div>

            <div class="updateDetail row">
              <!-- Profile Image -->
              <div class="col-12 mb-3 text-center">
                <img src="{% if doc_obj.image %}{{ doc_obj.image }}{% else %}/static/admin/images/user-default.png{% endif %}" id="profile-image" style="height: 100px;">
                <br>
                <input type="file" name="image" id="myFileInput" onchange="loadfile(event)" accept="image/*" hidden>
                <input type="button" class="btn" value="Update Profile Picture" onclick="document.getElementById('myFileInput').click()">
              </div>

              <!-- Name -->
              <div class="col-6 mb-3">
                <label class="form-label">Name</label>
                <input type="text" class="form-control" name="name" value="{{ doc_obj.full_name }}">
              </div>

              <!-- Email (readonly) -->
              <div class="col-6 mb-3">
                <label class="form-label">Email</label>
                <input type="email" class="form-control" name="email" value="{{ doc_obj.email }}" readonly>
              </div>

              <!-- Country -->
              <div class="col-6 mb-3">
                <label class="form-label">Country</label>
                <input type="text" class="form-control" name="country" value="{{ doc_obj.country }}">
              </div>

              <!-- DOB -->
              <div class="col-6 mb-3">
                <label class="form-label">DOB</label>
                <input type="date" class="form-control mb-0" name="dob" id="dob" value="{{ doc_obj.dob }}">
              </div>

              <!-- Gender -->
              <div class="col-6 mb-3">
                <label class="form-label">Gender</label>
                <select class="form-control" name="gender">
                  <option value="Male" {% if doc_obj.gender == 'Male' %}selected{% endif %}>Male</option>
                  <option value="Female" {% if doc_obj.gender == 'Female' %}selected{% endif %}>Female</option>
                  <option value="Other" {% if doc_obj.gender == 'Other' %}selected{% endif %}>Other</option>
                </select>
              </div>

              <!-- Phone (readonly) -->
              <div class="col-6 mb-3">
                <label class="form-label">Mobile Number</label>
                <input type="text" class="form-control" value="{{ country_code }} {{ phone_number }}" readonly>
                <input type="hidden" name="phone_number" value="{{ phone_number }}">
              </div>

              <!-- Status -->
              <div class="col-6 mb-3">
                <label class="form-label">Status</label>
                <select class="form-control" name="status">
                  <option value="True" {% if doc_obj.status == True %}selected{% endif %}>Active</option>
                  <option value="False" {% if doc_obj.status == False %}selected{% endif %}>Inactive</option>
                </select>
              </div>

              <!-- Address (Google Places Autocomplete) -->
              <div class="col-12 mb-3">
                <label class="form-label">Address</label>
                <input type="text" id="autocomplete" name="address" class="form-control" value="{{ doc_obj.address }}">
              </div>

              <div class="col-12 my-4 text-center">
                <button type="submit" class="dark-btn">Update</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>

  </div>
</div>

{% endblock %}

{% block js %}
<script>
  function loadfile(event) {
    const image = document.getElementById('profile-image');
    image.src = URL.createObjectURL(event.target.files[0]);
  }

  document.addEventListener('DOMContentLoaded', function () {
    const today = new Date().toISOString().split('T')[0];
    const dobField = document.querySelector('input[name="dob"]');
    if (dobField) dobField.setAttribute('max', today);

    // Google Places Autocomplete
    const input = document.getElementById('autocomplete');
    if (input) {
      const autocomplete = new google.maps.places.Autocomplete(input, {
        types: ['geocode']
      });

      autocomplete.addListener('place_changed', () => {
        const place = autocomplete.getPlace();
        if (place && place.formatted_address) {
          input.value = place.formatted_address;
        }
      });
    }
  });
</script>

<!-- Load Google Places API -->
<script
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBSDlOoE5JCc4FzUYEr7xer-EMqFvbEvyQ&libraries=places"
  async defer></script>
{% endblock %}