@using MP.MONO.Data
@using MP.MONO.UI.Components
@using MP.MONO.Core.DTO
@using MP.MONO.UI.Data

@inject CurrentDataService MMDataService


<div class="card">
    <div class="card-header">
        <div class="d-flex justify-content-between">
            <div class="p-2">
                <h5>Scheduled Maintenance's Task</h5>
            </div>
            <div class="p-2">
                <div class="form-check form-check-sm form-switch" title="Show Closed">
                    <input class="form-check-input" type="checkbox" id="filClosed" name="filtShowCompleted" value="@showCompleted" unchecked @onclick="() => ToggleCompleted()">
                    <label class="form-check-label" for="filClosed">Show Completed</label>
                </div>
            </div>
            <div class="px-2">
                <div class="input-group">
                    <span class="input-group-text" title="Limit visualization to event expirying in the next hour period">Limit Period</span>
                    <select @bind="@LimitDayPeriod" class="form-select form-select text-end">
                        <option value="7">1 Week</option>
                        <option value="30">1 Month</option>
                        <option value="365">1 Year</option>
                        <option value="0">All (no limit)</option>
                    </select>
                    <button class="btn btn-primary" @onclick="() => RegenTask()">Reschedule <i class="bi bi-tools"></i></button>
                </div>
            </div>
            @*<div class="px-2">
            </div>*@
        </div>
    </div>
    <div class="card-body">
        @if (ListRecords == null)
        {
            <LoadingData></LoadingData>
        }
        else if (totalCount == 0)
        {
            <div class="alert alert-warning text-center display-4">No record found</div>
        }
        else
        {
            @if (showTaskConf)
            {
                <div class="modal" tabindex="-1" style="display:block; background-color: rgba(10,10,10,.8);" role="dialog">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4>Maintenance Task Confirm</h4>
                                <button type="button" class="btn btn-warning" @onclick="() => ShowConfirm(0)" title="Close">
                                    <i class="bi bi-x-square"></i>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="row was-validated">
                                    <div class="col-6">
                                        <div class="input-group" title="Execution date">
                                            <span class="input-group-text">Execution Date</span>
                                            <input type="datetime-local" class="form-control" placeholder="Execution Date" @bind-value="@execDate" required>
                                            <div class="valid-feedback">OK</div>
                                            <div class="invalid-feedback">Execution date-time is required.</div>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="input-group" title="Executor name/code">
                                            <span class="input-group-text">Executor Name</span>
                                            <input type="text" class="form-control" placeholder="Username" @bind-value="@execName" required>
                                            <div class="valid-feedback">OK</div>
                                            <div class="invalid-feedback">Executor Username/code is required.</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <div class="py-2">
                                        <button class="btn btn-success" @onclick="() => ConfirmDone()" title="Confirm Execution">Save <i class="bi bi-save"></i></button>
                                    </div>
                                    <div class="py-2">
                                        <button class="btn btn-warning" @onclick="() => ShowConfirm(0)" title="Close Activity Record Panel">Cancel <i class="bi bi-x-square"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            }
            <table class="table table-sm table-striped table-responsive-lg small">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Created</th>
                        <th>Topic</th>
                        <th>Machine Group</th>
                        <th>Rem. Hours</th>
                        <th>Team in Charge</th>
                        <th>Counter Var</th>
                        <th>Job Description</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var record in ListRecords)
                    {
                        <tr>
                            <td>@record.PMTaskeNav.ExtIdx</td>
                            <td>@record.DtCreation.ToString("yyyy-MM-dd HH:mm:ss")</td>
                            <td>@record.PMTaskeNav.TopicNav.Description</td>
                            <td>@record.PMTaskeNav.MachGroupNav.Description</td>
                            <td style="width: 8rem;"><ProgBar currVal="@record.CountRemainVal" maxVal="@record.ExpiryVal" redLim="@redLim" yelLim="@yelLim"></ProgBar></td>
                            <td>@record.PMTaskeNav.UserTeamNav.Description</td>
                            <td>@record.CounterNav.Description</td>
                            <td>@record.PMTaskeNav.JobDescription</td>
                            <td>
                                @if (record.CountRemainVal <= hourLim)
                                {
                                    <button class="btn btn-success" @onclick="() => ShowConfirm(record.SMTaskId)" title="Show Activity Record Panel"><i class="bi bi-check-square"></i></button>
                                }
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        }
    </div>
    <div class="card-footer py-0">
        <DataPager PageSize="numRecord" currPage="currPage" numRecordChanged="ForceReload" numPageChanged="ForceReloadPage" totalCount="totalCount" showLoading="isLoading" />
    </div>
</div>