{% 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">Gösterge Paneli</h1><div class="text-secondary">Bugünkü cari durumunuz</div></div>
  <div class="d-flex gap-2 no-print">
    {% if current_user.has_permission('invoices.manage') %}<a href="{{ url_for('main.invoice_new') }}" class="btn btn-outline-secondary">{{ icon('invoice', 18) }} Fatura Ekle</a>{% endif %}
    {% if current_user.has_permission('payments.manage') %}<a href="{{ url_for('main.payment_new') }}" class="btn btn-brand">{{ icon('plus', 18) }} Ödeme / Tahsilat</a>{% endif %}
  </div>
</div>
<div class="row g-3 mb-4">
  {% for currency, item in balances.items() %}
  <div class="col-sm-6 col-xl-3"><div class="card stat-card p-3"><div class="text-secondary">Toplam Alacak · {{ currency }}</div><div class="stat-value money-positive mt-2">{{ item.receivable|money }} {{ currency }}</div></div></div>
  <div class="col-sm-6 col-xl-3"><div class="card stat-card p-3"><div class="text-secondary">Toplam Borç · {{ currency }}</div><div class="stat-value money-negative mt-2">{{ item.payable|money }} {{ currency }}</div></div></div>
  <div class="col-sm-6 col-xl-3"><div class="card stat-card p-3"><div class="text-secondary">Net Bakiye · {{ currency }}</div><div class="stat-value mt-2">{{ item.net|money }} {{ currency }}</div></div></div>
  <div class="col-sm-6 col-xl-3"><div class="card stat-card p-3"><div class="text-secondary">Gecikmiş · {{ currency }}</div><div class="stat-value text-warning mt-2">{{ overdue.get(currency, 0)|money }} {{ currency }}</div></div></div>
  {% else %}
  <div class="col-12"><div class="alert alert-info">Henüz finansal kayıt yok. Kurum ve fatura ekleyerek başlayabilirsiniz.</div></div>
  {% endfor %}
</div>
<div class="row g-3 mb-4">
  <div class="col-xl-6"><div class="card dashboard-chart-card p-4 h-100">
    <div class="mb-3"><h2 class="h5 mb-1">Satış Faturaları</h2><div class="text-secondary small">Son 6 ayda düzenlenen giden faturalar · TRY</div></div>
    <div class="dashboard-chart-wrap"><canvas id="salesChart"></canvas></div>
  </div></div>
  <div class="col-xl-6"><div class="card dashboard-chart-card p-4 h-100">
    <div class="mb-3"><h2 class="h5 mb-1">Alış Faturaları</h2><div class="text-secondary small">Son 6 ayda gelen tedarikçi faturaları · TRY</div></div>
    <div class="dashboard-chart-wrap"><canvas id="purchaseChart"></canvas></div>
  </div></div>
</div>
<div class="row g-3 mb-4">
  <div class="col-xl-8"><div class="card dashboard-chart-card p-4 h-100">
    <div class="mb-3"><h2 class="h5 mb-1">Nakit Hareketi</h2><div class="text-secondary small">Tahsilatlar ile yapılan ödemelerin aylık karşılaştırması · TRY</div></div>
    <div class="dashboard-chart-wrap dashboard-chart-wrap-compact"><canvas id="cashFlowChart"></canvas></div>
  </div></div>
  <div class="col-xl-4"><div class="card p-3 h-100"><h2 class="h6">Yaklaşan Çek / Senet Vadeleri</h2>
    <div class="list-group list-group-flush">
      {% for item in upcoming %}<a href="{{ url_for('main.payment_detail', payment_id=item.id) }}" class="list-group-item px-0 d-flex justify-content-between"><span>{{ item.institution.name }}<small class="d-block text-secondary">{{ item.due_date|date_tr }}</small></span><strong>{{ item.amount|money }} {{ item.currency }}</strong></a>
      {% else %}<div class="empty-state py-4">Önümüzdeki 30 gün için kayıt yok.</div>{% endfor %}
    </div>
  </div></div>
</div>
<div class="row g-3">
  <div class="col-lg-6"><div class="card p-3"><h2 class="h6">En Yüksek Alacaklar</h2>
    {% for institution, currency, item in top_receivables %}<div class="d-flex justify-content-between border-bottom py-2"><a href="{{ url_for('main.institution_detail', institution_id=institution.id) }}">{{ institution.name }}</a><strong class="money-positive">{{ item.receivable|money }} {{ currency }}</strong></div>{% else %}<div class="empty-state">Kayıt yok.</div>{% endfor %}
  </div></div>
  <div class="col-lg-6"><div class="card p-3"><h2 class="h6">En Yüksek Borçlar</h2>
    {% for institution, currency, item in top_payables %}<div class="d-flex justify-content-between border-bottom py-2"><a href="{{ url_for('main.institution_detail', institution_id=institution.id) }}">{{ institution.name }}</a><strong class="money-negative">{{ item.payable|money }} {{ currency }}</strong></div>{% else %}<div class="empty-state">Kayıt yok.</div>{% endfor %}
  </div></div>
</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='vendor/chartjs/chart.umd.min.js') }}"></script>
<script>
const labels = {{ chart_labels|safe }};
const moneyLabel = value => new Intl.NumberFormat('tr-TR', {style:'currency', currency:'TRY', maximumFractionDigits:0}).format(value);
function chartOptions({showLegend=false, offset=false}={}) {
  return {
    responsive:true, maintainAspectRatio:false,
    interaction:{mode:'index',intersect:false},
    plugins:{
      legend:{display:showLegend,position:'bottom'},
      tooltip:{callbacks:{label:ctx => `${ctx.dataset.label}: ${moneyLabel(ctx.parsed.y)}`}}
    },
    scales:{
      x:{offset,grid:{display:false}},
      y:{beginAtZero:true,ticks:{precision:0,callback:value => moneyLabel(value)},grid:{color:'rgba(107,123,130,.12)'}}
    }
  };
}
function lineChart(id, label, data, color, fillColor) {
  const canvas = document.getElementById(id);
  if (!canvas || !window.Chart) return;
  new Chart(canvas,{type:'line',data:{labels,datasets:[{label,data,borderColor:color,backgroundColor:fillColor,borderWidth:3,pointRadius:4,pointHoverRadius:6,tension:.32,fill:true}]},options:chartOptions()});
}
lineChart('salesChart','Satış',{{ sales_series|safe }},'#1f6f78','rgba(31,111,120,.13)');
lineChart('purchaseChart','Alış',{{ purchase_series|safe }},'#d08a31','rgba(208,138,49,.13)');
const cashCanvas = document.getElementById('cashFlowChart');
if (cashCanvas && window.Chart) new Chart(cashCanvas,{type:'bar',data:{labels,datasets:[
  {label:'Tahsilat',data:{{ collection_series|safe }},backgroundColor:'rgba(31,111,120,.82)',borderColor:'#1f6f78',borderWidth:1,borderRadius:6,categoryPercentage:.72,barPercentage:.82},
  {label:'Ödeme',data:{{ outgoing_payment_series|safe }},backgroundColor:'rgba(181,71,63,.78)',borderColor:'#b5473f',borderWidth:1,borderRadius:6,categoryPercentage:.72,barPercentage:.82}
]},options:chartOptions({showLegend:true,offset:true})});
</script>
{% endblock %}