{% extends "base.html" %}

{% block content %}
<section class="panel dashboard-account-line">
  <div class="dashboard-account-row">
    <span class="dashboard-account-item">
      <strong>{{ tr("User Admin") if current_user['is_admin'] == 1 else tr("User Member") }}</strong>: {{ current_user['username'] }}
    </span>
    <span class="dashboard-account-item">
      <strong>{{ tr("Internal Wallet (TIC)") }}:</strong> {{ current_user['wallet_balance']|ticfmt }} TIC
    </span>
    <a class="btn small dashboard-account-btn" href="{{ url_for('wallet') }}">{{ tr("Go to Top-up Menu") }}</a>
    {% if current_user['is_admin'] == 1 %}
    <span class="dashboard-account-item">
      <strong>{{ tr("TTC Coins") }}:</strong> {{ provider_balance_cache or tr("Not synced") }}
    </span>
    <form method="post" action="{{ url_for('dashboard_refresh_provider_balance') }}" class="dashboard-inline-form">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
      <button
        type="submit"
        class="btn small icon-btn"
        aria-label="{{ tr('Sync TTC Balance') }}"
        title="{{ tr('Sync TTC Balance') }}"
      >&#8635;</button>
    </form>
    {% endif %}
  </div>
</section>

<section class="hero-card">
  <h1>{{ tr("Hello, {username}", username=current_user['username']) }}</h1>
  {% if dashboard_notice_enabled and dashboard_notice_html %}
  <div class="dashboard-hero-note">
    {{ dashboard_notice_html|safe }}
  </div>
  {% endif %}
</section>

<section class="panel service-price-board" data-service-board-scope>
  <h2>{{ tr("Configured Service Prices") }}</h2>
  {% if not services %}
    <p class="muted">{{ tr("No service price configured yet. Please contact admin.") }}</p>
  {% else %}
  {% set service_tab_ns = namespace(first_key='') %}
  <div class="category-tab-list service-board-tab-list">
    {% for category in service_categories %}
    {% set category_services = services | selectattr('category_key', 'equalto', category['key']) | list %}
    {% if category_services %}
      {% if not service_tab_ns.first_key %}
        {% set service_tab_ns.first_key = category['key'] %}
      {% endif %}
    <button
      type="button"
      class="category-tab-btn service-board-tab-btn{% if service_tab_ns.first_key == category['key'] %} is-active{% endif %}"
      data-service-board-tab="{{ category['key'] }}"
      aria-selected="{{ 'true' if service_tab_ns.first_key == category['key'] else 'false' }}"
    >{{ category['label_display'] }}</button>
    {% endif %}
    {% endfor %}
  </div>

  <div class="service-price-category-grid">
    {% for category in service_categories %}
    {% set category_services = services | selectattr('category_key', 'equalto', category['key']) | list %}
    {% if category_services %}
    <article
      class="service-price-category-card"
      data-service-board-card="{{ category['key'] }}"
      data-category-name="{{ (category['label'] or '')|lower }}"
    >
      <h3 class="service-price-category-title">{{ category['label_display'] }}</h3>
      <div class="service-price-scroll">
        <table class="service-price-table">
          <thead>
            <tr>
              <th>{{ tr("Service ID") }}</th>
              <th>{{ tr("Name") }}</th>
              <th>{{ tr("Min") }}</th>
              <th>{{ tr("Max") }}</th>
              <th>{{ tr("Price / 1") }}</th>
            </tr>
          </thead>
          <tbody>
            {% for service in category_services %}
            <tr>
              <td>{{ service['service_id'] }}</td>
              <td><span class="service-name-with-icon">{{ service['service_name_display'] }}</span></td>
              <td>{{ service['min_qty'] or '-' }}</td>
              <td>{{ service['max_qty'] or '-' }}</td>
              <td>{{ service['price_per_1000_tic']|ticfmt }} TIC</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </article>
    {% endif %}
    {% endfor %}
  </div>
  {% endif %}
</section>

