<div x-data="{ progress: @entangle('progress'), exporting: @entangle('exporting') }" x-init="setInterval(() => { $wire.checkProgress() }, 2000)">
    <button @click="exporting = true" wire:click="exportReport" :disabled="exporting">
        Export Report
    </button>

    <!-- Progress Bar -->
    <div x-show="exporting" class="progress-bar" style="position: relative; width: 100%; background-color: #e0e0e0;">
        <div class="progress" :style="{ width: progress + '%' }" style="background-color: #4caf50; height: 20px;"></div>
    </div>

    <!-- แสดง progress เป็นเปอร์เซ็นต์ -->
    <div x-show="exporting">
        <span x-text="progress + '%'"></span>
    </div>

    <!-- แสดงสถานะของ batch -->
    <div x-text="'Status: ' + @entangle('status')"></div>
</div>