{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <div style="width:100%">
    <h1 class="ct-docs-page-h1-title" id="content">{{ _('Charging Sessions') }}</h1>
  </div>

  <style>
    .star-toggle {
      background: none;
      border: none;
      cursor: pointer;
    }

    .star-toggle .star-icon {
      font-size: 1.2rem;
      color: #adb5bd;
      transition: color 0.2s ease;
    }

    .star-toggle.starred .star-icon {
      color: #f59f00;
    }

    .star-toggle:focus {
      outline: none;
      box-shadow: none;
    }

    #month-select {
      min-width: 12rem;
    }
  </style>

  <form method="get" class="mb-3 d-flex flex-wrap align-items-end gap-3">
    <div>
      <label class="form-label text-xs mb-1" for="month-select">{{ _('Month') }}</label>
      <select class="form-select form-select-sm" id="month-select" name="month">
        {% for month in available_months %}
        <option value="{{ month }}" {% if month == selected_month %}selected{% endif %}>{{ month }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="form-check form-switch align-self-center mt-3">
      <input
        class="form-check-input"
        type="checkbox"
        id="filter-starred-only"
        name="starred_only"
        value="1"
        {% if starred_only %}checked{% endif %}
      />
      <label class="form-check-label text-xs" for="filter-starred-only">{{ _('Show starred only') }}</label>
    </div>
    <div class="align-self-center mt-3">
      <button class="btn btn-default btn-sm" type="submit">{{ _('Show') }}</button>
    </div>
  </form>

  {% if import_feedback and import_feedback.status %}
  <div
    class="alert alert-{{ 'success' if import_feedback.status == 'success' else 'danger' }} alert-dismissible fade show"
    role="alert"
  >
    {{ import_feedback.message }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  </div>
  {% endif %}

  <table class="table align-items-center mb-0">
    <tr>
      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"></th>
      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Analysis') }}</th>
      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Chargepoint') }}</th>
      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Connector') }}</th>
      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Session ID') }}</th>
      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Start') }}</th>
      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('End') }}</th>
      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">RFID</th>
      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="text-align:right">
        {{ _('Energy (kWh)') }}
      </th>
      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="text-align:right">
        {{ _('OCMF Energy (kWh)') }}
      </th>
      <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">SQL</th>
    </tr>
    {% for s in sessions %}
    <tr>
      <td class="text-xs font-weight-bold mb-0">
        {% if s.id %}
        <button
          type="button"
          class="star-toggle {% if s.starred %}starred{% endif %}"
          data-session-id="{{ s.id }}"
          data-starred="{{ 1 if s.starred else 0 }}"
          aria-label="{{ _('Mark charging session') }}"
        >
          <span class="star-icon">{% if s.starred %}&#9733;{% else %}&#9734;{% endif %}</span>
        </button>
        {% else %}
        &nbsp;
        {% endif %}
      </td>
      <td class="text-xs font-weight-bold mb-0">
        {% if s.id %}
        <a
          href="{{ url_for('charging_session_analysis_view', session_id=s.id, return_month=selected_month) }}"
          class="text-secondary"
          title="{{ _('View details') }}"
        >
          <i class="ni ni-chart-bar-32"></i>
        </a>
        {% endif %}
      </td>
      <td class="text-xs font-weight-bold mb-0">{{ s.station_id }}</td>
      <td class="text-xs mb-0">{{ s.connector_id }}</td>
      <td class="text-xs mb-0">{{ s.id }}</td>
      <td class="text-xs mb-0">{{ s.start }}</td>
      <td class="text-xs mb-0">{{ s.end }}</td>
      <td class="text-xs mb-0">{{ s.id_tag }}</td>
      <td class="text-xs mb-0" style="text-align:right">
        {% if s.energy is not none %}{{ '%.3f'|format(s.energy) }}{% endif %}
      </td>
      <td class="text-xs mb-0" style="text-align:right">
        {% if s.ocmf_energy is not none %}{{ '%.3f'|format(s.ocmf_energy) }}{% endif %}
      </td>
      <td class="text-xs mb-0">
        {% if s.id %}
        <a
          href="{{ url_for('export_charging_session_sql', session_id=s.id) }}"
          class="text-secondary"
          title="{{ _('Download SQL export') }}"
        >
          <i class="ni ni-archive-2"></i>
        </a>
        {% endif %}
      </td>
    </tr>
    {% endfor %}
  </table>

  <form
    method="post"
    action="{{ url_for('import_charging_session_sql') }}"
    enctype="multipart/form-data"
    class="mt-4 mb-3 d-flex flex-wrap align-items-end gap-3"
  >
    <div>
      <label class="form-label text-xs mb-1" for="sql-import">{{ _('SQL Import') }}</label>
      <input class="form-control form-control-sm" type="file" name="sql_file" id="sql-import" accept=".sql,text/sql" required />
    </div>
    <div class="align-self-center mt-3">
      <button class="btn btn-default btn-sm" type="submit">{{ _('Import SQL') }}</button>
    </div>
  </form>

  <script>
    $(function () {
      const starErrorMessage = {{ _('Could not save star state.') | tojson }};

      $('.star-toggle').on('click', function (event) {
        event.preventDefault();
        var $button = $(this);
        var sessionId = $button.data('session-id');
        if (!sessionId) {
          return;
        }

        var isStarred = $button.data('starred') === 1;
        var nextState = !isStarred;

        $.ajax({
          url: '/op_charging_sessions/' + sessionId + '/star',
          method: 'POST',
          contentType: 'application/json',
          data: JSON.stringify({ starred: nextState }),
        })
          .done(function (response) {
            var starred = response && response.starred ? 1 : 0;
            $button.data('starred', starred);
            $button.toggleClass('starred', starred === 1);
            $button.find('.star-icon').html(starred === 1 ? '&#9733;' : '&#9734;');

            if ($('#filter-starred-only').is(':checked') && starred === 0) {
              $button.closest('tr').fadeOut(150, function () {
                $(this).remove();
              });
            }
          })
          .fail(function () {
            toastr.error(starErrorMessage);
          });
      });

      $('#filter-starred-only').on('change', function () {
        this.form.submit();
      });
    });
  </script>
</main>
{% endblock %}