{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <div style="width:100%">
    <h2 class="ct-docs-page-h1-title" id="content">
      {{ _('Tariffs') }}
    </h2>
    <p class="text-muted mb-3">{{ _('Create or update tariffs including validity, EMSP surcharges, and tax handling.') }}</p>
  </div>

  <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
    <a class="btn btn-outline-secondary btn-sm" data-export-link="{{ export_links.json }}" href="{{ export_links.json }}">{{ _('Export JSON') }}</a>
    <a class="btn btn-outline-secondary btn-sm" data-export-link="{{ export_links.csv }}" href="{{ export_links.csv }}">{{ _('Export CSV') }}</a>
    <div class="input-group input-group-sm" style="max-width: 260px;">
      <label class="input-group-text" for="tariffs-version">{{ _('OCPI version') }}</label>
      <select class="form-select" id="tariffs-version">
        {% for version in version_options %}
        <option value="{{ version }}" {% if loop.first %}selected{% endif %}>{{ version }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="input-group input-group-sm" style="max-width: 300px;">
      <input type="file" class="form-control" id="tariffs-upload-input" accept=".csv,.json">
      <button class="btn btn-primary" type="button" id="tariffs-upload-btn">{{ _('Upload CSV/JSON') }}</button>
    </div>
    <button class="btn btn-outline-primary btn-sm" type="button" id="tariffs-validate-btn">{{ _('Validate') }}</button>
    <button class="btn btn-outline-primary btn-sm" type="button" id="tariffs-sandbox-btn">{{ _('Sandbox samples') }}</button>
  </div>
  <div class="text-muted small" id="tariffs-validation-result"></div>

  {% for message in success_messages or [] %}
  <div class="alert alert-success" role="alert">{{ message }}</div>
  {% endfor %}
  {% for message in error_messages or [] %}
  <div class="alert alert-danger" role="alert">{{ message }}</div>
  {% endfor %}

  <div class="row">
    <div class="col-12 col-lg-7">
      <div class="card mb-4">
        <div class="card-body">
          <h5 class="mb-3">{{ _('Tariff details') }}</h5>
          <form method="post">
            <input type="hidden" name="action" value="save">
            <div class="row g-3">
              <div class="col-12 col-md-6">
                <label class="form-label" for="tariff_id">{{ _('Tariff ID') }}</label>
                <input class="form-control" type="text" id="tariff_id" name="tariff_id" value="{{ selected_tariff.id if selected_tariff else '' }}" required>
              </div>
              <div class="col-12 col-md-3">
                <label class="form-label" for="currency">{{ _('Currency') }}</label>
                {% set currency_options = ['EUR', 'CHF', 'USD'] %}
                {% set selected_currency = (selected_tariff.currency if selected_tariff else 'EUR') %}
                <select class="form-select" id="currency" name="currency">
                  {% for currency_code in currency_options %}
                  <option value="{{ currency_code }}" {% if currency_code == selected_currency %}selected{% endif %}>{{ currency_code }}</option>
                  {% endfor %}
                </select>
              </div>
              <div class="col-12 col-md-3 d-flex align-items-end">
                <div class="form-check mt-3 mt-md-4">
                  <input class="form-check-input" type="checkbox" id="tax_included" name="tax_included" {% if selected_tariff and selected_tariff.tax_included %}checked{% endif %}>
                  <label class="form-check-label" for="tax_included">{{ _('Tax included') }}</label>
                </div>
              </div>
              <div class="col-12 col-md-6">
                <label class="form-label" for="name_en">{{ _('Tariff title (EN)') }}</label>
                {% set en_alt = (selected_tariff.tariff_alt_text | selectattr('language', 'equalto', 'en') | list | first | default({})) if selected_tariff and selected_tariff.tariff_alt_text else {} %}
                <input class="form-control" type="text" id="name_en" name="name_en" value="{{ en_alt.get('text','') }}">
              </div>
              <div class="col-12 col-md-6">
                <label class="form-label" for="name_de">{{ _('Tariff title (DE)') }}</label>
                {% set de_alt = (selected_tariff.tariff_alt_text | selectattr('language', 'equalto', 'de') | list | first | default({})) if selected_tariff and selected_tariff.tariff_alt_text else {} %}
                <input class="form-control" type="text" id="name_de" name="name_de" value="{{ de_alt.get('text','') }}">
              </div>
              <div class="col-12 col-md-6">
                <label class="form-label" for="valid_from">{{ _('Valid from') }}</label>
                <input class="form-control" type="datetime-local" id="valid_from" name="valid_from" value="{{ format_dt_local(selected_tariff.valid_from) if selected_tariff else '' }}">
              </div>
              <div class="col-12 col-md-6">
                <label class="form-label" for="valid_until">{{ _('Valid until') }}</label>
                <input class="form-control" type="datetime-local" id="valid_until" name="valid_until" value="{{ format_dt_local(selected_tariff.valid_until) if selected_tariff else '' }}">
              </div>
              <div class="col-12">
                <label class="form-label" for="elements">{{ _('Price components (JSON)') }}</label>
                <textarea class="form-control" id="elements" name="elements" rows="6" placeholder='[{"price_components":[{"type":"ENERGY","price":0.25,"vat":7.7,"step_size":1}]}]'>{% if selected_tariff %}{{ selected_tariff.elements | tojson(indent=2) }}{% else %}[]{% endif %}</textarea>
                <small class="text-muted">{{ _('Include VAT in price components or toggle the tax flag above.') }}</small>
              </div>
              <div class="col-12">
                <label class="form-label">{{ _('EMSP surcharges') }}</label>
                <div class="table-responsive">
                  <table class="table table-sm align-items-center mb-0">
                    <thead>
                      <tr>
                        <th>{{ _('Backend') }}</th>
                        <th>{{ _('Percent markup') }}</th>
                        <th>{{ _('Fixed markup') }}</th>
                      </tr>
                    </thead>
                    <tbody>
                      {% for row in surcharge_rows %}
                      <tr>
                        <td>
                          <select class="form-select form-select-sm" name="surcharge_backend_id">
                            <option value="">{{ _('Please choose') }}</option>
                            {% for backend in backends %}
                            <option value="{{ backend.backend_id }}" {% if row.get('backend_id') == backend.backend_id %}selected{% endif %}>
                              {{ backend.name }} (#{{ backend.backend_id }})
                            </option>
                            {% endfor %}
                          </select>
                        </td>
                        <td><input class="form-control form-control-sm" type="text" name="surcharge_percent" value="{{ row.get('percent', '') }}" placeholder="5"></td>
                        <td><input class="form-control form-control-sm" type="text" name="surcharge_fixed" value="{{ row.get('fixed', '') }}" placeholder="0.25"></td>
                      </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                  <small class="text-muted">{{ _('Percent values are applied per EMSP; leave backend empty for defaults.') }}</small>
                </div>
              </div>
              <div class="col-12 d-flex justify-content-end gap-2">
                <button class="btn btn-primary btn-sm pipelet-btn" type="submit">{{ _('Save') }}</button>
                {% if selected_tariff %}
                <button class="btn btn-danger btn-sm pipelet-btn" type="submit" name="action" value="delete">{{ _('Delete') }}</button>
                {% endif %}
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>

    <div class="col-12 col-lg-5">
      <div class="card mb-4">
        <div class="card-body">
          <h5 class="mb-3">{{ _('Assignments') }}</h5>
          {% if selected_tariff %}
          <form method="post" class="row g-3 align-items-end mb-3">
            <input type="hidden" name="action" value="assign">
            <input type="hidden" name="tariff_id" value="{{ selected_tariff.id }}">
            <div class="col-12">
              <label class="form-label" for="assignment_location">{{ _('Location') }}</label>
              <select class="form-select" id="assignment_location" name="assignment_location">
                {% for loc in locations %}
                <option value="{{ loc.id }}">{{ loc.name or loc.id }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-12">
              <label class="form-label" for="assignment_evse">{{ _('EVSE (optional)') }}</label>
              <input class="form-control" list="evse-options" id="assignment_evse" name="assignment_evse" placeholder="{{ _('Attach to a specific EVSE or leave empty for the location') }}">
              <datalist id="evse-options">
                {% for loc in locations %}
                  {% for evse in loc.evses %}
                  <option value="{{ evse.uid }}">{{ loc.id }} - {{ evse.uid }}</option>
                  {% endfor %}
                {% endfor %}
              </datalist>
            </div>
            <div class="col-12 d-flex justify-content-end">
              <button class="btn btn-primary btn-sm pipelet-btn" type="submit">{{ _('Add assignment') }}</button>
            </div>
          </form>

          <div class="table-responsive">
            <table class="table table-sm align-items-center mb-0">
              <thead>
                <tr>
                  <th>{{ _('Location') }}</th>
                  <th>{{ _('EVSE') }}</th>
                  <th class="text-end">{{ _('Actions') }}</th>
                </tr>
              </thead>
              <tbody>
                {% set current_assignments = assignments_by_tariff.get(selected_tariff.id | string, []) %}
                {% if current_assignments %}
                {% for assignment in current_assignments %}
                <tr>
                  <td class="align-middle">{{ assignment.location_id }}</td>
                  <td class="align-middle">{{ assignment.evse_uid or _('Location level') }}</td>
                  <td class="align-middle text-end">
                    <form method="post" class="d-inline">
                      <input type="hidden" name="action" value="remove_assignment">
                      <input type="hidden" name="tariff_id" value="{{ selected_tariff.id }}">
                      <input type="hidden" name="assignment_location" value="{{ assignment.location_id }}">
                      <input type="hidden" name="assignment_evse" value="{{ assignment.evse_uid }}">
                      <button class="btn btn-link text-danger btn-sm" type="submit">{{ _('Remove') }}</button>
                    </form>
                  </td>
                </tr>
                {% endfor %}
                {% else %}
                <tr>
                  <td colspan="3" class="text-center text-muted">{{ _('No data available yet.') }}</td>
                </tr>
                {% endif %}
              </tbody>
            </table>
          </div>
          {% else %}
          <p class="text-muted mb-0">{{ _('Select a tariff to manage assignments.') }}</p>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-body table-responsive">
      <h5 class="mb-3">{{ _('Tariff overview') }}</h5>
      <table class="table align-items-center mb-0">
        <thead>
          <tr>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Tariff ID') }}</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Currency') }}</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Valid from') }}</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Valid until') }}</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Tax included') }}</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('EMSP surcharges') }}</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% if tariffs %}
          {% for tariff in tariffs %}
          <tr{% if selected_tariff_id and selected_tariff_id|string == tariff.id|string %} class="table-active"{% endif %}>
            <td class="align-middle">{{ tariff.id }}</td>
            <td class="align-middle">{{ tariff.currency }}</td>
            <td class="align-middle">{{ tariff.valid_from or '-' }}</td>
            <td class="align-middle">{{ tariff.valid_until or '-' }}</td>
            <td class="align-middle">
              {% if tariff.tax_included %}
              <span class="badge bg-success">{{ _('Yes') }}</span>
              {% else %}
              <span class="badge bg-secondary">{{ _('No') }}</span>
              {% endif %}
            </td>
            <td class="align-middle">
              {% if tariff.emsp_surcharges %}
                {% for surcharge in tariff.emsp_surcharges %}
                  <span class="badge bg-light text-dark">{{ surcharge.backend_id or _('All') }}: {{ surcharge.percent or 0 }}% / {{ surcharge.fixed or 0 }}</span>
                {% endfor %}
              {% else %}
                <span class="text-muted">{{ _('None') }}</span>
              {% endif %}
            </td>
            <td class="align-middle text-end">
              <form method="get" class="d-inline">
                <input type="hidden" name="tariff_id" value="{{ tariff.id }}">
                <button class="btn btn-link btn-sm" type="submit">{{ _('Select') }}</button>
              </form>
              <form method="post" class="d-inline">
                <input type="hidden" name="tariff_id" value="{{ tariff.id }}">
                <input type="hidden" name="action" value="delete">
                <button class="btn btn-danger btn-sm pipelet-btn" type="submit">{{ _('Delete') }}</button>
              </form>
            </td>
          </tr>
          {% endfor %}
          {% else %}
          <tr>
            <td colspan="7" class="text-center text-muted">{{ _('No data available yet.') }}</td>
          </tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>
