<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">Product-wise sales breakdown and performance</div>
    </div>
    <div class="flex gap-2 flex-wrap">
        <a href="<?= APP_URL ?>/reports?report=product-sales&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=product-sales&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="product-sales">
        <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">Category</label>
                <select name="category_id" class="form-control">
                    <option value="">All Categories</option>
                    <?php
                    $categories = db()->prepare("SELECT id, name FROM categories WHERE tenant_id = ? ORDER BY name");
                    $categories->execute([Auth::tenantId()]);
                    foreach ($categories->fetchAll() as $cat):
                    ?>
                    <option value="<?= $cat['id'] ?>" <?= $data['filters']['category_id'] == $cat['id'] ? 'selected' : '' ?>>
                        <?= e($cat['name']) ?>
                    </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
                    $locations = db()->prepare("SELECT id, name FROM locations WHERE tenant_id = ? ORDER BY name");
                    $locations->execute([Auth::tenantId()]);
                    foreach ($locations->fetchAll() as $loc):
                    ?>
                    <option value="<?= $loc['id'] ?>\" <?= $data['filters']['location_id'] == $loc['id'] ? 'selected' : '' ?>>
                        <?= e($loc['name']) ?>
                    </option>
                    <?php endforeach; ?>
                </select>
            </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=product-sales" 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;
}

.product-sales-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

/* Compact Table */
.product-sales-table thead th {
    padding: 0.4rem 0.5rem;
    font-size: 0.65rem;
    line-height: 1.1;
    white-space: nowrap;
}

.product-sales-table tbody td {
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
}

.product-sales-table .cell-sku,
.product-sales-table .cell-value {
    white-space: nowrap;
}

.product-sales-table .cell-product {
    min-width: 140px;
}

