{% extends "base.html" %}

{% block title %}Set Orders on Boxes - Quality App v2{% endblock %}

{% block content %}
<style>
    .location-manager-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 15px;
    }

    .main-card {
        background: var(--bg-primary);
        border-radius: 8px;
        box-shadow: 0 2px 4px var(--card-shadow);
        overflow: hidden;
        color: var(--text-primary);
        transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    }

    /* Tab Navigation */
    .tab-navigation {
        display: flex;
        background: var(--bg-tertiary);
        border-bottom: 2px solid var(--border-color);
        transition: background-color 0.3s ease, border-color 0.3s ease;
        flex-wrap: wrap;
    }

    .tab-button {
        flex: 1;
        padding: 15px 10px;
        background: none;
        border: none;
        font-size: 14px;
        font-weight: 600;
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.3s;
        border-bottom: 3px solid transparent;
        min-width: 150px;
    }

    .tab-button.active {
        color: #0d6efd;
        border-bottom-color: #0d6efd;
        background: rgba(13, 110, 253, 0.08);
    }

    .tab-button:hover {
        background: var(--bg-tertiary);
        color: #0d6efd;
    }

    .tab-content {
        display: none;
        padding: 25px;
        background: var(--bg-primary);
        color: var(--text-primary);
    }

    .tab-content.active {
        display: block;
    }

    /* Form Sections */
    .form-section {
        margin-bottom: 25px;
    }

    .form-section h3 {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 15px;
        color: var(--text-primary);
        padding-bottom: 10px;
        border-bottom: 2px solid var(--border-color);
        transition: color 0.3s ease, border-color 0.3s ease;
    }

    .section-icon {
        margin-right: 8px;
    }

    .input-group {
        margin-bottom: 15px;
    }

    .input-group label {
        display: block;
        font-weight: 500;
        margin-bottom: 8px;
        color: var(--text-primary);
        font-size: 14px;
        transition: color 0.3s ease;
    }

    .input-group input,
    .input-group select {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid var(--input-border);
        border-radius: 4px;
        background-color: var(--input-bg);
        color: var(--text-primary);
        font-size: 14px;
        transition: all 0.3s ease;
    }

    .input-group input:focus,
    .input-group select:focus {
        outline: none;
        border-color: var(--input-focus-border);
        box-shadow: 0 0 0 3px var(--input-focus-shadow);
    }

    /* Buttons */
    .btn-group {
        display: flex;
        gap: 10px;
        margin-top: 20px;
    }

    .btn-primary {
        flex: 1;
        padding: 12px 20px;
        background: #0d6efd;
        color: white;
        border: none;
        border-radius: 4px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .btn-primary:hover {
        background: #0b5ed7;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
    }

    .btn-secondary {
        flex: 1;
        padding: 12px 20px;
        background: var(--bg-tertiary);
        color: var(--text-primary);
        border: 1px solid var(--border-color);
        border-radius: 4px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s;
    }

    .btn-secondary:hover {
        background: var(--bg-secondary);
    }

    .btn-success {
        background: #28a745;
    }

    .btn-success:hover {
        background: #218838;
    }

    .btn-danger {
        background: #dc3545;
    }

    .btn-danger:hover {
        background: #c82333;
    }

    .btn-small {
        padding: 6px 12px;
        font-size: 12px;
        flex: none;
    }

    /* Alert Messages */
    .alert {
        padding: 12px 16px;
        border-radius: 4px;
        margin-bottom: 15px;
        display: none;
        animation: slideIn 0.3s ease;
    }

    .alert.show {
        display: block;
    }

    .alert-success {
        background-color: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }

    .alert-error {
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }

    .alert-warning {
        background-color: #fff3cd;
        color: #856404;
        border: 1px solid #ffeeba;
    }

    .alert-info {
        background-color: #d1ecf1;
        color: #0c5460;
        border: 1px solid #bee5eb;
    }

    [data-theme="dark"] .alert-success {
        background-color: #1e4620;
        color: #a6e3a1;
        border-color: #2d5a2d;
    }

    [data-theme="dark"] .alert-error {
        background-color: #4a2c2c;
        color: #f8b4b8;
        border-color: #6d3c3c;
    }

    /* Info Box */
    .info-box {
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        border-radius: 4px;
        padding: 15px;
        margin-bottom: 15px;
        display: none;
        transition: all 0.3s ease;
    }

    .info-box.show {
        display: block;
    }

    .info-box h4 {
        margin: 0 0 10px 0;
        color: var(--text-primary);
        font-size: 14px;
        font-weight: 600;
    }

    .info-box p {
        margin: 5px 0;
        color: var(--text-secondary);
        font-size: 13px;
    }

    /* Lists and Tables */
    .orders-list {
        max-height: 400px;
        overflow-y: auto;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        margin-top: 10px;
        display: none;
    }

    .orders-list.show {
        display: block;
    }

    .order-item {
        padding: 12px;
        border-bottom: 1px solid var(--border-color);
        cursor: pointer;
        transition: all 0.2s;
        background: var(--bg-primary);
    }

    .order-item:hover {
        background: var(--bg-secondary);
    }

    .order-item.selected {
        background: rgba(13, 110, 253, 0.1);
        border-left: 3px solid #0d6efd;
    }

    .order-item-header {
        font-weight: 600;
        color: var(--text-primary);
        font-size: 14px;
        margin-bottom: 5px;
    }

    .order-item-details {
        font-size: 12px;
        color: var(--text-secondary);
        margin-top: 5px;
    }

    .order-status {
        display: inline-block;
        padding: 3px 8px;
        border-radius: 3px;
        font-size: 11px;
        font-weight: 600;
        margin-top: 5px;
    }

    .order-status.unassigned {
        background: #fff3cd;
        color: #856404;
    }

    .order-status.assigned {
        background: #d4edda;
        color: #155724;
    }

    /* Spinner */
    .spinner {
        display: inline-block;
        width: 16px;
        height: 16px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        border-top-color: white;
        animation: spin 0.8s linear infinite;
        margin-right: 8px;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    @keyframes slideIn {
        from { transform: translateY(-20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    /* Loading overlay */
    .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .tab-button {
            min-width: 120px;
            font-size: 12px;
            padding: 12px 8px;
        }

        .orders-list {
            max-height: 250px;
        }
    }

    /* Back link */
    .back-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #0d6efd;
        text-decoration: none;
        margin-bottom: 20px;
        transition: all 0.3s;
    }

    .back-link:hover {
        color: #0b5ed7;
        transform: translateX(-4px);
    }
</style>

<!-- Main Container -->
<div class="location-manager-container">
    <a href="{{ url_for('warehouse.warehouse_index') }}" class="back-link">
        <i class="fas fa-arrow-left"></i> Back to Warehouse
    </a>

    <div class="main-card">
        <!-- Tab Navigation -->
        <div class="tab-navigation">
            <button class="tab-button active" onclick="switchTab('tab-0')">
                <span class="section-icon">📦</span> Assign Order to Box
            </button>
            <button class="tab-button" onclick="switchTab('tab-1')">
                <span class="section-icon">🔍</span> Find Orders by Box
            </button>
            <button class="tab-button" onclick="switchTab('tab-2')">
                <span class="section-icon">🚚</span> Move Order to Box
            </button>
            <button class="tab-button" onclick="switchTab('tab-3')">
                <span class="section-icon">📋</span> View Unassigned Orders
            </button>
        </div>

        <!-- TAB 0: ASSIGN ORDER TO BOX -->
        <div class="tab-content active" id="tab-0">
            <div class="alert" id="alert-tab0"></div>

            <div class="form-section">
                <h3><span class="section-icon">🔍</span> Search Order</h3>
                
                <div class="input-group">
                    <label for="cp-code-input-tab0">CP Code or CP Full Code</label>
                    <input type="text" id="cp-code-input-tab0" placeholder="e.g., CP00000001 or CP00000001-0001" 
                           onkeypress="handleEnter(event, 'searchOrderTab0')">
                </div>

                <div class="btn-group">
                    <button type="button" class="btn-primary" onclick="searchOrderTab0()">
                        <span class="spinner" id="spinner-search-tab0" style="display: none;"></span>
                        <span id="btn-search-tab0-text">🔍 Search Order</span>
                    </button>
                </div>
            </div>

            <!-- Order Info Section -->
            <div class="info-box" id="order-info-tab0">
                <h4>Order Details</h4>
                <p><strong>CP Code:</strong> <span id="display-cp-code-tab0" class="cp-code-mono">-</span></p>
                <p><strong>Current Box:</strong> <span id="display-current-box-tab0">Unassigned</span></p>
                <p><strong>Quantity Approved:</strong> <span id="display-qty-tab0">-</span></p>
                <p><strong>Quality Code:</strong> <span id="display-quality-tab0">-</span></p>
            </div>

            <!-- Assign Box Section -->
            <div class="form-section" id="assign-section-tab0" style="display: none;">
                <h3><span class="section-icon">📦</span> Assign to Box</h3>

                <div class="input-group">
                    <label for="box-number-input-tab0">Scan or Enter Box Number</label>
                    <input type="text" id="box-number-input-tab0" placeholder="e.g., BOX00000001" 
                           onkeypress="handleEnter(event, 'assignOrderToBoxTab0')"
                           oninput="validateBoxNumberInput(this)">
                    <small style="color: var(--text-secondary); margin-top: 5px; display: block;">
                        Format: BOX followed by 8 digits (e.g., BOX00000001)
                    </small>
                </div>

                <div class="btn-group">
                    <button type="button" class="btn-primary btn-success" onclick="assignOrderToBoxTab0()">
                        <span class="spinner" id="spinner-assign-tab0" style="display: none;"></span>
                        <span id="btn-assign-tab0-text">✅ Assign Order to Box</span>
                    </button>
                    <button type="button" class="btn-secondary" onclick="clearTab0()">Clear</button>
                </div>
            </div>
        </div>

        <!-- TAB 1: FIND ORDERS BY BOX -->
        <div class="tab-content" id="tab-1">
            <div class="alert" id="alert-tab1"></div>

            <div class="form-section">
                <h3><span class="section-icon">🔍</span> Search Box</h3>

                <div class="input-group">
                    <label for="box-number-input-tab1">Box Number</label>
                    <input type="text" id="box-number-input-tab1" placeholder="e.g., BOX00000001" 
                           onkeypress="handleEnter(event, 'searchBoxTab1')">
                </div>

                <div class="btn-group">
                    <button type="button" class="btn-primary" onclick="searchBoxTab1()">
                        <span class="spinner" id="spinner-search-tab1" style="display: none;"></span>
                        <span id="btn-search-tab1-text">🔍 Search Box</span>
                    </button>
                </div>
            </div>

            <!-- Box Info Section -->
            <div class="info-box" id="box-info-tab1">
                <h4>Box Details</h4>
                <p><strong>Box Number:</strong> <span id="display-box-number-tab1">-</span></p>
                <p><strong>Status:</strong> <span id="display-box-status-tab1">-</span></p>
                <p><strong>Location:</strong> <span id="display-box-location-tab1">-</span></p>
                <p><strong>Orders Count:</strong> <span id="display-orders-count-tab1">0</span></p>
            </div>

            <!-- Orders List -->
            <div class="orders-list" id="orders-list-tab1">
                <div id="orders-container-tab1"></div>
            </div>
        </div>

        <!-- TAB 2: MOVE ORDER TO BOX -->
        <div class="tab-content" id="tab-2">
            <div class="alert" id="alert-tab2"></div>

            <div class="form-section">
                <h3><span class="section-icon">🔍</span> Search Order</h3>

                <div class="input-group">
                    <label for="cp-code-input-tab2">CP Code</label>
                    <input type="text" id="cp-code-input-tab2" placeholder="e.g., CP00000001" 
                           onkeypress="handleEnter(event, 'searchOrderTab2')">
                </div>

                <div class="btn-group">
                    <button type="button" class="btn-primary" onclick="searchOrderTab2()">
                        <span class="spinner" id="spinner-search-tab2" style="display: none;"></span>
                        <span id="btn-search-tab2-text">🔍 Search Order</span>
                    </button>
                </div>
            </div>

            <!-- Order Info -->
            <div class="info-box" id="order-info-tab2">
                <h4>Order Details</h4>
                <p><strong>CP Code:</strong> <span id="display-cp-code-tab2" class="cp-code-mono">-</span></p>
                <p><strong>Current Box:</strong> <span id="display-current-box-tab2">-</span></p>
                <p><strong>Status:</strong> <span id="display-order-status-tab2">-</span></p>
            </div>

            <!-- Move Section -->
            <div class="form-section" id="move-section-tab2" style="display: none;">
                <h3><span class="section-icon">🚚</span> Move to New Box</h3>

                <div class="input-group">
                    <label for="new-box-select-tab2">Select Destination Box</label>
                    <select id="new-box-select-tab2">
                        <option value="">-- Select a box --</option>
                    </select>
                </div>

                <div class="btn-group">
                    <button type="button" class="btn-primary btn-success" onclick="moveOrderToBoxTab2()">
                        <span class="spinner" id="spinner-move-tab2" style="display: none;"></span>
                        <span id="btn-move-tab2-text">🚚 Move Order</span>
                    </button>
                    <button type="button" class="btn-secondary" onclick="clearTab2()">Clear</button>
                </div>
            </div>
        </div>

        <!-- TAB 3: VIEW UNASSIGNED ORDERS -->
        <div class="tab-content" id="tab-3">
            <div class="alert" id="alert-tab3"></div>

            <div class="form-section">
                <h3><span class="section-icon">📋</span> Unassigned Orders</h3>
                <p style="color: var(--text-secondary); font-size: 13px; margin-bottom: 15px;">
                    Orders that haven't been assigned to any box yet. Click to select and assign to a box using Tab 0.
                </p>

                <div class="btn-group">
                    <button type="button" class="btn-primary" onclick="loadUnassignedOrders()">
                        <span class="spinner" id="spinner-unassigned" style="display: none;"></span>
                        <span id="btn-unassigned-text">📋 Load Unassigned Orders</span>
                    </button>
                </div>
            </div>

            <!-- Unassigned Orders List -->
            <div class="orders-list" id="unassigned-orders-list">
                <div id="unassigned-orders-container"></div>
            </div>
        </div>
    </div>
</div>

<script>
// ============================================================================
// SHARED UTILITIES
// ============================================================================

let currentOrderId_Tab0 = null;
let currentOrderId_Tab2 = null;
let currentBoxId_Tab1 = null;
let allBoxes = [];

function switchTab(tabId) {
    // Remove active from all tabs
    document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
    document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
    
    // Add active to selected tab
    event.target.closest('.tab-button').classList.add('active');
    document.getElementById(tabId).classList.add('active');
}

function showAlert(alertId, message, type = 'info') {
    const alert = document.getElementById(alertId);
    if (alert) {
        alert.textContent = message;
        alert.className = `alert alert-${type} show`;
        alert.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }
}

function hideAlert(alertId) {
    const alert = document.getElementById(alertId);
    if (alert) {
        alert.classList.remove('show');
    }
}

function showSpinner(spinnerId, textId, loadingText) {
    document.getElementById(spinnerId).style.display = 'inline-block';
    document.getElementById(textId).textContent = loadingText;
}

function hideSpinner(spinnerId, textId, originalText) {
    document.getElementById(spinnerId).style.display = 'none';
    document.getElementById(textId).textContent = originalText;
}

function handleEnter(event, functionName) {
    if (event.key === 'Enter') {
        event.preventDefault();
        window[functionName]();
    }
}

// Load all boxes for dropdowns
async function loadAllBoxes() {
    try {
        const response = await fetch('{{ url_for("warehouse.api_boxes_summary") }}');
        const data = await response.json();
        
        if (data.success && data.boxes) {
            allBoxes = data.boxes;
            
            // Update box dropdowns (only Tab 2 uses dropdown now)
            updateBoxDropdown('new-box-select-tab2');
        }
    } catch (error) {
        console.error('Error loading boxes:', error);
    }
}

function updateBoxDropdown(dropdownId) {
    const dropdown = document.getElementById(dropdownId);
    if (!dropdown) return;
    
    const currentValue = dropdown.value;
    
    // Clear and rebuild dropdown
    dropdown.innerHTML = '<option value="">-- Select a box --</option>';
    
    allBoxes.forEach(box => {
        const option = document.createElement('option');
        option.value = box.id;
        const locationInfo = box.location_code ? ` (${box.location_code})` : '';
        const orderInfo = box.order_count > 0 ? ` [${box.order_count} orders]` : '';
        option.textContent = `${box.box_number}${locationInfo}${orderInfo}`;
        dropdown.appendChild(option);
    });
    
    dropdown.value = currentValue;
}

// ============================================================================
// TAB 0: ASSIGN ORDER TO BOX
// ============================================================================

async function searchOrderTab0() {
    const cpCode = document.getElementById('cp-code-input-tab0').value.trim();
    
    if (!cpCode) {
        showAlert('alert-tab0', 'Please enter a CP code', 'error');
        return;
    }
    
    hideAlert('alert-tab0');
    showSpinner('spinner-search-tab0', 'btn-search-tab0-text', 'Searching...');
    
    try {
        const response = await fetch('{{ url_for("warehouse.api_search_orders") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ cp_code: cpCode })
        });
        
        const data = await response.json();
        
        if (data.success && data.orders && data.orders.length > 0) {
            const order = data.orders[0];
            currentOrderId_Tab0 = order.id;
            
            document.getElementById('display-cp-code-tab0').textContent = order.CP_full_code;
            document.getElementById('display-current-box-tab0').textContent = order.box_id ? 'Assigned' : 'Unassigned';
            document.getElementById('display-qty-tab0').textContent = order.approved_quantity || 0;
            document.getElementById('display-quality-tab0').textContent = order.quality_code || '-';
            
            document.getElementById('order-info-tab0').classList.add('show');
            document.getElementById('assign-section-tab0').style.display = 'block';
            showAlert('alert-tab0', 'Order found. Select a box and click Assign.', 'info');
        } else {
            document.getElementById('order-info-tab0').classList.remove('show');
            document.getElementById('assign-section-tab0').style.display = 'none';
            showAlert('alert-tab0', 'Order not found', 'error');
        }
    } catch (error) {
        console.error('Error:', error);
        showAlert('alert-tab0', 'An error occurred', 'error');
    } finally {
        hideSpinner('spinner-search-tab0', 'btn-search-tab0-text', '🔍 Search Order');
    }
}

let isAssigning_Tab0 = false;

async function assignOrderToBoxTab0() {
    console.log('assignOrderToBoxTab0 called');
    
    // Prevent multiple rapid submissions
    if (isAssigning_Tab0) {
        console.log('Assignment already in progress, ignoring duplicate call');
        return;
    }
    
    const boxNumber = document.getElementById('box-number-input-tab0').value.trim().toUpperCase();
    console.log('Box number:', boxNumber);
    console.log('Current order ID:', currentOrderId_Tab0);
    
    if (!currentOrderId_Tab0) {
        showAlert('alert-tab0', 'Please search for an order first', 'error');
        return;
    }
    
    if (!boxNumber) {
        showAlert('alert-tab0', 'Please scan or enter a box number', 'error');
        return;
    }
    
    // Validate format
    const boxPattern = /^BOX\d{8}$/;
    if (!boxPattern.test(boxNumber)) {
        showAlert('alert-tab0', 'Invalid box number format. Must be BOX followed by 8 digits (e.g., BOX00000001)', 'error');
        return;
    }
    
    // Find the box in our list
    console.log('Available boxes:', allBoxes);
    const box = allBoxes.find(b => b.box_number.toUpperCase() === boxNumber);
    console.log('Found box:', box);
    
    if (!box) {
        showAlert('alert-tab0', `Box "${boxNumber}" not found in the system`, 'error');
        return;
    }
    
    isAssigning_Tab0 = true;
    const assignButton = document.querySelector('button[onclick="assignOrderToBoxTab0()"]');
    if (assignButton) assignButton.disabled = true;
    
    hideAlert('alert-tab0');
    showSpinner('spinner-assign-tab0', 'btn-assign-tab0-text', 'Assigning...');
    
    try {
        const response = await fetch('{{ url_for("warehouse.api_assign_order_to_box") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ order_id: currentOrderId_Tab0, box_id: box.id })
        });
        
        const data = await response.json();
        console.log('Response:', data);
        
        if (data.success) {
            showAlert('alert-tab0', data.message + ' - Page will refresh in 2 seconds...', 'success');
            clearTab0();
            loadAllBoxes();
            // Refresh page after 2 seconds to show updated data
            setTimeout(() => {
                location.reload();
            }, 2000);
        } else {
            showAlert('alert-tab0', data.message || 'Error assigning order', 'error');
            isAssigning_Tab0 = false;
            if (assignButton) assignButton.disabled = false;
        }
    } catch (error) {
        console.error('Error:', error);
        showAlert('alert-tab0', 'An error occurred: ' + error.message, 'error');
        isAssigning_Tab0 = false;
        if (assignButton) assignButton.disabled = false;
    } finally {
        hideSpinner('spinner-assign-tab0', 'btn-assign-tab0-text', '✅ Assign Order to Box');
    }
}

function clearTab0() {
    document.getElementById('cp-code-input-tab0').value = '';
    document.getElementById('box-number-input-tab0').value = '';
    document.getElementById('order-info-tab0').classList.remove('show');
    document.getElementById('assign-section-tab0').style.display = 'none';
    hideAlert('alert-tab0');
    currentOrderId_Tab0 = null;
}

function validateBoxNumberInput(input) {
    const value = input.value.toUpperCase();
    input.value = value;
    
    const boxPattern = /^BOX\d{0,8}$/;
    
    if (value.length > 0 && !boxPattern.test(value)) {
        input.style.borderColor = '#dc3545';
        input.style.boxShadow = '0 0 0 3px rgba(220, 53, 69, 0.1)';
    } else if (value.length === 11 && /^BOX\d{8}$/.test(value)) {
        input.style.borderColor = '#28a745';
        input.style.boxShadow = '0 0 0 3px rgba(40, 167, 69, 0.1)';
    } else {
        input.style.borderColor = 'var(--input-border)';
        input.style.boxShadow = 'none';
    }
}

// ============================================================================
// TAB 1: FIND ORDERS BY BOX
// ============================================================================

async function searchBoxTab1() {
    const boxNumber = document.getElementById('box-number-input-tab1').value.trim();
    
    if (!boxNumber) {
        showAlert('alert-tab1', 'Please enter a box number', 'error');
        return;
    }
    
    // Find box from loaded boxes
    const box = allBoxes.find(b => b.box_number.toUpperCase() === boxNumber.toUpperCase());
    
    if (!box) {
        showAlert('alert-tab1', 'Box not found', 'error');
        return;
    }
    
    hideAlert('alert-tab1');
    showSpinner('spinner-search-tab1', 'btn-search-tab1-text', 'Loading...');
    
    try {
        const response = await fetch('{{ url_for("warehouse.api_orders_by_box") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ box_id: box.id })
        });
        
        const data = await response.json();
        
        if (data.success) {
            currentBoxId_Tab1 = box.id;
            
            document.getElementById('display-box-number-tab1').textContent = data.box.box_number;
            document.getElementById('display-box-status-tab1').textContent = data.box.status || '-';
            document.getElementById('display-box-location-tab1').textContent = data.box.location?.location_code || 'No Location';
            document.getElementById('display-orders-count-tab1').textContent = data.orders.length;
            
            document.getElementById('box-info-tab1').classList.add('show');
            
            if (data.orders.length > 0) {
                displayOrdersTab1(data.orders);
                document.getElementById('orders-list-tab1').classList.add('show');
                showAlert('alert-tab1', `Found ${data.orders.length} order(s) in this box`, 'info');
            } else {
                document.getElementById('orders-list-tab1').classList.remove('show');
                showAlert('alert-tab1', 'This box has no orders', 'warning');
            }
        } else {
            showAlert('alert-tab1', data.error || 'Error loading orders', 'error');
        }
    } catch (error) {
        console.error('Error:', error);
        showAlert('alert-tab1', 'An error occurred', 'error');
    } finally {
        hideSpinner('spinner-search-tab1', 'btn-search-tab1-text', '🔍 Search Box');
    }
}

