@page "/bundle/{productid}"
@inject ProductAPIConsumer ProductService
@inject NavigationManager nav


<div class="text-gray-700 dark:text-gray-200 body-font overflow-hidden bg-white dark:bg-gray-900">
    <div class="container px-5 py-12 mx-auto">
        <div class="lg:w-4/5 mx-auto flex flex-wrap">
            <div class="lg:w-1/2 w-full lg:pr-10 lg:py-6 mb-6 lg:mb-0">
                <h2 class="text-sm title-font text-gray-500 tracking-widest uppercase">@Loc["Bundle_Deal"]</h2>
                <h1 class="text-gray-900 dark:text-white text-3xl title-font font-medium mb-1">@(Product.Translations?.FirstOrDefault()?.Info?.Name ?? string.Empty)</h1>
                @if (!string.IsNullOrEmpty(Product.CodeName))
                {
                    <h2 class="text-xs text-gray-500 tracking-widest font-medium mb-4">MODEL: @Product.CodeName</h2>
                }

                <p class="leading-relaxed mb-6">@(Product.Translations?.FirstOrDefault()?.Info?.Description ?? string.Empty)</p>

                <div class="mb-6">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">@Loc["Included_in_Bundle"]:
                    </h3>
                    <ul class="space-y-2">
                        @if (Product.ChildProducts != null)
                        {
                            @foreach (var item in Product.ChildProducts)
                            {
                                <li class="flex items-center text-gray-600 dark:text-gray-400">
                                    <svg class="w-4 h-4 mr-2 text-green-500" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M5 13l4 4L19 7"></path>
                                    </svg>
                                    @(item.Translations?.FirstOrDefault()?.Info?.Name ?? string.Empty)
                                </li>
                            }
                        }
                    </ul>
                </div>

                <div class="flex items-center border-t border-gray-200 dark:border-gray-700 pt-6">
                    <div class="flex flex-col">
                        @if (Product.Discount > 0 && Product.Price.HasValue)
                        {
                            <span class="title-font font-medium text-2xl text-red-600 dark:text-red-400">
                                $@((Product.Price.Value - (Product.Price.Value * (Product.Discount.Value /
                                                            100))).ToString("N2"))
                            </span>
                            <div class="flex gap-2 items-center">
                                <span class="text-sm text-gray-500 line-through">
                                    $@Product.Price.Value.ToString("N2")
                                </span>
                                <span class="text-xs font-bold text-white bg-red-500 px-2 py-1 rounded">
                                    -@Product.Discount.Value.ToString("0")%
                                </span>
                            </div>
                        }
                        else
                        {
                            <span class="title-font font-medium text-2xl text-gray-900 dark:text-white">
                                $@(Product.Price.HasValue? Product.Price.Value.ToString("N2") : "N/A")
                            </span>
                        }
                    </div>
                    <button
                        class="flex ml-auto text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded">@Loc["Buy_Bundle"]</button>
                    <button
                        class="rounded-full w-10 h-10 bg-gray-200 dark:bg-gray-700 p-0 border-0 inline-flex items-center justify-center text-gray-500 ml-4">
                        <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            class="w-5 h-5" viewBox="0 0 24 24">
                            <path
                                d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z">
                            </path>
                        </svg>
                    </button>
                </div>
            </div>

            <img alt="@(Product.Translations?.FirstOrDefault()?.Info?.Name ?? string.Empty)" class="lg:w-1/2 w-full lg:h-auto h-64 object-cover object-center rounded shadow-lg"
                src="@(Product.Photos != null && Product.Photos.Any() ? Product.Photos.First() : "https://dummyimage.com/400x400")">
        </div>
    </div>
</div>

@code {

    [Parameter]
    public string ProductId { get; set; }

    ProductVM Product = new();
    protected async override Task OnInitializedAsync()
    {
        Product = await ProductService.GetProduct(ProductId);
    }
}