{{-- resources/views/components/mandate/inline-underline.blade.php --}}
@props([
    'mode' => 'show',                 // edit|show --> default to show
    'model' => null,                  // e.g. data.business.current_holder
    'value' => null,                  // display value
    'height' => 18,

    // sizing
    'width' => null,                  // px (preferred)
    'chars' => null,                  // optional: approximate width by character count
])

@php
    $isShowMode = $mode === 'show' || $mode === 'review';

    // Set to null if no value provided
    $display = filled($value) ? $value : null;

    // Width handling
    $resolvedWidth = $width;
    if ($resolvedWidth === null && $chars !== null) {
        // rough estimate: 8px per char (tweak if needed)
        $resolvedWidth = (int) $chars * 8;
    }

    $spanStyleExtra = $resolvedWidth !== null ? "width:{$resolvedWidth}px; display:inline-block; " : "display:inline-block; "; 

    $inputStyle = "width:100%; height:{$height}px; line-height:{$height}px; outline:0; background:transparent; padding:0; margin:0; box-sizing:border-box; font:inherit; letter-spacing:inherit; }}"; 

    $inputStyle .= $errors->has($model) 
        ?  "border:0; border-bottom:1px solid #EE4B2B; color: #EE4B2B; "
        :  "border:0; border-bottom:1px solid #000; color: #000;";

@endphp

<span wire:key="{{ $model }}" {{ $attributes->merge(['style' => trim(($attributes->get('style') ?? '').' '.$spanStyleExtra)]) }}><input type="text"
    @if($model && ! $isShowMode) wire:model.live.blur="{{ $model }}" @endif
    @if($isShowMode)
        value="{{ $display }}"
        readonly tabindex="-1"
    @endif
    style="{{ $inputStyle }}"
/></span>