@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"
@endphp

<div class="{{ $colClasses }}  mb-3">
    <div class="mb-3">{{ $label }}</div>
    <div class="d-flex align-restaurant_infos-start align-restaurant_infos-sm-center mb-3 gap-4 input_border_error_{{ $name }} rounded box-img"  
     style="width: 100%; height: 300px; overflow: hidden; position: relative;"> 
    
    <img style="width: 100%; height: 100%; object-fit: cover;" 
         src="{{ $old_image_url }}" alt="user-avatar" 
         class="img-fluid my-3 rounded shadow-img img-btn-click border border-dark"
         data-btn_click_id="{{ $input_id }}" id="{{ $image_id }}" />
    
    <label for="{{ $input_id }}" 
           class="btn btn-primary me-2"  
           tabindex="0"
           style="position: absolute; bottom: 2px; left: 67px; transform: translateX(-50%); z-index: 10;">
        <span class="d-none d-sm-block">{{ __('messages.Choose the image') }}  <i class="ti ti-upload"></i></span>
        <i class="ti ti-upload d-block d-sm-none"></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">{{ $message }}</small>
    @enderror

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