{{--<div>--}}
{{--    --}}{{-- هدر صفحه --}}
{{--    <x-slot name="header">--}}
{{--        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">--}}
{{--            {{ __('تایید حواله‌های انبار') }}--}}
{{--        </h2>--}}
{{--    </x-slot>--}}

{{--    <div class="py-12">--}}
{{--        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">--}}
{{--            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-xl sm:rounded-lg">--}}
{{--                <div class="p-6 lg:p-8">--}}
{{--                    <h1 class="text-2xl font-medium text-gray-900 dark:text-white">--}}
{{--                        حواله‌های در انتظار تایید شما--}}
{{--                    </h1>--}}
{{--                    @if (session()->has('message'))--}}
{{--                        <div class="mt-4 p-4 text-sm text-green-700 bg-green-100 rounded-lg dark:bg-green-200 dark:text-green-800" role="alert">--}}
{{--                            {{ session('message') }}--}}
{{--                        </div>--}}
{{--                    @endif--}}

{{--                    <div class="mt-6">--}}
{{--                        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">--}}
{{--                            <thead class="bg-gray-50 dark:bg-gray-700">--}}
{{--                            <tr>--}}
{{--                                <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">کد حواله</th>--}}
{{--                                <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">تیم فرستنده</th>--}}
{{--                                <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">تاریخ ارسال</th>--}}
{{--                                <th scope="col" class="relative px-6 py-3"><span class="sr-only">عملیات</span></th>--}}
{{--                            </tr>--}}
{{--                            </thead>--}}
{{--                            <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">--}}
{{--                            @forelse ($transfers as $transfer)--}}
{{--                                <tr>--}}
{{--                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 font-mono">{{ $transfer->transfer_code }}</td>--}}
{{--                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ $transfer->sourceTeam->name }}</td>--}}
{{--                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">{{ $transfer->transfer_date }}</td>--}}
{{--                                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-2 space-x-reverse">--}}
{{--                                        <x-button wire:click="confirmReceipt({{ $transfer->id }})" class="bg-green-600 hover:bg-green-700">تایید دریافت</x-button>--}}
{{--                                        <x-danger-button wire:click="rejectTransfer({{ $transfer->id }})">رد کردن</x-danger-button>--}}
{{--                                    </td>--}}
{{--                                </tr>--}}
{{--                            @empty--}}
{{--                                <tr>--}}
{{--                                    <td colspan="4" class="px-6 py-4 text-center text-sm text-gray-500 dark:text-gray-400">--}}
{{--                                        هیچ حواله‌ای برای تایید شما وجود ندارد.--}}
{{--                                    </td>--}}
{{--                                </tr>--}}
{{--                            @endforelse--}}
{{--                            </tbody>--}}
{{--                        </table>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}

{{--    <!-- Modal برای تایید دریافت و جانمایی -->--}}
{{--    <x-dialog-modal wire:model.live="confirmingReceipt" maxWidth="2xl">--}}
{{--        <x-slot name="title">--}}
{{--            تایید دریافت و جانمایی حواله ({{ $viewingTransfer?->transfer_code }})--}}
{{--        </x-slot>--}}

{{--        <x-slot name="content">--}}
{{--            <div class="space-y-4">--}}
{{--                <p>لطفاً برای هر آیتم دریافتی، مکان و نحوه جانمایی را مشخص کنید.</p>--}}

{{--                <div class="space-y-4 max-h-[60vh] overflow-y-auto pr-2">--}}
{{--                    @foreach($itemsToPlace as $index => $item)--}}
{{--                        <div class="p-4 border rounded-lg dark:border-gray-600">--}}
{{--                            <p class="font-bold text-lg text-gray-800 dark:text-gray-200">{{ $item['name'] }}</p>--}}
{{--                            <p class="text-sm text-gray-500 dark:text-gray-400">مقدار دریافتی: {{ $item['quantity'] }} {{ $item['unit'] }}</p>--}}

{{--                            <div class="mt-4 space-y-4">--}}
{{--                                <!-- Hierarchical Location Selectors -->--}}
{{--                                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">--}}
{{--                                    --}}{{-- Level 1 --}}
{{--                                    <div>--}}
{{--                                        <x-label for="itemsToPlace.{{$index}}.selected_level_1" value="{{ __('ساختمان') }}" />--}}
{{--                                        <select wire:model.live="itemsToPlace.{{$index}}.selected_level_1" class="mt-1 block w-full border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 rounded-md shadow-sm">--}}
{{--                                            <option value="">...</option>--}}
{{--                                            @foreach($item['locations_level_1'] as $loc)--}}
{{--                                                <option value="{{ $loc['id'] }}">{{ $loc['name'] }}</option>--}}
{{--                                            @endforeach--}}
{{--                                        </select>--}}
{{--                                    </div>--}}
{{--                                    --}}{{-- Level 2 --}}
{{--                                    @if(!empty($item['locations_level_2']))--}}
{{--                                        <div>--}}
{{--                                            <x-label for="itemsToPlace.{{$index}}.selected_level_2" value="{{ __('اتاق') }}" />--}}
{{--                                            <select wire:model.live="itemsToPlace.{{$index}}.selected_level_2" class="mt-1 block w-full border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 rounded-md shadow-sm">--}}
{{--                                                <option value="">...</option>--}}
{{--                                                @foreach($item['locations_level_2'] as $loc)--}}
{{--                                                    <option value="{{ $loc['id'] }}">{{ $loc['name'] }}</option>--}}
{{--                                                @endforeach--}}
{{--                                            </select>--}}
{{--                                        </div>--}}
{{--                                    @endif--}}
{{--                                    --}}{{-- Level 3 --}}
{{--                                    @if(!empty($item['locations_level_3']))--}}
{{--                                        <div>--}}
{{--                                            <x-label for="itemsToPlace.{{$index}}.selected_level_3" value="{{ __('فریزر/قفسه') }}" />--}}
{{--                                            <select wire:model.live="itemsToPlace.{{$index}}.selected_level_3" class="mt-1 block w-full border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 rounded-md shadow-sm">--}}
{{--                                                <option value="">...</option>--}}
{{--                                                @foreach($item['locations_level_3'] as $loc)--}}
{{--                                                    <option value="{{ $loc['id'] }}">{{ $loc['name'] }}</option>--}}
{{--                                                @endforeach--}}
{{--                                            </select>--}}
{{--                                        </div>--}}
{{--                                    @endif--}}
{{--                                    --}}{{-- Level 4 --}}
{{--                                    @if(!empty($item['locations_level_4']))--}}
{{--                                        <div>--}}
{{--                                            <x-label for="itemsToPlace.{{$index}}.selected_level_4" value="{{ __('طبقه/رک') }}" />--}}
{{--                                            <select wire:model.live="itemsToPlace.{{$index}}.selected_level_4" class="mt-1 block w-full border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 rounded-md shadow-sm">--}}
{{--                                                <option value="">...</option>--}}
{{--                                                @foreach($item['locations_level_4'] as $loc)--}}
{{--                                                    <option value="{{ $loc['id'] }}">{{ $loc['name'] }}</option>--}}
{{--                                                @endforeach--}}
{{--                                            </select>--}}
{{--                                        </div>--}}
{{--                                    @endif--}}
{{--                                    --}}{{-- Level 5 (Box) --}}
{{--                                    @if(!empty($item['locations_level_5']))--}}
{{--                                        <div>--}}
{{--                                            <x-label for="itemsToPlace.{{$index}}.selected_level_5" value="{{ __('باکس') }}" />--}}
{{--                                            <select wire:model.live="itemsToPlace.{{$index}}.selected_level_5" class="mt-1 block w-full border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 rounded-md shadow-sm">--}}
{{--                                                <option value="">...</option>--}}
{{--                                                @foreach($item['locations_level_5'] as $loc)--}}
{{--                                                    <option value="{{ $loc['id'] }}">{{ $loc['name'] }}</option>--}}
{{--                                                @endforeach--}}
{{--                                            </select>--}}
{{--                                        </div>--}}
{{--                                    @endif--}}
{{--                                </div>--}}
{{--                                <x-input-error for="itemsToPlace.{{$index}}.location_id" class="mt-2" />--}}

{{--                                <!-- Smart/Manual Placement Section -->--}}
{{--                                @if($item['selectedBox'])--}}
{{--                                    <div class="p-4 mt-4 border-t dark:border-gray-700">--}}
{{--                                        <fieldset>--}}
{{--                                            <legend class="text-base font-medium text-gray-900 dark:text-white">نحوه جانمایی</legend>--}}
{{--                                            <div class="mt-4 space-y-4">--}}
{{--                                                <div class="flex items-center">--}}
{{--                                                    <input id="placement_auto_{{$index}}" wire:model.live="itemsToPlace.{{$index}}.placement_mode" type="radio" value="auto" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">--}}
{{--                                                    <label for="placement_auto_{{$index}}" class="ms-3 block text-sm font-medium text-gray-700 dark:text-gray-300">جانمایی هوشمند</label>--}}
{{--                                                </div>--}}
{{--                                                <div class="flex items-center">--}}
{{--                                                    <input id="placement_manual_{{$index}}" wire:model.live="itemsToPlace.{{$index}}.placement_mode" type="radio" value="manual" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">--}}
{{--                                                    <label for="placement_manual_{{$index}}" class="ms-3 block text-sm font-medium text-gray-700 dark:text-gray-300">جانمایی دستی</label>--}}
{{--                                                </div>--}}
{{--                                            </div>--}}
{{--                                        </fieldset>--}}

{{--                                        @if($item['placement_mode'] === 'manual')--}}
{{--                                            <div class="mt-4">--}}
{{--                                                <div class="grid-container" style="display: grid; grid-template-columns: auto repeat({{ $item['selectedBox']['columns'] }}, minmax(0, 1fr)); gap: 4px;">--}}
{{--                                                    <div></div>--}}
{{--                                                    @for ($col = 1; $col <= $item['selectedBox']['columns']; $col++)--}}
{{--                                                        <div class="text-center font-bold text-xs p-1 dark:text-gray-300">{{ $col }}</div>--}}
{{--                                                    @endfor--}}

{{--                                                    @for ($row = 0; $row < $item['selectedBox']['rows']; $row++)--}}
{{--                                                        <div class="flex items-center justify-center font-bold text-xs p-1 dark:text-gray-300">{{ chr(65 + $row) }}</div>--}}
{{--                                                        @for ($col = 1; $col <= $item['selectedBox']['columns']; $col++)--}}
{{--                                                            @php $position = chr(65 + $row) . $col; @endphp--}}
{{--                                                            <button type="button"--}}
{{--                                                                    wire:click="$set('itemsToPlace.{{$index}}.selected_position', '{{ $position }}')"--}}
{{--                                                                    class="h-10 rounded-md text-xs--}}
{{--                                                                    @if(in_array($position, $item['occupied_positions'])) bg-gray-300 dark:bg-gray-600 cursor-not-allowed--}}
{{--                                                                    @elseif($item['selected_position'] === $position) bg-green-500 text-white--}}
{{--                                                                    @else bg-gray-100 dark:bg-gray-700 hover:bg-blue-200 dark:hover:bg-blue-600--}}
{{--                                                                    @endif">--}}
{{--                                                                {{ $position }}--}}
{{--                                                            </button>--}}
{{--                                                        @endfor--}}
{{--                                                    @endfor--}}
{{--                                                </div>--}}
{{--                                                <x-input-error for="itemsToPlace.{{$index}}.selected_position" class="mt-2" />--}}
{{--                                            </div>--}}
{{--                                        @endif--}}
{{--                                    </div>--}}
{{--                                @endif--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    @endforeach--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </x-slot>--}}

{{--        <x-slot name="footer">--}}
{{--            <x-secondary-button wire:click="$set('confirmingReceipt', false)" wire:loading.attr="disabled">--}}
{{--                {{ __('انصراف') }}--}}
{{--            </x-secondary-button>--}}
{{--            <x-button class="ms-3" wire:click="placeAndComplete" wire:loading.attr="disabled">--}}
{{--                {{ __('تایید نهایی و افزودن به انبار') }}--}}
{{--            </x-button>--}}
{{--        </x-slot>--}}
{{--    </x-dialog-modal>--}}
{{--</div>--}}

<div>
    {{-- هدر صفحه --}}
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            {{ __('تایید حواله‌های انبار') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-xl sm:rounded-lg">
                <div class="p-6 lg:p-8">
                    <h1 class="text-2xl font-medium text-gray-900 dark:text-white">
                        حواله‌های در انتظار تایید شما
                    </h1>
                    @if (session()->has('message'))
                        <div class="mt-4 p-4 text-sm text-green-700 bg-green-100 rounded-lg dark:bg-green-200 dark:text-green-800" role="alert">
                            {{ session('message') }}
                        </div>
                    @endif

                    <div class="mt-6">
                        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                            <thead class="bg-gray-50 dark:bg-gray-700">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">کد حواله</th>
                                <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">تیم فرستنده</th>
                                <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">تاریخ ارسال</th>
                                <th scope="col" class="relative px-6 py-3"><span class="sr-only">عملیات</span></th>
                            </tr>
                            </thead>
                            <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                            @forelse ($transfers as $transfer)
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 font-mono">{{ $transfer->transfer_code }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ $transfer->sourceTeam->name }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">{{ $transfer->transfer_date ? verta($transfer->transfer_date)->format('Y/m/d') : '-' }}</td>
                                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-2 space-x-reverse">
                                        <x-button wire:click="confirmReceipt({{ $transfer->id }})" class="bg-green-600 hover:bg-green-700">تایید دریافت</x-button>
                                        <x-danger-button wire:click="rejectTransfer({{ $transfer->id }})">رد کردن</x-danger-button>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="px-6 py-4 text-center text-sm text-gray-500 dark:text-gray-400">
                                        هیچ حواله‌ای برای تایید شما وجود ندارد.
                                    </td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal برای تایید دریافت و جانمایی -->
    <x-dialog-modal wire:model.live="confirmingReceipt" maxWidth="2xl">
        <x-slot name="title">
            تایید دریافت و جانمایی حواله ({{ $viewingTransfer?->transfer_code }})
        </x-slot>

        <x-slot name="content">
            <div class="space-y-4">
                <p>برای هر آیتم، وضعیت آن را مشخص کرده و در صورت تایید، محل جانمایی را تعیین کنید.</p>

                <div class="space-y-4 max-h-[60vh] overflow-y-auto pr-2">
                    @foreach($itemsToPlace as $index => $item)
                        <div class="p-4 border rounded-lg dark:border-gray-600">
                            <div class="flex justify-between items-center">
                                <div>
                                    <p class="font-bold text-lg text-gray-800 dark:text-gray-200">{{ $item['name'] }}</p>
                                    <p class="text-sm text-gray-500 dark:text-gray-400">مقدار دریافتی: {{ $item['quantity'] }} {{ $item['unit'] }}</p>
                                </div>
                                {{-- دکمه‌های جدید برای تایید/رد هر آیتم --}}
                                <div class="flex space-x-2 space-x-reverse">
                                    <button type="button" wire:click="setItemStatus({{ $index }}, 'accepted')" class="px-3 py-1 text-xs font-medium rounded-md {{ $item['status'] === 'accepted' ? 'bg-green-600 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300' }}">
                                        تایید
                                    </button>
                                    <button type="button" wire:click="setItemStatus({{ $index }}, 'rejected')" class="px-3 py-1 text-xs font-medium rounded-md {{ $item['status'] === 'rejected' ? 'bg-red-600 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300' }}">
                                        رد
                                    </button>
                                </div>
                            </div>

                            {{-- فرم جانمایی فقط در صورت تایید نمایش داده می‌شود --}}
                            @if($item['status'] === 'accepted')
                            <div class="mt-4 space-y-4">
                                <!-- Hierarchical Location Selectors -->
                                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
                                    {{-- Level 1 --}}
                                    <div>
                                        <x-label for="itemsToPlace.{{$index}}.selected_level_1" value="{{ __('ساختمان') }}" />
                                        <select wire:model.live="itemsToPlace.{{$index}}.selected_level_1" class="mt-1 block w-full border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 rounded-md shadow-sm">
                                            <option value="">...</option>
                                            @foreach($item['locations_level_1'] as $loc)
                                                <option value="{{ $loc->id }}">{{ $loc->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    {{-- Level 2 --}}
                                    @if($item['locations_level_2']->isNotEmpty())
                                        <div>
                                            <x-label for="itemsToPlace.{{$index}}.selected_level_2" value="{{ __('اتاق') }}" />
                                            <select wire:model.live="itemsToPlace.{{$index}}.selected_level_2" class="mt-1 block w-full border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 rounded-md shadow-sm">
                                                <option value="">...</option>
                                                @foreach($item['locations_level_2'] as $loc)
                                                    <option value="{{ $loc->id }}">{{ $loc->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    @endif
                                    {{-- Level 3 --}}
                                    @if($item['locations_level_3']->isNotEmpty())
                                        <div>
                                            <x-label for="itemsToPlace.{{$index}}.selected_level_3" value="{{ __('فریزر/قفسه') }}" />
                                            <select wire:model.live="itemsToPlace.{{$index}}.selected_level_3" class="mt-1 block w-full border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 rounded-md shadow-sm">
                                                <option value="">...</option>
                                                @foreach($item['locations_level_3'] as $loc)
                                                    <option value="{{ $loc->id }}">{{ $loc->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    @endif
                                    {{-- Level 4 --}}
                                    @if($item['locations_level_4']->isNotEmpty())
                                        <div>
                                            <x-label for="itemsToPlace.{{$index}}.selected_level_4" value="{{ __('طبقه/رک') }}" />
                                            <select wire:model.live="itemsToPlace.{{$index}}.selected_level_4" class="mt-1 block w-full border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 rounded-md shadow-sm">
                                                <option value="">...</option>
                                                @foreach($item['locations_level_4'] as $loc)
                                                    <option value="{{ $loc->id }}">{{ $loc->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    @endif
                                    {{-- Level 5 (Box) --}}
                                    @if($item['locations_level_5']->isNotEmpty())
                                        <div>
                                            <x-label for="itemsToPlace.{{$index}}.selected_level_5" value="{{ __('باکس') }}" />
                                            <select wire:model.live="itemsToPlace.{{$index}}.selected_level_5" class="mt-1 block w-full border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 rounded-md shadow-sm">
                                                <option value="">...</option>
                                                @foreach($item['locations_level_5'] as $loc)
                                                    <option value="{{ $loc->id }}">{{ $loc->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    @endif
                                </div>
                                <x-input-error for="itemsToPlace.{{$index}}.selected_level_1" class="mt-2" />

                                <!-- Smart/Manual Placement Section -->
                                @if($item['selectedBox'])
                                    <div class="p-4 mt-4 border-t dark:border-gray-700">
                                        <fieldset>
                                            <legend class="text-base font-medium text-gray-900 dark:text-white">نحوه جانمایی</legend>
                                            <div class="mt-4 space-y-4">
                                                <div class="flex items-center">
                                                    <input id="placement_auto_{{$index}}"
                                                           wire:model="itemsToPlace.{{$index}}.placement_mode"
                                                           type="radio"
                                                           value="auto"
                                                           class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
                                                    <label for="placement_auto_{{$index}}" class="ms-3 block text-sm font-medium text-gray-700 dark:text-gray-300">جانمایی هوشمند</label>
                                                </div>
                                                <div class="flex items-center">
                                                    <input id="placement_manual_{{$index}}"
                                                           wire:model="itemsToPlace.{{$index}}.placement_mode"
                                                           type="radio"
                                                           value="manual"
                                                           class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
                                                    <label for="placement_manual_{{$index}}" class="ms-3 block text-sm font-medium text-gray-700 dark:text-gray-300">جانمایی دستی</label>
                                                </div>
                                            </div>
                                        </fieldset>

                                        @if($item['placement_mode'] === 'manual')
                                            <div class="mt-4">
                                                <div class="grid-container" style="display: grid; grid-template-columns: auto repeat({{ $item['selectedBox']->columns }}, minmax(0, 1fr)); gap: 4px;">
                                                    <div></div>
                                                    @for ($col = 1; $col <= $item['selectedBox']->columns; $col++)
                                                        <div class="text-center font-bold text-xs p-1 dark:text-gray-300">{{ $col }}</div>
                                                    @endfor

                                                    @for ($row = 0; $row < $item['selectedBox']->rows; $row++)
                                                        <div class="flex items-center justify-center font-bold text-xs p-1 dark:text-gray-300">{{ chr(65 + $row) }}</div>
                                                        @for ($col = 1; $col <= $item['selectedBox']->columns; $col++)
                                                            @php $position = chr(65 + $row) . $col; @endphp
                                                            <button type="button"
                                                                    wire:click="$set('itemsToPlace.{{$index}}.selected_position', '{{ $position }}')"
                                                                    class="h-10 rounded-md text-xs
                                                                    @if(in_array($position, $item['occupied_positions'])) bg-gray-300 dark:bg-gray-600 cursor-not-allowed
                                                                    @elseif($item['selected_position'] === $position) bg-green-500 text-white
                                                                    @else bg-gray-100 dark:bg-gray-700 hover:bg-blue-200 dark:hover:bg-blue-600
                                                                    @endif">
                                                                {{ $position }}
                                                            </button>
                                                        @endfor
                                                    @endfor
                                                </div>
                                                <x-input-error for="itemsToPlace.{{$index}}.selected_position" class="mt-2" />
                                            </div>
                                        @endif
                                    </div>
                                @endif
                            </div>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
        </x-slot>
       <x-slot name="footer">
            <x-secondary-button wire:click="$set('confirmingReceipt', false)" wire:loading.attr="disabled">
                {{ __('انصراف') }}
            </x-secondary-button>
            <x-button class="ms-3" wire:click="placeAndComplete" wire:loading.attr="disabled">
                {{ __('تایید نهایی و افزودن به انبار') }}
            </x-button>
        </x-slot>
    </x-dialog-modal>

    <!-- Modal جدید برای خطای جانمایی -->
    <x-dialog-modal wire:model.live="confirmingPlacementError">
        <x-slot name="title">
            <span class="text-red-600 flex items-center">
                <svg class="w-6 h-6 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
                خطا در جانمایی
            </span>
        </x-slot>

        <x-slot name="content">
            <div class="space-y-2">
                {!! $placementErrorMessage !!}
            </div>
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="$set('confirmingPlacementError', false)">
                {{ __('متوجه شدم') }}
            </x-secondary-button>
        </x-slot>
    </x-dialog-modal>
</div>