{% extends "pos/base.html" %}
{% load static %}
{% block title %}Currency Management{% endblock %}

{% block stylesheets %}
<style>
  .badge-base   { background:#0d6efd; color:#fff; font-size:.75rem; padding:3px 8px; border-radius:20px; }
  .badge-active { background:#198754; color:#fff; font-size:.75rem; padding:3px 8px; border-radius:20px; }
  .badge-off    { background:#6c757d; color:#fff; font-size:.75rem; padding:3px 8px; border-radius:20px; }
  .rate-badge   { background:#fff3cd; color:#664d03; border:1px solid #ffecb5;
                  font-size:.8rem; padding:2px 8px; border-radius:12px; font-weight:600; }
  .symbol-badge { width:34px; height:34px; display:inline-flex; align-items:center;
                  justify-content:center; background:#e9ecef; border-radius:50%;
                  font-size:1rem; font-weight:700; color:#495057; }
  .curr-code    { font-size:1rem; font-weight:700; color:#212529; }
  .curr-name    { font-size:.82rem; color:#6c757d; }
  .action-btns .btn { font-size:.8rem; padding:3px 10px; }
  .empty-state  { padding:60px 20px; text-align:center; color:#adb5bd; }
</style>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <div>
    <h5 class="mb-0"><i class="fas fa-coins me-2 text-primary"></i>Currency Management</h5>
    <small class="text-muted">Manage currencies for multi-currency transactions</small>
  </div>
  <a href="{% url 'pos:currency_add' %}" class="btn btn-primary btn-sm">
    <i class="fas fa-plus me-1"></i>Add Currency
  </a>
</div>

{% if messages %}
  {% for msg in messages %}
    <div class="alert alert-{{ msg.tags|default:'info' }} alert-dismissible fade show py-2" role="alert">
      {{ msg }}
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
  {% endfor %}
{% endif %}

{% if currencies %}
<div class="card shadow-sm border-0">
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-hover mb-0">
        <thead class="table-light">
          <tr>
            <th style="width:50px">#</th>
            <th>Currency</th>
            <th>Symbol</th>
            <th>Exchange Rate</th>
            <th>Status</th>
            <th class="text-end">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for c in currencies %}
          <tr id="row-{{ c.pk }}">
            <td class="text-muted small align-middle">{{ forloop.counter }}</td>

            <td class="align-middle">
              <div class="curr-code">{{ c.code }}</div>
              <div class="curr-name">{{ c.name }}</div>
            </td>

            <td class="align-middle">
              <span class="symbol-badge">{{ c.symbol|default:"?" }}</span>
            </td>

            <td class="align-middle">
              {% if c.is_base %}
                <span class="rate-badge">1.000000 &nbsp;<small class="text-muted">(Base)</small></span>
              {% else %}
                <span class="rate-badge">
                  1 {{ c.code }} = {{ c.exchange_rate }} base
                </span>
              {% endif %}
            </td>

            <td class="align-middle">
              {% if c.is_base %}
                <span class="badge-base">BASE</span>
              {% endif %}
              {% if c.is_active %}
                <span class="badge-active ms-1">Active</span>
              {% else %}
                <span class="badge-off ms-1">Inactive</span>
              {% endif %}
            </td>

            <td class="text-end align-middle action-btns">

              {% if not c.is_base %}
              <button class="btn btn-outline-secondary btn-sm me-1 btn-set-base"
                      data-pk="{{ c.pk }}"
                      data-code="{{ c.code }}"
                      title="Set as Base Currency">
                <i class="fas fa-star"></i>
              </button>
              {% else %}
              <button class="btn btn-outline-warning btn-sm me-1" disabled title="Already Base">
                <i class="fas fa-star text-warning"></i>
              </button>
              {% endif %}

              <a href="{% url 'pos:currency_edit' c.pk %}"
                 class="btn btn-outline-primary btn-sm me-1"
                 title="Edit">
                <i class="fas fa-edit"></i>
              </a>

              {% if not c.is_base %}
              <form method="post"
                    action="{% url 'pos:currency_delete' c.pk %}"
                    class="d-inline form-delete-currency"
                    data-code="{{ c.code }}">
                {% csrf_token %}
                <button type="submit" class="btn btn-outline-danger btn-sm" title="Delete">
                  <i class="fas fa-trash"></i>
                </button>
              </form>
              {% else %}
              <button class="btn btn-outline-danger btn-sm" disabled title="Cannot delete base currency">
                <i class="fas fa-trash"></i>
              </button>
              {% endif %}

            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Info Card -->
<div class="alert alert-info border-0 mt-3 py-2" style="font-size:.84rem;">
  <i class="fas fa-info-circle me-1"></i>
  <strong>How it works:</strong>
  The <strong>BASE</strong> currency is always used for internal storage.
  All transactions entered in other currencies are automatically converted
  to base before saving. Exchange rates must be updated manually.
</div>

{% else %}
<div class="card border-0 shadow-sm">
  <div class="card-body empty-state">
    <i class="fas fa-coins fa-3x mb-3 d-block" style="color:#dee2e6"></i>
    <h6 class="text-muted">No Currencies Configured</h6>
    <p class="small text-muted mb-3">Add your base currency first, then add additional currencies for multi-currency transactions.</p>
    <a href="{% url 'pos:currency_add' %}" class="btn btn-primary btn-sm">
      <i class="fas fa-plus me-1"></i>Add First Currency
    </a>
  </div>
</div>
{% endif %}

{% endblock %}

{% block javascripts %}
<script>
$(function(){
  const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]')?.value
    || $('input[name=csrfmiddlewaretoken]').first().val()
    || '';

  // ── Set Base Currency ─────────────────────────────────────────────────────
  $(document).on('click', '.btn-set-base', function(){
    const pk   = $(this).data('pk');
    const code = $(this).data('code');
    const $btn = $(this);

    Swal.fire({
      title:             `Set ${code} as Base Currency?`,
      text:              'This will make all new transactions default to this currency. Existing data is not affected.',
      icon:              'question',
      showCancelButton:  true,
      confirmButtonText: 'Yes, Set as Base',
      confirmButtonColor:'#0d6efd',
    }).then(result => {
      if (!result.isConfirmed) return;

      $.ajax({
        url:  `/pos/ajax/currencies/set-base/${pk}/`,
        type: 'POST',
        headers: { 'X-CSRFToken': csrftoken },
        success: function(resp){
          if (resp.success){
            Swal.fire({ icon:'success', title:'Done!', text: resp.message, timer:1500, showConfirmButton:false })
              .then(() => location.reload());
          }
        },
        error: function(xhr){
          Swal.fire('Error', xhr.responseJSON?.error || 'Failed to set base currency.', 'error');
        }
      });
    });
  });

  // ── Delete Confirmation ───────────────────────────────────────────────────
  $(document).on('submit', '.form-delete-currency', function(e){
    e.preventDefault();
    const $form = $(this);
    const code  = $form.data('code');

    Swal.fire({
      title:             `Delete "${code}"?`,
      text:              'This will permanently remove this currency. This cannot be undone.',
      icon:              'warning',
      showCancelButton:  true,
      confirmButtonText: 'Delete',
      confirmButtonColor:'#dc3545',
    }).then(result => {
      if (result.isConfirmed) $form.off('submit').submit();
    });
  });
});
</script>
{% endblock %}