{% extends "base.html" %}

{% block title %}Sign Off | Customer Log & Sign Off{% endblock %}

{% block content %}
<section class="page-hero">
    <div>
        <h2>Sign Off</h2>
        <p>Enter one customer, then add one or more machines. Each machine gets its own sign-off details, serial number, and printable label when you save.</p>
    </div>
</section>

<div class="two-column-layout orders-layout">
    <section class="card highlighted-card">
        <div class="section-heading compact">
            <h3>Create sign-off</h3>
            <p>Only customers with <strong>Ordered</strong> ticked in Customer Log appear here. Use the machine count to create multiple serial labels under one customer.</p>
        </div>

        {% if ordered_customers %}
        <form method="post" action="{{ app_url('/orders') }}" class="stacked-form">
            <div class="form-panel">
                <div class="panel-title">Order details</div>
                <div class="field-grid three-up">
                    <div class="field">
                        <label for="customer_id">Customer</label>
                        <select id="customer_id" name="customer_id" required>
                            <option value="">Select customer</option>
                            {% for customer in ordered_customers %}
                            <option value="{{ customer.id }}">{{ customer.company_name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="field">
                        <label for="product_count">Number of machines / serial labels</label>
                        <select id="product_count" name="product_count" onchange="updateProductSections()">
                            {% for idx in range(1, max_products + 1) %}
                            <option value="{{ idx }}">{{ idx }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="field readonly-field">
                        <label>Label date</label>
                        <input type="text" value="{{ label_month }}" readonly>
                    </div>
                </div>
                <div class="field">
                    <label for="delivery_address">Delivery address</label>
                    <textarea id="delivery_address" name="delivery_address" rows="3" placeholder="Optional delivery address"></textarea>
                </div>
            </div>

            {% for idx in range(1, max_products + 1) %}
            <div class="product-card {% if idx > 1 %}hidden{% endif %}" data-product-index="{{ idx }}">
                <div class="product-card-header">
                    <div>
                        <h4>Machine {{ idx }}</h4>
                        <span class="serial-hint">Serial preview: {{ serial_previews[idx - 1] }}</span>
                    </div>
                </div>

                <div class="field-grid two-up">
                    <div class="field">
                        <label for="product_choice_{{ idx }}">Machine / product name</label>
                        <select id="product_choice_{{ idx }}" name="product_choice_{{ idx }}" onchange="toggleCustomProductFields({{ idx }}); updateSerialLabelPreview({{ idx }});">
                            <option value="">Select machine</option>
                            {% for machine in machine_options %}
                            <option value="{{ machine }}">{{ machine }}</option>
                            {% endfor %}
                            <option value="custom">Custom product</option>
                        </select>
                    </div>
                    <div class="field readonly-field">
                        <label>Serial number preview</label>
                        <input id="serial_number_preview_{{ idx }}" type="text" value="{{ serial_previews[idx - 1] }}" readonly>
                    </div>
                </div>

                <div class="field-grid two-up hidden" id="custom-fields-{{ idx }}">
                    <div class="field">
                        <label for="custom_name_{{ idx }}">Custom product name</label>
                        <input id="custom_name_{{ idx }}" name="custom_name_{{ idx }}" type="text" oninput="updateSerialLabelPreview({{ idx }})">
                    </div>
                    <div class="field readonly-field">
                        <label>Custom product note</label>
                        <input type="text" value="Use this when the machine is not in the list." readonly>
                    </div>
                </div>

                <div class="field-grid two-up">
                    <div class="field">
                        <label for="product_model_{{ idx }}">Model / reference</label>
                        <input id="product_model_{{ idx }}" name="product_model_{{ idx }}" type="text" placeholder="e.g. AEA2T100DR1000" oninput="updateSerialLabelPreview({{ idx }})">
                    </div>
                    <div class="field">
                        <label for="electrical_rating_{{ idx }}">Electrical rating for label</label>
                        <input id="electrical_rating_{{ idx }}" name="electrical_rating_{{ idx }}" type="text" placeholder="e.g. 220V 1Ph 0.8KW" oninput="updateSerialLabelPreview({{ idx }})">
                    </div>
                </div>

                <div class="label-preview-card">
                    <div class="label-preview-title">Serial label preview board</div>
                    <div class="label-preview-frame">
                        <div class="serial-label-mini-wrap">
                            <section class="serial-label-format">
                            <div class="serial-label-left">
                                <div class="label-product-title" id="label-product-{{ idx }}">Select machine</div>
                                <div class="label-line">Model: <span id="label-model-{{ idx }}">-</span></div>
                                <div class="label-line">Serial No {{ serial_previews[idx - 1] }}</div>
                                <div class="label-line" id="label-rating-{{ idx }}">Electrical rating</div>
                                <div class="label-spacer"></div>
                                <div class="label-line small">Manufactured by:</div>
                                <div class="label-line small">{{ manufacturer_name }}</div>
                                <div class="label-line small">{{ manufacturer_address }}</div>
                                <div class="label-date">Date: {{ label_month }}</div>
                            </div>
                            <div class="serial-label-right">
                                <img src="{{ app_url('/static/lancing-label-logo.png?v=15') }}" alt="Lancing" class="label-logo-image">
                                <img src="{{ app_url('/static/ce-mark.png?v=15') }}" alt="CE mark" class="ce-image">
                            </div>
                        </section>
                        </div>
                    </div>
                </div>

                <div class="form-panel light-panel">
                    <div class="panel-title">Electrical test results</div>
                    <div class="field-grid three-up">
                        <div class="field">
                            <label for="supply_voltage_{{ idx }}">Supply voltage (V)</label>
                            <input id="supply_voltage_{{ idx }}" name="supply_voltage_{{ idx }}" type="number" step="any">
                        </div>
                        <div class="field">
                            <label for="neutral_to_earth_{{ idx }}">Neutral to earth (V)</label>
                            <input id="neutral_to_earth_{{ idx }}" name="neutral_to_earth_{{ idx }}" type="number" step="any">
                        </div>
                        <div class="field">
                            <label for="earth_continuity_{{ idx }}">Earth continuity (Ω)</label>
                            <input id="earth_continuity_{{ idx }}" name="earth_continuity_{{ idx }}" type="number" step="any">
                        </div>
                    </div>

                    <div class="field-grid two-up">
                        <div class="field">
                            <label for="insulation_resistance_{{ idx }}">Insulation resistance (Ω)</label>
                            <input id="insulation_resistance_{{ idx }}" name="insulation_resistance_{{ idx }}" type="number" step="any">
                        </div>
                        <div class="field">
                            <label for="dc_output_24v_{{ idx }}">24V DC output (V)</label>
                            <input id="dc_output_24v_{{ idx }}" name="dc_output_24v_{{ idx }}" type="number" step="any">
                        </div>
                    </div>

                    <div class="checkbox-grid">
                        <label class="checkbox-row"><input type="checkbox" name="estop_active_{{ idx }}"> E-stop active</label>
                        <label class="checkbox-row"><input type="checkbox" name="estop_registered_{{ idx }}"> E-stop registered</label>
                        <label class="checkbox-row"><input type="checkbox" name="guard_interlock_{{ idx }}"> Guard interlock</label>
                    </div>
                </div>
            </div>
            {% endfor %}

            <button type="submit" class="primary-btn big-btn">Save sign-off and create all serial labels</button>
        </form>
        {% else %}
        <div class="empty-state">
            There are no customers with <strong>Ordered</strong> status ticked yet. Go to Customer Log, edit a customer, and tick Ordered.
        </div>
        {% endif %}
    </section>

    <section class="card">
        <div class="section-heading compact">
            <h3>Recent sign-offs</h3>
            <p>Open a sign-off record to review serial numbers, test values, and printable labels.</p>
        </div>
        {% if recent_orders %}
        <div class="table-wrap">
            <table>
                <thead>
                    <tr>
                        <th>Sign-off</th>
                        <th>Customer</th>
                        <th>Created</th>
                        <th>Machines</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    {% for order in recent_orders %}
                    <tr>
                        <td>
                            <div class="table-main">#{{ order.id }}</div>
                            {% if order.delivery_address %}<div class="table-sub">{{ order.delivery_address }}</div>{% endif %}
                        </td>
                        <td>{{ order.company_name }}</td>
                        <td>{{ order.created_at.replace('T', ' ') }}</td>
                        <td>{{ order.item_count }}</td>
                        <td><a class="text-link" href="{{ app_url('/orders/' ~ order.id) }}">View</a></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="empty-state">No sign-offs saved yet.</div>
        {% endif %}
    </section>
</div>
{% endblock %}

{% block scripts %}
<script>
function updateProductSections() {
    const countSelect = document.getElementById('product_count');
    if (!countSelect) return;
    const count = parseInt(countSelect.value || '1', 10);
    document.querySelectorAll('[data-product-index]').forEach((section) => {
        const idx = parseInt(section.getAttribute('data-product-index'), 10);
        section.classList.toggle('hidden', idx > count);
    });
}

function toggleCustomProductFields(index) {
    const select = document.getElementById(`product_choice_${index}`);
    const wrap = document.getElementById(`custom-fields-${index}`);
    if (!select || !wrap) return;
    wrap.classList.toggle('hidden', select.value !== 'custom');
}

function updateSerialLabelPreview(index) {
    const select = document.getElementById(`product_choice_${index}`);
    const customName = document.getElementById(`custom_name_${index}`);
    const model = document.getElementById(`product_model_${index}`);
    const rating = document.getElementById(`electrical_rating_${index}`);
    const productTarget = document.getElementById(`label-product-${index}`);
    const modelTarget = document.getElementById(`label-model-${index}`);
    const ratingTarget = document.getElementById(`label-rating-${index}`);
    if (!select || !productTarget) return;

    let productName = select.value || 'Select machine';
    if (productName === 'custom') {
        productName = customName && customName.value.trim() ? customName.value.trim() : 'Custom product';
    }
    productTarget.textContent = productName;
    if (modelTarget) modelTarget.textContent = model && model.value.trim() ? model.value.trim() : '-';
    if (ratingTarget) ratingTarget.textContent = rating && rating.value.trim() ? rating.value.trim() : 'Electrical rating';
}

window.addEventListener('DOMContentLoaded', () => {
    updateProductSections();
    for (let i = 1; i <= {{ max_products }}; i += 1) {
        toggleCustomProductFields(i);
        updateSerialLabelPreview(i);
    }
});
</script>
{% endblock %}