@let completedPercentage = _stopsData?.completedPercentage ?? null;
@let isPickupSplit = pickup?.stopType?.name === eSharedString.SPLIT_LOCATION;
@let isDeliverySplit = delivery?.stopType?.name === eSharedString.SPLIT_LOCATION;

<div class="d-flex align-items-center">
    <div
        class="d-flex align-items-center w-100"
        #t2="ngbPopover"
        [ngClass]="{ popoverOpen: isPopoverOpen }"
        [ngbPopover]="pickupDeliveryPopoverTemplate"
        popoverClass="load-pickup-delivery-popover"
        triggers="manual"
        [autoClose]="'outside'"
        container="body"
        [placement]="ePosition.BOTTOM"
        (click)="openPopover(t2)"
        (hidden)="closePopover(t2)"
        (shown)="isPopoverOpen = true"
    >
        <div
            class="d-flex align-items-center p-x-4 w-100 background-hover-gray br-2 c-pointer pickup-delivery-container"
            ngbTooltip
            [mainCaTooltip]="'Show Stops'"
            [tooltipMarginTop]="'-7px'"
            [tooltipBackground]="eColor.BLACK"
            [position]="ePosition.BOTTOM"
        >
            <div class="d-flex align-items-center w-50">
                <div
                    class="d-flex align-items-center justify-content-center br-1 m-r-4 user-select-none h-18 w-18 m-y-4"
                    [class]="
                        isPickupSplit
                            ? 'background-yellow-7'
                            : 'background-dark-2'
                    "
                >
                    <div
                        class="text-size-11 ca-font-bold"
                        [class]="
                            isPickupSplit
                                ? 'text-color-yellow-5'
                                : 'text-color-bw6-2'
                        "
                    >
                        {{ isPickupSplit ? 'S' : pickup.count }}
                    </div>
                </div>
                <div class="d-flex flex-column text-ellipsis">
                    <div
                        class="text-size-11 text-color-black ca-font-semi-bold text-ellipsis"
                    >
                        {{ pickup.location }}
                    </div>

                    @if (pickup.date) {
                        <div
                            class="text-size-11 text-color-muted ca-font-medium text-ellipsis m-t--2"
                        >
                            {{ pickup.date | date: eDateTimeFormats.MM_DD_YY }}

                            @if (pickup.time) {
                                <span class="pickup-time">{{
                                    pickup.time
                                }}</span>
                            }
                        </div>
                    }
                </div>
            </div>
            <div class="d-flex align-items-center w-50">
                <div
                    class="d-flex align-items-center justify-content-center br-1 m-r-4 user-select-none h-18 w-18"
                    [class]="
                        isDeliverySplit
                            ? 'background-yellow-7'
                            : 'background-dark-2'
                    "
                >
                    <div
                        class="text-size-11 ca-font-bold"
                        [class]="
                            isDeliverySplit
                                ? 'text-color-yellow-5'
                                : 'text-color-bw6-2'
                        "
                    >
                        {{ isDeliverySplit ? 'S' : delivery.count }}
                    </div>
                </div>
                <div class="d-flex flex-column text-ellipsis">
                    <div
                        class="text-size-11 text-color-black ca-font-semi-bold text-ellipsis"
                    >
                        {{ delivery.location }}
                    </div>

                    @if (delivery.date) {
                        <div
                            class="text-size-11 text-color-muted ca-font-medium text-ellipsis m-t--2"
                        >
                            {{
                                delivery.date | date: eDateTimeFormats.MM_DD_YY
                            }}

                            @if (delivery.time) {
                                <span class="pickup-time">{{
                                    delivery.time
                                }}</span>
                            }
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>
</div>

<ng-template #pickupDeliveryPopoverTemplate>
    <div
        class="d-flex align-items-center flex-column"
        [ngStyle]="{
            width: _columnWidth ? _columnWidth + 'px' : '306px',
        }"
    >
        <div
            class="d-flex align-items-center w-100 position-relative m-b-4"
        >
            <div
                class="d-flex align-items-center p-l-6 p-r-10 p-y-6 w-100 background-black-2 br-2 text-size-11 text-color-muted ca-font-bold"
            >
                <div class="d-flex align-items-center w-100 user-select-none">
                    <div class="w-22 m-r-6 text-center">
                        @if (gpsIcon) {
                            <div
                                class="d-flex"
                                [innerHTML]="gpsIcon | safeHtml"
                            ></div>
                        } @else {
                            {{ eStringPlaceholder.HASH_SIGN }}
                        }
                    </div>

                    <div
                        class="d-flex align-items-center justify-content-between flex-grow-1"
                    >
                        <div
                            class="text-uppercase"
                            [ngClass]="gpsIcon && gpsTitleClass"
                        >
                            {{ gpsIcon ? gpsTitle : 'Stop Detail' }}
                        </div>
                        <div class="d-flex justify-content-end">LEG mi</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="w-100">
            <div
                class="p-l-4 p-r-2 p-y-4 background-black-2 w-100 h-100 br-2"
            >
                <div class="load-stops-scroll-container">
                    <div class="position-relative">
                        @if (completedPercentage) {
                            <div
                                class="progress-line position-absolute w-2 background-gray-7 br-2 left-12 top-20"
                            >
                                @let progressPercentage =
                                    completedPercentage + eUnit.PERCENTAGE_SIGN;

                                <div
                                    class="progress-inner-line w-2 background-light-grey-6 br-2"
                                    [ngStyle]="{ height: progressPercentage }"
                                ></div>

                                @if (gpsLocationIcon) {
                                    <div
                                        class="position-absolute d-flex justify-content-center align-items-center h-11 translate-middle start-50"
                                        [ngStyle]="{ top: progressPercentage }"
                                        [innerHTML]="gpsLocationIcon | safeHtml"
                                    ></div>
                                }
                            </div>
                        }

                        @for (
                            stop of _stopsData?.loadStops;
                            let indx = $index;
                            track indx
                        ) {
                            <ng-container
                                *ngTemplateOutlet="
                                    loadStopDetailsTemplate;
                                    context: {
                                        stop,
                                        index: indx,
                                        hideLine:
                                            indx ===
                                            (_stopsData?.loadStops)!.length - 1,
                                    }
                                "
                            ></ng-container>
                        }
                    </div>
                </div>
                <div class="m-t-4 p-r-2">
                    <div class="w-100 h-1 background-black br-1"></div>
                    <div
                        class="d-flex align-items-center justify-content-between p-t-4 p-x-6"
                    >
                        <div class="d-flex flex-column">
                            <div class="text-size-11 text-color-white">
                                Stop
                            </div>
                            <div
                                class="text-size-11 text-color-white ca-font-bold"
                            >
                                {{ stopTypeCounts?.[eSharedString.PICKUP] }}
                                Pickup |
                                {{ stopTypeCounts?.[eSharedString.DELIVERY] }}
                                Delivery
                            </div>
                        </div>
                        <div class="d-flex flex-column align-items-end">
                            <div class="text-size-11 text-color-white">
                                Total
                            </div>
                            <div
                                class="text-size-11 text-color-white ca-font-bold"
                            >
                                {{
                                    _stopsData?.totalMiles
                                        | number
                                            : eThousandSeparatorFormat.DECIMAL_FORMAT
                                }}
                                mi
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</ng-template>

