{% extends "base.html" %}
{% block title %}Dashboard – SPPG{% endblock %}
{% block page_title %}Dashboard{% endblock %}

{% block content %}
<style>
.badge-diajukan { background:#FEF3C7; color:#92400E; font-size:.72rem; padding:.25em .6em; border-radius:6px; font-weight:700; }
.badge-ajukan   { background:#D1FAE5; color:#065F46; font-size:.72rem; padding:.25em .6em; border-radius:6px; font-weight:700; }
.badge-valid    { background:#A7F3D0; color:#064E3B; font-size:.72rem; padding:.25em .6em; border-radius:6px; font-weight:700; border:1px solid #6EE7B7; }
.badge-belum    { background:#FEF3C7; color:#92400E; font-size:.72rem; padding:.25em .6em; border-radius:6px; font-weight:700; }
.badge-dapur    { font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; background: #e0f2fe; color: #0369a1; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.bank-tag-mini  { font-size:.65rem; font-weight:700; padding:.15em .45em; border-radius:3px; }
.bank-bri       { background:#003087; color:#fff; }
.bank-bni       { background:#FF6200; color:#fff; }
.bank-bca       { background:#005BAC; color:#fff; }
.bank-mandiri   { background:#003D7C; color:#FFD700; }
.bank-other     { background:#6c757d; color:#fff; }
</style>

<!-- Tanggal & tombol rekap -->
<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
  <div>
    <h5 class="fw-bold mb-0">Hari ini: {{ today }}</h5>
    <small class="text-muted">Ringkasan pengajuan hari ini</small>
  </div>
  <div class="d-flex gap-2 flex-wrap">
    <a href="{{ url_for('analitik') }}" class="btn btn-outline-primary btn-sm">
      <i class="bi bi-graph-up-arrow me-1"></i> Analitik & BI
    </a>
    <a href="{{ url_for('operasional') }}" class="btn btn-outline-warning btn-sm text-dark">
      <i class="bi bi-wallet2 me-1"></i> Pengajuan Operasional
    </a>
    <a href="{{ url_for('belanja_pemasok') }}" class="btn btn-outline-success btn-sm">
      <i class="bi bi-check2-circle me-1"></i> Validasi Belanja
    </a>
    <a href="{{ url_for('pengajuan_baru') }}" class="btn btn-primary btn-sm">
      <i class="bi bi-plus-circle me-1"></i> Buat Pengajuan
    </a>
    <a href="{{ url_for('export_rekap', tanggal=today_iso) }}" class="btn btn-success btn-sm">
      <i class="bi bi-file-earmark-excel me-1"></i> Export Rekap Hari Ini
    </a>
  </div>
</div>

<!-- Stat Cards -->
<div class="row g-3 mb-4">
  <div class="col-6 col-md-3">
    <div class="stat-card" style="background: linear-gradient(135deg,#1F4E79,#2E75B6)">
      <i class="bi bi-receipt stat-icon"></i>
      <div>
        <div class="stat-val">{{ jumlah_pengajuan }}</div>
        <div class="stat-label">Pengajuan Barang Hari Ini</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="stat-card" style="background: linear-gradient(135deg,#198754,#20c997)">
      <i class="bi bi-currency-dollar stat-icon"></i>
      <div>
        <div class="stat-val" style="font-size:1.1rem">Rp {{ '{:,.0f}'.format(total_hari_ini) }}</div>
        <div class="stat-label">Total Belanja Barang Hari Ini</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="stat-card" style="background: linear-gradient(135deg,#0d9488,#14b8a6)">
      <i class="bi bi-wallet2 stat-icon"></i>
      <div>
        {% if current_user and current_user.role == 'admin_dapur' and user_dapur %}
          <div class="stat-val" style="font-size:1.1rem">Rp {{ '{:,.0f}'.format(user_dapur.saldo_va or 0) }}</div>
          <div class="stat-label">Sisa Saldo VA ({{ user_dapur.kode or 'Dapur' }})</div>
        {% else %}
          <div class="stat-val" style="font-size:1.1rem">Rp {{ '{:,.0f}'.format(total_saldo_semua_dapur) }}</div>
          <div class="stat-label">Total Sisa Saldo VA</div>
        {% endif %}
      </div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="stat-card" style="background: linear-gradient(135deg,#b45309,#f59e0b)">
      <i class="bi bi-cash-stack stat-icon"></i>
      <div>
        <div class="stat-val" style="font-size:1.1rem">Rp {{ '{:,.0f}'.format(total_ops_hari_ini or 0) }}</div>
        <div class="stat-label">Operasional Hari Ini</div>
      </div>
    </div>
  </div>
</div>

<!-- Kartu Monitoring Sisa Saldo VA Per Unit Dapur (Khusus jika multi-dapur) -->
{% if active_dapurs and (not current_user or current_user.role != 'admin_dapur') %}
<div class="card mb-4 border-0 shadow-sm" style="background:#ffffff; border-radius:12px;">
  <div class="card-header bg-white py-2 d-flex justify-content-between align-items-center">
    <span class="fw-bold small text-dark"><i class="bi bi-bank text-primary me-2"></i>Status Rekening & Sisa Saldo VA Unit Dapur</span>
    {% if can('peng_daftar_dapur') %}
    <a href="{{ url_for('pengaturan') }}#card-dapur" class="btn btn-xs btn-outline-primary btn-sm py-0 px-2" style="font-size:0.75rem;">
      <i class="bi bi-pencil-square me-1"></i>Kelola Saldo VA
    </a>
    {% endif %}
  </div>
  <div class="card-body p-3">
    <div class="row g-2">
      {% for d in active_dapurs %}
      <div class="col-md-4 col-sm-6">
        <div class="p-2 border rounded-3 bg-light d-flex justify-content-between align-items-center">
          <div>
            <div class="fw-bold small text-dark">{{ d.nama }}</div>
            <small class="text-muted font-monospace" style="font-size:0.72rem;">
              <i class="bi bi-credit-card-2-front me-1"></i>VA: {{ d.nomor_va or 'Belum diatur' }}
            </small>
          </div>
          <div class="text-end">
            <div class="fw-bold text-success font-monospace" style="font-size:0.95rem;">
              Rp {{ '{:,.0f}'.format(d.saldo_va or 0) }}
            </div>
            <span class="badge bg-success-subtle text-success border border-success-subtle" style="font-size:0.65rem;">Tersedia</span>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</div>
{% endif %}

<!-- Banner Analitik & BI -->
<div class="card mb-4 border-0" style="background: linear-gradient(90deg, #1e3c72 0%, #2a5298 100%); color: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(30,60,114,0.15);">
  <div class="card-body p-3 d-flex justify-content-between align-items-center flex-wrap gap-2">
    <div>
      <h6 class="fw-bold mb-1"><i class="bi bi-graph-up-arrow me-2 text-warning"></i>Executive Business Intelligence & Monitoring Dapur</h6>
      <small class="opacity-75">Pantau tren pengeluaran harian, rasio belanja vs operasional, perbandingan antar unit dapur, dan serapan anggaran vendor.</small>
    </div>
    <a href="{{ url_for('analitik') }}" class="btn btn-warning btn-sm fw-semibold text-dark px-3">
      Buka Dashboard Analitik <i class="bi bi-arrow-right ms-1"></i>
    </a>
  </div>
</div>

<!-- SECTION 1: Rekap per Kategori & Pengajuan Barang Terbaru -->
<div class="row g-3 mb-4">
  <!-- Rekap per Kategori -->
  <div class="col-md-5">
    <div class="card h-100 border-0 shadow-sm" style="border-radius:12px;">
      <div class="card-header bg-white py-2 d-flex justify-content-between align-items-center">
        <span class="fw-bold small text-dark"><i class="bi bi-bar-chart text-primary me-2"></i>Rekap Belanja Hari Ini per Kategori</span>
      </div>
      <div class="card-body p-0">
        {% if rekap %}
        <table class="table table-sm mb-0">
          <thead><tr><th>Kategori</th><th class="text-end">Total (Rp)</th></tr></thead>
          <tbody>
          {% for r in rekap %}
          <tr>
            <td><span class="badge kat-{{ r.kategori.replace(' ','-') }} badge-kategori">{{ r.kategori }}</span></td>
            <td class="text-end fw-semibold">{{ '{:,.0f}'.format(r.total) }}</td>
          </tr>
          {% endfor %}
          <tr class="table-dark">
            <td class="fw-bold">TOTAL</td>
            <td class="text-end fw-bold">{{ '{:,.0f}'.format(total_hari_ini) }}</td>
          </tr>
          </tbody>
        </table>
        {% else %}
        <div class="text-center text-muted py-5">
          <i class="bi bi-inbox fs-2 d-block mb-2"></i>
          Belum ada pengajuan hari ini
        </div>
        {% endif %}
      </div>
    </div>
  </div>

  <!-- Pengajuan Barang Terbaru -->
  <div class="col-md-7">
    <div class="card h-100 border-0 shadow-sm" style="border-radius:12px;">
      <div class="card-header bg-white py-2 d-flex justify-content-between align-items-center">
        <span class="fw-bold small text-dark"><i class="bi bi-cart-check text-primary me-2"></i>Pengajuan Belanja Barang Terbaru</span>
        <a href="{{ url_for('riwayat') }}" class="btn btn-xs btn-outline-secondary btn-sm py-0 px-2" style="font-size:0.75rem;">
          Lihat Semua <i class="bi bi-arrow-right"></i>
        </a>
      </div>
      <div class="card-body p-0">
        <div class="table-responsive">
        <table class="table table-sm table-hover mb-0">
          <thead class="table-light">
            <tr>
              <th>No</th><th>Tanggal</th><th>Kategori</th><th>Pemasok</th>
              <th class="text-end">Total</th><th></th>
            </tr>
          </thead>
          <tbody>
          {% for p in pengajuan_terbaru %}
          <tr>
            <td class="text-muted small">{{ p.nomor }}</td>
            <td>{{ p.tanggal.strftime('%d/%m/%Y') }}</td>
            <td><span class="badge kat-{{ p.kategori.replace(' ','-') }} badge-kategori">{{ p.kategori }}</span></td>
            <td class="small">{{ p.pemasok.nama if p.pemasok else '–' }}</td>
            <td class="text-end fw-semibold">Rp {{ '{:,.0f}'.format(p.total) }}</td>
            <td>
              <a href="{{ url_for('pengajuan_detail', pid=p.id) }}" class="btn btn-xs btn-outline-primary btn-sm py-0 px-1" title="Detail Pengajuan">
                <i class="bi bi-eye"></i>
              </a>
            </td>
          </tr>
          {% else %}
          <tr><td colspan="6" class="text-center text-muted py-4">Belum ada data pengajuan barang</td></tr>
          {% endfor %}
          </tbody>
        </table>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- SECTION 2: Pengajuan Operasional & Validasi Belanja Terbaru -->
<div class="row g-3 mb-4">
  <!-- Pengajuan Operasional Terbaru -->
  <div class="col-md-6">
    <div class="card h-100 border-0 shadow-sm" style="border-radius:12px;">
      <div class="card-header bg-white py-2 d-flex justify-content-between align-items-center">
        <span class="fw-bold small text-dark">
          <i class="bi bi-wallet2 text-warning me-2"></i>Pengajuan Operasional Terbaru
        </span>
        <a href="{{ url_for('operasional') }}" class="btn btn-xs btn-outline-primary btn-sm py-0 px-2" style="font-size:0.75rem;">
          Kelola Operasional <i class="bi bi-arrow-right"></i>
        </a>
      </div>
      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table table-sm table-hover mb-0" style="font-size:0.83rem;">
            <thead class="table-light">
              <tr>
                <th>No / Tgl</th>
                <th>Penerima / Unit</th>
                <th>Keperluan</th>
                <th class="text-end">Nominal Transfer</th>
                <th class="text-center">Status</th>
              </tr>
            </thead>
            <tbody>
            {% for ops in operasional_terbaru or [] %}
            <tr>
              <td>
                <div class="font-monospace small text-primary fw-semibold">{{ ops.nomor }}</div>
                <small class="text-muted" style="font-size:0.7rem;">{{ ops.tanggal.strftime('%d/%m/%Y') }}</small>
              </td>
              <td>
                <div class="fw-semibold text-truncate" style="max-width:140px;" title="{{ ops.nama_penerima }}">{{ ops.nama_penerima }}</div>
                {% if ops.dapur %}
                  <span class="badge-dapur"><i class="bi bi-building"></i>{{ ops.dapur.kode or ops.dapur.nama }}</span>
                {% endif %}
              </td>
              <td>
                <div class="text-truncate text-secondary" style="max-width:150px;" title="{{ ops.keperluan }}">{{ ops.keperluan }}</div>
                <small class="text-muted" style="font-size:0.7rem;">{{ ops.kategori }}</small>
              </td>
              <td class="text-end">
                <span class="fw-bold text-dark">Rp {{ '{:,.0f}'.format(ops.total_transfer or 0) }}</span>
                {% if (ops.biaya_admin or 0) > 0 %}
                  <div class="text-muted" style="font-size:0.65rem;">+adm Rp {{ '{:,.0f}'.format(ops.biaya_admin) }}</div>
                {% endif %}
              </td>
              <td class="text-center">
                {% if ops.status == 'divalidasi' %}
                  <span class="badge-valid"><i class="bi bi-check2-circle me-1"></i>Valid</span>
                {% else %}
                  <span class="badge-diajukan"><i class="bi bi-clock me-1"></i>Diajukan</span>
                {% endif %}
              </td>
            </tr>
            {% else %}
            <tr><td colspan="5" class="text-center text-muted py-4">Belum ada pengajuan operasional</td></tr>
            {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
      <div class="card-footer bg-white border-top py-2 d-flex justify-content-between align-items-center">
        <small class="text-muted">Total Hari Ini: <strong>Rp {{ '{:,.0f}'.format(total_ops_hari_ini or 0) }}</strong></small>
        <a href="{{ url_for('operasional') }}" class="btn btn-sm btn-outline-secondary py-0" style="font-size:0.75rem;">
          Lihat Semua Operasional <i class="bi bi-arrow-right"></i>
        </a>
      </div>
    </div>
  </div>

  <!-- Validasi Belanja Pemasok Terbaru -->
  <div class="col-md-6">
    <div class="card h-100 border-0 shadow-sm" style="border-radius:12px;">
      <div class="card-header bg-white py-2 d-flex justify-content-between align-items-center">
        <span class="fw-bold small text-dark">
          <i class="bi bi-check2-circle text-success me-2"></i>Validasi Belanja Pemasok Terbaru
        </span>
        <a href="{{ url_for('belanja_pemasok') }}" class="btn btn-xs btn-outline-success btn-sm py-0 px-2" style="font-size:0.75rem;">
          Kelola Validasi <i class="bi bi-arrow-right"></i>
        </a>
      </div>
      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table table-sm table-hover mb-0" style="font-size:0.83rem;">
            <thead class="table-light">
              <tr>
                <th>Tgl / Unit</th>
                <th>Pemasok / Rekening</th>
                <th>Kategori / Ket</th>
                <th class="text-end">Transfer</th>
                <th class="text-center">Status</th>
              </tr>
            </thead>
            <tbody>
            {% for b in belanja_terbaru or [] %}
            <tr>
              <td>
                <div class="fw-semibold">{{ b.tanggal.strftime('%d/%m/%Y') }}</div>
                {% if b.dapur %}
                  <span class="badge-dapur"><i class="bi bi-building"></i>{{ b.dapur.kode or b.dapur.nama }}</span>
                {% endif %}
              </td>
              <td>
                {% set penerima = b.nama_penerima or (b.pemasok.nama if b.pemasok else '–') %}
                {% set bank = b.bank_penerima or (b.pemasok.bank if b.pemasok else '') %}
                <div class="fw-semibold text-truncate" style="max-width:140px;" title="{{ penerima }}">{{ penerima }}</div>
                {% if bank %}
                  <span class="bank-tag-mini {% if 'BRI' in bank.upper() %}bank-bri{% elif 'BNI' in bank.upper() %}bank-bni{% elif 'BCA' in bank.upper() %}bank-bca{% elif 'MANDIRI' in bank.upper() %}bank-mandiri{% else %}bank-other{% endif %}">
                    {{ bank }}
                  </span>
                {% endif %}
              </td>
              <td>
                {% set kat = b.kategori or (b.pemasok.kategori if b.pemasok else '') %}
                <div class="text-truncate" style="max-width:140px;" title="{{ b.keterangan or '-' }}">
                  <small class="text-muted">{{ kat }}</small>
                  {% if b.keterangan %}
                    <div class="text-secondary text-truncate" style="font-size:0.7rem;">{{ b.keterangan }}</div>
                  {% endif %}
                </div>
              </td>
              <td class="text-end">
                <span class="fw-bold text-dark">Rp {{ '{:,.0f}'.format(b.total_transfer or 0) }}</span>
                {% if (b.biaya_admin or 0) > 0 %}
                  <div class="text-muted" style="font-size:0.65rem;">+adm Rp {{ '{:,.0f}'.format(b.biaya_admin) }}</div>
                {% endif %}
              </td>
              <td class="text-center">
                {% if b.divalidasi %}
                  <span class="badge-valid"><i class="bi bi-check2-circle me-1"></i>Valid</span>
                {% elif b.diajukan %}
                  <span class="badge-ajukan"><i class="bi bi-send me-1"></i>Diajukan</span>
                {% else %}
                  <span class="badge-belum"><i class="bi bi-clock me-1"></i>Belum</span>
                {% endif %}
              </td>
            </tr>
            {% else %}
            <tr><td colspan="5" class="text-center text-muted py-4">Belum ada catatan belanja pemasok</td></tr>
            {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
      <div class="card-footer bg-white border-top py-2 d-flex justify-content-between align-items-center">
        <small class="text-muted">Total Hari Ini: <strong>Rp {{ '{:,.0f}'.format(total_belanja_hari_ini or 0) }}</strong></small>
        <a href="{{ url_for('belanja_pemasok') }}" class="btn btn-sm btn-outline-secondary py-0" style="font-size:0.75rem;">
          Lihat Semua Validasi <i class="bi bi-arrow-right"></i>
        </a>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Dashboard loaded
</script>
{% endblock %}