@php
    $item = $getRecord();
    $orderId = $item->order_id;
    $itemId = $item->order_item_id;
    $supplierId = $item->supplier_id;
    $currentStatus = $item->current_status;
    
    // Check if item has "Needs Order" status
    // Get the actual status name to check
    $statusObj = \App\Models\ItemsStatus::find($currentStatus);
    $statusName = $statusObj ? $statusObj->status : '';
    $isNeedsOrder = (stripos($statusName, 'needs order') !== false) || ($currentStatus == 1);
    
    // Debug: Log the status
    \Log::info('Item ' . $itemId . ' status: ' . $currentStatus . ' (' . $statusName . '), isNeedsOrder: ' . ($isNeedsOrder ? 'true' : 'false'));
    
    // Check if supplier is assigned (hide KSI-GA with supplier_id 73)
    $supplierBtn = ($supplierId && $supplierId != 73) ? "fi-btn-color-success" : "";
    $supplierName = '';
    if($supplierId && $supplierId != 73) {
        $supplier = \App\Models\Supplier::find($supplierId);
        $supplierName = $supplier ? $supplier->code : '';
    }
    
    // Check for additional costs
    $additionalBtn = "";
    $additionalCosts = \DB::table('orders_additional_costs')
        ->where('item_id', $itemId)
        ->where('order_id', $orderId)
        ->whereNotIn('cost_type', ['Supplier Credit', 'Carrier Credit'])
        ->get();
    
    if($additionalCosts->count() > 0) {
        $additionalBtn = "fi-btn-color-success";
    }
    
    // Check for supplier credits
    $supplierCreditBtn = "";
    $supplierCredits = \DB::table('orders_additional_costs')
        ->where('item_id', $itemId)
        ->where('order_id', $orderId)
        ->where('cost_type', 'Supplier Credit')
        ->get();
    
    if($supplierCredits->count() > 0) {
        $supplierCreditBtn = "fi-btn-color-success";
    }
    
    // Check for carrier credits
    $carrierCreditBtn = "";
    $carrierCredits = \DB::table('orders_additional_costs')
        ->where('item_id', $itemId)
        ->where('order_id', $orderId)
        ->where('cost_type', 'Carrier Credit')
        ->get();
    
    if($carrierCredits->count() > 0) {
        $carrierCreditBtn = "fi-btn-color-success";
    }
    
    // Calculate sum of costs for display
    $additionalCostSum = \DB::table('orders_additional_costs')
        ->where('item_id', $itemId)
        ->where('order_id', $orderId)
        ->whereNotIn('cost_type', ['Supplier Credit', 'Carrier Credit'])
        ->sum('cost');
    
    $supplierCreditSum = \DB::table('orders_additional_costs')
        ->where('item_id', $itemId)
        ->where('order_id', $orderId)
        ->where('cost_type', 'Supplier Credit')
        ->sum('cost');
    
    $carrierCreditSum = \DB::table('orders_additional_costs')
        ->where('item_id', $itemId)
        ->where('order_id', $orderId)
        ->where('cost_type', 'Carrier Credit')
        ->sum('cost');
@endphp

