@php
    $item = $getRecord();
    $itemId = $item->order_item_id;
    $currentStatus = $item->current_status;
    $statusObj = $item->status;
    $statusName = $statusObj ? $statusObj->status : '';
    $statusColor = $statusObj ? $statusObj->color_code : 'label-default';
    
    // Check if item has returns
    $hasReturns = \DB::table('orders_items_returns')
        ->where('order_item_id', $itemId)
        ->exists();

    // Check if item has core charge refund entries (only relevant when the
    // item carries a core charge). Kept fully separate from returns.
    $hasCoreCharge = ($item->core_charge ?? 0) > 0;
    $coreChargeCount = 0;
    $coreChargeBadgeText = '';
    if ($hasCoreCharge) {
        $coreCharges = \DB::table('orders_items_core_charges')
            ->where('order_item_id', $itemId)
            ->orderBy('id', 'desc')
            ->get();
        $coreChargeCount = $coreCharges->count();

        if ($coreChargeCount > 0) {
            $latestCore = $coreCharges->first();
            $coreStatusLabels = [
                'refunded' => 'Refunded',
                'waived'   => 'Waived',
            ];
            $coreStateLabel = $coreStatusLabels[$latestCore->status ?? 'refunded'] ?? 'Refunded';
            $coreAmount = $latestCore->amount !== null ? '$' . number_format($latestCore->amount, 2) : '';
            $coreChargeBadgeText = trim("Core Charge {$coreAmount} - {$coreStateLabel}");
        }
    }

    $returnCount = 0;
    $returnBadgeText = '';
    $returnTracking = null;
    if ($hasReturns) {
        $returns = \DB::table('orders_items_returns')
            ->where('order_item_id', $itemId)
            ->orderBy('id', 'desc')
            ->get();
        $returnCount = $returns->count();

        if ($returnCount > 0) {
            $latestReturn = $returns->first();
            $statusLabels = [
                'initiated' => 'Initiated',
                'label_sent' => 'Label Sent',
                'in_transit' => 'In Transit',
                'received' => 'Received',
            ];
            $stateLabel = $statusLabels[$latestReturn->return_status ?? 'initiated'] ?? 'Initiated';
            $returnBadgeText = "Return - {$stateLabel}";

            // Get return tracking from latest entry that has one
            $returnTracking = $returns->pluck('return_tracking')->filter()->first();
        }
    }
@endphp

<div class="item-status-return-column" data-item-id="{{ $itemId }}" style="display: flex; flex-direction: column; gap: 8px; min-width: 120px;">
    <!-- Item Status Button -->
    <button type="button" 
            class="item-status-btn fi-btn fi-btn-size-sm {{ $statusColor }}"
            onclick="openItemStatusModal({{ $itemId }}, {{ $item->order_id }})"
            style="font-size: 11px; padding: 4px 8px; text-align: center; cursor: pointer;">
        {{ $statusName }}
    </button>
    
    <!-- Return Entry Button -->
    @if($hasReturns)
        <button type="button"
                class="item-return-btn fi-btn fi-btn-size-sm fi-btn-color-warning"
                onclick="Livewire.dispatch('openItemReturnModal', { itemId: {{ $itemId }} })"
                style="font-size: 11px; padding: 4px 8px; text-align: center; cursor: pointer;"
                title="{{ $returnCount }} return(s)">
            {{ $returnBadgeText }}{{ $returnCount > 1 ? " ({$returnCount})" : '' }}
        </button>
    @else
        <button type="button"
                class="item-return-btn fi-btn fi-btn-size-sm"
                onclick="Livewire.dispatch('openItemReturnModal', { itemId: {{ $itemId }} })"
                style="font-size: 11px; padding: 4px 8px; text-align: center; cursor: pointer;">
            + Return Entry
        </button>
    @endif

    @if($returnTracking)
        <span style="font-size: 10px; color: #60a5fa; font-family: monospace; word-break: break-all;" title="Return tracking">
            Ret: {{ $returnTracking }}
        </span>
    @endif

    {{-- Core Charge Button - only for items that carry a core charge --}}
    @if($hasCoreCharge)
        @if($coreChargeCount > 0)
            <button type="button"
                    class="item-core-charge-btn fi-btn fi-btn-size-sm fi-btn-color-warning"
                    onclick="Livewire.dispatch('openCoreChargeModal', { itemId: {{ $itemId }} })"
                    style="font-size: 11px; padding: 4px 8px; text-align: center; cursor: pointer;"
                    title="{{ $coreChargeCount }} core charge entr{{ $coreChargeCount > 1 ? 'ies' : 'y' }}">
                {{ $coreChargeBadgeText }}{{ $coreChargeCount > 1 ? " ({$coreChargeCount})" : '' }}
            </button>
        @else
            <button type="button"
                    class="item-core-charge-btn fi-btn fi-btn-size-sm"
                    onclick="Livewire.dispatch('openCoreChargeModal', { itemId: {{ $itemId }} })"
                    style="font-size: 11px; padding: 4px 8px; text-align: center; cursor: pointer;">
                + Core Charge
            </button>
        @endif
    @endif
    
    {{-- Calculation Log Button - disabled until supplier_prices table is implemented
    @php
        $supplierPrices = \DB::table('supplier_prices')
            ->where('order_item_id', $itemId)
            ->exists();
    @endphp

    @if($supplierPrices)
        <button type="button"
                class="calc-log-btn fi-btn fi-btn-size-sm fi-btn-color-info"
                onclick="showCalculationLog({{ $itemId }})"
                style="font-size: 11px; padding: 4px 8px; text-align: center; cursor: pointer;">
            Show Calc Log
        </button>
    @endif
    --}}
