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

<Layout::Section::Body>
    <div class="p-4">

        {{#if this.isLoading}}
            <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>
                                {{#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 order.isPreparing}}
                                    <Button @size="xs" @type="success" @icon="bells" @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}}
                            </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="steering-wheel"
                            @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 order.isPreparing}}
                            <Button @size="xs" @type="success" @icon="bells" @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>
    </div></Layout::Section::Body>