@php
    $isGroup     = $depth === 0;
    $hasChildren = $pos->children->isNotEmpty();
    $titleIndent = $depth * 14;
    $readonly    = $readonly ?? false;
@endphp

@if($isGroup)
<div class="pos-card" id="pos-card-{{ $pos->id }}" data-pos-id="{{ $pos->id }}">
@endif

{{-- Anzeigezeile --}}
<div class="pos-row {{ $isGroup ? 'pos-group' : 'pos-item' }}" id="pos-row-{{ $pos->id }}">
    <div class="d-flex align-items-center px-2 {{ $isGroup ? 'py-3' : 'py-2' }}" style="gap:8px;">

        {{-- ↑ ↓ Pfeile übereinander (nur L1, Platzhalter für Kinder) --}}
        <div class="flex-shrink-0 pos-arrows d-flex flex-column align-items-center" style="width:16px; gap:0;">
            @if($isGroup && !$readonly)
            <button type="button" onclick="movePosition({{ $pos->id }}, 'up')"
                    class="pos-arrow-btn pos-move-up" title="Nach oben">
                <i class="bi bi-chevron-up"></i>
            </button>
            <button type="button" onclick="movePosition({{ $pos->id }}, 'down')"
                    class="pos-arrow-btn pos-move-down" title="Nach unten">
                <i class="bi bi-chevron-down"></i>
            </button>
            @endif
        </div>

        {{-- Pos-Nr Badge --}}
        <div class="flex-shrink-0 text-center" style="width:30px;">
            @if($isGroup)
                <span class="pos-nr-badge" id="pos-nr-{{ $pos->id }}">{{ $pos->pos_number }}</span>
            @else
                <span class="pos-nr-sub" id="pos-nr-{{ $pos->id }}">{{ $pos->pos_number }}</span>
            @endif
        </div>

        {{-- Titel + Beschreibung --}}
        <div class="flex-grow-1" style="min-width:0;@if($titleIndent) padding-left:{{ $titleIndent }}px;@endif">
            <div style="font-size:{{ $isGroup ? '14px' : '13.5px' }}; line-height:1.35; color:{{ $isGroup ? '#111827' : '#374151' }};"
                 class="{{ $isGroup ? 'fw-semibold' : '' }}">
                {{ $pos->title }}
                @if($pos->is_optional)
                    <span class="pos-badge-optional">optional</span>
                @endif
            </div>
            @if($pos->description)
                <div class="pos-desc">{{ $pos->description }}</div>
            @endif
        </div>

        {{-- Menge · ME · E-Preis (nur Blatt-Positionen) --}}
        @if(!$hasChildren)
        <div class="d-flex gap-3 text-end flex-shrink-0 pos-sec-nums">
            <div>
                <div class="pos-num-label">Menge</div>
                <div>{{ $pos->quantity ? number_format($pos->quantity, 2, ',', '.') : '—' }}</div>
            </div>
            <div>
                <div class="pos-num-label">ME</div>
                <div>{{ $pos->positionUnit->name ?? '—' }}</div>
            </div>
            <div>
                <div class="pos-num-label">E-Preis €</div>
                <div>{{ $pos->unit_price ? number_format($pos->unit_price, 2, ',', '.') : '—' }}</div>
            </div>
        </div>

        {{-- G-Preis --}}
        <div class="flex-shrink-0 text-end pos-gprice-col">
            <div class="pos-num-label">G-Preis €</div>
            @php $gprice = (float)$pos->quantity * (float)$pos->unit_price; @endphp
            <div class="pos-gprice {{ $isGroup ? 'pos-gprice-group' : 'pos-gprice-item' }} {{ $pos->is_optional ? 'pos-gprice-optional' : '' }}">
                @if($pos->is_optional)—@else{{ $gprice > 0 ? number_format($gprice, 2, ',', '.') : '—' }}@endif
            </div>
        </div>
        @else
        <div class="flex-grow-0" style="min-width:0;"></div>
        @endif

        {{-- 3 Icon-Buttons rechts --}}
        @if(!$readonly)
        <div class="flex-shrink-0 pos-actions d-flex align-items-center" style="gap:2px; width:88px; justify-content:flex-end;">
            @if($pos->level < 5)
            <div class="dropdown">
                <button type="button"
                        class="pos-icon-btn pos-icon-btn-add"
                        data-bs-toggle="dropdown"
                        data-bs-strategy="fixed"
                        aria-expanded="false"
                        title="Unterposition hinzufügen">
                    <i class="bi bi-plus-lg"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                        <button type="button" class="dropdown-item"
                                onclick="showSubPosition({{ $pos->id }}, {{ $pos->level + 1 }})">
                            <i class="bi bi-pencil-square me-2" style="color:#64748b;"></i>Manuell
                        </button>
                    </li>
                    <li><hr class="dropdown-divider my-1"></li>
                    <li>
                        <button type="button" class="dropdown-item"
                                onclick="setSubContext({{ $pos->id }}, {{ $pos->level + 1 }})"
                                data-bs-toggle="modal" data-bs-target="#modal-leistungsbibliothek">
                            <i class="bi bi-book me-2" style="color:#64748b;"></i>Leistungsposition
                        </button>
                    </li>
                    <li>
                        <button type="button" class="dropdown-item"
                                onclick="setSubContext({{ $pos->id }}, {{ $pos->level + 1 }})"
                                data-bs-toggle="modal" data-bs-target="#modal-materialkatalog">
                            <i class="bi bi-box-seam me-2" style="color:#64748b;"></i>Material
                        </button>
                    </li>
                    <li>
                        <button type="button" class="dropdown-item"
                                onclick="setSubContext({{ $pos->id }}, {{ $pos->level + 1 }})"
                                data-bs-toggle="modal" data-bs-target="#modal-lohnkatalog">
                            <i class="bi bi-clock me-2" style="color:#64748b;"></i>Lohn
                        </button>
                    </li>
                    <li>
                        <button type="button" class="dropdown-item"
                                onclick="setSubContext({{ $pos->id }}, {{ $pos->level + 1 }})"
                                data-bs-toggle="modal" data-bs-target="#modal-geraetekatalog">
                            <i class="bi bi-tools me-2" style="color:#64748b;"></i>Geräte
                        </button>
                    </li>
                    <li>
                        <button type="button" class="dropdown-item"
                                onclick="setSubContext({{ $pos->id }}, {{ $pos->level + 1 }})"
                                data-bs-toggle="modal" data-bs-target="#modal-fremdleistung">
                            <i class="bi bi-truck me-2" style="color:#64748b;"></i>Fremdleistung
                        </button>
                    </li>
                    <li>
                        <button type="button" class="dropdown-item"
                                onclick="setSubContext({{ $pos->id }}, {{ $pos->level + 1 }})"
                                data-bs-toggle="modal" data-bs-target="#modal-sonstiges">
                            <i class="bi bi-three-dots me-2" style="color:#64748b;"></i>Sonstige
                        </button>
                    </li>
                </ul>
            </div>
            @endif
            <button type="button" onclick="toggleEditRow({{ $pos->id }})"
                    class="pos-icon-btn pos-icon-btn-edit" title="Bearbeiten">
                <i class="bi bi-pencil"></i>
            </button>
            <button type="button"
                    onclick="confirmDeletePosition('{{ route('pms.orders.position.destroy', [$pos->fk_order_id, $pos->id]) }}', {{ json_encode($pos->title) }})"
                    class="pos-icon-btn pos-icon-btn-danger" title="Löschen">
                <i class="bi bi-trash"></i>
            </button>
        </div>
        @else
        <div style="width:88px;"></div>
        @endif

    </div>
