{% extends "layouts/app.twig" %}

{% block title %}{{ __('Update User') }}{% endblock %}

{% block content %}
      <div class="page-wrapper">
        <!-- Page header -->
        <div class="page-header d-print-none">
          <div class="container-xl">
            <div class="row g-2 align-items-center">
              <div class="col">
                <!-- Page pre-title -->
                <div class="page-pretitle">
                  {{ __('Overview') }}
                </div>
                <h2 class="page-title">
                  {{ __('Update User') }}
                </h2>
              </div>
            </div>
          </div>
        </div>
        <!-- Page body -->
        <div class="page-body">
          <div class="container-xl">
            <div class="col-12">
            {% include 'partials/flash.twig' %}
              <form method="post" action="/user/update" id="update-user-form">
              {{ csrf.field | raw }}
                <div class="card">
                  <div class="card-body">
                    <div class="row">
                      <!-- Email -->
                      <div class="col-md-6">
                        <div class="mb-3">
                          <label class="form-label required">{{ __('Email') }}</label>
                          <input type="email" class="form-control" name="email" value="{{ user.email }}" placeholder="{{ __('Enter email') }}" required>
                        </div>
                      </div>
                          
                      <!-- Username -->
                      <div class="col-md-6">
                        <div class="mb-3">
                          <label class="form-label required">{{ __('Username') }}</label>
                          <input type="text" class="form-control" name="username" value="{{ user.username }}" placeholder="{{ __('Enter username') }}" required>
                        </div>
                      </div>
                    </div>

                    <div class="row">
                      <!-- Password -->
                      <div class="col-md-6">
                        <div class="mb-3">
                          <label class="form-label">{{ __('Password') }}</label>
                          <input type="password" class="form-control" name="password" placeholder="{{ __('Password') }}">
                        </div>
                      </div>
                          
                      <!-- Confirm Password -->
                      <div class="col-md-6">
                        <div class="mb-3">
                          <label class="form-label">{{ __('Confirm Password') }}</label>
                          <input type="password" class="form-control" name="password_confirmation" placeholder="{{ __('Confirm Password') }}">
                        </div>
                      </div>
                    </div>

                    <div class="row">
                      <!-- Status -->
                      <div class="col-md-6">
                        <div class="mb-3">
                          <label class="form-label required">{{ __('Status') }}</label>
                          <select class="form-select" name="status" required>
                            <option value="0" {{ user.status == 0 ? 'selected' : '' }}>{{ __('Active') }}</option>
                            <option value="1" {{ user.status == 1 ? 'selected' : '' }}>{{ __('Archived') }}</option>
                            <option value="2" {{ user.status == 2 ? 'selected' : '' }}>{{ __('Banned') }}</option>
                            <option value="4" {{ user.status == 4 ? 'selected' : '' }}>{{ __('Pending Review') }}</option>
                            <option value="5" {{ user.status == 5 ? 'selected' : '' }}>{{ __('Suspended') }}</option>
                          </select>
                        </div>
                      </div>

                      <!-- Verified -->
                      <div class="col-md-6">
                        <div class="mb-3">
                          <label class="form-label required">{{ __('Verified') }}</label>
                          <select class="form-select" name="verified" required>
                            <option value="1" {{ user.verified == 1 ? 'selected' : '' }}>{{ __('Yes') }}</option>
                            <option value="0" {{ user.verified == 0 ? 'selected' : '' }}>{{ __('No') }}</option>
                          </select>
                        </div>
                      </div>
                    </div>

                    <!-- Role -->
                    <div class="row">
                      <div class="col-md-6">
                        <div class="mb-3">
                          <label class="form-label">{{ __('Type') }}</label>
                          <div class="form-control-plaintext">
                            {% if user.roles_mask == 0 %}
                                {{ __('Admin') }}
                            {% else %}
                                {# Display Assigned Roles #}
                                {% set assigned_roles = [] %}
                                {% if roles_new['4'] %} 
                                    {% set assigned_roles = assigned_roles | merge([__('Registrar')]) %}
                                {% endif %}
                                {% if roles_new['8'] %} 
                                    {% set assigned_roles = assigned_roles | merge([__('Accountant')]) %}
                                {% endif %}
                                {% if roles_new['16'] %} 
                                    {% set assigned_roles = assigned_roles | merge([__('Support')]) %}
                                {% endif %}
                                {% if roles_new['32'] %} 
                                    {% set assigned_roles = assigned_roles | merge([__('Auditor')]) %}
                                {% endif %}
                                {% if roles_new['64'] %} 
                                    {% set assigned_roles = assigned_roles | merge([__('Sales')]) %}
                                {% endif %}

                                {{ assigned_roles | join(', ') }}

                                {# Show association if the user is associated with another registrar #}
                                {% if user_asso is defined and user_asso is not null %}
                                    - {{ __('Associated with Registrar') }} {{ registrar_name }}
                                {% endif %}
                            {% endif %}
                          </div>
                        </div>
                      </div>

                      {% if user.roles_mask != 0 %}
                        {% if user.roles_mask == 4 %}
                        <div class="col-md-6">
                          <div class="mb-3">
                            <label class="form-label">{{ __('Roles') }}</label>
                            <span class="badge bg-blue-lt">{{ __('Registrar Administrator') }}</span>
                            <input type="hidden" name="roles_mask" value="4">
                          </div>
                        </div>
                        {% else %}
                        <div class="col-md-6">
                          <div class="mb-3">
                            <label class="form-label">{{ __('Manage Roles') }}</label>
                            <select class="form-select" id="select-roles" name="roles_mask[]" multiple>
                              <option value="8"  {{ roles_new['8']  ? 'selected' : '' }}>{{ __('Accountant') }}</option>
                              <option value="16" {{ roles_new['16'] ? 'selected' : '' }}>{{ __('Support') }}</option>
                              <option value="32" {{ roles_new['32'] ? 'selected' : '' }}>{{ __('Auditor') }}</option>
                              <option value="64" {{ roles_new['64'] ? 'selected' : '' }}>{{ __('Sales') }}</option>
                            </select>
                          </div>
                        </div>
                        {% endif %}
                      {% else %}
                      <input type="hidden" name="roles_mask" value="0">
                      {% endif %}
                    </div>

                  </div>
                      
                  <div class="card-footer text-end">
                    <div class="d-flex">
                      <button type="submit" class="btn btn-primary">{{ __('Update User') }}</button>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
        {% include 'partials/footer.twig' %}
      </div>
<script>
    document.addEventListener("DOMContentLoaded", function () {
    var el;
    window.TomSelect && (new TomSelect(el = document.getElementById('select-roles'), {
        copyClassesToDropdown: false,
        dropdownParent: 'body',
        controlInput: '<input>',
        render:{
            item: function(data,escape) {
                if( data.customProperties ){
                    return '<div><span class="dropdown-item-indicator">' + data.customProperties + '</span>' + escape(data.text) + '</div>';
                }
                return '<div>' + escape(data.text) + '</div>';
            },
            option: function(data,escape){
                if( data.customProperties ){
                    return '<div><span class="dropdown-item-indicator">' + data.customProperties + '</span>' + escape(data.text) + '</div>';
                }
                return '<div>' + escape(data.text) + '</div>';
            },
        },
    }));
});

document.querySelector('form').addEventListener('submit', function (e) {
  const select = document.getElementById('select-roles');
  let rolesMask = 0;

  // Loop through selected options and combine their values using bitwise OR
  for (const option of select.selectedOptions) {
    rolesMask |= parseInt(option.value);
  }

  // Create a hidden input to send the combined roles_mask to the server
  const hiddenInput = document.createElement('input');
  hiddenInput.type = 'hidden';
  hiddenInput.name = 'roles_mask';
  hiddenInput.value = rolesMask;

  // Append the hidden input to the form
  this.appendChild(hiddenInput);

  // Optional: Disable the select to avoid sending duplicate data
  select.disabled = true;
});
</script>
<script src="/assets/libs/tom-select/dist/js/tom-select.base.min.js" defer></script>
{% endblock %}