{% extends 'admin/layout.html.twig' %}
{% block title %}{{ is_new ? 'New' : 'Edit' }} Invoice - KitscoApp{% endblock %}
{% block page_title %}{{ is_new ? 'New Invoice' : 'Edit Invoice #' ~ invoice.displayInvoiceNumber }}{% endblock %}

{% block stylesheets %}
{{ parent() }}
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet">
<style>
    .ql-container { font-size: 0.875rem; }
    .ql-editor { min-height: 80px; }
    .ql-toolbar { border-radius: 0.5rem 0.5rem 0 0; }
    .ql-container { border-radius: 0 0 0.5rem 0.5rem; }

    /* Desktop table styles */
    @media (min-width: 768px) {
        #items-table { display: table !important; width: 100%; }
        #items-table thead { display: table-header-group !important; }
        #items-table tbody, #items-table tbody#items-container { display: table-row-group !important; }
        #items-table tr.item-row { display: table-row !important; background: transparent !important; border: none !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; width: auto !important; border-radius: 0 !important; }
        #items-table tr.item-row td { display: table-cell !important; padding: 0.5rem 0.75rem !important; }
        #items-table tr.item-row td[data-label]:before { display: none !important; content: none !important; }
        #items-table tr.item-row td.mobile-row { display: table-cell !important; }
        #items-table tr.item-row td.mobile-row > div { display: inline-block !important; margin-right: 0.75rem; }
        #items-table tr.item-row td.mobile-row > div[data-label]:before { display: none !important; content: none !important; }
        #items-table tr.item-row td.mobile-actions { display: table-cell !important; text-align: right !important; border-top: none !important; margin-top: 0 !important; padding-top: 0.5rem !important; }
        #placeholder-row-container { display: table-row-group !important; }
    }

    /* Mobile card layout */
    @media (max-width: 767px) {
        .overflow-x-auto { overflow: visible !important; }
        #items-table { display: block !important; width: 100%; }
        #items-table thead { display: none !important; }
        #items-table tbody#items-container { display: block !important; width: 100%; padding-top: 0.5rem; }
        #items-table tr.item-row {
            display: grid !important;
            grid-template-columns: 1fr 1fr;
            grid-template-areas:
                "product product"
                "description description"
                "qty price"
                "amount delete";
            gap: 0.5rem;
            width: calc(100% - 2.5rem);
            padding: 1rem;
            margin: 0 1.25rem 0.75rem 1.25rem;
            background: #fff;
            border-radius: 0.75rem;
            border: 1px solid #e5e7eb;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
            box-sizing: border-box;
        }
        #items-table tr.item-row td {
            display: block !important;
            padding: 0.25rem 0;
            text-align: left !important;
        }
        #items-table tr.item-row td[data-label]:not([data-label=""]):before {
            content: attr(data-label);
            font-weight: 600;
            font-size: 0.7rem;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.025em;
            display: block !important;
            margin-bottom: 0.375rem;
        }
        /* Grid area assignments */
        #items-table tr.item-row td:nth-child(1) { grid-area: product; }
        #items-table tr.item-row td:nth-child(2) { grid-area: description; }
        #items-table tr.item-row td:nth-child(3) { grid-area: qty; }
        #items-table tr.item-row td:nth-child(4) { grid-area: price; }
        #items-table tr.item-row td:nth-child(5) {
            grid-area: amount;
            display: flex !important;
            flex-direction: column;
            justify-content: flex-end;
            padding-top: 0.75rem;
            margin-top: 0.25rem;
            border-top: 1px solid #f3f4f6;
        }
        #items-table tr.item-row td:nth-child(5):before {
            content: 'Amount';
            font-weight: 600;
            font-size: 0.7rem;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.025em;
            display: block !important;
            margin-bottom: 0.375rem;
        }
        #items-table tr.item-row td:nth-child(5) .item-amount {
            font-size: 1.125rem;
        }
        #items-table tr.item-row td:nth-child(6) {
            grid-area: delete;
            display: flex !important;
            align-items: flex-end;
            justify-content: flex-end;
            padding-top: 0.75rem;
            margin-top: 0.25rem;
            border-top: 1px solid #f3f4f6;
        }
        #items-table tr.item-row td:nth-child(6) .remove-item {
            padding: 0.5rem 1rem;
            background: #fef2f2;
            border-radius: 0.5rem;
        }
        #placeholder-row-container { display: none !important; }
        /* Invoice totals on mobile */
        #items-table tfoot { display: block !important; }
        #items-table tfoot tr {
            display: flex !important;
            justify-content: flex-end;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1.25rem;
            background: transparent !important;
        }
        #items-table tfoot tr td {
            display: none !important;
        }
        #items-table tfoot tr td[colspan] {
            display: inline-block !important;
            padding: 0 !important;
            font-size: 0.875rem;
        }
        #items-table tfoot tr td#invoice-total {
            display: inline-block !important;
            padding: 0 !important;
        }
    }
</style>
{% endblock %}

