@inherits ViewModelTemplate<AddressListViewModel>
@using Dynamicweb.Users.Frontend.UserAddresses
@using Dynamicweb.Rendering
@using Dynamicweb.Frontend
@using Dynamicweb.Ecommerce.Frontend
@using Dynamicweb.Security.UserManagement

@{
    string baseUrl = SearchEngineFriendlyURLs.GetFriendlyUrl($"default.aspx?ID={Pageview.Page.ID}");
    var resultType = Model.GetResult();
}

<header class="hstack flex-wrap gap-3 mb-4">
    <h1 class="h4 mb-0 flex-fill">@(Pageview.Page.GetDisplayName())</h1>
    @if (Model.AllowEditAddress) 
    {
        <button class="btn btn-sm btn-primary hstack gap-2 ms-auto py-2 px-3" name="Cmd" value="EditAddress" data-dw-button
            tabindex="0"
            aria-label="@Translate("Add address")"
            data-bs-toggle="offcanvas" 
            data-bs-target="[data-swift-address-add-offcanvas]" 
            hx-trigger="click" 
            hx-get
            hx-swap="innerHTML"
            hx-target="[data-swift-address-add-offcanvas] .offcanvas-body"
            hx-select="[data-swift-address-editform]"
        >
            <span class="icon-2">
                @ReadFile("/Files/Images/Icons/plus.svg")
            </span>
            <span>@Translate("Add address")</span>
        </button>

        <div class="offcanvas offcanvas-end" tabindex="-1" data-swift-address-add-offcanvas>
            <div class="offcanvas-header">
                <h5 class="offcanvas-title m-0">@Translate("Add address")</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="@Translate("Close")"></button>
            </div>
            <div class="offcanvas-body"></div>
        </div>
    }
</header>