function displayOrdersTab1(orders) {
    const container = document.getElementById('orders-container-tab1');
    container.innerHTML = '';
    
    orders.forEach(order => {
        const div = document.createElement('div');
        div.className = 'order-item';
        div.innerHTML = `
            <div class="order-item-header">${order.CP_full_code}</div>
            <div class="order-item-details">
                Operator: ${order.operator_code} | Quality: ${order.quality_code} | 
                Approved: ${order.approved_quantity}
            </div>
        `;
        container.appendChild(div);
    });
}

// ============================================================================
// TAB 2: MOVE ORDER TO BOX
// ============================================================================

async function searchOrderTab2() {
    const cpCode = document.getElementById('cp-code-input-tab2').value.trim();
    
    if (!cpCode) {
        showAlert('alert-tab2', 'Please enter a CP code', 'error');
        return;
    }
    
    hideAlert('alert-tab2');
    showSpinner('spinner-search-tab2', 'btn-search-tab2-text', 'Searching...');
    
    try {
        const response = await fetch('{{ url_for("warehouse.api_search_orders") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ cp_code: cpCode })
        });
        
        const data = await response.json();
        
        if (data.success && data.orders && data.orders.length > 0) {
            const order = data.orders[0];
            currentOrderId_Tab2 = order.id;
            
            document.getElementById('display-cp-code-tab2').textContent = order.CP_full_code;
            document.getElementById('display-current-box-tab2').textContent = order.box_id ? 'Assigned' : 'Unassigned';
            document.getElementById('display-order-status-tab2').textContent = order.quality_code || '-';
            
            document.getElementById('order-info-tab2').classList.add('show');
            
            if (order.box_id) {
                document.getElementById('move-section-tab2').style.display = 'block';
                showAlert('alert-tab2', 'Order found. Select destination box and move.', 'info');
            } else {
                document.getElementById('move-section-tab2').style.display = 'none';
                showAlert('alert-tab2', 'This order is not yet assigned to any box. Use Tab 0 to assign it.', 'warning');
            }
        } else {
            document.getElementById('order-info-tab2').classList.remove('show');
            document.getElementById('move-section-tab2').style.display = 'none';
            showAlert('alert-tab2', 'Order not found', 'error');
        }
    } catch (error) {
        console.error('Error:', error);
        showAlert('alert-tab2', 'An error occurred', 'error');
    } finally {
        hideSpinner('spinner-search-tab2', 'btn-search-tab2-text', '🔍 Search Order');
    }
}