</div>

<script>
// Only define these functions once
if (typeof window.itemStatusReturnInitialized === 'undefined') {
    window.itemStatusReturnInitialized = true;
    
    window.openItemStatusModal = function(itemId, orderId) {
        // This will open the existing status modal from ItemsRelationManager
        // Find and click the status badge to trigger the modal
        const statusBadge = document.querySelector(`[data-item-id="${itemId}"] .status .badge`);
        if (statusBadge) {
            statusBadge.click();
        } else {
            // Fallback: create a custom modal similar to item-actions
            createItemStatusModal(itemId, orderId);
        }
    }
    
    window.openItemReturnModal = function(itemId, orderId) {
        createItemReturnModal(itemId, orderId);
    }
    
    window.showCalculationLog = function(itemId) {
        // Open calculation log in a new window or modal
        window.open(`/items/calculation-log/${itemId}`, '_blank', 'width=800,height=600');
    }
    
    window.createItemStatusModal = function(itemId, orderId) {
        // Remove existing modal if any
        const existingModal = document.getElementById('item-status-modal');
        if (existingModal) {
            existingModal.remove();
        }
        
        const isDarkMode = document.documentElement.classList.contains('dark');
        
        // Create modal overlay
        const overlay = document.createElement('div');
        overlay.id = 'item-status-modal';
        overlay.style.cssText = 'position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 9999; display: flex; align-items: center; justify-content: center;';
        
        // Create modal content
        const modal = document.createElement('div');
        modal.style.cssText = `background: ${isDarkMode ? 'rgb(31, 41, 55)' : 'white'}; border-radius: 8px; padding: 20px; width: 500px; max-height: 80vh; 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)')};">Update Item Status</h2>
                <button onclick="document.getElementById('item-status-modal').remove()" style="color: ${isDarkMode ? 'rgb(156, 163, 175)' : 'rgb(107, 114, 128)'}; font-size: 24px; cursor: pointer; background: none; border: none;">&times;</button>
            </div>
            <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)'};">New Status:</label>
                    <select id="new-status" 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="">Loading statuses...</option>
                    </select>
                </div>
                <div style="margin-bottom: 16px;">
                    <label style="display: block; margin-bottom: 8px; color: ${isDarkMode ? 'rgb(209, 213, 219)' : 'rgb(55, 65, 81)'};">Comment (Optional):</label>
                    <textarea id="status-comment" rows="3" 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)'}; resize: vertical;"></textarea>
                </div>
                <div id="status-history" style="margin-top: 16px;"></div>
                <div style="display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px;">
                    <button onclick="document.getElementById('item-status-modal').remove()" style="padding: 8px 16px; background: rgb(107, 114, 128); color: white; border-radius: 6px; cursor: pointer; border: none;">Cancel</button>
                    <button onclick="saveItemStatus(${itemId}, ${orderId})" style="padding: 8px 16px; background: rgb(34, 197, 94); color: white; border-radius: 6px; cursor: pointer; border: none;">Save</button>
                </div>
            </div>
        `;
        
        modal.innerHTML = modalContent;
        overlay.appendChild(modal);
        document.body.appendChild(overlay);
        
        // Load statuses
        loadItemStatuses(itemId);
        loadStatusHistory(itemId);
        
        // Close modal on overlay click
        overlay.addEventListener('click', function(e) {
            if (e.target === overlay) {
                overlay.remove();
            }
        });
    }
    
    window.createItemReturnModal = function(itemId, orderId) {
        // Remove existing modal if any
        const existingModal = document.getElementById('item-return-modal');
        if (existingModal) {
            existingModal.remove();
        }
        
        const isDarkMode = document.documentElement.classList.contains('dark');
        
        // Create modal overlay
        const overlay = document.createElement('div');
        overlay.id = 'item-return-modal';
        overlay.style.cssText = 'position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 9999; display: flex; align-items: center; justify-content: center;';
        
        // Create modal content
        const modal = document.createElement('div');
        modal.style.cssText = `background: ${isDarkMode ? 'rgb(31, 41, 55)' : 'white'}; border-radius: 8px; padding: 20px; width: 500px; max-height: 80vh; 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)')};">Item Return Entry</h2>
                <button onclick="document.getElementById('item-return-modal').remove()" style="color: ${isDarkMode ? 'rgb(156, 163, 175)' : 'rgb(107, 114, 128)'}; font-size: 24px; cursor: pointer; background: none; border: none;">&times;</button>
            </div>
            <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)'};">Return Type:</label>
                    <select id="return-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="1">Defective</option>
                        <option value="2">Wrong part sent</option>
                        <option value="3">Refused</option>
                        <option value="4">Customer cancellation</option>
                        <option value="5">Overordered</option>
                        <option value="6">Other</option>
                        <option value="7">Partial Refund</option>
                    </select>
                </div>
                <div id="refund-amount-div" style="display: none; margin-bottom: 16px;">
                    <label style="display: block; margin-bottom: 8px; color: ${isDarkMode ? 'rgb(209, 213, 219)' : 'rgb(55, 65, 81)'};">Partial Refund Amount:</label>
                    <input type="number" id="refund-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 style="margin-bottom: 16px;">
                    <label style="display: block; margin-bottom: 8px; color: ${isDarkMode ? 'rgb(209, 213, 219)' : 'rgb(55, 65, 81)'};">Supplier:</label>
                    <select id="return-supplier" 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="">Loading suppliers...</option>
                    </select>
                </div>
                <div style="margin-bottom: 16px;">
                    <label style="display: block; margin-bottom: 8px; color: ${isDarkMode ? 'rgb(209, 213, 219)' : 'rgb(55, 65, 81)'};">Return Tracking #:</label>
                    <input type="text" id="return-tracking" placeholder="Return label tracking number" 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)'};">
                </div>
                <div style="margin-bottom: 16px;">
                    <label style="display: block; margin-bottom: 8px; color: ${isDarkMode ? 'rgb(209, 213, 219)' : 'rgb(55, 65, 81)'};">Comment:</label>
                    <textarea id="return-comment" rows="3" 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)'}; resize: vertical;"></textarea>
                </div>
                <div id="return-history" style="margin-top: 16px;"></div>
                <div style="display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px;">
                    <button onclick="document.getElementById('item-return-modal').remove()" style="padding: 8px 16px; background: rgb(107, 114, 128); color: white; border-radius: 6px; cursor: pointer; border: none;">Cancel</button>
                    <button onclick="saveItemReturn(${itemId}, ${orderId})" style="padding: 8px 16px; background: rgb(34, 197, 94); color: white; border-radius: 6px; cursor: pointer; border: none;">Create Return</button>
                </div>
            </div>
        `;
        
        modal.innerHTML = modalContent;
        overlay.appendChild(modal);
        document.body.appendChild(overlay);
        
        // Add event listener for return type change
        document.getElementById('return-type').addEventListener('change', function() {
            const refundDiv = document.getElementById('refund-amount-div');
            if (this.value === '7') { // Partial Refund
                refundDiv.style.display = 'block';
            } else {
                refundDiv.style.display = 'none';
            }
        });
        
        // Load suppliers
        loadSuppliers(itemId);
        loadReturnHistory(itemId);
        
        // Close modal on overlay click
        overlay.addEventListener('click', function(e) {
            if (e.target === overlay) {
                overlay.remove();
            }
        });
    }
    
    window.loadItemStatuses = async function(itemId) {
        try {
            const response = await fetch('/api/items/statuses');
            const data = await response.json();
            
            const select = document.getElementById('new-status');
            if (data.statuses) {
                let options = '<option value="">Select a status</option>';
                data.statuses.forEach(status => {
                    options += `<option value="${status.status_id}">${status.status}</option>`;
                });
                select.innerHTML = options;
            }
        } catch (error) {
            console.error('Error loading statuses:', error);
        }
    }
    
    window.loadStatusHistory = async function(itemId) {
        try {
            const response = await fetch(`/api/items/status-history/${itemId}`);
            const data = await response.json();
            
            const historyDiv = document.getElementById('status-history');
            if (data.history && data.history.length > 0) {
                let html = '<h4 style="margin-bottom: 8px;">Status History:</h4><div style="max-height: 150px; overflow-y: auto;">';
                data.history.forEach(entry => {
                    html += `<div style="padding: 4px; border-bottom: 1px solid #ddd; font-size: 12px;">
                        <strong>${entry.status}</strong> - ${entry.date} by ${entry.user || 'System'}
                        ${entry.comment ? '<br><em>' + entry.comment + '</em>' : ''}
                    </div>`;
                });
                html += '</div>';
                historyDiv.innerHTML = html;
            }
        } catch (error) {
            console.error('Error loading status history:', error);
        }
    }
    
    window.loadSuppliers = async function(itemId) {
        try {
            const response = await fetch('/api/suppliers');
            const data = await response.json();
            
            const select = document.getElementById('return-supplier');
            if (data.suppliers) {
                let options = '<option value="">Select a supplier</option>';
                data.suppliers.forEach(supplier => {
                    options += `<option value="${supplier.supplier_id}">${supplier.code} - ${supplier.supplier_name}</option>`;
                });
                select.innerHTML = options;
            }
        } catch (error) {
            console.error('Error loading suppliers:', error);
        }
    }
    
    window.loadReturnHistory = async function(itemId) {
        try {
            const response = await fetch(`/api/orders/items/returns/history/${itemId}`);
            const data = await response.json();

            const historyDiv = document.getElementById('return-history');
            if (data.history && data.history.length > 0) {
                let html = '<h4 style="margin-bottom: 8px;">Return History:</h4><div style="max-height: 200px; overflow-y: auto;">';
                data.history.forEach(entry => {
                    html += `<div style="padding: 6px; border-bottom: 1px solid rgba(128,128,128,0.2); font-size: 12px;">
                        <strong>${entry.type_label}</strong>
                        ${entry.supplier ? ' <span style="color:#888">(' + entry.supplier + ')</span>' : ''}
                        <span style="color:#888"> - ${entry.created_at}</span>
                        ${entry.user ? ' <span style="color:#888">by ' + entry.user + '</span>' : ''}
                        ${entry.return_tracking ? '<br><span style="color:#60a5fa;">Return #: ' + entry.return_tracking + '</span>' : ''}
                        ${entry.comment ? '<br><em>' + entry.comment + '</em>' : ''}
                        ${entry.amount ? '<br>Amount: $' + parseFloat(entry.amount).toFixed(2) : ''}
                    </div>`;
                });
                html += '</div>';
                historyDiv.innerHTML = html;
            }
        } catch (error) {
            console.error('Error loading return history:', error);
        }
    }
    
    window.saveItemStatus = async function(itemId, orderId) {
        const newStatus = document.getElementById('new-status').value;
        const comment = document.getElementById('status-comment').value;
        
        if (!newStatus) {
            alert('Please select a status');
            return;
        }
        
        try {
            const response = await fetch('/api/items/update-status', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
                },
                body: JSON.stringify({
                    item_id: itemId,
                    status_id: newStatus,
                    comment: comment
                })
            });
            
            if (response.ok) {
                location.reload();
            } else {
                alert('Failed to update status');
            }
        } catch (error) {
            console.error('Error updating status:', error);
            alert('Failed to update status');
        }
    }
    
    window.saveItemReturn = async function(itemId, orderId) {
        const returnType = document.getElementById('return-type').value;
        const supplierId = document.getElementById('return-supplier').value;
        const comment = document.getElementById('return-comment').value;
        const amount = document.getElementById('refund-amount').value;
        const returnTracking = document.getElementById('return-tracking').value;

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

        try {
            const response = await fetch('/api/orders/items/returns/create', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
                },
                body: JSON.stringify({
                    item: itemId,
                    type: returnType,
                    supplier_id: supplierId,
                    comment: comment,
                    amount: returnType === '7' ? amount : null,
                    return_tracking: returnTracking || null
                })
            });
            
            if (response.ok) {
                location.reload();
            } else {
                alert('Failed to create return');
            }
        } catch (error) {
            console.error('Error creating return:', error);
            alert('Failed to create return');
        }
    }
}
</script>