<div data-swift-addresses>
    @if (Model.Addresses.Count() > 0)
    {

        <div class="d-grid gap-3" style="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))">
            @foreach (var address in Model.Addresses)
            {
                <address class="card m-0">
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-2">
                            @if (!string.IsNullOrEmpty(address.Name))
                            {
                                <h6 class="card-title m-0 fw-bold flex-fill">
                                    @address.Name
                                </h6>
                            }
                            @if (Model.AllowEditAddress) {
                                <button class="btn btn-icon position-relative z-2" data-dw-button type="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-popper-config='{"strategy":"fixed", "placement":"bottom-end"}'>
                                    <span class="icon-2">
                                        @ReadFile("/Files/Images/Icons/ellipsis.svg")
                                    </span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li>
                                        <button type="button" name="Cmd" value="EditAddress" class="dropdown-item hstack gap-2 ps-2 pe-3 rounded-1"  
                                            aria-label="@Translate("Edit address")" 
                                            data-bs-toggle="offcanvas"
                                            data-bs-target="[data-swift-address-edit-offcanvas]" 
                                            hx-trigger="click" 
                                            hx-get
                                            hx-swap="innerHTML"
                                            hx-target="[data-swift-address-edit-offcanvas] .offcanvas-body"
                                            hx-select="[data-swift-address-editform]"
                                            hx-vals='{"AddressId": "@address.Id"}'
                                        >

                                            <span class="icon-2">
                                                @ReadFile("/Files/Images/Icons/pen-to-square.svg")
                                            </span>
                                            @Translate("Edit")
                                        </button>
                                    </li>
                                    @if(address.AddressKind == UserAddressKind.Shipping) 
                                    {
                                        <li>
                                            <button type="button" name="Cmd" value="SetDefault" class="dropdown-item hstack gap-2 ps-2 pe-3 rounded-1" @(address.IsDefault ? "disabled aria-disabled='true'" : null)
                                                hx-trigger="click"
                                                hx-post
                                                hx-swap="outerHTML"
                                                hx-vals='{"AddressId": "@address.Id", "IsDefault": "true"}'
                                                hx-target="[data-swift-addresses]"
                                                hx-select="[data-swift-addresses]"
                                            >
                                                <span class="icon-2">
                                                    @ReadFile("/Files/Images/Icons/circle-check.svg")
                                                </span>
                                                @Translate("Set as default")
                                            </button>
                                        </li>
                                    }
                                    <li><hr class="dropdown-divider my-1"></li>
                                    <li>
                                        <button type="button" name="AddressId" value="@(address.Id)" class="dropdown-item hstack gap-2 ps-2 pe-3 rounded-1 text-danger"
                                            hx-trigger="click"
                                            hx-get="@(baseUrl)" 
                                            hx-vals='{"AddressName": "@(address.Name)", "LayoutTemplate": "/Designs/Swift-v2/Users/UserAddresses/List/Addresses/DeleteAddressModal.cshtml"}'
                                            hx-target="main"
                                            hx-swap="beforeend"
                                        >
                                            <span class="icon-2">
                                                @ReadFile("/Files/Images/Icons/trash-can.svg")
                                            </span>
                                            @Translate("Delete")
                                        </button>
                                    </li>
                                </ul>
                            }
                        </div>

                        <div class="card-text flex-fill">
                            @if (address.AddressKind != UserAddressKind.None) {
                                <div class="hstack gap-2 mb-3">
                                    @if (address.AddressKind == UserAddressKind.Shipping)
                                    {
                                        <div class="badge badge-neutral-light">
                                            @Translate("Delivery")
                                        </div>
                                    }
                                    else if (address.AddressKind == UserAddressKind.Billing)
                                    {
                                        <div class="badge badge-neutral-dark">
                                            @Translate("Billing")
                                        </div>
                                    }
                                    @if (address.IsDefault && address.AddressKind == UserAddressKind.Shipping)
                                    {
                                        <div class="badge badge-neutral">
                                            @Translate("Default delivery")
                                        </div>
                                    }
                                    @if (address.IsDefault && address.AddressKind == UserAddressKind.Billing)
                                    {
                                        <div class="badge badge-neutral">
                                            @Translate("Default billing")
                                        </div>
                                    }
                                </div>
                            }

                            <address class="fs-7 mb-0">
                                <div>@address.Company</div>
                                <div>@address.Address</div>
                                <div>@address.Address2</div>
                                @if (address.CountryCode == "US" || address.CountryCode == "CA")
                                {
                                    <div>@address.City @address.GetStateName() @address.Zip</div>
                                }
                                else
                                {
                                    <div>@address.Zip @address.City</div>
                                }
                                <div>@address.Country</div>
                                <div class="mt-2">
                                    @if (!string.IsNullOrEmpty(address.Phone)) {
                                        <div>@Translate("Phone"): @address.Phone</div>
                                    }
                                    @if (!string.IsNullOrEmpty(address.Email)) {
                                        <div>@Translate("Email"): @address.Email</div>
                                    }
                                </div>
                            </address>
                        </div>
                    </div>
                </address>
            }

            <div class="offcanvas offcanvas-end" tabindex="-1" data-swift-address-edit-offcanvas>
                <div class="offcanvas-header">
                    <h5 class="offcanvas-title m-0">@Translate("Edit address")</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="@Translate("Close")"></button>
                </div>
                <div class="offcanvas-body"></div>
            </div>
        </div>

        @if (resultType != null && resultType != UserAddressResultType.None) {
            <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
                <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" x-data="" x-init="const toast = new bootstrap.Toast($el, { autohide: true, delay: 5000 }); toast.show();">
                    <div class="toast-header justify-content-between">
                        <strong class="hstack gap-2">
                            @if (resultType != UserAddressResultType.InvalidEmail) {
                                <div class="icon text-success">
                                    @ReadFile("/Files/Images/Icons/circle-check.svg")
                                </div>
                            } else {
                                <div class="icon text-danger">
                                    @ReadFile("/Files/Images/Icons/triangle-exclamation.svg")
                                </div>
                            }
                            @Translate($"Address_{resultType.ToString()}_Title")
                        </strong>
                        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                    </div>
                    <div class="toast-body">
                        @Translate($"Address_{resultType.ToString()}_Text")
                    </div>
                </div>
            </div>
        }
    }
    else
    {
        <div class="d-flex flex-column justify-content-center align-items-center card w-100">
            <div class="card-body">
                <div class="d-grid rounded-circle m-auto" style="width:4rem;aspect-ratio:1;background-color:rgba(var(--bs-body-color-rgb), .0275);">
                    <span class="icon-4 text-muted">
                        @ReadFile("/Files/Images/Icons/map-location-dot.svg")
                    </span>
                </div>
                <div class="mt-3">@Translate("No addresses found")</div>
            </div>
        </div>
    }
</div>

@if (Model.PageCount > 1)
{
    <form class="p-3 mt-3">
        <ul class="pagination m-0">
            @for (int i = 1; i <= Model.PageCount; i++)
            {
                var active = (i == Model.CurrentPage) ? "active" : string.Empty;
                <li class="page-item @active">
                    <button type="submit" class="page-link" name="PageNum" value="@i">@i</button>
                </li>
            }
        </ul>
    </form>
}
