{{--<div>--}}
{{--    <x-slot name="header">--}}
{{--        <h2 class="font-semibold text-xl text-gray-800 leading-tight">--}}
{{--            نمای گرافیکی تانک: <span class="font-bold text-blue-600">{{ $tank->name }}</span>--}}
{{--        </h2>--}}
{{--    </x-slot>--}}

{{--    <div class="py-12">--}}
{{--        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">--}}
{{--            <div class="bg-white rounded-xl shadow-lg flex flex-col lg:flex-row min-h-[70vh]">--}}

{{--                <!-- Details and Contents Panel -->--}}
{{--                <div class="w-full lg:w-1/3 border-b lg:border-b-0 lg:border-l border-gray-200 p-6">--}}
{{--                    <h3 class="text-lg font-bold text-gray-900">محتویات</h3>--}}
{{--                    @if($selectedCanister)--}}
{{--                        <div class="mt-4">--}}
{{--                            <h4 class="font-semibold">کنیستر {{ $selectedCanister->name }}</h4>--}}
{{--                            <div class="mt-2 space-y-2">--}}
{{--                                @forelse($racksOrCanes as $item)--}}
{{--                                    <a href="#" class="block p-3 rounded-lg hover:bg-gray-100 border">--}}
{{--                                        <p class="font-semibold text-sm">--}}
{{--                                            @if($tank->internal_structure_type === 'rack_based')--}}
{{--                                                <x-lucide-box class="inline-block w-4 h-4 ml-1"/> رک شماره {{ $item->name }}--}}
{{--                                            @else--}}
{{--                                                <x-lucide-grip-vertical class="inline-block w-4 h-4 ml-1"/> کرایوکین {{ $item->name }}--}}
{{--                                            @endif--}}
{{--                                        </p>--}}
{{--                                    </a>--}}
{{--                                @empty--}}
{{--                                    <p class="text-sm text-gray-500 italic">این کنیستر خالی است.</p>--}}
{{--                                @endforelse--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    @else--}}
{{--                        <p class="mt-4 text-sm text-gray-500">برای مشاهده محتویات، روی یکی از کنیسترها در نمای گرافیکی کلیک کنید.</p>--}}
{{--                    @endif--}}
{{--                </div>--}}

{{--                <!-- Graphical Tank View -->--}}
{{--                <div class="flex-grow p-6 flex items-center justify-center">--}}
{{--                    <div class="relative w-96 h-96 border-8 border-gray-300 rounded-full flex items-center justify-center">--}}
{{--                        <div class="absolute w-24 h-24 bg-gray-200 rounded-full"></div>--}}
{{--                        @php $canisterCount = $canisters->count(); @endphp--}}
{{--                        @foreach($canisters as $index => $canister)--}}
{{--                            @php--}}
{{--                                $angle = ($index / $canisterCount) * 360;--}}
{{--                                $isSelected = $selectedCanister && $selectedCanister->id === $canister->id;--}}
{{--                            @endphp--}}
{{--                            <button--}}
{{--                                wire:click="selectCanister({{ $canister->id }})"--}}
{{--                                class="absolute w-16 h-16 rounded-full flex items-center justify-center font-bold text-lg transition-transform duration-300 transform hover:scale-110--}}
{{--                                       {{ $isSelected ? 'bg-blue-500 text-white shadow-lg' : 'bg-gray-300 hover:bg-blue-400' }}"--}}
{{--                                style="transform: rotate({{ $angle }}deg) translate(150px) rotate(-{{ $angle }}deg);"--}}
{{--                                title="کنیستر {{ $canister->name }}">--}}
{{--                                {{ $canister->name }}--}}
{{--                            </button>--}}
{{--                        @endforeach--}}
{{--                    </div>--}}
{{--                </div>--}}

{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}
{{--</div>--}}
<div>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            نمای گرافیکی تانک: <span class="font-bold text-blue-600">{{ $tank->name }}</span>
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white rounded-xl shadow-lg flex flex-col lg:flex-row min-h-[70vh]">

                <!-- [UPDATED] Interactive Details and Contents Panel -->
                <div class="w-full lg:w-1/3 border-b lg:border-b-0 lg:border-l border-gray-200 p-6">
                    <h3 class="text-lg font-bold text-gray-900">
                        @if($selectedRack)
                            محتویات رک {{ $selectedRack->name }}
                        @elseif($selectedCanister)
                            محتویات کنیستر {{ $selectedCanister->name }}
                        @else
                            محتویات
                        @endif
                    </h3>

                    @if($selectedCanister)
                        <div class="mt-4">
                            @if($selectedRack)
                                <!-- Back button to return to the list of racks -->
                                <button wire:click="goBackToCanisterView" class="mb-4 text-sm text-blue-600 hover:underline flex items-center transition-colors">
                                    <x-lucide-arrow-right class="w-4 h-4 ml-1"/>
                                    بازگشت به لیست رک‌ها
                                </button>

                                <!-- List of Boxes -->
                                <h4 class="font-semibold text-gray-700">باکس‌ها</h4>
                                <div class="mt-2 space-y-2">
                                    @forelse($boxes as $box)
                                        <a href="{{ route('inventory.locations.view', $box) }}" class="block p-3 rounded-lg hover:bg-gray-100 border transition" title="مشاهده محتویات باکس">
                                            <p class="font-semibold text-sm">
                                                <x-lucide-archive class="inline-block w-4 h-4 ml-1"/> باکس شماره {{ $box->name }}
                                            </p>
                                        </a>
                                    @empty
                                        <p class="text-sm text-gray-500 italic">این رک خالی است.</p>
                                    @endforelse
                                </div>
                            @else
                                <!-- List of Racks or Canes -->
                                <div class="mt-2 space-y-2">
                                    @forelse($racksOrCanes as $item)
                                        @if($item->location_type === 'rack')
                                            <button wire:click="selectRack({{ $item->id }})" class="w-full text-right block p-3 rounded-lg hover:bg-gray-100 border transition">
                                                <p class="font-semibold text-sm">
                                                    <x-lucide-box class="inline-block w-4 h-4 ml-1"/> رک شماره {{ $item->name }}
                                                </p>
                                            </button>
                                        @elseif($item->location_type === 'cane')
                                            {{-- [MODIFIED] This now links to the new cane viewer route --}}
                                            <a href="{{ route('inventory.locations.cane.view', $item) }}" class="block p-3 rounded-lg hover:bg-gray-100 border transition" title="مشاهده محتویات کرایوکین">
                                                <p class="font-semibold text-sm text-gray-600">
                                                    <x-lucide-grip-vertical class="inline-block w-4 h-4 ml-1"/> کرایوکین {{ $item->name }}
                                                </p>
                                            </a>
                                        @endif
                                    @empty
                                        <p class="text-sm text-gray-500 italic">این کنیستر خالی است.</p>
                                    @endforelse
                                </div>
                            @endif
                        </div>
                    @else
                        <p class="mt-4 text-sm text-gray-500">برای مشاهده محتویات، روی یکی از کنیسترها در نمای گرافیکی کلیک کنید.</p>
                    @endif
                </div>

                <!-- Graphical Tank View (No changes here) -->
                <div class="flex-grow p-6 flex items-center justify-center">
                    <div class="relative w-96 h-96 border-8 border-gray-300 rounded-full flex items-center justify-center">
                        <div class="absolute w-24 h-24 bg-gray-200 rounded-full"></div>
                        @php $canisterCount = $canisters->count(); @endphp
                        @foreach($canisters as $index => $canister)
                            @php
                                $angle = ($index / ($canisterCount > 0 ? $canisterCount : 1)) * 360;
                                $isSelected = $selectedCanister && $selectedCanister->id === $canister->id;
                            @endphp
                            <button
                                wire:click="selectCanister({{ $canister->id }})"
                                class="absolute w-16 h-16 rounded-full flex items-center justify-center font-bold text-lg transition-transform duration-300 transform hover:scale-110
                                       {{ $isSelected ? 'bg-blue-500 text-white shadow-lg' : 'bg-gray-300 hover:bg-blue-400' }}"
                                style="transform: rotate({{ $angle }}deg) translate(150px) rotate(-{{ $angle }}deg);"
                                title="کنیستر {{ $canister->name }}">
                                {{ $canister->name }}
                            </button>
                        @endforeach
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