<section id="create-order" class="panel order-create-panel" data-category-scope data-category-default="{{ order_form_default_category_key or '' }}" data-category-require-selection="1">
  <h2>{{ tr("Create Buff Order") }}</h2>

  {% if service_categories %}
  <div class="category-tab-list">
    {% for category in service_categories %}
    <button type="button" class="category-tab-btn" data-category-tab="{{ category['key'] }}">{{ category['label_display'] }}</button>
    {% endfor %}
  </div>
  {% endif %}

  <p class="muted" data-category-empty-hint>{{ tr("Choose a category to create an order.") }}</p>

  <form method="post" action="{{ url_for('create_order') }}" class="form-grid order-form" data-category-requires-active hidden>
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
    <input type="hidden" name="target_mode" id="order-target-mode" value="generic" />

    <label class="order-field-service">
      {{ tr("Choose Service") }}
      <select name="service_id" required data-category-filter-select>
        <option value="" selected>{{ tr("Select service (ID + Name)") }}</option>
        {% for service in services %}
          {% set display_name = (service['service_name_display'] or ('Service ' ~ service['service_id'])) %}
          <option
            value="{{ service['service_id'] }}"
            data-price-per-unit="{{ service['price_per_1000_tic'] }}"
            data-service-name="{{ display_name }}"
            data-category-filter-option="{{ service['category_key'] }}"
            data-is-tiktok="{{ '1' if service['is_tiktok_service'] else '0' }}"
            data-order-note-enabled="{{ '1' if service['order_note_enabled'] else '0' }}"
            data-order-note-html="{{ service['order_note_html']|e }}"
            data-target-mode="{{ service['form_target_mode'] }}"
            data-target-label="{{ tr(service['form_target_label']) }}"
            data-target-placeholder="{{ tr(service['form_target_placeholder']) }}"
            data-target-hint="{{ tr(service['form_target_hint']) }}"
            data-target-input-type="{{ service['form_target_input_type'] }}"
            data-quantity-label="{{ tr(service['form_quantity_label']) }}"
            data-requires-comments="{{ '1' if service['requires_custom_comments'] else '0' }}"
            data-comments-label="{{ tr(service['form_comments_label']) }}"
            data-comments-placeholder="{{ tr(service['form_comments_placeholder']) }}"
            data-comments-hint="{{ tr(service['form_comments_hint']) }}"
          >{{ service['service_id'] }} - {{ display_name }}</option>
        {% endfor %}
      </select>
    </label>

    <label class="order-field-qty">
      <span id="order-qty-label">{{ tr("Quantity") }}</span>
      <input type="number" id="order-quantity-input" name="quantity" required min="1" step="1" value="1" />
    </label>

    <label class="order-field-fee">
      {{ tr("Fee (TIC)") }}
      <input type="text" id="order-estimated-fee" value="0 TIC" readonly />
    </label>

    <label class="full-row order-field-target">
      <span id="order-target-label">{{ tr("Target Link") }}</span>
      <input
        type="url"
        id="order-target-input"
        name="target_link"
        required
        data-default-placeholder="https://"
        data-default-type="url"
      />
      <small class="muted" id="order-target-hint">{{ tr("Paste full URL for this service.") }}</small>
      {% if order_form_errors %}
      <div class="order-inline-errors" id="order-inline-errors">
        {% for message in order_form_errors %}
        <div class="flash flash-error order-inline-error">{{ message }}</div>
        {% endfor %}
      </div>
      {% endif %}
    </label>

    <label class="full-row order-field-comments" id="order-comments-field" hidden>
      <span id="order-comments-label">{{ tr("Comment Content") }}</span>
      <div class="order-comments-layout">
        <textarea id="order-comments-input" name="comments" rows="5" placeholder="{{ tr('Enter one comment per line.') }}"></textarea>
      </div>
    </label>

    <button type="submit" class="btn primary full-row">{{ tr("Create Order") }}</button>
    <aside class="full-row order-service-note" id="order-service-note" hidden>
      <p class="order-service-note-title">{{ tr("Service Note") }}</p>
      <div class="order-service-note-content" id="order-service-note-content"></div>
    </aside>
    <aside class="order-comments-guide full-row" id="order-comments-guide" hidden>
      <p class="order-comments-guide-title">Cài đặt như hình trước khi mua cmt:</p>
      <p class="order-comments-guide-path">Vào mục: Tôi =&gt; Quyền riêng tư =&gt; Bình luận:</p>
      <img src="{{ url_for('serve_image_file', filename='comment.jpg') }}" alt="Huong dan cai dat binh luan" loading="lazy" />
    </aside>
  </form>
</section>