</main>

<script>
  (function() {
    const uploadBtn = document.getElementById('tariffs-upload-btn');
    const uploadInput = document.getElementById('tariffs-upload-input');
    const validateBtn = document.getElementById('tariffs-validate-btn');
    const versionSelect = document.getElementById('tariffs-version');
    const sandboxBtn = document.getElementById('tariffs-sandbox-btn');
    const resultBox = document.getElementById('tariffs-validation-result');
    const endpoints = {
      importUrl: '{{ import_url }}',
      validateUrl: '{{ validate_url }}',
      sandboxUrl: '{{ sandbox_url }}',
    };
    const exportLinks = {{ export_links|tojson }};
    const translations = {
      selectFile: '{{ _("Select a CSV or JSON file") }}',
      importDone: '{{ _("Import completed") }}',
      importWarning: '{{ _("Import finished with warnings") }}',
      uploadFailed: '{{ _("Upload failed") }}',
      validationPassed: '{{ _("Validation passed") }}',
      validationErrors: '{{ _("Validation errors") }}',
      validationWarnings: '{{ _("Validation warnings") }}',
      sandboxApplied: '{{ _("Sandbox data applied.") }}'
    };

    function notify(message) {
      try { toastr.info(message); } catch (e) { alert(message); }
    }

    function currentVersion() {
      return (versionSelect && versionSelect.value) || '{{ version_options[0] }}';
    }

    function withVersion(url) {
      const target = new URL(url, window.location.origin);
      target.searchParams.set('version', currentVersion());
      return target.toString();
    }

    function updateExportLinks() {
      document.querySelectorAll('[data-export-link]').forEach((el) => {
        const base = el.getAttribute('data-export-link');
        el.href = withVersion(base);
      });
    }

    function readSelectedFile(callback) {
      if (!uploadInput || !uploadInput.files.length) {
        notify(translations.selectFile);
        return;
      }
      const file = uploadInput.files[0];
      const reader = new FileReader();
      reader.onload = (evt) => callback(file, evt.target.result);
      reader.readAsText(file);
    }

    function handleImport() {
      readSelectedFile((file, content) => {
        const contentType = file.type || (file.name.endsWith('.csv') ? 'text/csv' : 'application/json');
        fetch(withVersion(endpoints.importUrl), {
          method: 'POST',
          headers: {'Content-Type': contentType},
          body: content
        }).then(resp => resp.json())
          .then(data => {
            if (data.errors && data.errors.length) {
              notify(translations.importWarning + ': ' + data.errors.join('; '));
            } else {
              notify(translations.importDone);
            }
            window.location.reload();
          })
          .catch(err => notify(translations.uploadFailed + ': ' + err));
      });
    }

    function handleValidate() {
      readSelectedFile((file, content) => {
        const contentType = file.type || (file.name.endsWith('.csv') ? 'text/csv' : 'application/json');
        fetch(withVersion(endpoints.validateUrl), {
          method: 'POST',
          headers: {'Content-Type': contentType},
          body: content
        }).then(resp => resp.json())
          .then(data => {
            const errorCount = (data.errors || []).length;
            const warningCount = (data.warnings || []).length;
            let message = translations.validationPassed;
            if (errorCount) {
              message = translations.validationErrors + ': ' + errorCount;
            } else if (warningCount) {
              message = translations.validationWarnings + ': ' + warningCount;
            }
            if (resultBox) resultBox.textContent = message;
            notify(message);
          })
          .catch(err => notify(translations.uploadFailed + ': ' + err));
      });
    }

    function handleSandbox() {
      fetch(endpoints.sandboxUrl, { method: 'POST' })
        .then(resp => resp.json())
        .then(data => {
          if (data.errors && data.errors.length) {
            notify(translations.importWarning + ': ' + data.errors.join('; '));
          } else {
            notify(translations.sandboxApplied);
          }
          window.location.reload();
        })
        .catch(err => notify(translations.uploadFailed + ': ' + err));
    }

    if (versionSelect) {
      versionSelect.addEventListener('change', updateExportLinks);
      updateExportLinks();
    }
    if (uploadBtn) uploadBtn.addEventListener('click', handleImport);
    if (validateBtn) validateBtn.addEventListener('click', handleValidate);
    if (sandboxBtn) sandboxBtn.addEventListener('click', handleSandbox);
  })();
</script>
{% endblock %}