@model ShipmentDetailsModel

<script>
    $(document).ready(function () {
        $("#@Html.IdFor(model => model.UseCustomsInfo)").click(toggleUseCustomsInfo);
        $("#@Html.IdFor(model => model.ContentsType)").change(toggleUseCustomsInfo);
        $("#@Html.IdFor(model => model.RestrictionType)").change(toggleUseCustomsInfo);
        toggleUseCustomsInfo();

        $("#@Html.IdFor(model => model.RegisteredMail)").click(toggleRegisteredMail);
        toggleRegisteredMail();

        $("#@Html.IdFor(model => model.DisplaySmartRates)").click(toggleDisplaySmartRates);
        toggleDisplaySmartRates();
    });

    function toggleUseCustomsInfo() {
        if ($('#@Html.IdFor(model => model.UseCustomsInfo)').is(':checked')) {
            $('#customs-info').showElement();

            if ($('#@Html.IdFor(model => model.ContentsType)').val() == @((int)ContentsType.Other)) {
                $('#contents-explanation').showElement();
            }
            else {
                $('#contents-explanation').hideElement();
            }

            if ($('#@Html.IdFor(model => model.RestrictionType)').val() == @((int)RestrictionType.Other)) {
                $('#restriction-comments').showElement();
            }
            else {
                $('#restriction-comments').hideElement();
            }
        } else {
            $('#customs-info').hideElement();
            $('#contents-explanation').hideElement();
            $('#restriction-comments').hideElement();
        }
    }

    function toggleRegisteredMail() {
        if ($('#@Html.IdFor(model => model.RegisteredMail)').is(':checked')) {
            $('#registered-mail-amount').showElement();
        } else {
            $('#registered-mail-amount').hideElement();
        }
    }

    function toggleDisplaySmartRates() {
        if ($('#@Html.IdFor(model => model.DisplaySmartRates)').is(':checked')) {
            $('#smart-rates').showElement();
        } else {
            $('#smart-rates').hideElement();
        }
    }
</script>