<ng-template
    #loadStopDetailsTemplate
    let-stop="stop"
    let-index="index"
    let-hideLine="hideLine"
>
    @let isDeadheadStop = stop.stopType.name === eSharedString.DEADHEAD;
    @let isPickupStop = stop.stopType.name === eSharedString.PICKUP;
    @let isDeliveryStop = stop.stopType.name === eSharedString.DELIVERY;
    @let isSplitLocationStop =
        stop.stopType.name === eSharedString.SPLIT_LOCATION;
    @let isActiveOrClosedLoad =
        [eSharedString.ACTIVE, eSharedString.CLOSED].includes(loadType);
    @let isVisitedStop =
        stop.depart || (isDeadheadStop && isActiveOrClosedLoad);
    @let stopNumberColor =
        isPickupStop
            ? 'text-color-green-4'
            : isDeliveryStop
              ? 'text-color-orange-3'
              : isSplitLocationStop
                ? 'text-color-yellow-4'
                : 'text-color-muted';
    @let stopNumberBackground =
        hoveredStopIndex === index ? 'background-black' : 'background-black-2';

    <div
        class="stop-container d-flex align-items-stretch w-100 background-hover-black br-2 p-l-2 p-r-6"
        (mouseenter)="onHoverStop(index)"
        (mouseleave)="onHoverStop(index)"
        [class.deadhead-stop]="isDeadheadStop"
    >
        <div class="d-flex align-items-center flex-column m-r-6">
            <div
                class="stop-number w-22 text-center text-size-14 ca-font-bold user-select-none p-t-2 m-b-2 position-relative z-2"
                [ngClass]="[stopNumberColor, stopNumberBackground]"
            >
                {{ isSplitLocationStop ? 'S' : stop.stopLoadOrder }}
            </div>

            @if (!hideLine && !completedPercentage) {
                <div class="background-bw-9 w-2 h-100 br-2 opacity-25"></div>
            }
        </div>

        <div
            class="position-relative d-flex justify-content-between flex-grow-1 p-t-4 m-b-2"
        >
            @let addressTextColor =
                isVisitedStop ? 'text-color-muted' : 'text-color-white';

            <div class="text-size-11">
                <div class="d-flex align-items-center">
                    <div class="ca-font-semi-bold" [ngClass]="addressTextColor">
                        {{ stop.shipper.address.city }},
                        {{ stop.shipper.address.stateShortName }}
                    </div>

                    @if (isVisitedStop) {
                        <svg-icon
                            class="d-flex svg-size-10 m-l-4"
                            [src]="sharedSvgRoutes.CHECKMARK_ICON"
                        ></svg-icon>
                    }
                </div>

                @if (loadType !== eSharedString.TEMPLATE) {
                    @if (stop.arrive) {
                        <div [ngClass]="addressTextColor">
                            {{
                                stop.arrive
                                    | dateWaitTime
                                        : stop.depart
                                        : stop.timeFrom
                                        : stop.timeTo
                            }}

                            @if (stop.wait) {
                                •
                                <span
                                    [class]="
                                        isSplitLocationStop
                                            ? 'text-color-yellow-4'
                                            : 'text-color-blue-19'
                                    "
                                >
                                    {{ stop.wait | formatDuration }}
                                </span>
                            }
                        </div>
                    } @else if (stop.dateFrom) {
                        <div class="date-from" [ngClass]="addressTextColor">
                            {{
                                stop.dateFrom
                                    | dateWaitTime
                                        : stop.dateTo
                                        : stop.timeFrom
                                        : stop.timeTo
                            }}
                        </div>

                        <div class="avg-wait-time" [ngClass]="addressTextColor">
                            Avg. wait time - {{ stop.avgWaitTime ?? '0' }} min
                        </div>
                    }
                }

                <div
                    [class.text-uppercase]="
                        !isDeadheadStop && !isSplitLocationStop
                    "
                    [ngClass]="addressTextColor"
                >
                    @if (isDeadheadStop) {
                        Deadhead
                    } @else if (isSplitLocationStop) {
                        Split Location
                    } @else {
                        {{ stop.shipper.businessName }}
                    }
                </div>
            </div>
            @if (stop.legMiles) {
                <div
                    class="position-absolute right-0 top-0 text-size-11"
                    [ngClass]="
                        isVisitedStop ? 'text-color-muted' : 'text-color-white'
                    "
                >
                    +{{
                        stop.legMiles
                            | number: eThousandSeparatorFormat.DECIMAL_FORMAT
                    }}
                </div>
            }
        </div>
    </div>
</ng-template>