{% extends "base.html" %}
{% block title %}Inventory Twin{% endblock %}
{% block page_title %}Inventory Twin{% endblock %}
{% block content %}

<!-- Inventory Stats Cards -->
<div class="stats-grid mb-4">
    <div class="glass-card p-4 text-center">
        <div style="font-size: 32px; font-weight: 700; color: var(--accent-primary);">
            {{ total_db_items }}
        </div>
        <small style="color: var(--text-secondary);">Total SKUs</small>
    </div>
    <div class="glass-card p-4 text-center">
        <div style="font-size: 32px; font-weight: 700; color: #10B981;">
            {{ total_quantity }}
        </div>
        <small style="color: var(--text-secondary);">Total Units</small>
    </div>
    <div class="glass-card p-4 text-center">
        <div style="font-size: 32px; font-weight: 700; color: #EF4444;">
            {{ low_stock_count }}
        </div>
        <small style="color: var(--text-secondary);">Low Stock</small>
    </div>
    <div class="glass-card p-4 text-center">
        <div style="font-size: 32px; font-weight: 700; color: #8B5CF6;">
            {{ overstock_count }}
        </div>
        <small style="color: var(--text-secondary);">Overstock</small>
    </div>
    <div class="glass-card p-4 text-center">
        <div style="font-size: 32px; font-weight: 700; color: #F59E0B;">
            {% if total_db_items > 0 %}
                {{ total_stock_value | format_currency }}
            {% else %}
                {{ 0 | format_currency }}
            {% endif %}
        </div>
        <small style="color: var(--text-secondary);">Stock Value</small>
    </div>
</div>

<!-- Action Buttons -->
<div class="d-flex gap-2 mb-4 flex-wrap">
    <button class="btn-glass" data-bs-toggle="modal" data-bs-target="#addInventoryModal">
        <i class="fas fa-plus me-2"></i>Add Item
    </button>
    <button class="btn-glass" data-bs-toggle="modal" data-bs-target="#importCsvModal">
        <i class="fas fa-upload me-2"></i>Import CSV
    </button>
    <button class="btn-glass" style="background: linear-gradient(135deg, #10B981, #059669);" data-bs-toggle="modal" data-bs-target="#importExcelModal">
        <i class="fas fa-file-excel me-2"></i>Import Excel
    </button>
    <a href="{{ url_for('business_twin.download_inventory_csv_template') }}" class="btn btn-outline-glass">
        <i class="fas fa-download me-2"></i>CSV Template
    </a>
    <a href="{{ url_for('business_twin.download_inventory_excel_template') }}" class="btn btn-outline-glass">
        <i class="fas fa-file-excel me-2"></i>Excel Template
    </a>
    <a href="{{ url_for('business_twin.export_inventory_excel') }}" class="btn btn-outline-glass">
        <i class="fas fa-file-excel me-2"></i>Export Excel
    </a>
    <a href="{{ url_for('business_twin.export_inventory_pdf') }}" class="btn btn-outline-glass">
        <i class="fas fa-file-pdf me-2"></i>Export PDF
    </a>
    <button class="btn btn-outline-danger" style="border-color: #EF4444; color: #EF4444;" onclick="deleteAllInventory()">
        <i class="fas fa-trash-alt me-2"></i>Delete All Records
    </button>
</div>

