@page
@using EnotaryoPH.Web.Pages.Shared.Components.NotaryoSteps
@model EnotaryoPH.Web.Pages.Principal.NotaryoSteps.TakeSelfieModel
@{
}

@section Head {
    <link href="\lib\fontawesome-free-6.7.1-web\css\all.min.css" rel="stylesheet" />
    <style>
        #Photo {
            height: 500px;
        }
    </style>
}


<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, IsActive = true },
                                new NotaryoStep { Name = "Upload Document", Step = 3 },
                                new NotaryoStep { Name = "Choose Notary", Step = 4 },
                        }})
                    <div class="tab-content mt-3"></div>
                </div>
                <form class="mt-3" method="post">

                    @Html.ValidationSummary()

                    <div id="VideoContainer" class="bg-light">
                        <video id="Video" height="500" class="d-block mx-auto">Video stream not available.</video>
                    </div>

                    <div class="d-none">
                        <canvas id="Canvas"></canvas>
                    </div>

                    <div id="PhotoContainer" class="photo__container">
                        <div class="bg-light">
                            <img id="Photo" class="d-block mx-auto img img-fluid" alt="The screen capture will appear in this box.">
                        </div>
                    </div>

                    <div class="d-flex mt-3">
                        <button type="button" class="btn btn-secondary btn-lg me-1" id="TakePictureButton"><i class="fas fa-camera me-2"></i>TAKE PICTURE</button>
                        <button type="button" class="btn btn-secondary btn-lg" id="AgainButton"><i class="fas fa-redo-alt me-2"></i>AGAIN</button>
                        <div class="flex-grow-1"></div>
                        <button type="submit" class="btn btn-primary btn-lg" id="NextButton">NEXT<i class="fas fa-chevron-right ms-2"></i></button>
                    </div>

                    <input type="hidden" asp-for="SelfieBase64Image" />
                </form>
            </div>
        </div>
    </div>
</section>


@section Scripts {
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <partial name="_ValidationScriptsPartial" />
    <script src="\dist\_Jfa.js"></script>
    <script src="~/Pages/Principal/NotaryoSteps/TakeSelfie.cshtml.js" asp-append-version="true"></script>
}