@php
    $id = $id ?? uniqid('input-');
    $name = $name ?? 'file';
    $label = $label ?? '';
    $file_type = $file_type ?? 'any';
    $accept = $accept ?? (
    $file_type === 'image' ? 'image/*' : (
    $file_type === 'video' ? 'video/*' : (
    $file_type === 'audio' ? 'audio/*' : (
    $file_type === 'document' ? '.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt' : '*/*'))));
    $image_url = $image_url ?? '';
    $delete_url = $delete_url ?? null;
@endphp

<div class="mb-3" id="{{ $id }}-wrapper">
    @if($label)
        <label class="form-label">{{ $label }}</label>
    @endif

    <div id="{{ $id }}-dropzone" class="border rounded p-4 text-center bg-light">
        <div id="{{ $id }}-dropText">فایل را انتخاب کنید یا اینجا رها کنید</div>
    </div>

    <input
        id="{{ $id }}-input"
        type="file"
        name="{{ $name }}"
        accept="{{ $accept }}"
        class="form-control mt-2"
        style="display:none;"
    >

    {{-- Preview Area --}}
    <div class="mt-3" id="{{ $id }}-info" style="display:none;">
        <div class="d-flex align-items-start">
            <img id="{{ $id }}-image-preview" src="" class="img-thumbnail me-1" style="max-width:150px; display:none;" alt="">
            <div id="{{ $id }}-file-icon" class="border rounded p-3 text-center me-1" style="display:none; width:150px; height:100px;">
                <i class="bi bi-file-earmark-text fs-1"></i>
            </div>

            <div class="flex-grow-1">
                <div class="small text-danger mt-1" id="{{ $id }}-warning" style="display:none;"></div>

                @if($delete_url && $image_url)
                    <button id="{{ $id }}-delete-server-btn" type="button" class="btn btn-danger badge badge-number py-2">
                        <i class="bi bi-trash fs-6"></i>
                        <span>حذف</span>
                    </button>
                    <div id="{{ $id }}-delete-loading" class="text-danger small mt-1" style="display:none;">در حال حذف...</div>
                @else
                    <button id="{{ $id }}-reset-btn" type="button" class="btn btn-danger badge badge-number py-2">
                        <i class="bi bi-trash fs-6"></i>
                        <span>حذف</span>
                    </button>
                @endif
            </div>
        </div>
    </div>
</div>

@push('internal_scripts')
    <script>
        (function(){
            const id = '{{ $id }}';
            const dropzone = document.getElementById(id + '-dropzone');
            const dropText = document.getElementById(id + '-dropText');
            const input = document.getElementById(id + '-input');
            const info = document.getElementById(id + '-info');
            const imagePreview = document.getElementById(id + '-image-preview');
            const fileIcon = document.getElementById(id + '-file-icon');
            const warningEl = document.getElementById(id + '-warning');
            const deleteBtn = document.getElementById(id + '-delete-server-btn');
            const deleteLoading = document.getElementById(id + '-delete-loading');
            const resetBtn = document.getElementById(id + '-reset-btn');

            dropzone.addEventListener('click', ()=> input.click());

            dropzone.addEventListener('dragover', e=>{
                e.preventDefault();
                dropzone.classList.add('bg-white');
                dropText.textContent = 'رها کنید...';
            });

            dropzone.addEventListener('dragleave', ()=>{
                dropzone.classList.remove('bg-white');
                dropText.textContent = 'فایل را انتخاب کنید یا اینجا رها کنید';
            });

            dropzone.addEventListener('drop', e=>{
                e.preventDefault();
                dropzone.classList.remove('bg-white');
                dropText.textContent = 'فایل انتخاب شد';
                input.files = e.dataTransfer.files;
                showFile(input.files[0]);
            });

            input.addEventListener('change', ()=> showFile(input.files[0]));

            if(deleteBtn){
                deleteBtn.addEventListener('click', ()=>{
                    if(!confirm('آیا از حذف تصویر فعلی مطمئن هستید؟')) return;

                    deleteBtn.style.display = 'none';
                    deleteLoading.style.display = 'block';

                    fetch('{{ $delete_url }}', {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        }
                    })
                        .then(res => res.json())
                        .then(data => {
                            imagePreview.src = '';
                            imagePreview.style.display = 'none';
                            fileIcon.style.display = 'none';
                            info.style.display = 'none';
                        })
                        .catch(()=> alert('خطا در حذف فایل.'));
                });
            }

            if (resetBtn){
                resetBtn.addEventListener('click', ()=>{
                    input.value = '';
                    info.style.display = 'none';
                    imagePreview.src = '';
                    imagePreview.style.display = 'none';
                    fileIcon.style.display = 'none';
                    warningEl.style.display = 'none';
                    warningEl.textContent = '';
                })
            }

            @if($image_url)
                imagePreview.src = '{{ $image_url }}';
                imagePreview.style.display = 'block';
                info.style.display = 'block';
            @endif

            function showFile(file){
                if(!file){ info.style.display='none'; return; }

                info.style.display = 'block';

                const isImage = file.type && file.type.startsWith('image/');

                if(isImage){
                    const reader = new FileReader();
                    reader.onload = e => {
                        imagePreview.src = e.target.result;
                        imagePreview.style.display = 'block';
                        fileIcon.style.display = 'none';
                        warningEl.style.display = 'none';
                    };
                    reader.readAsDataURL(file);
                } else {
                    imagePreview.style.display = 'none';
                    fileIcon.style.display = 'block';
                    warningEl.textContent = 'این فایل تصویری نیست.';
                    warningEl.style.display = 'block';
                }
            }
        })();
    </script>
@endpush