<!-- Inventory Database Table -->
<div class="glass-card p-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h5 style="font-weight: 600;">Inventory Items</h5>
        <div>
            <span class="badge-glass badge-info me-2">{{ total_db_items }} SKUs</span>
            <span class="badge-glass badge-warning">{{ low_stock_count }} Low Stock</span>
        </div>
    </div>

    {% if total_db_items == 0 %}
    <div class="text-center py-5">
        <i class="fas fa-boxes" style="font-size: 48px; color: var(--text-secondary); opacity: 0.3;"></i>
        <p class="mt-3" style="color: var(--text-secondary);">No inventory items in database yet.</p>
        <div class="mt-3">
            <button class="btn-glass me-2" data-bs-toggle="modal" data-bs-target="#addInventoryModal">
                <i class="fas fa-plus me-2"></i>Add First Item
            </button>
            <button class="btn btn-outline-glass me-2" data-bs-toggle="modal" data-bs-target="#importCsvModal">
                <i class="fas fa-upload me-2"></i>Import from CSV
            </button>
            <button class="btn btn-outline-glass" style="border-color: #10B981; color: #10B981;" data-bs-toggle="modal" data-bs-target="#importExcelModal">
                <i class="fas fa-file-excel me-2"></i>Import from Excel
            </button>
        </div>
    </div>
    {% else %}
    <div class="table-responsive">
        <table class="table-glass">
            <thead>
                <tr>
                    <th>SKU</th>
                    <th>Name</th>
                    <th>Category</th>
                    <th>On Hand</th>
                    <th>Available</th>
                    <th>Reorder Pt</th>
                    <th>Unit Cost</th>
                    <th>Status</th>
                    <th>Value</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
            {% for item in items %}
            <tr>
                <td style="font-family: monospace; color: var(--accent-primary);">{{ item.sku }}</td>
                <td style="font-weight: 500;">{{ item.name }}</td>
                <td><span class="badge-glass badge-info">{{ item.category or 'General' }}</span></td>
                <td>{{ item.quantity_on_hand or 0 }}</td>
                <td>{{ item.quantity_available or 0 }}</td>
                <td>{{ item.reorder_point or 0 }}</td>
                <td>{{ item.unit_cost | format_currency }}</td>
                <td>
                    {% if item.is_low_stock() %}
                    <span class="badge-glass badge-danger">Low</span>
                    {% elif item.is_overstock() %}
                    <span class="badge-glass badge-warning">Over</span>
                    {% else %}
                    <span class="badge-glass badge-success">OK</span>
                    {% endif %}
                </td>
                <td>{{ item.stock_value() | format_currency }}</td>
                <td style="white-space: nowrap;">
                    <button class="btn btn-sm btn-outline-glass me-1" style="padding: 4px 8px;" onclick='openEditModal({{ item.to_dict() | tojson }})' title="Edit">
                        <i class="fas fa-pencil-alt"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-danger" style="border-color: #EF4444; color: #EF4444; padding: 4px 8px;" onclick="deleteInventory({{ item.id }}, {{ item.name | tojson }})" title="Delete">
                        <i class="fas fa-trash-alt"></i>
                    </button>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    {% endif %}
</div>

