<div class="details-wrapper" ...attributes>
    <ContentPanel @title="Details" @open={{true}} @wrapperClass="bordered-top">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2">
            <div class="field-info-container">
                <div class="field-name">{{t "service-rate.fields.service-name"}}</div>
                <div class="field-value">{{n-a @resource.service_name}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">{{t "service-rate.fields.service-order-label"}}</div>
                <div class="field-value">{{n-a @resource.order_config.name}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">{{t "service-rate.fields.base-fee-label"}}</div>
                <div class="field-value">{{format-currency @resource.base_fee @resource.currency}}</div>
            </div>

            <div class="field-info-container">
                <div class="field-name">{{t "service-rate.fields.rate-calculation-label"}}</div>
                <div class="field-value">
                    {{#let (find-by "value" @resource.rate_calculation_method (get-fleet-ops-options "serviceRateCalculationMethods")) as |method|}}
                        {{#if method}}
                            <Badge @status="info">{{method.label}}</Badge>
                        {{else}}
                            {{n-a @resource.rate_calculation_method}}
                        {{/if}}
                    {{/let}}
                </div>
            </div>
        </div>
    </ContentPanel>

    <ContentPanel @title="Terms" @open={{true}} @wrapperClass="bordered-top">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2">
            {{#if @resource.isParcelService}}
                <div class="field-info-container">
                    <div class="field-name">{{t "service-rate.fields.estimated-days"}}</div>
                    <div class="field-value">{{n-a @resource.estimated_days}}</div>
                </div>
            {{/if}}
            <div class="field-info-container col-span-2">
                <div class="field-name">{{t "service-rate.fields.duration-terms-label"}}</div>
                <div class="field-value">{{n-a @resource.duration_terms}}</div>
            </div>
        </div>
    </ContentPanel>

    {{#if @resource.isFixedRate}}
        <ContentPanel @title={{t "service-rate.fields.fixed-meter"}} @open={{true}} @wrapperClass="bordered-top" @panelBodyWrapperClass="p-0i">
            <div class="mb-3 px-3">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-2">
                    <div class="field-info-container">
                        <div class="field-name">{{t "service-rate.fields.maximum-distance"}}</div>
                        <div class="field-value">{{n-a @resource.max_distance}}</div>
                    </div>
                    <div class="field-info-container">
                        <div class="field-name">Max Distance Unit</div>
                        <div class="field-value">
                            {{#let (find-by "value" @resource.max_distance_unit (get-fleet-ops-options "longDistanceUnits")) as |unit|}}
                                {{#if unit}}
                                    {{unit.label}}
                                {{else}}
                                    {{n-a @resource.max_distance_unit}}
                                {{/if}}
                            {{/let}}
                        </div>
                    </div>
                </div>
            </div>

            <div class="overflow-x-auto">
                <div class="next-table-wrapper h-auto table-fluid rounded-none overflow-x-auto">
                    <table class="table table-fixed w-full">
                        <thead>
                            <tr>
                                <th>{{t "service-rate.fields.distance"}}</th>
                                <th>{{t "service-rate.fields.fee"}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{#each @resource.rateFees as |rateFee|}}
                                <tr>
                                    <td>{{rateFee.distance}}-{{add rateFee.distance 1}} {{@resource.max_distance_unit}}</td>
                                    <td>{{format-currency rateFee.fee @resource.currency}}</td>
                                </tr>
                            {{else}}
                                <tr>
                                    <td colspan="2" class="text-center text-gray-500 italic">No rate fees defined</td>
                                </tr>
                            {{/each}}
                        </tbody>
                    </table>
                </div>
            </div>
        </ContentPanel>
    {{else if @resource.isPerDrop}}
        <ContentPanel @title={{t "service-rate.fields.per-drop-off-title"}} @open={{true}} @wrapperClass="bordered-top" @panelBodyWrapperClass="p-0i">
            <div class="next-table-wrapper h-auto table-fluid rounded-none overflow-x-auto">
                <table class="table table-fixed w-full">
                    <thead>
                        <tr>
                            <th>{{t "service-rate.fields.min-drop"}}</th>
                            <th>{{t "service-rate.fields.max-drop"}}</th>
                            <th>{{t "service-rate.fields.fee"}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{#each @resource.rateFees as |rateFee|}}
                            <tr>
                                <td>{{n-a rateFee.min}}</td>
                                <td>{{n-a rateFee.max}}</td>
                                <td>{{format-currency (f-to-int rateFee.fee) @resource.currency}}</td>
                            </tr>
                        {{else}}
                            <tr>
                                <td colspan="3" class="text-center text-gray-500 italic">No per drop fees defined</td>
                            </tr>
                        {{/each}}
                    </tbody>
                </table>
            </div>
        </ContentPanel>
    {{else if @resource.isMultiZoneDistance}}
        <ContentPanel @title="Multi-zone Distance" @open={{true}} @wrapperClass="bordered-top" @panelBodyWrapperClass="p-0i">
            <div class="next-table-wrapper h-auto table-fluid rounded-none overflow-x-auto">
                <table class="table table-fixed w-full">
                    <thead>
                        <tr>
                            <th>Label</th>
                            <th>Geography Type</th>
                            <th>Geography</th>
                            <th>Priority</th>
                            <th>Rate</th>
                            <th>Unit</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{#each @resource.rateFees as |rateFee|}}
                            <tr>
                                <td>{{n-a rateFee.label}}</td>
                                <td>{{smart-humanize rateFee.geography_type}}</td>
                                <td>
                                    {{#if (eq rateFee.geography_type "zone")}}
                                        {{n-a rateFee.zone.name}}
                                    {{else if (eq rateFee.geography_type "fallback")}}
                                        Unmatched route distance
                                    {{else}}
                                        {{n-a rateFee.service_area.name}}
                                    {{/if}}
                                </td>
                                <td>{{n-a rateFee.priority}}</td>
                                <td>{{format-currency (f-to-int rateFee.fee) @resource.currency}}</td>
                                <td>{{n-a rateFee.distance_unit}}</td>
                            </tr>
                        {{else}}
                            <tr>
                                <td colspan="6" class="text-center text-gray-500 italic">No geographic pricing rules defined</td>
                            </tr>
                        {{/each}}
                    </tbody>
                </table>
            </div>
        </ContentPanel>
    {{else if @resource.isPerMeter}}
        <ContentPanel @title={{t "service-rate.fields.per-meter"}} @open={{true}} @wrapperClass="bordered-top">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-2">
                <div class="field-info-container">
                    <div class="field-name">{{t "service-rate.fields.per-meter-rate-fee"}}</div>
                    <div class="field-value">{{format-currency @resource.per_meter_flat_rate_fee @resource.currency}}</div>
                </div>

                <div class="field-info-container">
                    <div class="field-name">{{t "service-rate.fields.distance-unit"}}</div>
                    <div class="field-value">
                        {{#let (find-by "value" @resource.per_meter_unit (get-fleet-ops-options "distanceUnits")) as |unit|}}
                            {{#if unit}}
                                {{unit.label}}
                            {{else}}
                                {{n-a @resource.per_meter_unit}}
                            {{/if}}
                        {{/let}}
                    </div>
                </div>

                <div class="field-info-container col-span-2">
                    <div class="field-name">Calculation Formula</div>
                    <div class="field-value">
                        <code class="dark:text-gray-100">({{@resource.per_meter_flat_rate_fee}}
                            * {distance}
                            {{@resource.per_meter_unit}}) +
                            {{or @resource.base_fee (format-currency 0 @resource.currency)}}</code>
                    </div>
                </div>
            </div>
        </ContentPanel>
    {{else if @resource.isAlgorithm}}
        <ContentPanel @title={{t "service-rate.fields.custom-algorithm-title"}} @open={{true}} @wrapperClass="bordered-top">
            <div class="field-info-container">
                <div class="field-name">Algorithm Code</div>
                <div class="field-value">
                    <pre class="bg-gray-100 dark:bg-gray-900 font-mono p-3 rounded text-xs overflow-x-auto"><code class="font-mono text-xs whitespace-break-spaces">{{n-a @resource.algorithm}}</code></pre>
                </div>
            </div>
        </ContentPanel>
    {{/if}}

    {{#if @resource.isParcelService}}
        <ContentPanel @title={{t "service-rate.fields.percel-fee-title"}} @open={{true}} @wrapperClass="bordered-top">
            <div class="space-y-2">
                {{#each @resource.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" />
                                <div class="mt-2 text-sm font-medium">
                                    {{humanize parcelFee.size}}
                                </div>
                            </div>

                            <div class="col-span-6 dimensions-box space-x-2">
                                <div class="grid grid-cols-4 gap-2 px-2">
                                    <div class="field-info-container">
                                        <div class="field-name">
                                            {{t "service-rate.fields.length-label"}}
                                        </div>
                                        <div class="field-value">
                                            {{n-a parcelFee.length}}
                                            {{parcelFee.dimensions_unit}}
                                        </div>
                                    </div>

                                    <div class="field-info-container">
                                        <div class="field-name">
                                            {{t "service-rate.fields.width-label"}}
                                        </div>
                                        <div class="field-value">
                                            {{n-a parcelFee.width}}
                                            {{parcelFee.dimensions_unit}}
                                        </div>
                                    </div>

                                    <div class="field-info-container">
                                        <div class="field-name">
                                            {{t "service-rate.fields.height-label"}}
                                        </div>
                                        <div class="field-value">
                                            {{n-a parcelFee.height}}
                                            {{parcelFee.dimensions_unit}}
                                        </div>
                                    </div>

                                    <div class="field-info-container">
                                        <div class="field-name">
                                            {{t "service-rate.fields.weight-label"}}
                                        </div>
                                        <div class="field-value">
                                            {{n-a parcelFee.weight}}
                                            {{parcelFee.weight_unit}}
                                        </div>
                                    </div>

                                    <div class="field-info-container">
                                        <div class="field-name">
                                            {{t "service-rate.fields.deminsions-unit"}}
                                        </div>
                                        <div class="field-value">
                                            {{n-a (get-fleet-ops-option-label "dimensionUnits" parcelFee.dimensions_unit)}}
                                        </div>
                                    </div>

                                    <div class="field-info-container">
                                        <div class="field-name">
                                            {{t "service-rate.fields.weight-unit"}}
                                        </div>
                                        <div class="field-value">
                                            {{n-a (get-fleet-ops-option-label "weightUnits" parcelFee.weight_unit)}}
                                        </div>
                                    </div>

                                    <div class="field-info-container col-span-2">
                                        <div class="field-name">
                                            {{t "service-rate.fields.additional-fee"}}
                                        </div>
                                        <div class="field-value">
                                            {{n-a (format-currency (f-to-int parcelFee.fee) @resource.currency)}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {{else}}
                    <div class="col-span-2">
                        <span class="text-gray-500 text-sm italic">No parcel fees configured</span>
                    </div>
                {{/each}}
            </div>
        </ContentPanel>
    {{/if}}

    <ContentPanel @title={{t "service-rate.fields.restrict-service-title"}} @open={{true}} @wrapperClass="bordered-top">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2">
            <div class="field-info-container">
                <div class="field-name">{{t "service-rate.fields.service-area-label"}}</div>
                <div class="field-value">{{n-a @resource.serviceArea.name}}</div>
            </div>

            {{#if @resource.serviceArea}}
                <div class="field-info-container">
                    <div class="field-name">{{t "service-rate.fields.zone-label"}}</div>
                    <div class="field-value">{{n-a @resource.zone.name}}</div>
                </div>
            {{/if}}
        </div>
    </ContentPanel>

    <ContentPanel @title="Additional Fees" @open={{true}} @wrapperClass="bordered-top">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-2">
            <div class="field-info-container">
                <div class="field-name">Cash on Delivery (COD)</div>
                <div class="field-value">
                    {{#if @resource.cod_calculation_method}}
                        {{#let (find-by "value" @resource.cod_calculation_method (get-fleet-ops-options "serviceRateCodCalculationMethods")) as |method|}}
                            {{#if method}}
                                <div class="space-y-1">
                                    <Badge @status="info">{{method.label}}</Badge>
                                    {{#if @resource.hasCodFlatFee}}
                                        <div class="mt-1">{{format-currency @resource.cod_flat_fee @resource.currency}}</div>
                                    {{else if @resource.hasCodPercentageFee}}
                                        <div class="mt-1">{{@resource.cod_percent}}% of order value</div>
                                    {{/if}}
                                </div>
                            {{/if}}
                        {{/let}}
                    {{else}}
                        <span class="text-gray-500 italic">Not configured</span>
                    {{/if}}
                </div>
            </div>

            <div class="field-info-container">
                <div class="field-name">Peak Hours Surcharge</div>
                <div class="field-value">
                    {{#if @resource.peak_hours_calculation_method}}
                        {{#let (find-by "value" @resource.peak_hours_calculation_method (get-fleet-ops-options "serviceRatePeakHourCalculationMethods")) as |method|}}
                            {{#if method}}
                                <div class="space-y-1">
                                    <Badge @status="warning">{{method.label}}</Badge>
                                    {{#if @resource.hasPeakHoursFlatFee}}
                                        <div class="mt-1">{{format-currency @resource.peak_hours_flat_fee @resource.currency}}</div>
                                    {{else if @resource.hasPeakHoursPercentageFee}}
                                        <div class="mt-1">{{@resource.peak_hours_percent}}% surcharge</div>
                                    {{/if}}
                                </div>
                            {{/if}}
                        {{/let}}
                    {{else}}
                        <span class="text-gray-500 italic">Not configured</span>
                    {{/if}}
                </div>
            </div>
        </div>
    </ContentPanel>

    <CustomField::Yield @subject={{@resource}} @viewMode={{true}} @wrapperClass="bordered-top" />
</div>
