{% extends 'base.html' %}
{% block content %}
<div class="mb-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'input_faktur' %}" class="text-decoration-none">Riwayat Faktur</a></li>
            <li class="breadcrumb-item active" aria-current="page">Detail Faktur {{ faktur.faktur_number }}</li>
        </ol>
    </nav>
    <div class="card glass-card border-0 shadow-sm p-4 mb-2">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h6 class="text-muted small fw-bold text-uppercase mb-1" style="letter-spacing: 1px;">NOMOR FAKTUR</h6>
                <h2 class="fw-bold mb-0 text-primary">#{{ faktur.faktur_number }}</h2>
            </div>
            <div class="d-flex gap-2">
                <a href="{% url 'download_template' 'masuk' %}" class="btn btn-outline-success rounded-pill px-3">
                    <i data-lucide="download" class="me-1 icon-sm"></i> Template Excel
                </a>
                <div class="text-end ms-4">
                    <h6 class="text-muted small fw-bold text-uppercase mb-1" style="letter-spacing: 1px;">SUPPLIER</h6>
                    <div class="badge bg-primary-subtle text-primary rounded-pill px-4 py-2 fs-6 fw-bold">
                        <i data-lucide="truck" class="me-2 icon-sm"></i> {{ faktur.supplier.name|default:"Internal" }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% if cart %}
<div class="card glass-card border-0 shadow-sm mb-4 border-start border-4 border-warning">
    <div class="card-body p-4">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h5 class="fw-bold mb-0 text-warning d-flex align-items-center">
                <i data-lucide="shopping-cart" class="me-2"></i> Konfirmasi Import (Keranjang)
            </h5>
            <div class="d-flex gap-2">
                <a href="{% url 'clear_cart_faktur' 'masuk' faktur.id %}" class="btn btn-light btn-sm rounded-pill px-3 text-danger">Batalkan Semua</a>
                <a href="{% url 'process_cart_faktur' 'masuk' faktur.id %}" class="btn btn-warning btn-sm rounded-pill px-4 fw-bold">Proses & Simpan Ke Database</a>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-sm align-middle">
                <thead>
                    <tr>
                        <th>Barang (SKU)</th>
                        <th>Batch</th>
                        <th>Expired</th>
                        <th class="text-end">Qty</th>
                        <th class="text-end">Harga Beli</th>
                        <th class="text-center">Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in cart %}
                    <tr class="{% if not item.valid %}table-danger-subtle{% endif %}">
                        <td>
                            <div class="fw-bold">{{ item.name }}</div>
                            <div class="small text-muted">{{ item.sku }}</div>
                        </td>
                        <td><code>{{ item.batch }}</code></td>
                        <td>{{ item.expiry }}</td>
                        <td class="text-end">{{ item.qty }}</td>
                        <td class="text-end">Rp {{ item.buy|floatformat:2 }}</td>
                        <td class="text-center">
                            {% if item.valid %}
                            <span class="badge bg-success rounded-pill"><i data-lucide="check" class="icon-xs"></i> Ready</span>
                            {% else %}
                            <span class="badge bg-danger rounded-pill" title="SKU tidak ditemukan di database Master Barang">SKU Tidak Dikenal</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endif %}

