{{! template-lint-disable no-unbound }}
<Layout::Section::Header @title={{t "storefront.common.orders"}} @onSearch={{this.search}} />

<Layout::Section::Body>
    {{#if this.loadOrders.isRunning}}
        <div class="px-3 py-2">
            <Spinner class="text-sky-400" />
        </div>
    {{/if}}
    <div class="hidden md:flex table-wrapper table-fluid">
        <table>
            <thead>
                <tr class="h-12 text-left py-1">
                    <th>{{t "storefront.component.widget.orders.id-column"}}</th>
                    <th>{{t "storefront.common.amount"}}</th>
                    <th>{{t "storefront.common.driver"}}</th>
                    <th>{{t "storefront.common.created"}}</th>
                    <th>{{t "storefront.common.status"}}</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {{#each this.orders as |order|}}
                    <tr class="h-12">
                        <td><a href="javascript:;" {{on "click" (fn this.viewOrder order)}}>{{order.public_id}}</a></td>
                        <td>{{format-currency order.meta.total order.meta.currency}}</td>
                        <td>{{n-a order.driver_name}}</td>
                        <td>{{order.createdAgo}}</td>
                        <td>
                            <Badge @status={{order.status}} />
                        </td>
                        <td>
                            <div>
                                {{#if order.isFresh}}
                                    <Button
                                        @size="xs"
                                        @type="success"
                                        @iconPrefix="fas"
                                        @icon="check"
                                        @text={{concat (t "storefront.component.widget.orders.accept-order") "!"}}
                                        @onClick={{fn this.acceptOrder order}}
                                    />
                                {{/if}}
                                {{#if (eq order.status "accepted")}}
                                    <Button
                                        @size="xs"
                                        @type="success"
                                        @icon="bell-concierge"
                                        @text={{t "storefront.component.widget.orders.mark-as-ready"}}
                                        @onClick={{fn this.markAsReady order}}
                                    />
                                {{/if}}
                                {{#if order.isPickupReady}}
                                    <Button
                                        @size="xs"
                                        @type="success"
                                        @icon="check"
                                        @text={{t "storefront.component.widget.orders.mark-as-completed"}}
                                        @onClick={{fn this.markAsCompleted order}}
                                    />
                                {{/if}}
                            </div>
                            <div>
                                <Button @size="xs" @type="danger" @icon="ban" @text="Cancel" @onClick={{fn this.cancelOrder order}} />
                            </div>
                        </td>
                    </tr>
                {{/each}}
            </tbody>
        </table>
    </div>
    <div class="flex flex-col md:hidden p-3 space-y-3">
        {{#each this.orders as |order|}}
            <div class="py-2 px-3 rounded-md border border-gray-400 dark:border-gray-700">
                <div class="flex flex-row mb-3">
                    <div class="flex-1">
                        <a href="javascript:;" {{on "click" (fn this.viewOrder order)}} class="font-semibold">{{order.public_id}}</a>
                        <div>{{order.createdAt}}</div>
                        <div>{{order.createdAgo}}</div>
                    </div>
                    <div class="flex-shrink-0 flex flex-col text-right">
                        <Badge class="mb-1" @status={{order.status}} />
                        <div>{{format-currency order.meta.total order.meta.currency}}</div>
                    </div>
                </div>
                <div class="flex flex-row space-x-2 flex-wrap">
                    <Button @size="xs" @type="primary" @icon="eye" @text={{t "storefront.common.view"}} @onClick={{fn this.viewOrder order}} />
                    <Button
                        @size="xs"
                        @type="default"
                        @icon="id-card"
                        @text={{if order.has_driver_assigned (t "storefront.component.widget.order.change-driver") (t "storefront.component.widget.order.assign-driver")}}
                        @onClick={{fn this.assignDriver order}}
                    />
                    {{#if order.isFresh}}
                        <Button
                            @size="xs"
                            @type="success"
                            @iconPrefix="fas"
                            @icon="check"
                            @text={{concat (t "storefront.component.widget.orders.accept-order") "!"}}
                            @onClick={{fn this.acceptOrder order}}
                        />
                    {{/if}}
                    {{#if (eq order.status "accepted")}}
                        <Button @size="xs" @type="success" @icon="bell-concierge" @text={{t "storefront.component.widget.orders.mark-as-mark"}} @onClick={{fn this.markAsReady order}} />
                    {{/if}}
                    {{#if order.isPickupReady}}
                        <Button @size="xs" @type="success" @icon="check" @text={{t "storefront.component.widget.orders.mark-as-completed"}} @onClick={{fn this.markAsCompleted order}} />
                    {{/if}}
                </div>
                <ContentPanel @title={{t "storefront.component.widget.orders.title"}} class="mt-2">
                    <div class="flex flex-col py-2 border-t dark:border-gray-800">
                        <div>{{t "storefront.component.widget.orders.customer"}}: {{n-a order.customer_name}}</div>
                        <div>{{t "storefront.component.widget.orders.driver"}}: {{n-a order.driver_name}}</div>
                    </div>
                    <div class="py-2 space-y-2 border-t dark:border-gray-800">
                        <div class="flex items-center justify-between">
                            <span class="dark:text-gray-50">{{t "storefront.component.widget.orders.subtotal"}}</span>
                            <span class="dark:text-gray-50">{{format-currency order.meta.subtotal order.meta.currency}}</span>
                        </div>
                        {{#unless order.meta.is_pickup}}
                            <div class="flex items-center justify-between">
                                <span class="dark:text-gray-50">{{t "storefront.component.widget.orders.delivery-fee"}}</span>
                                <span class="dark:text-gray-50">{{format-currency order.meta.delivery_fee order.meta.currency}}</span>
                            </div>
                        {{/unless}}
                        {{#if order.meta.tip}}
                            <div class="flex items-center justify-between">
                                <span class="dark:text-gray-50">{{t "storefront.component.widget.order.tip"}}</span>
                                <span class="dark:text-gray-50">{{get-tip-amount order.meta.tip order.meta.subtotal order.meta.currency}}</span>
                            </div>
                        {{/if}}
                        {{#if order.meta.delivery_tip}}
                            <div class="flex items-center justify-between">
                                <span class="dark:text-gray-50">{{t "storefront.component.widget.order.delivery-tip"}}</span>
                                <span class="dark:text-gray-50">{{get-tip-amount order.meta.delivery_tip order.meta.subtotal order.meta.currency}}</span>
                            </div>
                        {{/if}}
                        <div class="flex items-center justify-between">
                            <span class="dark:text-gray-50 font-bold">{{t "storefront.component.widget.order.tip"}}</span>
                            <span class="dark:text-gray-50 font-bold">{{format-currency order.meta.total order.meta.currency}}</span>
                        </div>
                    </div>
                </ContentPanel>
            </div>
        {{/each}}
    </div>
</Layout::Section::Body>