{% block content %}
{{ form_start(form, {'attr': {'id': 'invoice-form'}}) }}
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
    <!-- Left column: Invoice details -->
    <div>
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden mb-4">
            <div class="px-5 py-3 border-b border-gray-100">
                <h3 class="font-semibold text-gray-800 text-sm"><i class="bi bi-info-circle mr-2"></i>Invoice Details</h3>
            </div>
            <div class="p-5 space-y-4">
                {# Custom dropdown for Type #}
                <div>
                    {% set type_options = [] %}
                    {% for choice in form.type.vars.choices %}
                        {% set type_options = type_options|merge([{value: choice.value, label: choice.label}]) %}
                    {% endfor %}
                    {% include 'components/_select_dropdown.html.twig' with {
                        id: form.type.vars.id,
                        name: form.type.vars.full_name,
                        value: form.type.vars.value,
                        label: 'Invoice Type',
                        options: type_options,
                        placeholder: 'Select type...',
                        required: true
                    } %}
                    {% do form.type.setRendered %}
                </div>

                {# Custom dropdown for Customer with Add New button #}
                <div>
                    <div class="flex items-center justify-between mb-1">
                        <label class="block text-sm font-medium text-gray-700">Customer</label>
                        <button type="button" id="add-customer-btn" class="text-xs text-kitsco-accent hover:text-kitsco-dark transition-colors flex items-center gap-1">
                            <i class="bi bi-plus-circle"></i> New Customer
                        </button>
                    </div>
                    {% set customer_options = [] %}
                    {% for choice in form.customer.vars.choices %}
                        {% set customer_options = customer_options|merge([{value: choice.value, label: choice.label}]) %}
                    {% endfor %}
                    <div id="customer-dropdown-container">
                        {% include 'components/_select_dropdown.html.twig' with {
                            id: form.customer.vars.id,
                            name: form.customer.vars.full_name,
                            value: form.customer.vars.value,
                            label: false,
                            options: customer_options,
                            placeholder: 'Select a customer...',
                            searchable: true,
                            searchPlaceholder: 'Search customers...',
                            required: true
                        } %}
                    </div>
                    {% do form.customer.setRendered %}

                    {# Billing Override Section - collapsible #}
                    <div id="billing-override-section" class="mt-2" style="display: none;">
                        <button type="button" id="toggle-billing-override" class="text-xs text-gray-500 hover:text-kitsco-accent transition-colors flex items-center gap-1">
                            <i class="bi bi-pencil-square"></i>
                            <span id="billing-toggle-text">Edit billing details for this invoice</span>
                        </button>

                        <div id="billing-override-fields" class="hidden mt-3 p-3 bg-amber-50 border border-amber-200 rounded-lg space-y-3">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-xs font-medium text-amber-800">
                                    <i class="bi bi-info-circle mr-1"></i>
                                    These details will only apply to this invoice
                                </span>
                                <button type="button" id="clear-billing-override" class="text-xs text-gray-500 hover:text-kitsco-accent transition-colors">
                                    <i class="bi bi-arrow-counterclockwise"></i> Reset to customer defaults
                                </button>
                            </div>

                            {# Hide billingName - company name should not be editable #}
                            {{ form_widget(form.billingName, {attr: {class: 'hidden'}}) }}

                            <div class="grid grid-cols-1 gap-3">
                                <div class="grid grid-cols-2 gap-2">
                                    <div>
                                        {{ form_label(form.billingContactPerson, null, {label_attr: {class: 'text-xs font-medium text-gray-700'}}) }}
                                        {{ form_widget(form.billingContactPerson, {attr: {class: 'w-full text-sm rounded-lg border-gray-300 focus:border-kitsco-accent focus:ring focus:ring-kitsco-accent/20'}}) }}
                                    </div>
                                    <div>
                                        {{ form_label(form.billingContactEmail, null, {label_attr: {class: 'text-xs font-medium text-gray-700'}}) }}
                                        {{ form_widget(form.billingContactEmail, {attr: {class: 'w-full text-sm rounded-lg border-gray-300 focus:border-kitsco-accent focus:ring focus:ring-kitsco-accent/20'}}) }}
                                    </div>
                                </div>
                                <div>
                                    {{ form_label(form.billingAddress, null, {label_attr: {class: 'text-xs font-medium text-gray-700'}}) }}
                                    {{ form_widget(form.billingAddress, {attr: {class: 'w-full text-sm rounded-lg border-gray-300 focus:border-kitsco-accent focus:ring focus:ring-kitsco-accent/20'}}) }}
                                </div>
                                <div class="grid grid-cols-2 gap-2">
                                    <div>
                                        {{ form_label(form.billingPoBox, null, {label_attr: {class: 'text-xs font-medium text-gray-700'}}) }}
                                        {{ form_widget(form.billingPoBox, {attr: {class: 'w-full text-sm rounded-lg border-gray-300 focus:border-kitsco-accent focus:ring focus:ring-kitsco-accent/20'}}) }}
                                    </div>
                                    <div>
                                        {{ form_label(form.billingCity, null, {label_attr: {class: 'text-xs font-medium text-gray-700'}}) }}
                                        {{ form_widget(form.billingCity, {attr: {class: 'w-full text-sm rounded-lg border-gray-300 focus:border-kitsco-accent focus:ring focus:ring-kitsco-accent/20'}}) }}
                                    </div>
                                </div>
                                <div class="grid grid-cols-2 gap-2">
                                    <div>
                                        {{ form_label(form.billingCountry, null, {label_attr: {class: 'text-xs font-medium text-gray-700'}}) }}
                                        {{ form_widget(form.billingCountry, {attr: {class: 'w-full text-sm rounded-lg border-gray-300 focus:border-kitsco-accent focus:ring focus:ring-kitsco-accent/20'}}) }}
                                    </div>
                                    <div>
                                        {{ form_label(form.billingPhone, null, {label_attr: {class: 'text-xs font-medium text-gray-700'}}) }}
                                        {{ form_widget(form.billingPhone, {attr: {class: 'w-full text-sm rounded-lg border-gray-300 focus:border-kitsco-accent focus:ring focus:ring-kitsco-accent/20'}}) }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {# Custom dropdown for Currency #}
                <div data-controller="exchange-rate" data-exchange-rate-tzs-id-value="{{ tzs_currency_id|default('') }}">
                    {% set currency_options = [] %}
                    {% for choice in form.currency.vars.choices %}
                        {% set currency_options = currency_options|merge([{value: choice.value, label: choice.label}]) %}
                    {% endfor %}
                    {% include 'components/_select_dropdown.html.twig' with {
                        id: form.currency.vars.id,
                        name: form.currency.vars.full_name,
                        value: form.currency.vars.value,
                        label: 'Currency',
                        options: currency_options,
                        placeholder: 'Select currency...',
                        required: true,
                        extra_attrs: {'data-exchange-rate-target': 'currency', 'data-action': 'change->exchange-rate#toggle'}
                    } %}
                    {% do form.currency.setRendered %}

                    {# Exchange Rate field - shown only for foreign currencies #}
                    <div data-exchange-rate-target="rateRow" class="mt-3 {{ form.currency.vars.value and form.currency.vars.value != tzs_currency_id|default('') ? '' : 'hidden' }}">
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Exchange Rate (to TZS)
                            <span class="text-xs text-gray-400 ml-1">e.g., 2500 means 1 USD = 2,500 TZS</span>
                        </label>
                        <input type="number"
                               id="{{ form.exchangeRate.vars.id }}"
                               name="{{ form.exchangeRate.vars.full_name }}"
                               value="{{ form.exchangeRate.vars.value }}"
                               step="0.0001"
                               min="0"
                               placeholder="Enter exchange rate..."
                               data-exchange-rate-target="rate"
                               class="w-full">
                        <p class="text-xs text-gray-400 mt-1">How many TZS equals 1 unit of the selected currency</p>
                        {% do form.exchangeRate.setRendered %}
                    </div>
                </div>
                <div class="grid grid-cols-2 gap-3">
                    <div>{{ form_row(form.invoiceDate) }}</div>
                    <div>{{ form_row(form.dueDate) }}</div>
                </div>
                {{ form_row(form.taxRate) }}
                <div>
                    <label>Invoice Terms</label>
                    <div id="invoice-terms-editor">{{ form.invoiceTerms.vars.value|raw }}</div>
                    {{ form_widget(form.invoiceTerms, {'attr': {'style': 'display:none'}}) }}
                </div>
            </div>
        </div>
    </div>

    <!-- Right column: Line items -->
    <div class="lg:col-span-2">
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-visible mb-4">
            <div class="px-5 py-3 border-b border-gray-100 flex justify-between items-center">
                <h3 class="font-semibold text-gray-800 text-sm"><i class="bi bi-list-ul mr-2"></i>Line Items</h3>
                <button type="button" class="inline-flex items-center gap-1 bg-kitsco-accent text-white text-xs font-medium py-1.5 px-3 rounded-lg hover:bg-kitsco-dark transition-colors" id="add-item-btn">
                    <i class="bi bi-plus"></i> Add Item
                </button>
            </div>
            <div>
                <table class="w-full text-sm" id="items-table">
                    <thead class="bg-gray-50 text-gray-500 text-xs uppercase">
                        <tr>
                            <th class="px-3 py-2.5 text-left font-medium" style="width:22%">Product</th>
                            <th class="px-3 py-2.5 text-left font-medium">Description</th>
                            <th class="px-3 py-2.5 text-center font-medium" style="width:8%">Qty</th>
                            <th class="px-3 py-2.5 text-left font-medium" style="width:12%">Price</th>
                            <th class="px-3 py-2.5 text-right font-medium" style="width:12%">Amount</th>
                            <th class="px-3 py-2.5" style="width:3%"></th>
                        </tr>
                    </thead>
                    <tbody id="items-container" data-index="{{ form.items|length }}" class="divide-y divide-gray-100">
                        {% for item in form.items %}
                        <tr class="item-row">
                            <td class="px-3 py-2" data-label="Product">
                                {# Custom dropdown for Product #}
                                {% set product_options = [{value: '', label: '-- Custom Item --'}] %}
                                {% for choice in item.product.vars.choices %}
                                    {% set product_options = product_options|merge([{value: choice.value, label: choice.label}]) %}
                                {% endfor %}
                                <div class="relative"
                                     data-controller="select-dropdown"
                                     data-select-dropdown-selected-value="{{ item.product.vars.value|default('') }}"
                                     data-select-dropdown-placeholder-value="-- Custom Item --"
                                     data-select-dropdown-searchable-value="true"
                                     data-select-dropdown-title-value="Select Product">
                                    <input type="hidden"
                                           id="{{ item.product.vars.id }}"
                                           name="{{ item.product.vars.full_name }}"
                                           value="{{ item.product.vars.value|default('') }}"
                                           data-select-dropdown-target="input"
                                           class="product-select">
                                    <button type="button"
                                            data-select-dropdown-target="button"
                                            data-action="click->select-dropdown#toggle"
                                            class="relative w-full cursor-pointer rounded-lg border border-gray-300 bg-white py-2 pl-3 pr-10 text-left text-sm text-gray-700 transition-all hover:border-gray-400 focus:border-kitsco-accent focus:outline-none focus:ring-2 focus:ring-kitsco-accent/20">
                                        <span class="block truncate" data-select-dropdown-target="label">-- Custom Item --</span>
                                        <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                            <i class="bi bi-chevron-down text-gray-400 text-xs transition-transform"></i>
                                        </span>
                                    </button>
                                    <div data-select-dropdown-target="menu"
                                         data-action="keydown->select-dropdown#handleKeydown"
                                         class="hidden absolute z-50 mt-1 w-full rounded-lg bg-white text-sm shadow-lg border border-gray-200 focus:outline-none overflow-hidden">
                                        <div class="sticky top-0 bg-white border-b border-gray-100 p-2">
                                            <div class="relative flex items-center">
                                                <i class="bi bi-search text-gray-400 text-xs absolute left-3 z-10"></i>
                                                <input type="text"
                                                       data-select-dropdown-target="search"
                                                       data-action="input->select-dropdown#search keydown->select-dropdown#handleKeydown"
                                                       placeholder="Search products..."
                                                       style="padding-left: 2rem !important; background: transparent !important;"
                                                       class="block w-full rounded-md border-0 py-1.5 pr-3 text-gray-900 ring-1 ring-inset ring-gray-200 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-kitsco-accent text-sm bg-transparent">
                                            </div>
                                        </div>
                                        <div class="overflow-auto max-h-48 py-1">
                                            {% for option in product_options %}
                                            <div data-value="{{ option.value }}"
                                                 data-label="{{ option.label }}"
                                                 data-action="click->select-dropdown#select mouseenter->select-dropdown#highlightOption"
                                                 data-select-dropdown-target="option"
                                                 class="relative cursor-pointer select-none py-2 pl-3 pr-9 text-gray-700 hover:bg-gray-50 transition-colors">
                                                <span class="block truncate">{{ option.label }}</span>
                                                <span class="checkmark invisible absolute inset-y-0 right-0 flex items-center pr-3 text-kitsco-accent">
                                                    <i class="bi bi-check-lg"></i>
                                                </span>
                                            </div>
                                            {% endfor %}
                                            <div data-no-results class="hidden px-3 py-2 text-sm text-gray-400 text-center">
                                                No results found
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {% do item.product.setRendered %}
                            </td>
                            <td class="px-3 py-2" data-label="Description">
                                {{ form_widget(item.description) }}
                            </td>
                            <td class="px-3 py-2" data-label="Qty">
                                {% include 'components/_quantity_stepper.html.twig' with {
                                    id: item.quantity.vars.id,
                                    name: item.quantity.vars.full_name,
                                    value: item.quantity.vars.value|default(1),
                                    min: 1
                                } %}
                                {% do item.quantity.setRendered %}
                            </td>
                            <td class="px-3 py-2" data-label="Price">
                                {{ form_widget(item.unitPrice, {'attr': {'class': 'item-price'}}) }}
                            </td>
                            <td class="px-3 py-2 text-right">
                                <span class="font-bold item-amount text-kitsco-accent">0</span>
                            </td>
                            <td class="px-3 py-2 text-center">
                                <button type="button" class="text-red-400 hover:text-red-600 transition-colors remove-item">
                                    <i class="bi bi-trash"></i><span class="md:hidden text-sm ml-1">Remove</span>
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                    <!-- Placeholder row with custom dropdown -->
                    <tbody id="placeholder-row-container">
                        <tr id="placeholder-row" class="bg-gray-50/50 border-t border-dashed border-gray-200">
                            <td class="px-3 py-2">
                                <div class="relative"
                                     data-controller="select-dropdown"
                                     data-select-dropdown-placeholder-value="Select product..."
                                     data-select-dropdown-searchable-value="true"
                                     data-select-dropdown-title-value="Select Product"
                                     id="ph-product-dropdown">
                                    <input type="hidden" id="ph-product" data-select-dropdown-target="input">
                                    <button type="button"
                                            data-select-dropdown-target="button"
                                            data-action="click->select-dropdown#toggle"
                                            class="relative w-full cursor-pointer rounded-lg border border-gray-300 bg-white py-2 pl-3 pr-10 text-left text-sm text-gray-400 transition-all hover:border-gray-400 focus:border-kitsco-accent focus:outline-none focus:ring-2 focus:ring-kitsco-accent/20">
                                        <span class="block truncate" data-select-dropdown-target="label">Select product...</span>
                                        <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                            <i class="bi bi-chevron-down text-gray-400 text-xs transition-transform"></i>
                                        </span>
                                    </button>
                                    <div data-select-dropdown-target="menu"
                                         data-action="keydown->select-dropdown#handleKeydown"
                                         class="hidden absolute z-50 mt-1 w-full rounded-lg bg-white text-sm shadow-lg border border-gray-200 focus:outline-none overflow-hidden">
                                        <div class="sticky top-0 bg-white border-b border-gray-100 p-2">
                                            <div class="relative flex items-center">
                                                <i class="bi bi-search text-gray-400 text-xs absolute left-3 z-10"></i>
                                                <input type="text"
                                                       data-select-dropdown-target="search"
                                                       data-action="input->select-dropdown#search keydown->select-dropdown#handleKeydown"
                                                       placeholder="Search products..."
                                                       style="padding-left: 2rem !important; background: transparent !important;"
                                                       class="block w-full rounded-md border-0 py-1.5 pr-3 text-gray-900 ring-1 ring-inset ring-gray-200 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-kitsco-accent text-sm bg-transparent">
                                            </div>
                                        </div>
                                        <div class="overflow-auto max-h-48 py-1" id="ph-product-options">
                                            <!-- Options loaded via JS -->
                                            <div data-no-results class="hidden px-3 py-2 text-sm text-gray-400 text-center">
                                                No results found
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-3 py-2">
                                <input type="text" id="ph-description" placeholder="Or type a custom item...">
                            </td>
                            <td class="px-3 py-2">
                                <input type="text" id="ph-qty" placeholder="-" class="text-center">
                            </td>
                            <td class="px-3 py-2">
                                <input type="text" id="ph-price" placeholder="-">
                            </td>
                            <td class="px-3 py-2 text-right text-gray-300">-</td>
                            <td class="px-3 py-2"></td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr class="bg-gray-50">
                            <td colspan="4" class="px-3 py-3 text-right font-bold text-gray-700">TOTAL:</td>
                            <td class="px-3 py-3 text-right font-bold text-lg text-kitsco-accent" id="invoice-total">0</td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
                <!-- Mobile ghost add item card -->
                <div id="mobile-add-item-card" class="md:hidden mx-5 mb-4 mt-2">
                    <button type="button" class="w-full py-4 px-4 rounded-xl border-2 border-dashed border-gray-300 bg-gray-50/50 text-gray-500 hover:border-kitsco-accent hover:text-kitsco-accent hover:bg-kitsco-accent/5 transition-all flex items-center justify-center gap-2">
                        <i class="bi bi-plus-circle text-lg"></i>
                        <span class="font-medium">Add Item</span>
                    </button>
                </div>
            </div>
        </div>

        <div class="flex justify-end gap-3">
            <a href="{{ path('admin_invoice_index') }}" class="inline-flex items-center py-3 px-6 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors font-medium">Cancel</a>
            {% if is_new %}
            <button type="submit" class="inline-flex items-center gap-2 bg-kitsco-accent hover:bg-kitsco-dark text-white font-semibold py-3 px-6 rounded-lg transition-colors">
                <i class="bi bi-check-lg"></i> Create Invoice
            </button>
            {% else %}
            <button type="button" id="save-invoice-btn" class="inline-flex items-center gap-2 bg-kitsco-accent hover:bg-kitsco-dark text-white font-semibold py-3 px-6 rounded-lg transition-colors">
                <i class="bi bi-check-lg"></i> Update Invoice
            </button>
            <input type="hidden" name="_save_as_revision" id="save-as-revision-flag" value="0">
            {% endif %}
        </div>
    </div>
</div>
{{ form_end(form) }}

{% if not is_new %}
<!-- Save Options Modal -->
<div id="save-options-modal" class="fixed inset-0 z-[100] hidden">
    <div class="absolute inset-0 bg-black/50 cursor-pointer" data-close-save-modal></div>
    <div class="absolute inset-0 flex items-center justify-center p-4 pointer-events-none">
        <div class="bg-white rounded-xl shadow-xl max-w-md w-full pointer-events-auto">
            <div class="flex items-center justify-between px-5 py-4 border-b border-gray-200">
                <h3 class="font-semibold text-gray-800"><i class="bi bi-save text-kitsco-accent mr-2"></i>Save Invoice</h3>
                <button type="button" data-close-save-modal class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors">
                    <i class="bi bi-x-lg text-gray-500"></i>
                </button>
            </div>
            <div class="p-5">
                <p class="text-gray-600 text-sm mb-4">How would you like to save your changes?</p>
                <div class="space-y-3">
                    <button type="button" id="save-update-btn" class="w-full text-left px-4 py-3 rounded-lg border border-gray-200 hover:border-kitsco-accent hover:bg-kitsco-accent/5 transition-all group">
                        <div class="flex items-start gap-3">
                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
                                <i class="bi bi-pencil-square text-blue-600"></i>
                            </div>
                            <div>
                                <p class="font-medium text-gray-800 group-hover:text-kitsco-accent">Update Invoice</p>
                                <p class="text-sm text-gray-500">Save changes to the current invoice #{{ invoice.displayInvoiceNumber }}</p>
                            </div>
                        </div>
                    </button>
                    {% if invoice.canBeRevised %}
                    <button type="button" id="save-revision-btn" class="w-full text-left px-4 py-3 rounded-lg border border-gray-200 hover:border-amber-400 hover:bg-amber-50 transition-all group">
                        <div class="flex items-start gap-3">
                            <div class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center flex-shrink-0">
                                <i class="bi bi-arrow-clockwise text-amber-600"></i>
                            </div>
                            <div>
                                <p class="font-medium text-gray-800 group-hover:text-amber-600">Create New Revision</p>
                                <p class="text-sm text-gray-500">Save as a new revision ({{ invoice.displayInvoiceNumber }}-R{{ invoice.revision + 1 }}). Current version will be cancelled.</p>
                            </div>
                        </div>
                    </button>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}

<!-- New Customer Modal -->
<div id="new-customer-modal" class="fixed inset-0 z-[100] hidden">
    <div class="absolute inset-0 bg-black/50 cursor-pointer" data-close-modal></div>
    <div class="absolute inset-0 flex items-center justify-center p-4 pointer-events-none">
        <div class="bg-white rounded-xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-auto pointer-events-auto">
            <div class="flex items-center justify-between px-5 py-4 border-b border-gray-200">
                <h3 class="font-semibold text-gray-800"><i class="bi bi-person-plus text-kitsco-accent mr-2"></i>New Customer</h3>
                <button type="button" data-close-modal class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors">
                    <i class="bi bi-x-lg text-gray-500"></i>
                </button>
            </div>
            <div class="p-5">
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Organization/Person Name <span class="text-red-500">*</span>
                        </label>
                        <input type="text" id="new-customer-name" class="w-full" placeholder="Company or individual name" required>
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Contact Person</label>
                            <input type="text" id="new-customer-contact" class="w-full" placeholder="Contact person name">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
                            <input type="text" id="new-customer-phone" class="w-full" placeholder="+255 7XX XXX XXX">
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                        <input type="email" id="new-customer-email" class="w-full" placeholder="contact@example.com">
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">P.O. Box</label>
                            <input type="text" id="new-customer-pobox" class="w-full" placeholder="1234">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">City</label>
                            <input type="text" id="new-customer-city" class="w-full" placeholder="Arusha">
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Country</label>
                        <input type="text" id="new-customer-country" class="w-full" value="Tanzania" placeholder="Tanzania">
                    </div>
                </div>
                <div id="new-customer-error" class="hidden mt-4 px-4 py-3 rounded-lg bg-red-50 text-red-800 border border-red-200 text-sm"></div>
                <div class="flex justify-end gap-3 mt-6 pt-4 border-t border-gray-100">
                    <button type="button" data-close-modal class="px-4 py-2 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
                        Cancel
                    </button>
                    <button type="button" id="save-customer-btn" class="px-4 py-2 bg-kitsco-accent text-white rounded-lg hover:bg-kitsco-dark transition-colors flex items-center gap-2">
                        <i class="bi bi-check-lg"></i> Create Customer
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
<script>
// Initialize Quill editor for Invoice Terms
const termsQuill = new Quill('#invoice-terms-editor', {
    theme: 'snow',
    modules: {
        toolbar: [['bold', 'italic', 'underline'], [{ 'list': 'ordered'}, { 'list': 'bullet' }]]
    }
});
const termsTextarea = document.querySelector('[id$="_invoiceTerms"]');
termsQuill.on('text-change', function() {
    termsTextarea.value = termsQuill.root.innerHTML;
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const invoiceForm = document.getElementById('invoice-form');
    const container = document.getElementById('items-container');
    const addBtn = document.getElementById('add-item-btn');

    // =====================
    // Form Validation
    // =====================
    function validateInvoiceForm() {
        let isValid = true;
        let firstError = null;

        // Clear previous error states
        document.querySelectorAll('.validation-error').forEach(el => el.remove());
        document.querySelectorAll('.border-red-500').forEach(el => {
            el.classList.remove('border-red-500');
        });

        // Check required custom dropdowns
        const requiredDropdowns = [
            { id: '{{ form.type.vars.id }}', label: 'Invoice Type' },
            { id: '{{ form.customer.vars.id }}', label: 'Customer' },
            { id: '{{ form.currency.vars.id }}', label: 'Currency' }
        ];

        requiredDropdowns.forEach(field => {
            const input = document.getElementById(field.id);
            if (input && !input.value) {
                isValid = false;
                const dropdown = input.closest('[data-controller="select-dropdown"]');
                if (dropdown) {
                    const button = dropdown.querySelector('button');
                    if (button) {
                        button.classList.add('border-red-500');
                        if (!firstError) firstError = button;
                    }
                    // Add error message
                    const errorDiv = document.createElement('div');
                    errorDiv.className = 'validation-error text-red-500 text-xs mt-1';
                    errorDiv.textContent = field.label + ' is required';
                    dropdown.appendChild(errorDiv);
                }
            }
        });

        // Check that at least one line item exists
        const itemRows = document.querySelectorAll('.item-row');
        if (itemRows.length === 0) {
            isValid = false;
            const itemsHeader = document.querySelector('#items-table').closest('.bg-white');
            if (itemsHeader && !itemsHeader.querySelector('.validation-error')) {
                const errorDiv = document.createElement('div');
                errorDiv.className = 'validation-error bg-red-50 border border-red-200 text-red-600 text-sm px-4 py-2 mx-5 mb-4 rounded-lg';
                errorDiv.innerHTML = '<i class="bi bi-exclamation-circle mr-1"></i> Please add at least one line item';
                const tableContainer = document.querySelector('#items-table').parentElement;
                tableContainer.parentElement.insertBefore(errorDiv, tableContainer);
                if (!firstError) firstError = errorDiv;
            }
        }

        // Scroll to first error
        if (firstError) {
            firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }

        return isValid;
    }

    // Add form submit handler
    invoiceForm.addEventListener('submit', function(e) {
        if (!validateInvoiceForm()) {
            e.preventDefault();
            return false;
        }
    });
    const phProduct = document.getElementById('ph-product');
    const phProductOptions = document.getElementById('ph-product-options');
    const phDesc = document.getElementById('ph-description');
    const phQty = document.getElementById('ph-qty');
    const phPrice = document.getElementById('ph-price');
    let index = parseInt(container.dataset.index);
    let productsData = {};
    let productsList = [];

    // Get list of product IDs already added to invoice
    function getAddedProductIds() {
        const ids = new Set();
        document.querySelectorAll('.item-row .product-select').forEach(input => {
            if (input.value) {
                ids.add(input.value);
            }
        });
        return ids;
    }

    // Build quantity stepper HTML
    function buildQuantityStepperHTML(fieldId, fieldName, value = 1, min = 1) {
        return `
            <div class="qty-stepper"
                 data-controller="quantity-stepper"
                 data-quantity-stepper-min-value="${min}">
                <button type="button" data-action="click->quantity-stepper#decrement">
                    <i class="bi bi-dash"></i>
                </button>
                <input type="number" id="${fieldId}" name="${fieldName}" min="${min}" value="${value}"
                       class="item-qty"
                       data-quantity-stepper-target="input"
                       data-action="input->quantity-stepper#onInput">
                <button type="button" data-action="click->quantity-stepper#increment">
                    <i class="bi bi-plus"></i>
                </button>
            </div>
        `;
    }

    // Build custom dropdown HTML for a product field
    function buildProductDropdownHTML(fieldId, fieldName, selectedValue = '') {
        const optionsHTML = productsList.map(p => `
            <div data-value="${p.id}"
                 data-label="${p.name}"
                 data-action="click->select-dropdown#select mouseenter->select-dropdown#highlightOption"
                 data-select-dropdown-target="option"
                 class="relative cursor-pointer select-none py-2 pl-3 pr-9 text-gray-700 hover:bg-gray-50 transition-colors">
                <span class="block truncate">${p.name}</span>
                <span class="checkmark invisible absolute inset-y-0 right-0 flex items-center pr-3 text-kitsco-accent">
                    <i class="bi bi-check-lg"></i>
                </span>
            </div>
        `).join('');

        return `
            <div class="relative"
                 data-controller="select-dropdown"
                 data-select-dropdown-selected-value="${selectedValue}"
                 data-select-dropdown-placeholder-value="-- Custom Item --"
                 data-select-dropdown-searchable-value="true"
                 data-select-dropdown-title-value="Select Product">
                <input type="hidden"
                       id="${fieldId}"
                       name="${fieldName}"
                       value="${selectedValue}"
                       data-select-dropdown-target="input"
                       class="product-select">
                <button type="button"
                        data-select-dropdown-target="button"
                        data-action="click->select-dropdown#toggle"
                        class="relative w-full cursor-pointer rounded-lg border border-gray-300 bg-white py-2 pl-3 pr-10 text-left text-sm text-gray-700 transition-all hover:border-gray-400 focus:border-kitsco-accent focus:outline-none focus:ring-2 focus:ring-kitsco-accent/20">
                    <span class="block truncate" data-select-dropdown-target="label">-- Custom Item --</span>
                    <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                        <i class="bi bi-chevron-down text-gray-400 text-xs transition-transform"></i>
                    </span>
                </button>
                <div data-select-dropdown-target="menu"
                     data-action="keydown->select-dropdown#handleKeydown"
                     class="hidden absolute z-50 mt-1 w-full rounded-lg bg-white text-sm shadow-lg border border-gray-200 focus:outline-none overflow-hidden">
                    <div class="sticky top-0 bg-white border-b border-gray-100 p-2">
                        <div class="relative flex items-center">
                            <i class="bi bi-search text-gray-400 text-xs absolute left-3 z-10"></i>
                            <input type="text"
                                   data-select-dropdown-target="search"
                                   data-action="input->select-dropdown#search keydown->select-dropdown#handleKeydown"
                                   placeholder="Search products..."
                                   style="padding-left: 2rem !important; background: transparent !important;"
                                   class="block w-full rounded-md border-0 py-1.5 pr-3 text-gray-900 ring-1 ring-inset ring-gray-200 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-kitsco-accent text-sm bg-transparent">
                        </div>
                    </div>
                    <div class="overflow-auto max-h-48 py-1">
                        <div data-value=""
                             data-label="-- Custom Item --"
                             data-action="click->select-dropdown#select mouseenter->select-dropdown#highlightOption"
                             data-select-dropdown-target="option"
                             class="relative cursor-pointer select-none py-2 pl-3 pr-9 text-gray-700 hover:bg-gray-50 transition-colors">
                            <span class="block truncate">-- Custom Item --</span>
                            <span class="checkmark invisible absolute inset-y-0 right-0 flex items-center pr-3 text-kitsco-accent">
                                <i class="bi bi-check-lg"></i>
                            </span>
                        </div>
                        ${optionsHTML}
                        <div data-no-results class="hidden px-3 py-2 text-sm text-gray-400 text-center">
                            No results found
                        </div>
                    </div>
                </div>
            </div>
        `;
    }

    // Load products for auto-populate and build placeholder dropdown options
    fetch('{{ path("admin_product_api_list") }}')
        .then(r => r.json())
        .then(data => {
            data.forEach(p => {
                productsData[p.id] = p;
                productsList.push(p);
            });

            // Build placeholder dropdown options
            const noResults = phProductOptions.querySelector('[data-no-results]');
            productsList.forEach(p => {
                const optionDiv = document.createElement('div');
                optionDiv.setAttribute('data-value', p.id);
                optionDiv.setAttribute('data-label', p.name);
                optionDiv.setAttribute('data-action', 'click->select-dropdown#select mouseenter->select-dropdown#highlightOption');
                optionDiv.setAttribute('data-select-dropdown-target', 'option');
                optionDiv.className = 'relative cursor-pointer select-none py-2 pl-3 pr-9 text-gray-700 hover:bg-gray-50 transition-colors';
                optionDiv.innerHTML = `
                    <span class="block truncate">${p.name}</span>
                    <span class="checkmark invisible absolute inset-y-0 right-0 flex items-center pr-3 text-kitsco-accent">
                        <i class="bi bi-check-lg"></i>
                    </span>
                `;
                phProductOptions.insertBefore(optionDiv, noResults);
            });

            // Update dropdowns to disable already-added products
            updatePlaceholderDropdownOptions();
            updateAllRowDropdownOptions();
        });

    // Update placeholder dropdown to disable already-added products
    function updatePlaceholderDropdownOptions() {
        const addedIds = getAddedProductIds();
        phProductOptions.querySelectorAll('[data-select-dropdown-target="option"]').forEach(option => {
            const val = option.dataset.value;
            if (!val) return; // skip empty value options

            const isAdded = addedIds.has(val);
            const labelSpan = option.querySelector('.block.truncate');

            if (isAdded) {
                option.classList.add('opacity-40', 'pointer-events-none');
                if (labelSpan && !option.querySelector('.added-tag')) {
                    const tag = document.createElement('span');
                    tag.className = 'added-tag text-xs text-gray-400 ml-1';
                    tag.textContent = '(added)';
                    labelSpan.appendChild(tag);
                }
            } else {
                option.classList.remove('opacity-40', 'pointer-events-none');
                option.querySelector('.added-tag')?.remove();
            }
        });
    }

    // Create a real form row and return it
    function createFormRow(productId = '', productName = '') {
        const currentIndex = index;
        index++;
        container.dataset.index = index;

        const fieldId = `invoice_items_${currentIndex}_product`;
        const fieldName = `invoice[items][${currentIndex}][product]`;

        let tr = document.createElement('tr');
        tr.className = 'item-row';
        tr.innerHTML = `
            <td class="px-3 py-2" data-label="Product">${buildProductDropdownHTML(fieldId, fieldName, productId)}</td>
            <td class="px-3 py-2" data-label="Description">
                <input type="text" id="invoice_items_${currentIndex}_description" name="invoice[items][${currentIndex}][description]" placeholder="Item description or specs">
            </td>
            <td class="px-3 py-2" data-label="Qty">
                ${buildQuantityStepperHTML(`invoice_items_${currentIndex}_quantity`, `invoice[items][${currentIndex}][quantity]`, 1, 1)}
            </td>
            <td class="px-3 py-2" data-label="Price">
                <div data-controller="money-input" data-money-input-decimals-value="true">
                    <input type="text" inputmode="decimal" id="invoice_items_${currentIndex}_unitPrice" name="invoice[items][${currentIndex}][unitPrice]" class="item-price money-input" data-money-input-target="input" data-action="input->money-input#onInput" autocomplete="off">
                </div>
            </td>
            <td class="px-3 py-2 text-right">
                <span class="font-bold item-amount text-kitsco-accent"></span>
            </td>
            <td class="px-3 py-2 text-center">
                <button type="button" class="text-red-400 hover:text-red-600 transition-colors remove-item"><i class="bi bi-trash"></i><span class="md:hidden text-sm ml-1">Remove</span></button>
            </td>
        `;
        container.appendChild(tr);

        // Update the dropdown label if product is selected
        if (productId && productName) {
            const labelEl = tr.querySelector('[data-select-dropdown-target="label"]');
            if (labelEl) labelEl.textContent = productName;
        }

        bindRow(tr);
        return tr;
    }

    // Promote placeholder into a real form row
    function promoteFromPlaceholder(opts) {
        let productName = opts.productId ? productsData[opts.productId]?.name : '';
        let row = createFormRow(opts.productId || '', productName);

        if (opts.productId) {
            let p = productsData[opts.productId];
            if (p) {
                let d = row.querySelector('[id$="_description"]');
                let pr = row.querySelector('[id$="_unitPrice"]');
                let q = row.querySelector('[id$="_quantity"]');
                if (d) d.value = p.description || '';
                if (pr) pr.value = formatPrice(p.unitPrice);
                if (q) q.value = 1;
            }
        }
        if (opts.description) {
            let d = row.querySelector('[id$="_description"]');
            if (d) d.value = opts.description;
            if (d) d.focus();
        }
        if (opts.qty) {
            let q = row.querySelector('[id$="_quantity"]');
            if (q) q.value = opts.qty;
        }
        if (opts.price) {
            let pr = row.querySelector('[id$="_unitPrice"]');
            if (pr) pr.value = formatPrice(opts.price);
        }

        resetPlaceholder();
        calculateTotals();
        updatePlaceholderDropdownOptions();
        updateAllRowDropdownOptions();
    }

    function resetPlaceholder() {
        phProduct.value = '';
        const phLabel = document.querySelector('#ph-product-dropdown [data-select-dropdown-target="label"]');
        if (phLabel) phLabel.textContent = 'Select product...';
        phDesc.value = '';
        phQty.value = '';
        phPrice.value = '';
    }

    // Placeholder product change event
    phProduct.addEventListener('change', function() {
        if (this.value) {
            promoteFromPlaceholder({ productId: this.value });
        }
    });

    phDesc.addEventListener('keydown', function(e) {
        if (this.value.length === 0 && e.key.length === 1) {
            setTimeout(() => {
                promoteFromPlaceholder({ description: this.value });
            }, 0);
        }
    });

    phQty.addEventListener('input', function() {
        if (this.value) {
            promoteFromPlaceholder({ qty: this.value });
        }
    });

    phPrice.addEventListener('input', function() {
        if (this.value) {
            promoteFromPlaceholder({ price: this.value });
        }
    });

    function populateFromProduct(row, productId) {
        let product = productsData[productId];
        if (!product) return;

        let descInput = row.querySelector('[id$="_description"]');
        let priceInput = row.querySelector('[id$="_unitPrice"]');
        let qtyInput = row.querySelector('[id$="_quantity"]');

        if (descInput) descInput.value = product.description || '';
        if (priceInput) priceInput.value = formatPrice(product.unitPrice);
        if (qtyInput && (!qtyInput.value || qtyInput.value === '0')) qtyInput.value = 1;

        calculateTotals();
    }

    function bindRow(row) {
        let productInput = row.querySelector('.product-select');
        let qtyInput = row.querySelector('[id$="_quantity"]');
        let priceInput = row.querySelector('[id$="_unitPrice"]');
        let removeBtn = row.querySelector('.remove-item');

        if (productInput) {
            productInput.addEventListener('change', function() {
                if (this.value) populateFromProduct(row, this.value);
                else calculateTotals();
                updatePlaceholderDropdownOptions();
                updateAllRowDropdownOptions();
            });
        }
        if (qtyInput) qtyInput.addEventListener('input', calculateTotals);
        // Listen for change event (fired by money-input Stimulus controller)
        if (priceInput) priceInput.addEventListener('change', calculateTotals);
        if (removeBtn) removeBtn.addEventListener('click', function() {
            row.remove();
            calculateTotals();
            updatePlaceholderDropdownOptions();
            updateAllRowDropdownOptions();
        });
    }

    // Format price with thousands separator, no decimals unless needed
    function formatPrice(value) {
        if (!value && value !== 0) return '';
        let num = parseFloat(String(value).replace(/,/g, ''));
        if (isNaN(num)) return '';
        // Check if has decimal part
        if (num % 1 !== 0) {
            return num.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        }
        return num.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 });
    }

    // Parse price string (remove commas) to get number
    function parsePrice(value) {
        if (!value) return 0;
        return parseFloat(String(value).replace(/,/g, '')) || 0;
    }

    function calculateTotals() {
        let total = 0;
        document.querySelectorAll('.item-row').forEach(function(row) {
            let qty = parseFloat(row.querySelector('[id$="_quantity"]')?.value) || 0;
            let price = parsePrice(row.querySelector('[id$="_unitPrice"]')?.value);
            let amount = qty * price;
            row.querySelector('.item-amount').textContent = amount > 0 ? formatPrice(amount) : '';
            total += amount;
        });
        document.getElementById('invoice-total').textContent = formatPrice(total);
    }

    // Init existing rows
    document.querySelectorAll('.item-row').forEach(bindRow);
    calculateTotals();

    // Add Item button
    // Check if mobile
    function isMobile() {
        return window.innerWidth < 768;
    }

    // Create mobile product picker modal
    let mobilePickerOverlay = null;
    function createMobileProductPicker() {
        if (mobilePickerOverlay) return;

        mobilePickerOverlay = document.createElement('div');
        mobilePickerOverlay.id = 'mobile-product-picker';
        mobilePickerOverlay.className = 'fixed inset-0 z-[100] hidden';
        mobilePickerOverlay.innerHTML = `
            <div class="absolute inset-0 bg-black/50" data-close-picker></div>
            <div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-2xl max-h-[85vh] flex flex-col" style="animation: slideUp 0.2s ease-out;">
                <div class="flex items-center justify-between px-4 py-3 border-b border-gray-200">
                    <h3 class="font-semibold text-gray-800">Add Line Item</h3>
                    <button type="button" data-close-picker class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100">
                        <i class="bi bi-x-lg text-gray-500"></i>
                    </button>
                </div>
                <div class="p-4 border-b border-gray-100">
                    <div class="relative flex items-center">
                        <i class="bi bi-search text-gray-400 absolute left-4 z-10"></i>
                        <input type="text" id="mobile-picker-search" placeholder="Search products..."
                               style="padding-left: 2.75rem !important;"
                               class="w-full pr-4 py-3 border border-gray-200 rounded-lg text-base focus:ring-2 focus:ring-kitsco-accent focus:border-transparent">
                    </div>
                </div>
                <div class="flex-1 overflow-auto" id="mobile-picker-options">
                    <div class="p-2 border-b border-gray-100">
                        <button type="button" data-product-id="" data-product-name="" class="w-full text-left px-4 py-3 rounded-lg hover:bg-gray-50 transition-colors">
                            <span class="font-medium text-gray-700">Custom Item</span>
                            <span class="text-sm text-gray-400 block">Enter description manually</span>
                        </button>
                    </div>
                    <div id="mobile-picker-products" class="p-2 space-y-1"></div>
                </div>
            </div>
        `;
        document.body.appendChild(mobilePickerOverlay);

        // Bind close events
        mobilePickerOverlay.querySelectorAll('[data-close-picker]').forEach(el => {
            el.addEventListener('click', closeMobilePicker);
        });

        // Bind custom item button
        mobilePickerOverlay.querySelector('[data-product-id=""]').addEventListener('click', function() {
            selectProductFromPicker('', '');
        });

        // Bind search
        document.getElementById('mobile-picker-search').addEventListener('input', function(e) {
            filterMobilePickerProducts(e.target.value);
        });
    }

    function showMobileProductPicker() {
        createMobileProductPicker();
        populateMobilePickerProducts();
        mobilePickerOverlay.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
        setTimeout(() => {
            document.getElementById('mobile-picker-search').focus();
        }, 100);
    }

    function closeMobilePicker() {
        if (mobilePickerOverlay) {
            mobilePickerOverlay.classList.add('hidden');
            document.body.style.overflow = '';
            document.getElementById('mobile-picker-search').value = '';
        }
    }

    function populateMobilePickerProducts() {
        const container = document.getElementById('mobile-picker-products');
        container.innerHTML = '';
        const addedIds = getAddedProductIds();

        productsList.forEach(p => {
            const isAdded = addedIds.has(String(p.id));
            const btn = document.createElement('button');
            btn.type = 'button';
            btn.setAttribute('data-product-id', p.id);
            btn.setAttribute('data-product-name', p.name);
            btn.disabled = isAdded;
            btn.className = `w-full text-left px-4 py-3 rounded-lg transition-colors mobile-product-option ${isAdded ? 'opacity-40 cursor-not-allowed bg-gray-50' : 'hover:bg-gray-50'}`;
            btn.innerHTML = `
                <span class="font-medium ${isAdded ? 'text-gray-400' : 'text-gray-700'}">${p.name}${isAdded ? ' <span class="text-xs">(already added)</span>' : ''}</span>
                ${p.description ? `<span class="text-sm text-gray-400 block truncate">${p.description}</span>` : ''}
                <span class="text-sm ${isAdded ? 'text-gray-400' : 'text-kitsco-accent'}">${p.unitPrice ? formatPrice(p.unitPrice) : ''}</span>
            `;
            if (!isAdded) {
                btn.addEventListener('click', function() {
                    selectProductFromPicker(p.id, p.name);
                });
            }
            container.appendChild(btn);
        });
    }

    function filterMobilePickerProducts(query) {
        const q = query.toLowerCase();
        document.querySelectorAll('.mobile-product-option').forEach(btn => {
            const name = btn.dataset.productName.toLowerCase();
            btn.style.display = name.includes(q) ? '' : 'none';
        });
    }

    function selectProductFromPicker(productId, productName) {
        closeMobilePicker();

        // Create row with selected product
        let row = createFormRow(productId, productName);

        if (productId && productsData[productId]) {
            let p = productsData[productId];
            let d = row.querySelector('[id$="_description"]');
            let pr = row.querySelector('[id$="_unitPrice"]');
            let q = row.querySelector('[id$="_quantity"]');
            if (d) d.value = p.description || '';
            if (pr) pr.value = formatPrice(p.unitPrice);
            if (q) {
                q.value = 1;
                q.focus();
                q.select();
            }
        } else {
            // Focus description for custom item
            let d = row.querySelector('[id$="_description"]');
            if (d) d.focus();
        }

        calculateTotals();
        updatePlaceholderDropdownOptions();
        updateAllRowDropdownOptions();
    }

    // Add Item button
    addBtn.addEventListener('click', function() {
        if (isMobile()) {
            showMobileProductPicker();
        } else {
            let row = createFormRow();
            updatePlaceholderDropdownOptions();
            updateAllRowDropdownOptions();
            let btn = row.querySelector('[data-select-dropdown-target="button"]');
            if (btn) btn.click();
        }
    });

    // Mobile ghost add item card
    const mobileAddCard = document.getElementById('mobile-add-item-card');
    if (mobileAddCard) {
        mobileAddCard.addEventListener('click', function() {
            showMobileProductPicker();
        });
    }

    // =====================
    // New Customer Modal
    // =====================
    const customerModal = document.getElementById('new-customer-modal');
    const addCustomerBtn = document.getElementById('add-customer-btn');
    const saveCustomerBtn = document.getElementById('save-customer-btn');
    const customerError = document.getElementById('new-customer-error');

    function openCustomerModal() {
        customerModal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
        document.getElementById('new-customer-name').focus();
    }

    function closeCustomerModal() {
        customerModal.classList.add('hidden');
        document.body.style.overflow = '';
        // Clear form
        document.getElementById('new-customer-name').value = '';
        document.getElementById('new-customer-contact').value = '';
        document.getElementById('new-customer-phone').value = '';
        document.getElementById('new-customer-email').value = '';
        document.getElementById('new-customer-pobox').value = '';
        document.getElementById('new-customer-city').value = '';
        document.getElementById('new-customer-country').value = 'Tanzania';
        customerError.classList.add('hidden');
    }

    addCustomerBtn.addEventListener('click', openCustomerModal);

    customerModal.querySelectorAll('[data-close-modal]').forEach(el => {
        el.addEventListener('click', closeCustomerModal);
    });

    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && !customerModal.classList.contains('hidden')) {
            closeCustomerModal();
        }
    });

    saveCustomerBtn.addEventListener('click', async function() {
        const name = document.getElementById('new-customer-name').value.trim();
        if (!name) {
            customerError.textContent = 'Please enter a customer name.';
            customerError.classList.remove('hidden');
            document.getElementById('new-customer-name').focus();
            return;
        }

        saveCustomerBtn.disabled = true;
        saveCustomerBtn.innerHTML = '<i class="bi bi-arrow-repeat animate-spin"></i> Creating...';

        try {
            const response = await fetch('{{ path("admin_customer_api_create") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    name: name,
                    contactPerson: document.getElementById('new-customer-contact').value.trim() || null,
                    contactEmail: document.getElementById('new-customer-email').value.trim() || null,
                    phone: document.getElementById('new-customer-phone').value.trim() || null,
                    poBox: document.getElementById('new-customer-pobox').value.trim() || null,
                    city: document.getElementById('new-customer-city').value.trim() || null,
                    country: document.getElementById('new-customer-country').value.trim() || 'Tanzania',
                }),
            });

            if (!response.ok) {
                const data = await response.json();
                throw new Error(data.error || 'Failed to create customer');
            }

            const customer = await response.json();

            // Add new customer to dropdown
            const dropdownContainer = document.getElementById('customer-dropdown-container');
            const dropdown = dropdownContainer.querySelector('[data-controller="select-dropdown"]');
            const input = dropdown.querySelector('[data-select-dropdown-target="input"]');
            const label = dropdown.querySelector('[data-select-dropdown-target="label"]');
            const optionsContainer = dropdown.querySelector('.overflow-auto');

            // Create new option
            const newOption = document.createElement('div');
            newOption.setAttribute('data-value', customer.id);
            newOption.setAttribute('data-label', customer.name);
            newOption.setAttribute('data-action', 'click->select-dropdown#select mouseenter->select-dropdown#highlightOption');
            newOption.setAttribute('data-select-dropdown-target', 'option');
            newOption.className = 'relative cursor-pointer select-none py-2 pl-3 pr-9 text-gray-700 hover:bg-gray-50 transition-colors';
            newOption.innerHTML = `
                <span class="block truncate">${customer.name}</span>
                <span class="checkmark invisible absolute inset-y-0 right-0 flex items-center pr-3 text-kitsco-accent">
                    <i class="bi bi-check-lg"></i>
                </span>
            `;

            // Insert at the beginning (after search)
            const noResults = optionsContainer.querySelector('[data-no-results]');
            optionsContainer.insertBefore(newOption, noResults);

            // Select the new customer
            input.value = customer.id;
            label.textContent = customer.name;
            label.classList.remove('text-gray-400');
            label.classList.add('text-gray-700');

            closeCustomerModal();

        } catch (error) {
            customerError.textContent = error.message;
            customerError.classList.remove('hidden');
        } finally {
            saveCustomerBtn.disabled = false;
            saveCustomerBtn.innerHTML = '<i class="bi bi-check-lg"></i> Create Customer';
        }
    });

    // =====================
    // Save Options Modal (Edit mode only)
    // =====================
    {% if not is_new %}
    const saveOptionsModal = document.getElementById('save-options-modal');
    const saveInvoiceBtn = document.getElementById('save-invoice-btn');
    const saveUpdateBtn = document.getElementById('save-update-btn');
    const saveRevisionBtn = document.getElementById('save-revision-btn');
    const saveAsRevisionFlag = document.getElementById('save-as-revision-flag');

    function openSaveOptionsModal() {
        // Validate form before showing modal
        if (!validateInvoiceForm()) {
            return;
        }
        saveOptionsModal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    function closeSaveOptionsModal() {
        saveOptionsModal.classList.add('hidden');
        document.body.style.overflow = '';
    }

    saveInvoiceBtn.addEventListener('click', openSaveOptionsModal);

    saveOptionsModal.querySelectorAll('[data-close-save-modal]').forEach(el => {
        el.addEventListener('click', closeSaveOptionsModal);
    });

    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && !saveOptionsModal.classList.contains('hidden')) {
            closeSaveOptionsModal();
        }
    });

    // Update button - save normally
    saveUpdateBtn.addEventListener('click', function() {
        saveAsRevisionFlag.value = '0';
        closeSaveOptionsModal();
        invoiceForm.requestSubmit ? invoiceForm.requestSubmit() : invoiceForm.submit();
    });

    // Revision button - save as new revision
    if (saveRevisionBtn) {
        saveRevisionBtn.addEventListener('click', function() {
            saveAsRevisionFlag.value = '1';
            closeSaveOptionsModal();
            invoiceForm.requestSubmit ? invoiceForm.requestSubmit() : invoiceForm.submit();
        });
    }
    {% endif %}

    // =====================
    // Billing Override Section
    // =====================
    const billingOverrideSection = document.getElementById('billing-override-section');
    const toggleBillingOverride = document.getElementById('toggle-billing-override');
    const billingOverrideFields = document.getElementById('billing-override-fields');
    const billingToggleText = document.getElementById('billing-toggle-text');
    const clearBillingOverride = document.getElementById('clear-billing-override');
    const customerDropdownContainer = document.getElementById('customer-dropdown-container');

    // Billing field mapping (form field ID suffix -> customer API field)
    const billingFieldMap = {
        'billingContactPerson': 'contactPerson',
        'billingContactEmail': 'contactEmail',
        'billingAddress': 'address',
        'billingPoBox': 'poBox',
        'billingCity': 'city',
        'billingCountry': 'country',
        'billingPhone': 'phone'
    };

    // Store current customer data
    let currentCustomerData = null;

    // Customer API base URL (generated by Symfony)
    const customerApiBaseUrl = '{{ path("admin_customer_api_show", {id: 999999}) }}'.replace('999999', '');

    // Fetch customer details from API
    async function fetchCustomerData(customerId) {
        if (!customerId) return null;
        try {
            const url = customerApiBaseUrl + customerId;
            const response = await fetch(url);
            if (response.ok) {
                return await response.json();
            }
        } catch (e) {
            console.error('Failed to fetch customer data:', e);
        }
        return null;
    }

    // Populate billing fields with customer data
    function populateBillingFields(customerData) {
        if (!customerData) return;

        Object.keys(billingFieldMap).forEach(fieldName => {
            const customerKey = billingFieldMap[fieldName];
            const input = document.getElementById('invoice_' + fieldName);
            if (input) {
                input.value = customerData[customerKey] || '';
            }
        });
    }

    // Clear billing fields and optionally repopulate with customer defaults
    function resetBillingFields(repopulate = true) {
        Object.keys(billingFieldMap).forEach(fieldName => {
            const input = document.getElementById('invoice_' + fieldName);
            if (input) {
                input.value = '';
            }
        });
        if (repopulate && currentCustomerData) {
            populateBillingFields(currentCustomerData);
        }
    }

    // Show billing override section when customer is selected
    async function checkCustomerSelection() {
        const customerInput = customerDropdownContainer.querySelector('[data-select-dropdown-target="input"]');
        if (customerInput && customerInput.value) {
            billingOverrideSection.style.display = 'block';

            // Fetch customer data if changed
            const customerId = customerInput.value;
            if (!currentCustomerData || currentCustomerData.id != customerId) {
                currentCustomerData = await fetchCustomerData(customerId);
            }
        } else {
            billingOverrideSection.style.display = 'none';
            currentCustomerData = null;
        }
    }

    // Toggle billing override fields visibility
    if (toggleBillingOverride) {
        toggleBillingOverride.addEventListener('click', async function() {
            const isHidden = billingOverrideFields.classList.contains('hidden');
            billingOverrideFields.classList.toggle('hidden');

            if (isHidden) {
                billingToggleText.textContent = 'Hide billing details';
                toggleBillingOverride.querySelector('i').className = 'bi bi-chevron-up';

                // Populate with customer defaults if fields are empty
                if (currentCustomerData) {
                    populateBillingFields(currentCustomerData);
                } else {
                    // Fetch if we don't have customer data yet
                    const customerInput = customerDropdownContainer.querySelector('[data-select-dropdown-target="input"]');
                    if (customerInput && customerInput.value) {
                        currentCustomerData = await fetchCustomerData(customerInput.value);
                        populateBillingFields(currentCustomerData);
                    }
                }
            } else {
                billingToggleText.textContent = 'Edit billing details for this invoice';
                toggleBillingOverride.querySelector('i').className = 'bi bi-pencil-square';
            }
        });
    }

    // Reset billing fields to customer defaults
    if (clearBillingOverride) {
        clearBillingOverride.addEventListener('click', function() {
            resetBillingFields(true);
        });
    }

    // Listen for customer selection changes
    const customerDropdown = customerDropdownContainer.querySelector('[data-controller="select-dropdown"]');
    if (customerDropdown) {
        const customerInput = customerDropdown.querySelector('[data-select-dropdown-target="input"]');
        if (customerInput) {
            // Use MutationObserver to detect value changes
            const observer = new MutationObserver(checkCustomerSelection);
            observer.observe(customerInput, { attributes: true, attributeFilter: ['value'] });

            // Also listen for direct changes
            customerInput.addEventListener('change', checkCustomerSelection);
        }

        // Listen for clicks on options to trigger check and reset billing fields
        customerDropdown.addEventListener('click', function(e) {
            if (e.target.closest('[data-select-dropdown-target="option"]')) {
                setTimeout(async () => {
                    await checkCustomerSelection();
                    // If billing section is expanded, reset with new customer data
                    if (!billingOverrideFields.classList.contains('hidden')) {
                        resetBillingFields(true);
                    }
                }, 50);
            }
        });
    }

    // Check on load if editing existing invoice
    checkCustomerSelection();

    // If billing overrides exist, expand the section (but don't overwrite existing values)
    {% if not is_new and invoice.hasBillingOverrides %}
    if (billingOverrideFields) {
        billingOverrideFields.classList.remove('hidden');
        billingToggleText.textContent = 'Hide billing details';
        toggleBillingOverride.querySelector('i').className = 'bi bi-chevron-up';
    }
    {% endif %}

    // Update all item row dropdowns to disable already-added products
    function updateAllRowDropdownOptions() {
        const addedIds = getAddedProductIds();

        document.querySelectorAll('.item-row [data-controller="select-dropdown"]').forEach(dropdown => {
            const currentInput = dropdown.querySelector('.product-select');
            const currentValue = currentInput ? currentInput.value : '';

            dropdown.querySelectorAll('[data-select-dropdown-target="option"]').forEach(option => {
                const val = option.dataset.value;
                if (!val) return; // skip "Custom Item" option

                // Mark as added if in the set, but not if it's this row's own selection
                const isAdded = addedIds.has(val) && val !== currentValue;
                const labelSpan = option.querySelector('.block.truncate');

                if (isAdded) {
                    option.classList.add('opacity-40', 'pointer-events-none');
                    if (labelSpan && !option.querySelector('.added-tag')) {
                        const tag = document.createElement('span');
                        tag.className = 'added-tag text-xs text-gray-400 ml-1';
                        tag.textContent = '(added)';
                        labelSpan.appendChild(tag);
                    }
                } else {
                    option.classList.remove('opacity-40', 'pointer-events-none');
                    option.querySelector('.added-tag')?.remove();
                }
            });
        });
    }
});
</script>
{% endblock %}