@page "/admin/subscriptions/edit/{Id:int}"
@using Moonlight.App.Models.Forms
@using Moonlight.App.Models.Misc
@using Moonlight.App.Repositories
@using Moonlight.App.Services
@using Moonlight.App.Database.Entities

@inject NavigationManager NavigationManager
@inject SubscriptionRepository SubscriptionRepository
@inject SubscriptionAdminService SubscriptionAdminService

<OnlyAdmin>
    <div class="card card-body p-10">
        <LazyLoader Load="Load">
            @if (Subscription == null)
            {
                <div class="alert alert-danger">
                    No subscription with this id has been found
                </div>
            }
            else
            {
                <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">
                        <InputText @bind-Value="Model.Description" class="form-control"></InputText>
                    </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>Save subscription</TL>
                        </button>
                    </div>
                </SmartForm>
            }
        </LazyLoader>
    </div>
</OnlyAdmin>

@code
{
    [Parameter]
    public int Id { get; set; }

    private Subscription? Subscription;

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

    private async Task OnSubmit()
    {
        Subscription!.Name = Model.Name;
        Subscription.Description = Model.Description;
        
        SubscriptionRepository.Update(Subscription);

        await SubscriptionAdminService.SaveLimits(Subscription, Limits.ToArray());

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

    private async Task Load(LazyLoader arg)
    {
        Subscription = SubscriptionRepository
            .Get()
            .FirstOrDefault(x => x.Id == Id);

        if (Subscription != null)
        {
            Model.Name = Subscription.Name;
            Model.Description = Subscription.Description;
            
            Limits = (await SubscriptionAdminService.GetLimits(Subscription)).ToList();
        }
    }
}