{% extends 'base.html' %}
{% block content %}
<div class="row g-4 mb-4">
    <div class="col-md-4">
        <div class="card glass-card border-0 shadow-sm h-100">
            <div class="card-body p-4 text-center">
                <div class="bg-primary-subtle text-primary p-3 rounded-circle d-inline-flex mb-3">
                    <i data-lucide="package" style="width: 24px; height: 24px;"></i>
                </div>
                <h6 class="text-muted fw-bold mb-1">Total Barang</h6>
                <h2 class="fw-bold mb-0 text-dark">{{ total_count }}</h2>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card glass-card border-0 shadow-sm h-100">
            <div class="card-body p-4 text-center">
                <div class="bg-warning-subtle text-warning p-3 rounded-circle d-inline-flex mb-3">
                    <i data-lucide="alert-triangle" style="width: 24px; height: 24px;"></i>
                </div>
                <h6 class="text-muted fw-bold mb-1">Stok Menipis</h6>
                <h2 class="fw-bold mb-0 text-warning">{{ low_stock_count }}</h2>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card glass-card border-0 shadow-sm h-100">
            <div class="card-body p-4 text-center">
                <div class="bg-success-subtle text-success p-3 rounded-circle d-inline-flex mb-3">
                    <i data-lucide="check-circle" style="width: 24px; height: 24px;"></i>
                </div>
                <h6 class="text-muted fw-bold mb-1">Status Aman</h6>
                <h2 class="fw-bold mb-0 text-success">{{ total_count|add:"-"|add:low_stock_count|default:0|cut:"-" }}</h2>
            </div>
        </div>
    </div>
</div>

<div class="card glass-card border-0 shadow-sm mb-4">
    <div class="card-body p-4">
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-4 gap-3">
            <h3 class="fw-bold mb-0 d-flex align-items-center text-dark">
                <div class="bg-primary text-white p-2 rounded-3 me-3">
                    <i data-lucide="pill"></i>
                </div>
                Manajemen Data Barang
            </h3>
            <div class="d-flex flex-wrap gap-2">
                <button type="button" class="btn btn-primary rounded-pill px-4 fw-bold shadow-sm d-flex align-items-center" data-bs-toggle="modal" data-bs-target="#addMedicineModal">
                    <i data-lucide="plus-circle" class="me-2 icon-sm"></i> Tambah Barang Baru
                </button>
                <a href="{% url 'export_low_stock_pdf' %}" class="btn btn-outline-danger rounded-pill px-4 fw-bold d-flex align-items-center">
                    <i data-lucide="file-down" class="me-2 icon-sm"></i> Export Stok Menipis (PDF)
                </a>
            </div>
        </div>

        <hr class="opacity-10 mb-4">

        <!-- Search & Filters -->
        <div class="row g-3 mb-4 align-items-center">
            <div class="col-lg-6">
                <form method="GET" class="d-flex gap-2">
                    <div class="input-group flex-grow-1">
                        <span class="input-group-text bg-white border-end-0 border-opacity-25 rounded-start-pill ps-3"><i data-lucide="search" class="icon-sm text-muted"></i></span>
                        <input type="text" name="q" class="form-control border-start-0 border-opacity-25 rounded-end-pill py-2" placeholder="Cari nama, SKU, atau kategori..." value="{{ query|default:'' }}">
                    </div>
                    {% if query %}
                    <a href="{% url 'medicine_list' %}" class="btn btn-light rounded-pill px-3 d-flex align-items-center">
                        <i data-lucide="x" class="icon-sm"></i>
                    </a>
                    {% endif %}
                    <button type="submit" class="btn btn-secondary rounded-pill px-4 fw-bold">Cari</button>
                </form>
            </div>
            <div class="col-lg-6 d-flex justify-content-lg-end gap-2">
                <div class="btn-group p-1 bg-light rounded-pill" role="group">
                    <a href="{% url 'medicine_list' %}{% if query %}?q={{ query }}{% endif %}" class="btn rounded-pill px-4 fw-bold {% if not show_low_stock %}btn-white shadow-sm{% else %}btn-transparent text-muted{% endif %}">
                        Semua
                    </a>
                    <a href="{% url 'medicine_list' %}?low_stock=1{% if query %}&q={{ query }}{% endif %}" class="btn rounded-pill px-4 fw-bold {% if show_low_stock %}btn-warning shadow-sm{% else %}btn-transparent text-muted{% endif %}">
                        Stok Menipis
                        {% if low_stock_count > 0 %}
                        <span class="badge rounded-pill bg-danger ms-1">{{ low_stock_count }}</span>
                        {% endif %}
                    </a>
                </div>
            </div>
        </div>
        
        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <thead class="table-light opacity-75">
                    <tr>
                        <th class="ps-3">SKU</th>
                        <th>Nama Barang</th>
                        <th>Kategori</th>
                        <th>Supplier Utama</th>
                        <th>Supplier Alternatif</th>
                        <th class="text-center">Stok</th>
                        <th>Status</th>
                        <th class="text-end pe-3">Aksi</th>
                    </tr>
                </thead>
                <tbody class="border-top-0">
                    {% for m in medicines %}
                    <tr>
                        <td class="ps-3"><span class="badge bg-light text-muted border fw-normal">{{ m.sku }}</span></td>
                        <td>
                            <div class="fw-bold text-dark">{{ m.name }}</div>
                            <div class="text-muted small d-flex align-items-center">
                                <i data-lucide="box" class="icon-xs me-1"></i> {{ m.unit }}
                            </div>
                        </td>
                        <td>
                            <span class="badge bg-info-subtle text-info rounded-pill px-2 small">{{ m.category.name }}</span>
                        </td>
                        <td>
                            <div class="small fw-semibold text-dark">{{ m.main_supplier.name|default:"-" }}</div>
                            {% if m.main_supplier %}
                            <div class="text-muted smaller"><i data-lucide="phone" class="icon-xs me-1"></i> {{ m.main_supplier.phone|default:"N/A" }}</div>
                            {% endif %}
                        </td>
                        <td>
                            <div class="small text-muted">{{ m.alternative_supplier.name|default:"-" }}</div>
                        </td>
                        <td class="text-center">
                            <div class="fs-5 fw-bold {% if m.total_stock <= m.min_stock %}text-danger{% else %}text-primary{% endif %}">
                                {{ m.total_stock }}
                            </div>
                            <div class="text-muted small">Min: {{ m.min_stock }}</div>
                        </td>
                        <td>
                            {% if m.status == 'Tersedia' %}
                                <span class="badge bg-success-subtle text-success rounded-pill px-3 py-2 d-inline-flex align-items-center">
                                    <span class="p-1 bg-success rounded-circle me-2"></span> Tersedia
                                </span>
                            {% elif m.status == 'Stok Menipis' %}
                                <span class="badge bg-warning-subtle text-warning rounded-pill px-3 py-2 d-inline-flex align-items-center">
                                    <span class="p-1 bg-warning rounded-circle me-2"></span> Menipis
                                </span>
                            {% else %}
                                <span class="badge bg-danger-subtle text-danger rounded-pill px-3 py-2 d-inline-flex align-items-center">
                                    <span class="p-1 bg-danger rounded-circle me-2"></span> Habis
                                </span>
                            {% endif %}
                        </td>
                        <td class="text-end pe-3">
                            <div class="btn-group">
                                <a href="/admin/core/medicine/{{ m.pk }}/change/" class="btn btn-outline-primary btn-sm rounded-pill px-3 d-flex align-items-center" title="Edit Data">
                                    <i data-lucide="edit-2" class="icon-sm me-1"></i> Edit
                                </a>
                            </div>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="8" class="text-center py-5">
                            <div class="text-muted">
                                <i data-lucide="search-x" class="mb-3 d-block mx-auto opacity-20" style="width: 64px; height: 64px;"></i>
                                <h5 class="fw-bold">Tidak ada data ditemukan</h5>
                                <p class="small mb-0">Coba ubah kata kunci pencarian atau filter Anda.</p>
                                <a href="{% url 'medicine_list' %}" class="btn btn-link btn-sm mt-2 text-decoration-none">Reset Semua Filter</a>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Add Medicine Modal -->
