<?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 p-2 border-bottom">
                <!-- Header with Collapse Toggle -->
                <div class="d-flex justify-content-between align-items-center mb-1" style="cursor: pointer;" t-on-click="() => this.state.isCollapsed = !this.state.isCollapsed">
                    <span class="fw-bold small text-muted"><i class="fa fa-cogs me-1"/> Order Channels</span>
                    <button class="btn btn-sm btn-link p-0 text-decoration-none shadow-none text-muted">
                        <i t-attf-class="fa #{this.state.isCollapsed ? 'fa-chevron-down' : 'fa-chevron-up'}"/>
                    </button>
                </div>

                <div t-if="!this.state.isCollapsed" class="d-flex flex-column gap-2 mt-2">

                <!-- Order Source Row -->
                <div class="channel-section">
                    <div class="channel-label mb-1"><i class="fa fa-list-alt me-1"></i> 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"><i class="fa fa-rocket me-1"></i> 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 shadow-sm">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <div class="fw-bold small text-muted"><i class="fa fa-map-marker text-danger"/> Delivery Address</div>
                        <button class="btn btn-sm btn-link text-primary p-0 text-decoration-none shadow-none fw-bold" 
                                style="font-size: 10px"
                                t-on-click="toggleDetails">
                            <t t-if="state.showDetails"><i class="fa fa-caret-up"/> HIDE FIELDS</t>
                            <t t-else=""><i class="fa fa-caret-down"/> EDIT MANUAL</t>
                        </button>
                    </div>

                    <!-- Partner search (always visible under Delivery) -->
                    <div class="position-relative mb-2">
                        <input type="text" class="form-control form-control-sm border-primary"
                               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 w-100 mt-1">
                            <t t-foreach="state.searchResults" t-as="partner" t-key="partner.id">
                                <div class="address-result p-2 border-bottom small list-group-item-action"
                                     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 (hidden by default) -->
                    <div t-if="state.showDetails" class="manual-address-fields mt-2 p-2 border-top bg-white rounded">
                        <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>
                    
                    <!-- Quick Info when hidden -->
                    <div t-if="!state.showDetails &amp;&amp; currentOrder.delivery_street" class="small mt-1 text-muted fst-italic">
                        <i class="fa fa-info-circle"/> 
                        <t t-esc="currentOrder.delivery_street"/>, 
                        <t t-esc="currentOrder.delivery_city"/>
                    </div>
                </div>

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

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

</templates>