<div class="card card-secondary card-outline">
    <div> <!-- to avoid binding click trigger: .card.card-secondary > .card-header  --> 
        <div class="card-header with-border clearfix">
        <div class="card-title">
            <i class="fas fa-truck"></i>
            @T("Plugins.Shipping.EasyPost.Shipment")
        </div>
    </div>
    </div>
    <div class="card-body">
        <input asp-for="Id" type="hidden" />
        @if (!string.IsNullOrEmpty(Model.RateName))
        {
            <div class="form-group row">
                <div class="col-md-3">
                    <nop-label asp-for="ShipmentId" />
                </div>
                <div class="col-md-9">
                    <div class="form-text-row">@Model.ShipmentId</div>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-md-3">
                    <nop-label asp-for="RateName" />
                </div>
                <div class="col-md-9">
                    <div class="form-text-row">@Model.RateName</div>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-md-3">
                    <nop-label asp-for="RateValue" />
                </div>
                <div class="col-md-9">
                    <div class="form-text-row">@Model.RateValue</div>
                </div>
            </div>
            @if (!string.IsNullOrEmpty(Model.InsuranceValue))
            {
                <div class="form-group row">
                    <div class="col-md-3">
                        <nop-label asp-for="InsuranceValue" />
                    </div>
                    <div class="col-md-9">
                        <div class="form-text-row">@Model.InsuranceValue</div>
                    </div>
                </div>
            }
            @if (!string.IsNullOrEmpty(Model.Status))
            {
                <div class="form-group row">
                    <div class="col-md-3">
                        <nop-label asp-for="Status" />
                    </div>
                    <div class="col-md-9">
                        <div class="form-text-row">@Model.Status</div>
                    </div>
                </div>
            }
            @if (!string.IsNullOrEmpty(Model.RefundStatus))
            {
                <div class="form-group row">
                    <div class="col-md-3">
                        <nop-label asp-for="RefundStatus" />
                    </div>
                    <div class="col-md-9">
                        <div class="form-text-row">@Model.RefundStatus</div>
                    </div>
                </div>
            }
            @if (!string.IsNullOrEmpty(Model.PickupStatus))
            {
                <div class="form-group row">
                    <div class="col-md-3">
                        <nop-label asp-for="PickupStatus" />
                    </div>
                    <div class="col-md-9">
                        <div class="form-text-row">@Model.PickupStatus</div>
                    </div>
                </div>
            }

            @await Html.PartialAsync("~/Plugins/Shipping.EasyPost/Views/Pickup/_PickupDetails.cshtml", Model.PickupModel)
        }
        else
        {
            <div class="card card-default no-margin">
                <div class="card-header">
                    @T("Plugins.Shipping.EasyPost.Shipment.Rate")
                </div>
                <div class="card-body">
                    <p>
                        <em>
                            Note: The shipping rates here and what the customer sees during the checkout may differ.
                            In a public store, rates can be influenced by many factors, discounts, taxes, free shipping settings, the selected currency, etc.
                            And here are the rates for store managers, right how much the sender will have to pay for the shipment.
                            In addition, if you change shipment items or their quantity, add options or customs form, rates also may adjust,
                            because during the checkout the customer selects shipping rate for the entire cart, and without the options below.
                        </em>
                    </p>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <nop-label asp-for="RateId" />
                        </div>
                        <div class="col-md-9">
                            <nop-select asp-for="RateId" asp-items="Model.AvailableRates" />
                            <span asp-validation-for="RateId"></span>
                        </div>
                    </div>
                    @if (Model.SmartRates.Any())
                    {
                        <div class="form-group row"></div>
                        <div class="form-group row">
                            <div class="col-md-3">
                                <nop-label asp-for="DisplaySmartRates" />
                            </div>
                            <div class="col-md-9">
                                <nop-editor asp-for="DisplaySmartRates" />
                                <span asp-validation-for="DisplaySmartRates"></span>
                            </div>
                        </div>
                        <div id="smart-rates">
                            <p>
                                The SmartRate feature provides shippers predicted transit days across a variety of percentiles for each carrier service being evaluated for the shipment.
                                The transit time predictions in the response are based off of a sophisticated model using actual historical data for the shipping lane in question.<br />
                                Delivery days is the value provided by the carrier<br />
                                Transit days are calculated as the number of business days between the first time the carrier acknowledges possession of the shipment and the first out-for-delivery attempt.<br />
                                Using the Smart Rates, you can make better data-driven decisions about which rate to select when purchasing a label.
                            </p>
                            <table class="table table-hover table-bordered">
                                <thead>
                                    <tr>
                                        <th class="text-left">@T("Plugins.Shipping.EasyPost.Shipment.Rate.SmartRate.Name")</th>
                                        <th class="text-center">@T("Plugins.Shipping.EasyPost.Shipment.Rate.SmartRate.DeliveryDays")</th>
                                        <th class="text-center">50%</th>
                                        <th class="text-center">75%</th>
                                        <th class="text-center">85%</th>
                                        <th class="text-center">90%</th>
                                        <th class="text-center">95%</th>
                                        <th class="text-center">97%</th>
                                        <th class="text-center">99%</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach (var item in Model.SmartRates)
                                    {
                                        <tr>
                                            <td style="width: 28%;" class="text-left">
                                                @item.Name
                                            </td>
                                            <td style="width: 16%;" class="text-center">
                                                @item.Delivery_days
                                            </td>
                                            <td style="width: 8%;" class="text-center">
                                                @item.TimeInTransit[50]
                                            </td>
                                            <td style="width: 8%;" class="text-center">
                                                @item.TimeInTransit[75]
                                            </td>
                                            <td style="width: 8%;" class="text-center">
                                                @item.TimeInTransit[85]
                                            </td>
                                            <td style="width: 8%;" class="text-center">
                                                @item.TimeInTransit[90]
                                            </td>
                                            <td style="width: 8%;" class="text-center">
                                                @item.TimeInTransit[95]
                                            </td>
                                            <td style="width: 8%;" class="text-center">
                                                @item.TimeInTransit[97]
                                            </td>
                                            <td style="width: 8%;" class="text-center">
                                                @item.TimeInTransit[99]
                                            </td>
                                        </tr>
                                    }
                                </tbody>
                            </table>
                        </div>
                    }
                    <div class="form-group row"></div>
                    <p>
                        Insuring your shipment is as simple as sending the value of the contents.<br />
                        EasyPost charges 0.5% of the value, with a 50 cent minimum, and handle all the claims. All claims are paid out within 10 days.
                    </p>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <nop-label asp-for="Insurance" />
                        </div>
                        <div class="col-md-9">
                            <nop-editor asp-for="Insurance" />
                            <span asp-validation-for="Insurance"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card card-default no-margin">
                <div class="card-header">
                    @T("Plugins.Shipping.EasyPost.Shipment.Options")
                </div>
                <div class="card-body">
                    <p>
                        Shipments can have a variety of additional options which you can specify here and then update the shipment.<br />
                        Carrier specific support for each option is added as needed. To request support for a specific carrier option please email at <a href="mailto:support@easypost.com">support@easypost.com</a>.
                    </p>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <nop-label asp-for="AdditionalHandling" />
                        </div>
                        <div class="col-md-9">
                            <nop-editor asp-for="AdditionalHandling" />
                            <span asp-validation-for="AdditionalHandling"></span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <nop-label asp-for="Alcohol" />
                        </div>
                        <div class="col-md-9">
                            <nop-editor asp-for="Alcohol" />
                            <span asp-validation-for="Alcohol"></span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <nop-label asp-for="ByDrone" />
                        </div>
                        <div class="col-md-9">
                            <nop-editor asp-for="ByDrone" />
                            <span asp-validation-for="ByDrone"></span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <nop-label asp-for="CarbonNeutral" />
                        </div>
                        <div class="col-md-9">
                            <nop-editor asp-for="CarbonNeutral" />
                            <span asp-validation-for="CarbonNeutral"></span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <nop-label asp-for="DeliveryConfirmation" />
                        </div>
                        <div class="col-md-9">
                            <nop-select asp-for="DeliveryConfirmation" asp-items="Model.AvailableDeliveryConfirmations" />
                            <span asp-validation-for="DeliveryConfirmation"></span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <nop-label asp-for="Endorsement" />
                        </div>
                        <div class="col-md-9">
                            <nop-select asp-for="Endorsement" asp-items="Model.AvailableEndorsements" />
                            <span asp-validation-for="Endorsement"></span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <nop-label asp-for="HandlingInstructions" />
                        </div>
                        <div class="col-md-9">
                            <nop-editor asp-for="HandlingInstructions" />
                            <span asp-validation-for="HandlingInstructions"></span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <nop-label asp-for="Hazmat" />
                        </div>
                        <div class="col-md-9">
                            <nop-select asp-for="Hazmat" asp-items="Model.AvailableHazmatTypes" />
                            <span asp-validation-for="Hazmat"></span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <nop-label asp-for="InvoiceNumber" />
                        </div>
                        <div class="col-md-9">
                            <nop-editor asp-for="InvoiceNumber" />
                            <span asp-validation-for="InvoiceNumber"></span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <nop-label asp-for="Machinable" />
                        </div>
                        <div class="col-md-9">
                            <nop-editor asp-for="Machinable" />
                            <span asp-validation-for="Machinable"></span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <nop-label asp-for="SpecialRatesEligibility" />
                        </div>
                        <div class="col-md-9">
                            <nop-select asp-for="SpecialRatesEligibility" asp-items="Model.AvailableSpecialRates" />
                            <span asp-validation-for="SpecialRatesEligibility"></span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <nop-label asp-for="CertifiedMail" />
                        </div>
                        <div class="col-md-9">
                            <nop-editor asp-for="CertifiedMail" />
                            <span asp-validation-for="CertifiedMail"></span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <nop-label asp-for="RegisteredMail" />
                        </div>
                        <div class="col-md-9">
                            <nop-editor asp-for="RegisteredMail" />
                            <span asp-validation-for="RegisteredMail"></span>
                        </div>
                    </div>
                    <nop-nested-setting asp-for="RegisteredMail" id="registered-mail-amount" disable-auto-generation="true">
                        <div class="form-group row">
                            <div class="col-md-3">
                                <nop-label asp-for="RegisteredMailAmount" />
                            </div>
                            <div class="col-md-9">
                                <nop-editor asp-for="RegisteredMailAmount" />
                                <span asp-validation-for="RegisteredMailAmount"></span>
                            </div>
                        </div>
                    </nop-nested-setting>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <nop-label asp-for="ReturnReceipt" />
                        </div>
                        <div class="col-md-9">
                            <nop-editor asp-for="ReturnReceipt" />
                            <span asp-validation-for="ReturnReceipt"></span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <nop-label asp-for="PrintCustomCode1" />
                        </div>
                        <div class="col-md-9">
                            <nop-select asp-for="PrintCustomCode1" asp-items="Model.AvailableCustomCodes" />
                            <span asp-validation-for="PrintCustomCode1"></span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <nop-label asp-for="PrintCustom1" />
                        </div>
                        <div class="col-md-9">
                            <nop-editor asp-for="PrintCustom1" />
                            <span asp-validation-for="PrintCustom1"></span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <nop-label asp-for="PrintCustomCode2" />
                        </div>
                        <div class="col-md-9">
                            <nop-select asp-for="PrintCustomCode2" asp-items="Model.AvailableCustomCodes" />
                            <span asp-validation-for="PrintCustomCode2"></span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <nop-label asp-for="PrintCustom2" />
                        </div>
                        <div class="col-md-9">
                            <nop-editor asp-for="PrintCustom2" />
                            <span asp-validation-for="PrintCustom2"></span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <nop-label asp-for="PrintCustomCode3" />
                        </div>
                        <div class="col-md-9">
                            <nop-select asp-for="PrintCustomCode3" asp-items="Model.AvailableCustomCodes" />
                            <span asp-validation-for="PrintCustomCode3"></span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <nop-label asp-for="PrintCustom3" />
                        </div>
                        <div class="col-md-9">
                            <nop-editor asp-for="PrintCustom3" />
                            <span asp-validation-for="PrintCustom3"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card card-default no-margin">
                <div class="card-header">
                    @T("Plugins.Shipping.EasyPost.Shipment.CustomsInfo")
                </div>
                <div class="card-body">
                    <p>
                        When shipping internationally, you need to add customs information to your shipment.
                        EasyPost uses this information to automatically generate the necessary customs forms for your shipment.
                        You need to pass customs information whenever you are shipping between two countries.<br />
                        If you ever have any specific questions, don’t hesitate to email at <a href="mailto:support@easypost.com">support@easypost.com</a>.<br />
                    </p>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <nop-label asp-for="UseCustomsInfo" />
                        </div>
                        <div class="col-md-9">
                            <nop-editor asp-for="UseCustomsInfo" />
                            <span asp-validation-for="UseCustomsInfo"></span>
                        </div>
                    </div>
                    <nop-nested-setting asp-for="UseCustomsInfo" id="customs-info" disable-auto-generation="true">
                        <div class="form-group row">
                            <div class="col-md-3">
                                <nop-label asp-for="ContentsType" />
                            </div>
                            <div class="col-md-9">
                                <nop-select asp-for="ContentsType" asp-items="Model.AvailableContentsTypes" />
                                <span asp-validation-for="ContentsType"></span>
                            </div>
                        </div>
                        <div class="form-group row" id="contents-explanation">
                            <div class="col-md-3">
                                <nop-label asp-for="ContentsExplanation" />
                            </div>
                            <div class="col-md-9">
                                <nop-editor asp-for="ContentsExplanation" />
                                <span asp-validation-for="ContentsExplanation"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-3">
                                <nop-label asp-for="RestrictionType" />
                            </div>
                            <div class="col-md-9">
                                <nop-select asp-for="RestrictionType" asp-items="Model.AvailableRestrictionTypes" />
                                <span asp-validation-for="RestrictionType"></span>
                            </div>
                        </div>
                        <div class="form-group row" id="restriction-comments">
                            <div class="col-md-3">
                                <nop-label asp-for="RestrictionComments" />
                            </div>
                            <div class="col-md-9">
                                <nop-editor asp-for="RestrictionComments" />
                                <span asp-validation-for="RestrictionComments"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-3">
                                <nop-label asp-for="CustomsCertify" />
                            </div>
                            <div class="col-md-9">
                                <nop-editor asp-for="CustomsCertify" />
                                <span asp-validation-for="CustomsCertify"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-3">
                                <nop-label asp-for="CustomsSigner" />
                            </div>
                            <div class="col-md-9">
                                <nop-editor asp-for="CustomsSigner" />
                                <span asp-validation-for="CustomsSigner"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-3">
                                <nop-label asp-for="NonDeliveryOption" />
                            </div>
                            <div class="col-md-9">
                                <nop-select asp-for="NonDeliveryOption" asp-items="Model.AvailableNonDeliveryOptions" />
                                <span asp-validation-for="NonDeliveryOption"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-3">
                                <nop-label asp-for="EelPfc" />
                            </div>
                            <div class="col-md-9">
                                <nop-editor asp-for="EelPfc" />
                                <span asp-validation-for="EelPfc"></span>
                            </div>
                        </div>
                    </nop-nested-setting>
                </div>
            </div>
        }
    </div>
</div>