{% extends 'base.html' %}
{% block content %}
<div class="card glass-card border-0 shadow-sm mb-4">
    <div class="card-body p-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h3 class="fw-bold mb-0 d-flex align-items-center">
                <div class="bg-primary-subtle text-primary p-2 rounded-3 me-3">
                    <i data-lucide="bar-chart-2"></i>
                </div>
                Laporan Keluar Masuk Barang
            </h3>
            <div class="d-flex gap-2">
                <button class="btn btn-outline-primary rounded-pill px-4 fw-bold" onclick="window.print()">
                    <i data-lucide="printer" class="icon-sm me-2"></i> Cetak Laporan
                </button>
            </div>
        </div>
        
        <div class="table-responsive">
            <table class="table align-middle" id="reportTable">
                <thead>
                    <tr>
                        <th>Waktu</th>
                        <th>Barang</th>
                        <th>Tipe</th>
                        <th class="text-end">Jumlah</th>
                        <th>Keterangan</th>
                        <th class="text-end">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    {% for t in transactions %}
                    <tr>
                        <td>
                            <div class="small fw-bold text-dark">{{ t.created_at|date:"d M Y" }}</div>
                            <div class="small text-muted">{{ t.created_at|date:"H:i" }} WIB</div>
                        </td>
                        <td>
                            <div class="fw-bold text-dark">{{ t.medicine.name }}</div>
                            <div class="small text-primary fw-medium">Batch: {{ t.batch.batch_number|default:"-" }}</div>
                        </td>
                        <td>
                            {% if t.transaction_type == 'IN' %}
                                <span class="badge bg-success-subtle text-success rounded-pill px-3">Masuk</span>
                            {% elif t.transaction_type == 'OUT' %}
                                <span class="badge bg-danger-subtle text-danger rounded-pill px-3">Keluar</span>
                            {% else %}
                                <span class="badge bg-secondary-subtle text-secondary rounded-pill px-3">Penyesuaian</span>
                            {% endif %}
                        </td>
                        <td class="text-end fw-bold fs-5">
                            {% if t.transaction_type == 'OUT' %}
                                <span class="text-danger">-{{ t.quantity }}</span>
                            {% else %}
                                <span class="text-success">+{{ t.quantity }}</span>
                            {% endif %}
                        </td>
                        <td><span class="small text-muted">{{ t.note|default:"-" }}</span></td>
                        <td class="text-end">
                            <div class="d-flex justify-content-end gap-1">
                                <a href="{% url 'edit_transaksi' t.pk %}" class="btn btn-light btn-sm rounded-circle p-2" title="Edit">
                                    <i data-lucide="edit-3" class="icon-sm"></i>
                                </a>
                                <button type="button" class="btn btn-light btn-sm rounded-circle p-2" title="Hapus" 
                                        onclick="confirmDelete('{{ t.pk }}', '{{ t.medicine.name }}')">
                                    <i data-lucide="trash-2" class="icon-sm text-danger"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="6" class="text-center py-5 text-muted">
                            <i data-lucide="inbox" class="mb-2 d-block mx-auto opacity-20" style="width: 48px; height: 48px;"></i>
                            Belum ada transaksi stok.
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal Konfirmasi Hapus -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg rounded-4">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold">Konfirmasi Hapus</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body py-4 text-center">
                <div class="bg-danger-subtle text-danger p-3 rounded-circle d-inline-flex mb-3">
                    <i data-lucide="alert-triangle" style="width: 32px; height: 32px;"></i>
                </div>
                <h5>Hapus Transaksi?</h5>
                <p class="text-muted">Apakah Anda yakin ingin menghapus transaksi <span id="deleteItemName" class="fw-bold text-dark"></span>? Tindakan ini akan mengembalikan stok pada batch terkait.</p>
            </div>
            <div class="modal-footer border-0 pt-0 justify-content-center pb-4">
                <button type="button" class="btn btn-light rounded-pill px-4 fw-bold" data-bs-dismiss="modal">Batal</button>
                <form id="deleteForm" method="post" action="">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger rounded-pill px-4 fw-bold shadow-sm">Ya, Hapus Transaksi</button>
                </form>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
    function confirmDelete(pk, name) {
        document.getElementById('deleteItemName').innerText = name;
        document.getElementById('deleteForm').action = "/transaksi/" + pk + "/delete/";
        var myModal = new bootstrap.Modal(document.getElementById('deleteModal'));
        myModal.show();
    }
</script>
{% endblock %}