<div class="portal-content-wrapper">
    {{#let (and this.newOrder this.map) as |isCreatingOrder|}}
        <div id="fleetops-customer-orders-container" class="flex {{if isCreatingOrder 'collapse-sidebar'}}">
            <div id="fleetops-customer-orders-sidebar" class="w-1/4 transition-all duration-500">
                <div class="customer-orders-section-header">
                    <div class="flex flex-row items-center justify-between mb-4">
                        <div class="flex flex-row items-center">
                            <div>
                                <h1 class="text-lg font-bold">Orders</h1>
                            </div>
                            {{#if this.searchOrders.isRunning}}
                                <div class="ml-2">
                                    <Spinner />
                                </div>
                            {{/if}}
                        </div>
                        <div>
                            <Button @icon="paper-plane" @type="primary" @text="Create new order" @onClick={{this.startOrderCreation}} />
                        </div>
                    </div>
                    <div class="mb-6">
                        <Input @value={{this.query}} class="form-input form-input-lg w-full" {{on "input" (perform this.searchOrders)}} placeholder="Search orders" />
                    </div>
                    <div class="customer-orders-list-content overflow-y-scroll pl-2 pr-4 pt-2" {{set-height "680px"}}>
                        <div class="space-y-4">
                            {{#if this.loadCustomerOrders.isRunning}}
                                <Spinner @loadingMessage="Loading orders..." @loadingMessageClass="dark:text-gray-100 test-sm ml-2" class="flex flex-row items-center" />
                            {{/if}}
                            {{#each this.orders as |order|}}
                                <OrderProgressCard
                                    @order={{order}}
                                    @onClick={{fn this.viewOrder order (hash resetOrderRoute=(not (is-empty this.selectedOrder)))}}
                                    @onTrackerDataLoaded={{this.onTrackerDataLoaded}}
                                    disabled={{is-object this.newOrder}}
                                    class="{{if (eq this.selectedOrder.id order.id) 'active'}}"
                                />
                            {{/each}}
                            <Spacer @height="200px" />
                        </div>
                    </div>
                </div>
            </div>
            <div id="fleetops-customer-orders-main-content" class="w-3/4 transition-all duration-500">
                {{#if (or this.selectedOrder this.newOrder)}}
                    {{#if this.mapReady}}
                        <div class="customer-live-map-wrapper">
                            <LeafletMap
                                class={{@mapClass}}
                                @lat={{this.latitude}}
                                @lng={{this.longitude}}
                                @zoom={{this.zoom}}
                                @zoomControl={{@zoomControl}}
                                @onLoad={{this.setupMap}}
                                ...attributes
                                as |layers|
                            >
                                <layers.tile @url={{this.tileSourceUrl}} />
                                {{#if this.selectedOrder}}
                                    {{#let this.selectedOrder.driver_assigned as |driver|}}
                                        {{#if driver}}
                                            <layers.tracking-marker
                                                @id={{driver.id}}
                                                @publicId={{driver.public_id}}
                                                @location={{driver.coordinates}}
                                                @rotationAngle={{driver.heading}}
                                                @icon={{icon iconUrl=(or driver.vehicle_avatar (config "defaultValues.vehicleAvatar")) iconSize=(array 24 24)}}
                                                @onAdd={{this.startTrackingDriverPosition}}
                                                as |marker|
                                            >
                                                <marker.popup @maxWidth="500" @minWidth="225">
                                                    <div class="flex flex-row">
                                                        <div class="flex-1">
                                                            <div class="text-xs font-semibold">{{driver.name}}</div>
                                                            <div class="text-xs">Status:
                                                                <span class="{{if driver.online 'text-green-500' 'text-red-400'}}">{{if driver.online "Online" "Offline"}}</span></div>
                                                            <div class="text-xs truncate">Pos: {{driver.positionString}}</div>
                                                        </div>
                                                    </div>
                                                </marker.popup>
                                                <marker.tooltip @permanent={{false}} @sticky={{true}}>
                                                    <div class="flex items-center space-x-1">
                                                        <div class="text-xs font-semibold">{{driver.name}}</div>
                                                        <div>•</div>
                                                        <div class="text-xs {{if driver.online 'text-green-500' 'text-red-400'}}">{{if driver.online "Online" "Offline"}}</div>
                                                    </div>
                                                    <div class="text-xs truncate"><FaIcon @icon="location-dot" @size="xs" class="mr-0.5" />{{driver.positionString}}</div>
                                                </marker.tooltip>
                                            </layers.tracking-marker>
                                        {{/if}}
                                    {{/let}}
                                {{/if}}
                            </LeafletMap>

                            {{#if isCreatingOrder}}
                                <Customer::CreateOrderForm
                                    @order={{this.newOrder}}
                                    @onCancel={{this.cancelOrderCreation}}
                                    @onOrderCreated={{this.onOrderCreated}}
                                    @map={{this.map}}
                                    @latitude={{this.latitude}}
                                    @longitude={{this.longitude}}
                                />
                            {{/if}}

                            {{#if this.selectedOrder}}
                                {{#let this.selectedOrder as |order|}}
                                    <div class="customer-order-details-container">
                                        <div class="customer-order-details">
                                            <div class="flex flex-row justify-between">
                                                <div>
                                                    <ClickToCopy @value={{order.tracking_number.tracking_number}}>
                                                        <h1 class="font-bold text-sm">{{order.tracking_number.tracking_number}}</h1>
                                                    </ClickToCopy>
                                                    <div class="flex flex-row">
                                                        <div class="text-xs font-semibold mr-1">Date Created:</div>
                                                        <div class="text-xs">{{order.createdAtShort}}</div>
                                                    </div>
                                                </div>
                                                <div>
                                                    <div class="flex flew-row space-x-2">
                                                        <Button @helpText="View Label" @icon="print" @onClick={{this.viewOrderLabel}} />
                                                        <Button @helpText="View Route" @icon="route" @onClick={{this.locateOrderRoute}} />
                                                        <Button @helpText="Locate Driver" @icon="truck" @onClick={{this.locateDriver}} @disabled={{not order.has_driver_assigned}} />
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="customer-order-details-seperator"></div>
                                            <div>
                                                <div class="flex flex-row justify-between mb-2 ml-1">
                                                    <div class="flex-1">
                                                        <h1 class="font-bold text-sm">Activity:</h1>
                                                    </div>
                                                    <div>
                                                        <div
                                                            class="rounded-md
                                                                {{if order.has_driver_assigned 'bg-green-300 text-green-900' 'bg-yellow-300 text-yellow-900'}}
                                                                px-2 py-0.5 text-xs flex-grow-0"
                                                        >
                                                            {{#if order.has_driver_assigned}}
                                                                <span>Driver Assigned</span>
                                                            {{else}}
                                                                <span>No Driver Assigned</span>
                                                            {{/if}}
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="space-y-2">
                                                    {{#each order.tracking_statuses as |trackingStatus|}}
                                                        <div class="activity-detail">
                                                            <div class="flex flex-row space-x-1">
                                                                <h3 class="font-semibold text-sm">{{trackingStatus.status}}</h3>
                                                                <div class="text-sm">{{trackingStatus.createdAtShortWithTime}}</div>
                                                            </div>
                                                            <div class="text-sm">{{n-a trackingStatus.details}}</div>
                                                        </div>
                                                    {{else}}
                                                        <div class="px-10 py-2 flex items-center justify-center">
                                                            <p class="text-red-600 dark:text-red-100">{{t "fleet-ops.operations.orders.index.view.no-order-activity"}}</p>
                                                        </div>
                                                    {{/each}}
                                                </div>
                                            </div>
                                            <div class="customer-order-details-seperator"></div>
                                            <div>
                                                <div class="mb-2 ml-1">
                                                    <h1 class="font-bold text-sm">Items:</h1>
                                                </div>
                                                {{#if order.isMultipleDropoffOrder}}
                                                    <div class="flex flex-col space-y-2 overflow-y-scroll" {{set-max-height "330px"}}>
                                                        {{#each order.payload.entitiesByDestination as |group|}}
                                                            <div class="item-detail">
                                                                <div class="flex flex-row justify-between flex-grow-0">
                                                                    <div class="flex flex-col" {{set-width "140px"}}>
                                                                        <DisplayPlace @place={{group.waypoint}} @addressClass="text-xs truncate" />

                                                                    </div>
                                                                    <div class="flex flex-col items-end flex-grow-0 space-y-1">
                                                                        <ClickToCopy
                                                                            @value={{group.waypoint.tracking}}
                                                                            class="rounded-md bg-yellow-300 text-yellow-900 px-2 py-0.5 text-xs flex-grow-0 truncate"
                                                                        >
                                                                            <span>{{t "fleet-ops.operations.orders.index.view.tracking"}}</span>
                                                                            <span>{{group.waypoint.tracking}}</span>
                                                                        </ClickToCopy>
                                                                        <Badge @status={{group.waypoint.status_code}} />
                                                                    </div>
                                                                </div>
                                                                <div class="customer-order-details-seperator"></div>
                                                                <div class="flex flex-col space-y-2">
                                                                    {{#each group.entities as |entity index|}}
                                                                        <div class="flex flex-row">
                                                                            <div class="w-20 shrink-0">
                                                                                <Image src={{entity.photo_url}} class="w-14 h-14 rounded-md shadow-sm" alt={{entity.name}} />
                                                                            </div>
                                                                            <div class="flex-1">
                                                                                <div class="text-sm font-bold">{{n-a entity.name (concat "Item " (add index 1))}}</div>
                                                                                <div class="text-xs">
                                                                                    <span class="font-semibold">Description:</span>
                                                                                    <span>{{n-a entity.description "No description provided."}}</span>
                                                                                </div>
                                                                                <ClickToCopy @value={{entity.tracking}} class="text-xs"><span class="font-semibold">Tracking:</span>
                                                                                    {{n-a entity.tracking}}
                                                                                </ClickToCopy>
                                                                                {{#if entity.price}}
                                                                                    <div class="text-xs">
                                                                                        <span class="font-semibold">Price:</span>
                                                                                        <span>{{format-currency entity.price entity.currency}}</span>
                                                                                    </div>
                                                                                {{/if}}
                                                                            </div>
                                                                        </div>
                                                                    {{/each}}
                                                                </div>
                                                                <div class="customer-order-details-seperator"></div>
                                                                <div class="flex">
                                                                    <Button @helpText="View Label" @icon="print" @size="sm" @onClick={{fn this.viewWaypointLabel group.waypoint}} />
                                                                </div>
                                                            </div>
                                                        {{else}}
                                                            <div class="text-xs text-gray-500 px-2">None</div>
                                                        {{/each}}
                                                    </div>
                                                {{else}}
                                                    <div class="flex flex-col space-y-2">
                                                        {{#each order.payload.entities as |entity index|}}
                                                            <div class="item-detail">
                                                                <div class="flex flex-row">
                                                                    <div class="w-20 shrink-0">
                                                                        <Image src={{entity.photo_url}} class="w-14 h-14 rounded-md shadow-sm" alt={{entity.name}} />
                                                                    </div>
                                                                    <div class="flex-1">
                                                                        <div class="text-sm font-bold">{{n-a entity.name (concat "Item " (add index 1))}}</div>
                                                                        <div class="text-xs">
                                                                            <span class="font-semibold">Description:</span>
                                                                            <span>{{n-a entity.description "No description provided."}}</span>
                                                                        </div>
                                                                        <ClickToCopy @value={{entity.tracking}} class="text-xs">
                                                                            <span class="font-semibold">Tracking:</span>
                                                                            <span>{{n-a entity.tracking}}</span>
                                                                        </ClickToCopy>
                                                                        {{#if entity.price}}
                                                                            <div class="text-xs">
                                                                                <span class="font-semibold">Price:</span>
                                                                                <span>{{format-currency entity.price entity.currency}}</span>
                                                                            </div>
                                                                        {{/if}}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        {{else}}
                                                            <div class="text-xs text-gray-500 px-2">None</div>
                                                        {{/each}}
                                                    </div>
                                                {{/if}}
                                            </div>
                                            {{#if order.purchase_rate}}
                                                <div class="customer-order-details-seperator"></div>
                                                <div>
                                                    <div class="mb-2 ml-1">
                                                        <h1 class="font-bold text-sm">Service Fee's:</h1>
                                                    </div>
                                                    <div>
                                                        <div class="order-view-purchase-rate-table-wrapper next-table-wrapper no-scroll h-auto table-fluid rounded-b-md">
                                                            <table id="order-view-purchase-rate-table" class="table table-fixed flex-1">
                                                                <thead>
                                                                    <tr>
                                                                        <th class="text-left">{{t "fleet-ops.operations.orders.index.new.breakdown"}}</th>
                                                                        <th>
                                                                            <div class="flex flex-row items-center justify-end">{{order.purchase_rate.service_quote.currency}}</div>
                                                                        </th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    {{#each order.purchase_rate.service_quote.items as |item|}}
                                                                        <tr>
                                                                            <td>
                                                                                <span class="font-semibold">{{smart-humanize item.details}}</span>
                                                                            </td>
                                                                            <td>
                                                                                <div class="flex flex-row items-center justify-end">{{format-currency
                                                                                        item.amount
                                                                                        order.purchase_rate.service_quote.currency
                                                                                    }}</div>
                                                                            </td>
                                                                        </tr>
                                                                    {{/each}}
                                                                    <tr class="border-b-0">
                                                                        <td class="border-b-0">
                                                                            <span class="font-semibold">{{t "fleet-ops.common.total"}}</span>
                                                                        </td>
                                                                        <td class="border-b-0">
                                                                            <div class="flex flex-row items-center justify-end">{{format-currency
                                                                                    order.purchase_rate.service_quote.amount
                                                                                    order.purchase_rate.service_quote.currency
                                                                                }}</div>
                                                                        </td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                            {{/if}}
                                        </div>
                                    </div>
                                {{/let}}
                            {{/if}}
                        </div>
                    {{else}}
                        <div class="flex-1 w-full h-full flex items-center justify-center">
                            <Spinner @loadingMessage="Loading order details..." @loadingMessageClass="dark:text-gray-100 test-sm ml-2" class="flex flex-row items-center" />
                        </div>
                    {{/if}}
                {{else}}
                    <div class="flex-1 w-full h-full flex items-center justify-center">
                        <div class="text-base">Select an Order to view Details</div>
                    </div>
                {{/if}}
            </div>
        </div>
        <div id="customer-portal-content-wormhole"></div>
    {{/let}}
</div>