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

<!-- Customer 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);">
            {% if total_db_customers > 0 %}{{ total_db_customers }}{% else %}{{ estimated_total }}{% endif %}
        </div>
        <small style="color: var(--text-secondary);">Total Customers</small>
    </div>
    <div class="glass-card p-4 text-center">
        <div style="font-size: 32px; font-weight: 700; color: #10B981;">
            {% if total_db_customers > 0 %}
                {{ customers|selectattr("status", "equalto", "active")|list|length }}
            {% else %}
                {{ (estimated_total * 0.85)|int }}
            {% endif %}
        </div>
        <small style="color: var(--text-secondary);">Active Customers</small>
    </div>
    <div class="glass-card p-4 text-center">
        <div style="font-size: 32px; font-weight: 700; color: #EF4444;">
            {% if total_db_customers > 0 %}
                {{ customers|selectattr("is_churned")|list|length }}
            {% else %}
                {{ (estimated_total * 0.05)|int }}
            {% endif %}
        </div>
        <small style="color: var(--text-secondary);">Churned</small>
    </div>
    <div class="glass-card p-4 text-center">
        <div style="font-size: 32px; font-weight: 700; color: #F59E0B;">
            {% if total_db_customers > 0 %}
                {% set total_ltv = customers|map(attribute='lifetime_value')|sum %}
                {{ (total_ltv / total_db_customers) | format_currency }}
            {% else %}
                {{ 12500 | format_currency }}
            {% endif %}
        </div>
        <small style="color: var(--text-secondary);">Avg LTV</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="#addCustomerModal">
        <i class="fas fa-plus me-2"></i>Add Customer
    </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_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_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_customers_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_customers_pdf') }}" class="btn btn-outline-glass">
        <i class="fas fa-file-pdf me-2"></i>Export PDF
    </a>
    {% if total_db_customers > 0 %}
    <button class="btn-glass" style="background: linear-gradient(135deg, #EF4444, #DC2626);" onclick="deleteAllCustomers()">
        <i class="fas fa-trash-alt me-2"></i>Delete All Records
    </button>
    {% endif %}
</div>

<!-- Customer 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;">Customer Database</h5>
        <span class="badge-glass badge-info">
            {% if total_db_customers > 0 %}{{ total_db_customers }}{% else %}{{ estimated_total }} (estimated){% endif %} customers
        </span>
    </div>
    
    {% if total_db_customers == 0 %}
    <div class="text-center py-5">
        <i class="fas fa-users" style="font-size: 48px; color: var(--text-secondary); opacity: 0.3;"></i>
        <p class="mt-3" style="color: var(--text-secondary);">No customer records in database yet.</p>
        <p style="color: var(--text-secondary);">Your company has approximately <strong>{{ estimated_total }}</strong> customers based on company size.</p>
        <div class="mt-3">
            <button class="btn-glass me-2" data-bs-toggle="modal" data-bs-target="#addCustomerModal">
                <i class="fas fa-plus me-2"></i>Add First Customer
            </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>Customer Code</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Segment</th>
                    <th>LTV</th>
                    <th>Total Spent</th>
                    <th>Orders</th>
                    <th>Satisfaction</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
            {% for c in customers %}
            <tr>
                <td><code style="color: var(--accent-primary);">{{ c.customer_code or '-' }}</code></td>
                <td style="font-weight: 500;">{{ c.full_name() or '-' }}</td>
                <td><small>{{ c.email or '-' }}</small></td>
                <td><span class="badge-glass badge-info">{{ c.segment or 'General' }}</span></td>
                <td>{{ c.lifetime_value | format_currency }}</td>
                <td>{{ c.total_spent | format_currency }}</td>
                <td>{{ c.total_orders or 0 }}</td>
                <td>
                    {% if c.satisfaction_score %}
                    <span class="badge-glass {% if c.satisfaction_score >= 4 %}badge-success{% elif c.satisfaction_score >= 3 %}badge-warning{% else %}badge-danger{% endif %}">
                        {{ "%.1f"|format(c.satisfaction_score) }}
                    </span>
                    {% else %}-{% endif %}
                </td>
                <td>
                    <span class="badge-glass {% if c.status == 'active' %}badge-success{% elif c.status == 'inactive' %}badge-warning{% else %}badge-danger{% endif %}">
                        {{ c.status|title }}
                    </span>
                </td>
                <td style="white-space: nowrap;">
                    <button class="btn-action btn-edit" onclick="openEditModal({{ c.id }})" title="Edit Customer">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button class="btn-action btn-delete" onclick="deleteCustomer({{ c.id }})" title="Delete Customer">
                        <i class="fas fa-trash-alt"></i>
                    </button>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    {% endif %}
