@page "{Transaction_UID}"
@using EnotaryoPH.Web.Pages.Shared.Components.NotaryoSteps
@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 class="mt-3">
                        <div class="row my-4">
                            <div class="col">
                                <div class="d-flex">
                                    <div class="form-check me-3"><input id="formCheck-3" class="form-check-input" type="radio" name="NewOrOld" checked /><label class="form-check-label" for="formCheck-3">I will choose a Notary Public myself</label></div>
                                    <div class="form-check"><input id="formCheck-4" class="form-check-input" type="radio" name="NewOrOld" /><label class="form-check-label" for="formCheck-4">Automatically choose an immediately available Notary Public</label></div>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-12 col-lg-8">
                                <div class="input-group"><input class="form-control" type="text" placeholder="Find an Attorney" /><button class="btn btn-outline-secondary" type="button"><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>
                                            <tr>
                                                <td>Athony Co</td>
                                                <td>123 Fictional Road, Manila</td>
                                                <td class="text-end"><button class="btn btn-secondary btn-sm" type="button">Select</button></td>
                                            </tr>
                                            <tr>
                                                <td>Jude Romano</td>
                                                <td>342 Fake Road, Marikina</td>
                                                <td class="text-end"><button class="btn btn-secondary btn-sm" type="button">Select</button></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <nav>
                                    <ul class="pagination">
                                        <li class="page-item"><a class="page-link" aria-label="Previous" href="#"><span aria-hidden="true">«</span></a></li>
                                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                                        <li class="page-item"><a class="page-link" aria-label="Next" href="#"><span aria-hidden="true">»</span></a></li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                        <div class="d-flex">
                            <div class="flex-grow-1"></div>
                            <button class="btn btn-primary btn-lg" type="submit">
                                SUBMIT
                                <i class="fas fa-flag-checkered ms-2"></i>
                            </button>
                        </div>
                    </form>
                </div>

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


@section Scripts {
    <script src="/dist/js/jfa.min.js"></script>
}