@page "/admin/subscriptions/new"
@using Moonlight.App.Models.Forms
@using Moonlight.App.Models.Misc
@using Moonlight.App.Repositories
@using Moonlight.App.Services

@inject NavigationManager NavigationManager
@inject SubscriptionRepository SubscriptionRepository
@inject SubscriptionService SubscriptionService

@attribute [PermissionRequired(nameof(Permissions.AdminNewSubscription))]

<div class="card card-body p-10">
                    <SmartForm Model="Model" OnValidSubmit="OnSubmit">
                        <label class="form-label">
                            <TL>Name</TL>
                        </label>
                        <div class="input-group mb-5">
                            <InputText @bind-Value="Model.Name" class="form-control"></InputText>
                        </div>
                        <label class="form-label">
                            <TL>Description</TL>
                        </label>
                        <div class="input-group mb-5">
                            <InputTextArea @bind-Value="Model.Description" class="form-control"></InputTextArea>
                        </div>
                        <label class="form-label">
                            <TL>Price</TL>
                        </label>
                        <div class="input-group mb-5">
                            <InputNumber @bind-Value="Model.Price" class="form-control"></InputNumber>
                        </div>
                        <label class="form-label">
                            <TL>Currency</TL>
                        </label>
                        <div class="input-group mb-5">
                            <select @bind="Model.Currency" class="form-select">
                                @foreach (var currency in (Currency[])Enum.GetValues(typeof(Currency)))
                                {
                                    if (Model.Currency == currency)
                                    {
                                        <option value="@(currency)" selected="">@(currency)</option>
                                    }
                                    else
                                    {
                                        <option value="@(currency)">@(currency)</option>
                                    }
                                }
                            </select>
                        </div>
                        <label class="form-label">
                            <TL>Duration</TL>
                        </label>
                        <div class="input-group mb-5">
                            <InputNumber @bind-Value="Model.Duration" class="form-control"></InputNumber>
                        </div>
            
                        <div>
                            @foreach (var limitPart in Limits.Chunk(3))
                            {
                                <div class="row row-cols-3 mb-5">
                                    @foreach (var limit in limitPart)
                                    {
                                        <div class="col">
                                            <div class="card card-body border">
                                                <label class="form-label">
                                                    <TL>Identifier</TL>
                                                </label>
                                                <div class="input-group mb-5">
                                                    <input @bind="limit.Identifier" type="text" class="form-control">
                                                </div>
                                                <label class="form-label">
                                                    <TL>Amount</TL>
                                                </label>
                                                <div class="input-group mb-5">
                                                    <input @bind="limit.Amount" type="number" class="form-control">
                                                </div>
                                                <div class="d-flex flex-column mb-15 fv-row">
                                                    <div class="fs-5 fw-bold form-label mb-3">
                                                        <TL>Options</TL>
                                                    </div>
                                                    <div class="table-responsive">
                                                        <div class="dataTables_wrapper dt-bootstrap4 no-footer">
                                                            <div class="table-responsive">
                                                                <table class="table align-middle table-row-dashed fw-semibold fs-6 gy-5 dataTable no-footer">
                                                                    <thead>
                                                                    <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                                                        <th class="pt-0 sorting_disabled">
                                                                            <TL>Key</TL>
                                                                        </th>
                                                                        <th class="pt-0 sorting_disabled">
                                                                            <TL>Value</TL>
                                                                        </th>
                                                                        <th class="pt-0 text-end sorting_disabled">
                                                                            <TL>Remove</TL>
                                                                        </th>
                                                                    </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                    @foreach (var option in limit.Options)
                                                                    {
                                                                        <tr class="odd">
                                                                            <td>
                                                                                <input @bind="option.Key" type="text" class="form-control form-control-solid">
                                                                            </td>
                                                                            <td>
                                                                                <input @bind="option.Value" type="text" class="form-control form-control-solid">
                                                                            </td>
                                                                            <td class="text-end">
                                                                                <button @onclick="() => limit.Options.Remove(option)" type="button" class="btn btn-icon btn-flex btn-active-light-primary w-30px h-30px me-3" data-kt-action="field_remove">
                                                                                    <i class="bx bx-trash"></i>
                                                                                </button>
                                                                            </td>
                                                                        </tr>
                                                                    }
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start"></div>
                                                                <div class="col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="btn-group mt-5">
                                                        <button @onclick:preventDefault @onclick="() => limit.Options.Add(new())" type="button" class="btn btn-light-primary me-auto">Add option</button>
                                                        <button @onclick:preventDefault @onclick="() => Limits.Remove(limit)" class="btn btn-danger float-end">
                                                            <i class="bx bx-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    }
                                </div>
                            }
                        </div>
            
                        <div class="float-end">
                            <button @onclick:preventDefault @onclick="() => Limits.Add(new())" class="btn btn-primary">
                                <TL>Add new limit</TL>
                            </button>
                            <button type="submit" class="btn btn-success">
                                <TL>Create subscription</TL>
                            </button>
                        </div>
                    </SmartForm>
                </div>

@code
{
    private SubscriptionDataModel Model = new();
    private List<SubscriptionLimit> Limits = new();

    private async Task OnSubmit()
    {
        var sub = await SubscriptionService.Create(
            Model.Name,
            Model.Description,
            Model.Currency,
            Model.Price,
            Model.Duration
        );

        await SubscriptionService.UpdateLimits(sub, Limits.ToArray());

        NavigationManager.NavigateTo("/admin/subscriptions");
    }
}