@props(['items', 'links' => false, 'pagination' => false, 'linksadmin' => false])

@if (isset($items) and $items->count() > 0)
    <div {{ $attributes->merge(['class' => 'mb-3']) }}>
        @foreach ($items as $item)
            <div @class([
                'hover:bg-gray-100 hover:border-gray-300 border border-solid border-gray-200 offer-item px-4 py-5',
                'bg-red-100' => !$item->isActive(),
                'bg-[#FFFFFF]' => $item->isActive(),
                'mt-1' => !$loop->first,
            ])>

                <x-offers.header :item="$item" :links="$links" :linksadmin="$linksadmin" model="WagonSludge"
                    route="wagon-sludge">
                </x-offers.header>

                <section class="body mt-3">
                    <div class="flex lg:justify-between flex-col lg:flex-row">
                        <div class="flex flex-col">
                            <div class='flex items-center h-8'>
                                <x-svg.calendar class='w-4 fill-gray-500 mr-2' />
                                <span class="">{{ Carbon\Carbon::parse($item->actual_from)->format('d.m.y') }} -
                                    {{ Carbon\Carbon::parse($item->actual_to)->format('d.m.y') }}
                                </span>
                            </div>
                            <div class='h-8 text-right flex items-center '>
                                <span class="w-4 mr-2">
                                    <x-svg.user class=''></x-svg.user>
                                </span>
                                <span class="font-bold ">{{ __('messages.author') }}: <span
                                        class="text-blue-500">{{ $item->user->name }}</span>
                                </span>
                            </div>
                            <div class='h-auto mb-2 text-right flex items-center min-w-64'>
                                <span class="w-4 mr-2">
                                    <x-svg.contact class='w-6'></x-svg.contact>
                                </span>
                                <span class='text-sm text-left break-words overflow-hidden'>
                                    {{ $item->contacts }}
                                </span>
                            </div>




                            <div class='flex justify-end w-full flex-col mt-3 lg:mt-0'>
                                @foreach ($item->stationsWagons as $stationWagon)
                                    <div class="flex flex-col  p-1">
                                        <div class='flex items-center gap-1  flex-wrap mg:flex-nowrap'>
                                            <span
                                                class="text-sm mg:text-base truncate max-w-full mg:max-w-none text-gray-700 font-medium">
                                                {{ $stationWagon->station->name_ua }}
                                                ({{ $stationWagon->station_code }})
                                            </span>
                                            <div class="flex gap-1 items-center">
                                                <span>{{ __('messages.fields.min_wagons') }}:</span>
                                                <span
                                                    class="font-semibold text-blue-500">{{ $stationWagon->min_wagons }}</span>
                                                <span>{{ __('messages.fields.max_wagons') }}:</span>
                                                <span
                                                    class="font-semibold text-blue-500">{{ $stationWagon->max_wagons }}</span>
                                            </div>
                                        </div>

                                    </div>
                                @endforeach
                            </div>


                        </div>
                        <div class="flex flex-col md:text-right mt-3 lg:mt-0 space-y-3">
                            <span class=' md:w-64 text-gray-800 hover:text-blue-500 transition-colors break-words'>
                                {{ $item->offer_name }}
                            </span>

                        </div>



                    </div>


                </section>

                <x-offers.footer :item="$item" :items="$items" :pagination="$pagination"
                    route="wagon-sludge"></x-offers.footer>

            </div>
        @endforeach
    </div>
@else
    <div class='box__white'>
        <span class='text-red-light pl-3 py-3 block'>{{ __('messages.empty_result') }}</span>
    </div>
@endif