{% extends "base.html" %}
{% block title %}{{ 'Edit' if mode=='edit' else 'Buat' }} Pengajuan – SPPG{% endblock %}
{% block page_title %}{{ 'Edit' if mode=='edit' else 'Buat' }} Pengajuan{% endblock %}

{% block extra_css %}
<style>
  .item-row { animation: fadeIn .2s ease; }
  @keyframes fadeIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
  .total-box {
    background: linear-gradient(135deg, #1F4E79, #2E75B6);
    color: #fff; border-radius: 10px;
    padding: 1rem 1.5rem;
  }
  .pemasok-preview {
    background: #e8f4fd; border-left: 4px solid #2E75B6;
    padding: .6rem 1rem; border-radius: 0 6px 6px 0;
    font-size: .875rem;
  }
</style>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
<div class="col-lg-10">

<div class="card">
  <div class="card-header d-flex justify-content-between align-items-center">
    <span><i class="bi bi-file-earmark-plus me-2"></i>Form Pengajuan</span>
    <span class="badge bg-secondary">{{ nomor }}</span>
  </div>
  <div class="card-body">

    <!-- Header Info -->
    <div class="row g-3 mb-3">
      <div class="col-md-4">
        <label class="form-label fw-semibold">Lokasi</label>
        <input type="text" id="lokasi" class="form-control"
               value="{{ pengajuan.lokasi if pengajuan else 'SPPG SENDANGREJO' }}">
      </div>
      <div class="col-md-4">
        <label class="form-label fw-semibold">Tanggal <span class="text-danger">*</span></label>
        <input type="date" id="tanggal" class="form-control"
               value="{{ pengajuan.tanggal.strftime('%Y-%m-%d') if pengajuan else today_iso }}">
      </div>
      <div class="col-md-4">
        <label class="form-label fw-semibold">Kategori <span class="text-danger">*</span></label>
        <select id="kategori" class="form-select">
          <option value="">-- Pilih Kategori --</option>
          {% for k in kategori_list %}
          <option value="{{ k }}"
            {% if pengajuan and pengajuan.kategori == k %}selected{% endif %}>
            {{ k }}
          </option>
          {% endfor %}
        </select>
      </div>
    </div>

    <!-- Pemasok -->
    <div class="mb-4">
      <label class="form-label fw-semibold">
        <i class="bi bi-person-check me-1 text-primary"></i>Pemasok
        <span class="text-muted fw-normal">(otomatis berdasarkan kategori)</span>
      </label>
      <select id="pemasok" class="form-select" style="width:100%">
        <option value="">-- Pilih Pemasok --</option>
      </select>
      <div id="pemasok-preview" class="mt-2 d-none pemasok-preview">
        <i class="bi bi-bank me-1"></i>
        <span id="pemasok-info"></span>
      </div>
      <div class="mt-1">
        <small class="text-muted">
          <i class="bi bi-info-circle me-1"></i>
          Pemasok disaring otomatis sesuai kategori. Anda bisa pilih pemasok lain jika perlu.
        </small>
      </div>
    </div>

    <hr>

    <!-- Items -->
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h6 class="mb-0 fw-bold"><i class="bi bi-list-ul me-2"></i>Daftar Barang</h6>
      <button type="button" id="btn-add-item" class="btn btn-sm btn-outline-primary">
        <i class="bi bi-plus-circle me-1"></i> Tambah Barang
      </button>
    </div>

    <div id="items-container"></div>

    <!-- Total -->
    <div class="total-box mt-3 d-flex justify-content-between align-items-center">
      <span class="fw-bold fs-5">TOTAL</span>
      <span class="fw-bold fs-4" id="grand-total">Rp 0</span>
    </div>

    <!-- Action Buttons -->
    <div class="d-flex gap-2 mt-4 justify-content-end">
      <a href="{{ url_for('index') }}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left me-1"></i> Batal
      </a>
      <button type="button" id="btn-save" class="btn btn-primary px-4">
        <i class="bi bi-save me-1"></i> Simpan
      </button>
    </div>
  </div>
</div>

</div>
</div>
{% endblock %}

{% block extra_js %}
<script>
const MODE    = '{{ mode }}';
const PGJ_ID  = {{ pengajuan.id if pengajuan else 'null' }};
const TODAY   = '{{ today_iso }}';

// ── Existing items (edit mode) ──
const EXISTING_ITEMS = {{ pengajuan_items_json | tojson if pengajuan_items_json is defined else '[]' | safe }};
const EXISTING_PEMASOK_ID = {{ pengajuan.pemasok_id if pengajuan and pengajuan.pemasok_id else 'null' }};

// ── Item row template ──
let itemCount = 0;
function addItemRow(data = {}) {
  itemCount++;
  const id = `item-${itemCount}`;
  const html = `
  <div class="item-row d-flex gap-2 align-items-start flex-wrap" id="${id}">
    <div style="flex:2;min-width:180px">
      <input type="text" class="form-control form-control-sm nama-barang"
             placeholder="Nama Barang" value="${data.nama_barang || ''}">
    </div>
    <div style="flex:.8;min-width:80px">
      <input type="number" class="form-control form-control-sm qty"
             placeholder="Qty" min="0" step="any" value="${data.qty || ''}">
    </div>
    <div style="flex:.8;min-width:70px">
      <input type="text" class="form-control form-control-sm satuan"
             placeholder="Satuan" value="${data.satuan || ''}">
    </div>
    <div style="flex:1;min-width:110px">
      <input type="number" class="form-control form-control-sm harga"
             placeholder="Harga/satuan" min="0" step="any" value="${data.harga_satuan || ''}">
    </div>
    <div style="flex:1;min-width:100px">
      <input type="text" class="form-control form-control-sm subtotal-disp bg-light"
             placeholder="Subtotal" readonly>
    </div>
    <button class="btn-del-item" onclick="removeItem('${id}')">
      <i class="bi bi-x-circle-fill"></i>
    </button>
  </div>`;
  document.getElementById('items-container').insertAdjacentHTML('beforeend', html);
  const row = document.getElementById(id);
  row.querySelector('.qty').addEventListener('input', () => calcRow(row));
  row.querySelector('.harga').addEventListener('input', () => calcRow(row));
  if (data.harga_satuan) calcRow(row);
}

function calcRow(row) {
  const qty   = parseFloat(row.querySelector('.qty').value) || 0;
  const harga = parseFloat(row.querySelector('.harga').value) || 0;
  const sub   = qty * harga;
  row.querySelector('.subtotal-disp').value = sub ? 'Rp ' + sub.toLocaleString('id-ID') : '';
  calcTotal();
}

function calcTotal() {
  let total = 0;
  document.querySelectorAll('.item-row').forEach(row => {
    const qty   = parseFloat(row.querySelector('.qty').value) || 0;
    const harga = parseFloat(row.querySelector('.harga').value) || 0;
    total += qty * harga;
  });
  document.getElementById('grand-total').textContent = 'Rp ' + total.toLocaleString('id-ID');
}

function removeItem(id) {
  document.getElementById(id)?.remove();
  calcTotal();
}

// ── Pemasok Select2 ──
function loadPemasok(kategori, selectedId = null) {
  let url = '/api/pemasok';
  if (kategori) url += `?kategori=${encodeURIComponent(kategori)}`;

  fetch(url).then(r => r.json()).then(data => {
    const sel = $('#pemasok');
    sel.empty().append('<option value="">-- Pilih Pemasok --</option>');
    data.forEach(p => {
      const opt = new Option(p.label, p.id, false, p.id == selectedId);
      sel.append(opt);
    });

    // Auto-pilih jika hanya 1 pemasok
    if (data.length === 1 && !selectedId) {
      sel.val(data[0].id).trigger('change');
    } else if (selectedId) {
      sel.val(selectedId).trigger('change');
    }

    sel.trigger('change');
  });
}

$(document).ready(function () {
  // Init Select2 untuk pemasok
  $('#pemasok').select2({
    theme: 'bootstrap-5',
    placeholder: '-- Pilih Pemasok --',
    allowClear: true,
    width: '100%'
  });

  // Preview pemasok saat dipilih
  $('#pemasok').on('change', function () {
    const selectedOpt = $(this).find('option:selected');
    const val = $(this).val();
    if (val) {
      document.getElementById('pemasok-preview').classList.remove('d-none');
      document.getElementById('pemasok-info').textContent = selectedOpt.text();
    } else {
      document.getElementById('pemasok-preview').classList.add('d-none');
    }
  });

  // Load pemasok saat kategori berubah
  $('#kategori').on('change', function () {
    const kat = $(this).val();
    loadPemasok(kat);
  });

  // Tombol tambah item
  document.getElementById('btn-add-item').addEventListener('click', () => addItemRow());

  // Init edit mode
  if (MODE === 'edit') {
    EXISTING_ITEMS.forEach(item => addItemRow(item));
    const kat = document.getElementById('kategori').value;
    loadPemasok(kat, EXISTING_PEMASOK_ID);
  } else {
    addItemRow(); // mulai dengan 1 baris kosong
    // Load pemasok berdasarkan kategori awal jika ada
    const kat = document.getElementById('kategori').value;
    if (kat) loadPemasok(kat);
  }

  // Simpan
  document.getElementById('btn-save').addEventListener('click', saveForm);
});

async function saveForm() {
  const lokasi   = document.getElementById('lokasi').value.trim();
  const tanggal  = document.getElementById('tanggal').value;
  const kategori = document.getElementById('kategori').value;
  const pemasok_id = $('#pemasok').val() || null;

  if (!tanggal || !kategori) {
    alert('Tanggal dan kategori wajib diisi!');
    return;
  }

  const items = [];
  let valid = true;
  document.querySelectorAll('.item-row').forEach(row => {
    const nama = row.querySelector('.nama-barang').value.trim();
    if (!nama) { valid = false; return; }
    items.push({
      nama_barang: nama,
      qty: parseFloat(row.querySelector('.qty').value) || 0,
      satuan: row.querySelector('.satuan').value.trim(),
      harga_satuan: parseFloat(row.querySelector('.harga').value) || 0,
    });
  });

  if (!valid || items.length === 0) {
    alert('Minimal 1 barang harus diisi dengan nama barang.');
    return;
  }

  const payload = { lokasi, tanggal, kategori, pemasok_id: pemasok_id ? parseInt(pemasok_id) : null, items };
  const btn = document.getElementById('btn-save');
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Menyimpan...';

  try {
    const url = MODE === 'edit' ? `/api/pengajuan/${PGJ_ID}` : '/api/pengajuan';
    const method = MODE === 'edit' ? 'PUT' : 'POST';
    const resp = await fetch(url, {
      method,
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });
    if (!resp.ok) throw new Error('Gagal menyimpan');
    const data = await resp.json();
    window.location.href = `/pengajuan/${data.id}/detail`;
  } catch (e) {
    alert('Error: ' + e.message);
    btn.disabled = false;
    btn.innerHTML = '<i class="bi bi-save me-1"></i> Simpan';
  }
}
</script>
{% endblock %}