<div class="page-header responsive-header">
    <div>
        <a href="<?= APP_URL ?>/inventory" class="btn btn-ghost btn-sm mb-3" 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 Inventory
        </a>
        <h1>Stock Adjustment List</h1>
        <div class="page-subtitle">Track all stock adjustments made across the system</div>
    </div>
    <div class="flex gap-2 flex-wrap">
        <a href="<?= APP_URL ?>/inventory/adjust" class="btn btn-primary btn-sm">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="12" y1="5" x2="12" y2="19"></line>
                <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            New Adjustment
        </a>
        <a href="<?= APP_URL ?>/inventory/adjustment-list?format=csv<?= ($qs = http_build_query($_GET)) ? '&' . $qs : '' ?>" class="btn btn-outline btn-sm">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                <polyline points="7 10 12 15 17 10"></polyline>
                <line x1="12" y1="15" x2="12" y2="3"></line>
            </svg>
            Export CSV
        </a>
    </div>
</div>

<style>
/* Base Compact Styles */
.page-header {
    margin-bottom: 0.75rem;
}

.page-header h1 {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.page-subtitle {
    font-size: 0.75rem;
}

.card {
    margin-bottom: 0.75rem;
    padding: 0.5rem;
}

.card-header {
    padding: 0.5rem 0.5rem 0.25rem 0.5rem;
}

.card-title {
    font-size: 0.875rem;
    font-weight: 600;
}

/* Responsive Grid Layout */
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.form-grid {
    grid-template-columns: repeat(2, 1fr);
}

/* Compact Forms */
.form-group {
    margin-bottom: 0.5rem;
}

.form-label {
    font-size: 0.7rem;
    margin-bottom: 0.25rem;
}

.form-control {
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
}

/* Compact Buttons */
.btn-sm {
    padding: 0.35rem 0.6rem;
    font-size: 0.7rem;
}

/* Compact Table */
.adjustment-list-table {
    font-size: 0.7rem;
}

.adjustment-list-table thead th {
    padding: 0.3rem 0.4rem;
    font-size: 0.65rem;
    line-height: 1.1;
    white-space: nowrap;
    font-weight: 600;
}

.adjustment-list-table tbody td {
    padding: 0.3rem 0.4rem;
    font-size: 0.7rem;
    line-height: 1.3;
}

.adjustment-list-table .cell-value {
    white-space: nowrap;
}

.adjustment-list-table .cell-product {
    min-width: 150px;
}

/* Responsive Header */
.responsive-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}
@media (min-width: 640px) {
    .responsive-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0;
    }
}

/* Tablet Responsive */
@media (max-width: 1024px) {
    .responsive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile Responsive */
@media (max-width: 640px) {
    .responsive-grid {
        grid-template-columns: 1fr;
    }
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .page-header h1 {
        font-size: 1rem;
    }
    
    .page-subtitle {
        font-size: 0.7rem;
    }
    
    .card {
        padding: 0.5rem;
    }
    
    .adjustment-list-table thead th {
        padding: 0.25rem 0.3rem;
        font-size: 0.6rem;
    }
    
    .adjustment-list-table tbody td {
        padding: 0.25rem 0.3rem;
        font-size: 0.65rem;
    }
    
    .btn-sm {
        padding: 0.3rem 0.5rem;
        font-size: 0.65rem;
    }
    
    .form-control {
        padding: 0.35rem 0.5rem;
        font-size: 0.7rem;
    }
    
    .card-title {
        font-size: 0.8rem;
    }
}

/* Card view on mobile for table */
@media (max-width: 768px) {
    .adjustment-list-table thead {
        display: none;
    }

    .adjustment-list-table,
    .adjustment-list-table tbody,
    .adjustment-list-table tr,
    .adjustment-list-table td {
        display: block;
        width: 100%;
    }

    .adjustment-list-table tbody tr {
        border-bottom: 1px solid #e5e7eb;
        padding: 0.35rem 0;
    }

    .adjustment-list-table tbody td {
        display: flex;
        justify-content: space-between;
        gap: 0.75rem;
        align-items: flex-start;
        border: 0;
        padding: 0.25rem 0;
        text-align: right;
        font-size: 0.65rem;
    }

    .adjustment-list-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6b7280;
        text-align: left;
        font-size: 0.6rem;
        min-width: 80px;
    }
}
</style>

