{% extends "pos/base.html" %}
{% load static %}
{% block title %}{% if obj %}Edit Currency — {{ obj.code }}{% else %}Add Currency{% endif %}{% endblock %}

{% block stylesheets %}
<style>
  .form-card     { max-width: 560px; margin: 0 auto; }
  .field-error   { color: #dc3545; font-size: .82rem; margin-top: 3px; }
  .rate-explain  { background: #f0f4ff; border-left: 3px solid #0d6efd;
                   padding: 10px 14px; border-radius: 4px; font-size: .83rem; }
  .base-warning  { background: #fff8e1; border-left: 3px solid #ffc107;
                   padding: 10px 14px; border-radius: 4px; font-size: .83rem; }
  .live-preview  { background: #e8f5e9; border: 1px solid #c8e6c9;
                   border-radius: 6px; padding: 10px 14px; font-size: .85rem; }
</style>
{% endblock %}

{% block content %}
<div class="form-card">
  <div class="d-flex align-items-center mb-3 gap-2">
    <a href="{% url 'pos:currency_list' %}" class="btn btn-sm btn-outline-secondary">
      <i class="fas fa-arrow-left"></i>
    </a>
    <div>
      <h5 class="mb-0">
        <i class="fas fa-coins me-2 text-primary"></i>
        {% if obj %}Edit Currency — {{ obj.code }}{% else %}Add Currency{% endif %}
      </h5>
      <small class="text-muted">
        {% if obj %}Update exchange rate and settings{% else %}Add a new currency for multi-currency transactions{% endif %}
      </small>
    </div>
  </div>

  <div class="card border-0 shadow-sm">
    <div class="card-body p-4">
      <form method="post" id="currencyForm" autocomplete="off">
        {% csrf_token %}

        <!-- Code -->
        <div class="mb-3">
          <label class="form-label fw-semibold">
            Currency Code <span class="text-danger">*</span>
          </label>
          <input type="text"
                 name="code"
                 id="id_code"
                 class="form-control {% if errors.code %}is-invalid{% endif %}"
                 placeholder="e.g. USD, AED, EUR, GBP"
                 maxlength="10"
                 style="text-transform:uppercase; font-weight:700; letter-spacing:1px;"
                 value="{{ form.code|default:'' }}">
          {% if errors.code %}
            <div class="field-error">{{ errors.code }}</div>
          {% endif %}
          <small class="text-muted">ISO 4217 code, e.g. USD · AED · EUR · GBP · PKR</small>
        </div>

        <!-- Name -->
        <div class="mb-3">
          <label class="form-label fw-semibold">
            Currency Name <span class="text-danger">*</span>
          </label>
          <input type="text"
                 name="name"
                 id="id_name"
                 class="form-control {% if errors.name %}is-invalid{% endif %}"
                 placeholder="e.g. US Dollar, UAE Dirham"
                 maxlength="100"
                 value="{{ form.name|default:'' }}">
          {% if errors.name %}
            <div class="field-error">{{ errors.name }}</div>
          {% endif %}
        </div>

        <!-- Symbol -->
        <div class="mb-3">
          <label class="form-label fw-semibold">Symbol</label>
          <input type="text"
                 name="symbol"
                 id="id_symbol"
                 class="form-control"
                 placeholder="e.g. $, AED, €, £, ₨"
                 maxlength="10"
                 style="font-size:1.1rem;"
                 value="{{ form.symbol|default:'' }}">
          <small class="text-muted">Symbol shown on invoices and dropdowns</small>
        </div>

        <!-- Exchange Rate -->
        <div class="mb-3" id="rate-section">
          <label class="form-label fw-semibold">
            Exchange Rate <span class="text-danger">*</span>
          </label>
          <input type="number"
                 name="exchange_rate"
                 id="id_exchange_rate"
                 class="form-control {% if errors.exchange_rate %}is-invalid{% endif %}"
                 placeholder="e.g. 280.50"
                 step="0.000001"
                 min="0.000001"
                 value="{{ form.exchange_rate|default:'1' }}">
          {% if errors.exchange_rate %}
            <div class="field-error">{{ errors.exchange_rate }}</div>
          {% endif %}

          <div class="rate-explain mt-2">
            <i class="fas fa-info-circle me-1 text-primary"></i>
            <span id="rate-hint">
              Enter how many <strong>base currency units</strong> = 1 unit of this currency.<br>
              e.g. If 1 USD = 280 PKR → enter <strong>280</strong>
            </span>
          </div>

          <!-- Live preview -->
          <div class="live-preview mt-2" id="live-preview" style="display:none">
            <i class="fas fa-calculator me-1 text-success"></i>
            <span id="preview-text"></span>
          </div>
        </div>

        <!-- Is Base -->
        <div class="mb-3">
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox"
                   name="is_base" id="id_is_base" role="switch"
                   {% if form.is_base == 'on' or obj.is_base %}checked{% endif %}>
            <label class="form-check-label fw-semibold" for="id_is_base">
              Set as Base Currency
            </label>
          </div>
          <div class="base-warning mt-2" id="base-warning"
               style="{% if not form.is_base and not obj.is_base %}display:none{% endif %}">
            <i class="fas fa-exclamation-triangle me-1 text-warning"></i>
            Setting this as BASE will <strong>demote the current base currency</strong>.
            The exchange rate for base is always <strong>1.0</strong> and will be auto-set.
          </div>
        </div>

        <!-- Is Active -->
        <div class="mb-4">
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox"
                   name="is_active" id="id_is_active" role="switch"
                   {% if form.is_active != 'off' and obj.is_active != False %}checked{% endif %}
                   {% if not obj and not form %}checked{% endif %}>
            <label class="form-check-label fw-semibold" for="id_is_active">
              Active
            </label>
          </div>
          <small class="text-muted">Inactive currencies won't appear in transaction dropdowns.</small>
        </div>

        <hr class="my-3">

        <div class="d-flex gap-2">
          <button type="submit" class="btn btn-primary px-4">
            <i class="fas fa-save me-1"></i>
            {% if obj %}Update Currency{% else %}Save Currency{% endif %}
          </button>
          <a href="{% url 'pos:currency_list' %}" class="btn btn-outline-secondary px-4">
            Cancel
          </a>
        </div>

      </form>
    </div>
  </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
$(function(){

  const $code    = $('#id_code');
  const $rate    = $('#id_exchange_rate');
  const $isBase  = $('#id_is_base');
  const $preview = $('#live-preview');
  const $preText = $('#preview-text');
  const $rateSec = $('#rate-section');
  const $baseWarn= $('#base-warning');

  // Force uppercase on code
  $code.on('input', function(){
    const pos = this.selectionStart;
    this.value = this.value.toUpperCase();
    this.setSelectionRange(pos, pos);
    updatePreview();
  });

  // Live preview
  $rate.on('input', updatePreview);

  function updatePreview(){
    const code = $code.val().trim() || 'XXX';
    const rate = parseFloat($rate.val()) || 0;
    if (rate > 0 && !$isBase.is(':checked')){
      $preview.show();
      $preText.html(`1 <strong>${code}</strong> = <strong>${rate.toFixed(4)}</strong> base currency units`);
    } else {
      $preview.hide();
    }
  }

  // Base currency toggle
  $isBase.on('change', function(){
    if ($(this).is(':checked')){
      $baseWarn.show();
      $rate.val('1').prop('readonly', true);
      $preview.hide();
    } else {
      $baseWarn.hide();
      $rate.prop('readonly', false);
      updatePreview();
    }
  });

  // Init state
  if ($isBase.is(':checked')){
    $rate.prop('readonly', true);
    $preview.hide();
  } else {
    updatePreview();
  }

  // Form submit validation
  $('#currencyForm').on('submit', function(e){
    const code = $code.val().trim();
    const name = $('#id_name').val().trim();
    const rate = parseFloat($rate.val()) || 0;

    if (!code){ e.preventDefault(); Swal.fire('Error','Currency code is required.','error'); return; }
    if (!name){ e.preventDefault(); Swal.fire('Error','Currency name is required.','error'); return; }
    if (rate <= 0 && !$isBase.is(':checked')){
      e.preventDefault();
      Swal.fire('Error','Exchange rate must be a positive number.','error');
      return;
    }
  });
});
</script>
{% endblock %}