<%-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-clipboard2-check"></i>
            </span>

            <div>

                <p class="eyebrow mb-1">
                    Background Verification
                </p>

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

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

            </div>

        </div>

    </div>


    <!-- Overall Status -->
    <section class="row g-3 mt-1">

        <!-- Overall Status -->
        <div class="col-12 col-md-6 col-xl-4">

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

                <div class="metric-top">

                    <span class="metric-label">
                        Overall Status
                    </span>

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

                </div>

                <div class="metric-value" style="font-size: 25px;">

                    <%= bgvStatus.overall_status %>

                </div>

                <div class="metric-meta">

                    <span>
                        Current verification status
                    </span>

                </div>

            </article>

        </div>


        <!-- Progress -->
        <div class="col-12 col-md-6 col-xl-4">

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

                <div class="metric-top">

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

                    <span class="metric-icon">
                        <i class="bi bi-bar-chart"></i>
                    </span>

                </div>

                <div class="metric-value">

                    <%= bgvStatus.progress %>%

                </div>

                <div class="metric-meta">

                    <span>
                        Overall completion
                    </span>

                </div>

            </article>

        </div>


        <!-- Report -->
        <div class="col-12 col-md-6 col-xl-4">

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

                <div class="metric-top">

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

                    <span class="metric-icon">
                        <i class="bi bi-file-earmark-check"></i>
                    </span>

                </div>

                <div class="metric-value" style="font-size: 25px;">

                    <% if (bgvStatus.overall_status === "Completed") { %>

                        Ready

                    <% } else { %>

                        Pending

                    <% } %>

                </div>

                <div class="metric-meta">

                    <span>
                        Final BGV report
                    </span>

                </div>

            </article>

        </div>

    </section>


    <!-- Progress Panel -->
    <section class="panel mt-3">

        <div class="panel-header">

            <div>

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

                    <i class="bi bi-activity"></i>

                    <span>
                        Verification Progress
                    </span>

                </h2>

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

            </div>

        </div>


        <div class="p-4">

            <div class="d-flex justify-content-between mb-2">

                <span class="fw-semibold">
                    Overall Progress
                </span>

                <span class="fw-semibold">
                    <%= bgvStatus.progress %>%
                </span>

            </div>


            <div class="progress" style="height: 10px;">

                <div
                    class="progress-bar"
                    role="progressbar"
                    style="width: <%= bgvStatus.progress %>%"
                    aria-valuenow="<%= bgvStatus.progress %>"
                    aria-valuemin="0"
                    aria-valuemax="100">
                </div>

            </div>


            <div class="row mt-4">

                <div class="col-md-6">

                    <small class="text-muted d-block">
                        Verification Initiated
                    </small>

                    <strong>

                        <%= bgvStatus.initiated_date || "Not Started" %>

                    </strong>

                </div>


                <div class="col-md-6 mt-3 mt-md-0">

                    <small class="text-muted d-block">
                        Verification Completed
                    </small>

                    <strong>

                        <%= bgvStatus.completed_date || "Pending" %>

                    </strong>

                </div>

            </div>

        </div>

    </section>


    <!-- Component Status -->
    <section class="panel mt-3">

        <div class="panel-header">

            <div>

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

                    <i class="bi bi-list-check"></i>

                    <span>
                        Verification Components
                    </span>

                </h2>

                <p class="text-muted mb-0">
                    Current status of each background verification component.
                </p>

            </div>

        </div>


        <div class="table-responsive">

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

                <thead>

                    <tr>

                        <th>
                            Component
                        </th>

                        <th>
                            Status
                        </th>

                        <th>
                            Last Updated
                        </th>

                        <th class="text-end">
                            Details
                        </th>

                    </tr>

                </thead>


                <tbody>

                    <% if (components.length === 0) { %>

                        <tr>

                            <td colspan="4">

                                <div class="text-center py-5">

                                    <div class="mb-3">

                                        <i
                                            class="bi bi-clipboard-x"
                                            style="font-size: 50px; opacity: .35;">
                                        </i>

                                    </div>

                                    <h5 class="mb-2">
                                        No Verification Data
                                    </h5>

                                    <p class="text-muted mb-0">
                                        Your BGV verification components have not been added yet.
                                    </p>

                                </div>

                            </td>

                        </tr>

                    <% } else { %>


                        <% components.forEach(function(component) { %>

                            <tr>

                                <td>

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

                                        <span class="metric-icon">

                                            <i class="bi bi-shield-check"></i>

                                        </span>

                                        <strong>
                                            <%= component.name %>
                                        </strong>

                                    </div>

                                </td>


                                <td>

                                    <% if (component.status === "Completed") { %>

                                        <span class="badge text-bg-success">
                                            <i class="bi bi-check-circle me-1"></i>
                                            Completed
                                        </span>

                                    <% } else if (component.status === "In Progress") { %>

                                        <span class="badge text-bg-warning">
                                            <i class="bi bi-hourglass-split me-1"></i>
                                            In Progress
                                        </span>

                                    <% } else if (component.status === "Insufficiency") { %>

                                        <span class="badge text-bg-danger">
                                            <i class="bi bi-exclamation-circle me-1"></i>
                                            Insufficiency
                                        </span>

                                    <% } else { %>

                                        <span class="badge text-bg-secondary">
                                            <%= component.status %>
                                        </span>

                                    <% } %>

                                </td>


                                <td>

                                    <%= component.updated_at || "-" %>

                                </td>


                                <td class="text-end">

                                    <a
                                        href="/candidate_admin/bgv-component/<%= component.id %>"
                                        class="btn btn-light btn-sm">

                                        <i class="bi bi-eye me-1"></i>
                                        View

                                    </a>

                                </td>

                            </tr>

                        <% }); %>


                    <% } %>

                </tbody>

            </table>

        </div>

    </section>


    <!-- Candidate -->
    <section class="panel mt-3">

        <div class="panel-header">

            <div>

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

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

                    <span>
                        Candidate
                    </span>

                </h2>

            </div>

        </div>


        <div class="p-3">

            <div class="row g-3">

                <div class="col-md-4">

                    <small class="text-muted d-block">
                        Candidate Name
                    </small>

                    <strong>
                        <%= user.first_name %>
                        <%= user.last_name %>
                    </strong>

                </div>


                <div class="col-md-4">

                    <small class="text-muted d-block">
                        Email
                    </small>

                    <strong>
                        <%= user.email %>
                    </strong>

                </div>


                <div class="col-md-4">

                    <small class="text-muted d-block">
                        Mobile
                    </small>

                    <strong>
                        <%= user.mobile %>
                    </strong>

                </div>

            </div>

        </div>

    </section>

</div>


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