<div class="page-header responsive-header">
    <div>
        <a href="<?= APP_URL ?>/reports" 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 Reports
        </a>
        <h1><?= $data['title'] ?></h1>
        <div class="page-subtitle">Opening, closing, and current stock analysis</div>
    </div>
    <div class="flex gap-2 flex-wrap">
        <a href="<?= APP_URL ?>/reports?report=stock-summary&format=csv<?= ($qs = http_build_query($data['filters'])) ? '&' . $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>
        <a href="<?= APP_URL ?>/reports?report=stock-summary&format=print<?= ($qs = http_build_query($data['filters'])) ? '&' . $qs : '' ?>" class="btn btn-secondary btn-sm">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="6 9 6 15 18 15"></polyline>
                <path d="M6 4h12v16H6z"></path>
            </svg>
            Print
        </a>
    </div>
</div>

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

/* Compact Card */
.compact-card {
    padding: 0.75rem;
}

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

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

@media (max-width: 640px) {
    .responsive-grid {
        grid-template-columns: 1fr;
    }
    
    .page-header h1 {
        font-size: 1.1rem;
    }
    
    .page-subtitle {
        font-size: 0.75rem;
    }
    
    .card {
        padding: 1rem;
    }
    
    .compact-card {
        padding: 0.6rem;
    }
    
    .card-body {
        padding: 0.75rem;
    }
    
    .btn-sm {
        padding: 0.4rem 0.75rem;
        font-size: 0.75rem;
    }
    
    .form-control {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
}
</style>

<div class="card mb-4">
    <form action="<?= APP_URL ?>/reports" method="GET" class="filters-form p-3">
        <input type="hidden" name="report" value="stock-summary">
        <div class="responsive-grid gap-3">
            <div>
                <label class="form-label">Date From</label>
                <input type="date" name="date_from" class="form-control" value="<?= e($data['filters']['date_from']) ?>">
            </div>
            <div>
                <label class="form-label">Date To</label>
                <input type="date" name="date_to" class="form-control" value="<?= e($data['filters']['date_to']) ?>">
            </div>
            <div style="display:flex; align-items:flex-end;">
                <button type="submit" class="btn btn-primary">Apply Filter</button>
            </div>
        </div>
    </form>
</div>

<!-- Summary Cards -->
<div class="responsive-grid gap-3 mb-4 summary-cards">
    <div class="card compact-card">
        <div class="card-body p-3">
            <div style="font-size:0.75rem; color:var(--text-muted);">Opening Stock (<?= e($data['filters']['date_from']) ?>)</div>
            <div style="font-size:1.25rem; font-weight:700;"><?= number_format($data['totals']['opening_quantity']) ?> units</div>
            <div style="font-size:0.85rem; color:var(--text-muted);"><?= money($data['totals']['opening_value']) ?></div>
        </div>
    </div>
    <div class="card compact-card">
        <div class="card-body p-3">
            <div style="font-size:0.75rem; color:var(--text-muted);">Current Stock</div>
            <div style="font-size:1.25rem; font-weight:700;"><?= number_format($data['totals']['current_quantity']) ?> units</div>
            <div style="font-size:0.85rem; color:var(--text-muted);"><?= money($data['totals']['current_value']) ?></div>
        </div>
    </div>
    <div class="card compact-card">
        <div class="card-body p-3">
            <div style="font-size:0.75rem; color:var(--text-muted);">Closing Stock (<?= e($data['filters']['date_to']) ?>)</div>
            <div style="font-size:1.25rem; font-weight:700;"><?= number_format($data['totals']['closing_quantity']) ?> units</div>
            <div style="font-size:0.85rem; color:var(--text-muted);"><?= money($data['totals']['closing_value']) ?></div>
        </div>
    </div>
</div>

<!-- Opening Stock Table -->
<div class="card mb-4">
    <div class="card-header">
        <h3 class="card-title">Opening Stock (<?= e($data['filters']['date_from']) ?>)</h3>
    </div>
    <div class="table-wrapper overflow-x-auto">
        <table class="data-table compact-table">
            <thead>
                <tr>
                    <th>Product</th>
                    <th>SKU</th>
                    <th>Cost Price</th>
                    <th>Quantity</th>
                    <th class="text-right">Value</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($data['opening_stock'] as $item): ?>
                <tr>
                    <td style="font-weight:600;"><?= e($item['name']) ?></td>
                    <td><?= e($item['sku']) ?></td>
                    <td><?= money($item['cost_price']) ?></td>
                    <td><?= number_format($item['opening_quantity']) ?></td>
                    <td class="text-right" style="font-weight:700;"><?= money($item['opening_value']) ?></td>
                </tr>
                <?php endforeach; ?>
                <?php if (empty($data['opening_stock'])): ?>
                <tr>
                    <td colspan="5" style="text-align:center; padding:24px; color:var(--text-muted);">No opening stock data found</td>
                </tr>
                <?php endif; ?>
            </tbody>
            <?php if (!empty($data['opening_stock'])): ?>
            <tfoot>
                <tr style="background:var(--bg-raised);">
                    <td colspan="3" style="font-weight:700;">Total</td>
                    <td style="font-weight:700;"><?= number_format($data['totals']['opening_quantity']) ?></td>
                    <td class="text-right" style="font-weight:700;"><?= money($data['totals']['opening_value']) ?></td>
                </tr>
            </tfoot>
            <?php endif; ?>
        </table>
    </div>
</div>

<!-- Current Stock Table -->
<div class="card mb-4">
    <div class="card-header">
        <h3 class="card-title">Current Stock</h3>
    </div>
    <div class="table-wrapper overflow-x-auto">
        <table class="data-table compact-table">
            <thead>
                <tr>
                    <th>Product</th>
                    <th>SKU</th>
                    <th>Cost Price</th>
                    <th>Selling Price</th>
                    <th>Quantity</th>
                    <th class="text-right">Value</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($data['current_stock'] as $item): ?>
                <tr>
                    <td style="font-weight:600;"><?= e($item['name']) ?></td>
                    <td><?= e($item['sku']) ?></td>
                    <td><?= money($item['cost_price']) ?></td>
                    <td><?= money($item['selling_price']) ?></td>
                    <td><?= number_format($item['current_quantity']) ?></td>
                    <td class="text-right" style="font-weight:700;"><?= money($item['current_value']) ?></td>
                </tr>
                <?php endforeach; ?>
                <?php if (empty($data['current_stock'])): ?>
                <tr>
                    <td colspan="6" style="text-align:center; padding:24px; color:var(--text-muted);">No current stock data found</td>
                </tr>
                <?php endif; ?>
            </tbody>
            <?php if (!empty($data['current_stock'])): ?>
            <tfoot>
                <tr style="background:var(--bg-raised);">
                    <td colspan="4" style="font-weight:700;">Total</td>
                    <td style="font-weight:700;"><?= number_format($data['totals']['current_quantity']) ?></td>
                    <td class="text-right" style="font-weight:700;"><?= money($data['totals']['current_value']) ?></td>
                </tr>
            </tfoot>
            <?php endif; ?>
        </table>
    </div>
</div>

<!-- Closing Stock Table -->
<div class="card">
    <div class="card-header">
        <h3 class="card-title">Closing Stock (<?= e($data['filters']['date_to']) ?>)</h3>
    </div>
    <div class="table-wrapper overflow-x-auto">
        <table class="data-table compact-table">
            <thead>
                <tr>
                    <th>Product</th>
                    <th>SKU</th>
                    <th>Cost Price</th>
                    <th>Quantity</th>
                    <th class="text-right">Value</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($data['closing_stock'] as $item): ?>
                <tr>
                    <td style="font-weight:600;"><?= e($item['name']) ?></td>
                    <td><?= e($item['sku']) ?></td>
                    <td><?= money($item['cost_price']) ?></td>
                    <td><?= number_format($item['closing_quantity']) ?></td>
                    <td class="text-right" style="font-weight:700;"><?= money($item['closing_value']) ?></td>
                </tr>
                <?php endforeach; ?>
                <?php if (empty($data['closing_stock'])): ?>
                <tr>
                    <td colspan="5" style="text-align:center; padding:24px; color:var(--text-muted);">No closing stock data found</td>
                </tr>
                <?php endif; ?>
            </tbody>
            <?php if (!empty($data['closing_stock'])): ?>
            <tfoot>
                <tr style="background:var(--bg-raised);">
                    <td colspan="3" style="font-weight:700;">Total</td>
                    <td style="font-weight:700;"><?= number_format($data['totals']['closing_quantity']) ?></td>
                    <td class="text-right" style="font-weight:700;"><?= money($data['totals']['closing_value']) ?></td>
                </tr>
            </tfoot>
            <?php endif; ?>
        </table>
    </div>
</div>
