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

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

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

    <!-- 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">

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

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

                    <div class="flex justify-between">
                        <p class="text-sm font-semibold">
                            {{ $file->file_original_name }}
                        </p>

                        
                    </div>
                    
                </div>

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

                <input type="hidden" name="existing_ids[]" value="{{ $file->id }}" class="delete-input">
            </div>
        @endforeach

    </div>

</div> --}}


@props([
    'name',
    'multiple' => true,
    'accept' => '*/*',
    'existingFiles' => [],
    '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 ?? '.pdf' }}">
    </div>

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

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

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

                    <div class="flex justify-between">
                        <p class="text-sm font-semibold">
                            {{ $file->file_original_name }}
                        </p>

                        
                    </div>
                    
                </div>

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

                <input type="hidden" name="existing_ids[]" value="{{ $file->id }}" class="delete-input">
            </div>
        @endforeach

    </div>

</div>