@props(['name' => 'images[]' , 'accept' => ''])
<label class="upload-box drop-area">
    <input type="file"
        class="file-input question-options"
        id="file-input"
        name="{{ $name }}"
        data-question-id=""
        multiple accept="{{ $accept }}" hidden>
    <div class="w-100 d-flex gap-3">
        <div>
            <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" fill="none">
                <path d="M6.88001 50.6931L6.82667 50.7464C6.10667 49.1731 5.65334 47.3864 5.46667 45.4131C5.65334 47.3598 6.16001 49.1198 6.88001 50.6931Z" fill="#B0B0B0" />
                <path d="M24 27.6797C27.5052 27.6797 30.3467 24.8382 30.3467 21.333C30.3467 17.8278 27.5052 14.9863 24 14.9863C20.4948 14.9863 17.6533 17.8278 17.6533 21.333C17.6533 24.8382 20.4948 27.6797 24 27.6797Z" fill="#B0B0B0" />
                <path d="M43.1734 5.33301H20.8267C11.12 5.33301 5.33337 11.1197 5.33337 20.8263V43.173C5.33337 46.0797 5.84004 48.613 6.82671 50.7463C9.12004 55.813 14.0267 58.6663 20.8267 58.6663H43.1734C52.88 58.6663 58.6667 52.8797 58.6667 43.173V37.0663V20.8263C58.6667 11.1197 52.88 5.33301 43.1734 5.33301ZM54.32 33.333C52.24 31.5463 48.88 31.5463 46.8 33.333L35.7067 42.853C33.6267 44.6397 30.2667 44.6397 28.1867 42.853L27.28 42.1063C25.3867 40.453 22.3734 40.293 20.24 41.733L10.2667 48.4263C9.68004 46.933 9.33337 45.1997 9.33337 43.173V20.8263C9.33337 13.3063 13.3067 9.33301 20.8267 9.33301H43.1734C50.6934 9.33301 54.6667 13.3063 54.6667 20.8263V33.6263L54.32 33.333Z" fill="#B0B0B0" />
            </svg>
        </div>
        <div class=" d-flex flex-column items-content-start justify-content-center gap-2  text-start">
            <p>{{ __('select image') }}</p>
            <!-- <p>تصاویر مربوطه را از گالری یا دوربین انتخاب کنید</p> -->

            <p>
                <span class="d-flex border p-1 justify-content-center items-content-center gap-2 rounded-2 " style="color: #B0B0B0;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
                        <path d="M12.1138 17.25C11.702 17.25 11.3605 16.91 11.3605 16.5V11.5C11.3605 11.09 11.702 10.75 12.1138 10.75C12.5256 10.75 12.8672 11.09 12.8672 11.5V16.5C12.8672 16.91 12.5256 17.25 12.1138 17.25Z" fill="#B0B0B0" />
                        <path d="M14.5647 14.75H9.54241C9.13058 14.75 8.78906 14.41 8.78906 14C8.78906 13.59 9.13058 13.25 9.54241 13.25H14.5647C14.9765 13.25 15.318 13.59 15.318 14C15.318 14.41 14.9765 14.75 14.5647 14.75Z" fill="#B0B0B0" />
                        <path d="M17.0758 22.75H7.03125C2.60159 22.75 1.25562 21.41 1.25562 17V7C1.25562 2.59 2.60159 1.25 7.03125 1.25H8.53793C10.2957 1.25 10.8482 1.82 11.5513 2.75L13.058 4.75C13.3895 5.19 13.4397 5.25 14.0625 5.25H17.0758C21.5055 5.25 22.8515 6.59 22.8515 11V17C22.8515 21.41 21.5055 22.75 17.0758 22.75ZM7.03125 2.75C3.44533 2.75 2.7623 3.43 2.7623 7V17C2.7623 20.57 3.44533 21.25 7.03125 21.25H17.0758C20.6617 21.25 21.3448 20.57 21.3448 17V11C21.3448 7.43 20.6617 6.75 17.0758 6.75H14.0625C12.7767 6.75 12.3549 6.31 11.8526 5.65L10.346 3.65C9.82364 2.96 9.67297 2.75 8.53793 2.75H7.03125Z" fill="#B0B0B0" />
                    </svg>
                    {{ __('chose a file') }}
                </span>
            </p>
        </div>
        <div class="d-flex justify-content-center items-content-center ">
        </div>
    </div>
</label>
<div class="preview"></div>