<div class="modal fade" id="addMedicineModal" tabindex="-1" aria-labelledby="addMedicineModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content glass-card shadow-lg border-0">
            <div class="modal-header border-0 pb-0 ps-4 pt-4">
                <h5 class="modal-title fw-bold d-flex align-items-center" id="addMedicineModalLabel">
                    <div class="bg-primary-subtle text-primary p-2 rounded-3 me-2">
                        <i data-lucide="plus" class="icon-sm"></i>
                    </div>
                    Tambah Data Barang Baru
                </h5>
                <button type="button" class="btn-close me-2" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST">
                {% csrf_token %}
                <div class="modal-body p-4">
                    <p class="text-muted small mb-4">Lengkapi informasi berikut untuk menambahkan barang/obat ke dalam sistem.</p>
                    <div class="row g-4">
                        <div class="col-md-8">
                            <label class="form-label small fw-bold text-dark">Nama Barang/Obat <span class="text-danger">*</span></label>
                            {{ form.name }}
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-bold text-dark">SKU / Kode Unik <span class="text-danger">*</span></label>
                            {{ form.sku }}
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-bold text-dark">Kategori Barang <span class="text-danger">*</span></label>
                            {{ form.category }}
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small fw-bold text-dark">Satuan <span class="text-danger">*</span></label>
                            {{ form.unit }}
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-bold text-dark">Stok Minimal (Alert) <span class="text-danger">*</span></label>
                            {{ form.min_stock }}
                            <div class="form-text smaller">Sistem akan memberi peringatan jika stok di bawah angka ini.</div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-bold text-dark">Supplier Utama</label>
                            {{ form.main_supplier }}
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-bold text-dark">Supplier Alternatif</label>
                            {{ form.alternative_supplier }}
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 p-4 pt-0">
                    <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-5 fw-bold shadow-sm">Simpan Data Barang</button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
    .smaller { font-size: 0.75rem; }
    .btn-white { background-color: white; border: 1px solid #dee2e6; }
    .btn-transparent { background-color: transparent; border: 1px solid transparent; }
    .table-hover tbody tr:hover { background-color: rgba(13, 110, 253, 0.02); }
</style>
{% endblock %}