{% extends 'base.html' %}
{% from '_icons.html' import icon %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
  <div><h1 class="page-title mb-1">Yeni Ödeme / Tahsilat</h1><div class="text-secondary">İşlemi açık faturalara dağıtarak tek adımda kaydedin</div></div>
  <a class="btn btn-outline-secondary" href="{{ url_for('main.payments') }}">{{ icon('back', 18) }} Listeye Dön</a>
</div>
<div class="card p-4"><form method="post" id="paymentForm">
  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
  <div class="form-section mb-3">
    <div class="form-section-title"><span class="section-icon">{{ icon('wallet', 19) }}</span>İşlem Bilgileri</div>
    <div class="row g-3">
      <div class="col-md-6"><label class="form-label required">Kurum</label><select class="form-select" name="institution_id" id="institution" required><option value="">Kurum seçiniz</option>{% for item in institutions %}<option value="{{ item.id }}" {% if payment.institution_id == item.id %}selected{% endif %}>{{ item.name }}</option>{% endfor %}</select></div>
      <div class="col-md-3"><label class="form-label required">İşlem tarihi</label><input class="form-control" type="date" name="transaction_date" value="{{ payment.transaction_date.isoformat() }}" required></div>
      <div class="col-md-3"><label class="form-label required">İşlem yönü</label><select class="form-select" name="direction" id="direction"><option value="PAYMENT" {% if payment.direction=='PAYMENT' %}selected{% endif %}>Ödeme · Borcu azaltır</option><option value="COLLECTION" {% if payment.direction=='COLLECTION' %}selected{% endif %}>Tahsilat · Alacağı azaltır</option></select></div>
      <div class="col-md-3"><label class="form-label required">Ödeme aracı</label><select class="form-select" name="method" id="method"><option value="CASH_ACCOUNT" {% if payment.method=='CASH_ACCOUNT' %}selected{% endif %}>Nakit / Hesap</option><option value="CHECK" {% if payment.method=='CHECK' %}selected{% endif %}>Çek</option><option value="NOTE" {% if payment.method=='NOTE' %}selected{% endif %}>Senet</option></select></div>
      <div class="col-md-3"><label class="form-label required">Tutar</label><input class="form-control fw-semibold" name="amount" id="amount" inputmode="decimal" value="{{ payment.amount if payment.amount else '' }}" placeholder="0,00" required></div>
      <div class="col-md-3"><label class="form-label required">Para birimi</label><input class="form-control text-uppercase" name="currency" id="currency" value="{{ payment.currency or 'TRY' }}" maxlength="3" required></div>
      <div class="col-md-3 cash-field"><label class="form-label required">Kasa / Hesap</label><select class="form-select" name="account_id"><option value="">Hesap seçiniz</option>{% for item in accounts %}<option value="{{ item.id }}" {% if payment.account_id==item.id %}selected{% endif %}>{{ item.name }}</option>{% endfor %}</select></div>
    </div>
    <div class="alert alert-light border mt-3 mb-0 d-flex justify-content-between align-items-center flex-wrap gap-2"><span class="text-secondary">Seçime uygun bekleyen fatura toplamı</span><strong id="openTotal">0,00 TRY</strong></div>
  </div>
  <div class="form-section instrument-field d-none mb-3">
    <div class="form-section-title"><span class="section-icon">{{ icon('invoice', 19) }}</span>Çek / Senet Bilgileri</div>
    <div class="row g-3">
      <div class="col-md-4"><label class="form-label required">Belge no</label><input class="form-control" name="document_number" value="{{ payment.document_number or '' }}" placeholder="Belge numarası"></div>
      <div class="col-md-4"><label class="form-label">Banka / Keşideci</label><input class="form-control" name="bank_drawer" value="{{ payment.bank_drawer or '' }}" placeholder="Banka veya keşideci"></div>
      <div class="col-md-4"><label class="form-label required">Vade</label><input class="form-control" type="date" name="due_date" value="{{ payment.due_date.isoformat() if payment.due_date else '' }}"></div>
      <div class="col-md-4"><label class="form-label">Durum</label><select class="form-select" name="instrument_status"><option value="PENDING">Bekliyor</option><option value="COMPLETED">Ödendi / Tahsil edildi</option><option value="RETURNED">İade</option></select></div>
    </div>
  </div>
  <div class="form-section mb-3">
    <div class="d-flex justify-content-between align-items-start gap-3 mb-3">
      <div class="form-section-title mb-0"><span class="section-icon">{{ icon('invoice', 19) }}</span>Fatura Dağıtımı</div>
      <div class="form-check form-switch"><input class="form-check-input" type="checkbox" id="autoAllocation" name="{{ 'allocation_mode' if allocation_mode=='auto' else '' }}" value="auto" {% if allocation_mode=='auto' %}checked{% endif %}><label class="form-check-label fw-semibold" for="autoAllocation">Otomatik dağıt</label></div>
      <input type="hidden" name="allocation_mode" id="manualMode" value="manual" {% if allocation_mode=='auto' %}disabled{% endif %}>
    </div>
    <p class="text-secondary" id="allocationHelp">{{ 'Tutar, vadesi en yakın açık faturadan başlayarak otomatik dağıtılır.' if allocation_mode=='auto' else 'Her faturaya dağıtılacak tutarı girin; toplam işlem tutarına eşit olmalıdır.' }}</p>
    <div class="table-responsive border rounded-3"><table class="table align-middle mb-0"><thead><tr><th>Fatura</th><th>Tarih / Vade</th><th>Açık Tutar</th><th style="width:220px">Dağıtılacak</th></tr></thead><tbody id="invoiceRows"><tr><td colspan="4" class="empty-state">Önce kurum ve işlem yönünü seçiniz.</td></tr></tbody></table></div>
    <div class="d-flex justify-content-end mt-2"><span class="text-secondary me-2">Dağıtım toplamı:</span><strong id="allocationTotal">0,00 TRY</strong></div>
  </div>
  <div class="form-section"><div class="form-section-title"><span class="section-icon">{{ icon('audit', 19) }}</span>Açıklama</div><textarea class="form-control" rows="3" name="description" placeholder="İşlemle ilgili dahili açıklama">{{ payment.description or '' }}</textarea></div>
  <div class="mt-4 d-flex gap-2"><button class="btn btn-brand" id="saveButton" disabled>{{ icon('save', 18) }} İşlem ve Dağıtımı Kaydet</button><a class="btn btn-light" href="{{ url_for('main.payments') }}">Vazgeç</a></div>
</form></div>
{% endblock %}
{% block scripts %}<script>
(() => {
  const institution = document.getElementById('institution'), direction = document.getElementById('direction');
  const currency = document.getElementById('currency'), amount = document.getElementById('amount');
  const method = document.getElementById('method'), automatic = document.getElementById('autoAllocation');
  const manualMode = document.getElementById('manualMode'), rowsBody = document.getElementById('invoiceRows');
  const saveButton = document.getElementById('saveButton'), oldManual = {{ manual_allocations|tojson }};
  let invoices = [];
  const numberValue = value => { const text = String(value || '').trim(); return Number(text.includes(',') ? text.replace(/\./g, '').replace(',', '.') : text) || 0; };
  const moneyText = value => new Intl.NumberFormat('tr-TR', {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(value);
  const amountValue = () => numberValue(amount.value);
  function paymentFields() { const instrument = method.value !== 'CASH_ACCOUNT'; document.querySelectorAll('.instrument-field').forEach(x => x.classList.toggle('d-none', !instrument)); document.querySelectorAll('.cash-field').forEach(x => x.classList.toggle('d-none', instrument)); }
  function proposedAmounts() { let remaining = amountValue(); return invoices.map(item => { const value = Math.max(0, Math.min(remaining, Number(item.open_amount))); remaining -= value; return value; }); }
  function updateValidity() {
    let distributed = 0;
    if (automatic.checked) distributed = proposedAmounts().reduce((sum, value) => sum + value, 0);
    else rowsBody.querySelectorAll('.allocation-input').forEach(input => distributed += numberValue(input.value));
    document.getElementById('allocationTotal').textContent = `${moneyText(distributed)} ${currency.value.toUpperCase()}`;
    saveButton.disabled = amountValue() <= 0 || Math.abs(distributed - amountValue()) > 0.005;
  }
  function renderRows() {
    if (!invoices.length) { rowsBody.innerHTML = '<tr><td colspan="4" class="empty-state">Bu yön ve para biriminde açık fatura yok.</td></tr>'; updateValidity(); return; }
    const proposed = proposedAmounts();
    rowsBody.innerHTML = invoices.map((item, index) => {
      const oldValue = numberValue(oldManual[String(item.id)] || '');
      const value = automatic.checked ? proposed[index] : oldValue;
      const control = automatic.checked ? `<span class="fw-semibold">${moneyText(value)} ${currency.value.toUpperCase()}</span>` : `<input class="form-control allocation-input" name="invoice_${item.id}" inputmode="decimal" value="${value ? value.toFixed(2).replace('.', ',') : ''}" placeholder="0,00">`;
      return `<tr><td>${item.number}</td><td>${item.date}${item.due_date ? ' / ' + item.due_date : ''}</td><td>${moneyText(Number(item.open_amount))} ${currency.value.toUpperCase()}</td><td>${control}</td></tr>`;
    }).join('');
    rowsBody.querySelectorAll('.allocation-input').forEach(input => input.addEventListener('input', updateValidity)); updateValidity();
  }
  async function loadContext() {
    if (!institution.value) { invoices = []; document.getElementById('openTotal').textContent = `0,00 ${currency.value.toUpperCase()}`; renderRows(); return; }
    const query = new URLSearchParams({institution_id: institution.value, direction: direction.value, currency: currency.value});
    const response = await fetch(`{{ url_for('main.payment_context') }}?${query}`, {headers: {'Accept': 'application/json'}});
    const data = await response.json(); invoices = data.invoices || [];
    document.getElementById('openTotal').textContent = `${moneyText(Number(data.open_total))} ${currency.value.toUpperCase()}`; renderRows();
  }
  automatic.addEventListener('change', () => {
    automatic.name = automatic.checked ? 'allocation_mode' : ''; manualMode.disabled = automatic.checked;
    document.getElementById('allocationHelp').textContent = automatic.checked ? 'Tutar, vadesi en yakın açık faturadan başlayarak otomatik dağıtılır.' : 'Her faturaya dağıtılacak tutarı girin; toplam işlem tutarına eşit olmalıdır.'; renderRows();
  });
  [institution, direction].forEach(input => input.addEventListener('change', loadContext)); currency.addEventListener('change', loadContext);
  amount.addEventListener('input', renderRows); method.addEventListener('change', paymentFields);
  paymentFields(); loadContext();
})();
</script>{% endblock %}