<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">Top suppliers by purchase volume and cost</div>
    </div>
    <div class="flex gap-2 flex-wrap">
        <a href="<?= APP_URL ?>/reports?report=top-suppliers&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=top-suppliers&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>

<script src="<?= APP_URL ?>/assets/js/chart.min.js"></script>

<!-- 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="top-suppliers">
        <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=top-suppliers" 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;
}

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

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

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

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

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

.suppliers-table .cell-supplier {
    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);
    }
    .top-suppliers-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .responsive-grid {
        grid-template-columns: 1fr;
    }
    .top-suppliers-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;
    }
    
    .suppliers-table thead th {
        padding: 0.35rem 0.4rem;
        font-size: 0.6rem;
    }
    
    .suppliers-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) {
    .suppliers-table thead {
        display: none;
    }

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

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

    .suppliers-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;
    }

    .suppliers-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 top-suppliers-summary summary-cards">
    <div class="card compact-card">
        <div class="p-3">
            <div class="text-xs text-muted">Total Suppliers</div>
            <div class="text-xl font-bold"><?= count($data['suppliers']) ?></div>
        </div>
    </div>
    <div class="card compact-card">
        <div class="p-3">
            <div class="text-xs text-muted">Total Purchases</div>
            <div class="text-xl font-bold text-green-600"><?= money($data['summary']['total_purchases']) ?></div>
        </div>
    </div>
    <div class="card compact-card">
        <div class="p-3">
            <div class="text-xs text-muted">Total Items</div>
            <div class="text-xl font-bold text-blue-600"><?= number_format($data['summary']['total_items']) ?></div>
        </div>
    </div>
    <div class="card compact-card">
        <div class="p-3">
            <div class="text-xs text-muted">Average Purchase</div>
            <div class="text-xl font-bold text-purple-600"><?= money($data['summary']['average_purchase']) ?></div>
        </div>
    </div>
</div>

<!-- Top Suppliers Chart -->
<div class="card mb-4">
    <div class="card-header">
        <h3 class="card-title">Top Suppliers by Cost</h3>
        <div class="text-sm text-muted">Bar chart showing top suppliers by purchase cost</div>
    </div>
    <div class="p-3">
        <canvas id="supplierChart" width="400" height="200"></canvas>
    </div>
</div>

<!-- Suppliers Table -->
<div class="card">
    <div class="card-header">
        <h3 class="card-title">Suppliers Analysis</h3>
    </div>
    <div class="overflow-x-auto">
        <?php if (empty($data['suppliers'])): ?>
        <div class="p-4 text-center text-muted">
            <p>No supplier data found. This could mean:</p>
            <ul class="text-left mt-2" style="list-style: disc; padding-left: 20px;">
                <li>No purchase items exist in the database</li>
                <li>All purchase items have been filtered out by date range</li>
                <li>There may be an issue with the data structure</li>
            </ul>
        </div>
        <?php else: ?>
        <table class="data-table top-suppliers-table">
            <thead>
                <tr>
                    <th class="text-left">Supplier</th>
                    <th class="text-center">Purchase Count</th>
                    <th class="text-center">Total Quantity</th>
                    <th class="text-center">Unique Products</th>
                    <th class="text-center">Avg Unit Cost</th>
                    <th class="text-center">Total Cost</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($data['suppliers'] as $supplier): ?>
                <tr>
                    <td class="text-left font-semibold" data-label="Supplier"><?= e($supplier['supplier'] ?? 'Direct') ?></td>
                    <td class="text-center" data-label="Purchase Count"><?= number_format($supplier['purchase_count']) ?></td>
                    <td class="text-center" data-label="Total Quantity"><?= number_format($supplier['total_quantity']) ?></td>
                    <td class="text-center" data-label="Unique Products"><?= number_format($supplier['unique_products']) ?></td>
                    <td class="text-center cell-value" data-label="Avg Unit Cost"><?= money($supplier['avg_unit_cost']) ?></td>
                    <td class="text-center font-bold text-red-600 cell-value" data-label="Total Cost"><?= money($supplier['total_cost']) ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
            <tfoot>
                <tr class="font-bold bg-blue-50 border-t-2 border-blue-200">
                    <td class="text-left" data-label="Supplier">TOTAL</td>
                    <td class="text-center" data-label="Purchase Count"><?= number_format($data['summary']['total_purchases']) ?></td>
                    <td class="text-center" data-label="Total Quantity"><?= number_format($data['summary']['total_quantity']) ?></td>
                    <td class="text-left" data-label="Unique Products"></td>
                    <td class="text-center cell-value" data-label="Avg Unit Cost"><?= money($data['summary']['avg_unit_cost']) ?></td>
                    <td class="text-center text-red-600 cell-value" data-label="Total Cost"><?= money($data['summary']['total_cost']) ?></td>
                </tr>
            </tfoot>
        </table>
        <?php endif; ?>
    </div>
</div>

<!-- Chart Script -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const supplierCtx = document.getElementById('supplierChart').getContext('2d');
    const suppliers = <?= json_encode($data['suppliers']) ?>;
    
    if (suppliers && suppliers.length > 0) {
        const supplierColors = [
            'rgba(99, 102, 241, 0.8)',
            'rgba(16, 185, 129, 0.8)',
            'rgba(245, 158, 11, 0.8)',
            'rgba(239, 68, 68, 0.8)',
            'rgba(139, 92, 246, 0.8)',
            'rgba(20, 184, 166, 0.8)',
            'rgba(236, 72, 153, 0.8)',
            'rgba(249, 115, 22, 0.8)',
            'rgba(6, 182, 212, 0.8)',
            'rgba(168, 85, 247, 0.8)'
        ];
        
        const supplierBorderColors = [
            'rgb(99, 102, 241)',
            'rgb(16, 185, 129)',
            'rgb(245, 158, 11)',
            'rgb(239, 68, 68)',
            'rgb(139, 92, 246)',
            'rgb(20, 184, 166)',
            'rgb(236, 72, 153)',
            'rgb(249, 115, 22)',
            'rgb(6, 182, 212)',
            'rgb(168, 85, 247)'
        ];

        new Chart(supplierCtx, {
            type: 'bar',
            data: {
                labels: suppliers.map(s => s.supplier || 'Direct'),
                datasets: [{
                    label: 'Total Cost',
                    data: suppliers.map(s => parseFloat(s.total_cost)),
                    backgroundColor: suppliers.map((_, i) => supplierColors[i % supplierColors.length]),
                    borderColor: suppliers.map((_, i) => supplierBorderColors[i % supplierBorderColors.length]),
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function(value) {
                                return '$' + value.toLocaleString();
                            }
                        }
                    }
                }
            }
        });
    }
});
</script>
