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

@inject CurrentDataService MMDataService
@inject IConfiguration Configuration;


<div class="card mb-5" style="box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;">
    @if (!compMode)
    {
        <div class="card-header">
            <div class="d-flex justify-content-between col-12">
                <div class="p-0 pt-1 col-6">
                    <div class="d-flex justify-content-between ">
                        <div class="pb-1 d-flex justify-content-between">
                            <h5 class="pt-2 mx-2"><i class="fa-solid fa-screwdriver-wrench pe-2" aria-hidden="true"></i><b>MAINTENANCE'S PENDING TASKS</b></h5>
                            <div class="pb-1 d-flex justify-content-between">
                                <div class="input-group">
                                    <button class="btn btn-primary btn-sm" id="btnShow" @onclick="() => ChangeMode()"><i class="fa-regular fa-circle-right"></i></button>
                                    <button class="btn btn-primary btn-sm" id="btnInfo" title="Scheduled tasks" disabled>
                                        Click to configure Schedule
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="px-2 col-6">
                    <div class="d-flex justify-content-between pt-0">
                        <div class="input-group input-group-sm pt-0 ">
                            <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>
            </div>
        </div>
    }
    <div class="card-body @bodyCss">
        @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 && !compMode)
            {
                <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>
                        @if (!compMode)
                        {
                            <th></th>
                            <th>ID</th>
                            <th>Created</th>
                            <th>Topic</th>
                            <th>Machine Group</th>
                            <th>Team in Charge</th>
                            <th>Counter Var</th>
                            <th>Rem. Hours</th>
                        }
                        <th>Job Description</th>
                        @if (!compMode)
                        {
                            <th></th>
                        }
                    </tr>
                </thead>
                <tbody>
                    @foreach (var record in ListRecords)
                    {
                        <tr>
                            @if (!compMode)
                            {
                                <td>
                                    <NavLink href="@pathFinder(@record.PMTaskeNav.ExtIdx)" target="_blank">
                                        <button class="btn btn-sm btn-primary text-decoration-none" title="Open relative file"><i class="fa-solid fa-up-right-from-square"></i></button>
                                    </NavLink>
                                </td>
                                <td>
                                    <div class="d-flex justify-content-between text-nowrap">
                                        @record.PMTaskeNav.ExtIdx &nbsp;
                                    </div>
                                </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>@record.PMTaskeNav.UserTeamNav.Description</td>
                                <td>@record.CounterNav.Description</td>
                                <td style="width: 8rem;"><MP.MONO.UI.Components.ProgBar currVal="@record.CountRemainVal" maxVal="@record.ExpiryVal" redLim="@redLim" yelLim="@yelLim"></MP.MONO.UI.Components.ProgBar></td>
                                <td>@record.PMTaskeNav.JobDescription</td>
                            }
                            else
                            {
                                @*<td class="text-center"><b>@($"{record.CountRemainVal:N0}")</b></td>*@
                                <td class="small textConsensed">
                                    <div>@record.PMTaskeNav.JobDescription</div>
                                    <MP.MONO.UI.Components.ProgBar currVal="@record.CountRemainVal" maxVal="@record.ExpiryVal" redLim="@redLim" yelLim="@yelLim" singleLine="true"></MP.MONO.UI.Components.ProgBar>
                                </td>
                            }
                            @if (!compMode)
                            {
                                <td>
                                    @if (record.CountRemainPerc <= PercLim)
                                    {
                                        <button class="btn btn-success btn-sm text-nowrap" @onclick="() => ShowConfirm(record.SMTaskId)" title="Show Activity Record Panel"><i class="bi bi-check-square"></i></button>
                                    }
                                </td>
                            }
                        </tr>
                    }
                </tbody>
            </table>
        }
    </div>
    @if (!compMode)
    {
        <div class="card-footer py-0">
            <DataPager PageSize="numRecord" currPage="currPage" numRecordChanged="ForceReload" numPageChanged="ForceReloadPage" totalCount="totalCount" showLoading="isLoading" />
        </div>
    }
</div>

<style>

    #btnInfo {
        opacity: 0.0;
        -webkit-transition: all 500ms ease-in-out;
        -moz-transition: all 500ms ease-in-out;
        -o-transition: all 500ms ease-in-out;
        transition: all 500ms ease-in-out;
    }

    #btnShow:hover + #btnInfo {
        opacity: 1.0;
    }
</style>