<div>
    <div class="bio-step-panel">
        <div class="bio-step-title">Pilih Lemari</div>
        <div class="bio-choice-grid">
            @forelse($cabinets as $cabinet)
                <button type="button"
                    class="bio-choice {{ (int) $selectedCabinetId === (int) $cabinet->id ? 'active' : '' }}"
                    wire:click="selectCabinet({{ $cabinet->id }})">
                    <strong>{{ $cabinet->code }} - {{ $cabinet->name }}</strong>
                    <span>{{ $cabinet->location ?? 'Lokasi belum diisi' }}</span>
                    <small>{{ $cabinet->racks_count }} rack | {{ $cabinet->specimens_count }} tube terisi</small>
                </button>
            @empty
                <div class="alert alert-warning m-b-0">Belum ada data lemari biorepository.</div>
            @endforelse
        </div>
    </div>

    @if($selectedCabinet)
        <div class="d-flex justify-content-between align-items-center m-b-15">
            <h5 class="m-b-0">{{ $selectedCabinet->code }} - {{ $selectedCabinet->name }}</h5>
            <form method="POST" action="{{ route('biorepository.deleteCabinet', $selectedCabinet->id) }}" class="js-delete-cabinet">
                @csrf
                <button type="submit" class="btn btn-sm btn-danger">Delete Lemari</button>
            </form>
        </div>

        <div class="bio-step-panel">
            <div class="bio-step-title">Pilih Rack</div>
            <div class="bio-choice-grid">
                @forelse($selectedCabinet->racks as $rack)
                    @php
                        $slotCount = (int) ($rack->slot_count ?: 1);
                        $shelfCount = (int) $rack->level;
                        $boxCount = (int) ($rack->box_number ?: 1);
                        $tubeCapacity = (int) $rack->capacity;
                    @endphp
                    <div class="bio-choice-wrap">
                        <button type="button"
                            class="bio-choice {{ (int) $selectedRackId === (int) $rack->id ? 'active' : '' }}"
                            wire:click="selectRack({{ $rack->id }})">
                            <strong>{{ $rack->code }} - {{ $rack->name }}</strong>
                            <span>Rack No {{ $rack->rack_number ?? $rack->id }}</span>
                            <small>{{ $slotCount }} slot | {{ $shelfCount }} shelf/slot | {{ $boxCount }} box/shelf | {{ $tubeCapacity }} tube/box</small>
                            <small>Terisi: {{ $rack->specimens_count }}</small>
                        </button>
                        <form method="POST" action="{{ route('biorepository.deleteRack', $rack->id) }}" class="js-delete-rack bio-delete-form">
                            @csrf
                            <button type="submit" class="btn btn-xs btn-danger">Delete</button>
                        </form>
                    </div>
                @empty
                    <div class="alert alert-light m-b-0">Belum ada rack pada lemari ini.</div>
                @endforelse
            </div>
        </div>
    @endif

    @if($selectedRack)
        @php
            $slotCount = max(1, (int) ($selectedRack->slot_count ?: 1));
            $shelfCount = max(0, (int) $selectedRack->level);
            $boxCount = max(1, (int) ($selectedRack->box_number ?: 1));
            $tubeCapacity = max(0, (int) $selectedRack->capacity);
            $tubeMap = [];
            foreach ($selectedRack->specimens as $item) {
                if ($item->slot_number && $item->shelf_number && $item->box_number && $item->tube_number) {
                    $tubeMap[$item->slot_number.'-'.$item->shelf_number.'-'.$item->box_number.'-'.$item->tube_number] = $item;
                }
            }
        @endphp

        <div class="bio-step-panel">
            <div class="bio-step-title">Pilih Slot</div>
            <div class="bio-number-grid">
                @for($slot = 1; $slot <= $slotCount; $slot++)
                    <button type="button"
                        class="bio-number {{ (int) $selectedSlot === $slot ? 'active' : '' }}"
                        wire:click="selectSlot({{ $slot }})">
                        Slot {{ $slot }}
                    </button>
                @endfor
            </div>
        </div>

        @if($selectedSlot)
            <div class="bio-step-panel">
                <div class="bio-step-title">Pilih Shelf</div>
                <div class="bio-number-grid">
                    @for($shelf = 1; $shelf <= $shelfCount; $shelf++)
                        <button type="button"
                            class="bio-number {{ (int) $selectedShelf === $shelf ? 'active' : '' }}"
                            wire:click="selectShelf({{ $shelf }})">
                            Shelf {{ $shelf }}
                        </button>
                    @endfor
                </div>
            </div>
        @endif

        @if($selectedSlot && $selectedShelf)
            <div class="bio-step-panel">
                <div class="bio-step-title">Pilih Box</div>
                <div class="bio-number-grid">
                    @for($box = 1; $box <= $boxCount; $box++)
                        <button type="button"
                            class="bio-number {{ (int) $selectedBox === $box ? 'active' : '' }}"
                            wire:click="selectBox({{ $box }})">
                            Box {{ $box }}
                        </button>
                    @endfor
                </div>
            </div>
        @endif

        @if($selectedSlot && $selectedShelf && $selectedBox)
            <div class="bio-step-panel">
                <div class="bio-step-title">Tube List</div>
                @if($tubeCapacity > 0)
                    <div class="tube-grid">
                        @for($tube = 1; $tube <= $tubeCapacity; $tube++)
                            @php $tubeKey = $selectedSlot.'-'.$selectedShelf.'-'.$selectedBox.'-'.$tube; @endphp
                            @if(isset($tubeMap[$tubeKey]))
                                <button type="button"
                                    class="slot-btn slot-filled js-slot-filled"
                                    data-specimen-id="{{ $tubeMap[$tubeKey]->id }}"
                                    data-rack-id="{{ $selectedRack->id }}"
                                    data-shelf="{{ $selectedShelf }}"
                                    data-rackno="{{ $selectedRack->rack_number ?? $selectedRack->id }}"
                                    data-slot="{{ $selectedSlot }}"
                                    data-box="{{ $selectedBox }}"
                                    data-tube="{{ $tube }}"
                                    data-bakteri="{{ $tubeMap[$tubeKey]->bacteria_name ?? $tubeMap[$tubeKey]->specimen_name }}"
                                    data-strain="{{ $tubeMap[$tubeKey]->strain }}"
                                    data-volume="{{ $tubeMap[$tubeKey]->volume ?? 0 }}"
                                    title="{{ $tubeMap[$tubeKey]->specimen_code }} - {{ $tubeMap[$tubeKey]->bacteria_name ?? $tubeMap[$tubeKey]->specimen_name }} / {{ $tubeMap[$tubeKey]->strain }}">
                                    <span>{{ $tube }}</span>
                                    <small>{{ $tubeMap[$tubeKey]->volume ?? 0 }} ml</small>
                                </button>
                            @else
                                <button type="button"
                                    class="slot-btn js-slot"
                                    data-rack-id="{{ $selectedRack->id }}"
                                    data-shelf="{{ $selectedShelf }}"
                                    data-rackno="{{ $selectedRack->rack_number ?? $selectedRack->id }}"
                                    data-slot="{{ $selectedSlot }}"
                                    data-box="{{ $selectedBox }}"
                                    data-tube="{{ $tube }}">
                                    {{ $tube }}
                                </button>
                            @endif
                        @endfor
                    </div>
                @else
                    <div class="alert alert-light m-b-0">Konfigurasi tube belum lengkap.</div>
                @endif
            </div>
        @endif
    @endif
</div>