<!-- Add Inventory Modal -->
<div class="modal fade" id="addInventoryModal" tabindex="-1" aria-hidden="true">
    <div class="modal-backdrop-custom"></div>
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content" style="background: var(--card-bg); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border: 1px solid var(--border-color); border-radius: 16px; box-shadow: var(--shadow); color: var(--text-primary);">
            <div class="modal-header" style="border-bottom: 1px solid var(--border-color); padding: 20px 24px;">
                <h5 class="modal-title" style="font-weight: 600;"><i class="fas fa-plus me-2" style="color: var(--accent-primary);"></i>Add New Inventory Item</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" style="padding: 24px; max-height: 70vh; overflow-y: auto;">
                <form id="addInventoryForm">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label" style="color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">SKU *</label>
                            <input type="text" class="form-control-glass" name="sku" required placeholder="e.g. SKU-001">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" style="color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Item Name *</label>
                            <input type="text" class="form-control-glass" name="name" required>
                        </div>
                        <div class="col-md-12">
                            <label class="form-label" style="color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Description</label>
                            <textarea class="form-control-glass" name="description" rows="2"></textarea>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" style="color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Category</label>
                            <select class="form-control-glass" name="category">
                                <option value="General">General</option>
                                <option value="Electronics">Electronics</option>
                                <option value="Raw Materials">Raw Materials</option>
                                <option value="Office Supplies">Office Supplies</option>
                                <option value="Hardware">Hardware</option>
                                <option value="Software License">Software License</option>
                                <option value="Packaging">Packaging</option>
                                <option value="Components">Components</option>
                                <option value="Finished Goods">Finished Goods</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" style="color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Location</label>
                            <input type="text" class="form-control-glass" name="location" placeholder="e.g. Warehouse A, Shelf 3">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" style="color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Unit Cost ({{ currency_symbol }})</label>
                            <input type="number" class="form-control-glass" name="unit_cost" value="0" step="0.01">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" style="color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Selling Price ({{ currency_symbol }})</label>
                            <input type="number" class="form-control-glass" name="selling_price" value="0" step="0.01">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" style="color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Quantity On Hand</label>
                            <input type="number" class="form-control-glass" name="quantity_on_hand" value="0">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" style="color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Quantity Reserved</label>
                            <input type="number" class="form-control-glass" name="quantity_reserved" value="0">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" style="color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Reorder Point</label>
                            <input type="number" class="form-control-glass" name="reorder_point" value="0">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" style="color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Reorder Quantity</label>
                            <input type="number" class="form-control-glass" name="reorder_quantity" value="0">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" style="color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Max Stock</label>
                            <input type="number" class="form-control-glass" name="max_stock" value="0">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" style="color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Turnover Rate</label>
                            <input type="number" class="form-control-glass" name="turnover_rate" step="0.1">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" style="color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Days On Hand</label>
                            <input type="number" class="form-control-glass" name="days_on_hand" step="0.1">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer" style="border-top: 1px solid var(--border-color); padding: 16px 24px;">
                <button type="button" class="btn btn-outline-glass" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn-glass" onclick="submitInventory()">
                    <i class="fas fa-save me-2"></i>Save Item
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Edit Inventory Modal -->
<div class="modal fade" id="editInventoryModal" tabindex="-1" aria-hidden="true">
    <div class="modal-backdrop-custom"></div>
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content" style="background: var(--card-bg); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border: 1px solid var(--border-color); border-radius: 16px; box-shadow: var(--shadow); color: var(--text-primary);">
            <div class="modal-header" style="border-bottom: 1px solid var(--border-color); padding: 20px 24px;">
                <h5 class="modal-title" style="font-weight: 600;"><i class="fas fa-pencil-alt me-2" style="color: var(--accent-primary);"></i>Edit Inventory Item</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" style="padding: 24px; max-height: 70vh; overflow-y: auto;">
                <form id="editInventoryForm">
                    <input type="hidden" id="editItemId" name="item_id">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label" style="color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">SKU *</label>
                            <input type="text" class="form-control-glass" id="editSku" name="sku" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" style="color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Item Name *</label>
                            <input type="text" class="form-control-glass" id="editName" name="name" required>
                        </div>
                        <div class="col-md-12">
                            <label class="form-label" style="color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Description</label>
                            <textarea class="form-control-glass" id="editDescription" name="description" rows="2"></textarea>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" style="color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Category</label>
                            <select class="form-control-glass" id="editCategory" name="category">
                                <option value="General">General</option>
                                <option value="Electronics">Electronics</option>
                                <option value="Raw Materials">Raw Materials</option>
                                <option value="Office Supplies">Office Supplies</option>
                                <option value="Hardware">Hardware</option>
                                <option value="Software License">Software License</option>
                                <option value="Packaging">Packaging</option>
                                <option value="Components">Components</option>
                                <option value="Finished Goods">Finished Goods</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label" style="color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Location</label>
                            <input type="text" class="form-control-glass" id="editLocation" name="location" placeholder="e.g. Warehouse A, Shelf 3">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" style="color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Unit Cost ({{ currency_symbol }})</label>
                            <input type="number" class="form-control-glass" id="editUnitCost" name="unit_cost" step="0.01">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" style="color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Selling Price ({{ currency_symbol }})</label>
                            <input type="number" class="form-control-glass" id="editSellingPrice" name="selling_price" step="0.01">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" style="color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Quantity On Hand</label>
                            <input type="number" class="form-control-glass" id="editQuantityOnHand" name="quantity_on_hand">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" style="color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Quantity Reserved</label>
                            <input type="number" class="form-control-glass" id="editQuantityReserved" name="quantity_reserved">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" style="color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Reorder Point</label>
                            <input type="number" class="form-control-glass" id="editReorderPoint" name="reorder_point">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" style="color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Reorder Quantity</label>
                            <input type="number" class="form-control-glass" id="editReorderQuantity" name="reorder_quantity">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" style="color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Max Stock</label>
                            <input type="number" class="form-control-glass" id="editMaxStock" name="max_stock">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" style="color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Turnover Rate</label>
                            <input type="number" class="form-control-glass" id="editTurnoverRate" name="turnover_rate" step="0.1">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label" style="color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Days On Hand</label>
                            <input type="number" class="form-control-glass" id="editDaysOnHand" name="days_on_hand" step="0.1">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer" style="border-top: 1px solid var(--border-color); padding: 16px 24px;">
                <button type="button" class="btn btn-outline-glass" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn-glass" onclick="submitEditInventory()">
                    <i class="fas fa-save me-2"></i>Update Item
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Import CSV Modal -->
<div class="modal fade" id="importCsvModal" tabindex="-1" aria-hidden="true">
    <div class="modal-backdrop-custom"></div>
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="background: var(--card-bg); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border: 1px solid var(--border-color); border-radius: 16px; box-shadow: var(--shadow); color: var(--text-primary);">
            <div class="modal-header" style="border-bottom: 1px solid var(--border-color); padding: 20px 24px;">
                <h5 class="modal-title" style="font-weight: 600;"><i class="fas fa-file-csv me-2" style="color: #10B981;"></i>Import Inventory from CSV</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" style="padding: 24px;">
                <div class="alert alert-info mb-3" style="background: rgba(0,212,255,0.05); border: 1px solid var(--accent-primary); color: var(--text-primary); border-radius: 12px; padding: 16px;">
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>Required columns:</strong> sku, name<br>
                    <strong>Optional:</strong> description, category, location, unit_cost, selling_price, quantity_on_hand, quantity_reserved, reorder_point, reorder_quantity, max_stock, turnover_rate, days_on_hand<br>
                    <em>Existing SKUs will be updated; new SKUs will be created.</em><br>
                    <a href="{{ url_for('business_twin.download_inventory_csv_template') }}" style="color: var(--accent-primary);"><i class="fas fa-download me-1"></i>Download CSV template</a>
                </div>
                <form id="importCsvForm" enctype="multipart/form-data">
                    <div class="mb-3">
                        <label class="form-label" style="color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Select CSV File</label>
                        <input type="file" class="form-control-glass" name="csv_file" accept=".csv" required>
                    </div>
                </form>
                <div id="importResult" style="display: none;"></div>
            </div>
            <div class="modal-footer" style="border-top: 1px solid var(--border-color); padding: 16px 24px;">
                <button type="button" class="btn btn-outline-glass" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn-glass" onclick="submitCsvImport()">
                    <i class="fas fa-upload me-2"></i>Import
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Import Excel Modal -->
<div class="modal fade" id="importExcelModal" tabindex="-1" aria-hidden="true">
    <div class="modal-backdrop-custom"></div>
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="background: var(--card-bg); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border: 1px solid var(--border-color); border-radius: 16px; box-shadow: var(--shadow); color: var(--text-primary);">
            <div class="modal-header" style="border-bottom: 1px solid var(--border-color); padding: 20px 24px;">
                <h5 class="modal-title" style="font-weight: 600;"><i class="fas fa-file-excel me-2" style="color: #10B981;"></i>Import Inventory from Excel</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" style="padding: 24px;">
                <div class="alert alert-info mb-3" style="background: rgba(16,185,129,0.05); border: 1px solid #10B981; color: var(--text-primary); border-radius: 12px; padding: 16px;">
                    <i class="fas fa-info-circle me-2" style="color: #10B981;"></i>
                    <strong>Required columns:</strong> sku, name<br>
                    <strong>Optional:</strong> description, category, location, unit_cost, selling_price, quantity_on_hand, quantity_reserved, reorder_point, reorder_quantity, max_stock, turnover_rate, days_on_hand<br>
                    <strong>Supported:</strong> .xlsx and .xls files<br>
                    <em>Existing SKUs will be updated; new SKUs will be created.</em><br>
                    <a href="{{ url_for('business_twin.download_inventory_excel_template') }}" style="color: #10B981;"><i class="fas fa-download me-1"></i>Download Excel template</a>
                </div>
                <form id="importExcelForm" enctype="multipart/form-data">
                    <div class="mb-3">
                        <label class="form-label" style="color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Select Excel File (.xlsx)</label>
                        <input type="file" class="form-control-glass" name="excel_file" accept=".xlsx,.xls" required>
                    </div>
                </form>
                <div id="importExcelResult" style="display: none;"></div>
            </div>
            <div class="modal-footer" style="border-top: 1px solid var(--border-color); padding: 16px 24px;">
                <button type="button" class="btn btn-outline-glass" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn-glass" style="background: linear-gradient(135deg, #10B981, #059669);" onclick="submitExcelImport()">
                    <i class="fas fa-upload me-2"></i>Import Excel
                </button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
function submitInventory() {
    const form = document.getElementById('addInventoryForm');
    const formData = new FormData(form);

    fetch('{{ url_for("business_twin.add_inventory") }}', {
        method: 'POST',
        body: formData
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            showToast('Inventory item added successfully!', 'success');
            const modal = bootstrap.Modal.getInstance(document.getElementById('addInventoryModal'));
            modal.hide();
            setTimeout(() => window.location.reload(), 800);
        } else {
            showToast(data.error || 'Error adding item', 'error');
        }
    })
    .catch(err => {
        showToast('Network error: ' + err.message, 'error');
    });
}

