{% extends "pos/base.html" %}
{% load static %}

{% block title %}Integration Config{% endblock %}
{% block stylesheets %}
  <link href="{% static 'vendor/datatables/dataTables.bootstrap4.min.css' %}" rel="stylesheet"/>
{% endblock %}

{% block heading %}Integration Configuration{% endblock %}

{% block content %}

<div class="mb-3">
  <form method="post" action="{% url 'integrate:config_list' %}" class="d-inline-block mr-1">
    {% csrf_token %}
    <button type="submit" name="load_tiktok_defaults" class="btn btn-info btn-sm">
      <i class="fas fa-download"></i> Load TikTok Defaults
    </button>
  </form>
  <a href="{% url 'integrate:dashboard' %}" class="btn btn-primary btn-sm ml-1">
    <i class="fas fa-chart-bar"></i> Dashboard
  </a>
  <a href="{% url 'integrate:shops_list' %}" class="btn btn-success btn-sm ml-1">
    <i class="fas fa-store"></i> Shops
  </a>
</div>

<!-- Platform filter -->
<form method="get" class="form-inline mb-3">
  <label class="mr-2">Platform:</label>
  <select name="platform" class="form-control form-control-sm mr-2">
    <option value="">All</option>
    <option value="TIKTOK" {% if platform_filter == 'TIKTOK' %}selected{% endif %}>TikTok</option>
    {% for p in all_platforms %}
      {% if p != 'TIKTOK' %}
        <option value="{{ p }}" {% if p == platform_filter %}selected{% endif %}>{{ p }}</option>
      {% endif %}
    {% endfor %}
  </select>
  <button type="submit" class="btn btn-primary btn-sm">Filter</button>
</form>

{% if not configs %}
  <div class="alert alert-info">
    Koi config nahi. <strong>"Load TikTok Defaults"</strong> button dabayein.
  </div>
{% else %}
  <table id="cfgTable" class="table table-bordered table-hover text-nowrap">
    <thead class="thead-light">
      <tr>
        <th>#</th><th>Platform</th><th>Key</th><th>Value</th><th>Description</th><th>Action</th>
      </tr>
    </thead>
    <tbody>
      {% for cfg in configs %}
      <tr>
        <td>{{ cfg.t_id }}</td>
        <td><span class="badge badge-primary">{{ cfg.platform }}</span></td>
        <td><code>{{ cfg.config_key }}</code></td>
        <td>
          <form method="post"
                action="{% url 'integrate:config_update' cfg.pk %}"
                class="form-inline" id="cfg-form-{{ cfg.pk }}">
            {% csrf_token %}
            <input type="hidden" name="platform_filter" value="{{ platform_filter }}">

            {% if cfg.config_key == 'post_on_in_transit' or cfg.config_key == 'auto_match_sku' or cfg.config_key == 'deduct_discount' or cfg.config_key == 'deduct_shipping' or cfg.config_key == 'deduct_platform_fee' or cfg.config_key == 'auto_post_refund' or cfg.config_key == 'deduct_penalty' %}
              <select name="config_value" class="form-control form-control-sm" style="width:100px;">
                <option value="True"  {% if cfg.config_value == 'True'  %}selected{% endif %}>True</option>
                <option value="False" {% if cfg.config_value == 'False' %}selected{% endif %}>False</option>
              </select>
            {% else %}
              <input type="text" name="config_value" value="{{ cfg.config_value }}"
                     class="form-control form-control-sm" style="width:280px;">
            {% endif %}
          </form>
        </td>
        <td><small>{{ cfg.description }}</small></td>
        <td>
          <button type="submit" form="cfg-form-{{ cfg.pk }}" class="btn btn-sm btn-primary">
            Update
          </button>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
{% endif %}

{% endblock %}

{% block javascripts %}
<script>
  $(document).ready(function(){
    $('#cfgTable').DataTable({ pageLength: 30, ordering: false });
  });
</script>
{% endblock %}