</div>

<!-- Add Customer Modal -->
<div class="modal fade" id="addCustomerModal" 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-user-plus me-2" style="color: var(--accent-primary);"></i>Add New Customer</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="addCustomerForm">
                    <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;">First Name *</label>
                            <input type="text" class="form-control-glass" name="first_name" 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;">Last Name *</label>
                            <input type="text" class="form-control-glass" name="last_name" 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;">Company Name</label>
                            <input type="text" class="form-control-glass" name="company_name">
                        </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;">Email *</label>
                            <input type="email" class="form-control-glass" name="email" 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;">Phone</label>
                            <input type="text" class="form-control-glass" name="phone">
                        </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;">Customer Code</label>
                            <input type="text" class="form-control-glass" name="customer_code" placeholder="Auto-generated if empty">
                        </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;">Address</label>
                            <textarea class="form-control-glass" name="address" 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;">City</label>
                            <input type="text" class="form-control-glass" name="city">
                        </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;">Country</label>
                            <input type="text" class="form-control-glass" name="country">
                        </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;">Segment</label>
                            <select class="form-control-glass" name="segment">
                                <option value="General">General</option>
                                <option value="Enterprise">Enterprise</option>
                                <option value="SMB">SMB</option>
                                <option value="Startup">Startup</option>
                                <option value="Government">Government</option>
                                <option value="Education">Education</option>
                                <option value="Healthcare">Healthcare</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;">Status</label>
                            <select class="form-control-glass" name="status">
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                                <option value="churned">Churned</option>
                            </select>
                        </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;">Lifetime Value ({{ currency_symbol }})</label>
                            <input type="number" class="form-control-glass" name="lifetime_value" 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;">Acquisition Cost ({{ currency_symbol }})</label>
                            <input type="number" class="form-control-glass" name="acquisition_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;">Total Orders</label>
                            <input type="number" class="form-control-glass" name="total_orders" 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;">Total Spent ({{ currency_symbol }})</label>
                            <input type="number" class="form-control-glass" name="total_spent" 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;">Satisfaction Score (0-5)</label>
                            <input type="number" class="form-control-glass" name="satisfaction_score" min="0" max="5" 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;">NPS Score (0-10)</label>
                            <input type="number" class="form-control-glass" name="nps_score" min="0" max="10" 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="submitCustomer()">
                    <i class="fas fa-save me-2"></i>Save Customer
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Edit Customer Modal -->
<div class="modal fade" id="editCustomerModal" 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-user-edit me-2" style="color: var(--accent-primary);"></i>Edit Customer</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="editCustomerForm">
                    <input type="hidden" name="customer_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;">First Name *</label>
                            <input type="text" class="form-control-glass" name="first_name" 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;">Last Name *</label>
                            <input type="text" class="form-control-glass" name="last_name" 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;">Company Name</label>
                            <input type="text" class="form-control-glass" name="company_name">
                        </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;">Email *</label>
                            <input type="email" class="form-control-glass" name="email" 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;">Phone</label>
                            <input type="text" class="form-control-glass" name="phone">
                        </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;">Customer Code</label>
                            <input type="text" class="form-control-glass" name="customer_code">
                        </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;">Address</label>
                            <textarea class="form-control-glass" name="address" 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;">City</label>
                            <input type="text" class="form-control-glass" name="city">
                        </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;">Country</label>
                            <input type="text" class="form-control-glass" name="country">
                        </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;">Segment</label>
                            <select class="form-control-glass" name="segment">
                                <option value="General">General</option>
                                <option value="Enterprise">Enterprise</option>
                                <option value="SMB">SMB</option>
                                <option value="Startup">Startup</option>
                                <option value="Government">Government</option>
                                <option value="Education">Education</option>
                                <option value="Healthcare">Healthcare</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;">Status</label>
                            <select class="form-control-glass" name="status">
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                                <option value="churned">Churned</option>
                            </select>
                        </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;">Lifetime Value ({{ currency_symbol }})</label>
                            <input type="number" class="form-control-glass" name="lifetime_value" 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;">Acquisition Cost ({{ currency_symbol }})</label>
                            <input type="number" class="form-control-glass" name="acquisition_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;">Total Orders</label>
                            <input type="number" class="form-control-glass" name="total_orders">
                        </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;">Total Spent ({{ currency_symbol }})</label>
                            <input type="number" class="form-control-glass" name="total_spent" 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;">Satisfaction Score (0-5)</label>
                            <input type="number" class="form-control-glass" name="satisfaction_score" min="0" max="5" 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;">NPS Score (0-10)</label>
                            <input type="number" class="form-control-glass" name="nps_score" min="0" max="10" 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="submitEditCustomer()">
                    <i class="fas fa-save me-2"></i>Update Customer
                </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 Customers 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> first_name, last_name, email<br>
                    <strong>Optional:</strong> customer_code, company_name, phone, address, city, country, segment, lifetime_value, acquisition_cost, total_orders, total_spent, satisfaction_score, nps_score, status<br>
                    <em style="color: var(--text-secondary);">Duplicate emails will update existing records instead of creating duplicates.</em><br>
                    <a href="{{ url_for('business_twin.download_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 Customers 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> first_name, last_name, email<br>
                    <strong>Optional:</strong> customer_code, company_name, phone, address, city, country, segment, lifetime_value, acquisition_cost, total_orders, total_spent, satisfaction_score, nps_score, status<br>
                    <strong>Supported:</strong> .xlsx and .xls files<br>
                    <em style="color: var(--text-secondary);">Duplicate emails will update existing records instead of creating duplicates.</em><br>
                    <a href="{{ url_for('business_twin.download_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>