async function moveOrderToBoxTab2() {
    const newBoxId = document.getElementById('new-box-select-tab2').value;
    
    if (!currentOrderId_Tab2) {
        showAlert('alert-tab2', 'Please search for an order first', 'error');
        return;
    }
    
    if (!newBoxId) {
        showAlert('alert-tab2', 'Please select a destination box', 'error');
        return;
    }
    
    hideAlert('alert-tab2');
    showSpinner('spinner-move-tab2', 'btn-move-tab2-text', 'Moving...');
    
    try {
        const response = await fetch('{{ url_for("warehouse.api_move_order_to_box") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ order_id: currentOrderId_Tab2, new_box_id: newBoxId })
        });
        
        const data = await response.json();
        
        if (data.success) {
            showAlert('alert-tab2', data.message, 'success');
            setTimeout(() => clearTab2(), 1500);
            loadAllBoxes();
        } else {
            showAlert('alert-tab2', data.message || 'Error moving order', 'error');
        }
    } catch (error) {
        console.error('Error:', error);
        showAlert('alert-tab2', 'An error occurred', 'error');
    } finally {
        hideSpinner('spinner-move-tab2', 'btn-move-tab2-text', '🚚 Move Order');
    }
}

function clearTab2() {
    document.getElementById('cp-code-input-tab2').value = '';
    document.getElementById('new-box-select-tab2').value = '';
    document.getElementById('order-info-tab2').classList.remove('show');
    document.getElementById('move-section-tab2').style.display = 'none';
    hideAlert('alert-tab2');
    currentOrderId_Tab2 = null;
}