<div class="row g-4">
    <div class="col-md-4">
        <div class="card glass-card border-0 shadow-sm mb-4">
            <div class="card-body p-4">
                <h5 class="fw-bold mb-4 d-flex align-items-center">
                    <div class="bg-success-subtle text-success p-2 rounded-3 me-3">
                        <i data-lucide="package-plus"></i>
                    </div>
                    Input Manual
                </h5>
                <form method="post">
                    {% csrf_token %}
                    <input type="hidden" name="add_item" value="1">
                    {% for field in form %}
                        <div class="mb-3">
                            <label class="form-label small fw-bold text-muted text-uppercase mb-1" style="font-size: 0.65rem; letter-spacing: 0.5px;">{{ field.label }}</label>
                            {{ field }}
                        </div>
                    {% endfor %}
                    <button type="submit" class="btn btn-primary w-100 py-3 mt-3 shadow-sm d-flex align-items-center justify-content-center">
                        <i data-lucide="plus" class="me-2 icon-sm"></i> Tambah Barang
                    </button>
                </form>
            </div>
        </div>

        <div class="card glass-card border-0 shadow-sm mb-4">
            <div class="card-body p-4">
                <h5 class="fw-bold mb-3 d-flex align-items-center">
                    <div class="bg-info-subtle text-info p-2 rounded-3 me-3">
                        <i data-lucide="file-spreadsheet"></i>
                    </div>
                    Import Excel
                </h5>
                <form action="{% url 'import_excel_faktur' 'masuk' faktur.id %}" method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="mb-3">
                        <input type="file" name="file" class="form-control" accept=".xlsx, .xls" required>
                    </div>
                    <button type="submit" class="btn btn-info text-white w-100 shadow-sm">
                        <i data-lucide="upload" class="me-2 icon-sm"></i> Upload Excel
                    </button>
                </form>
            </div>
        </div>

        <div class="card glass-card border-0 shadow-sm">
            <div class="card-body p-4">
                <h5 class="fw-bold mb-3 d-flex align-items-center">
                    <div class="bg-purple-subtle text-purple p-2 rounded-3 me-3">
                        <i data-lucide="scan"></i>
                    </div>
                    Scan Foto Faktur
                </h5>
                <form action="{% url 'ocr_faktur' faktur.id %}" method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="mb-3">
                        <input type="file" name="image" class="form-control" accept="image/*" required>
                    </div>
                    <button type="submit" class="btn btn-purple text-white w-100 shadow-sm">
                        <i data-lucide="camera" class="me-2 icon-sm"></i> Scan & Ekstrak Data
                    </button>
                </form>
            </div>
        </div>
    </div>
    <div class="col-md-8">
        <div class="card glass-card border-0 shadow-sm h-100">
            <div class="card-body p-4">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h5 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="list"></i>
                        </div>
                        Rincian Barang Terinput
                    </h5>
                    <span class="badge bg-light text-dark border px-3 py-2 rounded-pill">{{ items|length }} Item Terdaftar</span>
                </div>
                <div class="table-responsive">
                    <table class="table align-middle">
                        <thead>
                            <tr>
                                <th>Barang</th>
                                <th>No. Batch</th>
                                <th>Kadaluarsa</th>
                                <th class="text-end">Jumlah</th>
                                <th class="text-end">Harga Beli</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in items %}
                            <tr>
                                <td>
                                    <div class="fw-bold text-dark">{{ item.medicine.name }}</div>
                                    <div class="small text-muted">{{ item.medicine.sku }}</div>
                                </td>
                                <td><code class="text-primary">{{ item.batch_number }}</code></td>
                                <td><span class="small text-muted">{{ item.expiry_date|date:"d M Y" }}</span></td>
                                <td class="text-end fw-bold text-dark">{{ item.quantity }} <span class="text-muted small">{{ item.medicine.unit }}</span></td>
                                <td class="text-end text-success fw-semibold">Rp {{ item.buying_price|floatformat:2 }}</td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="5" class="text-center py-5 text-muted">
                                    <i data-lucide="package-search" class="mb-2 d-block mx-auto opacity-20" style="width: 48px; height: 48px;"></i>
                                    <p class="mb-0">Belum ada barang diinput untuk faktur ini.</p>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block extra_head %}
<!-- Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    .bg-purple-subtle { background-color: #f3e8ff; }
    .text-purple { color: #7e22ce; }
    .btn-purple { background-color: #9333ea; border-color: #9333ea; }
    .btn-purple:hover { background-color: #7e22ce; border-color: #7e22ce; }
    
    .select2-container--default .select2-selection--single {
        border: 1px solid #e2e8f0;
        height: 48px;
        border-radius: 0.75rem;
        padding-top: 10px;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 46px;
    }
</style>
{% endblock %}
{% block extra_js %}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        $('.select2').select2({
            placeholder: "Pilih Barang",
            allowClear: true
        });
    });
</script>
{% endblock %}