</div>

{{-- Bearbeitungszeile --}}
@if(!$readonly)
<div id="edit-row-{{ $pos->id }}" class="pos-edit-row" style="display:none;">
    <div class="d-flex align-items-start gap-2 px-3 py-2" style="padding-left:{{ 46 + $titleIndent }}px !important;">
        <div class="flex-grow-1">
            <form id="edit-form-{{ $pos->id }}" method="POST"
                  action="{{ route('pms.orders.position.update', [$pos->fk_order_id, $pos->id]) }}">
                @csrf
                <input type="text" name="title" value="{{ $pos->title }}"
                       class="form-control form-control-sm mb-1" required placeholder="Titel *">
                <textarea name="description" rows="2"
                          class="form-control form-control-sm mb-2"
                          placeholder="Beschreibung (optional)">{{ $pos->description }}</textarea>
            </form>
            <div class="d-flex gap-2 justify-content-end align-items-end flex-wrap">
                @if(!$hasChildren)
                <div>
                    <div class="text-muted mb-1" style="font-size:10px; letter-spacing:.04em;">MENGE</div>
                    <input form="edit-form-{{ $pos->id }}" type="number" name="quantity"
                           step="0.01" value="{{ $pos->quantity }}"
                           class="form-control form-control-sm text-end" style="width:75px;">
                </div>
                <div>
                    <div class="text-muted mb-1" style="font-size:10px; letter-spacing:.04em;">ME</div>
                    <select form="edit-form-{{ $pos->id }}" name="fk_unit_id"
                            class="form-select form-select-sm" style="width:78px;">
                        <option value="">—</option>
                        @foreach($units as $u)
                        <option value="{{ $u->id }}" {{ $pos->fk_unit_id == $u->id ? 'selected' : '' }}>{{ $u->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <div class="text-muted mb-1" style="font-size:10px; letter-spacing:.04em;">E-PREIS €</div>
                    <input form="edit-form-{{ $pos->id }}" type="number" name="unit_price"
                           step="0.01" value="{{ $pos->unit_price }}"
                           class="form-control form-control-sm text-end" style="width:95px;">
                </div>
                @endif
                <div class="d-flex align-items-end pb-1">
                    <div class="form-check form-switch mb-0">
                        <input form="edit-form-{{ $pos->id }}" class="form-check-input" type="checkbox"
                               name="is_optional" id="opt-{{ $pos->id }}" value="1"
                               {{ $pos->is_optional ? 'checked' : '' }}>
                        <label class="form-check-label small" for="opt-{{ $pos->id }}" style="font-size:11px;">Optional</label>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex-shrink-0 pos-actions pt-1 d-flex gap-1">
            <button type="submit" form="edit-form-{{ $pos->id }}"
                    class="btn btn-sm btn-warning rounded-pill px-2 py-1" title="Speichern">
                <i class="bi bi-check-lg"></i>
            </button>
            <button type="button" onclick="toggleEditRow({{ $pos->id }})"
                    class="btn btn-sm btn-outline-secondary rounded-pill px-2 py-1" title="Abbrechen">
                <i class="bi bi-x-lg"></i>
            </button>
        </div>
    </div>
</div>
@endif

@foreach($pos->children as $ci => $child)
    @include('pms.orders._position_row', ['pos' => $child, 'depth' => $depth + 1, 'nr' => $nr . '.' . ($ci+1), 'readonly' => $readonly])
@endforeach

@if($isGroup)
</div>
@endif