@page
@model EnotaryoPH.Web.Pages.Participant.Registration.Steps.UploadIdentificationModel

<section class="mt-5 mb-2">
    <div class="container">
        <h1>Registration Steps</h1>
        <div class="mt-3">
            <ul id="transactionwizardnav" class="nav nav-pills nav-justified d-block d-sm-flex" role="tablist">
                <li class="nav-item" role="presentation">
                    <a class="nav-link active" role="tab" data-bs-toggle="pill" href="#tab-1">
                        <div><span class="badge rounded-pill fs-6 me-1">STEP 1</span></div><span class="text-dark step-text">Choose Identification</span>
                    </a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link disabled" role="tab" data-bs-toggle="pill" href="#" style="border-bottom-width: 3px;border-bottom-color: var(--bs-body-color);">
                        <div class="text-dark"><span class="badge rounded-pill fs-6 me-1">STEP 2</span></div><span class="text-dark step-text">Take Selfie</span>
                    </a>
                </li>
            </ul>
            <div class="tab-content mt-3"></div>
        </div>
        <div>
            <div class="row mt-4 mb-3">
                <div class="col">
                    <div class="d-flex">
                        <div class="form-check me-2"><input id="checkUpload" class="form-check-input" type="radio" checked value="UploadNew" name="NewOrOld" /><label class="form-check-label me-3" for="checkUpload">Upload a new Identification Document</label></div>
                        <div class="form-check"><input id="checkUseExisting" class="form-check-input" type="radio" value="UseExisting" name="NewOrOld" /><label class="form-check-label" for="checkUseExisting">Use any of the existing Identification Documents</label></div>
                    </div>
                </div>
            </div>
            <div class="row mt-4">
                <div class="col-12 col-lg-4">
                    <div class="card" data-bss-baguettebox>
                        <a href="cody passport.webp"><img class="card-img w-100 d-block fit-cover rounded-top" src="cody passport.webp" style="height: 300px;" /></a>
                        <div class="card-body p-2">
                            <p class="card-text mb-1">passport-2024-12-07__final.jpg</p>
                            <div><button class="btn btn-secondary btn-sm me-1" type="button">Upload Photo<i class="fas fa-upload ms-1"></i></button></div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="row">
                        <div class="col-12 col-lg-7">
                            <div>
                                <label class="form-label">Type</label><select class="form-select">
                                    <option value="12" selected>Driver&#39;s License</option>
                                    <option value="13">This is item 2</option>
                                    <option value="14">This is item 3</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-12 col-lg-7">
                            <div class="mb-3"><label class="form-label">ID Number</label><input class="form-control" type="text" /></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 col-lg-7">
                            <div class="mb-3"><label class="form-label">Place Issued</label><input class="form-control" type="text" /></div>
                        </div>
                        <div class="col-12 col-lg-7">
                            <div class="row">
                                <div class="col-12 col-sm-6">
                                    <div class="mb-3"><label class="form-label">Expiration Date</label><input id="name-1" class="form-control" name="name" placeholder="Name" value="2024-11-30" type="date" /></div>
                                </div>
                                <div class="col-12 col-sm-6">
                                    <div class="mb-3"><label class="form-label">Date Issued</label><input id="name-4" class="form-control" name="name" placeholder="Name" value="2024-11-30" type="date" /></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <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>Uploaded On</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Driver&#39;s License</td>
                                    <td>2024-11-31</td>
                                    <td><button class="btn btn-danger btn-sm identificationdocument__delete__button" type="button"><i class="fas fa-times me-1"></i><span class="d-none d-md-inline-block">Delete</span></button></td>
                                </tr>
                                <tr>
                                    <td>Passport</td>
                                    <td>2024-12-17</td>
                                    <td><button class="btn btn-danger btn-sm" type="button"><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-4">
            <div class="flex-grow-1"></div><a class="btn btn-primary btn-lg" role="button" href="/participant/onboardingwizard2_selfie.html">NEXT<i class="fas fa-chevron-right ms-2"></i></a>
        </div>
    </div>
</section>