const customerData = {
{% for c in customers %}
    {{ c.id }}: {
        id: {{ c.id }},
        customer_code: {{ c.customer_code|tojson }},
        first_name: {{ c.first_name|tojson }},
        last_name: {{ c.last_name|tojson }},
        company_name: {{ c.company_name|tojson }},
        email: {{ c.email|tojson }},
        phone: {{ c.phone|tojson }},
        address: {{ c.address|tojson }},
        city: {{ c.city|tojson }},
        country: {{ c.country|tojson }},
        segment: {{ c.segment|tojson }},
        lifetime_value: {{ c.lifetime_value or 0 }},
        acquisition_cost: {{ c.acquisition_cost or 0 }},
        total_orders: {{ c.total_orders or 0 }},
        total_spent: {{ c.total_spent or 0 }},
        satisfaction_score: {{ c.satisfaction_score if c.satisfaction_score is not none else 'null' }},
        nps_score: {{ c.nps_score if c.nps_score is not none else 'null' }},
        status: {{ c.status|tojson }}
    }{% if not loop.last %},{% endif %}
{% endfor %}
};

function submitCustomer() {
    const form = document.getElementById('addCustomerForm');
    const formData = new FormData(form);
    
    fetch('{{ url_for("business_twin.add_customer") }}', {
        method: 'POST',
        body: formData
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            showToast('Customer added successfully!', 'success');
            const modal = bootstrap.Modal.getInstance(document.getElementById('addCustomerModal'));
            modal.hide();
            setTimeout(() => window.location.reload(), 800);
        } else {
            showToast(data.error || 'Error adding customer', 'error');
        }
    })
    .catch(err => {
        showToast('Network error: ' + err.message, 'error');
    });
}

