{% extends "base.html" %}
{% block content %}
<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="mb-0"><i class="fas fa-table"></i> Production Data</h2>
    </div>
    <!-- Roman Urdu: Real-time search input -->
    <div class="mb-3">
        <input type="text" id="prodSearchInput" class="form-control" placeholder="Search Production, Order, Customer, Date...">
    </div>
    <div class="card production-table">
        <div class="card-header bg-dark text-white">
            <h6 class="mb-0">
                <i class="fas fa-table me-2"></i>Current Production Orders
                <span class="badge bg-info ms-2" id="productionCount">{{ productions|length }}</span>
            </h6>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0" id="productionTable">
                    <thead>
                        <tr>
                            <th>Production ID</th>
                            <th>Order No</th>
                            <th>Customer</th>
                            <th>Product</th>
                            <th>Jambo</th>
                            <th>Total Shafts</th>
                            <th>Shaft Pcs</th>
                            <th>Total Pcs</th>
                            <th>Yards</th>
                            <th>Status</th>
                            <th>Date</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for prod in productions %}
                        <tr>
                            <td>{{ prod.production_id }}</td>
                            <td>{{ prod.order_no }}</td>
                            <td>{{ prod.customer }}</td>
                            <td>{{ prod.product }}</td>
                            <td>{{ prod.jambo }}</td>
                            <td>{{ prod.total_shafts }}</td>
                            <td>{{ prod.shaft_pcs }}</td>
                            <td>{{ prod.total_pcs }}</td>
                            <td>{{ prod.yards|round(2) }}</td>
                            <td>{{ prod.status }}</td>
                            <td>{{ prod.date }}</td>
                            <td>
                                <div class="btn-group" role="group">
                                    <button type="button" class="btn btn-sm btn-outline-primary" onclick="viewProductionDetails('{{ prod.production_id }}')" title="View Details">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-warning" onclick="editProduction('{{ prod.production_id }}')" title="Edit Production">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-danger" onclick="deleteProductionItem('{{ prod.production_id }}', '{{ prod.order_no|e }}', '{{ prod.product|e }}')" title="Delete Production">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script>
// Roman Urdu: Real-time search function
const searchInput = document.getElementById('prodSearchInput');
const table = document.getElementById('productionTable');
searchInput.addEventListener('input', function() {
    const filter = this.value.toLowerCase();
    const rows = table.querySelectorAll('tbody tr');
    rows.forEach(row => {
        const text = row.textContent.toLowerCase();
        row.style.display = text.includes(filter) ? '' : 'none';
    });
});

