<div>
    <div class="mb-4">
        <h2 class="text-lg font-bold text-gray-800">
            @if ($hasSearched)
                FG STOCK DATA TABLE
            @elseif ($isSfg)
                SFG STOCK DATA TABLE
            @elseif ($isnonQuanSfg)
                SFG STOCK DATA TABLE
            @else
                STOCK DATA TABLE
            @endif
        </h2>

    </div>

    <div class="mt-2">
        <hr class="border-t-2 border-gray-300">
    </div>


    @if ($hasSearched)
    <div class="overflow-x-auto" style="height: 385px;">
        <table class="min-w-full text-sm text-center border border-gray-300">
            <table class="table-fixed min-w-[1500px] text-sm text-center border border-gray-300">
                <thead class="bg-gray-100 font-bold">
                <tr>
                    <th class="border px-4 py-2">No</th>
                    <th class="border px-4 py-2">Material Code</th>
                    <th class="border px-4 py-2">Serial Number</th>
                    <th class="border px-4 py-2">Motor Scanned Status</th>
                    <th class="border px-4 py-2">Pump Scanned Status</th>
                    <th class="border px-4 py-2">Scanned Status Set</th>
                    <th class="border px-4 py-2">Scanned Status</th>
                    <th class="border px-4 py-2 w-[300px] whitespace-nowrap">Time Stamp</th>
                    <th class="border px-4 py-2">Operator ID</th>
                </tr>
            </thead>

            <tbody>
                @forelse ($records as $index => $record)
                    <tr wire:key="inv-{{ $record->id }}" class="border-t">
                        <td class="border px-2 py-2">{{ $records->firstItem() + $index }}</td>
                        <td class="border px-2 py-2">{{ $record->stickerMasterRelation?->item?->code ?? 'N/A' }}</td>
                        <td class="border px-2 py-2">{{ $record->serial_number ?? 'N/A' }}</td>
                        <td class="border px-2 py-2">{{ $record->motor_scanned_status ? '1' : '' }}</td>
                        <td class="border px-2 py-2">{{ $record->pump_scanned_status ? '1' : '' }}</td>
                        <td class="border px-2 py-2">{{ $record->scanned_status_set ? '1' : '' }}</td>
                        <td class="border px-2 py-2">{{ $record->scanned_status ?? '' }}</td>
                        <td class="border px-2 py-2 whitespace-nowrap">{{ optional($record->created_at)->format('d-m-Y H:i:s') }}</td>
                        <td class="border px-2 py-2">{{ $record->updated_by ?? '' }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="12" class="py-4 text-gray-500">
                            No scanned data found for location <strong>{{ $location }}</strong>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
        {{-- <div class="mt-3 flex justify-center">
            {{ $records->onEachSide(3)->links() }}
        </div> --}}
    </div>
    @endif

    @if($isSfg)

        <div class="w-full overflow-x-auto" style="height:385px">

            <table class="w-full text-sm text-center border border-gray-300">

                    <thead class="bg-gray-100 font-bold">
                    <tr>
                        <th class="border px-4 py-2">No</th>
                        <th class="border px-4 py-2">Location</th>
                        <th class="border px-4 py-2">Bin</th>
                        <th class="border px-4 py-2">Item Code</th>
                        <th class="border px-4 py-2">Serial Number</th>
                        <th class="border px-4 py-2">Batch</th>
                        <th class="border px-4 py-2">Document Number</th>
                        <th class="border px-4 py-2">Total Quantity</th>
                        <th class="border px-4 py-2">Scanned Quantity</th>
                        <th class="border px-4 py-2">Operator ID</th>
                    </tr>
                    </thead>

                <tbody>

                    @forelse($scannedSfgData as $index => $row)

                        <tr>
                            <td class="border px-3 py-2">{{ $index+1 }}</td>
                            <td class="border px-3 py-2">{{ $row['location'] }}</td>
                            <td class="border px-3 py-2">{{ $row['bin'] }}</td>
                            <td class="border px-3 py-2">{{ $row['item_code'] }}</td>
                            <td class="border px-3 py-2">{{ $row['serial_number'] }}</td>
                            <td class="border px-3 py-2">{{ $row['batch'] }}</td>
                            <td class="border px-3 py-2">{{ $row['doc_no'] }}</td>
                            <td class="border px-3 py-2">{{ $row['quantity'] }}</td>
                            <td class="border px-3 py-2">{{ $row['scanned_quantity'] }}</td>
                            <td class="border px-3 py-2">{{ $row['updated_by'] }}</td>
                        </tr>

                        @empty
                        <tr>
                            <td colspan="10" class="py-4 text-gray-500">
                                No scanned SFG data
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    @endif

    @if($isnonQuanSfg)

        <div class="w-full overflow-x-auto" style="height:385px">

            <table class="w-full text-sm text-center border border-gray-300">

                    <thead class="bg-gray-100 font-bold">
                    <tr>
                        <th class="border px-4 py-2">No</th>
                        <th class="border px-4 py-2">Location</th>
                        <th class="border px-4 py-2">Bin</th>
                        <th class="border px-4 py-2">Item Code</th>
                        <th class="border px-4 py-2">Serial Number</th>
                        <th class="border px-4 py-2">Batch</th>
                        <th class="border px-4 py-2">Document Number</th>
                        <th class="border px-4 py-2">Total Quantity</th>
                        <th class="border px-4 py-2">Scanned Quantity</th>
                        <th class="border px-4 py-2">Operator ID</th>
                    </tr>
                    </thead>

                <tbody>

                    @forelse($scannedSerials as $index => $row)

                        <tr>
                            <td class="border px-3 py-2">{{ $index+1 }}</td>
                            <td class="border px-3 py-2">{{ $row['location'] }}</td>
                            <td class="border px-3 py-2">{{ $row['bin'] }}</td>
                            <td class="border px-3 py-2">{{ $row['item_code'] }}</td>
                            <td class="border px-3 py-2">{{ $row['serial_number'] }}</td>
                            <td class="border px-3 py-2">{{ $row['batch'] }}</td>
                            <td class="border px-3 py-2">{{ $row['doc_no'] }}</td>
                            <td class="border px-3 py-2">{{ $row['quantity'] }}</td>
                            <td class="border px-3 py-2">{{ $row['scanned_quantity'] }}</td>
                            <td class="border px-3 py-2">{{ $row['updated_by'] }}</td>
                        </tr>

                        @empty
                        <tr>
                            <td colspan="10" class="py-4 text-gray-500">
                                No scanned SFG data
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    @endif

    {{-- Modal for Capacitor Input --}}
    <div>
        <button wire:click="$set('showCapacitorInput', true)"></button>
        @if($showCapacitorInput)
            <div class="fixed inset-0 z-[9999] bg-black bg-opacity-50 flex items-center justify-center">
                <div style="background:white; border:4px solid orange;" class="p-6 rounded-xl shadow-2xl w-[450px]">
                    <h3 class="text-xl font-semibold text-orange-700 mb-4">
                        Scan the Panel Box Supplier/Item Code/Serial Number
                    </h3>

                    <input
                        type="text"
                        id="capacitorInput"
                        autocomplete="off"
                        wire:model.defer="capacitorInput"
                        wire:keydown.enter.prevent="processCapacitorInput"
                        class="w-full border border-orange-300 rounded px-3 py-2 focus:outline-none focus:ring-0 focus:border-orange-300"
                        placeholder="Scan the panel box QR code"
                        {{-- autofocus --}}
                        onload="this.focus(); this.select();"
                        {{-- onfocus="this.select();" --}}
                    />

                    <div class="flex justify-end gap-2 mt-4">
                        <button type="button" wire:click="cancelCapacitorInput"
                        class="mt-6 ml-10 bg-gray-300 hover:bg-gray-400 px-4 py-2 rounded transition">
                            Cancel
                        </button>
                    </div>
                </div>
            </div>
            {{-- Add this script to focus on the input --}}
            <script>
                document.getElementById('capacitorInput').focus();
            </script>
            {{-- <script>
                document.addEventListener('livewire:initialized', () => {
                    @this.on('focus-capacitor-input', () => {
                        setTimeout(() => {
                            const el = document.getElementById('capacitorInput');
                            if (el) el.focus();
                        }, 100);
                    });
                });
            </script> --}}
        @endif
    </div>

    {{-- Modal for material invoice--}}
    @if($materialInvoice)
        {{-- <div class="flex justify-center overflow-x-auto overflow-y-visible" style="height: 385px;"> --}}
        <div class="overflow-x-auto overflow-y-visible" style="height: 385px;">
            {{-- <table class="min-w-full text-sm text-center border border-gray-300"> --}}
            <table class="min-w-full mx-auto text-sm text-center border border-gray-300">
                <thead class="bg-gray-100 font-bold">
                    <tr>
                        <th class="border px-4 py-2">No</th>
                        <th class="border px-4 py-2">Material Code</th>
                        <th class="border px-4 py-2">Material Type</th>
                        <th class="border px-4 py-2">Material Quantity</th>
                        <th class="border px-4 py-2">Serial Number</th>
                        <th class="border px-4 py-2">Batch Number</th>
                        <th class="border px-4 py-2">TimeStamp</th>
                        <th class="border px-4 py-2">Operator ID</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($invoiceData as $index => $row)
                        <tr class="border-t">
                            <td class="border px-4 py-2">{{ $index + 1 }}</td>
                            <td class="border px-4 py-2">{{ $row['code'] ?? 'N/A' }}</td>
                            <td class="border px-4 py-2">{{ $row['material_type'] ?? 'N/A' }}</td>
                            <td class="border px-4 py-2">
                                @if(($row['material_type'] ?? '') === 'Individual' || ($row['material_type'] ?? '') === 'Bundle')
                                    {{ number_format((float)($row['quantity'] ?? 0), 0) }}
                                @else
                                    {{ $row['quantity'] ?? 'N/A' }}
                                @endif
                            </td>
                            <td class="border px-4 py-2">{{ $row['serial_number'] ?? 'N/A' }}</td>
                            <td class="border px-4 py-2">{{ $row['batch_number'] ?? 'N/A' }}</td>
                            <td class="border px-4 py-2">{{ $row['created_at'] ?? 'N/A' }}</td>
                            <td class="border px-4 py-2">{{ $row['operator_id'] ?? 'N/A' }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="10" class="text-center py-4 text-gray-500">
                                No data found for invoice number <strong>{{ $invoiceNumber }}</strong>.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    @endif
</div>
{{-- <script>
    // Clear input and set focus on form load
    document.addEventListener('DOMContentLoaded', function () {
        const input = document.getElementById('capacitorInput');
        input.value = ''; // Clear the input field
        input.focus(); // Set focus to the input field
    });
</script> --}}
<script>
    window.addEventListener('focus-capacitor-input', () => {
        setTimeout(() => {
            const input = document.getElementById('capacitorInput');
            if (input) {
                input.focus();
                input.select();
            }
        }, 50);
    });

    window.addEventListener('focus-serial-number', () => {
        setTimeout(() => {
            const container = document.getElementById('serial_number_input');
            const input = container?.querySelector('input'); // gets the actual input inside

            if (input) {
                input.focus();
                input.select();
            }
        }, 50);
    });

    window.addEventListener('focus-invoice-number', () => {
        setTimeout(() => {
            const container = document.getElementById('invoice_number_input');
            const input = container?.querySelector('input'); // gets the actual input inside

            if (input) {
                input.focus();
                input.select();
            }
        }, 50);
    });
</script>