function openEditModal(id) {
    const data = customerData[id];
    if (!data) {
        showToast('Customer data not found', 'error');
        return;
    }
    
    const form = document.getElementById('editCustomerForm');
    form.querySelector('[name="customer_id"]').value = data.id;
    form.querySelector('[name="first_name"]').value = data.first_name || '';
    form.querySelector('[name="last_name"]').value = data.last_name || '';
    form.querySelector('[name="company_name"]').value = data.company_name || '';
    form.querySelector('[name="email"]').value = data.email || '';
    form.querySelector('[name="phone"]').value = data.phone || '';
    form.querySelector('[name="customer_code"]').value = data.customer_code || '';
    form.querySelector('[name="address"]').value = data.address || '';
    form.querySelector('[name="city"]').value = data.city || '';
    form.querySelector('[name="country"]').value = data.country || '';
    form.querySelector('[name="segment"]').value = data.segment || 'General';
    form.querySelector('[name="status"]').value = data.status || 'active';
    form.querySelector('[name="lifetime_value"]').value = data.lifetime_value || 0;
    form.querySelector('[name="acquisition_cost"]').value = data.acquisition_cost || 0;
    form.querySelector('[name="total_orders"]').value = data.total_orders || 0;
    form.querySelector('[name="total_spent"]').value = data.total_spent || 0;
    form.querySelector('[name="satisfaction_score"]').value = data.satisfaction_score !== null ? data.satisfaction_score : '';
    form.querySelector('[name="nps_score"]').value = data.nps_score !== null ? data.nps_score : '';
    
    const modal = new bootstrap.Modal(document.getElementById('editCustomerModal'));
    modal.show();
}

function submitEditCustomer() {
    const form = document.getElementById('editCustomerForm');
    const formData = new FormData(form);
    const customerId = formData.get('customer_id');
    
    const url = `{{ url_for("business_twin.edit_customer", customer_id=0) }}`.replace(/\/0$/, '/' + customerId);
    
    fetch(url, {
        method: 'POST',
        body: formData
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            showToast('Customer updated successfully!', 'success');
            const modal = bootstrap.Modal.getInstance(document.getElementById('editCustomerModal'));
            if (modal) modal.hide();
            setTimeout(() => window.location.reload(), 800);
        } else {
            showToast(data.error || 'Error updating customer', 'error');
        }
    })
    .catch(err => {
        showToast('Network error: ' + err.message, 'error');
    });
}

function deleteCustomer(id) {
    if (!confirm('Are you sure you want to delete this customer? This action cannot be undone.')) {
        return;
    }
    
    const url = `{{ url_for("business_twin.delete_customer", customer_id=0) }}`.replace(/\/0$/, '/' + id);
    
    fetch(url, {
        method: 'DELETE'
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            showToast('Customer deleted successfully!', 'success');
            setTimeout(() => window.location.reload(), 800);
        } else {
            showToast(data.error || 'Error deleting customer', 'error');
        }
    })
    .catch(err => {
        showToast('Network error: ' + err.message, 'error');
    });
}

function deleteAllCustomers() {
    const count = {{ total_db_customers }};
    if (!confirm(`Are you sure you want to delete ALL ${count} customer records? This action cannot be undone.`)) {
        return;
    }
    
    fetch('{{ url_for("business_twin.delete_all_customers") }}', {
        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 customers', '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_customers_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.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_customers_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.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; }
}

/* Custom Modal Backdrop - Fixes the transparent background issue */
.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;
}

/* Ensure modal sits above backdrop */
.modal-dialog {
    z-index: 1050;
    position: relative;
}

/* Hide Bootstrap's default backdrop since we use custom one */
.modal-backdrop {
    display: none !important;
}

/* Modal body scrollbar styling */
.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 improvements */
.form-label {
    margin-bottom: 6px;
    display: block;
}

/* Ensure modal content is readable */
.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);
}

/* Action Buttons */
.btn-action {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
    margin-right: 4px;
}
.btn-action:hover {
    background: rgba(255,255,255,0.1);
    color: var(--text-primary);
}
.btn-edit:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}
.btn-delete:hover {
    border-color: #EF4444;
    color: #EF4444;
}
</style>
{% endblock %}