<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

    <!-- ChannelPanel Component -->
    <t t-name="dine360_order_channels.ChannelPanel" owl="1">
        <t t-if="showPanel and currentOrder">
            <div class="channel-panel d-flex flex-column gap-2 p-2 border-bottom">

                <!-- Order Source Row -->
                <div class="channel-section">
                    <div class="channel-label mb-1">📋 ORDER SOURCE</div>
                    <div class="d-flex flex-wrap gap-1">
                        <t t-foreach="Object.entries(SOURCE_LABELS)" t-as="entry" t-key="entry[0]">
                            <button
                                t-attf-class="btn btn-sm channel-btn #{orderSource === entry[0] ? 'btn-dark active' : 'btn-outline-secondary'}"
                                t-on-click="() => this.onSourceChange(entry[0])">
                                <t t-esc="entry[1]"/>
                            </button>
                        </t>
                    </div>
                </div>

                <!-- Phone number field -->
                <div t-if="orderSource === 'phone'" class="channel-extra">
                    <input type="text" class="form-control form-control-sm"
                           placeholder="📞 Phone Number"
                           t-att-value="currentOrder.telephone_number"
                           t-on-change="(ev) => { currentOrder.telephone_number = ev.target.value; }"/>
                </div>

                <!-- WhatsApp number field -->
                <div t-if="orderSource === 'whatsapp'" class="channel-extra">
                    <input type="text" class="form-control form-control-sm"
                           placeholder="📱 WhatsApp Number"
                           t-att-value="currentOrder.whatsapp_number"
                           t-on-change="(ev) => { currentOrder.whatsapp_number = ev.target.value; }"/>
                </div>

                <!-- Social media ref field -->
                <div t-if="orderSource === 'social_media'" class="channel-extra">
                    <input type="text" class="form-control form-control-sm"
                           placeholder="📲 Post / Message Reference"
                           t-att-value="currentOrder.social_ref"
                           t-on-change="(ev) => { currentOrder.social_ref = ev.target.value; }"/>
                </div>

                <!-- Fulfilment Row -->
                <div class="channel-section mt-1">
                    <div class="channel-label mb-1">🚀 FULFILMENT TYPE</div>
                    <div class="btn-group w-100" role="group">
                        <t t-foreach="Object.entries(FULFILMENT_LABELS)" t-as="entry" t-key="entry[0]">
                            <button
                                t-attf-class="btn btn-sm fulfilment-btn #{fulfilmentType === entry[0] ? 'btn-primary active' : 'btn-outline-primary'}"
                                t-on-click="() => this.onFulfilmentChange(entry[0])">
                                <t t-esc="entry[1]"/>
                            </button>
                        </t>
                    </div>
                </div>

                <!-- Delivery Address Section -->
                <div t-if="isDelivery" class="delivery-panel p-2 rounded mt-1">
                    <div class="fw-bold small mb-2">🚚 Delivery Address</div>

                    <!-- Partner search -->
                    <div class="position-relative mb-2">
                        <input type="text" class="form-control form-control-sm"
                               placeholder="🔍 Search saved address..."
                               t-att-value="state.searchQuery"
                               t-on-input="onAddressSearch"/>
                        <div t-if="state.searching" class="text-muted small ps-1">Searching...</div>
                        <div t-if="state.searchResults.length > 0"
                             class="address-dropdown position-absolute bg-white border rounded shadow-sm w-100">
                            <t t-foreach="state.searchResults" t-as="partner" t-key="partner.id">
                                <div class="address-result p-2 border-bottom small"
                                     t-on-click="() => this.onSelectPartner(partner)">
                                    <span class="fw-bold" t-esc="partner.name"/> —
                                    <span class="text-muted">
                                        <t t-esc="(partner.street || '') + ', ' + (partner.city || '')"/>
                                    </span>
                                </div>
                            </t>
                        </div>
                    </div>

                    <!-- Manual fields -->
                    <input type="text" class="form-control form-control-sm mb-1"
                           placeholder="Street"
                           t-att-value="currentOrder.delivery_street"
                           t-on-change="(ev) => this.onDeliveryFieldChange('street', ev)"/>
                    <div class="d-flex gap-1 mb-1">
                        <input type="text" class="form-control form-control-sm"
                               placeholder="City"
                               t-att-value="currentOrder.delivery_city"
                               t-on-change="(ev) => this.onDeliveryFieldChange('city', ev)"/>
                        <input type="text" class="form-control form-control-sm"
                               placeholder="Zip" style="max-width:90px"
                               t-att-value="currentOrder.delivery_zip"
                               t-on-change="(ev) => this.onDeliveryFieldChange('zip', ev)"/>
                    </div>
                    <input type="tel" class="form-control form-control-sm mb-1"
                           placeholder="Phone"
                           t-att-value="currentOrder.delivery_phone"
                           t-on-change="(ev) => this.onDeliveryFieldChange('phone', ev)"/>
                    <textarea class="form-control form-control-sm" rows="2"
                              placeholder="Delivery notes (gate code, floor...)"
                              t-att-value="currentOrder.delivery_notes"
                              t-on-change="(ev) => this.onDeliveryFieldChange('notes', ev)"/>
                </div>

            </div>
        </t>
    </t>

    <!-- Inject ChannelPanel into the left pane of ProductScreen, above OrderWidget -->
    <t t-name="point_of_sale.ProductScreen"
       t-inherit="point_of_sale.ProductScreen"
       t-inherit-mode="extension" owl="1">
        <xpath expr="//div[hasclass('leftpane')]//OrderWidget" position="before">
            <ChannelPanel/>
        </xpath>
    </t>

</templates>
