<%-include('navbar.ejs')%>


   <div class="container-fluid px-3 px-lg-4 py-4">

    <!-- Page Heading -->
    <div class="page-heading">

        <div class="page-heading-copy">

            <span class="page-icon">
                <i class="bi bi-shield-check" aria-hidden="true"></i>
            </span>

            <div>

                <p class="eyebrow mb-1">
                    Candidate Portal
                </p>

                <h1 class="h3 mb-1">
                    BGV Dashboard
                </h1>

                <p class="text-muted mb-0">
                    Track your background verification process, documents,
                    reports and verification status from one place.
                </p>

            </div>

        </div>

        <div class="heading-actions">

            <a href="/candidate_admin/bgv-report-status"
               class="btn btn-outline-secondary btn-sm">

                <i class="bi bi-arrow-clockwise" aria-hidden="true"></i>
                Check Status

            </a>

        </div>

    </div>


    <!-- BGV Overview Metrics -->
    <section class="row g-3 mt-1"
             aria-label="BGV overview">

        <!-- BGV Components -->
        <div class="col-12 col-sm-6 col-xl-3">

            <article class="metric-card metric-primary">

                <div class="metric-top">

                    <span class="metric-label">
                        BGV Components
                    </span>

                    <span class="metric-icon">
                        <i class="bi bi-grid-3x3-gap"
                           aria-hidden="true"></i>
                    </span>

                </div>

                <div class="metric-value">
                    6
                </div>

                <div class="metric-meta">

                    <span>
                        Selected checks
                    </span>

                </div>

            </article>

        </div>


        <!-- Completed -->
        <div class="col-12 col-sm-6 col-xl-3">

            <article class="metric-card metric-success">

                <div class="metric-top">

                    <span class="metric-label">
                        Completed
                    </span>

                    <span class="metric-icon">
                        <i class="bi bi-check-circle"
                           aria-hidden="true"></i>
                    </span>

                </div>

                <div class="metric-value">
                    3
                </div>

                <div class="metric-meta">

                    <span class="text-success">
                        Verification completed
                    </span>

                </div>

            </article>

        </div>


        <!-- Pending -->
        <div class="col-12 col-sm-6 col-xl-3">

            <article class="metric-card metric-warning">

                <div class="metric-top">

                    <span class="metric-label">
                        In Progress
                    </span>

                    <span class="metric-icon">
                        <i class="bi bi-hourglass-split"
                           aria-hidden="true"></i>
                    </span>

                </div>

                <div class="metric-value">
                    2
                </div>

                <div class="metric-meta">

                    <span>
                        Checks under verification
                    </span>

                </div>

            </article>

        </div>


        <!-- Insufficiency -->
        <div class="col-12 col-sm-6 col-xl-3">

            <article class="metric-card metric-danger">

                <div class="metric-top">

                    <span class="metric-label">
                        Insuff / Remarks
                    </span>

                    <span class="metric-icon">
                        <i class="bi bi-exclamation-triangle"
                           aria-hidden="true"></i>
                    </span>

                </div>

                <div class="metric-value">
                    1
                </div>

                <div class="metric-meta">

                    <span class="text-danger">
                        Action required
                    </span>

                </div>

            </article>

        </div>

    </section>


    <!-- BGV Status + Quick Actions -->
    <section class="row g-3 mt-1">

        <!-- BGV Status -->
        <div class="col-12 col-xl-8">

            <div class="panel">

                <div class="panel-header">

                    <div>

                        <h2 class="h5 mb-1 section-title">

                            <i class="bi bi-shield-check"
                               aria-hidden="true"></i>

                            <span>
                                BGV Verification Status
                            </span>

                        </h2>

                        <p class="text-muted mb-0">
                            Track the current progress of your background
                            verification.
                        </p>

                    </div>

                    <a class="btn btn-light btn-sm"
                       href="/candidate_admin/bgv-report-status">

                        View Details

                    </a>

                </div>


                <!-- Status Items -->
                <div class="activity-list">

                    <!-- Identity -->
                    <div class="activity-item">

                        <span class="activity-dot bg-success"></span>

                        <div class="flex-grow-1">

                            <p class="mb-1 fw-semibold">
                                Identity Verification
                            </p>

                            <p class="text-muted small mb-0">
                                Verification completed successfully.
                            </p>

                        </div>

                        <span class="badge text-bg-success">
                            Completed
                        </span>

                    </div>


                    <!-- Address -->
                    <div class="activity-item">

                        <span class="activity-dot bg-success"></span>

                        <div class="flex-grow-1">

                            <p class="mb-1 fw-semibold">
                                Address Verification
                            </p>

                            <p class="text-muted small mb-0">
                                Verification completed successfully.
                            </p>

                        </div>

                        <span class="badge text-bg-success">
                            Completed
                        </span>

                    </div>


                    <!-- Employment -->
                    <div class="activity-item">

                        <span class="activity-dot bg-warning"></span>

                        <div class="flex-grow-1">

                            <p class="mb-1 fw-semibold">
                                Employment Verification
                            </p>

                            <p class="text-muted small mb-0">
                                Verification is currently in progress.
                            </p>

                        </div>

                        <span class="badge text-bg-warning">
                            In Progress
                        </span>

                    </div>


                    <!-- Criminal -->
                    <div class="activity-item">

                        <span class="activity-dot bg-warning"></span>

                        <div class="flex-grow-1">

                            <p class="mb-1 fw-semibold">
                                Criminal Record Check
                            </p>

                            <p class="text-muted small mb-0">
                                Verification is currently in progress.
                            </p>

                        </div>

                        <span class="badge text-bg-warning">
                            In Progress
                        </span>

                    </div>


                    <!-- Education -->
                    <div class="activity-item">

                        <span class="activity-dot bg-danger"></span>

                        <div class="flex-grow-1">

                            <p class="mb-1 fw-semibold">
                                Education Verification
                            </p>

                            <p class="text-muted small mb-0">
                                Additional information is required.
                            </p>

                        </div>

                        <span class="badge text-bg-danger">
                            Insuff
                        </span>

                    </div>

                </div>

            </div>

        </div>


        <!-- Quick Actions -->
        <div class="col-12 col-xl-4">

            <div class="panel h-100">

                <div class="panel-header">

                    <div>

                        <h2 class="h5 mb-1 section-title">

                            <i class="bi bi-lightning-charge"
                               aria-hidden="true"></i>

                            <span>
                                Quick Actions
                            </span>

                        </h2>

                        <p class="text-muted mb-0">
                            Access important BGV actions.
                        </p>

                    </div>

                </div>


                <div class="d-grid gap-2">

                    <a href="/candidate_admin/profile"
                       class="btn btn-light text-start">

                        <i class="bi bi-person-badge me-2"></i>

                        My Profile

                    </a>


                    <a href="/candidate_admin/my-bgv-component"
                       class="btn btn-light text-start">

                        <i class="bi bi-grid-3x3-gap me-2"></i>

                        My BGV Components

                    </a>


                    <a href="/candidate_admin/self-declaration"
                       class="btn btn-light text-start">

                        <i class="bi bi-file-earmark-text me-2"></i>

                        Self Declaration (LOA)

                    </a>


                    <a href="/candidate_admin/bgv-insuff"
                       class="btn btn-light text-start">

                        <i class="bi bi-exclamation-triangle me-2"></i>

                        View Insuff / Remarks

                    </a>


                    <a href="/candidate_admin/my-orders"
                       class="btn btn-light text-start">

                        <i class="bi bi-bag-check me-2"></i>

                        My Orders

                    </a>

                </div>

            </div>

        </div>

    </section>


    <!-- Recent BGV Activity -->
    <section class="panel mt-3">

        <div class="panel-header">

            <div>

                <h2 class="h5 mb-1 section-title">

                    <i class="bi bi-clock-history"
                       aria-hidden="true"></i>

                    <span>
                        Recent BGV Activity
                    </span>

                </h2>

                <p class="text-muted mb-0">
                    Recent updates related to your background verification.
                </p>

            </div>

            <a class="btn btn-outline-secondary btn-sm"
               href="/candidate_admin/my-bgv-report">

                View All

            </a>

        </div>


        <div class="table-responsive">

            <table class="table align-middle mb-0">

                <thead>

                    <tr>

                        <th scope="col">
                            Activity
                        </th>

                        <th scope="col">
                            Component
                        </th>

                        <th scope="col">
                            Status
                        </th>

                        <th scope="col">
                            Date
                        </th>

                        <th scope="col"
                            class="text-end">

                            Action

                        </th>

                    </tr>

                </thead>


                <tbody>

                    <!-- Row 1 -->
                    <tr>

                        <td>

                            <div class="d-flex align-items-center gap-2">

                                <span class="page-icon">
                                    <i class="bi bi-check-circle"></i>
                                </span>

                                <div>

                                    <p class="fw-semibold mb-0">
                                        Verification Completed
                                    </p>

                                    <p class="text-muted small mb-0">
                                        Verification successfully completed.
                                    </p>

                                </div>

                            </div>

                        </td>

                        <td>
                            Identity Verification
                        </td>

                        <td>

                            <span class="badge text-bg-success">
                                Completed
                            </span>

                        </td>

                        <td>
                            Today
                        </td>

                        <td class="text-end">

                            <a class="btn btn-light btn-sm"
                               href="/candidate_admin/my-bgv-report">

                                View

                            </a>

                        </td>

                    </tr>


                    <!-- Row 2 -->
                    <tr>

                        <td>

                            <div class="d-flex align-items-center gap-2">

                                <span class="page-icon">
                                    <i class="bi bi-hourglass-split"></i>
                                </span>

                                <div>

                                    <p class="fw-semibold mb-0">
                                        Verification In Progress
                                    </p>

                                    <p class="text-muted small mb-0">
                                        Verification is being processed.
                                    </p>

                                </div>

                            </div>

                        </td>

                        <td>
                            Employment Verification
                        </td>

                        <td>

                            <span class="badge text-bg-warning">
                                In Progress
                            </span>

                        </td>

                        <td>
                            Today
                        </td>

                        <td class="text-end">

                            <a class="btn btn-light btn-sm"
                               href="/candidate_admin/my-bgv-report">

                                View

                            </a>

                        </td>

                    </tr>


                    <!-- Row 3 -->
                    <tr>

                        <td>

                            <div class="d-flex align-items-center gap-2">

                                <span class="page-icon">
                                    <i class="bi bi-exclamation-triangle"></i>
                                </span>

                                <div>

                                    <p class="fw-semibold mb-0">
                                        Additional Information Required
                                    </p>

                                    <p class="text-muted small mb-0">
                                        Please review the insufficiency remarks.
                                    </p>

                                </div>

                            </div>

                        </td>

                        <td>
                            Education Verification
                        </td>

                        <td>

                            <span class="badge text-bg-danger">
                                Action Required
                            </span>

                        </td>

                        <td>
                            Yesterday
                        </td>

                        <td class="text-end">

                            <a class="btn btn-light btn-sm"
                               href="/candidate_admin/bgv-insuff">

                                Review

                            </a>

                        </td>

                    </tr>

                </tbody>

            </table>

        </div>

    </section>


    <!-- My Latest Order -->
    <section class="row g-3 mt-1">

        <div class="col-12">

            <div class="panel">

                <div class="panel-header">

                    <div>

                        <h2 class="h5 mb-1 section-title">

                            <i class="bi bi-bag-check"
                               aria-hidden="true"></i>

                            <span>
                                My Latest BGV Order
                            </span>

                        </h2>

                        <p class="text-muted mb-0">
                            View your latest background verification order.
                        </p>

                    </div>

                    <a class="btn btn-outline-secondary btn-sm"
                       href="/candidate_admin/my-orders">

                        My Orders

                    </a>

                </div>


                <div class="row g-3">

                    <div class="col-12 col-md-3">

                        <div class="text-muted small">
                            Order ID
                        </div>

                        <div class="fw-semibold">
                            BGV-2026-00125
                        </div>

                    </div>


                    <div class="col-12 col-md-3">

                        <div class="text-muted small">
                            Order Date
                        </div>

                        <div class="fw-semibold">
                            10 Aug 2026
                        </div>

                    </div>


                    <div class="col-12 col-md-3">

                        <div class="text-muted small">
                            Components
                        </div>

                        <div class="fw-semibold">
                            6 Checks
                        </div>

                    </div>


                    <div class="col-12 col-md-3">

                        <div class="text-muted small">
                            Order Status
                        </div>

                        <span class="badge text-bg-warning">
                            Verification In Progress
                        </span>

                    </div>

                </div>

            </div>

        </div>

    </section>

</div>
        
<%-include('footer.ejs')%>