@if (isLoading)
{
    <LoadingData></LoadingData>
}
else if (ListRecord == null || ListRecord.Count == 0)
{
    <b>nessun record</b>
}
else
{
    <div class="card">
        <div class="card-header">
            <div class="row">
                <div class="w-50 d-flex row pb-1 col">
                    <div class="form-floating col ps-1">
                        <select id="fam" @bind="searchFamily" class="form-select">
                            <option value="*">--TUTTI--</option>
                            @if (itemFamList != null)
                            {
                                @foreach (var item in itemFamList)
                                {
                                    <option value="@item.Id">@item.Descr</option>
                                }
                            }
                        </select>
                        <label for="fam">Famiglia articoli</label>
                    </div>
                    <div class="form-floating col ps-1">
                        <input id="search" @bind="searchVal" class="form-control" />
                        <label for="search">Search</label>
                    </div>
                </div>
                <div class="col text-end pe-4">
                    <button data-bs-toggle="modal" data-bs-target="#modalNewFam" class="btn btn-success" title="Aggiungere nuovo articolo"><i class="fa-solid fa-plus"></i> Aggiungi nuovo articolo</button>
                </div>
                @*<button data-bs-toggle="modal" data-bs-target="#modalNewFam" class="h-50 mt-4 btnAccept"><i class="fa-solid fa-plus"></i></button>*@
            </div>
        </div>
        <div class="card-body">
            <table class="table table-striped table-bordered">
                <thead>
                    <tr class="small row col-12">
                        <th class="col-1">
                        </th>

                        <th class="col-3">
                            <div class="row">
                                <div class="d-flex text-center" @onclick="()=>orderByCodInt()">
                                    COD. ARTICOLO
                                    @if (orderType == orderTypeEnum.codIntAscending)
                                    {
                                        <i class="fa-solid fa-sort-up text-primary mx-2"></i>
                                    }
                                    else if (orderType == orderTypeEnum.codIntDescending)
                                    {
                                        <i class="fa-solid fa-sort-down text-primary mx-2"></i>
                                    }
                                    else
                                    {
                                        <i class="fa-solid fa-sort text-primary mx-2"></i>
                                    }
                                </div>
                            </div>
                            <div class="row">
                                <div class="d-flex text-secondary fst-italic text-center" @onclick="()=>orderByCodForn()">
                                    COD. FORNITORE
                                    @if (orderType == orderTypeEnum.codExtAscending)
                                    {
                                        <i class="fa-solid fa-sort-up text-primary mx-2"></i>
                                    }
                                    else if (orderType == orderTypeEnum.codExtDescending)
                                    {
                                        <i class="fa-solid fa-sort-down text-primary mx-2"></i>
                                    }
                                    else
                                    {
                                        <i class="fa-solid fa-sort text-primary mx-2"></i>
                                    }
                                </div>
                            </div>
                        </th>
                        <th class="col-4">
                            <div class="row">
                                <div>
                                    DESC. ARTICOLO
                                </div>
                            </div>
                            <div class="row">
                                <div class="text-secondary fst-italic">
                                    DESC. FORNITORE
                                </div>
                            </div>
                        </th>
                        <th @onclick="()=>orderByStock()" class="col-1">
                            STOCK
                            @if (orderType == orderTypeEnum.stockAscending)
                            {
                                <i class="fa-solid fa-sort-down text-primary"></i>
                            }
                            else if (orderType == orderTypeEnum.stockDescending)
                            {
                                <i class="fa-solid fa-sort-up text-primary"></i>
                            }
                            else
                            {
                                <i class="fa-solid fa-sort text-primary"></i>
                            }
                        </th>
                        <th class="col-1">
                            VALORE UNIT.
                        </th>
                        <th class="col-1">
                            VALORE TOT.
                        </th>
                        <th class="col-1">
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in ListRecord)
                    {
                        <tr class="small row col-12">
                            <td class="text-center col-1">
                                <button class="btnDet" @onclick="()=>selItemToDet(item.Id)" title=@($"Mostra dettagli oggetto {item.CodInt}")><i class="fa-solid fa-magnifying-glass"></i></button>
                            </td>
                            <td class="col-3" style="font-size: 14px;">
                                @item.CodInt
                                <div class="small text-secondary fst-italic">
                                    @item.CodExt
                                </div>
                            </td>
                            <td class="small col-4">
                                <div class="row">
                                    <span class="d-inline-block text-truncate" style="max-width: 100%;" title="@item.Descr">
                                        @item.Descr
                                    </span>
                                </div>
                                <div class="row">
                                    <span class="d-inline-block text-truncate text-secondary fst-italic" style="max-width: 100%;" title="@item.DescrExt">
                                        @item.DescrExt
                                    </span>
                                </div>
                            </td>
                            <td class="text-center col-1">
                                <div>
                                    @item.QtaBatch
                                </div>
                            </td>
                            <td class="small text-center col-1">
                                @($"{item.CurrValue:C2}")
                            </td>
                            <td class="small text-center col-1">
                                @($"{(item.CurrValue * item.QtaBatch):C2}")
                            </td>
                            <td class="text-center col-1">
                                <button class="btnDup" data-bs-toggle="modal" data-bs-target="#modalNewFam" @onclick="()=>dupItem(item)" title=@($"Duplica oggetto {item.CodInt}")><i class="fa-solid fa-copy"></i></button>
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="modalNewFam" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="modalNewFamLabel">Aggiungere nuovo articolo</h1>
                    <button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="w-100">
                        <div class="form-floating">
                            <input id="codArt" @bind-value="@codArt" class="form-control w-100 w-100w-100 my-1" />
                            <label for="codArt" class="form-label">Codice Articolo</label>
                        </div>
                        <div class="form-floating">
                            <textarea id="descArt" @bind="@descArt" class="form-control w-100" rows="3"></textarea>
                            <label for="descArt" class="form-label">Descr. Articolo</label>
                        </div>
                        <div class="form-floating">
                            <select id="famId" @bind="@famArt" class="form-select w-100 my-1">
                                @if (itemFamList != null)
                                {
                                    foreach (var fam in itemFamList)
                                    {
                                        <option value="@fam.Id">@fam.Descr</option>
                                    }
                                }
                            </select>
                            <label for="famId" class="form-label">Fam. Articolo</label>
                        </div>
                        <div class="form-floating">
                            <input id="codExt" @bind="@codForn" class="form-control w-100  my-1" />
                            <label for="codExt" class="form-label">Cod. Fornitore</label>
                        </div>
                        <div class="form-floating">
                            <textarea id="descExt" @bind="descForn" class="form-control w-100" rows="5"></textarea>
                            <label for="descExt" class="form-label">Descr. Fornitore</label>
                        </div>
                        <div class="form-floating">
                            <input id="qtaMin" type="number" @bind="@minGiac" class="form-control w-100 my-1" />
                            <label for="qtaMin" class="form-label">Giacenza Minima</label>
                        </div>
                        <div class="form-floating">
                            <input id="qtaBatch" type="number" @bind="@lottoGiac" class="form-control w-100 my-1" />
                            <label for="qtaBatch" class="form-label">Lotto Acquisto</label>
                        </div>
                        <div class="form-floating">
                            <input id="currVal" type="number" @bind="@valoreUnit" class="form-control w-100 my-1" />
                            <label for="currVal" class="form-label">Valore Unit.</label>
                        </div>
                        <div class="form-floating">
                            <input id="um" @bind="@uM" class="form-control w-100 my-1" />
                            <label for="um" class="form-label">Unità di Misura</label>
                        </div>
                    </div>
                    <div class="text-center mt-5">
                        <button class="btnAccept" @onclick="()=>addNewItem()"><i class="fa-regular fa-circle-check"></i></button>
                        <button class="btnDecline" data-bs-dismiss="modal"><i class="fa-solid fa-ban"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
}