// ============================================================================
// TAB 3: VIEW UNASSIGNED ORDERS
// ============================================================================

async function loadUnassignedOrders() {
    hideAlert('alert-tab3');
    showSpinner('spinner-unassigned', 'btn-unassigned-text', 'Loading...');
    
    try {
        const response = await fetch('{{ url_for("warehouse.api_unassigned_orders") }}?limit=500');
        const data = await response.json();
        
        if (data.success && data.orders) {
            displayUnassignedOrders(data.orders);
            document.getElementById('unassigned-orders-list').classList.add('show');
            showAlert('alert-tab3', `Found ${data.orders.length} unassigned order(s)`, 'info');
        } else {
            showAlert('alert-tab3', 'No unassigned orders found', 'warning');
        }
    } catch (error) {
        console.error('Error:', error);
        showAlert('alert-tab3', 'An error occurred', 'error');
    } finally {
        hideSpinner('spinner-unassigned', 'btn-unassigned-text', '📋 Load Unassigned Orders');
    }
}

function displayUnassignedOrders(orders) {
    const container = document.getElementById('unassigned-orders-container');
    container.innerHTML = '';
    
    orders.forEach(order => {
        const div = document.createElement('div');
        div.className = 'order-item';
        div.innerHTML = `
            <div class="order-item-header">${order.CP_full_code}</div>
            <div class="order-item-details">
                Operator: ${order.operator_code} | Quality: ${order.quality_code} | 
                Approved: ${order.approved_quantity} | Date: ${order.date}
            </div>
            <span class="order-status unassigned">UNASSIGNED</span>
        `;
        container.appendChild(div);
    });
}

// ============================================================================
// INITIALIZATION
// ============================================================================

document.addEventListener('DOMContentLoaded', function() {
    loadAllBoxes();
});
</script>
{% endblock %}