function openEditModal(item) {
    document.getElementById('editItemId').value = item.id;
    document.getElementById('editSku').value = item.sku || '';
    document.getElementById('editName').value = item.name || '';
    document.getElementById('editDescription').value = item.description || '';
    document.getElementById('editCategory').value = item.category || 'General';
    document.getElementById('editLocation').value = item.location || '';
    document.getElementById('editUnitCost').value = item.unit_cost || 0;
    document.getElementById('editSellingPrice').value = item.selling_price || 0;
    document.getElementById('editQuantityOnHand').value = item.quantity_on_hand || 0;
    document.getElementById('editQuantityReserved').value = item.quantity_reserved || 0;
    document.getElementById('editReorderPoint').value = item.reorder_point || 0;
    document.getElementById('editReorderQuantity').value = item.reorder_quantity || 0;
    document.getElementById('editMaxStock').value = item.max_stock || 0;
    document.getElementById('editTurnoverRate').value = (item.turnover_rate !== null && item.turnover_rate !== undefined) ? item.turnover_rate : '';
    document.getElementById('editDaysOnHand').value = (item.days_on_hand !== null && item.days_on_hand !== undefined) ? item.days_on_hand : '';

    const modalEl = document.getElementById('editInventoryModal');
    const modal = bootstrap.Modal.getInstance(modalEl) || new bootstrap.Modal(modalEl);
    modal.show();
}

