{{-- <div>
    <div class="mb-4">
        <h2 class="text-lg font-bold text-gray-800">INVOICE DATA TABLE</h2>
        <div class="mt-2">
            <hr class="border-t-2 border-gray-300">
        </div>
    </div>

    <div class="overflow-x-auto overflow-y-visible">
        <table class="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 min-w-[100px]">No</th>
                    <th class="border px-4 py-2 min-w-[200px]">Material Code</th>
                    <th class="border px-4 py-2 min-w-[250px]">Serial Number</th>
                    <th class="border px-4 py-2 min-w-[200px]">Motor Scanned Status</th>
                    <th class="border px-4 py-2 min-w-[200px]">Pump Scanned Status</th>
                    <th class="border px-4 py-2 min-w-[250px]">Capacitor Scanned Status</th>
                    <th class="border px-4 py-2 min-w-[200px]">Scanned Status Set</th>
                    <th class="border px-4 py-2 min-w-[250px]">Panel Box Supplier</th>
                    <th class="border px-4 py-2 min-w-[250px]">Panel Box Serial Number</th>
                    <th class="border px-4 py-2 min-w-[200px]">Scanned Status</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['serial_number'] ?? 'N/A' }}</td>
                        <td class="border px-4 py-2">{{ $row['motor_scanned_status'] ?? 'N/A' }}</td>
                        <td class="border px-4 py-2">{{ $row['pump_scanned_status'] ?? 'N/A' }}</td>
                        <td class="border px-4 py-2">{{ $row['capacitor_scanned_status'] ?? 'N/A' }}</td>
                        <td class="border px-4 py-2">{{ $row['scanned_status_set'] ?? 'N/A' }}</td>
                        <td class="border px-4 py-2">{{ $row['panel_box_supplier'] ?? 'N/A' }}</td>
                        <td class="border px-4 py-2">{{ $row['panel_box_serial_number'] ?? 'N/A' }}</td>
                        <td class="border px-4 py-2">{{ $row['scanned_status'] ?? 'N/A' }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="10" class="text-center py-4 text-gray-500">No data available.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<script>
    window.addEventListener('load-data', event => {
        Livewire.emit('loadData', event.detail.invoiceNumber);
    });
</script> --}}



{{-- this is code for input box inisde the data grid --}}


{{-- <div>
    <div class="mb-4">
        <h2 class="text-lg font-bold text-gray-800">INVOICE DATA TABLE</h2>
        <div class="mt-2">
            <hr class="border-t-2 border-gray-300">
        </div>
    </div>

    <input
        type="text"
        wire:model.defer="invoiceNumber"
        wire:keydown.enter="loadData"
        placeholder="Enter invoice number and press Enter"
        class="border rounded px-3 py-2 mb-4"
    />

    @if($hasSearched)
        <div class="overflow-x-auto overflow-y-visible">
            <table class="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 min-w-[100px]">No</th>
                        <th class="border px-4 py-2 min-w-[200px]">Material Code</th>
                        <th class="border px-4 py-2 min-w-[250px]">Serial Number</th>
                        <th class="border px-4 py-2 min-w-[200px]">Motor Scanned Status</th>
                        <th class="border px-4 py-2 min-w-[200px]">Pump Scanned Status</th>
                        <th class="border px-4 py-2 min-w-[250px]">Capacitor Scanned Status</th>
                        <th class="border px-4 py-2 min-w-[200px]">Scanned Status Set</th>
                        <th class="border px-4 py-2 min-w-[250px]">Panel Box Supplier</th>
                        <th class="border px-4 py-2 min-w-[250px]">Panel Box Serial Number</th>
                        <th class="border px-4 py-2 min-w-[200px]">Scanned Status</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['serial_number'] ?? 'N/A' }}</td>
                            <td class="border px-4 py-2">{{ $row['motor_scanned_status'] ?? 'N/A' }}</td>
                            <td class="border px-4 py-2">{{ $row['pump_scanned_status'] ?? 'N/A' }}</td>
                            <td class="border px-4 py-2">{{ $row['capacitor_scanned_status'] ?? 'N/A' }}</td>
                            <td class="border px-4 py-2">{{ $row['scanned_status_set'] ?? 'N/A' }}</td>
                            <td class="border px-4 py-2">{{ $row['panel_box_supplier'] ?? 'N/A' }}</td>
                            <td class="border px-4 py-2">{{ $row['panel_box_serial_number'] ?? 'N/A' }}</td>
                            <td class="border px-4 py-2">{{ $row['scanned_status'] ?? '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> --}}


<div>
    <div class="mb-4">
        <h2 class="text-lg font-bold text-gray-800">INVOICE DATA TABLE</h2>
        <div class="mt-2">
            <hr class="border-t-2 border-gray-300">
        </div>
    </div>

    @if($hasSearched)

        <div class="overflow-x-auto overflow-y-visible">
            {{-- <table class="min-w-[1500px] text-sm text-center border border-gray-300"> --}}
                {{-- <table class="table-fixed min-w-[1500px] text-sm text-center border border-gray-300"> --}}
            <table class="min-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">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">Capacitor 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>
                        <th class="border px-4 py-2">Panel Box Supplier</th>
                        <th class="border px-4 py-2">Panel Box Serial Number</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['serial_number'] ?? 'N/A' }}</td>
                            <td class="border px-4 py-2">{{ $row['motor_scanned_status'] ?? 'N/A' }}</td>
                            <td class="border px-4 py-2">{{ $row['pump_scanned_status'] ?? 'N/A' }}</td>
                            <td class="border px-4 py-2">{{ $row['capacitor_scanned_status'] ?? 'N/A' }}</td>
                            <td class="border px-4 py-2">{{ $row['scanned_status_set'] ?? 'N/A' }}</td>
                            <td class="border px-4 py-2">{{ $row['scanned_status'] ?? '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>
                            <td class="border px-4 py-2">{{ $row['panel_box_supplier'] ?? 'N/A' }}</td>
                            <td class="border px-4 py-2">{{ $row['panel_box_serial_number'] ?? '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>