<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>Tax Report</h1>
        <div class="page-subtitle">Tax collection and breakdown analysis</div>
    </div>
    <div class="flex gap-2 flex-wrap">
        <a href="<?= APP_URL ?>/reports?report=tax&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=tax&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>
.tax-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.tax-table thead th {
    padding: 0.45rem 0.55rem;
    font-size: 0.72rem;
    line-height: 1.2;
    white-space: nowrap;
}

.tax-table tbody td {
    padding: 0.55rem;
    font-size: 0.82rem;
}

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

@media (max-width: 1100px) {
    .tax-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .tax-summary {
        grid-template-columns: 1fr;
    }

    .tax-table thead {
        display: none;
    }

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

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

    .tax-table tbody td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        align-items: flex-start;
        border: 0;
        padding: 0.45rem 0;
        text-align: right;
    }

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

<!-- 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="tax">
        <div class="grid-3 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>
                <div class="flex gap-2">
                    <button type="submit" class="btn btn-primary flex-1">Apply</button>
                    <a href="<?= APP_URL ?>/reports?report=tax" class="btn btn-outline flex-1">Clear</a>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- Summary Cards -->
<div class="grid-4 gap-4 mb-6 tax-summary">
    <div class="card">
        <div class="card-body">
            <div style="font-size:0.85rem; color:var(--text-muted);">Total Tax Collected</div>
            <div style="font-size:1.5rem; font-weight:700; color:var(--success);"><?= money($data['total_tax_collected']) ?></div>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <div style="font-size:0.85rem; color:var(--text-muted);">Total Sales Amount</div>
            <div style="font-size:1.5rem; font-weight:700; color:var(--primary);"><?= money($data['total_sales']) ?></div>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <div style="font-size:0.85rem; color:var(--text-muted);">Tax Groups Used</div>
            <div style="font-size:1.5rem; font-weight:700;"><?= count($data['summary']) ?></div>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <div style="font-size:0.85rem; color:var(--text-muted);">Effective Tax Rate</div>
            <div style="font-size:1.5rem; font-weight:700;"><?= $data['total_sales'] > 0 ? number_format(($data['total_tax_collected'] / $data['total_sales']) * 100, 2) : 0 ?>%</div>
        </div>
    </div>
</div>

<!-- Tax Group Summary -->
<div class="card mb-6">
    <div class="card-header">
        <h3 class="card-title">Tax Group Summary</h3>
    </div>
    <div class="table-wrapper">
        <table class="tax-table">
            <thead>
                <tr>
                    <th>Tax Group</th>
                    <th>Type</th>
                    <th>Rate</th>
                    <th>Sales Count</th>
                    <th>Total Sales</th>
                    <th class="text-right">Tax Collected</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($data['summary'] as $summary): ?>
                <tr>
                    <td style="font-weight:600;" data-label="Tax Group"><?= e($summary['tax_group_name']) ?></td>
                    <td data-label="Type">
                        <span class="badge badge-info"><?= strtoupper($summary['tax_type']) ?></span>
                    </td>
                    <td class="cell-value" data-label="Rate"><?= $summary['tax_rate'] ?><?= $summary['tax_type'] === 'percentage' ? '%' : '' ?></td>
                    <td data-label="Sales Count"><?= $summary['sale_count'] ?></td>
                    <td class="cell-value" data-label="Total Sales"><?= money($summary['total_sales_amount']) ?></td>
                    <td class="text-right cell-value" style="font-weight:700; color:var(--success);" data-label="Tax Collected"><?= money($summary['total_tax_collected']) ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>

<!-- Tax by Date -->
<?php if (!empty($data['tax_by_date'])): ?>
<div class="card mb-6">
    <div class="card-header">
        <h3 class="card-title">Tax by Date</h3>
    </div>
    <div class="table-wrapper">
        <table class="tax-table">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Sales Count</th>
                    <th>Total Sales</th>
                    <th class="text-right">Tax Collected</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($data['tax_by_date'] as $row): ?>
                <tr>
                    <td style="font-weight:600;" data-label="Date"><?= date('M j, Y', strtotime($row['tax_date'])) ?></td>
                    <td data-label="Sales Count"><?= $row['sale_count'] ?></td>
                    <td class="cell-value" data-label="Total Sales"><?= money($row['total_sales_amount']) ?></td>
                    <td class="text-right cell-value" style="font-weight:700; color:var(--success);" data-label="Tax Collected"><?= money($row['total_tax_collected']) ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>
