@page "/products/{ProductId:int}"
@using Website.Client.Pages.Home.ProductPage.Components
@using Website.Client.Shared.Components.Badges
@using Website.Client.Shared.Components.Products

<Meta property="og:image" content="@string.Concat("/api/products/", ProductId, "/image")" />
<Meta property="og:image:width" content="128" />
<Meta property="og:image:height" content="128" />

@if (Product != null)
{
    <Title Value="@string.Join(" - ", Product.Name, "Unturned Store")"></Title>

    <Meta name="description" content="@Product.Description" />
    <Meta property="og:title" content="@Product.Name" />

    <Meta property="og:description" content="@Product.Description" />
    
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">Home</a></li>
            <li class="breadcrumb-item"><a href="/products">Products</a></li>
            <li class="breadcrumb-item active">@Product.Name</li>
        </ol>
    </nav>

    <div class="mb-5">
        <div class="row">
            <div class="col-lg-8">

                @if (!ShowVersions)
                {
                    @if (Product.Medias.Count > 0)
                    {
                        <div class="mb-5">
                            <!-- Carousel wrapper -->
                            <div id="gallery" class="carousel slide carousel-fade" data-bs-ride="carousel">

                                <!-- Inner -->
                                <div class="carousel-inner" style="height: 450px; background-color: black;">
                                    <!-- Single item -->

                                    @for (int i = 0; i < Product.Medias.Count; i++)
                                    {
                                        var media = Product.Medias[i];

                                        <div class="carousel-item @(i == 0 ? "active" : "") d-flex align-items-center justify-content-center" style="height: 450px;">
                                            @if (media.ImageId != null)
                                            {
                                                <img src="/api/images/@media.ImageId" class="mx-auto d-block" style="max-width: 100%; max-height: 100%;" />
                                            }
                                            else
                                            {
                                                <iframe src="@media.GetEmbedUrl()" allow="encrypted-media" allowfullscreen="allowfullscreen" frameborder="0" style="width: 100%; height: 450px;">
                                                </iframe>
                                            }
                                        </div>

                                    }
                                </div>
                                @if (Product.Medias.Count > 1)
                                {
                                    <!-- Inner -->
                                    <!-- Controls -->
                                    <a class="carousel-control-prev" data-bs-target="#gallery" role="button" data-bs-slide="prev">
                                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                        <span class="visually-hidden">Previous</span>
                                    </a>
                                    <a class="carousel-control-next" data-bs-target="#gallery" role="button" data-bs-slide="next">
                                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                        <span class="visually-hidden">Next</span>
                                    </a>
                                }

                            </div>
                            <!-- Carousel wrapper -->
                        </div>

                    }

                    <div>
                        <nav>
                            <ul class="nav nav-tabs small" role="tablist">
                                @for (int i = 0; i < Product.Tabs.Count; i++)
                                {
                                    var tab = Product.Tabs[i];
                                    <li class="nav-item">
                                        <button class="nav-link @(i == 0 ? "active" : "")" id="nav-@tab.Id-tab" data-bs-toggle="tab" data-bs-target="#nav-@tab.Id" type="button" role="tab">
                                            @tab.Title
                                        </button>
                                    </li>                                    
                                }
                                @if (Product.WorkshopItems.Count > 0)
                                {
                                    <li class="nav-item">
                                        <button class="nav-link @(Product.Tabs.Count == 0 ? "active" : "")" id="nav-workshop-tab" data-bs-toggle="tab" data-bs-target="#nav-workshop" type="button" role="tab">
                                            Workshop
                                        </button>
                                    </li>   
                                }
                                <li class="nav-item">
                                    <button class="nav-link @(Product.Tabs.Count == 0 && Product.WorkshopItems.Count == 0 ? "active" : "")" id="nav-reviews-tab" data-bs-toggle="tab" data-bs-target="#nav-reviews" type="button" role="tab">
                                        Reviews
                                    </button>
                                </li>
                            </ul>
                        </nav>
                        <div class="tab-content p-3 bg-light rounded-2">
                            @for (int i = 0; i < Product.Tabs.Count; i++)
                            {
                                var tab = Product.Tabs[i];
                                <div class="tab-pane fade @(i == 0 ? "show active" : "")" id="nav-@tab.Id" role="tabpanel" aria-labelledby="nav-@tab.Id-tab">
                                    @(new MarkupString(tab.Content))
                                </div>
                            }
                            @if (Product.WorkshopItems.Count > 0)
                            {
                                <div class="tab-pane fade @(Product.Tabs.Count == 0 ? "show active" : "")" id="nav-workshop" role="tabpanel" aria-labelledby="nav-workshop-tab">
                                    <WorkshopsTab @ref="WorkshopsTab" Product="Product" />
                                </div>   
                            }
                            <div class="tab-pane fade @(Product.Tabs.Count == 0 && Product.WorkshopItems.Count == 0 ? "show active" : "")" id="nav-reviews" role="tabpanel" aria-labelledby="nav-reviews-tab">
                                <ReviewsTab Product="Product" UserReview="Review" OnDeleteReview="DeleteReviewAsync" OnReviewReplyChanged="ReviewReplyChanged" />
                            </div>
                        </div>
                    </div>
                }
                else
                {
                    <VersionsPage Product="Product" OnDownloadProduct="ShowRequiredProductsAsync" />
                }

            </div>
            <div class="col-lg-4">
                <div class="text-center mt-2 mb-4">
                    <img src="/api/images/@Product.ImageId" width="150" height="150" />
                    <h4 class="mt-2">@Product.Name</h4>
                    <ul class="list-unstyled">
                        <li class="fw-bold">
                            @if (!string.IsNullOrEmpty(Product.Category))
                            {
                               <span><i class="@ProductCategoryConstants.GetCategoryIcon(Product.Category)"></i> @Product.Category</span> 
                            }                            
                        </li>
                        @if (Product.IsLoaderEnabled)
                        {
                            <li class="text-loader fw-bold">
                                <i class="fas fa-cloud-download-alt"></i>
                                Loader Required
                            </li>
                        }
                        @if (Product.Tags.Count > 0)
                        {
                            <li class="d-flex flex-wrap justify-content-center" style="padding: 0.25rem 2rem; gap: 0.25rem;">
                                @foreach (MProductTag productTag in Product.Tags)
                                {
                                    <ProductTag Tag="productTag" />
                                }
                            </li>
                        }
                        <li>
                            Author: <a class="text-decoration-none" href="/users/@Product.Seller.Id">@Product.Seller.Name</a><VerifiedSellerBadge Seller="Product.Seller" />
                        </li>                        
                        
                        <li><ProductRating Product="Product" /></li>                        
                        
                        @if (Product.IsLoaderEnabled)
                        {
                            <li class="small">Servers: @(Product.ServersCount)</li>
                        } else
                        {
                            <li class="small">Downloads: @(Product.TotalDownloadsCount)</li>    
                        }

                        
                        <li><ProductPrice Product="Product" UsePricePrefix="true" PriceClass="fs-5" AlignCenter="true" /></li>

                        @if (!string.IsNullOrEmpty(Product.GithubUrl))
                        {
                            <li><a href="@Product.GithubUrl" target="_blank" class="text-decoration-none"><i class="bi bi-github"></i> GitHub</a></li>
                        }
                    </ul>

                    <div class="d-grid gap-2 mt-3">
                        @if (IsSeller)
                        {
                            <a class="btn btn-success" href="/seller/products/@ProductId">
                                <i class="bi bi-pencil-square"></i> Edit Product
                            </a>
                        }
                        @if (DefaultBranch != null)
                        {
                            @if (IsCustomer && UserService.IsAuthenticated && !IsSeller)
                            {
                                @if (Review == null)
                                {
                                    <button class="btn btn-info" @onclick="ShowReviewModalAsync">
                                        <i class="bi bi-star-half"></i> Create Review
                                    </button>
                                }
                                else
                                {
                                    <button class="btn btn-info" @onclick="ShowReviewModalAsync">
                                        <i class="bi bi-star-half"></i> Edit Review
                                    </button>
                                }
                            }

                            @if (IsCustomer && ShowVersions)
                            {
                                <button class="btn btn-secondary" @onclick="ToggleShowVersions">
                                    <i class="bi bi-info-circle-fill"></i> Show Information
                                </button>
                            }
                            @if (IsCustomer && !ShowVersions)
                            {
                                <button class="btn btn-secondary" @onclick="ToggleShowVersions">
                                    <i class="bi bi-gear-fill"></i> Show All Versions
                                </button>
                            }
                            @if (IsCustomer)
                            {
                                if (Product.IsLoaderEnabled)
                                {
                                    <button class="btn btn-info" @onclick="ShowLoaderConfigurationModalAsync">
                                        <i class="fas fa-code"></i> Show Configuration
                                    </button>
                                }

                                if (Product.IsLoaderEnabled)
                                {
                                    <a class="btn btn-primary" href="/loader">
                                        <i class="bi bi-download"></i> Download Loader
                                    </a>
                                } 
                                else {
                                    <form class="d-grid gap-2" method="get" action="api/versions/download/@LatestVersion.Id">
                                        <button class="btn btn-primary" type="submit" @onclick="ShowRequiredProductsAsync">
                                            <i class="bi bi-download"></i> Download Latest @DefaultBranch.Name (@LatestVersion.Name)
                                        </button>
                                    </form>
                                }
                                
                            }

                            @if (!IsCustomer && IsInCart)
                            {
                                <a class="btn btn-primary" href="/cart">
                                    <i class="bi bi-cart-fill"></i> Go To Cart
                                </a>
                            }

                            @if (!IsCustomer && !IsInCart)
                            {
                                <button class="btn btn-primary" @onclick="AddToCartAsync">
                                    <i class="bi bi-cart-fill"></i> Add To Cart
                                </button>
                            }
                        }
                        else
                        {
                            <strong>This plugin doesn't have any downloads</strong>
                        }
                    </div>
                </div>

            </div>
        </div>
    </div>

    <ProductReviewModal @ref="ReviewModal" Product="Product" ReviewChanged="OnReviewChanged" OnDeleteReview="DeleteReviewAsync" />
    <RequiredWorkshopsModal @ref="RequiredWorkshopsModal" Product="Product" WorkshopResult="WorkshopResult" />
    <LoaderConfigurationModal @ref="LoaderConfigurationModal" Product="Product" Branch="DefaultBranch" ProductLicense="ProductLicense" />    
    
}
else
{
    if (statusCode == System.Net.HttpStatusCode.NoContent)
    {
        <StatementText>Product not found</StatementText>
    }
    else if (statusCode == System.Net.HttpStatusCode.BadRequest)
    {
        <StatementText>You are not allowed to see this product</StatementText>
    }
    else
    {
        <Progressbar />
    }
}