// Roman Urdu: View Production Details function
function viewProductionDetails(id) {
    if (!id) {
        alert('❌ Invalid production ID');
        return;
    }
    fetch(`/api/production/details/${id}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showProductionDetailsModal(data.production);
            } else {
                alert(`📋 Production Details for ID: ${id}\n\n${data.error || 'Details not available yet'}\n\nFull details view coming soon!`);
            }
        })
        .catch(error => {
            console.log('Details fetch error:', error);
            alert(`📋 Production Details for ID: ${id}\n\nQuick details view coming soon!\nFor now, this confirms the view button is working.`);
        });
}

// Roman Urdu: Full-featured Production Details Modal
function showProductionDetailsModal(production) {
    // Remove existing modal if present
    const existingModal = document.getElementById('productionDetailsModal');
    if (existingModal) {
        existingModal.remove();
    }
    // Create a detailed modal
    const modal = document.createElement('div');
    modal.className = 'modal fade';
    modal.id = 'productionDetailsModal';
    modal.setAttribute('tabindex', '-1');
    modal.setAttribute('aria-hidden', 'true');
    modal.innerHTML = `
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title">
                        <i class="fas fa-info-circle me-2"></i>Production Details - ID: ${production.id}
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6 class="text-primary"><i class="fas fa-clipboard-list me-2"></i>Order Information</h6>
                            <table class="table table-sm">
                                <tr><th>Order No:</th><td>${production.order_no || 'N/A'}</td></tr>
                                <tr><th>Customer:</th><td>${production.customer_name || 'N/A'}</td></tr>
                                <tr><th>Status:</th><td><span class="badge bg-info">${production.status || 'N/A'}</span></td></tr>
                                <tr><th>Production Date:</th><td>${production.production_date || 'N/A'}</td></tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <h6 class="text-warning"><i class="fas fa-box me-2"></i>Product Information</h6>
                            <table class="table table-sm">
                                <tr><th>Size:</th><td>${production.product_size || 'N/A'}</td></tr>
                                <tr><th>Colour:</th><td>${production.colour || 'N/A'}</td></tr>
                                <tr><th>Micron:</th><td>${production.micron || 'N/A'}</td></tr>
                                <tr><th>Brand:</th><td>${production.brand || 'N/A'}</td></tr>
                                <tr><th>Quantity:</th><td>${production.qty || 'N/A'}</td></tr>
                            </table>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-6">
                            <h6 class="text-danger"><i class="fas fa-film me-2"></i>Jambo Information</h6>
                            <table class="table table-sm">
                                <tr><th>Jambo No:</th><td>#${production.jambo_number || 'N/A'}</td></tr>
                                <tr><th>Party:</th><td>${production.party_name || 'N/A'}</td></tr>
                                <tr><th>Size:</th><td>${production.jambo_size_mm || 'N/A'}mm x ${production.jambo_size_m || 'N/A'}m</td></tr>
                                <tr><th>Weight:</th><td>${production.jambo_weight_kg || 'N/A'} kg</td></tr>
                                <tr><th>Balance:</th><td>${production.jambo_balance_yard || 'N/A'} yards</td></tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <h6 class="text-success"><i class="fas fa-chart-bar me-2"></i>Production Statistics</h6>
                            <table class="table table-sm">
                                <tr><th>Shafts Used:</th><td>${production.shafts_used || 0}</td></tr>
                                <tr><th>Pieces/Shaft:</th><td>${production.pieces_per_shaft || 0}</td></tr>
                                <tr><th>Total Pieces:</th><td>${production.produced_pieces || 0}</td></tr>
                                <tr><th>Total Yards:</th><td>${production.yards_used || 0}</td></tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning" onclick="editProduction(${production.id})">
                        <i class="fas fa-edit me-2"></i>Edit Production
                    </button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-2"></i>Close
                    </button>
                </div>
            </div>
        </div>
    `;
    document.body.appendChild(modal);
    const bsModal = new bootstrap.Modal(modal);
    bsModal.show();
    modal.addEventListener('hidden.bs.modal', function() {
        modal.remove();
    });
}

// Roman Urdu: Full-featured Edit Production Modal
function showEditProductionModal(production) {
    const existingModal = document.getElementById('editProductionModal');
    if (existingModal) {
        existingModal.remove();
    }
    const modal = document.createElement('div');
    modal.className = 'modal fade';
    modal.id = 'editProductionModal';
    modal.setAttribute('tabindex', '-1');
    modal.setAttribute('aria-hidden', 'true');
    modal.innerHTML = `
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-warning">
                    <h5 class="modal-title">
                        <i class="fas fa-edit me-2"></i>Edit Production #${production.id}
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="editProductionForm">
                        <div class="mb-3">
                            <label class="form-label">Order No</label>
                            <input type="text" class="form-control" value="${production.order_no}" readonly>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Customer</label>
                            <input type="text" class="form-control" value="${production.customer_name}" readonly>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Jambo No</label>
                            <input type="text" class="form-control" value="${production.jambo_no}" readonly>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">Shafts Used</label>
                                    <input type="number" class="form-control" id="editShafts" value="${production.shafts_used || 0}">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">Pieces Per Shaft</label>
                                    <input type="number" class="form-control" id="editPcsPerShaft" value="${production.pieces_per_shaft || 0}">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label">Produced Pieces</label>
                                    <input type="number" class="form-control" id="editPieces" value="${production.produced_pieces || 0}">
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Yards Used</label>
                            <input type="number" class="form-control" id="editYards" value="${production.yards_used}">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Status</label>
                            <select class="form-select" id="editStatus">
                                <option value="Pending" ${production.status === 'Pending' ? 'selected' : ''}>Pending</option>
                                <option value="In Progress" ${production.status === 'In Progress' ? 'selected' : ''}>In Progress</option>
                                <option value="Completed" ${production.status === 'Completed' ? 'selected' : ''}>Completed</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-warning" onclick="saveProductionChanges(${production.id})">
                        <i class="fas fa-save me-2"></i>Save Changes
                    </button>
                </div>
            </div>
        </div>
    `;
    document.body.appendChild(modal);
    const bsModal = new bootstrap.Modal(modal);
    bsModal.show();

    // Roman Urdu: Real-time auto-calculate produced pieces
    const shaftsInput = modal.querySelector('#editShafts');
    const pcsPerShaftInput = modal.querySelector('#editPcsPerShaft');
    const piecesInput = modal.querySelector('#editPieces');
    const yardsInput = modal.querySelector('#editYards');
    let manualOverride = false;

    // Roman Urdu: Product size se yards per shaft nikaal lo
    const productSize = production.product_size || production.product || ""; // e.g. "63mm x 72 Yard"
    let yardsPerShaft = 0;
    const sizeMatch = productSize.match(/x\s*(\d+)\s*Yard/i);
    if (sizeMatch) {
        yardsPerShaft = parseInt(sizeMatch[1]);
    }
    console.log("Product Size:", productSize, "Yards Per Shaft:", yardsPerShaft);

    function autoCalc() {
        if (!manualOverride) {
            const shafts = parseInt(shaftsInput.value) || 0;
            const pcsPerShaft = parseInt(pcsPerShaftInput.value) || 0;
            piecesInput.value = shafts * pcsPerShaft;
        }
        // Roman Urdu: Yards Used bhi auto-calculate karo
        const shafts = parseInt(shaftsInput.value) || 0;
        yardsInput.value = shafts * yardsPerShaft;
    }
    shaftsInput.addEventListener('input', autoCalc);
    pcsPerShaftInput.addEventListener('input', autoCalc);
    piecesInput.addEventListener('input', function() {
        manualOverride = true;
    });
    shaftsInput.addEventListener('input', function() { manualOverride = false; });
    pcsPerShaftInput.addEventListener('input', function() { manualOverride = false; });
}

// Roman Urdu: Edit Production function
function editProduction(id) {
    if (!id) {
        alert('❌ Invalid production ID');
        return;
    }
    fetch(`/api/production/details/${id}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showEditProductionModal(data.production);
            } else {
                alert('❌ Error: ' + data.error);
            }
        })
        .catch(error => {
            console.error('Error fetching production details:', error);
            alert('❌ Error fetching production details');
        });
}

