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

    $background_color_badge = [
        'up' => '#daf6e0',
        'flat' => '#ebf4ff',
        'down' => '#fef2f0'
    ];
@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="1" style="text-align: right; font-weight: bold;">{{ $formatted_date }}</td>
        <td colspan="1" style="text-align: right; background-color: #fddfdd; font-weight: bold;">{{ $formatted_previous_date }}</td>
        <td colspan="1" 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;">Purchases</th>

        <th style="text-align: right; font-weight: bold; padding: 10px 5px; background-color: #fcc9c5;">Purchases</th>

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

    @foreach($data as $el)
        @php
            $color_change_cost = $color_trends[$el->status_change_cost];
            $color_background_badge = $background_color_badge[$el->status_change_cost];
        @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->cost,2) }}</td>

            <td style="padding: 5px 5px; text-align: right; background-color: #fef3f1; color:#757575;">${{ number_format($el->previous_cost,2) }}</td>

            <td style="height: 5mm; padding: 5px 5px; text-align: right !important; color: {{$color_change_cost}};">
                <span style="float: right;">
                    ${{ number_format($el->change_cost,2) }}
                </span>
                <span style="float: right;">
                    &nbsp;
                </span>
                <span style="float: right; height: 3mm; padding: 5px 7px 3px 7px; border-radius: 10px; background-color: {{$color_background_badge}}; color: {{$color_change_cost}};">
                    <img
                        src="{{ env('APP_URL') }}/icon/trending_{{$el->status_change_cost}}.png"
                        alt="trending_{{$el->status_change_cost}}"
                        width="15"
                        height="15"
                    />
                    &nbsp;
                    <span style="vertical-align: super;">
                        {{ number_format($el->change_cost_percentage,2) }}%
                    </span>
                </span>
            </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_cost'],2) }}</th>

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

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

</table>