@page "/seller/products/{ProductId:int}" 
@using Website.Client.Pages.Seller.ProductPage.Components
@using Website.Client.Pages.Seller.ProductPage.Components.UploadVersion
@using Website.Components.Alerts
@using Website.Components.Navs

<Title Value="@($"Product #{ProductId} Seller - Unturned Store")"></Title>

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">Seller</li>
        <li class="breadcrumb-item"><a href="/seller/products">Products</a></li>
        <li class="breadcrumb-item active" aria-current="page">
            @if (Product != null)
            {
                <span>@Product.Name</span>
            } else
            {
                <span>@ProductId</span>
            }            
        </li>
    </ol>
</nav>

<AlertBox ID="product-main" Group="productpage" />

@if (Product != null)
{
    <div class="mt-2 mb-3">
        <div class="d-md-flex align-items-center border p-3 rounded border-1 shadow-sm">
            <div class="mb-md-0 mb-2">
                <div class="d-flex align-items-center mb-1">
                    <div>
                        <img src="api/images/@Product.ImageId" width="36" height="36" class="rounded" />
                    </div>
                    <div class="ms-2 fs-4">
                        @Product.Name
                    </div>
                </div>
                <div class="dropdown-divider" style="min-width: 300px;"></div>
                <div>
                    <div>
                        Current Status: <span class="fw-bold"><ProductStatusText Status="Product.Status" /></span>
                    </div>
                    <div class="text-muted">
                        ID: <span class="fw-bold">@Product.Id</span>
                    </div>
                    @if (UserService.IsAdmin && UserService.UserId != Product.Seller.Id)
                    {
                        <div class="text-muted">
                            Owner: <a class="fw-bold text-muted text-decoration-none" href="/users/@Product.Seller.Id">@Product.Seller.Name</a>
                        </div>
                    }
                    @if (Product.Status == ProductStatus.Approved && Product.Admin != null)
                    {
                        <div class="text-muted">
                            Approved by: <a class="fw-bold text-muted text-decoration-none" href="/users/@Product.Admin.Id">@Product.Admin.Name</a>
                        </div>
                    }
                    @if (Product.Status == ProductStatus.Rejected && Product.Admin != null)
                    {
                        <div class="text-muted">
                            Rejected by: <a class="fw-bold text-muted text-decoration-none" href="/users/@Product.Admin.Id">@Product.Admin.Name</a>
                        </div>
                        @if (!string.IsNullOrEmpty(Product.StatusReason))
                        {
                            <div class="text-muted" style="max-width: 500px;">
                                Rejection Reason: <span class="fw-bold">@Product.StatusReason</span>
                            </div>
                        }
                    }
                    @if (Product.Status == ProductStatus.Disabled && Product.Admin != null)
                    {
                        <div class="text-muted">
                            Disabled by: <a class="fw-bold text-muted text-decoration-none" href="/users/@Product.Admin.Id">@Product.Admin.Name</a>
                        </div>
                        @if (!string.IsNullOrEmpty(Product.StatusReason))
                        {
                            <div class="text-muted" style="max-width: 500px;">
                                Disabled Reason: <span class="fw-bold">@Product.StatusReason</span>
                            </div>
                        }
                    }
                </div>
            </div>
            <div class="ms-auto">
                <div class="d-grid gap-2 d-md-block">
                    <a href="/products/@Product.Id" class="btn btn-primary" target="_blank">View product page</a>
                    @if ((Product.Status == ProductStatus.New && (Product.Price > 0 || Product.Category == ProductCategoryConstants.ClientModule) && !Product.Seller.IsVerifiedSeller) ||
                          Product.Status == ProductStatus.Rejected || Product.Status == ProductStatus.Disabled)
                    {
                        <button class="btn btn-success ms-md-2" @onclick="HandleSubmit">Submit for approval</button>
                    }
                    @if ((Product.Status == ProductStatus.New && ((Product.Price == 0 && Product.Category != ProductCategoryConstants.ClientModule) || Product.Seller.IsVerifiedSeller)) || Product.Status == ProductStatus.Approved)
                    {
                        <button class="btn btn-success ms-md-2 fw-bold" @onclick="HandleRelease">Release</button>
                    }
                    @if (!UserService.IsAdmin && Product.Status == ProductStatus.WaitingForApproval)
                    {
                        <button class="btn btn-outline-warning ms-md-2 fw-bold" disabled>Waiting for approval</button>
                    }
                    @if (UserService.IsAdmin)
                    {
                        if (Product.Status == ProductStatus.WaitingForApproval)
                        {
                            <button class="btn btn-danger ms-md-2 fw-bold" @onclick="HandleReject">Reject</button>
                            <button class="btn btn-success ms-md-2 fw-bold" @onclick="HandleApprove">Approve</button>
                        } else if (Product.Status == ProductStatus.Released)
                        {
                            <button class="btn btn-secondary ms-md-2 fw-bold" @onclick="HandleDisable">Disable product</button>
                        }
                    }
                </div>                
            </div>
        </div>        
    </div>

    <div class="mb-3">
        <div>
            <NavList Type="NavType.Tabs">
                <NavItem Name="Basic Information" Icon="fas fa-info" >
                    <div class="px-md-3">
                        <BasicInfoTab @bind-Product="Product" />
                    </div>                    
                </NavItem>
                <NavItem Name="Tabs" Icon="fas fa-list">
                    <div class="px-md-3">
                        <TabsTab Product="Product" />
                    </div>                    
                </NavItem>
                <NavItem Name="Media" Icon="far fa-images">
                    <div class="px-md-3">
                        <MediaTab Product="Product" />
                    </div>                    
                </NavItem>
                <NavItem Name="Workshop" Icon="fab fa-steam">
                    <div class="px-md-3">
                        <WorkshopItemsTab Product="Product" />
                    </div>                    
                </NavItem>
                <NavItem Name="Branches" Icon="fas fa-code-branch">
                    <div class="px-md-3">
                        <BranchesTab Product="Product" />
                    </div>                    
                </NavItem>
                <NavItem Name="Upload Version" Icon="fas fa-upload">
                    <div class="px-md-3">
                        <UploadVersionTab Product="Product" />
                    </div>                    
                </NavItem>
            </NavList>
               
        </div>
    </div>
} else
{
    if (statusCode == System.Net.HttpStatusCode.BadRequest)
    {
        <h4>You don't have access to this product</h4>
    } else if (statusCode == System.Net.HttpStatusCode.NoContent)
    {
        <h4>Product not found</h4>
    } else
    {
        <Progressbar />
    }        
}

