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

            <div>

                <p class="eyebrow mb-1">
                    Account
                </p>

                <h1 class="h3 mb-1">
                    My Orders
                </h1>

                <p class="text-muted mb-0">
                    View your BGV orders, verification services and order status.
                </p>

            </div>

        </div>

    </div>


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

        <!-- Total Orders -->
        <div class="col-12 col-sm-6 col-xl-4">

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

                <div class="metric-top">

                    <span class="metric-label">
                        Total Orders
                    </span>

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

                </div>

                <div class="metric-value">
                    <%= orders.length %>
                </div>

                <div class="metric-meta">
                    <span>
                        Total BGV orders
                    </span>
                </div>

            </article>

        </div>


        <!-- Active Orders -->
        <div class="col-12 col-sm-6 col-xl-4">

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

                <div class="metric-top">

                    <span class="metric-label">
                        Active Orders
                    </span>

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

                </div>

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

                <div class="metric-meta">
                    <span>
                        Verification in progress
                    </span>
                </div>

            </article>

        </div>


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

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

                </div>

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

                <div class="metric-meta">
                    <span>
                        Completed BGV orders
                    </span>
                </div>

            </article>

        </div>

    </section>


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

        <div class="panel-header">

            <div>

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

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

                    <span>
                        Order History
                    </span>

                </h2>

                <p class="text-muted mb-0">
                    Your background verification order history.
                </p>

            </div>

        </div>


        <div class="table-responsive">

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

                <thead>

                    <tr>

                        <th>
                            Order ID
                        </th>

                        <th>
                            Service
                        </th>

                        <th>
                            Order Date
                        </th>

                        <th>
                            Amount
                        </th>

                        <th>
                            Payment
                        </th>

                        <th>
                            Status
                        </th>

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

                    </tr>

                </thead>


                <tbody>

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

                        <tr>

                            <td colspan="7">

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

                                    <div class="mb-3">

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

                                    </div>

                                    <h5 class="mb-2">
                                        No Orders Found
                                    </h5>

                                    <p class="text-muted mb-0">
                                        You don't have any BGV orders yet.
                                    </p>

                                </div>

                            </td>

                        </tr>

                    <% } else { %>


                        <% orders.forEach(function(order) { %>

                            <tr>

                                <td>

                                    <strong>
                                        #<%= order.order_id %>
                                    </strong>

                                </td>


                                <td>

                                    <strong>
                                        <%= order.service_name %>
                                    </strong>

                                </td>


                                <td>
                                    <%= order.order_date %>
                                </td>


                                <td>
                                    ₹<%= order.amount %>
                                </td>


                                <td>

                                    <% if (order.payment_status === 'Paid') { %>

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

                                    <% } else { %>

                                        <span class="badge text-bg-warning">
                                            <%= order.payment_status %>
                                        </span>

                                    <% } %>

                                </td>


                                <td>

                                    <% if (order.status === 'Completed') { %>

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

                                    <% } else if (order.status === 'In Progress') { %>

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

                                    <% } else { %>

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

                                    <% } %>

                                </td>


                                <td class="text-end">

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

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

                                    </a>

                                </td>

                            </tr>

                        <% }); %>


                    <% } %>

                </tbody>

            </table>

        </div>

    </section>


    <!-- Candidate Information -->
    <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 Information
                    </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 Address
                    </small>

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

                </div>


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

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

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

                </div>

            </div>

        </div>

    </section>

</div>

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