<!-- Filters -->
<div class="card mb-3">
    <div class="card-header">
        <h3 class="card-title">Filters</h3>
    </div>
    <form method="GET" class="p-2">
        <div class="responsive-grid gap-2 form-grid">
            <div class="form-group">
                <label class="form-label">Product</label>
                <select name="product_id" class="form-control">
                    <option value="">All Products</option>
                    <?php foreach ($products as $p): ?>
                        <option value="<?= $p['id'] ?>" <?= ($_GET['product_id'] ?? '') == $p['id'] ? 'selected' : '' ?>>
                            <?= e($p['name']) ?> (<?= e($p['sku']) ?>)
                        </option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">Location</label>
                <select name="location_id" class="form-control">
                    <option value="">All Locations</option>
                    <?php foreach ($locations as $l): ?>
                        <option value="<?= $l['id'] ?>" <?= ($_GET['location_id'] ?? '') == $l['id'] ? 'selected' : '' ?>>
                            <?= e($l['name']) ?>
                        </option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">Adjustment Type</label>
                <select name="adjustment_type" class="form-control">
                    <option value="">All Types</option>
                    <option value="add" <?= ($_GET['adjustment_type'] ?? '') == 'add' ? 'selected' : '' ?>>Add Stock (+)</option>
                    <option value="subtract" <?= ($_GET['adjustment_type'] ?? '') == 'subtract' ? 'selected' : '' ?>>Subtract Stock (-)</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">Date From</label>
                <input type="date" name="date_from" class="form-control" value="<?= e($_GET['date_from'] ?? '') ?>">
            </div>
            <div class="form-group">
                <label class="form-label">Date To</label>
                <input type="date" name="date_to" class="form-control" value="<?= e($_GET['date_to'] ?? '') ?>">
            </div>
            <div class="form-group">
                <label class="form-label">&nbsp;</label>
                <button type="submit" class="btn btn-primary w-full">Apply Filters</button>
            </div>
            <div class="form-group">
                <label class="form-label">&nbsp;</label>
                <a href="<?= APP_URL ?>/inventory/adjustment-list" class="btn btn-outline w-full">Clear Filters</a>
            </div>
        </div>
    </form>
</div>

<!-- Adjustments Table -->
<div class="card">
    <div class="card-header">
        <h3 class="card-title">Adjustments</h3>
    </div>
    <div class="overflow-x-auto">
        <table class="data-table adjustment-list-table">
            <thead>
                <tr>
                    <th class="text-left cell-product">Product</th>
                    <th class="text-left">SKU</th>
                    <th class="text-left">Location</th>
                    <th class="text-center">Type</th>
                    <th class="text-center">Quantity</th>
                    <th class="text-center">Reason</th>
                    <th class="text-left">Reference</th>
                    <th class="text-center">Date</th>
                    <th class="text-left">User</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($adjustments['data'] as $item): ?>
                <tr>
                    <td class="text-left cell-product" data-label="Product"><?= e($item['product_name']) ?></td>
                    <td class="text-left" data-label="SKU"><?= e($item['sku']) ?></td>
                    <td class="text-left" data-label="Location"><?= e($item['location_name']) ?></td>
                    <td class="text-center" data-label="Type">
                        <span class="badge <?= $item['adjustment_type'] === 'add' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' ?>">
                            <?= $item['adjustment_type'] === 'add' ? 'Add (+)' : 'Subtract (-)' ?>
                        </span>
                    </td>
                    <td class="text-center cell-value" data-label="Quantity"><?= number_format($item['quantity'], 2) ?></td>
                    <td class="text-center" data-label="Reason"><?= ucfirst($item['reason']) ?></td>
                    <td class="text-left" data-label="Reference"><code><?= e($item['reference']) ?></code></td>
                    <td class="text-center" data-label="Date"><?= date('M j, Y H:i', strtotime($item['created_at'])) ?></td>
                    <td class="text-left" data-label="User"><?= e($item['user_name'] ?? 'N/A') ?></td>
                </tr>
                <?php endforeach; ?>
                <?php if (empty($adjustments['data'])): ?>
                <tr>
                    <td colspan="9" class="text-center text-muted py-8">
                        No adjustments found. Stock adjustments will appear here when processed.
                    </td>
                </tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
    
    <?php if ($adjustments['total'] > 0): ?>
    <?= paginationLinks($adjustments, APP_URL . '/inventory/adjustment-list', $_GET) ?>
    <?php endif; ?>
</div>
