{% extends "base.html" %}
{% block content %}

<style>
.production-card {
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}
.production-card:hover {
    transform: translateY(-2px);
}
.step-header {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
    border-radius: 8px 8px 0 0;
}
.results-card {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
    border-radius: 10px;
}
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 250px;
    background: linear-gradient(180deg, #2c3e50, #34495e);
    color: white;
    z-index: 1000;
    overflow-y: auto;
}
.main-content {
    margin-left: 250px;
    padding: 20px;
}
</style>

<div class="sidebar">
    <div class="p-3 border-bottom border-secondary">
        <h4 class="mb-0">
            <i class="fas fa-bolt me-2"></i>⚡ Independent<br>
            <small style="font-size: 14px;">Production System</small>
        </h4>
    </div>
    
    <nav class="nav flex-column mt-3 px-3">
        <a class="nav-link text-light" href="/">
            <i class="fas fa-tachometer-alt me-2"></i>Dashboard
        </a>
        <a class="nav-link text-light" href="/jambos">
            <i class="fas fa-film me-2"></i>Jambo Rolls
        </a>
        <a class="nav-link text-light" href="/orders">
            <i class="fas fa-shopping-cart me-2"></i>Customer Orders
        </a>
        <a class="nav-link text-warning" href="/production">
            <i class="fas fa-industry me-2"></i>Production
        </a>
        <a class="nav-link text-light" href="/reports">
            <i class="fas fa-chart-bar me-2"></i>Reports
        </a>
        <a class="nav-link text-light" href="/settings">
            <i class="fas fa-cog me-2"></i>Settings
        </a>
    </nav>
</div>

<div class="main-content">
    <div class="container-fluid">
        <!-- Header -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center">
                    <h2 class="mb-0">
                        <i class="fas fa-bolt text-warning me-2"></i>
                        Independent Production System
                    </h2>
                    <div>
                        <span class="badge bg-success fs-6">Ready</span>
                    </div>
                </div>
                <p class="text-muted mb-0">Standalone production without order dependencies • Manual size entry • Flexible input</p>
            </div>
        </div>

        <!-- Production Steps -->
        <div class="row">
            <!-- Step 1: Select Jambo -->
            <div class="col-lg-4 mb-4">
                <div class="card production-card h-100">
                    <div class="card-header step-header">
                        <h6 class="mb-0">
                            <i class="fas fa-1 me-2"></i>Select Jambo Roll
                            <span id="step1Status" class="badge bg-light text-dark float-end">Select</span>
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label">Search Jambo:</label>
                            <input type="text" class="form-control" id="jamboSearch" 
                                   placeholder="Search by jambo no, color, party...">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Available Jambos:</label>
                            <select class="form-select" id="jambosList" size="8" style="font-size: 12px;">
                                {% for jambo in jambos %}
                                <option value='{{ jambo|tojson }}'>
                                    #{{ jambo.jambo_no }} - {{ jambo.size_mm }}mm - {{ jambo.colour }} - {{ jambo.micron }}MIC ({{ jambo.balance_yard }}y) - {{ jambo.party_name }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Step 2: Manual Product Entry -->
            <div class="col-lg-4 mb-4">
                <div class="card production-card h-100">
                    <div class="card-header step-header">
                        <h6 class="mb-0">
                            <i class="fas fa-2 me-2"></i>Product Specifications
                            <span id="step2Status" class="badge bg-light text-dark float-end">Waiting</span>
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label">Product Size *</label>
                            <input type="text" class="form-control" id="productSize" 
                                   placeholder="e.g., 69mm x 72 yard" 
                                   value="69mm x 72 yard">
                            <small class="text-muted">Format: Width(mm) x Length(yard)</small>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Color *</label>
                            <input type="text" class="form-control" id="productColor" 
                                   placeholder="e.g., TAN, CLEAR, WHITE" 
                                   value="TAN">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Micron *</label>
                            <input type="number" class="form-control" id="productMicron" 
                                   placeholder="e.g., 37" 
                                   value="37" min="1">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Brand/Type</label>
                            <input type="text" class="form-control" id="productBrand" 
                                   placeholder="e.g., SWIFT, Premium" 
                                   value="SWIFT">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Step 3: Production Input -->
            <div class="col-lg-4 mb-4">
                <div class="card production-card h-100">
                    <div class="card-header step-header">
                        <h6 class="mb-0">
                            <i class="fas fa-3 me-2"></i>Production Input
                            <span id="step3Status" class="badge bg-light text-dark float-end">Waiting</span>
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label">Shafts Required *</label>
                            <input type="number" class="form-control" id="shaftsInput" 
                                   placeholder="Enter number of shafts" 
                                   min="1" value="">
                            <small class="text-muted">How many shafts to cut?</small>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Pieces per Shaft</label>
                            <input type="number" class="form-control" id="piecesPerShaftInput" 
                                   placeholder="Auto-calculated" 
                                   min="1" readonly>
                            <small class="text-muted">Calculated based on jambo/item width</small>
                        </div>
                        <div class="text-center mt-3">
                            <button class="btn btn-warning w-100" onclick="calculateProduction()">
                                <i class="fas fa-calculator me-2"></i>Calculate Production
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Results Section -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="card production-card" id="resultsCard" style="display: none;">
                    <div class="card-header results-card">
                        <h5 class="mb-0">
                            <i class="fas fa-chart-line me-2"></i>Production Calculation Results
                            <span class="badge bg-light text-dark float-end" id="feasibilityStatus">Calculating...</span>
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8">
                                <pre id="calculationDetails" class="bg-light p-3 rounded" style="font-size: 12px; line-height: 1.4;"></pre>
                            </div>
                            <div class="col-md-4">
                                <div class="text-center">
                                    <button class="btn btn-success btn-lg w-100 mb-2" onclick="executeProduction()" id="executeBtn" disabled>
                                        <i class="fas fa-play me-2"></i>Start Production
                                    </button>
                                    <button class="btn btn-secondary w-100" onclick="resetForm()">
                                        <i class="fas fa-refresh me-2"></i>Reset
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Global variables
let selectedJambo = null;
let productionResults = { feasible: false };