<?php endif; ?>

<!-- Tax by Location -->
<?php if (!empty($data['tax_by_location'])): ?>
<div class="card mb-6">
    <div class="card-header">
        <h3 class="card-title">Tax by Location</h3>
    </div>
    <div class="table-wrapper">
        <table class="tax-table">
            <thead>
                <tr>
                    <th>Location</th>
                    <th>Sales Count</th>
                    <th>Total Sales</th>
                    <th class="text-right">Tax Collected</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($data['tax_by_location'] as $row): ?>
                <tr>
                    <td style="font-weight:600;" data-label="Location"><?= e($row['location_name'] ?? 'Main Location') ?></td>
                    <td data-label="Sales Count"><?= $row['sale_count'] ?></td>
                    <td class="cell-value" data-label="Total Sales"><?= money($row['total_sales_amount']) ?></td>
                    <td class="text-right cell-value" style="font-weight:700; color:var(--success);" data-label="Tax Collected"><?= money($row['total_tax_collected']) ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>
<?php endif; ?>

<!-- Tax by Category -->
<?php if (!empty($data['tax_by_category'])): ?>
<div class="card mb-6">
    <div class="card-header">
        <h3 class="card-title">Tax by Product Category</h3>
    </div>
    <div class="table-wrapper">
        <table class="tax-table">
            <thead>
                <tr>
                    <th>Category</th>
                    <th>Sales Count</th>
                    <th>Total Sales</th>
                    <th class="text-right">Tax Collected</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($data['tax_by_category'] as $row): ?>
                <tr>
                    <td style="font-weight:600;" data-label="Category"><?= e($row['category_name'] ?? 'Uncategorized') ?></td>
                    <td data-label="Sales Count"><?= $row['sale_count'] ?></td>
                    <td class="cell-value" data-label="Total Sales"><?= money($row['total_sales_amount']) ?></td>
                    <td class="text-right cell-value" style="font-weight:700; color:var(--success);" data-label="Tax Collected"><?= money($row['total_tax_collected']) ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>
<?php endif; ?>

<!-- Detailed Tax Breakdown -->
<div class="card">
    <div class="card-header">
        <h3 class="card-title">Detailed Tax Breakdown</h3>
    </div>
    <div class="table-wrapper">
        <table class="tax-table">
            <thead>
                <tr>
                    <th>Sale #</th>
                    <th>Date</th>
                    <th>Customer</th>
                    <th>Location</th>
                    <th>Tax Group</th>
                    <th>Items</th>
                    <th>Subtotal</th>
                    <th>Total</th>
                    <th>Payment Status</th>
                    <th class="text-right">Tax Amount</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($data['details'] as $detail): ?>
                <tr>
                    <td style="font-weight:600;" data-label="Sale #"><?= e($detail['sale_no']) ?></td>
                    <td class="cell-value" data-label="Date"><?= date('M j, Y', strtotime($detail['created_at'])) ?></td>
                    <td data-label="Customer"><?= e($detail['customer_name'] ?? 'Walk-in') ?></td>
                    <td data-label="Location"><?= e($detail['location_name'] ?? 'Main') ?></td>
                    <td data-label="Tax Group"><?= e($detail['tax_group_name']) ?></td>
                    <td data-label="Items"><?= $detail['item_count'] ?></td>
                    <td class="cell-value" data-label="Subtotal"><?= money($detail['subtotal']) ?></td>
                    <td class="cell-value" data-label="Total"><?= money($detail['total']) ?></td>
                    <td data-label="Payment Status">
                        <span class="badge badge-<?= $detail['payment_status'] === 'paid' ? 'success' : 'warning' ?>">
                            <?= strtoupper($detail['payment_status']) ?>
                        </span>
                    </td>
                    <td class="text-right cell-value" style="font-weight:700; color:var(--success);" data-label="Tax Amount"><?= money($detail['tax_amount']) ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
    <?php if (isset($data['pagination'])): ?>
    <?= paginationLinks($data['pagination'], APP_URL . '/reports?report=tax', $data['filters']) ?>
    <?php endif; ?>
</div>
