@page "/Ticket"
@using Front.Services
@using Shared.DTOs
@using Shared.DTOs.Serch
@layout PanelLayout
@inject HttpClientController hc;
@inject UserAuthenticationDTO userinfo
<PageTitle>پشتیبانی</PageTitle>
<Modal @ref="modal" title="تیکت جدید" IsVerticallyCentered="true">
    <BodyTemplate>
        <form>
            <div class="form-group">
                <label for="exampleFormControlInput1">عنوان</label>
                <InputText @bind-Value="newTitle" type="text" class="form-control" />
            </div>
            <br />
            <div class="form-group">
                <label for="exampleFormControlTextarea1">توضیحات بیشتر</label>
                <InputTextArea @bind-Value="newtext" class="form-control" rows="3" />
            </div>
        </form>
    </BodyTemplate>
    <FooterTemplate>
        <Button Disabled="SpinnerVisible" Color="ButtonColor.Secondary" @onclick="OnHideModalClick">Close</Button>
        <Button Disabled="SpinnerVisible" Color="ButtonColor.Primary" @onclick="OnClickNewTicket">ثبت</Button>
    </FooterTemplate>
</Modal>

<div class="container-xxl flex-grow-1 container-p-y">
    <h4 class="fw-bold py-3 mb-4">
        <span class="text-muted fw-light">متفرقه /</span> پشتیبانی
    </h4>
    <div class="row">
        <div class="col-md-10">
        <Alert hidden="@Hidealert" Color="@alertColor" Dismissable="false">
            <Icon Name="@alertIconName" class="me-2"></Icon>
            @alertMessage
        </Alert>
        </div>
        <div class="col-md-2">
            <Spinner Visible="SpinnerVisible" Color="SpinnerColor.Primary" />
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="card mb-4">
                <h5 class="card-header">تیکت ها</h5>

                <div class="row">
                    <div class="col-md-12">
                        <ul class="list-group fa-padding" style="border: 2px solid #0d6efd">
                            <li class="list-group-item" data-toggle="modal" data-target="#issue">
                                <div class="row g-3">
                                    <div class="col-md-2">
                                        <InputText @bind-Value="TicketID" placeholder="شناسه" style="text-align:center;" class="form-control" type="text" id="EconomicCode" />
                                    </div>
                                    <div class="col-md-6">
                                        <InputText style="text-align:center;" placeholder="عنوان" @bind-Value="Title" class="form-control" type="text" id="UniqeMemory" />

                                    </div>
                                    <div class="col-auto">

                                        <Button Disabled="SpinnerVisible" Color="ButtonColor.Primary" @onclick="Submit">جستجو</Button>

                                    </div>
                                    <div class="col-auto">

                                        <Button Disabled="SpinnerVisible" Color="ButtonColor.Primary" @onclick="OnShowModalClick">جدید</Button>

                                    </div>
                                </div>

                            </li>
                        </ul>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <ul class="list-group fa-padding">
                            @for (int i = 0; i < request?.list.Count; i++)
                            {

                                <LTicket OnMultipleOfThree=@Search Ticket="request?.list[i]" />
                            }
                        </ul>
                        <nav aria-label="Page navigation">
                            <br />
                            <ul class="pagination justify-content-center">
                                @for (int page = 1; page <= request?.PageCount; page++)
                                {
                                    if (page == PageIndex)
                                    {
                                        <li class="page-item disabled">
                                            <a class="page-link" href="@hc._nav.GetUriWithQueryParameter("PageIndex",page)">@(page)</a>
                                        </li>
                                    }
                                    else
                                    {
                                        <li class="page-item">
                                            <a class="page-link" href="@hc._nav.GetUriWithQueryParameter("PageIndex",page)">@(page)</a>
                                        </li>
                                    }
                                }

                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>


@code {
    LTicket child;
    public bool SpinnerVisible { get; set; } = false;
    private Modal modal = default!;
    // alert
    AlertColor alertColor = AlertColor.Primary;
    IconName alertIconName = IconName.CheckCircleFill;
    bool Hidealert = true;
    string alertMessage = "";

    #region bind
    public string? TicketID { get; set; }
    public string? Title { get; set; }

    public string? newTitle { get; set; }
    public string? newtext { get; set; }
    #endregion
    [Parameter, SupplyParameterFromQuery]
    public int? PageIndex { get; set; }

    public Shared.DTOs.PagingDto<TicketDTO>? request { get; set; }

    protected override async Task OnParametersSetAsync()
    {
        SpinnerVisible = false;
        if (PageIndex == null) PageIndex = 1;
        await Search(PageIndex.Value);
        await base.OnParametersSetAsync();
    }
    private async Task Submit()
    {
        await Search(1);
    }
}
@functions {
    private void ShowSuccessAlert(string msg)
    {
        Hidealert = false;
        alertColor = AlertColor.Success;
        alertIconName = IconName.CheckCircleFill;
        alertMessage = msg;
    }

    private void ShowDangerAlert(string msg)
    {
        Hidealert = false;
        alertColor = AlertColor.Danger;
        alertIconName = IconName.ExclamationTriangleFill;
        alertMessage = msg;
    }
    public async Task Search(int pi)
    {
        SpinnerVisible = true;

        var rsp = await hc.Post<ItemSerchGetTicket>("Ticket/GetAll", new ItemSerchGetTicket
            {
                PageIndex = pi,
                PageSize = 5,
                TicketID = string.IsNullOrEmpty(TicketID) ? null : Convert.ToInt32(TicketID),
                Title = Title

            });
        if (rsp.IsSuccessStatusCode)
        {
            request = await rsp.Content.ReadFromJsonAsync<PagingDto<TicketDTO>>();
        }
        else
        {
            ShowDangerAlert("خطایی در اجرای عملیات رخ داده");
        }
        SpinnerVisible = false;
    }
    private async Task OnShowModalClick()
    {
        await modal.ShowAsync();
    }
    private async Task OnHideModalClick()
    {
        await modal.HideAsync();
    }
    private async Task OnClickNewTicket()
    {
        SpinnerVisible = true;
        var rsp = await hc.Post<CTicketDto>("Ticket/NewTicket", new CTicketDto
            {
                CompanyID = userinfo.Company.ID.ToString(),
                Text = newtext,
                Title = newTitle
            });
        if (rsp.IsSuccessStatusCode)
        {
            ShowSuccessAlert("درخواست شما با موفقیت ثبت شد");
            newtext = newTitle = string.Empty;
            await Search(1);
        }
        else
        {
            ShowDangerAlert("خطایی در اجرای عملیات رخ داده");
        }
        await modal.HideAsync();
        SpinnerVisible = false;
    }
}