<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
    <div class="mt-4">
        <div class="py-1">
            <div class="flex flex-col items-center justify-center">
                <div class="p-2 rounded-md bg-white">
                    <img src={{concat "data:image/png;base64," @options.order.tracking_number.qr_code}} class="w-18 h-18" alt={{@options.order.public_id}} />
                </div>
                <div class="my-2.5 text-center">
                    <h2 class="dark:text-gray-100 font-semibold">{{@options.order.public_id}}</h2>
                </div>
            </div>
        </div>
        <div class="w-full my-2">
            <div class="flex px-6 py-4 border-t border-b border-gray-100 dark:border-gray-800">
                <h5 class="dark:text-gray-100 font-semibold">{{t "storefront.common.store"}}</h5>
            </div>
            <div class="flex items-start px-6 py-2">
                <img src={{@options.store.logo_url}} class="w-12 h-12 rounded-md shadow-sm mr-4" alt={{@options.store.name}} />
                <div>
                    <h5 class="font-semibold dark:text-white text-base">{{@options.store.name}}</h5>
                    <DisplayPlace @place={{@options.order.payload.pickup}} @type="store location" @addressClass="text-sm dark:text-gray-100" @noAddressClass="text-sm" />
                </div>
            </div>
        </div>
        <div class="w-full my-2">
            <div class="flex px-6 py-4 border-t border-b border-gray-100 dark:border-gray-800">
                <h5 class="dark:text-gray-100 font-semibold">{{t "storefront.component.modals.incoming-order.assigned"}}</h5>
            </div>
            <div class="flex flex-col px-6 py-2">
                {{#if @options.order.driver_assigned.id}}
                    <div class="flex items-center">
                        <img src={{@options.order.driver_assigned.photoUrl}} class="w-12 h-12 rounded-md shadow-sm mr-4" alt={{@options.order.driver_assigned.name}} />
                        <div>
                            <h5 class="font-semibold dark:text-white text-base">{{n-a @options.order.driver_assigned.displayName}}</h5>
                            <div class="font-semibold dark:text-gray-100 text-sm">{{n-a @options.order.driver_assigned.phone (t "storefront.component.modals.incoming-order.no-phone")}}</div>
                        </div>
                    </div>
                {{else}}
                    <h5 class="text-red-500 text-sm">{{t "storefront.component.modals.incoming-order.not-assigned"}}</h5>
                {{/if}}
                {{#if @options.assignDriver}}
                    <div class="mt-2.5">
                        <Button
                            @size="xs"
                            @type="default"
                            @icon="steering-wheel"
                            @text={{if
                                @options.order.has_driver_assigned
                                (t "storefront.component.modals.incoming-order.change-driver")
                                (t "storefront.component.modals.incoming-order.assign-driver")
                            }}
                            @onClick={{@options.assignDriver}}
                        />
                    </div>
                {{/if}}
            </div>
        </div>
        <div class="w-full my-2">
            <div class="flex px-6 py-4 border-t border-b border-gray-100 dark:border-gray-800">
                <div class="flex-1">
                    {{#if @options.order.meta.is_pickup}}
                        <h5 class="dark:text-gray-100 font-semibold">{{t "storefront.common.pickup"}}</h5>
                    {{else}}
                        <h5 class="dark:text-gray-100 font-semibold">{{t "storefront.common.delivery"}}</h5>
                    {{/if}}
                </div>
            </div>
            <div class="py-2 px-6">
                <div class="flex">
                    {{#if @options.order.meta.is_pickup}}
                        <div class="flex-1">
                            <div class="rounded-md bg-blue-50 mr-4">
                                <div class="rounded-t-md bg-blue-100 px-3 py-2 mb-3">
                                    <span class="text-blue-500 font-semibold text-sm truncate">{{t "storefront.component.modals.incoming-order.pickup-order"}}</span>
                                </div>
                                <div class="flex flex-row items-center mb-4 pb-4 px-3">
                                    <div class="flex items-center justify-center rounded-full bg-blue-500 w-8 h-8 mr-3">
                                        <FaIcon @icon="store-alt" class="text-white" />
                                    </div>
                                    <div class="text-xs text-blue-900 truncate">
                                        <DisplayPlace @place={{@options.order.payload.pickup}} @type="pickup" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    {{else if @options.order.payload.hasWaypoints}}
                        <RouteList @order={{@options.order}} />
                    {{else}}
                        <div class="order-route-list storefront flex-1">
                            <div class="order-route-stop">
                                <div class="order-route-stop-index">
                                    <div class="index-count">
                                        <FaIcon @prefix="fas" @icon="store-alt" />
                                    </div>
                                </div>
                                <div class="order-route-location dark:text-gray-100">
                                    <DisplayPlace @place={{@options.order.payload.pickup}} @type="pickup" @addressClass="text-sm dark:text-gray-100" @noAddressClass="text-sm" />
                                </div>
                            </div>
                            <div class="order-route-stop">
                                <div class="order-route-stop-index">
                                    <div class="index-count">
                                        <FaIcon @prefix="fas" @icon="map-marker-alt" />
                                    </div>
                                </div>
                                <div class="order-route-location dark:text-gray-100">
                                    <DisplayPlace @place={{@options.order.payload.dropoff}} @type="dropoff" @addressClass="text-sm dark:text-gray-100" @noAddressClass="text-sm" />
                                </div>
                            </div>
                        </div>
                    {{/if}}
                </div>
            </div>
        </div>
        <div class="w-full my-2 flex flex-col">
            <div class="flex px-6 py-4 border-t border-b border-gray-100 dark:border-gray-800">
                <div class="flex-1">
                    <h5 class="dark:text-gray-100 font-semibold">{{t "storefront.common.customer"}}</h5>
                </div>
            </div>
            <div class="py-2 px-6">
                <div class="mb-4 mt-2 text-sm text-blue-900 dark:text-blue-50">
                    <div class="flex flex-row">
                        <div>
                            <img src={{avatar-url @options.order.customer.photo_url}} class="w-8 h-8 rounded-md shadow-sm mr-2" alt={{@options.order.customer.name}} />
                        </div>
                        <div>
                            <div class="font-bold">{{@options.order.customer.name}}</div>
                            <div>{{@options.order.customer.email}}</div>
                            <div>{{@options.order.customer.phone}}</div>
                        </div>
                    </div>
                </div>
                {{#unless @options.order.meta.is_pickup}}
                    <div class="rounded-md bg-blue-50">
                        <div class="rounded-t-md bg-blue-100 px-3 py-2 mb-3">
                            <span class="text-blue-500 font-semibold text-sm truncate">{{t "storefront.component.modals.incoming-order.address"}}</span>
                        </div>
                        <div class="flex flex-row items-center mb-4 pb-4 px-3">
                            <div class="flex items-center justify-center rounded-full bg-blue-500 w-8 h-8 mr-3">
                                <FaIcon @icon="map-marker-alt" class="text-white" />
                            </div>
                            <div class="text-xs text-blue-900 truncate">
                                <DisplayPlace @place={{@options.order.payload.dropoff}} @type="dropoff" />
                            </div>
                        </div>
                    </div>
                {{/unless}}
            </div>
        </div>
        <div class="w-full my-2 flex flex-col">
            <div class="flex px-6 py-4 border-t border-b border-gray-100 dark:border-gray-800">
                <div class="flex-1 flex-row justify-between items-center">
                    <h5 class="dark:text-gray-100 font-semibold">{{t "storefront.component.modals.incoming-order.tracking"}}</h5>
                    <h5 class="dark:text-gray-100 font-semibold">({{@options.order.tracking}})</h5>
                </div>
            </div>
            <div class="py-2 px-6">
                <div class="flex flex-row items-center justify-center space-x-4">
                    <div class="p-2 rounded-md bg-white">
                        <img src={{concat "data:image/png;base64," @options.order.tracking_number.qr_code}} class="w-18 h-18" alt={{@options.order.public_id}} />
                    </div>
                    <div class="p-2 rounded-md bg-white">
                        <img src={{concat "data:image/png;base64," @options.order.tracking_number.barcode}} class="w-40 h-18" alt={{@options.order.public_id}} />
                    </div>
                </div>
            </div>
        </div>
        <div class="w-full my-2">
            <div class="flex items-center justify-between px-6 py-4 border-t border-b border-gray-100 dark:border-gray-800">
                <div>
                    <h5 class="dark:text-gray-100 font-semibold">{{t "storefront.component.modals.incoming-order.summary"}}</h5>
                </div>
                {{#if @options.order.payload.cod_amount}}
                    <div>
                        <FaIcon @icon="money-bill-wave" @size="sm" class="text-green-400 mr-1" />
                        <span class="font-semibold text-green-400 text-sm">{{t "storefront.common.cash"}}</span>
                    </div>
                {{/if}}
            </div>
            <div class="flex flex-col space-y-4 p-6 overflow-hidden">
                {{#each @options.order.payload.entities as |entity|}}
                    <div class="flex flex-1">
                        <div class="mr-2">
                            <div class="flex items-center justify-center w-5 h-5 border border-gray-100 dark:border-blue-400 rounded-md">
                                <span class="text-blue-400 text-xs">{{entity.meta.quantity}}x</span>
                            </div>
                        </div>
                        <div class="flex-1 flex">
                            <div class="mr-4">
                                <img src={{entity.photo_url}} class="w-12 h-12 rounded-md shadow-sm" alt={{entity.name}} />
                            </div>
                            <div>
                                <h4 class="font-semibold dark:text-gray-100 mb-1 text-sm">{{entity.name}}</h4>
                                <div class="flex flex-wrap truncate w-44">
                                    <p class="dark:text-gray-50 text-xs truncate">{{entity.description}}</p>
                                </div>
                                <div>
                                    {{#each entity.meta.variants as |variant|}}
                                        <div>
                                            <span class="text-xs dark:text-gray-50">{{variant.name}}</span>
                                        </div>
                                    {{/each}}
                                </div>
                                <div>
                                    {{#each entity.meta.addons as |addon|}}
                                        <div>
                                            <span class="text-xs dark:text-gray-50">+ {{addon.name}}</span>
                                        </div>
                                    {{/each}}
                                </div>
                            </div>
                        </div>
                        <div>
                            <span class="dark:text-gray-50 text-sm">{{format-currency entity.meta.subtotal entity.currency}}</span>
                        </div>
                    </div>
                {{/each}}
            </div>
            <div class="px-6 py-2.5 space-y-2 border-t border-b border-gray-100 dark:border-gray-800">
                <div class="flex items-center justify-between">
                    <span class="dark:text-gray-50 text-sm">{{t "storefront.component.modals.incoming-order.subtotal"}}</span>
                    <span class="dark:text-gray-50 text-sm">{{format-currency @options.order.meta.subtotal @options.order.meta.currency}}</span>
                </div>
                {{#unless @options.order.meta.is_pickup}}
                    <div class="flex items-center justify-between">
                        <span class="dark:text-gray-50 text-sm">{{t "storefront.component.modals.incoming-order.fee"}}</span>
                        <span class="dark:text-gray-50 text-sm">{{format-currency @options.order.meta.delivery_fee @options.order.meta.currency}}</span>
                    </div>
                {{/unless}}
                {{#if @options.order.meta.tip}}
                    <div class="flex items-center justify-between">
                        <span class="dark:text-gray-50 text-sm">{{t "storefront.component.modals.incoming-order.tip"}}</span>
                        <span class="dark:text-gray-50 text-sm">{{get-tip-amount @options.order.meta.tip @options.order.meta.subtotal @options.order.meta.currency}}</span>
                    </div>
                {{/if}}
                {{#if @options.order.meta.delivery_tip}}
                    <div class="flex items-center justify-between">
                        <span class="dark:text-gray-50 text-sm">{{t "storefront.component.modals.incoming-order.delivery-tip"}}</span>
                        <span class="dark:text-gray-50 text-sm">{{get-tip-amount @options.order.meta.delivery_tip @options.order.meta.subtotal @options.order.meta.currency}}</span>
                    </div>
                {{/if}}
            </div>
            <div class="px-6 py-2">
                <div class="flex items-center justify-between">
                    <span class="dark:text-gray-50 font-bold text-sm">{{t "storefront.common.total"}}</span>
                    <span class="dark:text-gray-50 font-bold text-sm">{{format-currency @options.order.meta.total @options.order.meta.currency}}</span>
                </div>
            </div>
        </div>
    </div>
</Modal::Default>