@php
    $isGroup = $depth === 0;
    $indentPx = 12 + $depth * 16;
@endphp

{{-- Anzeigezeile --}}
<div class="pos-row {{ $isGroup ? 'pos-group' : 'pos-item' }}" id="pos-row-{{ $pos->id }}">
    <div class="pos-row-inner d-flex align-items-start gap-2 px-3 py-2" style="padding-left:{{ $indentPx }}px !important;">
        {{-- Positionsnummer --}}
        <div class="flex-shrink-0 pt-1" style="min-width:42px; font-size:13px;">
            <span class="{{ $isGroup ? 'fw-bold' : 'text-muted' }}">{{ $pos->pos_number }}</span>
        </div>
        {{-- Bezeichnung + Beschreibung + Zahlen --}}
        <div class="flex-grow-1" style="min-width:0;">
            <div class="{{ $isGroup ? 'fw-bold' : '' }}" style="font-size:14px;">
                {{ $pos->title }}
                @if($pos->is_optional)
                    <span class="badge ms-1" style="font-size:10px; background:#fff3cd; color:#664d03; font-weight:500;">optional</span>
                @endif
            </div>
            @if($pos->description)
                <div class="text-muted mt-1" style="font-size:13px; white-space:pre-line; line-height:1.6;">{{ $pos->description }}</div>
            @endif
            <div class="d-flex gap-3 justify-content-end mt-2 small text-end flex-wrap">
                <div>
                    <div class="text-muted" style="font-size:10px; letter-spacing:.04em;">MENGE</div>
                    <div>{{ $pos->quantity ? number_format($pos->quantity, 2, ',', '.') : '—' }}</div>
                </div>
                <div>
                    <div class="text-muted" style="font-size:10px; letter-spacing:.04em;">ME</div>
                    <div>{{ $pos->positionUnit->name ?? '—' }}</div>
                </div>
                <div>
                    <div class="text-muted" style="font-size:10px; letter-spacing:.04em;">E-PREIS €</div>
                    <div>{{ $pos->unit_price ? number_format($pos->unit_price, 2, ',', '.') : '—' }}</div>
                </div>
                <div>
                    <div class="text-muted" style="font-size:10px; letter-spacing:.04em;">G-PREIS €</div>
                    @php $gprice = (float)$pos->quantity * (float)$pos->unit_price; @endphp
                    <div class="{{ $isGroup ? 'fw-bold' : 'fw-semibold' }} {{ $pos->is_optional ? 'text-muted' : '' }}">
                        @if($pos->is_optional)—@else{{ $gprice > 0 ? number_format($gprice, 2, ',', '.') : '—' }}@endif
                    </div>
                </div>
            </div>
        </div>
        {{-- Aktionen (hover-sichtbar) --}}
        <div class="flex-shrink-0 pos-actions pt-1" style="white-space:nowrap; min-width:90px; text-align:right;">
            @if($pos->level < 5)
            <button type="button"
                    onclick="showSubPosition({{ $pos->id }}, {{ $pos->level + 1 }})"
                    class="btn btn-sm btn-outline-primary rounded-pill px-1 py-0"
                    title="Unterposition" style="font-size:11px; line-height:1.6;">
                <i class="bi bi-plus"></i>
            </button>
            @endif
            <button type="button"
                    onclick="toggleEditRow({{ $pos->id }})"
                    class="btn btn-sm btn-outline-secondary rounded-pill px-1 py-0 ms-1"
                    title="Bearbeiten" style="font-size:11px; line-height:1.6;">
                <i class="bi bi-pencil"></i>
            </button>
            <form method="POST"
                  action="{{ route('pms.offers.position.destroy', [$pos->fk_offer_id, $pos->id]) }}"
                  onsubmit="return confirm('Position löschen?')" class="d-inline ms-1">
                @csrf
                <button class="btn btn-sm btn-outline-danger rounded-pill px-1 py-0"
                        title="Löschen" style="font-size:11px; line-height:1.6;">
                    <i class="bi bi-trash"></i>
                </button>
            </form>
        </div>
    </div>
</div>

{{-- Bearbeitungszeile --}}
<div id="edit-row-{{ $pos->id }}" style="display:none; border-bottom:1px solid #ffe8a0; background:#fffbf0;">
    <div class="d-flex align-items-start gap-2 px-3 py-2" style="padding-left:{{ $indentPx }}px !important;">
        <div class="flex-shrink-0 pt-2" style="min-width:42px; font-size:13px;">
            <span class="text-muted">{{ $pos->pos_number }}</span>
        </div>
        <div class="flex-grow-1">
            <form id="edit-form-{{ $pos->id }}" method="POST"
                  action="{{ route('pms.offers.position.update', [$pos->fk_offer_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="3"
                          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">
                <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>
                <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" style="white-space:nowrap;">
            <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 ms-1" title="Abbrechen">
                <i class="bi bi-x-lg"></i>
            </button>
        </div>
    </div>
</div>

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