/* 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);
    }
    .product-sales-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .responsive-grid {
        grid-template-columns: 1fr;
    }
    .product-sales-summary {
        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;
    }
    
    .product-sales-table thead th {
        padding: 0.35rem 0.4rem;
        font-size: 0.6rem;
    }
    
    .product-sales-table tbody td {
        padding: 0.35rem 0.4rem;
        font-size: 0.7rem;
    }
    
    .btn-sm {
        padding: 0.4rem 0.75rem;
        font-size: 0.75rem;
    }
    
    .form-control {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
}

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

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

    .product-sales-table tbody tr {
        border-bottom: 1px solid #e5e7eb;
        padding: 0.5rem 0;
    }

    .product-sales-table tbody td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        align-items: flex-start;
        border: 0;
        padding: 0.35rem 0;
        text-align: right;
        font-size: 0.7rem;
    }

    .product-sales-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6b7280;
        text-align: left;
        font-size: 0.65rem;
    }
}
</style>

<!-- Summary Cards -->
<div class="responsive-grid gap-3 mb-4 product-sales-summary summary-cards">
    <div class="card compact-card">
        <div class="p-3">
            <div class="text-xs text-muted">Total Products Sold</div>
            <div class="text-xl font-bold"><?= $data['summary']['total_products'] ?></div>
        </div>
    </div>
    <div class="card compact-card">
        <div class="p-3">
            <div class="text-xs text-muted">Net Revenue (excl. VAT)</div>
            <div class="text-xl font-bold text-green-600"><?= money($data['summary']['total_net_revenue']) ?></div>
        </div>
    </div>
    <div class="card compact-card">
        <div class="p-3">
            <div class="text-xs text-muted">VAT/Tax Amount</div>
            <div class="text-xl font-bold text-orange-600"><?= money($data['summary']['total_tax_amount']) ?></div>
        </div>
    </div>
    <div class="card compact-card">
        <div class="p-3">
            <div class="text-xs text-muted">Total Revenue (incl. VAT)</div>
            <div class="text-xl font-bold text-blue-600"><?= money($data['summary']['total_revenue']) ?></div>
            <div class="text-xs text-muted mt-1">
                Total Revenue + VAT
            </div>
        </div>
    </div>
</div>

<!-- Product Sales Table -->
<div class="card">
    <div class="card-header">
        <h3 class="card-title">Product Sales Details</h3>
    </div>
    <div class="overflow-x-auto">
        <table class="data-table product-sales-table">
            <thead>
                <tr>
                    <th class="text-left">Product</th>
                    <th class="text-left">SKU</th>
                    <th class="text-left">Category</th>
                    <th class="text-center">Units Sold</th>
                    <th class="text-center">Net Revenue</th>
                    <th class="text-center">VAT</th>
                    <th class="text-center">Total Revenue</th>
                    <th class="text-center">Cost</th>
                    <th class="text-center">Profit</th>
                    <th class="text-center">Margin</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($data['product_sales'] as $product): ?>
                <tr>
                    <td class="text-left cell-product" data-label="Product"><?= e($product['name']) ?></td>
                    <td class="text-left cell-sku" data-label="SKU"><?= e($product['sku']) ?></td>
                    <td class="text-left" data-label="Category"><?= e($product['category']) ?></td>
                    <td class="text-center" data-label="Units Sold"><?= number_format($product['units_sold']) ?></td>
                    <td class="text-center cell-value" data-label="Net Revenue"><?= money($product['net_revenue']) ?></td>
                    <td class="text-center cell-value text-orange-600" data-label="VAT"><?= money($product['tax_amount']) ?></td>
                    <td class="text-center cell-value" data-label="Total Revenue"><?= money($product['revenue']) ?></td>
                    <td class="text-center cell-value" data-label="Cost"><?= money($product['cost']) ?></td>
                    <td class="text-center cell-value <?= $product['profit'] >= 0 ? 'text-green-600' : 'text-red-600' ?>" data-label="Profit"><?= money($product['profit']) ?></td>
                    <td class="text-center <?= $product['margin'] >= 0 ? 'text-green-600' : 'text-red-600' ?>" data-label="Margin"><?= number_format($product['margin'], 1) ?>%</td>
                </tr>
                <?php endforeach; ?>
                <?php
                // Calculate totals
                $total_units = array_sum(array_column($data['product_sales'], 'units_sold'));
                $total_net_revenue = array_sum(array_column($data['product_sales'], 'net_revenue'));
                $total_tax_amount = array_sum(array_column($data['product_sales'], 'tax_amount'));
                $total_revenue = array_sum(array_column($data['product_sales'], 'revenue'));
                $total_cost = array_sum(array_column($data['product_sales'], 'cost'));
                $total_profit = array_sum(array_column($data['product_sales'], 'profit'));
                $avg_margin = $total_revenue > 0 ? ($total_profit / $total_revenue) * 100 : 0;
                ?>
                <tr class="font-bold bg-blue-50 border-t-2 border-blue-200">
                    <td colspan="3" class="text-right">TOTALS:</td>
                    <td class="text-center"><?= number_format($total_units) ?></td>
                    <td class="text-center"><?= money($total_net_revenue) ?></td>
                    <td class="text-center text-orange-600"><?= money($total_tax_amount) ?></td>
                    <td class="text-center"><?= money($total_revenue) ?></td>
                    <td class="text-center"><?= money($total_cost) ?></td>
                    <td class="text-center <?= $total_profit >= 0 ? 'text-green-600' : 'text-red-600' ?>"><?= money($total_profit) ?></td>
                    <td class="text-center <?= $avg_margin >= 0 ? 'text-green-600' : 'text-red-600' ?>"><?= number_format($avg_margin, 1) ?>%</td>
                </tr>
            </tbody>
        </table>
    </div>
    
    <?php if (isset($data['pagination'])): ?>
    <?= paginationLinks($data['pagination'], APP_URL . '/reports?report=product-sales', $data['filters']) ?>
    <?php endif; ?>
</div>
