@if(!empty($discrepancy))
<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.discrepancy.title") }}
    </div>
    <div x-data="{ open: null }" class="w-full bg-gray-100 rounded-md shadow-md">
    @foreach($discrepancy 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-sky-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_discrepancy 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.discrepancy.name") }}</th>
                            <th class="px-4 py-1 text-left text-sm text-gray-700">{{ __("main.home.discrepancy.index") }}</th>
                            <th class="px-4 py-1 text-left text-sm text-gray-700">{{ __("main.home.discrepancy.ordered") }}</th>
                            <th class="px-4 py-1 text-left text-sm text-gray-700">{{ __("main.home.discrepancy.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-confirm-discrepancy-component modalRoute="{{ route('home.dashboard.insert.mark_discrepancy') }}" />
@endpush
@endif