{% extends "base.html" %}

{% set active_page = "accounts" %}

{% block title %} {{ account.name }} account {% endblock %}

{% block divs %}

{% block breadcrumbs %} {{ super() }} {% endblock %}

<div class="container-fluid px-0">
  <div class="row gx-0">

    <div class="col-md-2 on-top-md ps-0">
      
      {% if user_can_update_account %}
      {% from "_macros.html" import json_attributes_editor_button %}
      <div class="sidepanel">
      <div class="sidepanel-container" style="--sidepanel-width: 450px">
        <div class="sidepanel-label">Edit account</div>
        <div class="sidepanel-content">
          <form class="form-horizontal" id="editaccount">
            <fieldset>
              <div class="asset-form">
                <h3>Edit {{ account.name }}</h3>

                <div class="form-group">
                  <div class="form-group">
                    <div class="col-md-3">
                      <label for="name" class="control-label">Name</label>
                      <input
                        type="text"
                        class="form-control"
                        id="name"
                        name="name"
                        value="{{ account.name }}"
                        required
                      />
                    </div>
                  </div>

                  <div class="form-group">
                    <div class="col-md-3">
                      <label for="primary_color" class="control-label"
                        >Primary Color</label
                      >
                      <span
                        class="fa fa-info d-inline-block ps-2"
                        rel="tooltip"
                        aria-hidden="true"
                        tabindex="0"
                        data-bs-placement="right"
                        data-bs-toggle="tooltip"
                        title="Primary color to use in UI, in hex format. Defaults to FlexMeasures' primary color (#1a3443)"
                      ></span>
                      <div class="input-group mt-1">
                        <input
                          type="text"
                          class="form-control"
                          data-bs-placement="right"
                          id="primary_color"
                          name="primary_color"
                          value="{{ account.primary_color or '' }}"
                        />
                        <button
                          type="button"
                          class="btn btn-sm btn-secondary"
                          data-color-picker-target="primary_color_picker"
                        >
                          Pick
                        </button>
                        <span
                          class="input-group-text"
                          id="primary_color_swatch"
                          style="background-color: {{ account.primary_color or '#1a3443' }}; min-width: 2.5rem;"
                        ></span>
                      </div>
                      <input
                        type="color"
                        class="visually-hidden"
                        id="primary_color_picker"
                        value="{{ account.primary_color or '#1a3443' }}"
                        title="Choose primary color"
                      />
                    </div>
                  </div>

                  <div class="form-group">
                    <div class="col-md-3">
                      <label for="secondary_color" class="control-label"
                        >Secondary Color</label
                      >
                      <span
                        class="fa fa-info d-inline-block ps-2"
                        rel="tooltip"
                        aria-hidden="true"
                        tabindex="0"
                        data-bs-placement="right"
                        data-bs-toggle="tooltip"
                        title="Secondary color to use in UI, in hex format. Defaults to FlexMeasures' secondary color (#f1a122)"
                      ></span>
                      <div class="input-group mt-1">
                        <input
                          type="text"
                          class="form-control"
                          id="secondary_color"
                          name="secondary_color"
                          value="{{ account.secondary_color or '' }}"
                        />
                        <button
                          type="button"
                          class="btn btn-sm btn-secondary"
                          data-color-picker-target="secondary_color_picker"
                        >
                          Pick
                        </button>
                        <span
                          class="input-group-text"
                          id="secondary_color_swatch"
                          style="background-color: {{ account.secondary_color or '#f1a122' }}; min-width: 2.5rem;"
                        ></span>
                      </div>
                      <input
                        type="color"
                        class="visually-hidden"
                        id="secondary_color_picker"
                        value="{{ account.secondary_color or '#f1a122' }}"
                        title="Choose secondary color"
                      />
                    </div>
                  </div>

                  <div class="form-group">
                    <div class="col-md-3">
                      <label for="logo_url" class="control-label"
                        >Logo URL</label
                      >
                      <span
                        class="fa fa-info d-inline-block ps-2"
                        rel="tooltip"
                        aria-hidden="true"
                        tabindex="0"
                        data-bs-placement="right"
                        data-bs-toggle="tooltip"
                        title="Logo URL to use in UI. Defaults to FlexMeasures' logo URL"
                      ></span>
                      <input
                        type="text"
                        class="form-control"
                        id="logo_url"
                        name="logo_url"
                        value="{{ account.logo_url or '' }}"
                      />
                    </div>
                  </div>

                  {% if user_is_admin %}
                  <div class="form-group">
                    <div class="col-md-3">
                      <label for="account_roles" class="control-label"
                        >Account roles</label
                      >
                      <select
                        class="form-select"
                        id="account_roles"
                        name="account_roles"
                        multiple
                      >
                        {% for role_name, role_id in account_role_options.items() %}
                        <option
                          value="{{ role_id }}"
                          {% if role_name in selected_account_roles %}selected{% endif %}
                        >
                          {{ role_name }}
                        </option>
                        {% endfor %}
                      </select>
                    </div>
                  </div>

                  <div class="form-group">
                    <div class="col-md-3">
                      <label for="consultant_account_id" class="control-label"
                        >Consultant Account</label
                      >
                      <select
                        class="form-select"
                        aria-label="Default select example"
                        id="consultant_account_id"
                        name="consultancy_account_id"
                      >
                        <option
                          value="{{ account.consultancy_account_id or '' }}"
                          selected
                        >
                          {% if account.consultancy_account_id %} {% for
                          consultancy_account in accounts %} {% if
                          consultancy_account.id ==
                          account.consultancy_account_id %} {{
                          consultancy_account.name }} {% endif %} {% endfor %}
                          {% else %} Select Account {% endif %}
                        </option>
                        {% for account in accounts %}
                        <option value="{{ account.id }}">
                          {{ account.name }}
                        </option>
                        {% endfor %}
                      </select>
                    </div>
                  </div>

                  {% if plans %}
                  <div class="form-group">
                    <div class="col-md-3">
                      <label for="plan_id" class="control-label">Plan</label>
                      <select class="form-select" id="plan_id" name="plan_id">
                        <option value="" {% if not account.plan_id %}selected{% endif %}>
                          No plan (server defaults apply)
                        </option>
                        {% for plan in plans %}
                        <option
                          value="{{ plan.id }}"
                          {% if plan.id == account.plan_id %}selected{% endif %}
                        >
                          {{ plan.name }}{% if plan.legacy %} (legacy){% endif %}
                        </option>
                        {% endfor %}
                      </select>
                    </div>
                  </div>
                  {% endif %}
                  {% endif %}
                </div>

                <button
                  class="btn btn-sm btn-responsive btn-success create-button"
                  type="submit"
                  value="Save"
                  style="
                    margin-top: 20px;
                    float: right;
                    border: 1px solid var(--light-gray);
                  "
                >
                  Save
                </button>
              </div>
            </fieldset>
          </form>
          <div class="form-group pt-3">
            {{ json_attributes_editor_button(label="Open editor", field_label=attributes_label, field_description=attributes_description) }}
          </div>
        </div>
      </div>
      </div>
      {% endif %}
    </div>
    <div class="col-md-8">
      <div class="card">
        <div class="d-flex justify-content-between align-items-center">
          <h3>Account</h3>
          {% if can_add_client_account %}
          <a
            class="btn bg-primary-custom text-decoration-none text-light nav-button"
            href="{{ url_for('AccountCrudUI:new', consultancy_account_id=account.id) }}"
          >
            Add client account
          </a>
          {% endif %}
        </div>
        <small>Account: {{ account.name }}</small>
        <div class="row">
          <div class="col-md-7">
            <div class="floatThead-wrapper table-responsive">
              <table class="table table-striped">
                <tbody>
                  <tr>
                    <td>ID</td>
                    <td>{{ account.id }}</td>
                  </tr>
                  {% if account.consultancy_account %}
                  <tr>
                    <td>Consultancy</td>
                    <td>
                      <a href="{{ url_for('AccountCrudUI:get', account_id=account.consultancy_account.id) }}">
                        {{ account.consultancy_account.name }}
                      </a>
                    </td>
                  </tr>
                  {% endif %}
                  <tr>
                    <td>Client accounts</td>
                    <td>
                      {% if account.consultancy_client_accounts %}
                      {% for client_account in account.consultancy_client_accounts %}
                      <a href="{{ url_for('AccountCrudUI:get', account_id=client_account.id) }}">
                        {{ client_account.name }}
                      </a>{% if not loop.last %}, {% endif %}
                      {% endfor %}
                      {% else %}
                      None
                      {% endif %}
                    </td>
                  </tr>
                  <tr>
                    <td>Plan</td>
                    <td>
                      {% if account.plan %} {{ account.plan.name }}{% if
                      account.plan.legacy %} (legacy){% endif %} {% else %} No
                      plan (server defaults apply) {% endif %}
                    </td>
                  </tr>
                  <tr>
                    <td>Roles</td>
                    <td>
                      {{ account.account_roles | map(attribute='name') | join(", ")
                      }}
                    </td>
                  </tr>
                  {% if account.primary_color or account.secondary_color %}
                  <tr>
                    <td>Colors</td>
                    <td>
                      {% if account.primary_color %}
                      <span class="me-3">
                        Primary
                        <span
                          style="
                            width: 20px;
                            height: 20px;
                            background-color: {{ account.primary_color }};
                            display: inline-block;
                            vertical-align: middle;
                          "
                        ></span>
                      </span>
                      {% endif %}
                      {% if account.secondary_color %}
                      <span>
                        Secondary
                        <span
                          style="
                            width: 20px;
                            height: 20px;
                            background-color: {{ account.secondary_color }};
                            display: inline-block;
                            vertical-align: middle;
                          "
                        ></span>
                      </span>
                      {% endif %}
                    </td>
                  </tr>
                  {% endif %} {% if account.logo_url %}
                  <tr>
                    <td>Logo URL</td>
                    <td>
                      <img
                        src="{{ account.logo_url }}"
                        alt="Logo"
                        style="max-width: 100px"
                      />
                    </td>
                  </tr>
                  {% endif %}
                </tbody>
              </table>
            </div>
          </div>
          <div class="col-md-5">
            {% from "_macros.html" import render_attributes, render_stored_secrets %}
            {{ render_attributes(account.attributes) }}
            {{ render_stored_secrets(stored_secrets) }}
          </div>
        </div>
      </div>
      <div class="card">
         <div class="d-flex justify-content-between align-items-center">
          <h3 id="usersTableTitle">All users</h3>
          {% if user_can_create_children %}
          <a class="btn bg-primary-custom text-decoration-none text-light nav-button" data-bs-toggle="modal"
            data-bs-target="#createUserModal">
            Create user
          </a>
          {% endif %}
        </div>

        <div class="form-check form-check-inline">
          <label class="form-check-label">
            <input
              id="inactiveUsersCheckbox"
              name="include_inactive"
              type="checkbox"
            />
            Include inactive
          </label>
        </div>
        <div class="table-responsive">
          <table
            class="table table-striped paginate nav-on-click"
            title="View this user"
            id="usersTable"
          ></table>
        </div>
      </div>
      <div class="card">
        <h3>Assets
        {% if user_can_create_children %}
            <a href="/assets/new?account_id={{ account.id }}" style="float: right;"
                class="btn bg-primary-custom text-decoration-none text-light nav-button">
                Create asset
            </a>
        {% endif %}
        </h3>
        <div class="form-check form-check-inline">
          <label class="form-check-label">
            <input
              id="includePublicAssetsCheckbox"
              name="include_public_assets"
              type="checkbox"
            />
            Include public assets
          </label>
        </div>

        <div class="table-responsive">
          <table
            class="table table-striped paginate nav-on-click"
            title="View this asset"
            id="assetTable"
          ></table>
        </div>
      </div>
    </div>
    <div class="col-md-2">
      {% if can_view_account_auditlog %}
      <button
        class="btn p-3 btn-info border-0 mb-3 mt-3" type="button"
        onclick="window.location.href='/accounts/auditlog/{{ account.id }}'"
        title="View history of actions on this account.">
        Audit log
      </button>
      {% endif %}
  </div>
