@if($isDownload && $isDownload == true)
    <style>
        .__cat_stats{
            border: 1px solid;
            margin-bottom: 10px;
            text-align: center;
            padding: 5px;
            width: 100%;
        }
        .bg-grey {
            background-color: #efefef !important;
        }
        .striped-table th {
            font-weight: 400;
            /*font-size: 14px;*/
        }

        p{
            margin-top: 0;
            margin-bottom: 0;
        }
        tbody {
            text-align: center;
        }
        table{
            margin: 0;
            border-collapse: collapse;
            width: 100%;
            color: #212529;
        }
        .table-top{
            width: 100%;
            margin-bottom: 10px;
        }
        .table-bordered {
            border: 1px solid #dee2e6;
        }
        .row-pdf {
            margin-right: -15px;
            margin-left: -15px;
            margin-top: 40px;
            display: inline-block;
            text-align: center;
        }
        .col-pdf-4{
            position: relative;
            width: 100%;
            max-width: 90%;
            padding-right: 10px;
            padding-left: 10px;
            display: inline-block;
            vertical-align: top !important;
        }
        @page {
            margin: 10px;
            padding: 0;
            font-size: 12px;
        }
        .table-bordered td, .table-bordered th {
            border: 1px solid #dee2e6;
        }
        .table td, .table th {
            padding: 5px;
            vertical-align: top;
            font-size: 10px;
        }
        .text-right{
            text-align: right;
        }
        .consolidated-main-headings {
            text-align: center;
            background-color: #fff00d;
            padding: 4px;
            border-radius: 30px;
        }
        .text-uppercase {
            text-transform: uppercase!important;
        }
        .padding-cell{
            /* padding: 8px; */
            font-size: 12px;
        }
        .cate_number {
            margin-top: -20px;
            margin-bottom: 10px;
        }
        .w-50{
            width: 50%;
        }
        .rowf .table {
            margin-bottom: 1rem!important;
        }

    </style>
@endif
<style>
    .padding-cell .text-uppercase {
        font-weight: 700;
    }
    .consolidated-product-sale th {
        cursor: pointer;
    }
</style>

<div class="row">
    <div class="col-md-12">
        <div class="table-responsive">
            <table class="striped-table w-100 font13 mt-3 bg-grey table-top" cellpadding="2">
                @php $colspan = 4; @endphp
                <tr>

                    <th class="padding-cell">
                        <div class="consolidated-main-headings">
                            <span class="text-uppercase">{!! __('report.total_amount_this_month') !!}</span><br>
                            <span>{!! numberFormat($result['total_amount_current'], 1, true) !!}</span>
                        </div>
                    </th>

                    <th class="padding-cell">
                        <div class="consolidated-main-headings">
                            <span class="text-uppercase">{!! __('report.total_amount_last_month') !!}</span><br>
                            <span>{{ numberFormat($result['total_amount_last'], 1, true) }}</span>
                        </div>
                    </th>

                    <th class="padding-cell">
                        <div class="consolidated-main-headings">
                            <span class="text-uppercase">{!! __('report.total_pcs_this_month') !!}</span><br>
                            <span>{{ numberFormat($result['total_qty_current'], 1, false, false, 0) }}</span>
                        </div>
                    </th>
                    <th class="padding-cell">
                        <div class="consolidated-main-headings">
                            <span class="text-uppercase">{!! __('report.total_pcs_last_month') !!}</span><br>
                            <span>{{ numberFormat($result['total_qty_last'], 1, false, false, 0) }}</span>
                        </div>
                    </th>
                </tr>
                <tr>
                    <th class="padding-cell">
                        <div class="consolidated-main-headings">
                            <span class="text-uppercase">{!! __('report.most_sale_this_month') !!}</span><br>
                            <span>{!! $result['most_sale_current'] != '' ? $result['most_sale_current'] : '--' !!}</span>
                        </div>
                    </th>
                    <th class="padding-cell">
                        <div class="consolidated-main-headings">
                            <span class="text-uppercase">{!! __('report.most_sale_last_month') !!}</span><br>
                            <span>{!! $result['most_sale_last'] != '' ? $result['most_sale_last'] : '--' !!}</span>
                        </div>
                    </th>
                    <th class="padding-cell">
                        <div class="consolidated-main-headings">
                            <span class="text-uppercase">{!! __('report.worst_sale_this_month') !!}</span><br>
                            <span>{!! $result['w_sale_current'] != '' ? $result['w_sale_current'] : '--' !!}</span>
                        </div>
                    </th>
                    <th class="padding-cell">
                        <div class="consolidated-main-headings">
                            <span class="text-uppercase">{!! __('report.worst_sale_last_month') !!}</span><br>
                            <span>{!! $result['w_sale_last'] != '' ? $result['w_sale_last'] : '--' !!}</span>
                        </div>
                    </th>
                </tr>
                <tr class="bg-grey">
                    <th colspan="{{ $colspan }}" class="text-center">
                        @if ($isDownload)
                            <img align="center" src="{{ public_path() . '/assets/images/logo-text.png' }}"
                                style="width: 120px;" hspace="50%">
                        @else
                            <img src="{{ tokkioLogo() }}" style="width: 120px;">
                        @endif
                    </th>
                </tr>
                <tr class="bg-grey">
                    <th colspan="{{ $colspan }}" class="text-center" align="center">
                        <h3><b>{{ __('report.product_sale') }}</b></h3>
                    </th>
                </tr>
                <tr class="bg-grey">
                    <th colspan="{{ $colspan }}" class="text-center " align="center">
                        <b>{{ __('report.from') }}:&nbsp;</b> {{ dateFormat($inputs['from_date'], DISPLAY_DATETIME3) }}
                        <b>{{ __('report.to') }}:&nbsp;</b> {{ dateFormat($inputs['to_date'], DISPLAY_DATETIME3) }}
                    </th>
                </tr>
            </table>
        </div>
    </div>
