{{--<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg border-t-4 border-orange-500 h-full">--}}
{{--    <div class="p-6">--}}
{{--        <div class="flex items-center justify-between">--}}
{{--            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">--}}
{{--                <i class="fa fa-chart-line text-orange-500 ml-2"></i>--}}
{{--                پیش‌بینی وضعیت انبار--}}
{{--            </h3>--}}
{{--            <span class="text-xs text-gray-400">۳۰ روز آینده</span>--}}
{{--        </div>--}}
{{--        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">--}}
{{--            مواردی که بر اساس الگوی مصرف، به زودی تمام خواهند شد.--}}
{{--        </p>--}}

{{--        <div class="mt-4 space-y-3">--}}
{{--            @forelse ($forecastedItems as $item)--}}
{{--                <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">--}}
{{--                    <div>--}}
{{--                        <p class="font-medium text-gray-800 dark:text-gray-200">{{ $item->name }}</p>--}}
{{--                        <p class="text-xs text-gray-500">موجودی فعلی: {{ $item->quantity }} {{ $item->unit }}</p>--}}
{{--                    </div>--}}
{{--                    <div class="text-left">--}}
{{--                        <p class="text-sm font-bold text-red-500">{{ verta($item->predicted_stockout_date)->format('Y/m/d') }}</p>--}}
{{--                        <p class="text-xs text-gray-500">اتمام موجودی</p>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            @empty--}}
{{--                <div class="text-center py-8 border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-lg">--}}
{{--                    <i class="fa fa-check-circle text-green-500 text-4xl mx-auto"></i>--}}
{{--                    <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>--}}
{{--            @endforelse--}}
{{--        </div>--}}
{{--    </div>--}}
{{--</div>--}}
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg">
    <div class="p-6">
        <div class="flex items-start justify-between">
            <div class="flex items-center">
                {{-- آیکن هدر --}}
                <div class="bg-orange-100 dark:bg-orange-500/20 p-2 rounded-full me-3">
                    <i class="fa-solid fa-chart-line text-xl text-orange-500"></i>
                </div>
                <div>
                    <h3 class="font-bold text-gray-900 dark:text-white">
                        پیش‌بینی وضعیت انبار
                    </h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                        مواردی که طی ۳۰ روز آینده تمام خواهند شد.
                    </p>
                </div>
            </div>
        </div>

        {{-- لیست آیتم های در خطر --}}
        <div class="mt-6 space-y-3">
            @forelse ($forecastedItems as $item)
                <div class="relative flex items-center justify-between p-3 overflow-hidden transition-all duration-300 bg-gray-50 hover:bg-gray-100 dark:bg-gray-700/50 dark:hover:bg-gray-700 rounded-lg">
                    {{-- نوار عمودی برای تاکید --}}
                    <div class="absolute right-0 h-full w-1.5 bg-red-400"></div>

                    <div class="pr-4">
                        <p class="font-semibold text-sm text-gray-800 dark:text-gray-200">{{ $item->name }}</p>
                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">موجودی فعلی: {{ $item->quantity }} {{ $item->unit }}</p>
                    </div>

                    {{-- تاریخ اتمام موجودی --}}
                    <div class="text-left">
                        <span class="px-2.5 py-1 text-xs font-bold text-red-800 bg-red-100 dark:text-red-200 dark:bg-red-900/40 rounded-full whitespace-nowrap">
                           اتمام در: {{ verta($item->predicted_stockout_date)->format('Y/m/d') }}
                        </span>
                    </div>
                </div>
            @empty
                {{-- حالت خالی (وقتی آیتمی در خطر نیست) --}}
                <div class="text-center py-8 px-4 border-2 border-dashed border-gray-200 dark:border-gray-700 rounded-lg">
                    <div class="inline-block bg-green-100 dark:bg-green-500/20 p-3 rounded-full">
                        <i class="fa-solid fa-shield-check text-4xl text-green-500"></i>
                    </div>
                    <h3 class="mt-3 font-semibold text-gray-900 dark:text-white">وضعیت انبار مطلوب است</h3>
                    <p class="mt-1 text-sm text-gray-500">در حال حاضر هیچ آیتمی در خطر اتمام موجودی قرار ندارد.</p>
                </div>
            @endforelse
        </div>
    </div>
</div>