@if (componentData) {
    <div class="main-container">
        <!-- User info -->
        <app-ca-period-content-user-info
            [componentData]="componentData"
            [type]="type"
            [isOpen]="isOpen"
        ></app-ca-period-content-user-info>

        <!-- Bonues, salary... -->
        <div class="payment-container d-flex flex-column align-items-center">
            <div
                class="extra-info-holder d-flex flex-column align-items-center"
            >
                @if (type === 'MILEAGE') {
                    <div class="component-holder">
                        <app-ca-period-content-extra-info
                            title="Mileage pay"
                            [amount]="componentData.mileagePay"
                        ></app-ca-period-content-extra-info>
                        <app-ca-period-content-extra-info
                            title="Extra stop"
                            [amount]="componentData.extraStopPay || 0"
                            [stopsCount]="componentData.extraStopCount"
                        ></app-ca-period-content-extra-info>
                    </div>
                }
                @if (type === 'FLAT_RATE') {
                    <ng-container #flatRate>
                        <div class="component-holder">
                            <app-ca-period-content-extra-info
                                title="Load pay"
                                [amount]="componentData?.flatPay"
                            ></app-ca-period-content-extra-info>
                        </div>
                    </ng-container>
                }
            </div>

            <!-- BONUS -->
            @if (type === 'MILEAGE' || type === 'FLAT_RATE') {
                <div class="component-holder with-border-top">
                    <app-ca-period-content-payment
                        (reorderedDataEmiter)="getReorderedData($event)"
                        (openAddNewModalEmiter)="openAddNewModal($event)"
                        (openEditEntryItem)="handleOpenEditEntryItem($event)"
                        [title]="'Bonus'"
                        [isOpen]="isOpen"
                        [included]="componentData?.includedBonuses!"
                        [excluded]="componentData?.excludedBonuses!"
                        [disableReorder]="true"
                    ></app-ca-period-content-payment>
                </div>
            }

            <div
                class="salary d-flex justify-content-between align-items-center"
            >
                <span class="salary-title ca-font-extra-bold text-color-black user-select-none">
                    SALARY
                </span>
                <span class="salary-value ca-font-bold text-color-black">
                    {{ componentData.salary! | formatCurrency }}
                </span>
            </div>

            <!-- CREDIT -->
            <div class="component-holder">
                <app-ca-period-content-payment
                    (openAddNewModalEmiter)="openAddNewModal($event)"
                    (openEditEntryItem)="handleOpenEditEntryItem($event)"
                    [title]="'Credit'"
                    [isOpen]="isOpen"
                    (reorderedDataEmiter)="getReorderedData($event)"
                    [included]="componentData?.includedCredits!"
                    [excluded]="[]"
                ></app-ca-period-content-payment>
            </div>

            <!-- FUEL -->
            @if (type === 'OWNER') {
                <div class="component-holder">
                    <app-ca-period-content-payment
                        (openAddNewModalEmiter)="openAddNewModal($event)"
                        (openEditEntryItem)="handleOpenEditEntryItem($event)"
                        [title]="'Fuel'"
                        [isOpen]="isOpen"
                        (reorderedDataEmiter)="getReorderedData($event)"
                        [included]="componentData?.includedFuels!"
                        [excluded]="componentData?.excludedFuels!"
                    ></app-ca-period-content-payment>
                </div>
            }

            <!-- DEDUCTION -->
            <div class="component-holder with-border-top">
                <app-ca-period-content-payment
                    (openAddNewModalEmiter)="openAddNewModal($event)"
                    (openEditEntryItem)="handleOpenEditEntryItem($event)"
                    [title]="'Deduction'"
                    [isOpen]="isOpen"
                    (reorderedDataEmiter)="getReorderedData($event)"
                    [included]="componentData?.includedDeductions!"
                    [excluded]="componentData?.excludedDeductions!"
                ></app-ca-period-content-payment>
            </div>

            <div
                class="earnings d-flex justify-content-between align-items-center"
            >
                <span
                    class="ca-font-extra-bold earnings-tlitle text-color-blue-13 user-select-none"
                >
                    EARNINGS
                </span>
                @if (componentData) {
                    <span class="ca-font-bold money text-color-blue-13">
                        {{ componentData!.earnings! | formatCurrency }}
                    </span>
                }
            </div>

            @if (componentData.payments) {
                <div class="component-holder with-border-top">
                    <app-ca-period-content-payment
                        [title]="'Transaction'"
                        [isOpen]="isOpen"
                        (reorderedDataEmiter)="getReorderedData($event)"
                        (openEditEntryItem)="handleOpenEditEntryItem($event)"
                        [included]="componentData.payments"
                        [excluded]="[]"
                        [hideTotal]="true"
                    ></app-ca-period-content-payment>
                </div>
            }

            <!-- PROCESS BUTTON -->
            @if (componentData!.debt && !isOpen) {
                <div
                    class="earnings d-flex justify-content-between align-items-center debth"
                >
                    <span
                        class="ca-font-extra-bold earnings-tlitle text-color-red-11 user-select-none"
                    >
                        DEBT
                    </span>
                    @if (componentData) {
                        <span class="ca-font-bold money text-color-red-11">
                            {{ componentData!.debt! | formatCurrency }}
                        </span>
                    }
                </div>
            }

            @if (isOpen) {
                <div
                    class="button-cnt process-btn d-flex justify-content-between align-items-center"
                >
                    <button
                        (click)="processPayment()"
                        class="earnings process-button ca-font-bold user-select-none"
                        [class.incomplete-status]="
                            componentData.payrollDeadLine?.period == 'Pending'
                        "
                        [class]="{
                            'text-color-blue-13':
                                componentData.payrollDeadLine?.period ===
                                'Pending',
                            'text-color-white-2':
                                componentData.payrollDeadLine?.period !==
                                'Pending',
                        }"
                    >
                        {{
                            componentData.payrollDeadLine?.period == 'Pending'
                                ? 'Process Early'
                                : 'Process'
                        }}
                    </button>
                </div>
            } @else {
                @if (componentData.status?.id === 4) {
                    <div
                        [ngStyle]="{
                            backgroundColor:
                                componentData.status.id == 4
                                    ? '#F7F7F7'
                                    : '#FBE9E9',
                            color:
                                componentData.status.id == 4
                                    ? '#259F94'
                                    : '#DF3C3C',
                        }"
                        class="earnings paid-in-full d-flex justify-content-between align-items-center"
                    >
                        <span class="ca-font-extra-bold text-color-green-2 user-select-none">
                            PAID IN FULL
                        </span>
                        <span class="ca-font-bold money text-color-green-2">
                            {{ componentData!.earnings! | formatCurrency }}
                        </span>
                    </div>
                }
                @if (componentData.status?.id != 4) {
                    <div
                        class="button-cnt d-flex justify-content-between align-items-center"
                    >
                        <button
                            class="earnings process-button ca-font-bold user-select-none"
                            (click)="addPayment()"
                        >
                            Add payment
                        </button>
                    </div>
                }
            }

            <!-- PROCESS BUTTON END -->
        </div>
    </div>
}