<div style="display: flex; gap: 16px; align-items: flex-start;">
    <!-- Costs Display Column (Read-only) -->
    <div class="item-costs-display" style="min-width: 120px; padding: 8px; background: #f8f9fa; border-radius: 4px; font-size: 12px;">
        <div style="margin-bottom: 6px;">
            <span style="color: #666; font-weight: 500;">Additional Cost:</span><br>
            <span style="font-weight: 600; color: {{ $additionalCostSum > 0 ? '#dc3545' : '#999' }};">
                ${{ number_format($additionalCostSum, 2) }}
            </span>
        </div>
        <div style="margin-bottom: 6px;">
            <span style="color: #666; font-weight: 500;">Supplier Credit:</span><br>
            <span style="font-weight: 600; color: {{ $supplierCreditSum > 0 ? '#28a745' : '#999' }};">
                ${{ number_format($supplierCreditSum, 2) }}
            </span>
        </div>
        <div style="margin-bottom: 6px;">
            <span style="color: #666; font-weight: 500;">Carrier Credit:</span><br>
            <span style="font-weight: 600; color: {{ $carrierCreditSum > 0 ? '#28a745' : '#999' }};">
                ${{ number_format($carrierCreditSum, 2) }}
            </span>
        </div>
        @php
            $netImpact = $additionalCostSum - $supplierCreditSum - $carrierCreditSum;
        @endphp
        @if($additionalCostSum > 0 || $supplierCreditSum > 0 || $carrierCreditSum > 0)
            <div style="border-top: 1px solid #dee2e6; padding-top: 6px; margin-top: 6px;">
                <span style="color: #666; font-weight: 500;">Net:</span><br>
                <span style="font-weight: 700; color: {{ $netImpact > 0 ? '#dc3545' : ($netImpact < 0 ? '#28a745' : '#999') }};">
                    ${{ number_format(abs($netImpact), 2) }}
                </span>
            </div>
        @endif
    </div>

    <!-- Actions Column (Buttons) -->
    <div class="item-actions-column" data-item-id="{{ $itemId }}" style="display: flex; flex-direction: column; gap: 8px; min-width: 150px;">
    @if($isNeedsOrder)
        <!-- Auto Fulfill Section for items with "Needs Order" status -->
        <div class="auto-fulfill-section" style="display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(156, 163, 175, 0.2);">
            <!-- Auto Fulfill with dropdown -->
            <div style="display: inline-flex;">
                <button type="button" 
                        class="fi-btn fi-btn-size-xs" 
                        onclick="autoFulfillItem({{ $itemId }}, {{ $orderId }}, null)"
                        style="font-size: 10px; padding: 2px 6px; background: rgb(34, 197, 94); color: white; border-radius: 4px 0 0 4px;">
                    Auto Fulfill
                </button>
                <div class="dropdown" style="position: relative; display: inline-block;">
                    <button type="button" 
                            class="fi-btn fi-btn-size-xs dropdown-toggle" 
                            onclick="toggleAutoFulfillDropdown({{ $itemId }})"
                            style="font-size: 10px; padding: 2px 6px; background: rgb(59, 130, 246); color: white; border-radius: 0 4px 4px 0; border-left: 1px solid rgba(255,255,255,0.2);">
                        <span id="selected-supplier-{{ $itemId }}">USAVA</span> ▼
                    </button>
                    <div id="supplier-dropdown-{{ $itemId }}" class="dropdown-content" style="display: none; position: absolute; background: white; min-width: 100px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1000; border-radius: 4px;">
                        <a href="#" onclick="selectSupplierForAutoFulfill({{ $itemId }}, 'USAVA'); return false;" style="color: black; padding: 8px 12px; text-decoration: none; display: block; font-size: 11px;">USAVA</a>
                        <a href="#" onclick="selectSupplierForAutoFulfill({{ $itemId }}, 'EXPRESS'); return false;" style="color: black; padding: 8px 12px; text-decoration: none; display: block; font-size: 11px;">EXPRESS</a>
                        <a href="#" onclick="selectSupplierForAutoFulfill({{ $itemId }}, 'KEYSTONE'); return false;" style="color: black; padding: 8px 12px; text-decoration: none; display: block; font-size: 11px;">KEYSTONE</a>
                        <a href="#" onclick="selectSupplierForAutoFulfill({{ $itemId }}, 'PA'); return false;" style="color: black; padding: 8px 12px; text-decoration: none; display: block; font-size: 11px;">PA</a>
                    </div>
                </div>
            </div>
            
            <!-- No Part button -->
            <button type="button" 
                    class="fi-btn fi-btn-size-xs" 
                    onclick="markAsNoPart({{ $itemId }}, {{ $orderId }})"
                    style="font-size: 10px; padding: 2px 6px; background: rgb(239, 68, 68); color: white;">
                No Part
            </button>
            
            <!-- Show Autofulfill Log -->
            <a href="/items/autofulfill-log/{{ $itemId }}" 
               target="_blank"
               class="fi-btn fi-btn-size-xs" 
               style="font-size: 10px; padding: 2px 6px; background: rgb(107, 114, 128); color: white; text-decoration: none; display: inline-block;">
                Show Log
            </a>
        </div>
    @endif
    
    @if($supplierName)
        <div class="supplier-display" style="font-weight: 600; color: #059669; margin-bottom: 4px;">{{ $supplierName }}</div>
    @else
        <div class="supplier-display" style="display: none; font-weight: 600; color: #059669; margin-bottom: 4px;"></div>
    @endif
    
    <button type="button" 
            class="fi-btn fi-btn-size-sm {{ $supplierBtn }}" 
            onclick="openUpdateSupplierModal({{ $itemId }}, {{ $orderId }})"
            style="font-size: 11px; padding: 4px 8px;">
        Update Supplier
    </button>
    
    <button type="button" 
            class="fi-btn fi-btn-size-sm {{ $additionalBtn }}" 
            onclick="openAdditionalCostModal({{ $itemId }}, {{ $orderId }})"
            style="font-size: 11px; padding: 4px 8px;">
        Additional Cost
    </button>
    
    <button type="button" 
            class="fi-btn fi-btn-size-sm {{ $supplierCreditBtn }}" 
            onclick="openSupplierCreditModal({{ $itemId }}, {{ $orderId }})"
            style="font-size: 11px; padding: 4px 8px;">
        Supplier Credit
    </button>
    
    <button type="button" 
            class="fi-btn fi-btn-size-sm {{ $carrierCreditBtn }}" 
            onclick="openCarrierCreditModal({{ $itemId }}, {{ $orderId }})"
            style="font-size: 11px; padding: 4px 8px;">
        Carrier Credit
    </button>
    
    {{-- Fulfillment Order badge disabled as requested
    @if($item->fulfillment_order_id)
        <div style="margin-top: 4px;">
            <span class="fi-badge" style="background: rgb(59, 130, 246); color: white; font-size: 11px; padding: 2px 6px;">
                Fulfillment Order #{{ $item->fulfillment_order_id }}
            </span>
        </div>
    @endif
    --}}

    {{-- Core Refund badge - shown when item has a core charge --}}
    @if($item->core_charge && $item->core_charge > 0)
        <div style="margin-top: 4px;">
            <span class="fi-badge" style="background: rgb(234, 88, 12); color: white; font-size: 11px; padding: 2px 6px; border-radius: 4px;">
                Core Refund ${{ number_format($item->core_charge, 2) }}
            </span>
        </div>
    @endif
    </div>