function submitEditInventory() {
    const form = document.getElementById('editInventoryForm');
    const formData = new FormData(form);
    const itemId = document.getElementById('editItemId').value;
    const url = '{{ url_for("business_twin.edit_inventory", item_id=0) }}'.replace(/\/0$/, '/' + itemId);

    fetch(url, {
        method: 'POST',
        body: formData
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            showToast('Item updated successfully!', 'success');
            const modalEl = document.getElementById('editInventoryModal');
            const modal = bootstrap.Modal.getInstance(modalEl);
            if (modal) modal.hide();
            setTimeout(() => window.location.reload(), 800);
        } else {
            showToast(data.error || 'Error updating item', 'error');
        }
    })
    .catch(err => {
        showToast('Network error: ' + err.message, 'error');
    });
}

function deleteInventory(itemId, itemName) {
    if (!confirm('Are you sure you want to delete "' + itemName + '"? This action cannot be undone.')) {
        return;
    }
    const url = '{{ url_for("business_twin.delete_inventory", item_id=0) }}'.replace(/\/0$/, '/' + itemId);
    fetch(url, {
        method: 'DELETE'
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            showToast(data.message, 'success');
            setTimeout(() => window.location.reload(), 800);
        } else {
            showToast(data.error || 'Error deleting item', 'error');
        }
    })
    .catch(err => {
        showToast('Network error: ' + err.message, 'error');
    });
}

function deleteAllInventory() {
    if (!confirm('Are you sure you want to delete ALL inventory items for your company? This action cannot be undone.')) {
        return;
    }
    fetch('{{ url_for("business_twin.delete_all_inventory") }}', {
        method: 'DELETE'
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            showToast(data.message, 'success');
            setTimeout(() => window.location.reload(), 800);
        } else {
            showToast(data.error || 'Error deleting items', 'error');
        }
    })
    .catch(err => {
        showToast('Network error: ' + err.message, 'error');
    });
}

