{% extends 'dashboard/admin_dashboard/main.html' %}
{% load static %}
{% block content %}
<h4 class="fw-bold py-3 mb-4">Edit Users</h4>
<div style="padding: 10px;">
  {% if messages %}
    {% for message in messages %}
      <div class="alert {% if 'success' in message.tags %}alert-success alert-dismissible{% elif 'danger' in message.tags %}alert-danger alert-dismissible{% endif %}" role="alert" id="success-alert">
        {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    {% endfor %}
  {% endif %}
</div>

<div class="row">
  <div class="col-md-12">
    <div class="card mb-4">
      <form method="POST" enctype="multipart/form-data" action="" autocomplete="off">
        {% csrf_token %}
        <div class="card-body">
          <!-- Name Fields -->
          <div class="row py-2">
            <div class="col-md-6">
              <label class="form-label">First Name<span style="color:red">*</span></label>
              <input type="text" class="form-control" name="first_name" required value="{{all_user.first_name}}">
            </div>
            <div class="col-md-6">
              <label class="form-label">Last Name<span style="color:red">*</span></label>
              <input type="text" class="form-control" name="last_name" required value="{{all_user.last_name}}">
            </div>
          </div>

          <!-- Email, Employee Code, Password -->
          <div class="row py-2">
            <div class="col-md-4">
              <label class="form-label">Email<span id="email-required" style="color:red">*</span></label>
              <input type="email" class="form-control" name="email" id="email" value="{{all_user.email|default:"" }}">
            </div>
            <div class="col-md-4">
              <label class="form-label">Employee Code<span style="color:red">*</span></label>
              <input type="text" class="form-control" name="employee_code" required value="{{all_user.employee_code}}">
            </div>
            <div class="col-md-4">
              <label class="form-label">Password<span style="color:red">*</span></label>
              <input type="password" class="form-control" name="Password">
            </div>
          </div>

          <!-- Company & Department -->
          <div class="row py-2">
            <div class="col-md-6">
              <label class="form-label">Company<span style="color:red">*</span></label>
              <select name="company_id" class="form-control" required>
                <option value="">-- Select Company --</option>
                {% for companyes in companyes %}
                <option value="{{ companyes.id }}" {% if all_user.company_id == companyes.id %} selected {% endif %}>{{ companyes.company_name }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label">Department<span style="color:red">*</span></label>
              <select name="department_id" class="form-control" required>
                <option value="">-- Select Department --</option>
                {% for departments in departmentes %}
                <option value="{{ departments.id }}" {% if all_user.department_id == departments.id %} selected {% endif %}>{{ departments.department_name }}</option>
                {% endfor %}
              </select>
            </div>
          </div>

          <!-- Mobile & Location -->
          <div class="row py-2">
            <div class="col-md-6">
              <label class="form-label">Mobile<span style="color:red">*</span></label>
              <input type="text" class="form-control" name="mobile" minlength="10" maxlength="11" oninput="validateNumericInput(this)" required value="{{all_user.mobile}}">
            </div>
            <div class="col-md-6">
              <label class="form-label">Location<span style="color:red">*</span></label>
              <select name="location_id" class="form-control" required>
                <option value="">-- Select Location --</option>
                {% for locationes in locationes %}
                <option value="{{ locationes.id }}" {% if all_user.location_id == locationes.id %} selected {% endif %}>{{ locationes.location_name }}</option>
                {% endfor %}
              </select>
            </div>
          </div>

          <!-- Roles -->
          <div class="col-md-12 py-2">
            <label class="form-label">Roles<span style="color:red">*</span></label>
            <select name="roles_id[]" id="rolest_id" class="form-control" multiple="multiple" required>
                {% for role_key, role_name in roles.items %}
                    <option value="{{ role_key }}" {% if role_key in user_role_keys %} selected {% endif %}>{{ role_name }}</option>
                {% endfor %}
            </select>
          </div>

          <!-- Designation -->
          <div class="col-md-12 py-2">
            <label class="form-label">Designation<span style="color:red">*</span></label>
            <select name="designation_id" class="form-control" required>
              <option value="">-- Select Designation --</option>
              {% for designation in designationes %}
                <option value="{{designation.id}}" {% if all_user.designation_id == designation.id %} selected {% endif %}>{{designation.name}}</option>
                {% endfor %}
            </select>
          </div>

          <!-- Approval Require -->
          <div class="col-md-12 py-2" id="approval_require_div" style="display:none;">
            <label class="form-label">Approval require or not?<span style="color:red">*</span></label>
            <select name="approval_require" id="approval_require" class="form-control">
              <option value="">-- Select Approval Require --</option>
              <option value="1" {% if all_user.approval_require %} selected {% endif %}>Yes</option>
              <option value="0" {% if not all_user.approval_require %} selected {% endif %}>No</option>
            </select>
          </div>

          <!-- Gender -->
          <div class="col-md-12 py-2">
            <label class="form-label">Gender<span style="color:red">*</span></label>
            <select name="gender" class="form-control" required>
              <option value="">-- Select Gender --</option>
              <option {% if all_user.gender == 'Male' %} selected {% endif %}>Male</option>
              <option {% if all_user.gender == 'Female' %} selected {% endif %}>Female</option>
            </select>
          </div>

          <!-- Address -->
          <div class="col-md-12 py-2">
            <label class="form-label">Address<span style="color:red">*</span></label>
            <textarea class="form-control" name="address" rows="3" required>{{all_user.address}}</textarea>
          </div>

          <!-- Image -->
          <div class="col-md-12 py-2">
              {% if all_user.image %}
                            <img src="{{user_data.users_images}}{{ all_user.image.url }}" alt="User Image" style="width: 100px; height: 97px;">
                        {% endif %}
            <label class="form-label">User Image</label>
            <input type="file" name="image" class="form-control" accept=".png,.jpg,.jpeg">
          </div>

          <!-- Status -->
          <div class="col-md-12 py-2">
            <label class="form-label">Status<span style="color:red">*</span></label>
            <select name="status" class="form-control" required>
              <option value="1" {% if all_user.is_active == 1 %} selected {% endif %}>Active</option>
              <option value="0" {% if all_user.is_active == 0 %} selected {% endif %}>Inactive</option>
            </select>
          </div>

          <!-- Submit -->
          <div class="mt-3 d-flex justify-content-end">
            <button type="submit" class="btn btn-primary" id="btn_submit">Update</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- JS -->
<script src="{% static 'plugins/jQuery/jQuery-2.1.3.min.js' %}"></script>
<script src="{% static 'select2/js/select2.min.js' %}"></script>

<script>
  $(document).ready(function () {
    $('#rolest_id').select2({
      placeholder: "Select Roles",
      width: '100%'
    });

    function toggleEmailRequirement() {
      let selectedRoles = $('#rolest_id').val() || [];
      if (selectedRoles.includes('employee')) {
        $('#email').removeAttr('required');
        $('#email-required').hide();
        $('#approval_require_div').show();
        $('#approval_require').attr('required', 'required');
      } else {
        $('#email').attr('required', 'required');
        $('#email-required').show();
        $('#approval_require_div').hide();
        $('#approval_require').removeAttr('required').val('');
      }
    }

    toggleEmailRequirement();

    $('#rolest_id').on('change', function () {
      toggleEmailRequirement();
    });
  });

  function validateNumericInput(input) {
    input.value = input.value.replace(/[^0-9]/g, '');
  }
</script>
{% endblock %}