{{--<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="space-y-8">--}}
{{--                <div class="flex items-center gap-3">--}}
{{--                    <x-lucide-package-check class="w-8 h-8 text-emerald-600 dark:text-emerald-400" />--}}
{{--                    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">--}}
{{--                        لیست سفارش‌های تایید شده برای شما--}}
{{--                    </h1>--}}
{{--                </div>--}}

{{--                @if (session()->has('message'))--}}
{{--                    <div class="mb-4 p-4 text-sm text-green-800 bg-green-100 rounded-lg dark:bg-green-900 dark:text-green-300" role="alert">--}}
{{--                        {{ session('message') }}--}}
{{--                    </div>--}}
{{--                @endif--}}

{{--                @forelse ($requests as $request)--}}
{{--                    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg border-t-4 border-emerald-500 overflow-hidden">--}}
{{--                        --}}{{-- هدر هر سفارش --}}
{{--                        <div class="p-6 bg-stone-50 dark:bg-gray-800/50">--}}
{{--                            <div class="flex flex-col sm:flex-row justify-between sm:items-center gap-4">--}}
{{--                                <div>--}}
{{--                                    <p class="text-lg font-bold text-gray-900 dark:text-white">کد درخواست: <span class="font-mono">{{ $request->request_code }}</span></p>--}}
{{--                                    <p class="text-sm text-gray-600 dark:text-gray-400">سازمان خریدار: {{ $request->requester->currentTeam->name }}</p>--}}
{{--                                </div>--}}
{{--                                <div class="flex space-x-2 space-x-reverse flex-shrink-0">--}}
{{--                                    <a href="{{ route('supplier.orders.invoice', $request) }}" target="_blank" class="inline-flex items-center px-4 py-2 bg-gray-500 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-600 active:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150">--}}
{{--                                        <x-lucide-printer class="w-4 h-4 ml-2" />--}}
{{--                                        چاپ فاکتور--}}
{{--                                    </a>--}}
{{--                                    <x-button wire:click="confirmShipment({{ $request->id }})" class="bg-emerald-600 hover:bg-emerald-700 focus:ring-emerald-500">--}}
{{--                                        <x-lucide-send class="w-4 h-4 ml-2" />--}}
{{--                                        تکمیل سفارش--}}
{{--                                    </x-button>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}

{{--                        --}}{{-- جدول آیتم‌های این سفارش --}}
{{--                        <div class="p-6">--}}
{{--                            <div class="overflow-x-auto">--}}
{{--                                <table class="min-w-full">--}}
{{--                                    <thead class="border-b dark:border-gray-700">--}}
{{--                                    <tr>--}}
{{--                                        <th scope="col" class="py-2 pr-2 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">نام آیتم</th>--}}
{{--                                        <th scope="col" class="py-2 px-2 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">مقدار</th>--}}
{{--                                        <th scope="col" class="py-2 px-2 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">قیمت واحد</th>--}}
{{--                                        <th scope="col" class="py-2 pl-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">جمع کل</th>--}}
{{--                                    </tr>--}}
{{--                                    </thead>--}}
{{--                                    <tbody>--}}
{{--                                    @php $orderTotal = 0; @endphp--}}
{{--                                    @foreach ($request->items as $item)--}}
{{--                                        @php--}}
{{--                                            $responseItem = $item->finalResponseItem ?? null;--}}
{{--                                            if($responseItem) {--}}
{{--                                                $itemTotal = $responseItem->supplied_quantity * $responseItem->price_per_unit;--}}
{{--                                                $orderTotal += $itemTotal;--}}
{{--                                            }--}}
{{--                                        @endphp--}}
{{--                                        @if($responseItem)--}}
{{--                                            <tr class="border-b dark:border-gray-700">--}}
{{--                                                <td class="py-3 pr-2 text-sm font-medium text-gray-900 dark:text-white">{{ $item->item_name }}</td>--}}
{{--                                                <td class="py-3 px-2 text-sm text-gray-500 dark:text-gray-400">{{ $responseItem->supplied_quantity }} {{ $item->unit }}</td>--}}
{{--                                                <td class="py-3 px-2 text-sm text-gray-500 dark:text-gray-400">{{ number_format($responseItem->price_per_unit) }}</td>--}}
{{--                                                <td class="py-3 pl-2 text-left text-sm text-gray-500 dark:text-gray-400">{{ number_format($itemTotal) }}</td>--}}
{{--                                            </tr>--}}
{{--                                        @endif--}}
{{--                                    @endforeach--}}
{{--                                    </tbody>--}}
{{--                                    <tfoot>--}}
{{--                                    <tr>--}}
{{--                                        <td colspan="3" class="pt-4 pr-2 text-right font-bold text-gray-800 dark:text-white">جمع کل این سفارش (تومان)</td>--}}
{{--                                        <td class="pt-4 pl-2 text-left font-bold text-gray-800 dark:text-white">{{ number_format($orderTotal) }}</td>--}}
{{--                                    </tr>--}}
{{--                                    </tfoot>--}}
{{--                                </table>--}}
{{--                            </div>--}}
{{--                        </div>--}}

{{--                        --}}{{-- فوتر کارت و وضعیت ارسال --}}
{{--                        <div class="px-6 py-4 bg-stone-50 dark:bg-gray-800/50 border-t dark:border-gray-700">--}}
{{--                            @php--}}
{{--                                $unshippedItemsCount = $request->items->filter(fn ($item) => is_null($item->finalResponseItem?->shipment_id))->count();--}}
{{--                            @endphp--}}
{{--                            @if ($unshippedItemsCount > 0)--}}
{{--                                <div class="flex items-center text-sm text-amber-600 dark:text-amber-400">--}}
{{--                                    <x-lucide-alert-circle class="w-5 h-5 ml-2" />--}}
{{--                                    <span class="font-bold">{{ $unshippedItemsCount }}</span>--}}
{{--                                    <span class="mr-1">آیتم از این سفارش برای تکمیل و ارسال باقی مانده است.</span>--}}
{{--                                </div>--}}
{{--                            @else--}}
{{--                                <div class="flex items-center text-sm font-semibold text-green-600 dark:text-green-400">--}}
{{--                                    <x-lucide-check-circle-2 class="w-5 h-5 ml-2" />--}}
{{--                                    <span>این سفارش کاملا تکمیل و ارسال گردیده است.</span>--}}
{{--                                </div>--}}
{{--                            @endif--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                @empty--}}
{{--                    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">--}}
{{--                        <div class="text-center py-12 border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-lg">--}}
{{--                            <x-lucide-frown class="mx-auto h-12 w-12 text-gray-400" />--}}
{{--                            <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">سفارشی یافت نشد</h3>--}}
{{--                            <p class="mt-1 text-sm text-gray-500">هیچ سفارش تایید شده‌ای برای شما وجود ندارد.</p>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                @endforelse--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}

{{--    <!-- Modal برای تکمیل سفارش -->--}}
{{--    <x-dialog-modal wire:model.live="confirmingShipment" maxWidth="2xl">--}}
{{--        <x-slot name="title">--}}
{{--            <div class="flex items-center text-gray-900 dark:text-gray-100">--}}
{{--                <x-lucide-package-plus class="w-6 h-6 ml-2 text-emerald-500"/>--}}
{{--                <span class="text-lg font-bold">{{ __('تکمیل و ارسال سفارش') }}</span>--}}
{{--            </div>--}}
{{--        </x-slot>--}}

{{--        <x-slot name="content">--}}
{{--            <div class="space-y-6">--}}
{{--                <p class="text-sm text-gray-600 dark:text-gray-300">آیتم‌هایی را که در این بسته ارسال می‌شوند، انتخاب کنید:</p>--}}

{{--                <div class="space-y-2 max-h-64 overflow-y-auto pr-2 custom-scrollbar">--}}
{{--                    @forelse($itemsToShip as $index => $item)--}}
{{--                        <label for="item-{{$item['id']}}" class="flex items-center p-3 bg-stone-100 dark:bg-gray-700/50 rounded-lg cursor-pointer hover:bg-emerald-50 dark:hover:bg-emerald-900/50 border border-transparent hover:border-emerald-300">--}}
{{--                            <input id="item-{{$item['id']}}" type="checkbox" wire:model.defer="itemsToShip.{{$index}}.selected" class="rounded border-gray-300 dark:border-gray-600 text-emerald-600 shadow-sm focus:ring-emerald-500">--}}
{{--                            <span class="ms-3 text-sm text-gray-800 dark:text-gray-200">{{ $item['name'] }} (مقدار: {{ $item['quantity'] }} {{ $item['unit'] }})</span>--}}
{{--                        </label>--}}
{{--                    @empty--}}
{{--                        <p class="text-sm text-center text-gray-500 dark:text-gray-400 py-4">--}}
{{--                            تمام آیتم‌های این سفارش قبلاً ارسال شده‌اند.--}}
{{--                        </p>--}}
{{--                    @endforelse--}}
{{--                </div>--}}
{{--                <x-input-error for="items" class="mt-2" />--}}

{{--                <hr class="my-4 dark:border-gray-600">--}}

{{--                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">--}}
{{--                    <div>--}}
{{--                        <x-label for="shipping_method" value="{{ __('شیوه ارسال') }}" />--}}
{{--                        <x-input id="shipping_method" type="text" class="mt-1 block w-full" wire:model.defer="shipping_method" placeholder="مثلا: پست پیشتاز، تیپاکس، اسنپ..." />--}}
{{--                        <x-input-error for="shipping_method" class="mt-2" />--}}
{{--                    </div>--}}
{{--                    <div>--}}
{{--                        <x-label for="tracking_code" value="{{ __('کد رهگیری (اختیاری)') }}" />--}}
{{--                        <x-input id="tracking_code" type="text" class="mt-1 block w-full" wire:model.defer="tracking_code" />--}}
{{--                        <x-input-error for="tracking_code" class="mt-2" />--}}
{{--                    </div>--}}
{{--                </div>--}}

{{--                <div class="mt-6 pt-4 border-t dark:border-gray-600">--}}
{{--                    <h3 class="text-base font-medium text-gray-900 dark:text-white mb-3">چاپ برچسب پستی</h3>--}}
{{--                    <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2 sm:space-x-reverse">--}}
{{--                        <a href="{{ route('supplier.labels.sender') }}" target="_blank" class="w-full inline-flex items-center justify-center px-4 py-2 bg-gray-200 dark:bg-gray-600 border border-transparent rounded-md font-semibold text-xs text-gray-800 dark:text-gray-300 uppercase tracking-widest hover:bg-gray-300 dark:hover:bg-gray-500">--}}
{{--                            <x-lucide-user-round class="w-4 h-4 ml-2" />--}}
{{--                            چاپ برچسب فرستنده--}}
{{--                        </a>--}}
{{--                        @if($requestForShipment)--}}
{{--                            <a href="{{ route('supplier.labels.receiver', $requestForShipment) }}" target="_blank" class="w-full inline-flex items-center justify-center px-4 py-2 bg-gray-200 dark:bg-gray-600 border border-transparent rounded-md font-semibold text-xs text-gray-800 dark:text-gray-300 uppercase tracking-widest hover:bg-gray-300 dark:hover:bg-gray-500">--}}
{{--                                <x-lucide-package class="w-4 h-4 ml-2" />--}}
{{--                                چاپ برچسب گیرنده--}}
{{--                            </a>--}}
{{--                        @endif--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </x-slot>--}}

{{--        <x-slot name="footer">--}}
{{--            <x-secondary-button wire:click="$set('confirmingShipment', false)" wire:loading.attr="disabled">--}}
{{--                {{ __('انصراف') }}--}}
{{--            </x-secondary-button>--}}

{{--            <x-button class="ms-3 bg-emerald-600 hover:bg-emerald-700 focus:ring-emerald-500" wire:click="createShipment" wire:loading.attr="disabled">--}}
{{--                {{ __('ثبت ارسال') }}--}}
{{--            </x-button>--}}
{{--        </x-slot>--}}
{{--    </x-dialog-modal>--}}
{{--</div>--}}
<div>
    {{-- Page Header --}}
    <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="space-y-8">
                <div class="flex items-center gap-3">
                    <x-lucide-package-check class="w-8 h-8 text-emerald-600 dark:text-emerald-400" />
                    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
                        لیست سفارش‌های تایید شده برای شما
                    </h1>
                </div>

                @if (session()->has('message'))
                    <div class="mb-4 p-4 text-sm text-green-800 bg-green-100 rounded-lg dark:bg-green-900 dark:text-green-300" role="alert">
                        {{ session('message') }}
                    </div>
                @endif

                @forelse ($requests as $request)
                    @php
                        // [REWRITTEN] Logic to check if all items are shipped
                        $totalWinningItems = $request->items->count();
                        $shippedItemsCount = $request->items->filter(function ($item) {
                            return $item->finalResponseItem && $item->finalResponseItem->shipmentItems->isNotEmpty();
                        })->count();
                        $isFullyShipped = $totalWinningItems === $shippedItemsCount;
                    @endphp

                    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg border-t-4 border-emerald-500 overflow-hidden">
                        {{-- Order Header --}}
                        <div class="p-6 bg-stone-50 dark:bg-gray-800/50">
                            <div class="flex flex-col sm:flex-row justify-between sm:items-center gap-4">
                                <div>
                                    <p class="text-lg font-bold text-gray-900 dark:text-white">کد درخواست: <span class="font-mono">{{ $request->request_code }}</span></p>
                                    <p class="text-sm text-gray-600 dark:text-gray-400">سازمان خریدار: {{ $request->requester->currentTeam->name }}</p>
                                </div>
                                <div class="flex space-x-2 space-x-reverse flex-shrink-0">
                                    <a href="#" target="_blank" class="inline-flex items-center px-4 py-2 bg-gray-500 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-600 active:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150">
                                        <x-lucide-printer class="w-4 h-4 ml-2" />
                                        چاپ فاکتور
                                    </a>
                                    <x-button wire:click="confirmShipment({{ $request->id }})" class="bg-emerald-600 hover:bg-emerald-700 focus:ring-emerald-500" :disabled="$isFullyShipped">
                                        <x-lucide-send class="w-4 h-4 ml-2" />
                                        تکمیل سفارش
                                    </x-button>
                                </div>
                            </div>
                        </div>

                        {{-- Order Items Table --}}
                        <div class="p-6">
                            <div class="overflow-x-auto">
                                <table class="min-w-full">
                                    <thead class="border-b dark:border-gray-700">
                                    <tr>
                                        <th scope="col" class="py-2 pr-2 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">نام آیتم</th>
                                        <th scope="col" class="py-2 px-2 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">مقدار</th>
                                        <th scope="col" class="py-2 px-2 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">قیمت واحد</th>
                                        <th scope="col" class="py-2 pl-2 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">جمع کل</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @php $orderTotal = 0; @endphp
                                    @foreach ($request->items as $item)
                                        @php
                                            $responseItem = $item->finalResponseItem ?? null;
                                            if($responseItem) {
                                                $itemTotal = $responseItem->supplied_quantity * $responseItem->price_per_unit;
                                                $orderTotal += $itemTotal;
                                            }
                                        @endphp
                                        @if($responseItem)
                                            <tr class="border-b dark:border-gray-700">
                                                <td class="py-3 pr-2 text-sm font-medium text-gray-900 dark:text-white">{{ $item->item_name }}</td>
                                                <td class="py-3 px-2 text-sm text-gray-500 dark:text-gray-400">{{ $responseItem->supplied_quantity }} {{ $item->unit }}</td>
                                                <td class="py-3 px-2 text-sm text-gray-500 dark:text-gray-400">{{ number_format($responseItem->price_per_unit) }}</td>
                                                <td class="py-3 pl-2 text-left text-sm text-gray-500 dark:text-gray-400">{{ number_format($itemTotal) }}</td>
                                            </tr>
                                        @endif
                                    @endforeach
                                    </tbody>
                                    <tfoot>
                                    <tr>
                                        <td colspan="3" class="pt-4 pr-2 text-right font-bold text-gray-800 dark:text-white">جمع کل این سفارش (تومان)</td>
                                        <td class="pt-4 pl-2 text-left font-bold text-gray-800 dark:text-white">{{ number_format($orderTotal) }}</td>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>

                        {{-- Card Footer & Shipment Status --}}
                        <div class="px-6 py-4 bg-stone-50 dark:bg-gray-800/50 border-t dark:border-gray-700">
                            @if (!$isFullyShipped)
                                <div class="flex items-center text-sm text-amber-600 dark:text-amber-400">
                                    <x-lucide-alert-circle class="w-5 h-5 ml-2" />
                                    <span class="font-bold">{{ $totalWinningItems - $shippedItemsCount }}</span>
                                    <span class="mr-1">آیتم از این سفارش برای تکمیل و ارسال باقی مانده است.</span>
                                </div>
                            @else
                                <div class="flex items-center text-sm font-semibold text-green-600 dark:text-green-400">
                                    <x-lucide-check-circle-2 class="w-5 h-5 ml-2" />
                                    <span>این سفارش کاملا تکمیل و ارسال گردیده است.</span>
                                </div>
                            @endif
                        </div>
                    </div>
                @empty
                    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
                        <div class="text-center py-12 border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-lg">
                            <x-lucide-frown class="mx-auto h-12 w-12 text-gray-400" />
                            <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">سفارشی یافت نشد</h3>
                            <p class="mt-1 text-sm text-gray-500">هیچ سفارش تایید شده‌ای برای شما وجود ندارد.</p>
                        </div>
                    </div>
                @endforelse
            </div>
        </div>
    </div>

    <!-- Shipment Creation Modal -->
    <x-dialog-modal wire:model.live="confirmingShipment" maxWidth="2xl">
        <x-slot name="title">
            <div class="flex items-center text-gray-900 dark:text-gray-100">
                <x-lucide-package-plus class="w-6 h-6 ml-2 text-emerald-500"/>
                <span class="text-lg font-bold">{{ __('تکمیل و ارسال سفارش') }}</span>
            </div>
        </x-slot>

        <x-slot name="content">
            <div class="space-y-6">
                <p class="text-sm text-gray-600 dark:text-gray-300">آیتم‌هایی را که در این بسته ارسال می‌شوند، انتخاب کنید:</p>

                <div class="space-y-2 max-h-64 overflow-y-auto pr-2 custom-scrollbar">
                    @forelse($itemsToShip as $index => $item)
                        <label for="item-{{$item['id']}}" class="flex items-center p-3 bg-stone-100 dark:bg-gray-700/50 rounded-lg cursor-pointer hover:bg-emerald-50 dark:hover:bg-emerald-900/50 border border-transparent hover:border-emerald-300">
                            <input id="item-{{$item['id']}}" type="checkbox" wire:model.defer="itemsToShip.{{$index}}.selected" class="rounded border-gray-300 dark:border-gray-600 text-emerald-600 shadow-sm focus:ring-emerald-500">
                            <span class="ms-3 text-sm text-gray-800 dark:text-gray-200">{{ $item['name'] }} (مقدار: {{ $item['quantity'] }} {{ $item['unit'] }})</span>
                        </label>
                    @empty
                        <p class="text-sm text-center text-gray-500 dark:text-gray-400 py-4">
                            تمام آیتم‌های این سفارش قبلاً ارسال شده‌اند.
                        </p>
                    @endforelse
                </div>
                <x-input-error for="items" class="mt-2" />

                <hr class="my-4 dark:border-gray-600">

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <x-label for="shipping_method" value="{{ __('شیوه ارسال') }}" />
                        <x-input id="shipping_method" type="text" class="mt-1 block w-full" wire:model.defer="shipping_method" placeholder="مثلا: پست پیشتاز، تیپاکس، اسنپ..." />
                        <x-input-error for="shipping_method" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="tracking_code" value="{{ __('کد رهگیری (اختیاری)') }}" />
                        <x-input id="tracking_code" type="text" class="mt-1 block w-full" wire:model.defer="tracking_code" />
                        <x-input-error for="tracking_code" class="mt-2" />
                    </div>
                </div>

                {{-- [NEW] Notes field --}}
                <div>
                    <x-label for="notes" value="{{ __('یادداشت ارسال (اختیاری)') }}" />
                    <textarea id="notes" wire:model.defer="notes" 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" rows="3"></textarea>
                    <x-input-error for="notes" class="mt-2" />
                </div>

            </div>
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="$set('confirmingShipment', false)" wire:loading.attr="disabled">
                {{ __('انصراف') }}
            </x-secondary-button>

            <x-button class="ms-3 bg-emerald-600 hover:bg-emerald-700 focus:ring-emerald-500" wire:click="createShipment" wire:loading.attr="disabled">
                {{ __('ثبت ارسال') }}
            </x-button>
        </x-slot>
    </x-dialog-modal>
</div>
