<Overlay @position="right" @noBackdrop={{true}} @isResizable={{true}} @fullHeight={{true}} @width="570px">
    <Overlay::Header @title={{if this.serviceRate.id this.serviceRate.service_name (t "fleet-ops.operations.service-rates.index.new.new-service-rate-title")}} @status={{this.serviceRate.public_id}} @hideStatusDot={{true}} @createdAt={{this.serviceRate.createdAt}} @onPressCancel={{this.transitionBack}}>
        {{#if this.serviceRate.id}}
            <Button @icon="save" @type="primary" @text={{t "fleet-ops.operations.service-rates.index.new.save-service-button"}} @onClick={{this.updateServiceRate}} @isLoading={{this.isUpdatingServiceRate}} />
        {{else}}
            <Button @icon="check" @type="primary" @text={{t "fleet-ops.operations.service-rates.index.new.create-service-button"}} @onClick={{this.createServiceRate}} @isLoading={{this.isCreatingServiceRate}} />
        {{/if}}
    </Overlay::Header>

    <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4">
        <div>
            <div class="grid grid-cols-2 gap-2">
                <div class="input-group">
                    <InputLabel @labelText={{t "fleet-ops.operations.service-rates.index.new.service-name"}} @helpText={{t "fleet-ops.operations.service-rates.index.new.service-name-help-text"}} @required={{true}} />
                    <Input @type="text" @value={{this.serviceRate.service_name}} placeholder={{t "fleet-ops.operations.service-rates.index.new.service-name"}} class="form-input w-full" />
                </div>

                <div class="input-group">
                    <InputLabel @labelText={{t "fleet-ops.operations.service-rates.index.new.service-order-label"}} @helpText={{t "fleet-ops.operations.service-rates.index.new.service-order-help-text"}} />
                    <select class="form-select w-full has--placeholder" {{on "change" this.setConfig}}>
                        <option selected disabled>
                            {{t "fleet-ops.operations.service-rates.index.new.service-order-placeholder"}}
                        </option>
                        {{#each this.orderConfigs as |orderConfig|}}
                            <option value={{orderConfig.id}} selected={{eq orderConfig.id this.serviceRate.order_config_uuid}}>
                                {{orderConfig.name}}
                            </option>
                        {{/each}}
                    </select>
                </div>

                <div class="input-group">
                    <InputLabel @labelText={{t "fleet-ops.operations.service-rates.index.new.base-fee-label"}} @helpText={{t "fleet-ops.operations.service-rates.index.new.base-fee-help-text"}} @required={{true}} />
                    <MoneyInput class="w-full" @value={{this.serviceRate.base_fee}} @currency={{this.serviceRate.currency}} @canSelectCurrency={{true}} @onCurrencyChange={{fn (mut this.serviceRate.currency)}} />
                </div>

                <div class="input-group">
                    <InputLabel @labelText={{t "fleet-ops.operations.service-rates.index.new.rate-calculation-label"}} @helpText={{t "fleet-ops.operations.service-rates.index.new.rate-calculation-help-text"}} @required={{true}} />
                    <Select class="w-full" @options={{this.calculationMethods}} @value={{this.serviceRate.rate_calculation_method}} @optionLabel="name" @optionValue="key" @onSelect={{fn (mut this.serviceRate.rate_calculation_method)}} @placeholder={{t "fleet-ops.operations.service-rates.index.new.rate-calculation-placeholder"}} />
                </div>
            </div>
        </div>

        {{#if this.serviceRate.isParcelService}}
            <div class="input-group">
                <InputLabel @labelText={{t "fleet-ops.operations.service-rates.index.new.estimated-days"}} @helpText={{t "fleet-ops.operations.service-rates.index.new.estimated-days-help-text"}} @required={{true}} />

                <Input @type="number" @value={{this.serviceRate.estimated_days}} placeholder={{t "fleet-ops.operations.service-rates.index.new.estimated-days"}} class="form-input w-full" />
            </div>
        {{/if}}

        <div class="input-group col-span-2">
            <InputLabel @labelText={{t "fleet-ops.operations.service-rates.index.new.duration-terms-label"}} @helpText={{t "fleet-ops.operations.service-rates.index.new.duration-terms-help-text"}} />

            <Input @type="text" @value={{this.serviceRate.duration_terms}} placeholder={{t "fleet-ops.operations.service-rates.index.new.duration-terms-placeholder"}} class="form-input w-full" />
        </div>

        {{#if this.serviceRate.isFixedMeter}}
            <ContentPanel @title={{t "fleet-ops.operations.service-rates.index.new.fixed-meter"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                <InfoBlock class="mb-5" @text={{t "fleet-ops.operations.service-rates.index.new.fixed-meter-text"}} @exampleText={{t "fleet-ops.operations.service-rates.index.new.fixed-meter-example-text"}} />

                <div class="input-group">
                    <InputLabel @labelText={{t "fleet-ops.operations.service-rates.index.new.maximum-distance"}} @helpText={{t "fleet-ops.operations.service-rates.index.new.maximum-distance-help-text"}} @required={{true}} />
                    <Input @type="number" @value={{this.fixedMeterMaxDistance}} placeholder={{t "fleet-ops.operations.service-rates.index.new.maximum-distance"}} class="form-input w-full" />
                </div>

                <div class="table-scrolling-height overflow-y-scroll">
                    <div class="next-table-wrapper h-auto table-fluid rounded-none">
                        <table class="table table-fixed">
                            <thead>
                                <tr>
                                    <th>{{t "fleet-ops.operations.service-rates.index.new.distance"}}</th>
                                    <th>{{t "fleet-ops.operations.service-rates.index.new.fee"}}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {{#each this.rateFees as |rateFee|}}
                                    <tr>
                                        <td>{{rateFee.distance}}-{{add rateFee.distance 1}} {{this.fixedMeterUnit}}
                                        </td>
                                        <td>
                                            <MoneyInput class="w-full" @currency={{this.serviceRate.currency}} @value={{rateFee.fee}} />
                                        </td>
                                    </tr>
                                {{/each}}
                            </tbody>
                        </table>
                    </div>
                </div>
            </ContentPanel>
        {{else if this.serviceRate.isPerDrop}}
            <ContentPanel @title={{t "fleet-ops.operations.service-rates.index.new.per-drop-off-title"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                <InfoBlock class="mb-5" @text={{t "fleet-ops.operations.service-rates.index.new.per-drop-off-text"}} @exampleText={{t "fleet-ops.operations.service-rates.index.new.per-drop-off-example-text"}} />

                <div class="input-group">
                    <Button @text={{t "fleet-ops.operations.service-rates.index.new.add-drop-off-button"}} @icon="plus" @iconPrefix="fas" @onClick={{this.addPerDropoffRateFee}} />
                </div>

                <div class="table-wrapper table-fluid rounded-none">
                    <table class="table table-fixed">
                        <thead>
                            <tr>
                                <th>{{t "fleet-ops.operations.service-rates.index.new.min-drop"}}</th>
                                <th>{{t "fleet-ops.operations.service-rates.index.new.max-drop"}}</th>
                                <th>{{t "fleet-ops.operations.service-rates.index.new.fee"}}</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {{#each this.perDropRateFees as |rateFee index|}}
                                <tr>
                                    <td>
                                        <Input @type="number" @value={{rateFee.min}} placeholder={{t "fleet-ops.operations.service-rates.index.new.min"}} class="form-input w-16" />
                                    </td>
                                    <td>
                                        <Input @type="number" @value={{rateFee.max}} placeholder={{t "fleet-ops.operations.service-rates.index.new.max"}} class="form-input w-16" />
                                    </td>
                                    <td>
                                        <MoneyInput class="w-full" @currency={{this.serviceRate.currency}} @value={{rateFee.fee}} />
                                    </td>
                                    <td>
                                        <a href="javascript:;" class="text-danger text-red-500 font-semibold" {{on "click" (fn this.removePerDropoffRateFee index)}}>{{t "fleet-ops.common.remove"}}</a>
                                    </td>
                                </tr>
                            {{/each}}
                        </tbody>
                    </table>
                </div>
            </ContentPanel>
        {{else if this.serviceRate.isPerMeter}}
            <ContentPanel @title={{t "fleet-ops.operations.service-rates.index.new.per-meter"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                <InfoBlock class="mb-5" @text={{t "fleet-ops.operations.service-rates.index.new.per-meter-text"}} @exampleText={{t "fleet-ops.operations.service-rates.index.new.per-meter-example-text"}} />

                <div class="grid grid-cols-2 gap-2">
                    <div class="input-group">
                        <InputLabel @labelText={{t "fleet-ops.operations.service-rates.index.new.per-meter-rate-fee"}} @helpText={{t "fleet-ops.operations.service-rates.index.new.per-meter-rate-fee-help-text"}} @required={{true}} />
                        <MoneyInput class="w-full" @currency={{this.serviceRate.currency}} @value={{this.serviceRate.per_meter_flat_rate_fee}} />
                    </div>

                    <div class="input-group">
                        <InputLabel @labelText={{t "fleet-ops.operations.service-rates.index.new.distance-unit"}} @helpText={{t "fleet-ops.operations.service-rates.index.new.distance-unit-help-text"}} @required={{true}} />
                        <Select class="w-full" @options={{this.distanceUnits}} @value={{this.serviceRate.per_meter_unit}} @optionLabel="name" @optionValue="key" @onSelect={{fn (mut this.serviceRate.per_meter_unit)}} placeholder={{t "fleet-ops.operations.service-rates.index.new.distance-unit-placeholder"}} />
                    </div>

                    <div class="col-span-2">
                        <InputInfo>
                            <code class="dark:text-gray-100">( {{this.serviceRate.per_meter_flat_rate_fee}} * {distance} {{this.serviceRate.per_meter_unit}} ) + {{this.serviceRate.base_fee}}</code>
                        </InputInfo>
                    </div>
                </div>
            </ContentPanel>
        {{else if this.serviceRate.isAlgorithm}}
            <ContentPanel @title={{t "fleet-ops.operations.service-rates.index.new.custom-algorithm-title"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                <InfoBlock class="mb-5">
                    {{t "fleet-ops.operations.service-rates.index.new.custom-algorithm-info-message"}}
                    {{t "fleet-ops.operations.service-rates.index.new.custom-algorithm-info-second-message"}}

                    <div class="block my-4 break-text">
                        <ul class="list-disc space-y-2 pl-16">
                            <li class="leading-5"><i>{{t "fleet-ops.operations.service-rates.index.new.distance-message"}}</i> {{t "fleet-ops.operations.service-rates.index.new.distance-continue-message"}}</li>
                            <li class="leading-5"><i>{{t "fleet-ops.operations.service-rates.index.new.time-message"}}</i> {{t "fleet-ops.operations.service-rates.index.new.time-continue-message"}}</li>
                        </ul>
                    </div>

                    <div>
                        <h4 class="mb-1 text-sm font-semibold">{{t "fleet-ops.operations.service-rates.index.new.example"}}</h4>
                        <div class="mb-3 text-inherit">
                            {{t "fleet-ops.operations.service-rates.index.new.example-message"}}
                            {{t "fleet-ops.operations.service-rates.index.new.example-second-message"}}
                        </div>
                        <code class="text-xs font-mono">(( {distance} / 50 ) * .05 ) + (( {time} / 60 ) * .01)</code>
                    </div>
                </InfoBlock>

                <div class="input-group">
                    <InputLabel @labelText={{t "fleet-ops.operations.service-rates.index.new.algorithm-label"}} @helpText={{t "fleet-ops.operations.service-rates.index.new.algorithm-help-text"}} @required={{true}} />
                    <Input @type="tel" @value={{this.serviceRate.algorithm}} placeholder={{t "fleet-ops.operations.service-rates.index.new.algorithm-placeholder"}} class="form-input w-full" />
                </div>
            </ContentPanel>
        {{/if}}

        {{#if this.serviceRate.isParcelService}}
            <ContentPanel @title={{t "fleet-ops.operations.service-rates.index.new.percel-fee-title"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                <div class="space-y-2">
                    {{#each this.parcelFees as |parcelFee|}}
                        <div class="dark:text-gray-100">
                            <div class="grid grid-cols-7">
                                <div class="flex flex-col items-start justify-start pt-3">
                                    <img src="/engines-dist/images/boxes/{{parcelFee.size}}.png" alt="parcel size {{parcelFee.size}}" width="44" class="w-11">
                                    <label class="mt-2">{{humanize parcelFee.size}}</label>
                                </div>
                                <div class="col-span-6 dimensions-box">
                                    <div class="grid grid-cols-4 gap-2 px-2 mb-2">
                                        <div class="input-group">
                                            <InputLabel @labelText={{t "fleet-ops.operations.service-rates.index.new.length-label"}} />
                                            <Input @type="tel" @value={{parcelFee.length}} placeholder={{t "fleet-ops.operations.service-rates.index.new.length-placeholder" htmlSafe=true parcelFeeDimension=@parcelFee.dimension_unit}} class="form-input w-4/5" />
                                        </div>

                                        <div class="input-group">
                                            <InputLabel @labelText={{t "fleet-ops.operations.service-rates.index.new.width-label"}} />
                                            <Input @type="tel" @value={{parcelFee.width}} placeholder={{t "fleet-ops.operations.service-rates.index.new.width-placeholder" htmlSafe=true parcelFeeDimension=@parcelFee.dimension_unit }} class="form-input w-4/5" />
                                        </div>

                                        <div class="input-group">
                                            <InputLabel @labelText={{t "fleet-ops.operations.service-rates.index.new.height-label"}} />
                                            <Input @type="tel" @value={{parcelFee.height}} placeholder={{t "fleet-ops.operations.service-rates.index.new.height-placeholder" htmlSafe=true parcelFeeDimension=@parcelFee.dimension_unit }} class="form-input w-4/5" />
                                        </div>

                                        <div class="input-group">
                                            <InputLabel @labelText={{t "fleet-ops.operations.service-rates.index.new.weight-label"}} />
                                            <Input @type="tel" @value={{parcelFee.weight}} placeholder={{t "fleet-ops.operations.service-rates.index.new.weight-label" htmlSafe=true parcelFeeWeight=@parcelFee.weight_unit }} class="form-input w-4/5" />
                                        </div>
                                    </div>
                                    <div class="grid grid-cols-3 gap-2 px-2">
                                        <div class="input-group">
                                            <InputLabel @labelText={{t "fleet-ops.operations.service-rates.index.new.deminsions-unit"}} />
                                            <Select class="w-full" @options={{this.dimensionUnits}} @value={{parcelFee.dimension_unit}} placeholder={{t "fleet-ops.operations.service-rates.index.new.select-unit-placeholder"}} />
                                        </div>

                                        <div class="input-group">
                                            <InputLabel @labelText={{t "fleet-ops.operations.service-rates.index.new.weight-unit"}} />
                                            <Select class="w-full" @options={{this.weightUnits}} @value={{parcelFee.weight_unit}} placeholder={{t "fleet-ops.operations.service-rates.index.new.select-unit-placeholder"}} />
                                        </div>

                                        <div class="input-group">
                                            <InputLabel @labelText={{t "fleet-ops.operations.service-rates.index.new.additional-fee"}} />
                                            <MoneyInput class="w-full" @currency={{this.serviceRate.currency}} @value={{parcelFee.fee}} />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {{/each}}
                </div>
            </ContentPanel>
        {{/if}}

        <ContentPanel @title={{t "fleet-ops.operations.service-rates.index.new.cash-delivery-title"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
            <Toggle @wrapperClass="justify-start-i mb-5" @label={{t "fleet-ops.operations.service-rates.index.new.cash-delivery-label"}} @isToggled={{this.serviceRate.has_cod_fee}} @onToggle={{fn (mut this.serviceRate.has_cod_fee)}} />

            {{#if this.serviceRate.has_cod_fee}}
                <div class="grid grid-cols-2 gap-2">
                    <div class="input-group">
                        <InputLabel @labelText={{t "fleet-ops.operations.service-rates.index.new.calculation-method-label"}} @helpText={{t "fleet-ops.operations.service-rates.index.new.calculation-method-help-text"}} @required={{true}} />
                        <Select class="w-full" @options={{this.codCalculationMethods}} @optionLabel="name" @optionValue="key" @value={{this.serviceRate.cod_calculation_method}} @onSelect={{fn (mut
                                                            this.serviceRate.cod_calculation_method)}} @placeholder={{t "fleet-ops.operations.service-rates.index.new.calculation-method-placeholder"}} />
                    </div>

                    {{#if this.serviceRate.hasCodFlatFee}}
                        <div class="input-group">
                            <InputLabel @labelText={{t "fleet-ops.operations.service-rates.index.new.delivery-flat-fee"}} @helpText={{t "fleet-ops.operations.service-rates.index.new.delivery-flat-fee-help-text"}} @required={{true}} />
                            <MoneyInput class="w-full" @currency={{this.serviceRate.currency}} @value={{this.serviceRate.cod_flat_fee}} />
                        </div>
                    {{else if  this.serviceRate.hasCodPercentageFee}}
                        <div class="input-group">
                            <InputLabel @labelText={{t "fleet-ops.operations.service-rates.index.new.fee-percentage"}} @helpText={{t "fleet-ops.operations.service-rates.index.new.fee-percentage-help-text"}} @required={{true}} />
                            <Input @type="number" min="0" max="100" @value={{this.serviceRate.cod_percent}} placeholder={{t "fleet-ops.operations.service-rates.index.new.percentage-placeholder"}} class="form-input w-full" />
                        </div>
                    {{/if}}
                </div>
            {{/if}}
        </ContentPanel>

        <ContentPanel @title={{t "fleet-ops.operations.service-rates.index.new.peak-hours-title"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
            <Toggle @wrapperClass="justify-start-i mb-5" @label={{t "fleet-ops.operations.service-rates.index.new.peak-hours-label"}} @isToggled={{this.serviceRate.has_peak_hours_fee}} @onToggle={{fn (mut this.serviceRate.has_peak_hours_fee)}} />

            {{#if this.serviceRate.has_peak_hours_fee}}
                <div class="grid grid-cols-2 gap-2">
                    <div class="input-group">
                        <InputLabel @labelText={{t "fleet-ops.operations.service-rates.index.new.peak-hours-start-label"}} @helpText={{t "fleet-ops.operations.service-rates.index.new.peak-hours-start-help-text"}} @required={{true}} />

                        <Input @type="time" @value={{this.serviceRate.peak_hours_start}} class="form-input w-full" />
                    </div>

                    <div class="input-group">
                        <InputLabel @labelText={{t "fleet-ops.operations.service-rates.index.new.peak-hours-end-label"}} @helpText={{t "fleet-ops.operations.service-rates.index.new.peak-hours-end-help-text"}} @required={{true}} />

                        <Input @type="time" @value={{this.serviceRate.peak_hours_end}} class="form-input w-full" />
                    </div>
                </div>

                <div class="input-group">
                    <InputLabel @labelText={{t "fleet-ops.operations.service-rates.index.new.peak-hours-fee-label"}} @helpText={{t "fleet-ops.operations.service-rates.index.new.peak-hours-fee-help-text"}} @required={{true}} />
                    <Select class="w-full" @options={{this.peakHourCalculationMethods}} @optionLabel="name" @optionValue="key" @value={{this.serviceRate.peak_hours_calculation_method}} @onSelect={{fn (mut this.serviceRate.peak_hours_calculation_method)}} @placeholder={{t "fleet-ops.operations.service-rates.index.new.peak-hours-fee-placeholder"}} />
                </div>

                {{#if this.serviceRate.hasPeakHoursFlatFee}}
                    <div class="input-group">
                        <InputLabel @labelText={{t "fleet-ops.operations.service-rates.index.new.flat-fee-label"}} @helpText={{t "fleet-ops.operations.service-rates.index.new.flat-fee-help-text"}} @required={{true}} />
                        <MoneyInput class="w-full" @currency={{this.serviceRate.currency}} @value={{this.serviceRate.peak_hours_flat_fee}} />
                    </div>
                {{else if this.serviceRate.hasPeakHoursPercentageFee}}
                    <div class="input-group">
                        <InputLabel @labelText={{t "fleet-ops.operations.service-rates.index.new.peak-hours-percentage-label"}} @helpText={{t "fleet-ops.operations.service-rates.index.new.peak-hours-percentage-help-text"}} @required={{true}} />
                        <Input @type="number" min="0" max="100" @value={{this.serviceRate.peak_hours_percent}} placeholder={{t "fleet-ops.operations.service-rates.index.new.percentage-placeholder"}} class="form-input w-full" />
                    </div>
                {{/if}}
            {{/if}}
        </ContentPanel>

        <ContentPanel @title={{t "fleet-ops.operations.service-rates.index.new.restrict-service-title"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
            <div class="input-group">
                <InputLabel @labelText={{t "fleet-ops.operations.service-rates.index.new.service-area-label"}} @helpText={{t "fleet-ops.operations.service-rates.index.new.service-area-help-text"}} />
                <Select class="w-full" @options={{this.serviceAreas}} @optionLabel="name" @optionValue="id" @value={{this.serviceRate.service_area_uuid}} @onSelect={{this.selectServiceArea}} @placeholder={{t "fleet-ops.operations.service-rates.index.new.service-area-placeholder"}} @disabled={{not this.serviceAreas.length}} />
            </div>

            {{#if this.serviceRate.service_area_uuid}}
                <div class="input-group">
                    <InputLabel @labelText={{t "fleet-ops.operations.service-rates.index.new.zone-label"}} @helpText={{t "fleet-ops.operations.service-rates.index.new.zone-help-text"}} />
                    <Select class="w-full" @options={{this.zones}} @optionLabel="name" @optionValue="id" @value={{this.serviceRate.zone_uuid}} @onSelect={{fn (mut this.serviceRate.zone_uuid)}} @placeholder={{t "fleet-ops.operations.service-rates.index.new.zone-placeholder"}} @disabled={{not this.zones.length}} />
                </div>
            {{/if}}
        </ContentPanel>

        <Spacer @height="300px" />
    </Overlay::Body>
</Overlay>