{% extends 'base.html' %}
{% block content %}
{% 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 Barang Keluar
            </h5>
            <div class="d-flex gap-2">
                <a href="{% url 'clear_cart' 'keluar' %}" class="btn btn-light btn-sm rounded-pill px-3 text-danger">Batalkan Semua</a>
                <a href="{% url 'process_cart' 'keluar' %}" class="btn btn-warning btn-sm rounded-pill px-4 fw-bold">Proses Pengeluaran Barang</a>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-sm align-middle">
                <thead>
                    <tr>
                        <th>Barang (SKU)</th>
                        <th>Batch Number</th>
                        <th class="text-end">Qty Keluar</th>
                        <th>Catatan</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.sku }}</div>
                        </td>
                        <td><code>{{ item.batch }}</code></td>
                        <td class="text-end">{{ item.qty }}</td>
                        <td>{{ item.note }}</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">Batch/Stok Tidak Valid</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">
                <h4 class="fw-bold mb-4 d-flex align-items-center">
                    <div class="bg-danger-subtle text-danger p-2 rounded-3 me-3">
                        <i data-lucide="file-minus"></i>
                    </div>
                    Barang Keluar
                </h4>
                <form method="post" id="outForm">
                    {% csrf_token %}
                    <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;">PILIH BARANG</label>
                        {{ form.medicine }}
                    </div>
                    <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;">PILIH BATCH (STOK TERSEDIA)</label>
                        {{ form.batch }}
                        <div id="stock-hint" class="small text-primary mt-2 fw-bold"></div>
                    </div>
                    <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;">JUMLAH KELUAR</label>
                        {{ form.quantity }}
                    </div>
                    <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;">KETERANGAN</label>
                        {{ form.note }}
                    </div>
                    <button type="submit" class="btn btn-danger w-100 py-3 mt-3 shadow-sm d-flex align-items-center justify-content-center">
                        <i data-lucide="minus-circle" class="me-2 icon-sm"></i> Catat Barang Keluar
                    </button>
                </form>
            </div>
        </div>

        <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-3">
                    <h5 class="fw-bold mb-0 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>
                    <a href="{% url 'download_template' 'keluar' %}" class="btn btn-sm btn-outline-success rounded-pill">Template</a>
                </div>
                <form action="{% url 'import_excel' 'keluar' %}" 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 Keluar
                    </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">
                    <h4 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="history"></i>
                        </div>
                        Transaksi Terakhir
                    </h4>
                    <span class="badge bg-light text-dark border px-3 py-2 rounded-pill">10 Transaksi</span>
                </div>
                <div class="table-responsive">
                    <table class="table align-middle">
                        <thead>
                            <tr>
                                <th>Barang</th>
                                <th>Batch</th>
                                <th class="text-end">Jumlah</th>
                                <th>Waktu</th>
                                <th class="text-end">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for t in transactions %}
                            <tr>
                                <td>
                                    <div class="fw-bold text-dark">{{ t.medicine.name }}</div>
                                    <div class="small text-muted">{{ t.note|default:"-" }}</div>
                                </td>
                                <td><code class="text-primary">{{ t.batch.batch_number }}</code></td>
                                <td class="text-end fw-bold text-danger">-{{ t.quantity }}</td>
                                <td><span class="small text-muted">{{ t.created_at|date:"d/m/y H:i" }}</span></td>
                                <td class="text-end">
                                    <a href="{% url 'edit_transaksi' t.pk %}" class="btn btn-light btn-sm rounded-circle p-2">
                                        <i data-lucide="edit-3" class="icon-sm"></i>
                                    </a>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="5" 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 keluar.
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_head %}
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    .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() {
        $('#id_medicine_out').select2({
            placeholder: "Pilih Barang",
            allowClear: true
        });
        
        $('#id_medicine_out').on('change', function() {
            var medicineId = $(this).val();
            var batchSelect = $('#id_batch_out');
            batchSelect.empty().append('<option value="">Memuat...</option>');
            
            if (medicineId) {
                $.ajax({
                    url: "{% url 'get_batches' %}",
                    data: { 'medicine_id': medicineId },
                    success: function(data) {
                        batchSelect.empty().append('<option value="">Pilih Batch</option>');
                        data.forEach(function(batch) {
                            batchSelect.append('<option value="' + batch.id + '" data-qty="' + batch.quantity + '">' + batch.batch_number + ' (Stok: ' + batch.quantity + ')</option>');
                        });
                    }
                });
            } else {
                batchSelect.empty().append('<option value="">Pilih Barang Terlebih Dahulu</option>');
            }
        });

        $('#id_batch_out').on('change', function() {
            var selected = $(this).find('option:selected');
            var qty = selected.data('qty');
            if (qty !== undefined) {
                $('#stock-hint').text('Stok tersedia: ' + qty);
            } else {
                $('#stock-hint').text('');
            }
        });
    });
</script>
{% endblock %}