// Initialize page
document.addEventListener('DOMContentLoaded', function() {
    setupEventListeners();
});

// Setup event listeners
function setupEventListeners() {
    // Jambo search
    document.getElementById('jamboSearch').addEventListener('input', function(e) {
        const searchText = e.target.value.toLowerCase();
        Array.from(document.getElementById('jambosList').options).forEach(option => {
            const text = option.text.toLowerCase();
            option.style.display = text.includes(searchText) ? '' : 'none';
        });
    });

    // Jambo selection
    document.getElementById('jambosList').addEventListener('change', function() {
        try {
            selectedJambo = JSON.parse(this.value);
            updateStep1Status('✅ Selected');
            updateStep2Status('✅ Ready');
            console.log('Selected jambo:', selectedJambo);
        } catch (e) {
            selectedJambo = null;
            updateStep1Status('⚠️ Invalid');
        }
    });

    // Product inputs
    ['productSize', 'productColor', 'productMicron', 'shaftsInput'].forEach(id => {
        document.getElementById(id).addEventListener('input', function() {
            updateStep3Status('⚠️ Recalculate');
            document.getElementById('resultsCard').style.display = 'none';
        });
    });
}

// Calculate production
function calculateProduction() {
    if (!selectedJambo) {
        alert('Please select a jambo first');
        return;
    }

    const productSize = document.getElementById('productSize').value.trim();
    const productColor = document.getElementById('productColor').value.trim();
    const productMicron = parseInt(document.getElementById('productMicron').value) || 37;
    const shafts = parseInt(document.getElementById('shaftsInput').value) || 0;
    const piecesPerShaft = parseInt(document.getElementById('piecesPerShaftInput').value) || 0;

    if (!productSize || !productColor || shafts <= 0) {
        alert('Please fill all required fields (Size, Color, Shafts)');
        return;
    }

    const data = {
        jambo: selectedJambo,
        manual_size: productSize,
        manual_colour: productColor,
        manual_micron: productMicron,
        manual_shafts: shafts,
        manual_pieces_per_shaft: piecesPerShaft
    };

    console.log('Calculating with data:', data);

    fetch('/api/production/independent/calculate', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        console.log('Calculation results:', data);
        if (data.success) {
            productionResults = data.results;
            displayResults(data.results);
            updateStep3Status('✅ Calculated');
        } else {
            alert('Calculation failed: ' + data.error);
        }
    })
    .catch(error => {
        console.error('Calculation error:', error);
        alert('Calculation failed: ' + error.message);
    });
}

