@page
@model EnotaryoPH.Web.Pages.Principal.DashboardModel
@{
}

@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-2 col-sm-1 col-md-3 g-0">
                <div class="sidemenu">
                    <div class="align-items-center sidemenu__menuitem"><a class="d-flex flex-grow-1 justify-content-center align-items-center justify-content-md-start p-1 text-decoration-none" href="/principal/notaryowizard1_identification.html"><i class="fas fa-magic fs-4 text-dark sidemenu__menuitem__icon" style="padding: 5px;"></i><span class="d-none d-md-inline-block ms-1 sidemenu__menuitem__text">Create New</span></a></div>
                    <div class="align-items-center sidemenu__menuitem"><a class="d-flex flex-grow-1 justify-content-center align-items-center justify-content-md-start p-1 text-decoration-none" href="#"><i class="far fa-check-circle fs-4 text-success sidemenu__menuitem__icon" style="padding: 5px;"></i><span class="d-none d-md-inline-block ms-1 sidemenu__menuitem__text">Completed</span></a></div>
                    <div class="align-items-center sidemenu__menuitem"><a class="d-flex flex-grow-1 justify-content-center align-items-center justify-content-md-start p-1 text-decoration-none" href="#incomplete-docs"><i class="far fa-clock fs-4 text-warning sidemenu__menuitem__icon" style="padding: 5px;"></i><span class="d-none d-md-inline-block ms-1 sidemenu__menuitem__text">Incomplete</span></a></div>
                    <div class="align-items-center sidemenu__menuitem"><a class="d-flex flex-grow-1 justify-content-center align-items-center justify-content-md-start p-1 text-decoration-none" href="#identification-docs"><i class="far fa-address-card fs-4 text-dark sidemenu__menuitem__icon" style="padding: 5px;"></i><span class="d-none d-md-inline-block ms-1 sidemenu__menuitem__text">Identification Docs</span></a></div>
                </div>
            </div>
            <div class="col g-0 mx-2">
                <div class="row g-0 mb-5">
                    <div class="col">
                        <h3>Completed Documents</h3>
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Type</th>
                                        <th>Date</th>
                                        <th>Link</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Deed of Absolute Sale</td>
                                        <td>2024-11-01</td>
                                        <td><a href="#">Download</a></td>
                                    </tr>
                                    <tr>
                                        <td>Certification<br />against non-forum shopping</td>
                                        <td>2024-01-25</td>
                                        <td><a href="#">Download</a></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div id="incomplete-docs" class="row g-0 mb-5">
                    <div class="col">
                        <h3>Incomplete Documents</h3>
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Type</th>
                                        <th>Status</th>
                                        <th>Link</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Deed of Absolute Sale</td>
                                        <td>Submitted</td>
                                        <td><a href="#">View</a></td>
                                    </tr>
                                    <tr>
                                        <td>Certification<br />against non-forum shopping</td>
                                        <td>Assigned</td>
                                        <td><a href="#">View</a></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div id="identification-docs" class="row g-0 mb-5">
                    <div class="col">
                        <h3>Identification Documents</h3>
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Type</th>
                                        <th>Uploaded</th>
                                        <th>Link</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Driver&#39;s License</td>
                                        <td>2024-11-01</td>
                                        <td><a href="#">View</a></td>
                                    </tr>
                                    <tr>
                                        <td>Passport</td>
                                        <td>2024-01-25</td>
                                        <td><a href="#">View</a></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>