<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">Historical stock trends and movement patterns</div>
    </div>
    <div class="flex gap-2 flex-wrap">
        <a href="<?= APP_URL ?>/reports?report=stock-trending&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-trending&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>

<!-- Filters -->
<div class="card mb-4">
    <div class="card-header">
        <h3 class="card-title">Filters</h3>
    </div>
    <form method="GET" class="p-3">
        <input type="hidden" name="report" value="stock-trending">
        <div class="responsive-grid gap-3">
            <div class="form-group">
                <label class="form-label">Date From</label>
                <input type="date" name="date_from" class="form-control" value="<?= e($data['filters']['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($data['filters']['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 ?>/reports?report=stock-trending" class="btn btn-outline w-full">Clear Filters</a>
            </div>
        </div>
    </form>
</div>

<style>
/* Responsive Grid Layout */
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(4, 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;
    }
    
    .btn-sm {
        padding: 0.4rem 0.75rem;
        font-size: 0.75rem;
    }
    
    .form-control {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
}
</style>

<!-- Summary Cards -->
<div class="responsive-grid gap-3 mb-4 summary-cards">
    <div class="card compact-card">
        <div class="p-3">
            <div class="text-xs text-muted">Analysis Period</div>
            <div class="text-xl font-bold"><?= $data['summary']['period_days'] ?> Days</div>
        </div>
    </div>
    <div class="card compact-card">
        <div class="p-3">
            <div class="text-xs text-muted">Total Sold</div>
            <div class="text-xl font-bold text-red-600"><?= number_format($data['summary']['total_sold']) ?></div>
        </div>
    </div>
    <div class="card compact-card">
        <div class="p-3">
            <div class="text-xs text-muted">Total Purchased</div>
            <div class="text-xl font-bold text-green-600"><?= number_format($data['summary']['total_purchased']) ?></div>
        </div>
    </div>
    <div class="card compact-card">
        <div class="p-3">
            <div class="text-xs text-muted">Total Transactions</div>
            <div class="text-xl font-bold text-blue-600"><?= number_format($data['summary']['total_transactions']) ?></div>
        </div>
    </div>
</div>

<!-- Stock Trending Chart -->
<div class="card mb-4">
    <div class="card-header">
        <h3 class="card-title">Stock Movement Trends</h3>
        <div class="text-sm text-muted">Daily stock in and out movements</div>
    </div>
    <div class="p-3">
        <canvas id="stockTrendChart" width="400" height="100"></canvas>
    </div>
</div>

<!-- Trending Table -->
<div class="card">
    <div class="card-header">
        <h3 class="card-title">Daily Stock Movement Details</h3>
    </div>
    <div class="overflow-x-auto">
        <table class="data-table">
            <thead>
                <tr>
                    <th class="text-left">Date</th>
                    <th class="text-center">Quantity Sold</th>
                    <th class="text-center">Quantity Purchased</th>
                    <th class="text-center">Net Movement</th>
                    <th class="text-center">Transaction Count</th>
                    <th class="text-center">Trend</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($data['trends'] as $trend): ?>
                <tr>
                    <td class="text-left"><?= date('M j, Y', strtotime($trend['date'])) ?></td>
                    <td class="text-center text-red-600"><?= number_format($trend['sold_quantity']) ?></td>
                    <td class="text-center text-green-600"><?= number_format($trend['purchased_quantity']) ?></td>
                    <td class="text-center font-bold <?= ($trend['purchased_quantity'] - $trend['sold_quantity']) >= 0 ? 'text-green-600' : 'text-red-600' ?>">
                        <?= number_format($trend['purchased_quantity'] - $trend['sold_quantity']) ?>
                    </td>
                    <td class="text-center"><?= number_format($trend['transaction_count']) ?></td>
                    <td class="text-center">
                        <?php 
                        $netMovement = $trend['purchased_quantity'] - $trend['sold_quantity'];
                        if ($netMovement > 0): ?>
                            <span class="badge bg-green-100 text-green-800">Stock In</span>
                        <?php elseif ($netMovement < 0): ?>
                            <span class="badge bg-red-100 text-red-800">Stock Out</span>
                        <?php else: ?>
                            <span class="badge bg-gray-100 text-gray-800">Balanced</span>
                        <?php endif; ?>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
            <tfoot>
                <tr class="font-bold bg-blue-50 border-t-2 border-blue-200">
                    <td class="text-left">Total</td>
                    <td class="text-center text-red-600"><?= number_format($data['summary']['total_sold']) ?></td>
                    <td class="text-center text-green-600"><?= number_format($data['summary']['total_purchased']) ?></td>
                    <td class="text-center <?= ($data['summary']['total_purchased'] - $data['summary']['total_sold']) >= 0 ? 'text-green-600' : 'text-red-600' ?>">
                        <?= number_format($data['summary']['total_purchased'] - $data['summary']['total_sold']) ?>
                    </td>
                    <td class="text-center"><?= number_format($data['summary']['total_transactions']) ?></td>
                    <td class="text-center">
                        <?php 
                        $netTotal = $data['summary']['total_purchased'] - $data['summary']['total_sold'];
                        if ($netTotal > 0): ?>
                            <span class="badge bg-green-100 text-green-800">Overall Stock In</span>
                        <?php elseif ($netTotal < 0): ?>
                            <span class="badge bg-red-100 text-red-800">Overall Stock Out</span>
                        <?php else: ?>
                            <span class="badge bg-gray-100 text-gray-800">Overall Balanced</span>
                        <?php endif; ?>
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>

<!-- Chart Script -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('stockTrendChart').getContext('2d');
    const trends = <?= json_encode(array_reverse($data['trends'])) ?>;
    
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: trends.map(t => new Date(t.date).toLocaleDateString()),
            datasets: [{
                label: 'Quantity Sold',
                data: trends.map(t => parseFloat(t.sold_quantity)),
                borderColor: 'rgb(239, 68, 68)',
                backgroundColor: 'rgba(239, 68, 68, 0.1)',
                tension: 0.1
            }, {
                label: 'Quantity Purchased',
                data: trends.map(t => parseFloat(t.purchased_quantity)),
                borderColor: 'rgb(34, 197, 94)',
                backgroundColor: 'rgba(34, 197, 94, 0.1)',
                tension: 0.1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                }
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
});
</script>
