<?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>Credits</span>
                                </li>
                            </ul>
                            <h1 class="h1">Credits</h1>
                        </div>
                        <div class="ss-bp-head-right">
                            <a class="btn btn-primary" href="#ss-new-group-modal" data-bs-toggle="modal">Create Group</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-credits-overview.php" class="nav-link text-uppercase active">Overview</a>
                            </li>
                            <li class="nav-item">
                                <a href="settings-credits-purchase-history.php" class="nav-link text-uppercase">Invoicing</a>
                            </li>
                            <li class="nav-item">
                                <a href="settings-credits-your-credits.php" class="nav-link text-uppercase">Survey Credits</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <!-- Start [ Overview Tab ] -->
                            <div class="tab-pane fade show active">
                                <div class="ss-setcdr-o-grid">
                                    <div class="ss-setcdr-o-col ss-setcdr-o">
                                        <div class="ss-setcdr-o-box">
                                            <div class="ss-setcdr-o-head">
                                                <div class="ss-setcdr-o-head-l">
                                                    <h4 class="h4 text-uppercase">Current Plan</h4>
                                                </div>
                                                <div class="ss-setcdr-o-head-r">
                                                    <a href="#" class="ss-setcdr-o-link">Update Plan</a>
                                                </div>
                                            </div>
                                            <div class="ss-setcdr-o-body justify-content-center">
                                                <h2 class="h2">Pay Per Survey</h2>
                                            </div>
                                            <div class="ss-setcdr-o-foot">
                                                <div class="ss-setcdr-o-foot-l">
                                                    <p class="p3 text-uppercase mb-3">Want More Options?</p>
                                                    <a href="#" class="btn btn-primary">Annual License</a>
                                                </div>
                                                <div class="ss-setcdr-o-foot-r">
                                                    <a href="#" class="ss-setcdr-iconlink">
                                                        <span>View Credits / Buy More</span>
                                                        <i class="ss-icon-arrow-right"><svg><use xlink:href="#ss-icon-arrow-right"></use></svg></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Start [ NEW Updated html ] -->
                                    <div class="ss-setcdr-o-col ss-setcdr-pd">
                                        <div class="ss-setcdr-o-box">
                                            <div class="ss-setcdr-o-head">
                                                <div class="ss-setcdr-o-head-l">
                                                    <h4 class="h4 text-uppercase">Payment Credits</h4>
                                                </div>
                                                <!-- <div class="ss-setcdr-o-head-r">
                                                    <a href="#" class="ss-setcdr-o-link">Edit</a>
                                                </div> -->
                                            </div>
                                            <div class="ss-setcdr-o-body align-items-center">
                                                <a class="btn btn-light">Add Survey Credits</a>
                                                <div class="ss-setcdr-o-stripe">
                                                    <span class="btn-stripe">
                                                        <i class="ss-icon-logo-stripe"><svg><use xlink:href="#ss-icon-logo-stripe"></use></svg></i>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Start [ NEW Updated html ] -->

                                    <!-- Start [ OLD html kept commented ] -->
                                    <?php /* ?><div class="ss-setcdr-o-col ss-setcdr-pd">
                                        <div class="ss-setcdr-o-box">
                                            <div class="ss-setcdr-o-head">
                                                <div class="ss-setcdr-o-head-l">
                                                    <h4 class="h4 text-uppercase">Payment Details</h4>
                                                </div>
                                                <div class="ss-setcdr-o-head-r">
                                                    <a href="#" class="ss-setcdr-o-link">Edit</a>
                                                </div>
                                            </div>
                                            <div class="ss-setcdr-o-body align-items-center text-center">
                                                <!-- Start [ html for payment method not added ] -->
                                                <a href="#" class="btn btn-primary-100 text-primary">Add Payment Method</a>
                                                <div class="p3 mt-5">
                                                    <p>Click on "Add Payment Method" to add your payment method for future purchases. SurveySaurus will keep your payment info securely on file.</p>
                                                </div>
                                                <!-- End   [ html for payment method not added ] -->

                                                <!-- Start [ html for payment method added ] -->
                                                <!-- <div class="ss-setcdr-card-row">
                                                    <div class="ss-setcdr-card-img">
                                                        <span class="lazy-loader contain">
                                                            <img class="lazyload" src="images/blank.gif" data-original="images/visa.png" alt="">
                                                        </span>
                                                    </div>
                                                    <div class="ss-setcdr-card-info">
                                                        <h5 class="h5">Jill Smithman</h5>
                                                        <p>*** *** *** 1234</p>
                                                        <small>08/2025</small>
                                                    </div>
                                                </div>
                                                <div class="p3 mt-5">
                                                    <p>EDA Surveys will charge the payment method above for you future credits purchases</p>
                                                </div> -->
                                                <!-- End   [ html for payment method added ] -->

                                            </div>
                                        </div>
                                    </div><?php */ ?>
                                    <!-- Start [ OLD html kept commented ] -->


                                    <div class="ss-setcdr-o-col ss-setcdr-pc">
                                        <div class="ss-setcdr-o-box">
                                            <div class="ss-setcdr-o-head">
                                                <div class="ss-setcdr-o-head-l">
                                                    <h4 class="h4 text-uppercase">Payment Contact</h4>
                                                </div>
                                                <div class="ss-setcdr-o-head-r">
                                                    <a href="#" class="ss-setcdr-o-link">Edit</a>
                                                </div>
                                            </div>
                                            <div class="ss-setcdr-o-body align-items-center text-center">
                                                <span class="ss-um-avtar">
                                                    <!-- <strong>Ab</strong> -->
                                                    <!-- <i class="ss-icon-user-fill"><svg><use xlink:href="#ss-icon-user-fill"></use></svg></i> -->
                                                    <span class="lazy-loader loaded">
                                                        <span class="lazyload b-loaded loaded" style="background-image: url(&quot;images/avtar-80x80.png&quot;);"></span>
                                                    </span>
                                                </span>
                                                <strong class="ss-um-username">Jillian Clark</strong>
                                                <span class="ss-um-useremail">jillclark4321@email.com</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="ss-setcdr-o-col ss-setcdr-ph">
                                        <div class="ss-setcdr-o-box">
                                            <div class="ss-setcdr-o-head">
                                                <div class="ss-setcdr-o-head-l">
                                                    <h4 class="h4 text-uppercase">Purchase History</h4>
                                                </div>
                                                <div class="ss-setcdr-o-head-r">
                                                    <a href="#" class="ss-setcdr-o-link">View More</a>
                                                </div>
                                            </div>
                                            <div class="ss-setcdr-o-body">
                                                <table class="ss-table-history">
                                                    <thead>
                                                        <tr>
                                                            <th>Date</th>
                                                            <th>Invoice #</th>
                                                            <th>Description</th>
                                                            <th class="text-end">Total</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <td>05/15/2020</td>
                                                            <td>7306542</td>
                                                            <td>Team Effectiveness, 360-Degree Survey Credit(s)</td>
                                                            <td class="text-end">$280.00</td>
                                                        </tr>
                                                        <tr>
                                                            <td>04/21/2020</td>
                                                            <td>7306541</td>
                                                            <td>SurveySaurus License (50-499 Employees | Medium</td>
                                                            <td class="text-end">$240.00</td>
                                                        </tr>
                                                        <tr>
                                                            <td>05/02/2020</td>
                                                            <td>7306540</td>
                                                            <td>SurveySaurus License (50-499 Employees | Medium</td>
                                                            <td class="text-end">$867.00</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                            <div class="ss-setcdr-o-foot">
                                                <div class="ss-setcdr-o-foot-l">&nbsp;</div>
                                                <div class="ss-setcdr-o-foot-r">
                                                    <a href="#" class="ss-setcdr-iconlink">
                                                        <span>View Credits / Buy More</span>
                                                        <i class="ss-icon-arrow-right"><svg><use xlink:href="#ss-icon-arrow-right"></use></svg></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <!-- End   [ Overview Tab ] -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<?php require_once "modal-new-group.php";?>

<?php require_once "footer.php";?>
