{% extends "base.html" %}

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

{% block content %}
<section class="page-hero">
    <div>
        <h2>Customer Log</h2>
        <p>Capture customer details, address, contacts, machine interests, notes, and multiple statuses.</p>
    </div>
    <a href="{{ export_url }}" class="secondary-btn link-btn">Password-protected export</a>
</section>

<section class="metrics-grid">
    <div class="metric-card"><span>Total customers</span><strong>{{ counts.total }}</strong></div>
    <div class="metric-card"><span>Initial Eng</span><strong>{{ counts.initial }}</strong></div>
    <div class="metric-card"><span>Quoted</span><strong>{{ counts.quoted }}</strong></div>
    <div class="metric-card"><span>Ordered</span><strong>{{ counts.ordered }}</strong></div>
</section>

<div class="two-column-layout customer-log-layout">
    <section class="card highlighted-card">
        <div class="section-heading compact">
            <h3>Add customer</h3>
            <p>Start with one contact, then use <strong>Add another contact</strong> when needed.</p>
        </div>
        <form method="post" action="{{ app_url('/customers') }}" 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" required>
                    </div>
                    <div class="field">
                        <label for="website">Website</label>
                        <input id="website" name="website" type="url" 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" 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">
                    </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" required>
                    </div>
                    <div class="field">
                        <label for="county">County</label>
                        <input id="county" name="county" type="text">
                    </div>
                    <div class="field">
                        <label for="postcode">Postcode</label>
                        <input id="postcode" name="postcode" type="text" required>
                    </div>
                    <div class="field">
                        <label for="country">Country</label>
                        <input id="country" name="country" type="text" placeholder="Optional">
                    </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>Date</label>
                        <input type="text" value="{{ today }}" 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 }}" onchange="updateChecklistSummary('machine-interest-summary', 'machine_interest', 'Select machine interests')">
                                    {{ machine }}
                                </label>
                                {% endfor %}
                            </div>
                        </details>
                        <div class="help-text">Tick one or more machines.</div>
                    </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 == 'Initial Eng' %}checked{% endif %} onchange="updateChecklistSummary('status-summary', 'status', 'Select status')">
                                    {{ option }}
                                </label>
                                {% endfor %}
                            </div>
                        </details>
                        <div class="help-text">You can tick more than one, e.g. Quoted and Ordered.</div>
                    </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) %}
                    <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">
                        </div>
                        <div class="field">
                            <label for="contact_role_{{ idx }}">Role</label>
                            <input id="contact_role_{{ idx }}" name="contact_role_{{ idx }}" type="text">
                        </div>
                        <div class="field">
                            <label for="contact_phone_{{ idx }}">Phone</label>
                            <input id="contact_phone_{{ idx }}" name="contact_phone_{{ idx }}" type="text">
                        </div>
                        <div class="field">
                            <label for="contact_email_{{ idx }}">Email</label>
                            <input id="contact_email_{{ idx }}" name="contact_email_{{ idx }}" type="email">
                        </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">
                </div>
            </div>

            <div class="field">
                <label for="notes">Notes</label>
                <textarea id="notes" name="notes" rows="4" placeholder="Customer notes"></textarea>
            </div>

            <button type="submit" class="primary-btn big-btn">Save customer</button>
        </form>
    </section>

    <section class="card">
        <div class="section-heading compact list-heading">
            <div>
                <h3>Customer list</h3>
                <p>Search, filter, edit, and export your customer records.</p>
            </div>
            <a href="{{ export_url }}" class="primary-btn link-btn">Export</a>
        </div>

        <form method="get" action="{{ app_url('/customers') }}" class="toolbar-form filter-bar">
            <div class="toolbar-field grow">
                <label for="q">Search</label>
                <input id="q" name="q" type="text" value="{{ search_text }}" placeholder="Company, contact, phone, email, address, machine">
            </div>
            <div class="toolbar-field">
                <label for="status-filter">Status</label>
                <select id="status-filter" name="status">
                    <option value="">All statuses</option>
                    {% for option in status_options %}
                    <option value="{{ option }}" {% if status_filter == option %}selected{% endif %}>{{ option }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="toolbar-field">
                <label for="machine-filter">Machine</label>
                <select id="machine-filter" name="machine_interest">
                    <option value="">All machines</option>
                    {% for machine in machine_options %}
                    <option value="{{ machine }}" {% if machine_filter == machine %}selected{% endif %}>{{ machine }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="toolbar-actions">
                <button type="submit" class="secondary-btn">Apply filters</button>
                <a href="{{ app_url('/customers') }}" class="text-link">Reset</a>
            </div>
        </form>

        {% if customers %}
        <div class="table-wrap">
            <table>
                <thead>
                    <tr>
                        <th>Company</th>
                        <th>Contacts</th>
                        <th>Machines</th>
                        <th>Status</th>
                        <th>Next contact</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for customer in customers %}
                    <tr>
                        <td>
                            <div class="table-main">{{ customer.company_name }}</div>
                            {% if customer.website %}<div class="table-sub"><a href="{{ customer.website }}" target="_blank" rel="noreferrer">{{ customer.website }}</a></div>{% endif %}
                            {% if customer.address_summary %}<div class="table-sub">{{ customer.address_summary }}</div>{% endif %}
                            <div class="table-sub">Created: {{ customer.created_date }}</div>
                        </td>
                        <td>
                            {% if customer.contacts %}
                                {% for contact in customer.contacts %}
                                <div class="contact-chip">
                                    <strong>{{ contact.contact_name or 'Unnamed' }}</strong>
                                    {% if contact.role %}<span>{{ contact.role }}</span>{% endif %}
                                    {% if contact.phone %}<span class="contact-phone">{{ contact.phone }}</span>{% endif %}
                                    {% if contact.email %}<a href="mailto:{{ contact.email }}">{{ contact.email }}</a>{% endif %}
                                </div>
                                {% endfor %}
                            {% else %}
                                <span class="muted">No contacts</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if customer.machine_interests %}
                            <div class="tag-list">
                                {% for machine in customer.machine_interests %}<span class="machine-tag">{{ machine }}</span>{% endfor %}
                            </div>
                            {% else %}<span class="muted">None</span>{% endif %}
                        </td>
                        <td>
                            <div class="status-pill-wrap">
                                {% for status in customer.statuses %}
                                <span class="status-pill status-{{ status|lower|replace(' ', '-') }}">{{ status }}</span>
                                {% endfor %}
                            </div>
                        </td>
                        <td>{{ customer.next_contact_date or '-' }}</td>
                        <td>
                            <div class="action-stack">
                                <a class="text-link action-edit" href="{{ app_url('/customers/' ~ customer.id ~ '/edit') }}">Edit</a>
                                <a class="danger-link" href="{{ app_url('/customers/' ~ customer.id ~ '/delete') }}">Delete</a>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="empty-state">No customers match the current filters.</div>
        {% endif %}
    </section>
</div>
{% endblock %}