@props([
    'name',
    'multiple' => true,
    'accept' => 'accept',
    'file', // pass collection
    'deleteInputName' => 'deleted_files',
])

@php
    $uploaderId = 'uploader_' . uniqid();
@endphp

<div class="file-uploader" id="{{ $uploaderId }}" data-accept="{{$accept}}">

    <!-- DROP AREA -->
    <div
        class="upload-drop-area border-dashed border-2 border-gray-200 rounded-[11px] h-[140px] 
        flex items-center justify-center cursor-pointer bg-white transition">

        <div class="text-center">
            <img src="{{ asset('tutor/images/file-uploader.png') }}" class="mx-auto mb-2" />
            <p class="text-sm text-[#181D27] Poppins">
                Click to <span class="text-blue-500">browse</span> or drag & drop
            </p>
        </div>

        <input type="file" name="{{ $name }}{{ $multiple ? '[]' : '' }}" class="hidden file-input"
            {{ $multiple ? 'multiple' : '' }} accept="{{ $accept }}">
    </div>

    <!-- PREVIEW -->
    <div class="preview-container mt-4 space-y-3">

            @if(isset($file))
            <div class="file-item bg-[#F4F4F4] p-3 rounded-md flex justify-between items-center" data-existing="true"
                data-id="">

                <div class="flex items-center gap-3 cursor-pointer" onclick="window.open('{{asset($file)}}')">
                    
                    <img src="{{ asset($file) }}"
                        style="width:40px;height:40px;object-fit:cover;border-radius:6px;">

                  
                    
                </div>

                <button type="button" class="remove-file text-red-500">✕</button>

                
            </div>

            @endif
        
    </div>

</div>