</div>

 <!-- Create User Modal -->
<div class="modal fade " id="createUserModal" tabindex="-1" aria-labelledby="createUserModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title pe-2">Create user</h5>
        <div class="dropdown" data-bs-auto-close="outside">
          <span class="fa fa-info dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false"
            rel="tooltip" aria-hidden="true" tabindex="0" data-bs-placement="right"></span>

          <div class="dropdown-menu p-3" style="width: 400px;">
            <div>
              <strong>Help</strong>
              <p class="mb-2 pt-2">
                This modal allows you to create a new user.
              </p>
            </div>
          </div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <div class="modal-body">
        <form id="createUserForm">
          <div class="mb-3">
            <label for="account" class="form-label">Account</label>
            <select class="form-select" id="account" name="account" disabled>
              <option value="{{ account.id }}">{{ account.name }}</option>
            </select>
          </div>
          <div class="mb-3">
            <label for="username" class="form-label">Username</label>
            <input type="text" class="form-control" id="username" name="username" required>
          </div>
          <div class="mb-3">
            <label for="email" class="form-label">Email</label>
            <input type="email" class="form-control" id="email" name="email" required>
            <small class="text-muted">
              The user will receive an email with a URL for setting an initial password.
            </small>
          </div>

          <button type="submit" class="btn btn-primary create-button">Save</button>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
    $(document).ready(function () {
    // Handle form submission
    $("#createUserForm").submit(function (event) {
      event.preventDefault();

      const username = $("#username").val();
      const email = $("#email").val();
      const account_id = $("#account").val();


      $.ajax({
        type: "POST",
        url: "/api/v3_0/users",
        data: JSON.stringify({ username, email, account_id }),
        contentType: "application/json",
        success: function (response) {
          $("#createUserModal").modal("hide");
          $("#createUserForm")[0].reset();
          $("#usersTable").DataTable().ajax.reload();

          showToast(
            `User <i class='fw-bold'>${username}</i> created successfully!`,
            'success'
          );
        },
        error: function (xhr, status, error) {
          const response = JSON.parse(xhr.responseText);
          const toastMessage = xhr.status === 403
            ? "You do not have permission to create users for this account."
            : response.message || "Something went wrong!";

          showToast(toastMessage, 'error');
        }
      });
    });
  });

  function User(
    id,
    username,
    email,
    roles,
    account,
    timezone,
    lastLogin,
    lastSeen,
    active
 ) {
    this.id = id;
    this.username = `<span>${username}</span>`;
    this.email = `<a href="mailto:${email}" title="Mail this user">${email}</a>`;
    this.roles = roles.map((role) => role).join(", ");
    this.url = `/users/${id}`;

    if (account == null) this.account = "PUBLIC";
    else
       this.account = `
              <a href="/accounts/${account["id"]}" title="View this account">${account["name"]}</a>
            `;
    this.timezone = timezone;
    this.lastLogin = lastLogin
      ? getHumanFriendlyDeltaOrTimeStr(lastLogin, { dateOnlyForOlder: true })
      : "";
    this.lastSeen = lastSeen
      ? getHumanFriendlyDeltaOrTimeStr(lastSeen, { dateOnlyForOlder: true })
      : "";
    this.active = active;
 }

