@php
    // class is not working, so use style
    $styleBackgroundColorBlue = 'background-color:#95d7f0;';
    $styleBackgroundColorYellow = 'background-color:#FFFFC0;';
    $styleBorderAround = 'border: 1px solid black;';
    $styleTextLeft = 'text-align: left;';
    $styleTextCenter = 'text-align: center;';
    $styleTextRight = 'text-align: right;';
    $styleFontSize16 = 'font-size:16px;';
@endphp

<table>
    <tr>
        <td></td>
        <td colspan="6" style="{{ $styleBackgroundColorBlue.$styleBorderAround.$styleFontSize16 }}">
            {{ $commission->administrator->name }} ( {{ $commission->activity->name }} )
        </td>
        <td colspan="2" style="{{ $styleBackgroundColorBlue.$styleBorderAround.$styleTextRight }}">
            截至 {{ $now->format('Y/m/d H:i') }}
        </td>
    </tr>
    
    <tr>
        <td></td>
        <td></td>
        <td style="{{ $styleBackgroundColorBlue.$styleBorderAround.$styleTextCenter }}"></td>
        <td style="{{ $styleBackgroundColorBlue.$styleBorderAround.$styleTextCenter }}">訂單數</td>
        <td style="{{ $styleBackgroundColorBlue.$styleBorderAround.$styleTextRight }}">營收</td>
    </tr>

    @foreach ($orderSummary as $type => $order)
        @php
            $typeName = [
                'paid' => '已付',
                'unpaid' => '未付',
                'all' => '總計',
            ][$type];
        @endphp 
        <tr>
            <td></td>
            <td></td>
            <td style="{{ $styleBackgroundColorBlue.$styleBorderAround.$styleTextCenter }}">{{ $typeName }}</td>
            <td style="{{ $styleBorderAround.$styleTextCenter }}">{{ $order['count'] }}</td>
            <td style="{{ $styleBorderAround.$styleTextRight }}">$ {{ number_format($order['total']) }}</td>
        </tr>
    @endforeach

    <tr>
        <td></td>
        <td></td>
        <td style="{{ $styleBorderAround }}">平均客單</td>
        <td style="{{ $styleBorderAround.$styleTextCenter }}" colspan="2">$ {{ number_format($perCustomerTransaction) }}</td>
    </tr>
 
    <tr>
        <td></td>
    </tr>
   
    <tr>
        <td style="{{ $styleBorderAround.$styleTextCenter }}" >類別</td>
        <td style="{{ $styleBorderAround.$styleTextLeft }}"   >品項</td>
        <td style="{{ $styleBorderAround.$styleTextRight }}"  >團購價</td>
        <td style="{{ $styleBorderAround.$styleTextCenter }}" >已付款組數</td>
        <td style="{{ $styleBorderAround.$styleTextCenter }}" >未付款組數</td>
        <td style="{{ $styleBorderAround.$styleTextCenter }}" >總銷售組數</td>
        <td style="{{ $styleBorderAround.$styleTextRight }}"  >小計</td>
        <td style="{{ $styleBorderAround.$styleTextCenter }}" >訂單占比</td>
        <td style="{{ $styleBorderAround.$styleTextCenter }}" >銷售額占比</td>
    </tr>

    @foreach ($products['all'] as $product)
        @php
            $paidProduct = $products['paid'][$product['productId']] ?? '';
            $unPaidProduct = $products['unpaid'][$product['productId']] ?? '';
        @endphp
        <tr>    
            <td style="{{ $styleBorderAround.$styleTextCenter }}" >{{ $product['productPropertyName'] }}</td>
            <td style="{{ $styleBorderAround.$styleTextLeft }}"   >{{ $product['productName'] }}</td>
            <td style="{{ $styleBorderAround.$styleTextRight }}"  >$ {{ number_format($product['price']) }}</td>
            <td style="{{ $styleBorderAround.$styleTextCenter }}" >{{ $paidProduct['quantity'] ?? 0 }}</td>
            <td style="{{ $styleBorderAround.$styleTextCenter }}" >{{ $unPaidProduct['quantity'] ?? 0 }}</td>
            <td style="{{ $styleBorderAround.$styleTextCenter }}" >{{ $product['quantity'] ?? 0 }}</td>
            <td style="{{ $styleBorderAround.$styleTextRight }}"  >$ {{ number_format($product['total']) }}</td>
            <td style="{{ $styleBorderAround.$styleTextCenter }}" >{{ $product['quantityPercent'] }} % </td>
            <td style="{{ $styleBorderAround.$styleTextCenter }}" >{{ $product['totalPercent'] }} % </td>
        </tr>
    @endforeach

    {{-- 運費 --}}
    <tr>
        <td style="{{ $styleBorderAround.$styleTextCenter }}"></td>
        <td style="{{ $styleBorderAround.$styleTextLeft }}">運費</td>
        <td style="{{ $styleBorderAround }}"></td>
        <td style="{{ $styleBorderAround }}"></td>
        <td style="{{ $styleBorderAround }}"></td>
        <td style="{{ $styleBorderAround }}"></td>
        <td style="{{ $styleBorderAround.$styleTextRight }}">$ {{ number_format($freightFee) }}</td>
        <td style="{{ $styleBorderAround }}"></td>
        <td style="{{ $styleBorderAround }}"></td>
    </tr>
    
    {{-- 折扣 --}}
    <tr>
        <td style="{{ $styleBorderAround.$styleTextCenter }}"></td>
        <td style="{{ $styleBorderAround.$styleTextLeft }}">(折扣)</td>
        <td style="{{ $styleBorderAround }}"></td>
        <td style="{{ $styleBorderAround }}"></td>
        <td style="{{ $styleBorderAround }}"></td>
        <td style="{{ $styleBorderAround }}"></td>
        <td style="{{ $styleBorderAround.$styleTextRight }}"> - $ {{ number_format($discountFee) }}</td>
        <td style="{{ $styleBorderAround }}"></td>
        <td style="{{ $styleBorderAround }}"></td>
    </tr>

    {{-- 總計 --}}
    <tr>
        <td style="{{ $styleBackgroundColorYellow.$styleBorderAround.$styleTextCenter }}" colspan="2">銷售量總計</td>
        <td style="{{ $styleBorderAround }}"></td>
        <td style="{{ $styleBorderAround.$styleTextCenter }}">{{ $productsSum['paid'] }}</td>
        <td style="{{ $styleBorderAround.$styleTextCenter }}">{{ $productsSum['unpaid'] }}</td>
        <td style="{{ $styleBorderAround.$styleTextCenter }}">{{ $productsSum['all'] }}</td>
        <td style="{{ $styleBorderAround.$styleTextRight }}">$ {{ number_format($productsSum['total']) }}</td>
        <td style="{{ $styleBorderAround }}"></td>
        <td style="{{ $styleBorderAround }}"></td>
    </tr>
</table>