{% extends 'base.html' %}
{% block content %}
<div class="row justify-content-center">
    <div class="col-md-6">
        <div class="card glass-card border-0 shadow-sm">
            <div class="card-body p-4 p-lg-5">
                <nav aria-label="breadcrumb" class="mb-4">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{% url 'laporan_transaksi' %}" class="text-decoration-none">Laporan</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Edit Transaksi</li>
                    </ol>
                </nav>
                
                <h3 class="fw-bold mb-4 d-flex align-items-center">
                    <div class="bg-primary-subtle text-primary p-2 rounded-3 me-3">
                        <i data-lucide="edit-3"></i>
                    </div>
                    Edit Transaksi
                </h3>
                
                <div class="p-4 bg-light rounded-4 mb-4 border border-white">
                    <div class="row g-3">
                        <div class="col-sm-6">
                            <small class="text-muted d-block text-uppercase fw-bold mb-1" style="font-size: 0.65rem; letter-spacing: 0.5px;">BARANG</small>
                            <span class="fw-bold text-dark">{{ transaction.medicine.name }}</span>
                        </div>
                        <div class="col-sm-6 text-sm-end">
                            <small class="text-muted d-block text-uppercase fw-bold mb-1" style="font-size: 0.65rem; letter-spacing: 0.5px;">TIPE</small>
                            <span class="badge {% if transaction.transaction_type == 'IN' %}bg-success-subtle text-success{% else %}bg-danger-subtle text-danger{% endif %} rounded-pill px-3">
                                {{ transaction.get_transaction_type_display }}
                            </span>
                        </div>
                        <div class="col-12 mt-3">
                            <small class="text-muted d-block text-uppercase fw-bold mb-1" style="font-size: 0.65rem; letter-spacing: 0.5px;">BATCH NUMBER</small>
                            <code class="text-primary fs-6">{{ transaction.batch.batch_number }}</code>
                        </div>
                    </div>
                </div>

                <form method="post">
                    {% csrf_token %}
                    <div class="mb-4">
                        <label class="form-label small fw-bold text-muted text-uppercase mb-1" style="font-size: 0.65rem; letter-spacing: 0.5px;">JUMLAH</label>
                        <input type="number" name="quantity" class="form-control form-control-lg rounded-3" value="{{ transaction.quantity }}" required>
                        <div class="form-text small mt-2">Perubahan jumlah akan otomatis memperbarui stok pada batch.</div>
                    </div>
                    <div class="mb-4">
                        <label class="form-label small fw-bold text-muted text-uppercase mb-1" style="font-size: 0.65rem; letter-spacing: 0.5px;">KETERANGAN</label>
                        <textarea name="note" class="form-control rounded-3" rows="3">{{ transaction.note }}</textarea>
                    </div>
                    
                    <div class="d-flex gap-3 mt-5">
                        <a href="{% url 'laporan_transaksi' %}" class="btn btn-light flex-grow-1 py-3 fw-bold">Batal</a>
                        <button type="submit" class="btn btn-primary flex-grow-1 py-3 fw-bold shadow-sm">Simpan Perubahan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}