@props(['accept' => '.xlsx,.xls,.csv', 'maxFiles' => 1])

<div x-data="{
    files: [],
    accept: '{{ $accept }}',
    maxFiles: {{ $maxFiles }},
    isDragging: false,
    isLoading: false,
    handleDrop(e) {
        e.preventDefault();
        this.isDragging = false;
        this.handleFiles(e.dataTransfer.files);
    },
    handleDragOver(e) {
        e.preventDefault();
        this.isDragging = true;
    },
    handleDragLeave() {
        this.isDragging = false;
    },
    formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    },
    handleFiles(files) {
        if (files.length > this.maxFiles) {
            alert(`You can only upload ${this.maxFiles} file(s) at a time.`);
            return;
        }

        Array.from(files).forEach(file => {
            if (!this.accept.split(',').some(ext => file.name.endsWith(ext.trim()))) {
                alert(`File type not allowed. Allowed types: ${this.accept}`);
                return;
            }

            if (this.files.length < this.maxFiles) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    this.files.push({
                        name: file.name,
                        size: file.size,
                        type: file.type,
                        preview: file.type.startsWith('image/') ? e.target.result : null,
                        file: file
                    });

                    // Refresh icons setelah menambahkan file
                    if (window.createLucideIcons) {
                        window.createLucideIcons();
                    }
                };
                reader.readAsDataURL(file);
            }
        });
    },
    removeFile(index) {
        this.files.splice(index, 1);
        // Refresh icons setelah menghapus file
        if (window.createLucideIcons) {
            window.createLucideIcons();
        }
    },
    submit() {
        if (this.files.length === 0) {
            toastr.error('Please select a file first');
            return;
        }

        this.isLoading = true; // START LOADING

        const formData = new FormData();
        this.files.forEach(file => {
            formData.append('file', file.file);
        });

        fetch('{{ route('products.import') }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    toastr.success(data.message || 'File imported successfully!');
                    window.location.reload();
                } else {
                    toastr.error(data.message || 'Error importing file');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                toastr.error('An error occurred while uploading the file');
            })
            .finally(() => {
                this.isLoading = false; // STOP LOADING
            });
    }

}" @drop="handleDrop($event)" @dragover="handleDragOver($event)" @dragleave="handleDragLeave()"
    class="w-full" x-init="if (window.createLucideIcons) { window.createLucideIcons(); }">
    <!-- Upload Area -->
    <div class="card card-border w-full bg-white h-auto border-dashed"
        :class="{ 'border-blue-500 bg-blue-50': isDragging }">
        <div class="card-body">
            <div class="flex flex-col items-center justify-center space-y-3">
                <i data-lucide="cloud-upload" class="w-12 h-12 text-gray-600"></i>
                <div class="card-description">
                    Drag & Drop Excel Files Here
                </div>
                <div class="card-description">
                    OR
                </div>
                <input type="file" @change="handleFiles($event.target.files)" :accept="accept" class="hidden"
                    id="fileInput" :multiple="maxFiles > 1">
                <button type="button" @click="document.getElementById('fileInput').click()" class="btn btn-sm">
                    Browse Files
                </button>
            </div>
        </div>
    </div>

    <!-- File Preview -->
    <template x-if="files.length > 0">
        <div class="card card-body mt-3 bg-white">
            <div class="overflow-x-auto">
                <table class="table table-sm">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Size</th>
                            <th class="w-10">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-for="(file, index) in files" :key="index">
                            <tr>
                                <td x-text="file.name"></td>
                                <td x-text="formatFileSize(file.size)"></td>
                                <td>
                                    <button @click="removeFile(index)" class="btn btn-xs ">
                                        remove
                                    </button>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
            <div class="mt-3">
                <button
                    @click="submit()"
                    class="w-full btn btn-info text-white"
                    :disabled="isLoading"
                >
                    <i data-lucide="check" class="w-4 h-4"></i> Submit
                </button>

                <div class="mt-2 text-center" x-show="isLoading" x-transition>
                    <i class="animate-spin text-info" data-lucide="loader-circle"></i>
                    <div class="text-sm text-info mt-1">Uploading, please wait...</div>
                </div>
            </div>
        </div>
    </template>
</div>

<script>
    function formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i];
        }
</script>