@include('styles.pdfs')
<style>
    body {
        font-family: 'Arial', sans-serif;
        font-size: 10px;
        line-height: 1.4;
        color: #333;
        margin: 0;
        padding: 15px;
    }

    .header {
        text-align: center;
        margin-bottom: 20px;
        border-bottom: 2px solid #007cbf;
        padding-bottom: 10px;
    }

    .header h1 {
        font-size: 18px;
        font-weight: bold;
        color: #007cbf;
        margin: 0 0 5px 0;
    }

    .header .subtitle {
        font-size: 12px;
        color: #666;
        margin: 0;
    }

    .summary-section {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 5px;
        padding: 10px;
        margin-bottom: 15px;
    }

    .summary-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 10px;
    }

    .summary-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 0;
        border-bottom: 1px solid #eee;
    }

    .summary-item:last-child {
        border-bottom: none;
    }

    .summary-label {
        font-weight: bold;
        color: #495057;
    }

    .summary-value {
        font-weight: bold;
        color: #007cbf;
    }

    .content {
        font-size: 9px;
    }

    .table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 15px;
    }

    .table th {
        background: #007cbf;
        color: white;
        font-weight: bold;
        padding: 8px 5px;
        text-align: center;
        border: 1px solid #005cbf;
    }

    .table td {
        padding: 6px 5px;
        border: 1px solid #dee2e6;
        text-align: center;
        vertical-align: middle;
    }

    .table tbody tr:nth-child(even) {
        background-color: #f8f9fa;
    }

    .category-header {
        background: #e9ecef;
        font-weight: bold;
        color: #495057;
        text-align: left;
        padding: 8px 5px;
    }

    .item-row {
        background: white;
    }

    .subtotal-row {
        background: #f8f9fa;
        font-weight: bold;
        color: #495057;
    }

    .total-row {
        background: #007cbf !important;
        color: white;
        font-weight: bold;
        font-size: 11px;
    }

    .currency {
        font-weight: bold;
        color: #007cbf;
    }

    .text-right {
        text-align: right;
    }

    .text-left {
        text-align: left;
    }

    .text-center {
        text-align: center;
    }

    .payment-section {
        margin-top: 20px;
        border-top: 2px solid #007cbf;
        padding-top: 15px;
    }

    .payment-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 15px;
    }

    .payment-table th {
        background: #28a745;
        color: white;
        font-weight: bold;
        padding: 8px 5px;
        text-align: center;
        border: 1px solid #1e7e34;
    }

    .payment-table td {
        padding: 6px 5px;
        border: 1px solid #dee2e6;
        text-align: center;
    }

    .footer {
        margin-top: 20px;
        text-align: center;
        font-size: 8px;
        color: #666;
        border-top: 1px solid #dee2e6;
        padding-top: 10px;
    }

    .page-break {
        page-break-before: always;
    }
</style>

{{-- Include letterhead --}}
@includeIf('_partials.letterhead-pdf')

<div class="header">
    <h1>Session Report</h1>
    <p class="subtitle">{{ $names }}</p>
    <p class="subtitle">
        @if($start_date)
            {{ $start_date }}
            @if($end_date && $start_date !== $end_date)
                - {{ $end_date }}
            @endif
        @endif
    </p>
</div>

<div class="summary-section">
    <div class="summary-grid">
        <div class="summary-item">
            <span class="summary-label">Total Sales:</span>
            <span class="summary-value">{{ number_format($total_sales) }} XAF</span>
        </div>
        <div class="summary-item">
            <span class="summary-label">Total Discount:</span>
            <span class="summary-value">{{ number_format($discount) }} XAF</span>
        </div>
        <div class="summary-item">
            <span class="summary-label">Total Payable:</span>
            <span class="summary-value">{{ number_format($total_payable) }} XAF</span>
        </div>
        <div class="summary-item">
            <span class="summary-label">Transactions:</span>
            <span class="summary-value">{{ $transactions_count }}</span>
        </div>
    </div>
</div>

<div class="content">
    <table class="table">
        <thead>
        <tr>
            <th style="width: 5%;">#</th>
            <th style="width: 45%;">Item</th>
            <th style="width: 15%;">Quantity</th>
            <th style="width: 15%;">Unit Price</th>
            <th style="width: 20%;">Total</th>
        </tr>
        </thead>
        <tbody>
        @php($rowNumber = 1)
        @php($grandTotal = 0)
        @foreach($cat_items as $category => $items)
            <tr class="category-header">
                <td colspan="5" class="text-left">{{ $category }}</td>
            </tr>
            @php($categoryTotal = 0)
            @foreach($items as $item)
                <tr class="item-row">
                    <td>{{ $rowNumber++ }}</td>
                    <td class="text-left">{{ $item['name'] }}</td>
                    <td>{{ number_format($item['qty'], 2) }}</td>
                    <td class="currency">{{ number_format($item['unit_price']) }} XAF</td>
                    <td class="currency">{{ number_format($item['total']) }} XAF</td>
                </tr>
                @php($categoryTotal += $item['total'])
            @endforeach
            <tr class="subtotal-row">
                <td colspan="4" class="text-right">Category Subtotal:</td>
                <td class="currency">{{ number_format($categoryTotal) }} XAF</td>
            </tr>
            @php($grandTotal += $categoryTotal)
        @endforeach
        <tr class="total-row">
            <td colspan="4" class="text-right">GRAND TOTAL:</td>
            <td>{{ number_format($grandTotal) }} XAF</td>
        </tr>
        </tbody>
    </table>
</div>

<div class="payment-section">
    <h3 style="color: #28a745; margin-bottom: 10px; text-align: center;">Payment Methods</h3>
    <table class="payment-table">
        <thead>
        <tr>
            <th style="width: 70%;">Payment Method</th>
            <th style="width: 30%;">Amount</th>
        </tr>
        </thead>
        <tbody>
        @php($totalPaid = 0)
        @foreach($payment_methods as $method => $amount)
            <tr>
                <td class="text-left">{{ $method }}</td>
                <td class="currency">{{ number_format($amount) }} XAF</td>
            </tr>
            @php($totalPaid += $amount)
        @endforeach
        <tr class="total-row">
            <td class="text-right">TOTAL PAID:</td>
            <td>{{ number_format($totalPaid) }} XAF</td>
        </tr>
        </tbody>
    </table>
</div>

<div class="footer">
    <p>Generated by: {{ auth()->user()->name ?? 'System' }}</p>
    <p>Generated on: {{ date('D, Y-m-d H:i:s') }}</p>
    <p>Report ID: {{ uniqid() }}</p>
</div>