// Display results
function displayResults(results) {
    document.getElementById('resultsCard').style.display = 'block';
    
    // Update feasibility status
    const status = results.feasible ? '✅ FEASIBLE' : '❌ NOT FEASIBLE';
    document.getElementById('feasibilityStatus').textContent = status;
    document.getElementById('feasibilityStatus').className = 
        `badge ${results.feasible ? 'bg-success' : 'bg-danger'} float-end`;

    // Update pieces per shaft display
    document.getElementById('piecesPerShaftInput').value = results.pieces_per_shaft;

    // Enable/disable execute button
    document.getElementById('executeBtn').disabled = !results.feasible;

    // Display detailed calculations
    const details = `🎯 INDEPENDENT PRODUCTION CALCULATION

📦 PRODUCT SPECIFICATIONS:
- Size: ${results.manual_size}
- Color: ${results.manual_colour}
- Micron: ${results.manual_micron} MIC
- Item Width: ${results.item_width}mm
- Item Length: ${results.item_length} yards

🎬 JAMBO SPECIFICATIONS:
- Jambo #${selectedJambo.jambo_no}
- Jambo Width: ${results.jambo_width}mm
- Available Balance: ${results.jambo_balance.toLocaleString()} yards

📊 CUTTING EFFICIENCY:
- Pieces per Shaft: ${results.pieces_per_shaft}
- Width Efficiency: ${results.efficiency.toFixed(1)}%

📏 MATERIAL USAGE:
- Shafts Required: ${results.shafts} (${results.shafts_source})
- Yards per Shaft: ${results.yards_per_shaft}
- Total Yards Needed: ${results.total_yards.toLocaleString()}

📦 PRODUCTION OUTPUT:
- Total Production: ${results.total_pieces.toLocaleString()} pieces
- Remaining Balance: ${results.remaining_after.toLocaleString()} yards

✅ STATUS: ${results.feasible ? 'READY FOR PRODUCTION!' : 'INSUFFICIENT JAMBO BALANCE!'}`;

    document.getElementById('calculationDetails').textContent = details;
}

// Execute production
function executeProduction() {
    if (!selectedJambo || !productionResults.feasible) {
        alert('Cannot start production. Please ensure calculations are complete and feasible.');
        return;
    }

    const confirmMsg = `🚀 START INDEPENDENT PRODUCTION?

Jambo: #${selectedJambo.jambo_no}
Product: ${productionResults.manual_size} - ${productionResults.manual_colour}
Shafts: ${productionResults.shafts}
Production: ${productionResults.total_pieces.toLocaleString()} pieces
Yards Used: ${productionResults.total_yards.toLocaleString()}

Continue with production?`;

    if (!confirm(confirmMsg)) return;

    const data = {
        jambo: selectedJambo,
        results: productionResults
    };

    fetch('/api/production/independent/execute', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(`✅ Independent production completed successfully!\n\nReference: ${data.details.reference}\nProduced: ${data.details.pieces} pieces`);
            window.location.href = '/production';
        } else {
            alert('❌ Production failed: ' + data.error);
        }
    })
    .catch(error => {
        console.error('Production execution error:', error);
        alert('❌ Production failed: ' + error.message);
    });
}

// Reset form
function resetForm() {
    selectedJambo = null;
    productionResults = { feasible: false };
    
    document.getElementById('jambosList').selectedIndex = -1;
    document.getElementById('shaftsInput').value = '';
    document.getElementById('piecesPerShaftInput').value = '';
    document.getElementById('resultsCard').style.display = 'none';
    
    updateStep1Status('Select');
    updateStep2Status('Ready');
    updateStep3Status('Waiting');
}

// Update status functions
function updateStep1Status(text) {
    document.getElementById('step1Status').textContent = text;
}

function updateStep2Status(text) {
    document.getElementById('step2Status').textContent = text;
}

function updateStep3Status(text) {
    document.getElementById('step3Status').textContent = text;
}
</script>

{% endblock %}