<?php require_once "head.php";?>

<?php require_once "header.php";?>

<main class="layout bg-gray-15">
    <div class="ss-section">
        <div class="ss-section-inner ss-um with-padding">
            <div class="ss-um-head">
                <div class="ss-um-container">
                    <div class="ss-bp-head">
                        <div class="ss-bp-head-left">
                            <ul class="ss-breadcrumb p2">
                                <li>
                                    <a href="#">Settings</a>
                                </li>
                                <li>
                                    <i class="ss-icon-chevron-right"><svg><use xlink:href="#ss-icon-chevron-right"></use></svg></i>
                                </li>
                                <li>
                                    <span>Billing</span>
                                </li>
                            </ul>
                            <h1 class="h1">Billing</h1>
                        </div>
                        <div class="ss-bp-head-right">
                            <a href="#" class="btn btn-primary">Upgrade License</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ss-um-body">
                <div class="ss-um-container">
                    <div class="ss-bp-body">
                        <ul class="nav ss-um-nav">
                            <li class="nav-item">
                                <a href="settings-billing-overview.php" class="nav-link text-uppercase">Overview</a>
                            </li>
                            <li class="nav-item">
                                <a href="settings-billing-purchase-history.php" class="nav-link text-uppercase active">Invoicing</a>
                            </li>
                            <li class="nav-item">
                                <a href="settings-billing-bill-estimate.php" class="nav-link text-uppercase">License Details</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <!-- Start [ Purchase History Tab ] -->
                            <div class="tab-pane fade show active">

                                <!-- Start [ No purchase :: remove class "d-none" to show No Purchase message if there is no data to show ] -->
                                <div class="ss-cc-block text-center ss-setcdr-ph-np d-none">
                                    <h2 class="h1">No Purchases Yet</h2>
                                    <div class="p1">
                                        <p>Click Add Credits to purchase credits for different survey types.</p>
                                    </div>
                                    <div class="ss-cc-btns justify-content-center">
                                        <a href="#" class="btn btn-primary">Add Credits</a>
                                    </div>
                                </div>
                                <!-- End   [ No purchase ] -->

                                <div class="ss-setcdr-ph-g">
                                    <div class="ss-setcdr-ph-box">
                                        <div class="ss-setcdr-ph-head">
                                            <div class="ss-setcdr-ph-head-l">
                                                <h3 class="h4 text-uppercase">Latest</h3>
                                            </div>
                                            <div class="ss-setcdr-ph-head-r">
                                                <div class="p1">
                                                    <span>Date: </span>
                                                    <strong>MAY 27, 2020</strong>
                                                </div>
                                                <div class="p1">
                                                    <span>Invoice: </span>
                                                    <strong>73089645372</strong>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="ss-setcdr-ph-body">

                                            <table class="ss-table-history theme-b">
                                                <thead>
                                                    <tr>
                                                        <th>DESCRIPTION</th>
                                                        <th class="text-end">Price</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td valign="top">
                                                            <div class="d-block">
                                                                <strong>SurveySaurus Licence (1-49 Employees | Small)</strong>
                                                            </div>
                                                            <div class="p3 mt-2">
                                                                <strong class="text-secondary fw-bold">Monthly Plan</strong>
                                                                <div class="fst-italic">Unlimited Access to Current Available Survey Platforms</div>
                                                            </div>
                                                        </td>
                                                        <td valign="top" class="text-end"><strong>$500.00</strong></td>
                                                    </tr>
                                                </tbody>
                                            </table>

                                            <table class="ss-table-total">
                                                <tbody>
                                                    <tr>
                                                        <td rowspan="3" valign="bottom">
                                                            <a href="#ss-print-invoice-billing-modal" data-bs-toggle="modal" class="btn btn-light">Print a Copy</a>
                                                        </td>
                                                        <td class="text-end text-uppercase" style="width: 65%;">SUBTOTAL</td>
                                                        <td class="text-end">$500.00</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="text-end text-uppercase">TAX</td>
                                                        <td class="text-end">$0.00</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="text-end text-uppercase"><strong>TOTAL</strong></td>
                                                        <td class="text-end ws-nowrap"><small>(USD)</small><strong class="ss-table-total-amnt">$500.00</strong></td>
                                                    </tr>
                                                </tbody>
                                            </table>

                                        </div>
                                    </div>
                                </div>

                                <div class="ss-setcdr-ph-g">
                                    <h2 class="h4 mb-5">Previous Statements</h2>
                                    <table class="ss-table ss-table-theme-b highlight-oddeven">
                                        <thead>
                                            <tr>
                                                <th>Date</th>
                                                <th>Invoice #</th>
                                                <th>DESCRIPTION</th>
                                                <th>Total</th>
                                                <th width="42px">&nbsp;</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                               <td>May 17, 2020</td>
                                               <td>7309853</td>
                                               <td>Team Effectiveness, 360-Degree Survey Credit(s)</td>
                                               <td>$280.00</td>
                                               <td><a class="btn-icon"><i class="ss-icon-chevron-right"><svg><use xlink:href="#ss-icon-chevron-right"></use></svg></i></a></td>
                                            </tr>
                                            <tr>
                                                <td>May 17, 2020</td>
                                                <td>7309853</td>
                                                <td>Team Effectiveness, 360-Degree Survey Credit(s)</td>
                                                <td>$280.00</td>
                                                <td><a class="btn-icon"><i class="ss-icon-chevron-right"><svg><use xlink:href="#ss-icon-chevron-right"></use></svg></i></a></td>
                                             </tr>
                                             <tr>
                                                <td>May 17, 2020</td>
                                                <td>7309853</td>
                                                <td>Team Effectiveness, 360-Degree Survey Credit(s)</td>
                                                <td>$280.00</td>
                                                <td><a class="btn-icon"><i class="ss-icon-chevron-right"><svg><use xlink:href="#ss-icon-chevron-right"></use></svg></i></a></td>
                                             </tr>
                                             <tr>
                                                <td>May 17, 2020</td>
                                                <td>7309853</td>
                                                <td>Team Effectiveness, 360-Degree Survey Credit(s)</td>
                                                <td>$280.00</td>
                                                <td><a class="btn-icon"><i class="ss-icon-chevron-right"><svg><use xlink:href="#ss-icon-chevron-right"></use></svg></i></a></td>
                                             </tr>
                                             <tr>
                                                <td>May 17, 2020</td>
                                                <td>7309853</td>
                                                <td>Team Effectiveness, 360-Degree Survey Credit(s)</td>
                                                <td>$280.00</td>
                                                <td><a class="btn-icon"><i class="ss-icon-chevron-right"><svg><use xlink:href="#ss-icon-chevron-right"></use></svg></i></a></td>
                                             </tr>
                                        </tbody>
                                    </table>
                                    <div class="ss-table-btns">
                                        <a class="btn btn-outline-dark with-icon">
                                            <i class="ss-icon-arrow-left-two"><svg><use xlink:href="#ss-icon-arrow-left-two"></use></svg></i>
                                            <span>Previous 5</span>
                                        </a>
                                        <a class="btn btn-outline-dark with-icon-right">
                                            <span>Next 5</span>
                                            <i class="ss-icon-arrow-right"><svg><use xlink:href="#ss-icon-arrow-right"></use></svg></i>
                                        </a>
                                    </div>
                                </div>

                            </div>
                            <!-- End   [ Purchase History Tab ] -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<?php require_once "modal-print-invoice-billing.php";?>

<?php require_once "footer.php";?>
