@php
    $items = $record->items()->with(['product', 'warehouse', 'location'])->get();
    $isEditable = $editable ?? false;
    
    $itemsData = $items->map(function($item) {
        return [
            'id' => $item->id,
            'is_return' => $item->is_return,
            'product_id_raw' => $item->product_id_raw,
            'description' => $item->description,
            'brand' => $item->brand,
            'warehouse_name' => $item->warehouse->name ?? 'Go-Parts GA',
            'location_name' => $item->location->location ?? 'Default',
            'quantity' => $item->quantity,
            'unit' => $item->unit,
            'unit_price' => floatval($item->unit_price),
            'total_price' => floatval($item->total_price),
            'type' => $item->is_return ? 'return' : 'purchase',
        ];
    })->toArray();
@endphp

<div 
    x-data="itemsTable()" 
    x-init="init()"
    class="space-y-4">
    {{-- Search and Filters --}}
    <div class="flex flex-col sm:flex-row gap-4">
        <div class="flex-1">
            <div class="relative">
                <input type="text" 
                    x-model="search" 
                    @input.debounce.300ms="filterItems()"
                    placeholder="Search items by ID, description, brand..." 
                    class="fi-input block w-full rounded-lg border-gray-300 px-3 py-2 shadow-sm outline-none transition duration-75 placeholder:text-gray-400 focus:border-primary-500 focus:ring-1 focus:ring-inset focus:ring-primary-500 disabled:opacity-70 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder:text-gray-500 dark:focus:border-primary-500 sm:text-sm">
                <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                </div>
            </div>
        </div>
        
        <div class="flex gap-2">
            <select x-model="sortBy" @change="sortItems()" class="fi-select-input block rounded-lg border-gray-300 px-3 py-2 shadow-sm outline-none transition duration-75 focus:border-primary-500 focus:ring-1 focus:ring-inset focus:ring-primary-500 disabled:opacity-70 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:focus:border-primary-500 sm:text-sm">
                <option value="">Sort by...</option>
                <option value="product_id">Product ID</option>
                <option value="description">Description</option>
                <option value="brand">Brand</option>
                <option value="quantity">Quantity</option>
                <option value="unit_price">Unit Price</option>
                <option value="total">Total</option>
            </select>
            
            <button @click="sortDirection = sortDirection === 'asc' ? 'desc' : 'asc'; sortItems()" 
                    class="fi-btn relative grid-flow-col items-center justify-center font-semibold outline-none transition duration-75 focus-visible:ring-2 rounded-lg fi-color-gray fi-btn-color-gray fi-size-md fi-btn-size-md gap-1.5 px-3 py-2 text-sm inline-grid shadow-sm bg-white text-gray-950 hover:bg-gray-50 dark:bg-white/5 dark:text-white dark:hover:bg-white/10 ring-1 ring-gray-950/10 dark:ring-white/20">
                <svg x-show="sortDirection === 'asc'" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"></path>
                </svg>
                <svg x-show="sortDirection === 'desc'" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4"></path>
                </svg>
            </button>
        </div>
    </div>

    {{-- Results Count --}}
    <div class="text-sm text-gray-600 dark:text-gray-400">
        Showing <span x-text="filteredItems.length"></span> of <span x-text="allItems.length"></span> items
    </div>

    {{-- Table --}}
    <div class="fi-ta-table-wrapper overflow-x-auto">
        <table class="fi-ta-table w-full table-auto divide-y divide-gray-200 text-start dark:divide-white/5">
            <thead class="bg-gray-50 dark:bg-white/5">
                <tr>
                    <th @click="setSortBy('type')" class="fi-ta-header-cell px-3 py-3.5 text-left text-sm font-semibold text-gray-950 dark:text-white cursor-pointer hover:bg-gray-100 dark:hover:bg-white/10">
                        <div class="flex items-center gap-1">
                            Type
                            <svg x-show="sortBy === 'type'" class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                <path x-show="sortDirection === 'asc'" fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path>
                                <path x-show="sortDirection === 'desc'" fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                            </svg>
                        </div>
                    </th>
                    <th @click="setSortBy('product_id')" class="fi-ta-header-cell px-3 py-3.5 text-left text-sm font-semibold text-gray-950 dark:text-white cursor-pointer hover:bg-gray-100 dark:hover:bg-white/10">
                        <div class="flex items-center gap-1">
                            Product ID
                            <svg x-show="sortBy === 'product_id'" class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                <path x-show="sortDirection === 'asc'" fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path>
                                <path x-show="sortDirection === 'desc'" fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                            </svg>
                        </div>
                    </th>
                    <th @click="setSortBy('description')" class="fi-ta-header-cell px-3 py-3.5 text-left text-sm font-semibold text-gray-950 dark:text-white cursor-pointer hover:bg-gray-100 dark:hover:bg-white/10">
                        <div class="flex items-center gap-1">
                            Description
                            <svg x-show="sortBy === 'description'" class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                <path x-show="sortDirection === 'asc'" fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path>
                                <path x-show="sortDirection === 'desc'" fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                            </svg>
                        </div>
                    </th>
                    <th @click="setSortBy('brand')" class="fi-ta-header-cell px-3 py-3.5 text-left text-sm font-semibold text-gray-950 dark:text-white cursor-pointer hover:bg-gray-100 dark:hover:bg-white/10">
                        <div class="flex items-center gap-1">
                            Brand
                            <svg x-show="sortBy === 'brand'" class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                <path x-show="sortDirection === 'asc'" fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path>
                                <path x-show="sortDirection === 'desc'" fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                            </svg>
                        </div>
                    </th>
                    <th class="fi-ta-header-cell px-3 py-3.5 text-left text-sm font-semibold text-gray-950 dark:text-white">Warehouse</th>
                    <th class="fi-ta-header-cell px-3 py-3.5 text-left text-sm font-semibold text-gray-950 dark:text-white">Location</th>
                    <th @click="setSortBy('quantity')" class="fi-ta-header-cell px-3 py-3.5 text-center text-sm font-semibold text-gray-950 dark:text-white cursor-pointer hover:bg-gray-100 dark:hover:bg-white/10">
                        <div class="flex items-center justify-center gap-1">
                            Qty
                            <svg x-show="sortBy === 'quantity'" class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                <path x-show="sortDirection === 'asc'" fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path>
                                <path x-show="sortDirection === 'desc'" fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                            </svg>
                        </div>
                    </th>
                    <th class="fi-ta-header-cell px-3 py-3.5 text-center text-sm font-semibold text-gray-950 dark:text-white">Unit</th>
                    <th @click="setSortBy('unit_price')" class="fi-ta-header-cell px-3 py-3.5 text-right text-sm font-semibold text-gray-950 dark:text-white cursor-pointer hover:bg-gray-100 dark:hover:bg-white/10">
                        <div class="flex items-center justify-end gap-1">
                            Unit Price
                            <svg x-show="sortBy === 'unit_price'" class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                <path x-show="sortDirection === 'asc'" fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path>
                                <path x-show="sortDirection === 'desc'" fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                            </svg>
                        </div>
                    </th>
                    <th @click="setSortBy('total')" class="fi-ta-header-cell px-3 py-3.5 text-right text-sm font-semibold text-gray-950 dark:text-white cursor-pointer hover:bg-gray-100 dark:hover:bg-white/10">
                        <div class="flex items-center justify-end gap-1">
                            Total
                            <svg x-show="sortBy === 'total'" class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                <path x-show="sortDirection === 'asc'" fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path>
                                <path x-show="sortDirection === 'desc'" fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                            </svg>
                        </div>
                    </th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200 whitespace-nowrap dark:divide-white/5">
                <template x-for="item in paginatedItems" :key="item.id">
                    <tr class="fi-ta-row hover:bg-gray-50 dark:hover:bg-white/5">
                        {{-- Type --}}
                        <td class="fi-ta-cell px-3 py-4">
                            <div class="flex items-center gap-1.5">
                                <template x-if="item.is_return">
                                    <div class="fi-badge flex items-center justify-center gap-x-1 rounded-md text-xs font-medium px-2 py-1" style="background-color: rgb(251, 191, 36); color: rgb(255, 255, 255);">
                                        Return
                                    </div>
                                </template>
                                <template x-if="!item.is_return">
                                    <div class="fi-badge flex items-center justify-center gap-x-1 rounded-md text-xs font-medium px-2 py-1" style="background-color: rgb(34, 197, 94); color: rgb(255, 255, 255);">
                                        Purchase
                                    </div>
                                </template>
                            </div>
                        </td>

                        {{-- Product ID --}}
                        <td class="fi-ta-cell px-3 py-4">
                            <div class="fi-ta-text text-sm text-gray-950 dark:text-white" x-text="item.product_id_raw"></div>
                        </td>

                        {{-- Description --}}
                        <td class="fi-ta-cell px-3 py-4">
                            <div class="fi-ta-text text-sm text-gray-950 dark:text-white" x-text="item.description || '-'"></div>
                        </td>

                        {{-- Brand --}}
                        <td class="fi-ta-cell px-3 py-4">
                            <div class="fi-ta-text text-sm text-gray-950 dark:text-white" x-text="item.brand || '-'"></div>
                        </td>

                        {{-- Warehouse --}}
                        <td class="fi-ta-cell px-3 py-4">
                            <div class="fi-ta-text text-sm text-gray-950 dark:text-white" x-text="item.warehouse_name"></div>
                        </td>

                        {{-- Location --}}
                        <td class="fi-ta-cell px-3 py-4">
                            <div class="fi-ta-text text-sm text-gray-950 dark:text-white" x-text="item.location_name"></div>
                        </td>

                        {{-- Quantity --}}
                        <td class="fi-ta-cell px-3 py-4 text-center">
                            <div class="fi-ta-text text-sm font-medium text-gray-950 dark:text-white" x-text="item.quantity"></div>
                        </td>

                        {{-- Unit --}}
                        <td class="fi-ta-cell px-3 py-4 text-center">
                            <div class="fi-ta-text text-sm text-gray-950 dark:text-white" x-text="item.unit"></div>
                        </td>

                        {{-- Unit Price --}}
                        <td class="fi-ta-cell px-3 py-4 text-right">
                            <div class="fi-ta-text text-sm text-gray-950 dark:text-white" x-text="'$' + item.unit_price.toFixed(2)"></div>
                        </td>

                        {{-- Total --}}
                        <td class="fi-ta-cell px-3 py-4 text-right">
                            <div class="fi-ta-text text-sm font-semibold text-gray-950 dark:text-white" x-text="'$' + item.total_price.toFixed(2)"></div>
                        </td>
                    </tr>
                </template>
                <template x-if="filteredItems.length === 0">
                    <tr>
                        <td colspan="10" class="fi-ta-cell px-3 py-8 text-center">
                            <div class="fi-ta-empty-state-content mx-auto grid max-w-lg justify-items-center text-center">
                                <div class="fi-ta-empty-state-icon-ctn mb-4">
                                    <svg class="fi-ta-empty-state-icon h-16 w-16 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 6l12 12m0-12L6 18" />
                                    </svg>
                                </div>
                                <h4 class="fi-ta-empty-state-heading text-base font-semibold leading-6 text-gray-950 dark:text-white">
                                    No items found
                                </h4>
                                <p class="fi-ta-empty-state-description text-sm text-gray-500 dark:text-gray-400 mt-1">
                                    Try adjusting your search or filters
                                </p>
                            </div>
                        </td>
                    </tr>
                </template>
            </tbody>
        </table>
    </div>

    {{-- Pagination --}}
    <div x-show="totalPages > 1" class="flex items-center justify-between">
        <div class="text-sm text-gray-700 dark:text-gray-300">
            Showing
            <span class="font-medium" x-text="(currentPage - 1) * itemsPerPage + 1"></span>
            to
            <span class="font-medium" x-text="Math.min(currentPage * itemsPerPage, filteredItems.length)"></span>
            of
            <span class="font-medium" x-text="filteredItems.length"></span>
            results
        </div>
        
        <div class="flex items-center gap-2">
            <button @click="previousPage()" :disabled="currentPage === 1" 
                    class="fi-btn relative grid-flow-col items-center justify-center font-semibold outline-none transition duration-75 focus-visible:ring-2 rounded-lg fi-color-gray fi-btn-color-gray fi-size-sm fi-btn-size-sm gap-1 px-2.5 py-1.5 text-xs inline-grid shadow-sm bg-white text-gray-950 hover:bg-gray-50 dark:bg-white/5 dark:text-white dark:hover:bg-white/10 ring-1 ring-gray-950/10 dark:ring-white/20 disabled:opacity-50 disabled:cursor-not-allowed">
                Previous
            </button>
            
            <div class="flex items-center gap-1">
                <template x-for="page in pageNumbers" :key="page">
                    <button @click="goToPage(page)" 
                            :class="currentPage === page ? 'bg-primary-600 text-white hover:bg-primary-500' : 'bg-white text-gray-950 hover:bg-gray-50 dark:bg-white/5 dark:text-white dark:hover:bg-white/10'"
                            class="fi-btn relative grid-flow-col items-center justify-center font-semibold outline-none transition duration-75 focus-visible:ring-2 rounded-lg fi-size-sm fi-btn-size-sm gap-1 px-2.5 py-1.5 text-xs inline-grid shadow-sm ring-1 ring-gray-950/10 dark:ring-white/20">
                        <span x-text="page"></span>
                    </button>
                </template>
            </div>
            
            <button @click="nextPage()" :disabled="currentPage === totalPages" 
                    class="fi-btn relative grid-flow-col items-center justify-center font-semibold outline-none transition duration-75 focus-visible:ring-2 rounded-lg fi-color-gray fi-btn-color-gray fi-size-sm fi-btn-size-sm gap-1 px-2.5 py-1.5 text-xs inline-grid shadow-sm bg-white text-gray-950 hover:bg-gray-50 dark:bg-white/5 dark:text-white dark:hover:bg-white/10 ring-1 ring-gray-950/10 dark:ring-white/20 disabled:opacity-50 disabled:cursor-not-allowed">
                Next
            </button>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('itemsTable', () => itemsTable());
});

