@page "{Transaction_UID}"
@model EnotaryoPH.Web.Pages.Principal.NotaryoSteps.ChooseNotaryModel
@{
}

@section Head {
    <link href="\lib\fontawesome-free-6.7.1-web\css\all.min.css" rel="stylesheet" />
}

<section class="my-5">
    <div class="container">
        <div class="row">
            <div class="col">
                <h1>Notaryo Steps</h1>
                <div class="mt-3">
                    @await Component.InvokeAsync("NotaryoSteps", new
                        {
                            NotaryoSteps = new List<NotaryoStep>() {
                                new NotaryoStep { Name = "Upload Identification", Step = 1 },
                                new NotaryoStep { Name = "Take Selfie", Step = 2 },
                                new NotaryoStep { Name = "Upload Document", Step = 3 },
                                new NotaryoStep { Name = "Choose Notary", Step = 4, IsActive = true },
                            }
                        })
                    <form id="ChooseNotaryForm" method="post">
                        <div class="row my-4">
                            <div class="col">
                                <div class="d-flex">
                                    <div class="form-check"><input id="cheAutomatic" class="form-check-input" type="radio" asp-for="IsManualSelection" value="false" checked="@(Model.IsManualSelection ? "" : "checked")" /><label class="form-check-label" for="cheAutomatic">Automatically choose an immediately available Notary Public</label></div>
                                    <div class="form-check ms-3"><input id="chkManual" class="form-check-input" type="radio" asp-for="IsManualSelection" value="true" checked="@(Model.IsManualSelection ? "checked" : "")" /><label class="form-check-label" for="chkManual">I will choose a Notary Public myself</label></div>
                                </div>
                            </div>
                        </div>
                        <div id="ManualSelectionDiv">
                            <div class="row mt-3">
                                <div class="col-12 col-lg-5 col-xl-4">
                                    <div class="input-group">
                                        <input class="form-control" type="text" placeholder="Find an Attorney" asp-for="SearchString" />
                                        <button class="btn btn-outline-secondary" type="submit" asp-page-handler="Search"><i class="fas fa-search"></i></button></div>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col">
                                    <div class="table-responsive">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>Name of Attorney</th>
                                                    <th>Office Location</th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach (var row in Model.AvailableLawyers)
                                                {
                                                    <tr>
                                                        <td>@row.Name</td>
                                                        <td>@row.OfficeLocation</td>
                                                        <td class="text-end"><button data-uid="@row.Lawyer_UID" class="btn btn-secondary btn-sm availablelawyer__select__button" type="button">Select</button></td>
                                                    </tr>
                                                }
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-4" id="AutomaticSelectionDiv">
                            <div class="col">
                                <p>Please click the Finish button to complete the Notaryo Steps.</p>
                            </div>
                        </div>
                        <input type="hidden" asp-for="SelectedLawyer_UID" />
                        <div class="d-flex">
                            <div class="flex-grow-1"></div>
                            <button id="FinishButton" class="btn btn-primary btn-lg" type="submit">
                                FINISH
                                <i class="fas fa-flag-checkered ms-2"></i>
                            </button>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>
</section>


@section Scripts {
    <script src="/dist/_Jfa.js"></script>
    <script src="~/Pages/Principal/NotaryoSteps/ChooseNotary.cshtml.js" asp-append-version="true"></script>
}