@page
@using EnotaryoPH.Web.Pages.Shared.Components.NotaryoSteps

@model UploadIdentificationModel
@{
}

@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, IsActive = true },
                    new NotaryoStep { Name = "Take Selfie", Step = 2 },
                    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-4" id="UploadIdentificationForm" method="post" enctype="multipart/form-data">

                    @if (Model.ExistingIdentificationDocuments.Count > 0)
                    {
                        <div class="row mt-4 mb-3">
                            <div class="col">
                                <div class="d-flex">
                                    <div class="form-check me-2"><input asp-for="UploadNewIdentification" id="UploadNewIdentificationYes" class="form-check-input" type="radio" value="true" /> <label class="form-check-label me-3" for="UploadNewIdentificationYes">Upload a new Identification Document</label></div>
                                    <div class="form-check me-2"><input asp-for="UploadNewIdentification" id="UploadNewIdentificationNah" class="form-check-input" type="radio" value="false" /><label class="form-check-label me-3" for="UploadNewIdentificationNah">Use any of the existing Identification Documents</label></div>
                                </div>
                            </div>
                        </div>
                    }
                    else {
                        <input type="hidden" asp-for="UploadNewIdentification" />
                    }

                    <div id="NewIdentificationDocumentContainer">
                        @Html.EditorFor(m => m.NewIdentificationDocument)
                    </div>
                    @if (Model.ExistingIdentificationDocuments.Count > 0)
                    {
                        <div id="ExistingDocumentsContainer">
                            <div class="row mt-4">
                                <div class="col">
                                    <h4>Existing Identification Documents</h4>
                                    <div class="table-responsive">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>Identification Document Type</th>
                                                    <th>Expiration</th>
                                                    <th></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach(var id in Model.ExistingIdentificationDocuments)
                                                {
                                                    <tr class="existingdocument__row">
                                                        <td>@id.IdentificationType</td>
                                                        <td>@id.ExpirationDate.Value.ToShortDateString()</td>
                                                        <td>
                                                            <button class="btn btn-danger btn-sm identificationdocument__delete__button" type="button" data-uid="@id.IdentificationDocument_UID">
                                                                <i class="fas fa-times me-1"></i>
                                                                <span class="d-none d-md-inline-block">Delete</span>
                                                            </button>
                                                        </td>
                                                    </tr>
                                                }
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    }
                    <div class="d-flex mt-3">
                        <div class="flex-grow-1"></div>
                        <button class="btn btn-primary btn-lg wizard__nextbutton" type="submit">NEXT<i class="fas fa-chevron-right ms-2"></i></button>
                    </div>
                </form>

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

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