<Overlay @onLoad={{@onLoad}} position="right" @noBackdrop={{true}} @width="550px" @fullHeight={{true}} @isResizable={{true}} as |overlay|>
    <Overlay::Header
        @overlay={{overlay}}
        @title={{@order.public_id}}
        @status={{@order.status}}
        @dispatched={{@order.dispatched}}
        @createdAt={{@order.createdAt}}
        @onPressCancel={{@onPressCancel}}
    />

    <Overlay::Body @wrapperClass="new-order-overlay-body">
        <ContentPanel @title={{t "storefront.orders.index.view.activity"}} @open={{true}} @pad={{false}} @panelBodyWrapperClass="px-0 py-4" @panelBodyClass="bg-white dark:bg-gray-800">
            {{#if @order.tracking_statuses}}
                <Timeline @activity={{@order.tracking_statuses}} @arrowClass="bg-gray-600 border border-gray-900 shadow-md" as |TimelineItem|>
                    <TimelineItem @activeStatus={{@order.status}} as |trackingStatus|>
                        <div class="flex flex-col px-3 py-2 rounded text-sm leading-4 space-y-2 bg-gray-100 dark:bg-gray-900 dark:text-white">
                            <div class="flex flex-col space-y-1">
                                <div class="text-xs font-semibold truncate">{{trackingStatus.status}}</div>
                                <div class="text-xs truncate">{{n-a trackingStatus.details}}</div>
                                <div class="text-xs">{{trackingStatus.createdAtShortWithTime}}</div>
                            </div>
                            <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
                                <InputInfo>
                                    <div class="text-xs">{{or trackingStatus.details trackingStatus.status}}</div>
                                    <div class="text-xs">{{trackingStatus.createdAtShortWithTime}}</div>
                                </InputInfo>
                            </Attach::Tooltip>
                        </div>
                    </TimelineItem>
                </Timeline>
            {{else}}
                <div class="px-10 py-2 flex items-center justify-center">
                    <p class="text-red-600 dark:text-red-100">{{t "storefront.orders.index.view.unable-load-order-activity"}}</p>
                </div>
            {{/if}}
        </ContentPanel>

        <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800" @actionButtons={{this.detailPanelButtons}}>
            <div class="flex mb-4 space-x-2">
                {{#if @order.dispatched}}
                    <Badge @hideStatusDot={{false}} @status="Dispatched" />
                {{/if}}
                {{#if @order.adhoc}}
                    <Badge @hideStatusDot={{false}} @disableHumanize={{true}} @status="success">{{t "storefront.orders.index.view.ad-hoc"}}</Badge>
                {{/if}}
            </div>
            <div class="grid grid-cols-2 lg:grid-cols-3 field-info-containers-darker gap-4 lg:gap-2">
                <div class="field-info-container space-y-2">
                    <div class="field-name">{{t "storefront.orders.index.view.customer"}}</div>
                    <div class="flex flex-row">
                        <div>
                            <Image
                                src={{avatar-url @order.customer.photo_url}}
                                @fallbackSrc={{config "defaultValues.contactImage"}}
                                class="w-8 h-8 rounded-md shadow-sm mr-2"
                                alt={{@order.customer.name}}
                            />
                        </div>
                        <div>
                            <div class="field-value">{{n-a @order.customer.name "No Customer"}}</div>
                            {{#if @order.customer}}
                                <div>{{@order.customer.phone}}</div>
                            {{/if}}
                        </div>
                    </div>
                </div>
                <div class="field-info-container space-y-2">
                    <div class="field-name">{{t "storefront.orders.index.view.facilitator"}}</div>
                    {{#if @order.facilitator.isIntegratedVendor}}
                        <div class="flex flex-row">
                            <div>
                                <Image
                                    src={{avatar-url @order.facilitator.photo_url}}
                                    @fallbackSrc={{config "defaultValues.contactImage"}}
                                    class="w-8 h-8 rounded-md border border-gray-200 dark:border-gray-900 shadow-sm mr-2"
                                    alt={{@order.facilitator.name}}
                                />
                            </div>
                            <div>
                                <div class="field-value">{{n-a @order.facilitator.name}}</div>
                            </div>
                        </div>
                    {{else}}
                        <div class="field-value">{{n-a @order.facilitator.name "No Facilitator"}}</div>
                    {{/if}}
                </div>
                <div class="field-info-container space-y-2">
                    <div class="field-name flex flex-row items-center justify-between">
                        <span>{{t "storefront.orders.index.view.driver-assigned"}}</span>
                    </div>
                    <div>
                        <a href="javascript:;" class="flex flex-row">
                            <div>
                                <Image
                                    src={{avatar-url @order.driver_assigned.photo_url}}
                                    @fallbackSrc={{config "defaultValues.driverImage"}}
                                    width="32"
                                    height="32"
                                    class="w-8 h-8 rounded-md shadow-sm mr-3 lg:mr-2"
                                    alt={{@order.driver_assigned.name}}
                                />
                            </div>
                            <div class="field-value">
                                <div>{{n-a @order.driver_assigned.name "No Driver"}}</div>
                                {{#if @order.driver_assigned}}
                                    <div>{{@order.driver_assigned.phone}}</div>
                                {{/if}}
                            </div>
                        </a>
                        <div class="mt-1">
                            <Button
                                @size="xs"
                                @type="default"
                                @icon="edit"
                                @text={{if @order.has_driver_assigned (t "storefront.orders.index.view.change-driver") (t "storefront.orders.index.view.assign-driver")}}
                                @onClick={{fn this.assignDriver @order}}
                            />
                        </div>
                    </div>
                </div>
                <div class="field-info-container space-y-2">
                    <div class="field-name">{{t "storefront.common.internal-id"}}</div>
                    <div class="field-value">{{n-a @order.internal_id}}</div>
                </div>
                <div class="field-info-container space-y-2">
                    <div class="field-name">{{t "storefront.orders.index.view.tracking-number"}}</div>
                    <div class="field-value">{{n-a @order.tracking_number.tracking_number}}</div>
                </div>
                <div class="field-info-container space-y-2">
                    <div class="field-name">{{t "storefront.common.type"}}</div>
                    <div class="field-value">
                        <Badge @status="default">{{n-a (humanize @order.type)}}</Badge>
                    </div>
                </div>
                <div class="field-info-container space-y-2">
                    <div class="field-name">{{t "storefront.orders.index.view.date-scheduled"}}</div>
                    <div class="field-value">{{n-a @order.scheduledAt}}</div>
                </div>
                <div class="field-info-container space-y-2">
                    <div class="field-name">{{t "storefront.orders.index.view.date-dispatched"}}</div>
                    <div class="field-value">{{n-a @order.dispatchedAt}}</div>
                </div>
                <div class="field-info-container space-y-2">
                    <div class="field-name">{{t "storefront.orders.index.view.date-started"}}</div>
                    <div class="field-value">{{n-a @order.startedAt}}</div>
                </div>
                {{#if @order.pod_required}}
                    <div class="field-info-container space-y-2">
                        <div class="field-name">{{t "storefront.orders.index.view.proof-of-delivery"}}</div>
                        <div class="field-value">{{n-a (smart-humanize @order.pod_method)}}</div>
                    </div>
                {{/if}}
            </div>
        </ContentPanel>
        {{!-- 
        {{#if @order.order_config}}
            {{#each this.customFieldGroups as |group|}}
                <ContentPanel @title={{group.name}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                    <div class="grid grid-cols-{{or group.meta.grid_size 1}} gap-2">
                        {{#each group.customFields as |customField|}}
                            <div class="field-info-container space-y-2">
                                <div class="field-name">{{customField.label}}</div>
                                {{#if (and (eq customField.type "file-upload") customField.value.asFile)}}
                                    <File @file={{customField.value.asFile}} @onDelete={{fn this.removeCustomFieldFile customField.value}} class="custom-field-file" />
                                {{else}}
                                    <div class="field-value">{{n-a customField.value.value}}</div>
                                {{/if}}
                            </div>
                        {{/each}}
                    </div>
                </ContentPanel>
            {{/each}}
        {{/if}} --}}

        {{#if @order.tracking_number}}
            <ContentPanel @title={{t "storefront.orders.index.view.tracking"}} @prefixTitleRight={{@order.tracking}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                <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," @order.tracking_number.qr_code}} class="w-18 h-18" alt={{@order.public_id}} />
                    </div>
                    <div class="p-2 rounded-md bg-white">
                        <img src={{concat "data:image/png;base64," @order.tracking_number.barcode}} class="w-40 h-14" alt={{@order.public_id}} />
                    </div>
                </div>
            </ContentPanel>
        {{/if}}

        <ContentPanel @title={{t "storefront.orders.index.view.route-panel-title"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
            <div class="py-2 px-6">
                <div class="flex">
                    {{#if @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 @order.payload.hasWaypoints}}
                        <RouteList @order={{@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={{@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={{@order.payload.dropoff}} @type="dropoff" @addressClass="text-sm dark:text-gray-100" @noAddressClass="text-sm" />
                                </div>
                            </div>
                        </div>
                    {{/if}}
                </div>
            </div>
        </ContentPanel>

        <StorefrontOrderSummary @order={{@order}} />

        <ContentPanel @title={{t "storefront.orders.index.view.comments-title"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800" @wrapperClass="mb-20">
            <CommentThread @subject={{@order}} @subjectType="storefront:order" />
        </ContentPanel>

        <Spacer @height="300px" />
    </Overlay::Body>
</Overlay>