</div>
<div class="row row-pdff">
        @if (count($result['categories']) > 0)
        @foreach ($result['categories'] as $catDetail)
                        @if (count($categoryItems) > 0)
                <div class="col-12 col-md-6 col-lg-4">
                    <div class="mt-3"
                        @if ($isDownload) style="width:32%; margin: 10px 10px 0 0;border: 2px solid #000; border-radius: 20px;float: left;vertical-align: top;" @else style="border: 2px solid #000; border-radius: 20px;vertical-align: top;" @endif>
                                                <div class="cate_box d-flex justify-content-between">
                            <div
                                style="width:{!! isset($isDownload) && $isDownload == true ? '97%;font-size:14px' : '100%;font-size:18px' !!};font-weight: bold;background: #000;color: #fff;padding: 5px;text-align: center; border-top-left-radius: 17px;border-top-right-radius: 17px;">
                                <span>{{ $catDetail->name }}</span> <br />
                                <span style="font-size: 14px">{!! numberFormat($wholeSale, 1, true) !!}<span
                                        style="margin-left:20px;">Pcs
                                        {{ numberFormat($wholeQty, 1, false, false, 0) }}</span></span>
                            </div>
                            {{-- <p class="mt-0 mb-0 text-right w-100 w-50 cate-title">{{ $catDetail->name }}</p>
                    <div class="cate_number w-100">
                        <p class="text-right mt-0 mb-0">{{$wholeQty}}</p>
                        <p class="text-right mt-0 mb-0">---</p>
                        <p class="text-right mt-0 mb-0">{{numberFormat($wholeSale,1,false)}}</p>
                    </div> --}}
                        </div>
                        <span></span>
                        <div class="table-responsive">
                        <table class="table table-bordered consolidated-product-sale" style="font-size: 12px;">
                            <tr>
                                <th data-attr="name">{!! __('report.name') !!}</th>
                                <th data-attr="total_qty">{!! __('report.pc_this_month') !!}</th>
                                <th data-attr="last_month_price">{!! __('report.sale_last_month') !!}</th>
                                <th data-attr="current_month_price">{!! __('report.sale_this_month') !!}</th>
                            </tr>
                            @if (count($categoryItems) > 0)
                                @foreach ($categoryItems as $catItems)
                                    @php
                                        $totalQty = $catItems['current_month_stats']['total_qty'] ?? 0;
                                        $lastMonthtotalPrice = isset($catItems['last_month_stats']['total_price'])
                                            ? $catItems['last_month_stats']['total_price']
                                            : 0;
                                        $currentMonthTotalPrice = isset($catItems['current_month_stats']['total_price'])
                                            ? $catItems['current_month_stats']['total_price']
                                            : 0;
                                    @endphp
                                    <tr>
                                        <td data-name = "{{ $catItems['name'] }}">{{ $catItems['name'] }}</td>
                                        <td data-total_qty = "{{ $totalQty }}">{{ $totalQty }}</td>
                                        <td data-last_month_price = "{{ $lastMonthtotalPrice }}">
                                            {{ numberFormat($lastMonthtotalPrice, 1, false) }}
                                        </td>
                                        <td data-current_month_price = "{{ $currentMonthTotalPrice }}">
                                            {{ numberFormat($currentMonthTotalPrice, 1, false) }}
                                        </td>
                                    </tr>
                                                                    @endforeach
                                @endif
                        </table>
                        </div>
                    </div>
                </div>
                @endif
                @if ($index++ % 3 == 0 && $isDownload && $isDownload == true)
                    <div style="clear:both;width:100%;{!! $style !!}"></div>
                @endif
            @endforeach
        @endif
</div>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        sortTableData(".consolidated-product-sale");
    });
</script>