@php
    $isGroup     = $depth === 0;
    $hasChildren = $pos->children->isNotEmpty();
    $titleIndent = $depth * 14;
@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 Hauptpositionen) --}}
        <div class="flex-shrink-0 pos-arrows d-flex flex-column align-items-center" style="width:16px; gap:0;">
            @if($isGroup)
            <button type="button" onclick="movePosition({{ $pos->id }}, 'up')"
                    class="pos-arrow-btn" title="Nach oben">
                <i class="bi bi-chevron-up"></i>
            </button>
            <button type="button" onclick="movePosition({{ $pos->id }}, 'down')"
                    class="pos-arrow-btn" 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 }}">{{ $nr }}</span>
            @else
                <span class="pos-nr-sub" id="pos-nr-{{ $pos->id }}">{{ $nr }}</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 bei 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->unit->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 (nur bei Blatt-Positionen) --}}
        @php $gprice = (float) $pos->calculated_total; @endphp
        <div class="flex-shrink-0 text-end pos-gprice-col">
            <div class="pos-num-label">G-Preis €</div>
            <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
        {{-- Platzhalter damit Buttons rechtsbündig bleiben --}}
        <div class="flex-grow-0" style="min-width:0;"></div>
        @endif

        {{-- 3 Icon-Buttons rechts --}}
        <div class="flex-shrink-0 pos-actions d-flex align-items-center"
             style="gap:2px; width:88px; justify-content:flex-end;">
            @if($depth < 4)
            <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 }}, {{ $depth + 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="showSubPosition({{ $pos->id }}, {{ $depth + 1 }})"><i class="bi bi-book me-2" style="color:#64748b;"></i>Leistungsposition</button></li>
                    <li><button type="button" class="dropdown-item" onclick="showSubPosition({{ $pos->id }}, {{ $depth + 1 }})"><i class="bi bi-box-seam me-2" style="color:#64748b;"></i>Material</button></li>
                    <li><button type="button" class="dropdown-item" onclick="showSubPosition({{ $pos->id }}, {{ $depth + 1 }})"><i class="bi bi-clock me-2" style="color:#64748b;"></i>Lohn</button></li>
                    <li><button type="button" class="dropdown-item" onclick="showSubPosition({{ $pos->id }}, {{ $depth + 1 }})"><i class="bi bi-tools me-2" style="color:#64748b;"></i>Geräte</button></li>
                    <li><button type="button" class="dropdown-item" onclick="showSubPosition({{ $pos->id }}, {{ $depth + 1 }})"><i class="bi bi-truck me-2" style="color:#64748b;"></i>Fremdleistung</button></li>
                    <li><button type="button" class="dropdown-item" onclick="showSubPosition({{ $pos->id }}, {{ $depth + 1 }})"><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="invDeletePos({{ $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>

    </div>
</div>

{{-- Bearbeitungszeile --}}
<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">
            <input type="text" id="inv-edit-title-{{ $pos->id }}"
                   class="form-control form-control-sm mb-1"
                   value="{{ $pos->title }}" placeholder="Titel *">
            <textarea id="inv-edit-desc-{{ $pos->id }}" rows="2"
                      class="form-control form-control-sm mb-2"
                      placeholder="Beschreibung (optional)">{{ $pos->description }}</textarea>
            @if(!$hasChildren)
            <div class="d-flex gap-2 justify-content-end align-items-end flex-wrap">
                <div>
                    <div class="text-muted mb-1" style="font-size:10px; letter-spacing:.04em;">MENGE</div>
                    <input type="number" id="inv-edit-qty-{{ $pos->id }}"
                           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 id="inv-edit-unit-{{ $pos->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 type="number" id="inv-edit-price-{{ $pos->id }}"
                           step="0.01" value="{{ $pos->unit_price }}"
                           class="form-control form-control-sm text-end" style="width:95px;">
                </div>
                <div class="d-flex align-items-end pb-1">
                    <div class="form-check form-switch mb-0">
                        <input class="form-check-input" type="checkbox"
                               id="inv-edit-opt-{{ $pos->id }}" value="1"
                               {{ $pos->is_optional ? 'checked' : '' }}>
                        <label class="form-check-label small" for="inv-edit-opt-{{ $pos->id }}" style="font-size:11px;">Optional</label>
                    </div>
                </div>
            </div>
            @endif
        </div>
        <div class="flex-shrink-0 pos-actions pt-1 d-flex gap-1">
            <button type="button" onclick="invSavePosEdit({{ $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>

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

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