140 lines
8.7 KiB
PHP
140 lines
8.7 KiB
PHP
<!-- Ermittelt dynamisch die erste verfügbare Quelle als Start-Tab -->
|
|
<div class="space-y-6 max-h-[75vh] overflow-y-auto p-1"
|
|
x-data="{ activeTab: '{{ collect(array_keys($lists))->first(fn($key) => str_starts_with($key, 'source-')) }}' }">
|
|
|
|
<!-- 🌟 SEKTION 1: DIE 4 SOURCE-CONTAINER IN NATIVEN FILAMENT TABS -->
|
|
<div wire:key="sources-tab-container">
|
|
|
|
<div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 pb-2 mb-4" wire:key="header-split-zone">
|
|
|
|
<!-- Native Filament Tabs-Leiste -->
|
|
<x-filament::tabs wire:key="filament-tabs-bar">
|
|
@foreach($lists as $listId => $items)
|
|
@if(str_starts_with($listId, 'source-'))
|
|
<x-filament::tabs.item icon="heroicon-m-bell"
|
|
:alpine-active="'activeTab === \'' . $listId . '\''"
|
|
x-on:click="activeTab = '{{ $listId }}'"
|
|
wire:key="tab-button-{{ $listId }}"
|
|
class="cursor-pointer">
|
|
|
|
<div class="flex items-center space-x-2">
|
|
<span>{{ ucwords(str_replace('source-', '', $listId)) }}</span>
|
|
<!-- Kleiner Zähler direkt im Tab-Titel -->
|
|
<x-filament::badge size="xs" color="gray">
|
|
{{ count($items) }}
|
|
</x-filament::badge>
|
|
</div>
|
|
|
|
</x-filament::tabs.item>
|
|
@endif
|
|
@endforeach
|
|
</x-filament::tabs>
|
|
|
|
<div class="flex items-center pl-4 shrink-0" wire:key="modal-close-right-side">
|
|
<x-filament::icon-button
|
|
icon="heroicon-m-x-mark"
|
|
color="gray"
|
|
size="md"
|
|
label="Schließen"
|
|
tooltip="Modal schließen"
|
|
x-on:click="close()"
|
|
class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab-Inhalte (Die Listen selbst) -->
|
|
<div class="mt-4" wire:key="sources-lists-loop">
|
|
@foreach($lists as $listId => $items)
|
|
@if(str_starts_with($listId, 'source-'))
|
|
<div x-show="activeTab === '{{ $listId }}'" class="transition-all" wire:key="tab-panel-{{ $listId }}">
|
|
<x-filament::section compact>
|
|
<!-- SortableJS Container für die aktive Quelle -->
|
|
<div x-init="new Sortable($el, {
|
|
group: 'master-board',
|
|
animation: 150,
|
|
onEnd: function(evt) {
|
|
$wire.moveItem(evt.item.getAttribute('data-id'), evt.from.id, evt.to.id, evt.newIndex);
|
|
}
|
|
})"
|
|
id="{{ $listId }}"
|
|
class="space-y-2 border border-dashed border-gray-300 dark:border-gray-700 rounded-lg p-2 min-h-30 transition duration-200 hover:border-primary-500">
|
|
|
|
@foreach($items as $item)
|
|
<div data-id="{{ $item['id'] }}"
|
|
wire:key="item-source-{{ $item['id'] }}"
|
|
class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-3 flex items-center justify-between shadow-sm cursor-grab active:cursor-grabbing hover:border-primary-500 dark:hover:border-primary-500 transition-all">
|
|
<span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $item['name'] }}</span>
|
|
<svg class="h-4 w-4 text-gray-400 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5" />
|
|
</svg>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</x-filament::section>
|
|
</div>
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 🌟 SEKTION 2: DIE 21 DESTINATION BAYS -->
|
|
<div wire:key="destinations-main-container">
|
|
<div class="text-xs font-bold uppercase tracking-wider text-success-500 mb-3">Target Destination Slots (21)</div>
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-3" wire:key="destations-grid-loop">
|
|
@foreach($lists as $listId => $items)
|
|
@if(str_starts_with($listId, 'dest-'))
|
|
<div class="bg-gray-50 dark:bg-gray-800/40 border border-gray-200 dark:border-gray-700/50 rounded-xl p-3 flex flex-col min-h-[140px]" wire:key="box-{{ $listId }}">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="text-[11px] font-bold uppercase text-gray-500 dark:text-gray-400">Bay {{ str_replace('dest-', '', $listId) }}</span>
|
|
<x-filament::badge color="success" size="xs">
|
|
{{ count($items) }}
|
|
</x-filament::badge>
|
|
</div>
|
|
|
|
<!-- SortableJS Container für das Zielgebiet -->
|
|
<div x-init="new Sortable($el, {
|
|
group: 'master-board',
|
|
animation: 150,
|
|
onEnd: function(evt) {
|
|
$wire.moveItem(evt.item.getAttribute('data-id'), evt.from.id, evt.to.id, evt.newIndex);
|
|
}
|
|
})"
|
|
id="{{ $listId }}"
|
|
class="flex-1 space-y-1.5 border border-dashed border-gray-200 dark:border-gray-700 rounded-lg p-1.5 min-h-[80px] transition-colors duration-200 hover:border-success-500">
|
|
|
|
@foreach($items as $item)
|
|
<div data-id="{{ $item['id'] }}"
|
|
wire:key="item-dest-{{ $item['id'] }}"
|
|
class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 text-xs rounded-md p-2 flex items-center justify-between gap-2 cursor-grab active:cursor-grabbing hover:border-danger-500 transition-all">
|
|
|
|
<span class="truncate font-medium text-gray-900 dark:text-gray-100 flex-1">
|
|
{{ $item['name'] }}
|
|
</span>
|
|
|
|
<div class="flex items-center space-x-1 shrink-0">
|
|
<!-- Return Button -->
|
|
<button type="button"
|
|
title="Return to {{ str_replace('-', ' ', $item['origin']) }}"
|
|
@click.stop="$wire.returnToOrigin('{{ $item['id'] }}', '{{ $listId }}')"
|
|
class="p-1 rounded text-gray-400 hover:text-danger-500 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors cursor-pointer">
|
|
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
|
|
<svg class="h-3.5 w-3.5 text-gray-400 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|