<Overlay @onLoad={{this.setOverlayContext}} @onOpen={{this.onOpen}} @onClose={{this.onClose}} @onToggle={{this.onToggle}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizeble={{or this.isResizable @isResizable}} @width={{or this.width @width "570px"}}>
    <Overlay::Header @title={{concat "Edit Order: " this.order.public_id " Route"}}>
        <Button @type="primary" @icon="check" @text="Save" @helpText="Save order route changes" @onClick={{perform this.save}} @isLoading={{this.save.isRunning}} @wrapperClass="mr-2" />
        <Button @type="default" @icon="times" @helpText={{t "fleet-ops.common.cancel"}} @onClick={{this.onPressCancel}} />
    </Overlay::Header>

    <Overlay::Body>
        <div class="p-4">
            <div class="flex flex-row justify-between mb-6">
                <div class="flex">
                    <Toggle @isToggled={{this.order.payload.isMultiDrop}} @onToggle={{this.toggleMultiDropOrder}} @label={{t "fleet-ops.component.modals.order-route-form.toggle"}} />
                </div>
                <div class="flex flex-1 justify-end space-x-2">
                    {{#if this.order.payload.isMultiDrop}}
                        {{!-- <Button @type="magic" @icon="magic" @text={{t "fleet-ops.component.modals.order-route-form.optimize"}} @size="sm" @onClick={{fn this.optimizeRoute}} @helpText={{t "fleet-ops.component.modals.order-route-form.optimize-text"}} @disabled={{lt this.order.payload.waypoints.length 3}} @isLoading={{this.isOptimizingRoute}} /> --}}
                        <Button @icon="map-marked-alt" @text={{t "fleet-ops.component.modals.order-route-form.add"}} @size="sm" @onClick={{this.addWaypoint}} @helpText={{t "fleet-ops.component.modals.order-route-form.add-text"}} />
                    {{/if}}
                </div>
            </div>

            {{#if this.order.payload.isMultiDrop}}
                <DragSortList class="overflow-visible" @items={{this.order.payload.waypoints}} @dragEndAction={{this.sortWaypoints}} as |waypoint index|>
                    <div id={{concat "waypoint_" (add index 1)}} class="py-1 mb-3">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center justify-between cursor-move">
                                <FaIcon @icon="grip-lines" @prefix="fas" class="mr-3 text-gray-100" />
                                <label class="waypoint-label dark:text-gray-100 text-sm">
                                    {{waypoint-label (add index 1)}}
                                </label>
                            </div>

                            <div class="flex-1 px-4">
                                <ModelSelect @modelName="place" @selectedModel={{waypoint}} @placeholder={{concat (t "fleet-ops.operations.orders.index.new.select-waypoint-placeholder") " " (add index 1)}} @triggerClass="form-select form-input truncate max-w-300px" @infiniteScroll={{false}} @customSearchEndpoint="places/search" @query={{hash geo=true latitude=this.latitude longitude=this.longitude}} @renderInPlace={{true}} @onChange={{fn this.setWaypointPlace index}} as |model|>
                                    {{model.address}}
                                </ModelSelect>

                                {{#unless waypoint.isNew}}
                                    {{#if waypoint.hasInvalidCoordinates}}
                                        <div class="leading-5 text-sm text-red-400 mt-2">
                                            <FaIcon @icon="exclamation-triangle" class="mr-1" />
                                            {{t "fleet-ops.component.modals.order-route-form.invalid"}}
                                        </div>
                                    {{/if}}
                                {{/unless}}
                            </div>

                            <div class="flex items-center">
                                <Button class="mr-2" @icon="edit" @size="sm" @onClick={{fn this.editPlace waypoint}} />
                                <Button @type="danger" @icon="trash" @iconPrefix="fas" @size="sm" @onClick={{fn this.removeWaypoint waypoint}} />
                            </div>
                        </div>
                    </div>
                </DragSortList>
            {{else}}
                <div class="grid grid-cols-1 gap-3 text-xs dark:text-gray-100">
                    <div class="input-group">
                        <div class="flex items-center justify-between">
                            <label>{{t "fleet-ops.component.modals.order-route-form.pickup"}}</label>

                            {{#if this.order.payload.pickup}}
                                <a href="javascript:;" {{on "click" (fn this.editPlace this.order.payload.pickup)}}>{{t "fleet-ops.component.modals.order-route-form.edit-address"}}</a>
                            {{/if}}
                        </div>

                        <ModelSelect @modelName="place" @selectedModel={{this.order.payload.pickup}} @placeholder={{t "fleet-ops.component.modals.order-route-form.select-pickup"}} @triggerClass="form-select form-input" @infiniteScroll={{false}} @customSearchEndpoint="places/search" @query={{hash geo=true latitude=this.latitude longitude=this.longitude}} @renderInPlace={{true}} @onChange={{fn this.setPayloadPlace "pickup"}} as |model|>
                            {{model.address}}
                        </ModelSelect>

                        {{#if this.order.payload.pickup.hasInvalidCoordinates}}
                            <div class="leading-5 text-sm text-red-400 mt-2">
                                <FaIcon @icon="exclamation-triangle" class="mr-1" />
                                {{t "fleet-ops.component.modals.order-route-form.invalid"}}
                            </div>
                        {{/if}}
                    </div>

                    <div class="input-group">
                        <div class="flex items-center justify-between">
                            <label>{{t "fleet-ops.component.modals.order-route-form.dropoff"}}</label>

                            {{#if this.order.payload.dropoff}}
                                <a href="javascript:;" {{on "click" (fn this.editPlace this.order.payload.dropoff)}}>{{t "fleet-ops.component.modals.order-route-form.edit-address"}}</a>
                            {{/if}}
                        </div>

                        <ModelSelect @modelName="place" @selectedModel={{this.order.payload.dropoff}} @placeholder={{t "fleet-ops.component.modals.order-route-form.select-dropoff"}} @triggerClass="form-select form-input" @infiniteScroll={{false}} @customSearchEndpoint="places/search" @query={{hash geo=true latitude=this.latitude longitude=this.longitude}} @renderInPlace={{true}} @onChange={{fn this.setPayloadPlace "dropoff"}} as |model|>
                            {{model.address}}
                        </ModelSelect>

                        {{#if this.order.payload.dropoff.hasInvalidCoordinates}}
                            <div class="leading-5 text-sm text-red-400 mt-2">
                                <FaIcon @icon="exclamation-triangle" class="mr-1" />
                                {{t "fleet-ops.component.modals.order-route-form.invalid"}}
                            </div>
                        {{/if}}
                    </div>

                    <div class="input-group">
                        <div class="flex items-center justify-between">
                            <label>{{t "fleet-ops.component.modals.order-route-form.return"}}</label>

                            {{#if this.order.payload.return}}
                                <a href="javascript:;" {{on "click" (fn this.editPlace this.order.payload.return)}}>{{t "fleet-ops.component.modals.order-route-form.edit-address"}}</a>
                            {{/if}}
                        </div>

                        <ModelSelect @modelName="place" @selectedModel={{this.order.payload.return}} @placeholder={{t "fleet-ops.component.modals.order-route-form.select-return"}} @triggerClass="form-select form-input" @infiniteScroll={{false}} @customSearchEndpoint="places/search" @query={{hash geo=true latitude=this.latitude longitude=this.longitude}} @renderInPlace={{true}} @onChange={{fn this.setPayloadPlace "return"}} as |model|>
                            {{model.address}}
                        </ModelSelect>

                        {{#if this.order.payload.return.hasInvalidCoordinates}}
                            <div class="leading-5 text-sm text-red-400 mt-2">
                                <FaIcon @icon="exclamation-triangle" class="mr-1" />
                                {{t "fleet-ops.component.modals.order-route-form.invalid"}}
                            </div>
                        {{/if}}
                    </div>
                </div>
            {{/if}}
        </div>
        <Spacer @height="300px" />
    </Overlay::Body>
</Overlay>