{% extends "base.html" %}
{% block title %}PO {{ po.nomor }} - FinansialApp{% endblock %}
{% block page_title %}Purchase Order {{ po.nomor }}{% endblock %}
{% block content %}

<div class="d-flex gap-2 mb-3 flex-wrap align-items-center">
  <a href="/po" class="btn btn-outline-secondary btn-sm"><i class="fas fa-arrow-left me-1"></i>Kembali</a>
  <a href="/po/{{ po.id }}/cetak" target="_blank" class="btn btn-outline-primary btn-sm">
    <i class="fas fa-print me-1"></i>Cetak / PDF</a>
  {% if session.role in ('ADMIN','FINANCE','OPERATOR') and po.status not in ('DITERIMA','DIBATALKAN') %}
  <a href="/po/{{ po.id }}/edit" class="btn btn-outline-warning btn-sm">
    <i class="fas fa-edit me-1"></i>Edit</a>
  {% endif %}
  {% if session.role in ('ADMIN','FINANCE') %}
  <form method="POST" action="/po/{{ po.id }}/hapus" class="d-inline"
        onsubmit="return confirm('Hapus PO {{ po.nomor }}? Tindakan ini tidak bisa dibatalkan.')">
    <button class="btn btn-outline-danger btn-sm"><i class="fas fa-trash me-1"></i>Hapus</button>
  </form>
  {% endif %}

  <!-- Status update -->
  <div class="ms-auto d-flex gap-2 align-items-center">
    {% if session.role in ('ADMIN','FINANCE','OPERATOR') %}
    <form method="POST" action="/po/{{ po.id }}/status" class="d-flex gap-1">
      <select name="status" class="form-select form-select-sm" style="width:145px">
        <option value="DRAFT"       {% if po.status=='DRAFT'       %}selected{% endif %}>Draft</option>
        <option value="DIKIRIM"     {% if po.status=='DIKIRIM'     %}selected{% endif %}>Dikirim ke Vendor</option>
        <option value="DITERIMA"    {% if po.status=='DITERIMA'    %}selected{% endif %}>Barang Diterima</option>
        <option value="DIBATALKAN"  {% if po.status=='DIBATALKAN'  %}selected{% endif %}>Dibatalkan</option>
      </select>
      <button class="btn btn-sm btn-primary">Simpan</button>
    </form>
    {% else %}
    <span class="badge fs-6
      {% if po.status=='DITERIMA' %}bg-success
      {% elif po.status=='DIKIRIM' %}bg-info
      {% elif po.status=='DIBATALKAN' %}bg-danger
      {% else %}bg-secondary{% endif %}">
      {{ po.status }}</span>
    {% endif %}
  </div>
</div>

{% if po.status == 'DITERIMA' and po.hutang_id %}
<div class="alert alert-success py-2 small mb-3">
  <i class="fas fa-check-circle me-1"></i>
  Barang sudah diterima. Hutang ke <strong>{{ po.vendor }}</strong> sebesar <strong>{{ total|rp }}</strong>
  otomatis tercatat. <a href="/hutang" class="alert-link">Lihat Tracker Hutang</a>
</div>
{% endif %}