$(document).ready(function () {
  let includeInactiveUsers = false;
  const usersTableTitle = $("#usersTableTitle");
  // Initialize the DataTable
  const usersTable = $("#usersTable").dataTable({
      order: [
        [0, "asc"]
      ],
      serverSide: true,
      // make the table row vertically aligned with header
      columns: [{
            data: "username",
            title: "Username",
            orderable: true
        },
        {
            data: "email",
            title: "Email",
            orderable: true
        },
        {
            data: "roles",
            title: "Roles",
            orderable: false
        },
        {
            data: "account",
            title: "Account",
            orderable: false
        },
        {
            data: "timezone",
            title: "Timezone",
            orderable: false
        },
        {
            data: "lastLogin",
            title: "Last login",
            orderable: true
        },
        {
            data: "lastSeen",
            title: "Last seen",
            orderable: true
        },
        {
            data: "active",
            title: "Active",
            orderable: false
        },
        {
            data: "url",
            title: "URL",
            className: "d-none"
        },
      ],

      ajax: function (data, callback, settings) {

        const basePath = window.location.origin;
        let filter = data["search"]["value"];
        let orderColumnIndex = data["order"][0]["column"]
        let orderDirection = data["order"][0]["dir"];
        let orderColumnName = data["columns"][orderColumnIndex]["data"];

        let url = `${basePath}/api/v3_0/users?page=${data["start"] / data["length"] + 1}&per_page=${data["length"]}&include_inactive=${includeInactiveUsers}&account_id={{ account.id }}`;

        if (filter.length > 0) {
            url = `${url}&filter=${filter}`;
        }

        if (orderColumnName) {
            url = `${url}&sort_by=${orderColumnName}&sort_dir=${orderDirection}`;
        }

        $.ajax({
            type: "get",
            url: url,
            success: function (response, text) {
              let clean_response = [];
              response["data"].forEach((element) =>
                  clean_response.push(
                    new User(
                        element["id"],
                        element["username"],
                        element["email"],
                        element["flexmeasures_roles"],
                        element["account"],
                        element["timezone"],
                        element["last_login_at"],
                        element["last_seen_at"],
                        element["active"]
                    )
                  )
              );

              callback({
                  data: clean_response,
                  recordsTotal: response["num-records"],
                  recordsFiltered: response["filtered-records"],
              });
            },
            error: function (request, status, error) {
              console.log("Error: ", error);
            },
        });
      },
  });


  // Event listener for the checkbox to toggle includeInactive state
  $("#inactiveUsersCheckbox").change(function () {
      includeInactiveUsers = this.checked;
      usersTable.api().ajax.reload();
      if (includeInactiveUsers) {
        usersTableTitle.text("All users");
      } else {
        usersTableTitle.text("All active users");
      }
  });
}); 

  const asset_icon_map = JSON.parse('{{ asset_icon_map | tojson | safe }}');

  function Asset(id, name, account, latitude, longitude, sensors, asset_type) {
    let icon = asset_icon_map[asset_type.toLowerCase()];
    if (icon === undefined) icon = `icon-${asset_type}`;

    this.name = `
    <i class="${icon} left-icon">${name}</i>
  `;

    this.id = id;
    this.location = "";
    this.url = `/assets/${id}`;
    this.status = `
        <a href="/assets/${id}/status">
          <button type="button" class="btn btn-primary">Status</button>
        </a>
      `;

    if (account == null) this.owner = "PUBLIC";
    else
      this.owner = `
          <a href="/accounts/${account["id"]}" title="View this account">${account["name"]}</a>
        `;

    this.num_sensors = sensors.length;

    if (latitude != null && longitude != null)
      this.location = `LAT: ${latitude}, LONG: ${longitude}`;
  }

  $(document).ready(function () {
    let includePublicAssets = false;
    const assetsTableTitle = $("#assetsTableTitle");
    const assetsTable = $("#assetTable").dataTable({
      order: [[1, "asc"]],
      serverSide: true,
      columns: [
        { data: "id", title: "Asset ID" },
        {data: "name", title: "Name", orderable: true},
        {data: "owner", title: "Account", orderable: true},
        {data: "location", title: "Location", orderable: false},
        {data: "num_sensors", title: "Sensors", orderable: false},
        {data: "status", title: "Status", orderable: false},
        { data: "url", title: "URL", className: "d-none" },
      ],
      ajax: function (data, callback, settings) {
        const basePath = window.location.origin;
        let filter = data["search"]["value"];
        let orderColumnIndex = data["order"][0]["column"]
        let orderDirection = data["order"][0]["dir"];
        let orderColumnName = data["columns"][orderColumnIndex]["data"];

        let url = `${basePath}/api/v3_0/assets?page=${
          Math.floor(data["start"] / data["length"]) + 1
        }&per_page=${data["length"]}&include_public=${includePublicAssets}&account_id=${
          {{ account.id }}
        }`;
        
        url += "&fields=id|name|generic_asset_type|owner|latitude|longitude|sensors";

        if (filter.length > 0) {
          url = `${url}&filter=${filter}`;
        }

        if (orderColumnName){
          url = `${url}&sort_by=${orderColumnName}&sort_dir=${orderDirection}`;
        }

        $.ajax({
          type: "get",
          url: url,
          success: function (response, text) {
            let clean_response = [];
            response["data"].forEach((element) =>
              clean_response.push(
                new Asset(
                  element["id"],
                  element["name"],
                  element["owner"],
                  element["latitude"],
                  element["longitude"],
                  element["sensors"],
                  element["generic_asset_type"]["name"]
                )
              )
            );
            callback({
              data: clean_response,
              recordsTotal: response["num-records"],
              recordsFiltered: response["filtered-records"],
            });
          },
          error: function (request, status, error) {
            console.log("Error: ", error);
          },
        });
      },
    });
    
    // Event listener for the checkbox to toggle includePublicAssets state
    $("#includePublicAssetsCheckbox").change(function () {
      includePublicAssets = this.checked;
      assetsTable.api().ajax.reload();
      if (includePublicAssets) {
        assetsTableTitle.text("All assets (incl. public)");
      } else {
        assetsTableTitle.text("All assets");
      }
    });
  
  });
