{{--
    Saat/Gün birimli süre alanı — hangi birim seçilirse seçilsin değer daima SAAT olarak kaydedilir (update-field).
    24'e tam bölünen mevcut değerler otomatik "gün" olarak gösterilir.
    Beklenen: $field, $label, $hours (mevcut saat değeri), $uf
--}}
@php
    $hours = ($hours ?? null) !== null && $hours !== '' ? (int) $hours : null;
    $isDays = $hours !== null && $hours > 0 && $hours % 24 === 0;
    $shown = $hours === null ? '' : ($isDays ? (int) ($hours / 24) : $hours);
@endphp
<div class="pqv-item">
    <span class="pqv-label">{{ $label }}</span>
    <span class="qvdh" data-qv-deadline data-field="{{ $field }}" data-qv-url="{{ $uf }}">
        <input type="number" min="0" class="qvdh-val" value="{{ $shown }}" placeholder="—">
        <select class="qvdh-unit">
            <option value="hours" @selected(!$isDays)>Saat</option>
            <option value="days" @selected($isDays)>Gün</option>
        </select>
        <small class="qvdh-echo">{{ $isDays && $hours ? $hours . ' saat' : '' }}</small>
    </span>
</div>

@once
<style>
    .qvdh { display:inline-flex; align-items:center; gap:6px; }
    .qvdh .qvdh-val { width:74px; border:1.5px solid #e2e8f0; border-radius:9px; padding:5px 9px; font-size:.84rem; font-weight:600; color:#0f172a; outline:none; transition:.15s; }
    .qvdh .qvdh-val:focus { border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.1); }
    .qvdh .qvdh-unit { border:1.5px solid #e2e8f0; border-radius:9px; padding:5px 7px; font-size:.8rem; font-weight:700; color:#334155; background:#f8fafc; outline:none; cursor:pointer; transition:.15s; }
    .qvdh .qvdh-unit:focus { border-color:#2563eb; }
    .qvdh .qvdh-echo { font-size:.68rem; color:#94a3b8; white-space:nowrap; }
</style>
@endonce