<!-- PO Preview Card -->
<div class="card shadow-sm" style="max-width:860px;margin:auto">
  <div class="card-body p-4">

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-start mb-4">
      <div class="d-flex gap-3 align-items-start">
        {% if po_s.po_logo %}
        <img src="/static/uploads/{{ po_s.po_logo }}"
             style="height:52px;max-width:130px;object-fit:contain;flex-shrink:0">
        {% endif %}
        <div>
          <div style="font-size:1.4rem;font-weight:900;color:var(--acc)">{{ po_s.po_nama }}</div>
          {% if po_s.po_tagline %}<div style="font-size:.75rem;font-weight:600;color:var(--acc);margin-bottom:2px">{{ po_s.po_tagline }}</div>{% endif %}
          {% if po_s.po_alamat %}<div class="text-muted" style="font-size:.82rem">{{ po_s.po_alamat }}</div>{% endif %}
          {% if po_s.po_telepon %}<div class="text-muted" style="font-size:.82rem"><i class="fas fa-phone me-1"></i>{{ po_s.po_telepon }}</div>{% endif %}
          {% if po_s.po_email %}<div class="text-muted" style="font-size:.82rem"><i class="fas fa-envelope me-1"></i>{{ po_s.po_email }}</div>{% endif %}
        </div>
      </div>
      <div class="text-end">
        <div style="font-size:1.6rem;font-weight:900;letter-spacing:-.03em;color:#1e293b">PURCHASE ORDER</div>
        <div style="font-family:monospace;font-size:1rem;font-weight:700;color:var(--acc)">{{ po.nomor }}</div>
      </div>
    </div>

    <!-- Meta grid -->
    <div class="row g-2 mb-4">
      <div class="col-md-6">
        <div style="background:var(--card-h);border-radius:8px;padding:.75rem 1rem">
          <div style="font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--tx3);margin-bottom:.3rem">Kepada Vendor</div>
          <div class="fw-bold">{{ po.vendor }}</div>
          {% if po.alamat_vendor %}<div class="text-muted small">{{ po.alamat_vendor }}</div>{% endif %}
          {% if po.telepon_vendor %}<div class="text-muted small"><i class="fas fa-phone me-1"></i>{{ po.telepon_vendor }}</div>{% endif %}
        </div>
      </div>
      <div class="col-md-6">
        <div style="background:var(--card-h);border-radius:8px;padding:.75rem 1rem">
          <table style="font-size:.85rem;width:100%">
            <tr><td class="text-muted pe-3">Tanggal PO</td><td class="fw-semibold">{{ po.tanggal|tgl }}</td></tr>
            <tr><td class="text-muted pe-3">Estimasi Terima</td>
                <td class="fw-semibold {% if po.expected_date and po.status not in ('DITERIMA','DIBATALKAN') and po.expected_date < today.strftime('%Y-%m-%d') %}text-danger{% endif %}">
                  {{ po.expected_date|tgl if po.expected_date else '-' }}
                </td></tr>
            <tr><td class="text-muted pe-3">Status</td>
                <td>
                  <span class="badge
                    {% if po.status=='DITERIMA' %}bg-success
                    {% elif po.status=='DIKIRIM' %}bg-info
                    {% elif po.status=='DIBATALKAN' %}bg-danger
                    {% else %}bg-secondary{% endif %}">
                    {{ po.status }}
                  </span>
                </td></tr>
          </table>
        </div>
      </div>
    </div>

    <!-- Items -->
    <table class="table table-sm mb-3" style="font-size:.88rem">
      <thead>
        <tr style="background:#1e293b;color:#fff">
          <th class="ps-3" style="border-radius:6px 0 0 0">#</th>
          <th>Deskripsi</th>
          <th class="text-end">Qty</th>
          <th>Satuan</th>
          <th class="text-end">Harga Satuan</th>
          <th class="text-end">Diskon</th>
          <th class="text-end pe-3" style="border-radius:0 6px 0 0">Subtotal</th>
        </tr>
      </thead>
      <tbody>
        {% for it in items %}
        <tr style="border-bottom:1px solid var(--pgb)">
          <td class="ps-3 text-muted">{{ loop.index }}</td>
          <td class="fw-semibold">{{ it.deskripsi }}</td>
          <td class="text-end">{{ it.qty|qty }}</td>
          <td class="text-muted">{{ it.satuan }}</td>
          <td class="text-end text-rp">{{ it.harga_satuan|rp }}</td>
          <td class="text-end text-rp text-muted">{% if it.diskon_item %}{{ it.diskon_item|rp }}{% else %}-{% endif %}</td>
          <td class="text-end pe-3 fw-bold text-rp">{{ it.subtotal|rp }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>

    <!-- Total -->
    <div class="d-flex justify-content-end mb-4">
      <table style="font-size:.9rem;min-width:280px">
        <tr><td class="text-muted pe-4">Subtotal</td>
            <td class="text-end fw-semibold text-rp">{{ subtotal|rp }}</td></tr>
        {% if po.diskon %}
        <tr><td class="text-muted pe-4">Diskon</td>
            <td class="text-end text-danger text-rp">- {{ po.diskon|rp }}</td></tr>
        {% endif %}
        {% if po.ongkir %}
        <tr><td class="text-muted pe-4">Ongkir</td>
            <td class="text-end text-rp">{{ po.ongkir|rp }}</td></tr>
        {% endif %}
        {% if po.biaya_lain %}
        <tr><td class="text-muted pe-4">Biaya Lain</td>
            <td class="text-end text-rp">{{ po.biaya_lain|rp }}</td></tr>
        {% endif %}
        <tr><td colspan="2"><hr style="margin:.35rem 0"></td></tr>
        <tr>
          <td class="fw-bold pe-4" style="font-size:1rem">TOTAL</td>
          <td class="text-end fw-black text-rp"
              style="font-size:1.25rem;font-weight:900;color:var(--acc)">{{ total|rp }}</td>
        </tr>
      </table>
    </div>

    {% if (po.ongkir or po.biaya_lain) and session.role in ('ADMIN','FINANCE','OPERATOR') %}
    <div class="d-flex align-items-center justify-content-end gap-2 mb-4" style="margin-top:-.75rem">
      <span class="text-muted" style="font-size:.74rem">
        <i class="fas fa-circle-info me-1"></i>Ongkir/biaya lain di atas adalah komponen biaya pembelian, belum tercatat sebagai beban kas keluar.
      </span>
      <a class="btn btn-outline-secondary btn-sm"
         style="font-size:.74rem"
         href="{{ url_for('pengeluaran', prefill=1, kategori='OPERASIONAL', subkategori='Lainnya',
                          nominal=((po.ongkir or 0)|float + (po.biaya_lain or 0)|float)|int,
                          keterangan='Ongkir/biaya lain - PO ' ~ po.nomor ~ ' (' ~ po.vendor ~ ')',
                          vendor=po.vendor, tanggal=po.tanggal) }}">
        <i class="fas fa-arrow-trend-down me-1"></i>Catat sebagai Beban
      </a>
    </div>
    {% endif %}

    <!-- Catatan -->
    {% if po.catatan %}
    <div class="text-muted" style="font-size:.85rem;border-top:1px solid var(--pgb);padding-top:.75rem">
      <i class="fas fa-comment-dots me-1"></i>{{ po.catatan }}
    </div>
    {% endif %}

    <!-- Terms -->
    {% if po_s.po_terms %}
    <div style="margin-top:.75rem;border-top:1px solid var(--pgb);padding-top:.75rem">
      <div style="font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--tx3);margin-bottom:.35rem">
        <i class="fas fa-scale-balanced me-1"></i>Syarat &amp; Ketentuan
      </div>
      <div class="text-muted" style="font-size:.78rem;white-space:pre-line;line-height:1.6">{{ po_s.po_terms }}</div>
    </div>
    {% endif %}

  </div>
</div>

{% endblock %}