<section class="panel" data-category-scope data-category-default="{{ order_categories[0]['key'] if order_categories else 'all' }}">
  <h2>{{ tr("Your Orders") }}</h2>

  {% if not orders %}
    <p class="muted">{{ tr("No orders yet.") }}</p>
  {% else %}
  {% if order_categories %}
  <div class="category-tab-list">
    {% for category in order_categories %}
    <button type="button" class="category-tab-btn{% if loop.first %} is-active{% endif %}" data-category-tab="{{ category['key'] }}">{{ category['label_display'] }}</button>
    {% endfor %}
  </div>
  {% endif %}

  <p id="orders-runtime-note" class="live-note">{{ tr("Live Runtime: updating every {seconds} seconds.", seconds=runtime_refresh_seconds) }}</p>
  <div class="table-shell">
    <table
      id="orders-runtime-table"
      data-runtime-url="{{ url_for('orders_runtime') }}"
      data-refresh-interval-ms="{{ runtime_refresh_interval_ms }}"
      data-msg-polling="{{ tr('Live Runtime: updating every {seconds} seconds.', seconds=runtime_refresh_seconds) }}"
      data-msg-updated="{{ tr('Runtime updated at {time}.', time='{time}') }}"
      data-msg-failed="{{ tr('Runtime update failed: {error}', error='{error}') }}"
      data-msg-offline="{{ tr('Runtime update unavailable. Showing cached values.') }}"
    >
      <thead>
        <tr>
          <th>{{ tr("Order Code") }}</th>
          <th>{{ tr("Service") }}</th>
          <th>Username</th>
          <th>Trạng Thái</th>
          <th>{{ tr("Start Count") }}</th>
          <th>{{ tr("Purchased Quantity") }}</th>
          <th>{{ tr("Increased") }}</th>
          <th>{{ tr("Remains") }}</th>
          <th>{{ tr("Price") }}</th>
          <th>{{ tr("Purchase Date") }}</th>
        </tr>
      </thead>
      <tbody>
        {% for order in orders %}
        <tr data-category-filter-row="{{ order['category_key'] }}">
          <td>
            <span data-order-id="{{ order['id'] }}" data-runtime-field="provider_order_id">{{ order['provider_order_id'] or '-' }}</span>
          </td>
          <td>
            <span>{{ order['service_name'] or ('Service ' ~ order['service_id']) }}</span>
          </td>
          <td>
            <a
              class="order-user-link{% if not (order['provider_user_link'] or '')|trim %} no-link{% endif %}"
              {% if (order['provider_user_link'] or '')|trim %}
                href="{{ order['provider_user_link'] }}"
                target="_blank"
                rel="noopener noreferrer"
              {% endif %}
              data-order-id="{{ order['id'] }}"
              data-runtime-field="provider_user"
              data-runtime-link-field="provider_user_link"
            >{{ order['provider_user'] or '-' }}</a>
          </td>
          <td>
            <span data-order-id="{{ order['id'] }}" data-runtime-field="provider_status_raw">{{ order['provider_status_raw'] or '-' }}</span>
          </td>
          <td>
            <span data-order-id="{{ order['id'] }}" data-runtime-field="start_count">{{ order['start_count'] or '-' }}</span>
          </td>
          <td>
            <span data-order-id="{{ order['id'] }}" data-runtime-field="quantity">{{ order['quantity'] }}</span>
          </td>
          <td>
            {% if order['remains'] %}
              {% set increased_preview = order['quantity'] - (order['remains']|int) %}
              <span data-order-id="{{ order['id'] }}" data-runtime-field="increased">{{ 0 if increased_preview < 0 else increased_preview }}</span>
            {% else %}
              <span data-order-id="{{ order['id'] }}" data-runtime-field="increased">0</span>
            {% endif %}
          </td>
          <td><span data-order-id="{{ order['id'] }}" data-runtime-field="remains">{{ order['remains'] or '-' }}</span></td>
          <td>{{ order['local_charge_tic']|ticfmt }} TIC</td>
          <td>{{ order['created_at']|dtfmt }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endif %}
</section>

  {% if services or orders %}
  <script src="{{ url_for('static', filename='service-category-tabs.js', v='20260311e') }}"></script>
  {% endif %}
  {% if services %}
  <script src="{{ url_for('static', filename='service-price-mobile-tabs.js', v='20260311b') }}"></script>
  <script src="{{ url_for('static', filename='service-price-row-limit.js', v='20260311a') }}"></script>
  <script src="{{ url_for('static', filename='order-fee-preview.js', v='20260312a') }}"></script>
  {% endif %}
  {% if orders %}
  <script src="{{ url_for('static', filename='order-runtime.js', v='20260311c') }}"></script>
  {% endif %}
{% endblock %}