@extends('Admin.layouts.app')
@section('content')
<div class="col-lg-12 col-md-12 mb-4">
    <div class="card">
        <div class="card-body p-3">
            <table class="table table-bordered">
                <tbody>
                    @php
                        $groupedByType = $chartList->groupBy('type');

                        // Find max count among all type groups
                        $maxCount = $groupedByType->map(fn($group) => $group->count())->max();

                        // Define colors by type for convenience
                        $bgColors = [
                            1 => '#ffdddd',
                            2 => '#ddffdd',
                            3 => '#ddddff',
                            4 => '#f3caec',
                            5 => '#e8cece',
                        ];

                        // Get all unique types (keys)
                        $types = $groupedByType->keys()->sort();
                    @endphp

                    @for ($i = 0; $i < $maxCount; $i++)
                        <tr>
                            @foreach ($types as $type)
                                @php
                                    $records = $groupedByType[$type];
                                    $bgColor = $bgColors[$type] ?? '';
                                    $record = $records[$i] ?? null;
                                @endphp

                                @if ($record)
                                    <th width="2.5%" style="background-color: {{ $bgColor }}; border: 1px solid #ccc;">
                                        {{ $record->number }}
                                    </th>
                                    <td width="7%" style="background-color: {{ $bgColor }}; border: 1px solid #ccc;">
                                        {{ $record->cutting_data }}
                                    </td>
                                @else
                                    {{-- Empty cells for missing records --}}
                                    <th width="2.5%" style="border: 1px solid #ccc;"></th>
                                    <td width="7%" style="border: 1px solid #ccc;"></td>
                                @endif
                            @endforeach
                        </tr>
                    @endfor
                </tbody>
            </table>            
        </div>
    </div>
</div>

@endsection