<x-filament-panels::page>
    <div class="space-y-4">
        {{-- Render the Select form fields --}}
        <div class="space-y-4">
            {{ $this->form }}
        </div>
        <div class="flex-row gap-2 mt-4">
            <button
                type="button"
                wire:click="generatePallet"
                class="px-3 py-1 border border-primary-500 text-primary-600 rounded hover:bg-primary-50 hover:border-primary-700 transition text-sm"
            >
            Generate Pallet
            </button>
        </div>

        <div class="bg-white shadow rounded-xl p-4 mt-6">
            <livewire:pallet-from-locator-data-table />
        </div>

        {{-- <div>
            <p>Locator No: {{ $locatorNo }}</p>
        </div> --}}

        <x-filament::modal id="confirm-process-modal">
            <x-slot name="heading">
                ADD: CONFIRMATION
            </x-slot>
            <p>Scanned locator number has locator serial numbers!<br>Do you want to store it into 'Pallet Data' table?</p>
            <x-slot name="footer">
                <x-filament::button wire:click="addToPalletValidation" x-on:click="isOpen = false" color="success">
                    Yes
                </x-filament::button>
                <x-filament::button wire:click="skipAddToPalletValidation" x-on:click="isOpen = false" color="danger">
                    No
                </x-filament::button>
            </x-slot>
        </x-filament::modal>
        @push('scripts')
            <script>
                window.addEventListener('open-pdf', event => {
                    const url = event.detail.url;
                    const win = window.open(url, '_blank');
                    if (!win || win.closed || typeof win.closed == 'undefined') {
                        alert('Popup blocked. Please allow popups for this site.');
                    }
                });
            </script>
        @endpush
    </div>
</x-filament-panels::page>