function saveProductionChanges(id) {
    const shafts = document.getElementById('editShafts').value;
    const pcsPerShaft = document.getElementById('editPcsPerShaft').value;
    const pieces = document.getElementById('editPieces').value;
    const yards = document.getElementById('editYards').value;
    const status = document.getElementById('editStatus').value;
    fetch(`/api/production/update/${id}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            shafts_used: parseInt(shafts),
            pieces_per_shaft: parseInt(pcsPerShaft),
            produced_pieces: parseInt(pieces),
            yards_used: parseFloat(yards),
            status: status
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('✅ Production updated successfully!');
            bootstrap.Modal.getInstance(document.getElementById('editProductionModal')).hide();
            location.reload();
        } else {
            alert('❌ Error: ' + data.error);
        }
    })
    .catch(error => {
        console.error('Error updating production:', error);
        alert('❌ Error updating production');
    });
}

// Roman Urdu: Delete Production Item
function deleteProductionItem(id, orderNo, product) {
    if (!id) {
        alert('❌ Invalid production ID');
        return;
    }
    if (confirm(`🗑️ Delete Production?\n\nID: ${id}\nOrder: ${orderNo}\nProduct: ${product}\n\n⚠️ This action cannot be undone!`)) {
        fetch(`/api/production/delete/${id}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('✅ Production deleted successfully!');
                location.reload();
            } else {
                alert('❌ Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Delete error:', error);
            alert('❌ Error deleting production');
        });
    }
}
</script>
{% endblock %}