@php
    $color_trends = [
        'up' => '#29a645',
        'flat' => '#0055b9',
        'down' => '#e81c0d'
    ];
@endphp

<style>
    td {
        padding: 5px;
        border-top: 1px solid #ededed;
        border-bottom: 1px solid #ededed;
    }
</style>

<table style="margin-top: 10px; width: 100%;">
    <tr style="background-color: #f5f5f5; border: 0;">
        <td style="font-weight: bold;">Date Comparison:</td>
        <td colspan="4" style="text-align: right; font-weight: bold;">{{ $formatted_date }}</td>
        <td colspan="4" style="text-align: right; background-color: #fddfdd; font-weight: bold;">{{ $formatted_previous_date }}</td>
        <td colspan="4" style="font-weight: bold;">&nbsp;</td>
    </tr>
    <tr style="border: 0 !important;">
        <th colspan="13" style="height: 2px !important; padding: 0;">&nbsp;</th>
    </tr>
    <tr style="background-color: #ededed; border: 0;">
        @if($is_vendor)
        <th style="text-align: left; font-weight: bold; padding: 10px 5px;">Vendor</th>
        @else
        <th style="text-align: left; font-weight: bold; padding: 10px 5px;">Brand</th>
        @endif
        <th style="text-align: right; font-weight: bold; padding: 10px 5px;">Sales</th>
        <th style="text-align: right; font-weight: bold; padding: 10px 5px;">Qty</th>
        <th style="text-align: right; font-weight: bold; padding: 10px 5px;">Profit</th>
        <th style="text-align: right; font-weight: bold; padding: 10px 5px;">Profit Margin</th>

        <th style="text-align: right; font-weight: bold; padding: 10px 5px; background-color: #fcc9c5;">Sales</th>
        <th style="text-align: right; font-weight: bold; padding: 10px 5px; background-color: #fcc9c5;">Qty</th>
        <th style="text-align: right; font-weight: bold; padding: 10px 5px; background-color: #fcc9c5;">Profit</th>
        <th style="text-align: right; font-weight: bold; padding: 10px 5px; background-color: #fcc9c5; border-right: 3px solid black;">Profit Margin</th>

        <th style="text-align: right; font-weight: bold; padding: 10px 5px;">Change Sales</th>
        <th style="text-align: right; font-weight: bold; padding: 10px 5px;">Change Qty</th>
        <th style="text-align: right; font-weight: bold; padding: 10px 5px;">Change Profit</th>
        <th style="text-align: right; font-weight: bold; padding: 10px 5px;">Change Profit Margin</th>
    </tr>

    @foreach($data as $el)
        @php
            $color_change_quantity = $color_trends[$el->status_change_quantity];
            $color_change_price = $color_trends[$el->status_change_price];
            $color_change_profit_margin = $color_trends[$el->status_change_profit_margin];
        @endphp

        <tr style="border-left: 0;border-right: 0;">
            @if($is_vendor)
            <td style="padding: 5px 5px; text-align: left; color:#757575;">{{ $el->brand_group_name }}</td>
            @else
            <td style="padding: 5px 5px; text-align: left; color:#757575;">{{ $el->brand_name }}</td>
            @endif
            <td style="padding: 5px 5px; text-align: right; color:#757575;">${{ number_format($el->price,2) }}</td>
            <td style="padding: 5px 5px; text-align: right; color:#757575;">{{ number_format($el->quantity) }}</td>
            <td style="padding: 5px 5px; text-align: right; color:#757575;">${{ number_format($el->profit_margin,2) }}</td>
            <td style="padding: 5px 5px; text-align: right; color:#757575;">{{ $el->profit_margin_percentage }}%</td>

            <td style="padding: 5px 5px; text-align: right; background-color: #fef3f1; color:#757575;">${{ number_format($el->previous_price,2) }}</td>
            <td style="padding: 5px 5px; text-align: right; background-color: #fef3f1; color:#757575;">{{ number_format($el->previous_quantity) }}</td>
            <td style="padding: 5px 5px; text-align: right; background-color: #fef3f1; color:#757575;">${{ number_format($el->previous_profit_margin,2) }}</td>
            <td style="padding: 5px 5px; text-align: right; background-color: #fef3f1; color:#757575; border-right: 3px solid black;">{{ $el->previous_profit_margin_percentage }}%</td>

            <td style="padding: 5px 5px; text-align: right; color: {{$color_change_price}};">
                <img
                    src="{{ env('APP_URL') }}/icon/trending_{{$el->status_change_price}}.png"
                    alt="trending_{{$el->status_change_price}}"
                    width="15"
                    height="15"
                    style="vertical-align: middle;"
                />
                ${{ number_format($el->change_price,2) }}
            </td>
            <td style="padding: 5px 5px; text-align: right; color: {{$color_change_quantity}};">
                <img
                    src="{{ env('APP_URL') }}/icon/trending_{{$el->status_change_quantity}}.png"
                    alt="trending_{{$el->status_change_quantity}}"
                    width="15"
                    height="15"
                    style="vertical-align: middle;"
                />
                {{ number_format($el->change_quantity) }}
            </td>
            <td style="padding: 5px 5px; text-align: right; color: {{$color_change_profit_margin}};">
                <img
                    src="{{ env('APP_URL') }}/icon/trending_{{$el->status_change_profit_margin}}.png"
                    alt="trending_{{$el->status_change_profit_margin}}"
                    width="15"
                    height="15"
                    style="vertical-align: middle;"
                />
                ${{ number_format($el->change_profit_margin,2) }}
            </td>
            <td style="padding: 5px 5px; text-align: right;">
                {{ $el->change_profit_margin_percentage }}%
            </td>
        </tr>
    @endforeach

    <tr style="background-color: #f5f5f5; border: 0;">
        <th style="border-bottom: 0; padding: 5px 5px; text-align: left; font-weight: bold;">Total</th>
        <th style="border-bottom: 0; padding: 5px 5px; text-align: right; font-weight: bold;">${{ number_format($meta['total_price'],2) }}</th>
        <th style="border-bottom: 0; padding: 5px 5px; text-align: right; font-weight: bold;">{{ number_format($meta['total_quantity']) }}</th>
        <th style="border-bottom: 0; padding: 5px 5px; text-align: right; font-weight: bold;">${{ number_format($meta['total_profit_margin'],2) }}</th>
        <th style="border-bottom: 0; padding: 5px 5px; text-align: right; font-weight: bold;">{{ $meta['total_profit_margin_percentage'] }}%</th>

        <th style="border-bottom: 0; padding: 5px 5px; text-align: right; font-weight: bold; background-color: #fcc9c5;">${{ number_format($meta['total_previous_price'],2) }}</th>
        <th style="border-bottom: 0; padding: 5px 5px; text-align: right; font-weight: bold; background-color: #fcc9c5;">{{ number_format($meta['total_previous_quantity']) }}</th>
        <th style="border-bottom: 0; padding: 5px 5px; text-align: right; font-weight: bold; background-color: #fcc9c5;">${{ number_format($meta['total_previous_profit_margin'],2) }}</th>
        <th style="border-bottom: 0; padding: 5px 5px; text-align: right; font-weight: bold; background-color: #fcc9c5; border-right: 3px solid black;">{{ $meta['total_previous_profit_margin_percentage'] }}%</th>

        <th style="border-bottom: 0; padding: 5px 5px; text-align: right; font-weight: bold;">${{ number_format($meta['total_change_price'],2) }}</th>
        <th style="border-bottom: 0; padding: 5px 5px; text-align: right; font-weight: bold;">{{ number_format($meta['total_change_quantity']) }}</th>
        <th style="border-bottom: 0; padding: 5px 5px; text-align: right; font-weight: bold;">${{ number_format($meta['total_change_profit_margin'],2) }}</th>
        <th style="border-bottom: 0; padding: 5px 5px; text-align: right; font-weight: bold;">{{ $meta['total_change_profit_margin_percentage'] }}%</th>
    </tr>

</table>