<ConfirmModal @ref="ConfirmRelease" TItem="ProductInfo" Title="Confirm release" BtnClass="btn btn-success" BtnText="Release" ModalId="ConfirmReleaseModal" OnConfirm="SubmitReleaseAsync">
    <div>
        Are you sure you want to release <span class="fw-bold">@Product.Name</span>?
    </div>
    <div>
        Releasing your product will:
        <ul>
            <li>Send a message in the #new-products channel on Discord</li>
            <li>Automatically enable the product</li>
            <li>The product will be visible on the public product list</li>
            @if (Product.Price > 0)
            {
                <li>Allow users to purchase this product</li>    
            }            
        </ul>
    </div>
</ConfirmModal>
<ConfirmModal @ref="ConfirmDisable" TItem="ProductInfo" Title="Confirm disable product" BtnClass="btn btn-danger" BtnText="Disable" ModalId="ConfirmDisableModal" OnConfirm="SubmitDisableAsync">
    <div>
        Are you sure you want to disable <span class="fw-bold">@Product.Name</span>?
    </div>
    <div>
        Disabling this product will:
        <ul>
            <li>Force the seller to resubmit the product for approval</li>
            <li>Hide the product from the public product list</li>
            <li>Still allow existing customers to download the product</li>
        </ul>
    </div>
    <div class="dropdown-divider"></div>
    <div>
        <label class="form-label">Disabled Reason</label>
        <textarea class="form-control" rows="3" maxlength="255" @bind="StatusReason" @bind:event="oninput" style="resize: none;" />
        <div class="form-text">Optional, explain why the product was disabled</div>
    </div>
</ConfirmModal>
<ConfirmModal @ref="ConfirmSubmit" TItem="ProductInfo" Title="Confirm submit for approval" BtnClass="btn btn-success" BtnText="Submit" ModalId="ConfirmSubmitModal" OnConfirm="SubmitRequestAsync">
    Are you sure you want to submit <span class="fw-bold">@Product.Name</span> for admin review?
</ConfirmModal>
<ConfirmModal @ref="ConfirmReject" TItem="ProductInfo" Title="Confirm reject" BtnClass="btn btn-danger" BtnText="Reject" ModalId="ConfirmRejectModal" OnConfirm="SubmitRejectAsync">
    <div>
        Are you sure you want to reject approval request for <span class="fw-bold">@Product.Name</span>?
    </div>
    <div class="dropdown-divider"></div>
    <div>
        <label class="form-label">Rejection Reason</label>
        <textarea class="form-control" rows="3" maxlength="255" @bind="StatusReason" @bind:event="oninput" style="resize: none;" />
        <div class="form-text">Optional, explain why the product was rejected</div>
    </div>
</ConfirmModal>
<ConfirmModal @ref="ConfirmApprove" TItem="ProductInfo" Title="Confirm approve" BtnClass="btn btn-success" BtnText="Approve" ModalId="ConfirmApproveModal" OnConfirm="SubmitApproveAsync">
    <div>Are you sure you want to reject approval request for <span class="fw-bold">@Product.Name</span>?</div>    
</ConfirmModal>