@if(!empty($canceled))
    <div class="border-2 border-slate-300 rounded-lg mb-2 pb-2 overflow-hidden">
        <div class="bg-slate-300 text-center py-1 mb-2 font-bold">
            {{ __("main.home.canceled.title") }}
        </div>
        <div x-data="{ open: null }" class="w-full bg-gray-100 rounded-md shadow-md">
            @foreach($canceled as $menuKey => $subMenus)
                <div class="m-2 px-2 py-1 rounded-xl bg-white shadow-lg">
                    <!-- Główne menu -->
                    <div class="flex justify-between items-center">
                        <button
                            @click="open === '{{ $menuKey }}' ? open = null : open = '{{ $menuKey }}'"
                            class="w-full text-left px-4 py-1 font-semibold text-gray-800 ">
                            <span class="text-left inline-block bg-rose-700 text-white text-xs font-bold px-2 py-1 mr-2 rounded-full">{{ $subMenus['count'] }}</span>
                            {{ $menuKey }}
                        </button>
                        <a data-id_key="{{ $menuKey}}" class="mark_canceled cursor-pointer text-right inline-block bg-red-100 text-red-800 font-bold px-2 pb-1 mr-2 rounded-full text-xs"
                        >x</a>
                    </div>
                    <!-- Submenu -->
                    <div x-show="open === '{{ $menuKey }}'" x-show="open === '{{ $menuKey }}'" x-transition class="bg-white text-gray-700 px-4" >
                        <table class="min-w-full divide-y divide-gray-300 mb-4">
                            <thead class="bg-gray-300">
                            <tr class="divide-x divide-gray-100">
                                <th class="px-4 py-1 text-left text-sm text-gray-700">#</th>
                                <th class="px-4 py-1 text-left text-sm text-gray-700">{{ __("main.home.canceled.name") }}</th>
                                <th class="px-4 py-1 text-left text-sm text-gray-700">{{ __("main.home.canceled.index") }}</th>
                                <th class="px-4 py-1 text-left text-sm text-gray-700">{{ __("main.home.canceled.ordered") }}</th>
                                <th class="px-4 py-1 text-left text-sm text-gray-700">{{ __("main.home.canceled.received") }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            @php $lp = 1 @endphp
                            @foreach($subMenus['data'] as $subKey => $subValue)
                                <tr class="divide-x divide-gray-300 odd:bg-white even:bg-gray-200">
                                    <td class="px-4 py-1 text-sm text-gray-800">{{ $lp++ }}</td>
                                    <td class="px-4 py-1 text-sm text-gray-800">{{ $subValue['name'] }}</td>
                                    <td class="px-4 py-1 text-sm text-gray-800">{{ $subValue['index'] }}</td>
                                    <td class="px-4 py-1 text-sm text-gray-800">{{ $subValue['requiredQuantity'] }}</td>
                                    <td class="px-4 py-1 text-sm text-gray-800">{{ $subValue['packagedQuantity'] }}</td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@push('modal')
    <x-modal.modal-intercars-canceled-component modalRoute="{{ route('home.dashboard.insert.mark_canceled') }}" />
@endpush
@endif