@php
    $suffix = $suffix ?? 1;
    $image_id = "image_{$suffix}";
    $input_id = "upload_image_{$suffix}";
    $old_image_url = $oldImage ? asset($oldImage) : asset('default-images/default.png');
    $colClasses = $colClasses ?? "col-md-4";
    $size = $size ?? '150px'; // حجم الصورة الدائري، افتراضي 150px
@endphp

<div class="{{ $colClasses }} mb-3">
    @isset($label)
        <div class="mb-2">{{ $label }}</div>
    @endisset

    <div class="position-relative d-flex  mb-3"
         style="width: {{ $size }}; height: {{ $size }}; margin: auto;">
         
        <img src="{{ $old_image_url }}" alt="uploaded-image"
             class="rounded-circle shadow border border-dark img-btn-click"
             style="width: 100%; height: 100%; object-fit: cover; cursor: pointer;"
             id="{{ $image_id }}" data-btn_click_id="{{ $input_id }}" />

        <label for="{{ $input_id }}"
               class="btn btn-sm btn-primary position-absolute"
               style="bottom: -12px; left: 50%; transform: translateX(-50%); z-index: 10;">
            <i class="ti ti-upload me-1"></i> 
            <input type="file"
                   id="{{ $input_id }}"
                   name="{{ $name }}"
                   data-image_id="{{ $image_id }}"
                   class="account-file-input input_show_image @error($name) is-invalid @enderror"
                   hidden
                   accept="image/png, image/jpeg, image/jpg" />
        </label>
    </div>

    @error($name)
        <small class="text-danger d-block">{{ $message }}</small>
    @enderror

    <div class="messages_errors_custom msg_input_{{ $name }} text-danger"></div>
</div>