@props([
    'name'     => 'photo',
    'label'    => 'Foto',
    'current'  => null,   // URL foto yang sudah ada
    'accept'   => 'image/png,image/jpeg,image/gif',
    'maxMb'    => 2,
    'required' => false,
])

<div x-data="{
    previewUrl: '{{ $current ?? '' }}',
    fileError: '',
    maxMb: {{ $maxMb }},
    handleFile(event) {
        const file = event.target.files[0];
        if (!file) return;
        if (file.size > this.maxMb * 1024 * 1024) {
            this.fileError = 'Ukuran file maksimal ' + this.maxMb + 'MB';
            event.target.value = '';
            return;
        }
        this.fileError = '';
        this.previewUrl = URL.createObjectURL(file);
    }
}">
    <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ $label }}</label>

    {{-- Preview gambar --}}
    <div class="flex items-center gap-4 mb-3">
        <div class="w-20 h-20 rounded-full overflow-hidden bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 flex items-center justify-center flex-shrink-0">
            <template x-if="previewUrl">
                <img :src="previewUrl" class="w-full h-full object-cover" alt="Preview foto">
            </template>
            <template x-if="!previewUrl">
                <svg class="w-10 h-10 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/>
                </svg>
            </template>
        </div>
        <div class="flex-1">
            <label for="{{ $name }}-upload" class="cursor-pointer">
                <span class="inline-flex items-center px-3 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600">
                    <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"/>
                    </svg>
                    Pilih Foto
                </span>
            </label>
            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">PNG, JPG, GIF. Maks {{ $maxMb }}MB</p>
        </div>
    </div>

    <input type="file"
           id="{{ $name }}-upload"
           name="{{ $name }}"
           accept="{{ $accept }}"
           class="hidden"
           @change="handleFile($event)"
           {{ $required ? 'required' : '' }}>

    {{-- Error --}}
    <p x-show="fileError" x-cloak x-text="fileError" class="mt-1 text-sm text-red-600 dark:text-red-400"></p>

    {{-- Hapus preview --}}
    <template x-if="previewUrl">
        <button type="button" @click="previewUrl = ''; document.getElementById('{{ $name }}-upload').value = ''"
            class="mt-2 text-xs text-red-600 hover:underline dark:text-red-400">
            Hapus foto
        </button>
    </template>
</div>