{% extends "base.html" %}

{% block title %}Edit {{ customer.company_name }} | Customer Log & Sign Off{% endblock %}

{% block content %}
<section class="page-hero">
    <div>
        <h2>Edit customer</h2>
        <p>{{ customer.company_name }}</p>
    </div>
    <a href="{{ app_url('/customers') }}" class="secondary-btn link-btn">Back to Customer Log</a>
</section>

<section class="card highlighted-card single-edit-card">
    <form method="post" action="{{ app_url('/customers/' ~ customer.id ~ '/edit') }}" class="stacked-form">
        <div class="form-panel">
            <div class="panel-title">Company</div>
            <div class="field-grid two-up">
                <div class="field">
                    <label for="company_name">Company name</label>
                    <input id="company_name" name="company_name" type="text" value="{{ customer.company_name }}" required>
                </div>
                <div class="field">
                    <label for="website">Website</label>
                    <input id="website" name="website" type="url" value="{{ customer.website or '' }}" placeholder="https://example.com">
                </div>
            </div>
        </div>

        <div class="form-panel">
            <div class="panel-title">Customer address</div>
            <div class="field-grid two-up">
                <div class="field">
                    <label for="address_line_1">Address line 1</label>
                    <input id="address_line_1" name="address_line_1" type="text" value="{{ customer.address_line_1 or '' }}" required>
                </div>
                <div class="field">
                    <label for="address_line_2">Address line 2</label>
                    <input id="address_line_2" name="address_line_2" type="text" value="{{ customer.address_line_2 or '' }}">
                </div>
            </div>
            <div class="field-grid four-up">
                <div class="field">
                    <label for="town_city">Town / city</label>
                    <input id="town_city" name="town_city" type="text" value="{{ customer.town_city or '' }}" required>
                </div>
                <div class="field">
                    <label for="county">County</label>
                    <input id="county" name="county" type="text" value="{{ customer.county or '' }}">
                </div>
                <div class="field">
                    <label for="postcode">Postcode</label>
                    <input id="postcode" name="postcode" type="text" value="{{ customer.postcode or '' }}" required>
                </div>
                <div class="field">
                    <label for="country">Country</label>
                    <input id="country" name="country" type="text" value="{{ customer.country or '' }}">
                </div>
            </div>
        </div>

        <div class="form-panel">
            <div class="panel-title">Status and machine interest</div>
            <div class="field-grid three-up">
                <div class="field readonly-field">
                    <label>Created date</label>
                    <input type="text" value="{{ customer.created_date }}" readonly>
                </div>
                <div class="field">
                    <label>Machine interest</label>
                    <details class="dropdown-checklist">
                        <summary id="machine-interest-summary">Select machine interests</summary>
                        <div class="dropdown-checklist-panel tall-panel">
                            {% for machine in machine_options %}
                            <label class="checkbox-row compact-checkbox">
                                <input type="checkbox" name="machine_interest" value="{{ machine }}" data-label="{{ machine }}" {% if machine in customer.machine_interests %}checked{% endif %} onchange="updateChecklistSummary('machine-interest-summary', 'machine_interest', 'Select machine interests')">
                                {{ machine }}
                            </label>
                            {% endfor %}
                        </div>
                    </details>
                </div>
                <div class="field">
                    <label>Status</label>
                    <details class="dropdown-checklist">
                        <summary id="status-summary">Select status</summary>
                        <div class="dropdown-checklist-panel">
                            {% for option in status_options %}
                            <label class="checkbox-row compact-checkbox">
                                <input type="checkbox" name="status" value="{{ option }}" data-label="{{ option }}" {% if option in customer.statuses %}checked{% endif %} onchange="updateChecklistSummary('status-summary', 'status', 'Select status')">
                                {{ option }}
                            </label>
                            {% endfor %}
                        </div>
                    </details>
                </div>
            </div>
        </div>

        <div class="form-panel">
            <div class="panel-title">Contact details</div>
            <div id="contacts-container" class="contact-stack">
                {% for idx in range(1, max_contacts + 1) %}
                {% set contact = contact_lookup.get(idx) %}
                <div class="field-grid four-up contact-row {% if idx > visible_contact_rows %}hidden{% endif %}" data-contact-row>
                    <div class="field">
                        <label for="contact_name_{{ idx }}">Contact name</label>
                        <input id="contact_name_{{ idx }}" name="contact_name_{{ idx }}" type="text" value="{{ contact.contact_name if contact else '' }}">
                    </div>
                    <div class="field">
                        <label for="contact_role_{{ idx }}">Role</label>
                        <input id="contact_role_{{ idx }}" name="contact_role_{{ idx }}" type="text" value="{{ contact.role if contact else '' }}">
                    </div>
                    <div class="field">
                        <label for="contact_phone_{{ idx }}">Phone</label>
                        <input id="contact_phone_{{ idx }}" name="contact_phone_{{ idx }}" type="text" value="{{ contact.phone if contact else '' }}">
                    </div>
                    <div class="field">
                        <label for="contact_email_{{ idx }}">Email</label>
                        <input id="contact_email_{{ idx }}" name="contact_email_{{ idx }}" type="email" value="{{ contact.email if contact else '' }}">
                    </div>
                </div>
                {% endfor %}
            </div>
            <button id="add-contact-btn" type="button" class="secondary-btn" onclick="addContactRow('add-contact-btn')">+ Add another contact</button>
        </div>

        <div class="field-grid two-up">
            <div class="field">
                <label for="next_contact_date">Next contact date</label>
                <input id="next_contact_date" name="next_contact_date" type="date" value="{{ customer.next_contact_date or '' }}">
            </div>
        </div>

        <div class="field">
            <label for="notes">Notes</label>
            <textarea id="notes" name="notes" rows="5">{{ customer.notes or '' }}</textarea>
        </div>

        <div class="button-row">
            <button type="submit" class="primary-btn big-btn">Save changes</button>
            <a href="{{ app_url('/customers') }}" class="secondary-btn link-btn">Cancel</a>
        </div>
    </form>
</section>
{% endblock %}