function submitCsvImport() {
    const form = document.getElementById('importCsvForm');
    const formData = new FormData(form);

    fetch('{{ url_for("business_twin.import_inventory_csv") }}', {
        method: 'POST',
        body: formData
    })
    .then(r => r.json())
    .then(data => {
        const resultDiv = document.getElementById('importResult');
        if (data.success) {
            resultDiv.innerHTML = `
                <div class="alert alert-success mt-3" style="background: rgba(16,185,129,0.1); border: 1px solid #10B981; color: #10B981; border-radius: 12px; padding: 16px;">
                    <i class="fas fa-check-circle me-2"></i>${data.message}
                    ${data.errors && data.errors.length > 0 ? '<br><small>Errors: ' + data.errors.join(', ') + '</small>' : ''}
                </div>`;
            resultDiv.style.display = 'block';
            setTimeout(() => window.location.reload(), 1500);
        } else {
            resultDiv.innerHTML = `
                <div class="alert alert-danger mt-3" style="background: rgba(239,68,68,0.1); border: 1px solid #EF4444; color: #EF4444; border-radius: 12px; padding: 16px;">
                    <i class="fas fa-exclamation-circle me-2"></i>${data.error || 'Import failed'}
                </div>`;
            resultDiv.style.display = 'block';
        }
    })
    .catch(err => {
        showToast('Import error: ' + err.message, 'error');
    });
}

function submitExcelImport() {
    const form = document.getElementById('importExcelForm');
    const formData = new FormData(form);

    fetch('{{ url_for("business_twin.import_inventory_excel") }}', {
        method: 'POST',
        body: formData
    })
    .then(r => r.json())
    .then(data => {
        const resultDiv = document.getElementById('importExcelResult');
        if (data.success) {
            resultDiv.innerHTML = `
                <div class="alert alert-success mt-3" style="background: rgba(16,185,129,0.1); border: 1px solid #10B981; color: #10B981; border-radius: 12px; padding: 16px;">
                    <i class="fas fa-check-circle me-2"></i>${data.message}
                    ${data.errors && data.errors.length > 0 ? '<br><small>Errors: ' + data.errors.join(', ') + '</small>' : ''}
                </div>`;
            resultDiv.style.display = 'block';
            setTimeout(() => window.location.reload(), 1500);
        } else {
            resultDiv.innerHTML = `
                <div class="alert alert-danger mt-3" style="background: rgba(239,68,68,0.1); border: 1px solid #EF4444; color: #EF4444; border-radius: 12px; padding: 16px;">
                    <i class="fas fa-exclamation-circle me-2"></i>${data.error || 'Excel import failed'}
                </div>`;
            resultDiv.style.display = 'block';
        }
    })
    .catch(err => {
        showToast('Excel import error: ' + err.message, 'error');
    });
}

function showToast(message, type) {
    const toast = document.createElement('div');
    toast.style.cssText = `
        position: fixed; top: 20px; right: 20px; z-index: 9999;
        padding: 12px 24px; border-radius: 8px; font-weight: 500;
        background: ${type === 'success' ? 'rgba(16,185,129,0.9)' : 'rgba(239,68,68,0.9)'};
        color: white; backdrop-filter: blur(10px);
        animation: slideIn 0.3s ease;
    `;
    toast.textContent = message;
    document.body.appendChild(toast);
    setTimeout(() => toast.remove(), 3000);
}
</script>
<style>
@keyframes slideIn {
    from { transform: translateX(100px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.modal-backdrop-custom {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1040;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.modal.show .modal-backdrop-custom,
.modal.fade.show .modal-backdrop-custom {
    opacity: 1;
    pointer-events: auto;
}

.modal-dialog {
    z-index: 1050;
    position: relative;
}

.modal-backdrop {
    display: none !important;
}

.modal-body::-webkit-scrollbar {
    width: 6px;
}

.modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.modal-body::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
}

.form-label {
    margin-bottom: 6px;
    display: block;
}

.modal-content .form-control-glass {
    background: rgba(255,255,255,0.05);
}

.modal-content .form-control-glass:focus {
    background: rgba(255,255,255,0.08);
}
</style>
{% endblock %}