<div class="page-header">
    <div>
        <a href="<?= APP_URL ?>/products" class="btn btn-ghost btn-sm mb-4" style="padding-left:0;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
            Back to Products
        </a>
        <h1>Batch Management</h1>
        <div class="page-subtitle">Manage product batches and expiry tracking</div>
    </div>
    <div class="flex gap-2">
        <button class="btn btn-primary" onclick="showAddBatchModal()">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;">
                <path d="M12 4v16a2 2 0 0 1-2h3a2 2 0 0 1-2v2"></path>
                <path d="M17 5v-2h3a2 2 0 0 1-2z"></path>
            </svg>
            Add New Batch
        </button>
        <button class="btn btn-ghost" onclick="window.location.href='<?= APP_URL ?>/products'">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;">
                <path d="M10 6H6a2 2 0 0 1-2v2"></path>
                <path d="M8 12V8a2 2 0 0 1-2v2"></path>
                <path d="M3 16H6a2 2 0 0 1-2v2"></path>
            </svg>
            Back to Products
        </button>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h3 class="card-title">Batches</h3>
        <div class="card-actions">
            <button class="btn btn-ghost btn-sm" onclick="exportBatches()">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;">
                    <path d="M21 15v4a2 2 0 0 1-2h3a2 2 0 0 1-2z"></path>
                    <polyline points="17,8 15,5 7,8"></polyline>
                    <line x1="12" y1="15" x2="12" y2="3"></line>
                </svg>
                Export CSV
            </button>
        </div>
    </div>
    <div class="table-wrapper">
        <table>
            <thead>
                <tr>
                    <th>Batch No</th>
                    <th>Product</th>
                    <th>Location</th>
                    <th>MFG Date</th>
                    <th>Expiry Date</th>
                    <th>Quantity</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($batches as $batch): ?>
                <tr>
                    <td>
                        <span class="badge badge-secondary"><?= e($batch['batch_no']) ?></span>
                    </td>
                    <td>
                        <strong><?= e($batch['product_name']) ?></strong>
                    </td>
                    <td>
                        <span class="badge badge-info"><?= e($batch['location_name']) ?></span>
                    </td>
                    <td>
                        <span class="text-sm"><?= date('M j, Y', strtotime($batch['mfg_date'])) ?></span>
                    </td>
                    <td>
                        <?php if ($batch['expiry_date']): ?>
                            <span class="text-sm text-warning">
                                <?= date('M j, Y', strtotime($batch['expiry_date'])) ?>
                                <span class="badge badge-warning">Expiring</span>
                            </span>
                        <?php else: ?>
                            <span class="text-sm">-</span>
                        <?php endif; ?>
                    </td>
                    <td>
                        <span class="text-sm"><?= number_format($batch['quantity']) ?></span>
                    </td>
                    <td>
                        <span class="badge badge-success">Active</span>
                    </td>
                    <td>
                        <button class="btn btn-ghost btn-icon" onclick="editBatch(<?= $batch['id'] ?>)" title="Edit">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;">
                                <path d="M11 4H4a2 2 0 0 1-2h3a2 2 0 0 1-2z"></path>
                                <path d="M17 5v-2h3a2 2 0 0 1-2z"></path>
                            </svg>
                        </button>
                        <form method="POST" action="<?= APP_URL ?>/batches/delete" style="display:inline;">
                            <?= Security::csrfField() ?>
                            <input type="hidden" name="id" value="<?= $batch['id'] ?>">
                            <button type="submit" class="btn btn-ghost btn-icon text-danger" onclick="return confirm('Delete this batch?')" title="Delete">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;">
                                    <polyline points="3,6 5 7,8"></polyline>
                                    <line x1="10" y1="15" x2="10" y2="3"></line>
                                    <line x1="10" y1="21" x2="10" y2="21"></line>
                                </svg>
                            </button>
                        </form>
                    </td>
                </tr>
                <?php endforeach; ?>
                <?php if (empty($batches)): ?>
                <tr>
                    <td colspan="7" class="text-center text-muted py-8">
                        No batches found. Create your first batch to get started.
                    </td>
                </tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
    
    <?= paginationLinks($batches, APP_URL . '/batches', []) ?>
</div>

<!-- Add Batch Modal -->
<div class="modal-overlay" id="addBatchModal">
    <div class="modal">
        <div class="modal-header">
            <h3 class="modal-title">Add New Batch</h3>
            <button class="modal-close" onclick="hideAddBatchModal()">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
            </button>
        </div>
        <form action="<?= APP_URL ?>/batches/create" method="POST">
            <?= Security::csrfField() ?>
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label">Product <span class="required">*</span></label>
                    <select name="product_id" class="form-control" required>
                        <option value="">Select Product...</option>
                        <?php foreach ($products as $product): ?>
                            <option value="<?= $product['id'] ?>"><?= e($product['name']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Location <span class="required">*</span></label>
                    <select name="location_id" class="form-control" required>
                        <option value="">Select Location...</option>
                        <?php foreach ($locations as $location): ?>
                            <option value="<?= $location['id'] ?>"><?= e($location['name']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Batch Number</label>
                    <input type="text" name="batch_no" class="form-control" placeholder="e.g., BATCH-001" required>
                </div>
                <div class="form-group">
                    <label class="form-label">Manufacturing Date</label>
                    <input type="date" name="mfg_date" class="form-control" required>
                </div>
                <div class="form-group">
                    <label class="form-label">Expiry Date</label>
                    <input type="date" name="expiry_date" class="form-control">
                </div>
                <div class="form-group">
                    <label class="form-label">Quantity</label>
                    <input type="number" name="quantity" class="form-control" min="1" step="0.01" required>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-ghost" onclick="hideAddBatchModal()">Cancel</button>
                <button type="submit" class="btn btn-primary">Add Batch</button>
            </div>
        </form>
    </div>
</div>

<script>
function showAddBatchModal() {
    document.getElementById('addBatchModal').classList.add('show');
}

function hideAddBatchModal() {
    document.getElementById('addBatchModal').classList.remove('show');
}

function editBatch(id) {
    window.location.href = '<?= APP_URL ?>/batches/edit/' + id;
}

function exportBatches() {
    window.location.href = '<?= APP_URL ?>/batches/export';
}
</script>