</script>

<script defer>
  const basePath = window.location.origin;
  const form = document.getElementById("editaccount");

  function syncColorPicker(pickerId, inputId, swatchId) {
    const picker = document.getElementById(pickerId);
    const input = document.getElementById(inputId);
    const swatch = document.getElementById(swatchId);
    const pickButton = document.querySelector(
      `[data-color-picker-target="${pickerId}"]`
    );

    if (picker === null || input === null || swatch === null) {
      return;
    }

    function updateSwatch(color) {
      if (/^#[0-9a-fA-F]{6}$/.test(color)) {
        swatch.style.backgroundColor = color;
        picker.value = color;
      }
    }

    if (pickButton !== null) {
      pickButton.addEventListener("click", function () {
        picker.click();
      });
    }

    picker.addEventListener("input", function () {
      input.value = picker.value;
      updateSwatch(picker.value);
    });

    input.addEventListener("input", function () {
      updateSwatch(input.value);
    });
  }

  syncColorPicker("primary_color_picker", "primary_color", "primary_color_swatch");
  syncColorPicker(
    "secondary_color_picker",
    "secondary_color",
    "secondary_color_swatch"
  );

  if (form !== null) {
    form.addEventListener("submit", function (event) {
      event.preventDefault();

      const formData = new FormData(event.target);
      const payload = Object.fromEntries(
        Array.from(formData.entries()).map(([key, value]) => [
          key,
          value === "" ? null : value,
        ])
      );

      const accountRolesSelect = document.getElementById("account_roles");
      if (accountRolesSelect !== null) {
        payload.account_roles = Array.from(accountRolesSelect.selectedOptions).map(
          (option) => Number(option.value)
        );
      }

      fetch(basePath + "/api/v3_0/accounts/" + "{{account.id}}", {
        method: "PATCH",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(payload),
      })
        .then((response) =>
          response.json().then((data) => ({
            ok: response.ok,
            data: data,
          }))
        )
        .then(({ ok, data }) => {
          if (ok) {
            showToast("Account updated successfully!", "success");
            return;
          }

          if (data.message && typeof data.message === "string") {
            showToast(data.message, "error");
            return;
          }

          const errors = data.message && data.message.json ? data.message.json : data.errors;
          if (errors) {
            for (const key in errors) {
              showToast(`${key}: ${errors[key]}`, "error");
            }
            return;
          }

          showToast("Could not update account.", "error");
        });
    });
  }
</script>
{% block paginate_tables_script %} {{ super() }} {% endblock %}

{% if user_can_update_account %}
{% from "_macros.html" import json_attributes_editor_modal %}
{{ json_attributes_editor_modal(
     api_url="/api/v3_0/accounts/" ~ account.id,
     initial_attributes=account.attributes,
     entity_name=account.name
) }}
{% endif %}

{% endblock %}