{# templates/transactions/staff_payment_add.html #}
{% extends "pos/base.html" %}
{% load static %}
{% block content %}
<h1>{% if is_edit %}Edit{% else %}New{% endif %} Staff Payout</h1>

<form method="post" class="form">
  {% csrf_token %}
  <div class="form-group">
    <label for="staff_id">Staff</label>
    <select id="staff_id" name="staff_id" class="form-control">
      <option value="">Select staff…</option>
      {% for s in staff_list %}
      <option value="{{ s.t_id }}"
        {% if payment and payment.name == s.t_id %}selected{% endif %}>
        {{ s.name }}
      </option>
      {% endfor %}
    </select>
  </div>

  <div class="form-group">
    <label for="amount">Amount</label>
    <input type="number" step="0.01" name="amount" id="amount" class="form-control"
           value="{{ payment.amount_transaction|default_if_none:'' }}">
  </div>

  <div class="form-group">
    <label for="date">Date</label>
    <input type="date" name="date" id="date" class="form-control"
           value="{{ payment.transaction_date|default:today }}">
  </div>

  <div class="form-group">
    <label>Payment Via</label><br>
    <div class="form-check form-check-inline" style="display:none">
      <input class="form-check-input" type="radio" name="cash_type" id="cash" value="Cash"
             {% if payment and payment.bank_id == 0 %}checked{% endif %}>
      <label class="form-check-label" for="cash">Cash</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="cash_type" id="bank" value="Bank" checked>
      <label class="form-check-label" for="bank">Bank</label>
    </div>
  </div>

  <div class="form-group" id="bank-field">
    <label for="bank_account">Bank A/c</label>
    <select id="bank_account" name="bank_account" class="form-control">
      {% for b in bank_accounts %}
      <option value="{{ b.t_id }}"
        {% if payment and payment.bank_id == b.t_id %}selected{% endif %}>
        {{ b.name }} (Bal: {{ b.balance|floatformat:2 }})
      </option>
      {% endfor %}
    </select>
  </div>

  <div class="form-group">
    <label for="description">Description (optional)</label>
    <input type="text" name="description" id="description" class="form-control"
           value="{{ payment.bill_title_descp|default:'' }}">
  </div>

  <button type="submit" class="btn btn-primary">{% if is_edit %}Update{% else %}Save{% endif %}</button>
  <a href="{% url 'transactions:staff_payment_list' %}" class="btn btn-secondary">Cancel</a>
</form>

{% endblock %}

{% block javascripts %}


<script>
  // Show/hide bank selector
  document.querySelectorAll('input[name="cash_type"]').forEach(radio => {
    radio.addEventListener('change', e => {
      document.getElementById('bank-field').style.display = (e.target.value==='Bank') ? 'block' : 'none';
    });
  });

  $(function(){
    const today = new Date().toISOString().split("T")[0];
    const $trxDate = $('#date');

    if (!$trxDate.val()) $trxDate.val(today);

  });


</script>
{% endblock %}