function itemsTable() {
    return {
        allItems: @json($itemsData),
        filteredItems: [],
        paginatedItems: [],
        search: '',
        sortBy: '',
        sortDirection: 'asc',
        currentPage: 1,
        itemsPerPage: 50,
        totalPages: 1,
        
        init() {
            this.filteredItems = [...this.allItems];
            this.updatePagination();
        },
        
        filterItems() {
            if (!this.search) {
                this.filteredItems = [...this.allItems];
            } else {
                const searchLower = this.search.toLowerCase();
                this.filteredItems = this.allItems.filter(item => {
                    return (item.product_id_raw && item.product_id_raw.toLowerCase().includes(searchLower)) ||
                           (item.description && item.description.toLowerCase().includes(searchLower)) ||
                           (item.brand && item.brand.toLowerCase().includes(searchLower)) ||
                           (item.warehouse_name && item.warehouse_name.toLowerCase().includes(searchLower)) ||
                           (item.location_name && item.location_name.toLowerCase().includes(searchLower));
                });
            }
            this.currentPage = 1;
            this.updatePagination();
        },
        
        setSortBy(field) {
            if (this.sortBy === field) {
                this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
            } else {
                this.sortBy = field;
                this.sortDirection = 'asc';
            }
            this.sortItems();
        },
        
        sortItems() {
            if (!this.sortBy) {
                this.updatePagination();
                return;
            }
            
            this.filteredItems.sort((a, b) => {
                let aVal = a[this.sortBy];
                let bVal = b[this.sortBy];
                
                // Handle null/undefined values
                if (aVal === null || aVal === undefined) aVal = '';
                if (bVal === null || bVal === undefined) bVal = '';
                
                // Convert to lowercase for string comparison
                if (typeof aVal === 'string') aVal = aVal.toLowerCase();
                if (typeof bVal === 'string') bVal = bVal.toLowerCase();
                
                if (this.sortDirection === 'asc') {
                    return aVal > bVal ? 1 : aVal < bVal ? -1 : 0;
                } else {
                    return aVal < bVal ? 1 : aVal > bVal ? -1 : 0;
                }
            });
            
            this.updatePagination();
        },
        
        updatePagination() {
            this.totalPages = Math.ceil(this.filteredItems.length / this.itemsPerPage);
            const start = (this.currentPage - 1) * this.itemsPerPage;
            const end = start + this.itemsPerPage;
            this.paginatedItems = this.filteredItems.slice(start, end);
        },
        
        goToPage(page) {
            this.currentPage = page;
            this.updatePagination();
        },
        
        previousPage() {
            if (this.currentPage > 1) {
                this.currentPage--;
                this.updatePagination();
            }
        },
        
        nextPage() {
            if (this.currentPage < this.totalPages) {
                this.currentPage++;
                this.updatePagination();
            }
        },
        
        get pageNumbers() {
            const pages = [];
            const maxPages = 7;
            
            if (this.totalPages <= maxPages) {
                for (let i = 1; i <= this.totalPages; i++) {
                    pages.push(i);
                }
            } else {
                if (this.currentPage <= 3) {
                    for (let i = 1; i <= 5; i++) {
                        pages.push(i);
                    }
                    pages.push('...');
                    pages.push(this.totalPages);
                } else if (this.currentPage >= this.totalPages - 2) {
                    pages.push(1);
                    pages.push('...');
                    for (let i = this.totalPages - 4; i <= this.totalPages; i++) {
                        pages.push(i);
                    }
                } else {
                    pages.push(1);
                    pages.push('...');
                    for (let i = this.currentPage - 1; i <= this.currentPage + 1; i++) {
                        pages.push(i);
                    }
                    pages.push('...');
                    pages.push(this.totalPages);
                }
            }
            
            return pages.filter(p => p === '...' || (p >= 1 && p <= this.totalPages));
        }
    }
}
</script>