</div>

<script>
// Only define these functions once
if (typeof window.itemActionsInitialized === 'undefined') {
    window.itemActionsInitialized = true;
    
    window.openUpdateSupplierModal = function(itemId, orderId) {
        // Create and open modal for updating supplier
        createItemActionModal('update-supplier', 'Update Supplier', itemId, orderId);
    }
    
    window.openAdditionalCostModal = function(itemId, orderId) {
        // Create and open modal for additional cost
        createItemActionModal('additional-cost', 'Additional Cost', itemId, orderId);
    }
    
    window.openSupplierCreditModal = function(itemId, orderId) {
        // Create and open modal for supplier credit
        createItemActionModal('supplier-credit', 'Supplier Credit', itemId, orderId);
    }
    
    window.openCarrierCreditModal = function(itemId, orderId) {
        // Create and open modal for carrier credit
        createItemActionModal('carrier-credit', 'Carrier Credit', itemId, orderId);
    }
    
    window.createItemActionModal = function(type, title, itemId, orderId) {
        // Remove existing modal if any
        const existingModal = document.getElementById('item-action-modal');
        if (existingModal) {
            existingModal.remove();
        }
        
        const isDarkMode = document.documentElement.classList.contains('dark');
        
        // Create modal overlay
        const overlay = document.createElement('div');
        overlay.id = 'item-action-modal';
        overlay.style.position = 'fixed';
        overlay.style.top = '0';
        overlay.style.left = '0';
        overlay.style.right = '0';
        overlay.style.bottom = '0';
        overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
        overlay.style.zIndex = '9999';
        overlay.style.display = 'flex';
        overlay.style.alignItems = 'center';
        overlay.style.justifyContent = 'center';
        
        // Create modal content
        const modal = document.createElement('div');
        modal.style.backgroundColor = isDarkMode ? 'rgb(31, 41, 55)' : 'white';
        modal.style.borderRadius = '8px';
        modal.style.padding = '20px';
        modal.style.width = '500px';
        modal.style.maxHeight = '80vh';
        modal.style.overflow = 'auto';
        
        let modalContent = `
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                <h2 style="font-size: 18px; font-weight: 600; color: ${isDarkMode ? 'rgb(229, 231, 235)' : 'rgb(17, 24, 39)'};">${title}</h2>
                <button onclick="document.getElementById('item-action-modal').remove()" style="color: ${isDarkMode ? 'rgb(156, 163, 175)' : 'rgb(107, 114, 128)'}; font-size: 24px; line-height: 1; cursor: pointer; background: none; border: none;">&times;</button>
            </div>
        `;
        
        if (type === 'update-supplier') {
            modalContent += `
                <div id="modal-content-area">
                    <div style="margin-bottom: 16px;">
                        <label style="display: block; margin-bottom: 8px; color: ${isDarkMode ? 'rgb(209, 213, 219)' : 'rgb(55, 65, 81)'};">Select Supplier:</label>
                        <div id="supplier-list" style="max-height: 300px; overflow-y: auto; border: 1px solid ${isDarkMode ? 'rgb(75, 85, 99)' : 'rgb(209, 213, 219)'}; border-radius: 6px; padding: 8px;">
                            <div style="text-align: center; color: ${isDarkMode ? 'rgb(156, 163, 175)' : 'rgb(107, 114, 128)'};">Loading suppliers...</div>
                        </div>
                    </div>
                    <div style="display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px;">
                        <button onclick="document.getElementById('item-action-modal').remove()" style="padding: 8px 16px; background: rgb(107, 114, 128); color: white; border-radius: 6px; cursor: pointer; border: none;">Cancel</button>
                        <button onclick="saveSupplier(${itemId})" style="padding: 8px 16px; background: rgb(34, 197, 94); color: white; border-radius: 6px; cursor: pointer; border: none;">Save</button>
                    </div>
                </div>
            `;
            
            // Load suppliers via AJAX
            setTimeout(() => loadSuppliers(itemId), 100);
            
        } else if (type === 'additional-cost') {
            modalContent += `
                <div id="modal-content-area">
                    <div style="margin-bottom: 16px;">
                        <label style="display: block; margin-bottom: 8px; color: ${isDarkMode ? 'rgb(209, 213, 219)' : 'rgb(55, 65, 81)'};">Cost Type:</label>
                        <select id="cost-type" style="width: 100%; padding: 8px; border: 1px solid ${isDarkMode ? 'rgb(75, 85, 99)' : 'rgb(209, 213, 219)'}; border-radius: 6px; background: ${isDarkMode ? 'rgb(17, 24, 39)' : 'white'}; color: ${isDarkMode ? 'rgb(209, 213, 219)' : 'rgb(55, 65, 81)'};">
                            <option value="">Please select option</option>
                            <option value="Rerouted Parcel Fee">Rerouted Parcel Fee</option>
                            <option value="Return Label Cost">Return Label Cost</option>
                            <option value="Replacement Part">Replacement Part</option>
                            <option value="Refunded Customs Fees">Refunded Customs Fees</option>
                            <option value="Purchased - Customer Cancelled">Purchased - Customer Cancelled</option>
                            <option value="Reclaimed Supplier Credits">Reclaimed Supplier Credits</option>
                            <option value="Other">Other</option>
                        </select>
                        <textarea id="cost-type-other" style="display: none; width: 100%; margin-top: 12px; padding: 8px; border: 1px solid ${isDarkMode ? 'rgb(75, 85, 99)' : 'rgb(209, 213, 219)'}; border-radius: 6px; background: ${isDarkMode ? 'rgb(17, 24, 39)' : 'white'}; color: ${isDarkMode ? 'rgb(209, 213, 219)' : 'rgb(55, 65, 81)'};" rows="3" placeholder="Please specify..."></textarea>
                    </div>
                    <div style="margin-bottom: 16px;">
                        <label style="display: block; margin-bottom: 8px; color: ${isDarkMode ? 'rgb(209, 213, 219)' : 'rgb(55, 65, 81)'};">Cost:</label>
                        <input type="number" id="cost-amount" step="0.01" style="width: 100%; padding: 8px; border: 1px solid ${isDarkMode ? 'rgb(75, 85, 99)' : 'rgb(209, 213, 219)'}; border-radius: 6px; background: ${isDarkMode ? 'rgb(17, 24, 39)' : 'white'}; color: ${isDarkMode ? 'rgb(209, 213, 219)' : 'rgb(55, 65, 81)'};" placeholder="0.00">
                    </div>
                    <div id="existing-costs" style="margin-bottom: 16px;"></div>
                    <div style="display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px;">
                        <button onclick="document.getElementById('item-action-modal').remove()" style="padding: 8px 16px; background: rgb(107, 114, 128); color: white; border-radius: 6px; cursor: pointer; border: none;">Cancel</button>
                        <button onclick="saveAdditionalCost(${itemId}, ${orderId})" style="padding: 8px 16px; background: rgb(34, 197, 94); color: white; border-radius: 6px; cursor: pointer; border: none;">Save</button>
                    </div>
                </div>
            `;
            
            // Load existing costs
            setTimeout(() => loadAdditionalCosts(itemId, orderId), 100);
            
        } else if (type === 'supplier-credit' || type === 'carrier-credit') {
            const creditType = type === 'supplier-credit' ? 'Supplier' : 'Carrier';
            modalContent += `
                <div id="modal-content-area">
                    <div style="margin-bottom: 16px;">
                        <label style="display: block; margin-bottom: 8px; color: ${isDarkMode ? 'rgb(209, 213, 219)' : 'rgb(55, 65, 81)'};">Credit Amount:</label>
                        <input type="number" id="credit-amount" step="0.01" style="width: 100%; padding: 8px; border: 1px solid ${isDarkMode ? 'rgb(75, 85, 99)' : 'rgb(209, 213, 219)'}; border-radius: 6px; background: ${isDarkMode ? 'rgb(17, 24, 39)' : 'white'}; color: ${isDarkMode ? 'rgb(209, 213, 219)' : 'rgb(55, 65, 81)'};" placeholder="0.00">
                    </div>
                    <div id="existing-credits" style="margin-bottom: 16px;"></div>
                    <div style="display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px;">
                        <button onclick="document.getElementById('item-action-modal').remove()" style="padding: 8px 16px; background: rgb(107, 114, 128); color: white; border-radius: 6px; cursor: pointer; border: none;">Cancel</button>
                        <button onclick="save${creditType}Credit(${itemId}, ${orderId})" style="padding: 8px 16px; background: rgb(34, 197, 94); color: white; border-radius: 6px; cursor: pointer; border: none;">Save</button>
                    </div>
                </div>
            `;
            
            // Load existing credits
            setTimeout(() => {
                if (type === 'supplier-credit') {
                    loadSupplierCredits(itemId, orderId);
                } else {
                    loadCarrierCredits(itemId, orderId);
                }
            }, 100);
        }
        
        modal.innerHTML = modalContent;
        overlay.appendChild(modal);
        document.body.appendChild(overlay);
        
        // Add event listener for cost type change
        if (type === 'additional-cost') {
            document.getElementById('cost-type').addEventListener('change', function() {
                const otherField = document.getElementById('cost-type-other');
                if (this.value === 'Other') {
                    otherField.style.display = 'block';
                } else {
                    otherField.style.display = 'none';
                }
            });
        }
        
        // Close modal on overlay click
        overlay.addEventListener('click', function(e) {
            if (e.target === overlay) {
                overlay.remove();
            }
        });
    }
    
    // Helper functions for AJAX calls
    window.loadSuppliers = async function(itemId) {
        try {
            const response = await fetch('/api/items/suppliers/' + itemId, {
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
                }
            });
            const data = await response.json();
            
            const supplierList = document.getElementById('supplier-list');
            if (data.suppliers && data.suppliers.length > 0) {
                let html = '';
                data.suppliers.forEach(supplier => {
                    html += `
                        <label style="display: block; padding: 8px; cursor: pointer;">
                            <input type="radio" name="supplier" value="${supplier.supplier_id}" ${supplier.is_current ? 'checked' : ''}>
                            <span style="margin-left: 8px;">${supplier.code} - ${supplier.supplier_name}</span>
                        </label>
                    `;
                });
                supplierList.innerHTML = html;
            } else {
                supplierList.innerHTML = '<div style="text-align: center; color: rgb(156, 163, 175);">No suppliers available</div>';
            }
        } catch (error) {
            console.error('Error loading suppliers:', error);
        }
    }
    
    window.saveSupplier = async function(itemId) {
        const selectedSupplier = document.querySelector('input[name="supplier"]:checked');
        if (!selectedSupplier) {
            alert('Please select a supplier');
            return;
        }
        
        try {
            const response = await fetch('/api/items/update-supplier', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
                },
                body: JSON.stringify({
                    item_id: itemId,
                    supplier_id: selectedSupplier.value
                })
            });
            
            if (response.ok) {
                location.reload();
            } else {
                alert('Failed to update supplier');
            }
        } catch (error) {
            console.error('Error saving supplier:', error);
            alert('Failed to update supplier');
        }
    }
    
    window.loadAdditionalCosts = async function(itemId, orderId) {
        try {
            const response = await fetch(`/api/items/additional-costs/${itemId}/${orderId}`);
            const data = await response.json();
            
            const costsDiv = document.getElementById('existing-costs');
            if (data.costs && data.costs.length > 0) {
                let html = '<div style="margin-top: 12px;"><strong>Existing Costs:</strong><ul style="margin-top: 8px;">';
                data.costs.forEach(cost => {
                    html += `<li>${cost.cost_type}: $${cost.cost}</li>`;
                });
                html += '</ul></div>';
                costsDiv.innerHTML = html;
            }
        } catch (error) {
            console.error('Error loading additional costs:', error);
        }
    }
    
    window.saveAdditionalCost = async function(itemId, orderId) {
        const costType = document.getElementById('cost-type').value;
        const costAmount = document.getElementById('cost-amount').value;
        const costTypeOther = document.getElementById('cost-type-other').value;

        if (!costType || !costAmount) {
            alert('Please fill in all required fields');
            return;
        }

        const finalCostType = costType === 'Other' ? (costTypeOther || 'Other') : costType;

        if (costType === 'Other' && !costTypeOther) {
            alert('Please specify the cost type');
            return;
        }

        try {
            const response = await fetch('/api/items/additional-cost', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
                },
                body: JSON.stringify({
                    item_id: itemId,
                    order_id: orderId,
                    cost_type: finalCostType,
                    cost: costAmount
                })
            });

            if (response.ok) {
                location.reload();
            } else {
                alert('Failed to save additional cost');
            }
        } catch (error) {
            console.error('Error saving additional cost:', error);
            alert('Failed to save additional cost');
        }
    }
    
    window.loadSupplierCredits = async function(itemId, orderId) {
        try {
            const response = await fetch(`/api/items/supplier-credits/${itemId}/${orderId}`);
            const data = await response.json();
            
            const creditsDiv = document.getElementById('existing-credits');
            if (data.credits && data.credits.length > 0) {
                let html = '<div style="margin-top: 12px;"><strong>Existing Credits:</strong><ul style="margin-top: 8px;">';
                data.credits.forEach(credit => {
                    html += `<li>$${credit.cost}</li>`;
                });
                html += '</ul></div>';
                creditsDiv.innerHTML = html;
            }
        } catch (error) {
            console.error('Error loading supplier credits:', error);
        }
    }
    
    window.saveSupplierCredit = async function(itemId, orderId) {
        const creditAmount = document.getElementById('credit-amount').value;
        
        if (!creditAmount) {
            alert('Please enter a credit amount');
            return;
        }
        
        try {
            const response = await fetch('/api/items/supplier-credit', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
                },
                body: JSON.stringify({
                    item_id: itemId,
                    order_id: orderId,
                    cost: creditAmount
                })
            });
            
            if (response.ok) {
                location.reload();
            } else {
                alert('Failed to save supplier credit');
            }
        } catch (error) {
            console.error('Error saving supplier credit:', error);
            alert('Failed to save supplier credit');
        }
    }
    
    window.loadCarrierCredits = async function(itemId, orderId) {
        try {
            const response = await fetch(`/api/items/carrier-credits/${itemId}/${orderId}`);
            const data = await response.json();
            
            const creditsDiv = document.getElementById('existing-credits');
            if (data.credits && data.credits.length > 0) {
                let html = '<div style="margin-top: 12px;"><strong>Existing Credits:</strong><ul style="margin-top: 8px;">';
                data.credits.forEach(credit => {
                    html += `<li>$${credit.cost}</li>`;
                });
                html += '</ul></div>';
                creditsDiv.innerHTML = html;
            }
        } catch (error) {
            console.error('Error loading carrier credits:', error);
        }
    }
    
    window.saveCarrierCredit = async function(itemId, orderId) {
        const creditAmount = document.getElementById('credit-amount').value;
        
        if (!creditAmount) {
            alert('Please enter a credit amount');
            return;
        }
        
        try {
            const response = await fetch('/api/items/carrier-credit', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
                },
                body: JSON.stringify({
                    item_id: itemId,
                    order_id: orderId,
                    cost: creditAmount
                })
            });
            
            if (response.ok) {
                location.reload();
            } else {
                alert('Failed to save carrier credit');
            }
        } catch (error) {
            console.error('Error saving carrier credit:', error);
            alert('Failed to save carrier credit');
        }
    }
    
    // Auto Fulfill Functions
    window.toggleAutoFulfillDropdown = function(itemId) {
        const dropdown = document.getElementById('supplier-dropdown-' + itemId);
        dropdown.style.display = dropdown.style.display === 'none' ? 'block' : 'none';
        
        // Close dropdown when clicking outside
        document.addEventListener('click', function closeDropdown(e) {
            if (!e.target.closest('.dropdown')) {
                dropdown.style.display = 'none';
                document.removeEventListener('click', closeDropdown);
            }
        });
    }
    
    window.selectSupplierForAutoFulfill = function(itemId, supplierCode) {
        document.getElementById('selected-supplier-' + itemId).textContent = supplierCode;
        document.getElementById('supplier-dropdown-' + itemId).style.display = 'none';
    }
    
    window.autoFulfillItem = async function(itemId, orderId, supplierCode) {
        // If no supplier code provided, get the selected one
        if (!supplierCode) {
            const selectedElement = document.getElementById('selected-supplier-' + itemId);
            supplierCode = selectedElement ? selectedElement.textContent : 'USAVA';
        }
        
        if (!confirm('Auto fulfill this item with supplier: ' + supplierCode + '?')) {
            return;
        }
        
        try {
            const response = await fetch('/api/items/auto-fulfill', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
                },
                body: JSON.stringify({
                    item_id: itemId,
                    order_id: orderId,
                    supplier_code: supplierCode
                })
            });
            
            const data = await response.json();
            if (response.ok && data.success) {
                // Show success message
                alert('Item auto-fulfilled successfully with ' + supplierCode);
                location.reload();
            } else {
                alert(data.message || 'Failed to auto-fulfill item');
            }
        } catch (error) {
            console.error('Error auto-fulfilling item:', error);
            alert('Failed to auto-fulfill item');
        }
    }
    
    window.markAsNoPart = async function(itemId, orderId) {
        if (!confirm('Mark this item as "No Part" and set status to cancelled?')) {
            return;
        }
        
        try {
            const response = await fetch('/api/items/mark-no-part', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
                },
                body: JSON.stringify({
                    item_id: itemId,
                    order_id: orderId
                })
            });
            
            const data = await response.json();
            if (response.ok && data.success) {
                alert('Item marked as "No Part"');
                location.reload();
            } else {
                alert(data.message || 'Failed to mark item as no part');
            }
        } catch (error) {
            console.error('Error marking item as no part:', error);
            alert('Failed to mark item as no part');
        }
    }
}

// AutoFulfill Observer is now loaded globally from list-orders.blade.php
</script>