TourIAm/TIAMSharedUI/Pages/User/CardComponents/ProductCardComponent.razor

@using System.Diagnostics.CodeAnalysis
@using AyCode.Core.Extensions
@using AyCode.Core.Helpers
@using BlazorAnimation
@using TIAM.Core.Enums
@using TIAM.Entities.Addresses
@using TIAM.Entities.Products
@using TIAM.Entities.Profiles
@using TIAM.Entities.ServiceProviders
@using TIAM.Entities.Transfers
@using TIAM.Entities.Users
@using TIAM.Models.Dtos.Users
@using TIAM.Services
@using TIAMSharedUI.Shared.Components.Cards
@using TIAMWebApp.Shared.Application.Interfaces
@using TIAMWebApp.Shared.Application.Models.ClientSide.UI
@using TIAMWebApp.Shared.Application.Models.PageModels
@using TIAMWebApp.Shared.Application.Services
@inject IServiceProviderDataService ServiceProviderDataService
@inject IUserDataService UserDataService
@inject AdminSignalRClient AdminSignalRClient
@inject IJSRuntime JsRuntime
@inject NavigationManager NavManager

<div class="e-card cw-480">
    <div class="e-main d-flex align-items-center">
        
        <div class="flex-shrink-0">
            <a href="api/pictures/1" download="data:image/png;base64,@ImageSource" target="_top">
                <img class="align-self-center img-fluid" src="data:image/png;base64,@ImageSource" width="128" height="128" />
            </a>
            <br />
            <DxButton Context="ButtonContext" CssClass="btn-primary" Click="DownloadImage"><i class="fa-solid fa-download"></i> Download QR</DxButton>
        </div>

        <div class="e-info flex-grow-1 ms-3">
            <div class="e-name">@($"{Product.Name}")</div>
            <p class="e-title"><i class="fa-solid fa-at"></i> @Product.Profile.EmailAddress</p>
            <p class="e-title"><i class="fa-solid fa-location-dot"></i> @Product.Profile.Address.AddressText</p>
        </div>
    </div>

    <hr class="hr" />

    <div class="row">
        <div class="col-12 col-md-3">
            <h4>Information</h4>
            @RenderDetailsItem("fa-solid fa-user", "Contact Name", Product.Profile.Name)
            @RenderDetailsItem("fa-solid fa-circle-info", "Description", Product.Description)
        </div>

        <div class="col-12 col-md-9">
            <h4>Affiliate information</h4>
            @{
                var _url = $"{Setting.BaseUrl}/public/transfer/{Product.ServiceProvider.AffiliateId}/{Product.Id}";
                <p>Use this link to send it in an email to the client</p>
                <a href="@_url" target="_blank">@_url</a>
                <DxButton Context="ButtonContext" CssClass="btn-primary" Click="() => CopyUrl(_url)"><i class="fa-solid fa-copy"></i></DxButton>
            }
        </div>

        <div class="col-12 col-md-6"></div>

        <div class="col-12">
            <div class="row py-3">
                <div class="col-4">
                    @{
                        if (Product.ProductType == ProductType.Hotel)
                        {
                            var url = $"user/hoteladmin/{Product.Id}";
                            <DxButton class="btn-primary" Click="() => NavManager.NavigateTo(url)">Manage</DxButton>
                        }
                        else if (Product.ProductType == ProductType.Transfer)
                        {
                            var url = $"user/transferadmin/{Product.Id}";
                            <DxButton class="btn btn-primary" Click="() => NavManager.NavigateTo(url)">Manage</DxButton>
                        }
                    }
                </div>
                <div class="col-4">
                    @{
                        <DxButton Visible="!_isAddressTransferDestination" Click="() => SaveAsDestination(Product.Profile.Address, Product)" Text="Save as destination" RenderStyle="ButtonRenderStyle.Primary"/>
                    }
                </div>
                <div class="col-4"></div>
            </div>
        </div>
        <p>@_msg</p>
    </div>
</div>

<script>
    function copyToClipboard(text) {
        navigator.clipboard.writeText(text).then(function () {
            console.log('Copied to clipboard successfully!');
        }, function (err) {
            alert('Could not copy text: ' + err);
        });
    }

    function downloadImage(base64String, filename) {
        const link = document.createElement('a');
        link.href = base64String;
        link.download = filename;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
</script>

@code {
    [Parameter] public required Product Product { get; set; }

    [Parameter] public EventCallback<string> DataChanged { get; set; }

    public string ImageSource { get; set; } = "";
    AccordionExpandMode ExpandMode { get; set; } = AccordionExpandMode.SingleOrNone;
    AccordionExpandCollapseAction ExpandCollapseAction { get; set; } = AccordionExpandCollapseAction.HeaderClick;

    //private Profile _productProfile = null!;//new Profile();
    private readonly List<TransferDestination> _destinations = [];
    string _msg;
    private bool _isSaveActive = false;
    private bool _isAddressTransferDestination = false;

    private async Task CopyUrl(string url)
    {
        await JsRuntime.InvokeVoidAsync("copyToClipboard", url);
    }

    private async Task DownloadImage()
    {
        await JsRuntime.InvokeVoidAsync("downloadImage", $"data:image/png;base64,{ImageSource}", "QRCode.jpg");
    }

    protected override async Task OnInitializedAsync()
    {
        AdminSignalRClient.GetTransferDestinationsAsync(_destinations, () =>
        {
            _isAddressTransferDestination = CheckDestinations(Product.Id);
            StateHasChanged();

        }).Forget();

        AdminSignalRClient.GetByIdAsync<List<Company>>(SignalRTags.GetCompaniesById, async response =>
        {
            ImageSource = await ServiceProviderDataService.GetQRCodeByProductIdAndOwnerAffiliateIdAsync([response.ResponseData!.First().AffiliateId, Product.Id]);
            StateHasChanged();

        }, Product.ServiceProviderId).Forget();

        await base.OnInitializedAsync();
    }

    protected override async Task OnParametersSetAsync()
    {
        await base.OnParametersSetAsync();
    }

    RenderFragment RenderDetailsItem(string iconCssClass, string caption, string value)
    {
        return @<div class="d-flex m-1 align-items-center">
            <div class="icon-container flex-shrink-0">
                <span class="dxbl-image m-1 @iconCssClass"></span>
            </div>
            <div class="text-container m-1 flex-grow-1 ms-2">
                <label>@caption:</label>
                <div>@value</div>
            </div>
        </div>;
    }

    private bool CheckDestinations(Guid productId)
    {
        return _destinations.Any(d => d.ProductId == productId);
    }

    private async Task SaveAsDestination(Address address, Product product)
    {
        var transferDestination = new TransferDestination
        {
            Id = Guid.NewGuid(),
            Name = product.Name,
            ProductId = product.Id,
            Description = !string.IsNullOrEmpty(product.Profile.Description) ? product.Profile.Description : "No description available",
            AddressId = address.Id,
            AddressString = address.AddressText
        };

        await AdminSignalRClient.PostDataAsync(SignalRTags.CreateTransferDestination, transferDestination);
        await InvokeAsync(StateHasChanged);
    }
}