<x-filament::page>
    <form wire:submit.prevent="create" class="space-y-6">
        {{-- Form Section --}}
        <div class="filament-form space-y-6">
            {{ $this->form }}
        </div>

        {{-- <livewire:notification-sound /> --}}

        {{-- Livewire Component (Invoice Table) --}}
        <div class="bg-white shadow rounded-xl p-4">
            <livewire:sticker-validation :ref-data="$ref_number" />
        </div>

        {{-- Actions --}}
        <div class="filament-actions mt-6">
            <x-filament::actions>
                @foreach ($this->getFormActions() as $action)
                    {{ $action }}
                @endforeach
            </x-filament::actions>
        </div>
    </form>
</x-filament::page>

{{-- <script>
document.addEventListener('livewire:init', () => {
    Livewire.on('open-multiple-stickers', ({ urls }) => {
        let delay = 0;
        urls.forEach(url => {
            setTimeout(() => {
                window.open(url, '_blank');
            }, delay);
            delay += 600;
        });
    });
});
</script> --}}

{{-- <script>
document.addEventListener('DOMContentLoaded', () => {
    window.addEventListener('open-stickers-sequence', (event) => {
        console.log('EVENT RECEIVED');

        event.detail.urls.forEach(url => {
            window.open(url, '_blank');
        });
    });
});
</script> --}}

<script>
window.addEventListener('open-stickers-sequence', async (event) => {
    const urls = event.detail.urls;

    for (const url of urls) {
        const win = window.open(url, '_blank');

        win.onload = () => {
            win.focus();
            win.print();
        };

        // wait before next
        await new Promise(r => setTimeout(r, 1500));
    }
});
</script>

