<?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">Get 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-credits-overview.php" class="nav-link text-uppercase">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 active">Survey Credits</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <!-- Start [ Your Credits Tab ] -->
                            <div class="tab-pane fade show active">
                                <div class="ss-setcdr-yc">
                                    <div class="ss-setcdr-yc-grid">
                                        <div class="ss-setcdr-yc-l">

                                            <div class="ss-setcdr-ysc-w">
                                                <h2 class="h4">Your Survey Credits</h2>
                                                <div class="ss-setcdr-ysc-row">
                                                    <div class="ss-setcdr-ysc-col text-start align-items-start ps-0 lg">
                                                        <strong>25</strong>
                                                        <span>Total Credits Available</span>
                                                    </div>
                                                    <div class="ss-setcdr-ysc-col">
                                                        <span>Credit Usage</span>
                                                        <strong>21</strong>
                                                        <i>(Avg. per month)</i>
                                                    </div>
                                                    <div class="ss-setcdr-ysc-col">
                                                        <span>Purchases</span>
                                                        <strong>$350.00</strong>
                                                        <i>(Avg. per month)</i>
                                                    </div>
                                                    <div class="ss-setcdr-ysc-col">
                                                        <span>Sent Surveys</span>
                                                        <strong>4</strong>
                                                        <i>(Avg. per month)</i>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="alert fade show alert-success d-flex align-items-center alert-dismissible mb-5" role="alert">
                                                <i class="flex-shrink-0 ss-icon-check-circle"><svg><use xlink:href="#ss-icon-check-circle"></use></svg></i>
                                                <div class="text-body">15 Credits Purchased</div>
                                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                            </div>

                                            <div class="ss-bp-filter-row">
                                                <div class="ss-bp-filter-left">
                                                    <div class="form-group mb-0">
                                                        <span class="form-control-wrapper with-icon-left">
                                                            <input type="search" value="" name="surveys-search" class="form-control" placeholder="Search Surveys">
                                                            <i class="ss-icon-search"><svg><use xlink:href="#ss-icon-search"></use></svg></i>
                                                        </span>
                                                    </div>
                                                </div>
                                                <div class="ss-bp-filter-right">
                                                    <div class="ss-dropdown dropdown js-single-select">
                                                        <a href="javascript:;" role="button" class="ss-dropdown-toggle-inline fw-normal" data-bs-offset="0,8" data-bs-toggle="dropdown" aria-expanded="false">
                                                            <span class="ss-dropdown-toggle-txt">All Survey Platforms</span>
                                                            <i class="ss-icon-chevron-down"><svg><use xlink:href="#ss-icon-chevron-down"></use></svg></i>
                                                        </a>
                                                        <ul class="dropdown-menu dropdown-menu-end">
                                                            <li>
                                                                <a href="javascript:;" class="dropdown-item active">
                                                                    <span class="dropdown-item-text">All Survey Platforms</span>
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="javascript:;" class="dropdown-item">
                                                                    <span class="dropdown-item-text">Basic Surveys</span>
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="javascript:;" class="dropdown-item">
                                                                    <span class="dropdown-item-text">Enterprise Survey</span>
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="javascript:;" class="dropdown-item">
                                                                    <span class="dropdown-item-text">T.E.A.M Effectiveness</span>
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="javascript:;" class="dropdown-item">
                                                                    <span class="dropdown-item-text">Reference Check</span>
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="javascript:;" class="dropdown-item">
                                                                    <span class="dropdown-item-text">ROI Assessment</span>
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="javascript:;" class="dropdown-item">
                                                                    <span class="dropdown-item-text">360-Degree Survey</span>
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="javascript:;" class="dropdown-item">
                                                                    <span class="dropdown-item-text">Culture 20/20</span>
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="javascript:;" class="dropdown-item">
                                                                    <span class="dropdown-item-text">Daily Question</span>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="ss-setcdr-yc-row">
                                                <div class="ss-setcdr-yc-col">
                                                    <div class="ss-setcdr-yc-box">
                                                        <span class="ss-setcdr-yc-bar bg-secondary"></span>
                                                        <div class="ss-setcdr-yc-box-t">
                                                            <span class="ss-setcdr-yc-box-t-img">
                                                                <span class="lazy-loader">
                                                                    <img class="lazyload" src="images/blank.gif" data-original="images/Basic-Survey.jpg" alt="">
                                                                </span>
                                                            </span>
                                                            <h2 class="h4">Basic Surveys</h2>
                                                            <div class="p2">Standard with Account</div>
                                                        </div>
                                                        <div class="ss-setcdr-yc-box-m">
                                                            <span class="ss-setcdr-yc-free">
                                                                <i class="ss-icon-sticker"><svg><use xlink:href="#ss-icon-sticker"></use></svg></i>
                                                                <span>Free</span>
                                                            </span>
                                                        </div>
                                                        <div class="ss-setcdr-yc-box-b justify-content-center">
                                                            <span>Unlimited Surveys</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="ss-setcdr-yc-col">
                                                    <div class="ss-setcdr-yc-box">
                                                        <span class="ss-setcdr-yc-bar bg-blue"></span>
                                                        <div class="ss-setcdr-yc-box-t">
                                                            <span class="ss-setcdr-yc-box-t-img">
                                                                <span class="lazy-loader">
                                                                    <img class="lazyload" src="images/blank.gif" data-original="images/HR&LD-Survey.jpg" alt="">
                                                                </span>
                                                            </span>
                                                            <h2 class="h4">Enterprise Survey</h2>
                                                            <div class="p2">$7.00/Survey</div>
                                                        </div>
                                                        <div class="ss-setcdr-yc-box-m">
                                                            <div class="ss-spinner horizontal">
                                                                <input type="number" value="2" name="spinner" min="0" step="1">
                                                                <a class="ss-spinner-arrow up">
                                                                    <i class="ss-icon-chevron-up"><svg><use xlink:href="#ss-icon-chevron-up"></use></svg></i>
                                                                </a>
                                                                <a class="ss-spinner-arrow down disabled">
                                                                    <i class="ss-icon-chevron-down"><svg><use xlink:href="#ss-icon-chevron-down"></use></svg></i>
                                                                </a>
                                                            </div>
                                                            <div class="ss-spinner-help">New Survey Credits</div>
                                                            <h3 class="h1">$14.00</h3>
                                                        </div>
                                                        <div class="ss-setcdr-yc-box-b">
                                                            <span>Your Current Credits</span>
                                                            <strong>3</strong>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="ss-setcdr-yc-col">
                                                    <div class="ss-setcdr-yc-box">
                                                        <span class="ss-setcdr-yc-bar bg-purple"></span>
                                                        <div class="ss-setcdr-yc-box-t">
                                                            <span class="ss-setcdr-yc-box-t-img">
                                                                <span class="lazy-loader">
                                                                    <img class="lazyload" src="images/blank.gif" data-original="images/Team-Effectiveness.jpg" alt="">
                                                                </span>
                                                            </span>
                                                            <h2 class="h4">T.E.A.M Effectiveness</h2>
                                                            <div class="p2">$110.00/Team</div>
                                                        </div>
                                                        <div class="ss-setcdr-yc-box-m">
                                                            <div class="ss-spinner horizontal">
                                                                <input type="number" value="1" name="spinner" min="0" step="1">
                                                                <a class="ss-spinner-arrow up">
                                                                    <i class="ss-icon-chevron-up"><svg><use xlink:href="#ss-icon-chevron-up"></use></svg></i>
                                                                </a>
                                                                <a class="ss-spinner-arrow down disabled">
                                                                    <i class="ss-icon-chevron-down"><svg><use xlink:href="#ss-icon-chevron-down"></use></svg></i>
                                                                </a>
                                                            </div>
                                                            <div class="ss-spinner-help">New Survey Credits</div>
                                                            <h3 class="h1">$110.00</h3>
                                                        </div>
                                                        <div class="ss-setcdr-yc-box-b">
                                                            <span>Your Current Credits</span>
                                                            <strong>3</strong>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="ss-setcdr-yc-col">
                                                    <div class="ss-setcdr-yc-box">
                                                        <span class="ss-setcdr-yc-bar bg-sea-green"></span>
                                                        <div class="ss-setcdr-yc-box-t">
                                                            <span class="ss-setcdr-yc-box-t-img">
                                                                <span class="lazy-loader">
                                                                    <img class="lazyload" src="images/blank.gif" data-original="images/Reference-Check.jpg" alt="">
                                                                </span>
                                                            </span>
                                                            <h2 class="h4">Reference Check</h2>
                                                            <div class="p2">$18.00/Survey</div>
                                                        </div>
                                                        <div class="ss-setcdr-yc-box-m">
                                                            <div class="ss-spinner horizontal">
                                                                <input type="number" value="0" name="spinner" min="0" step="1">
                                                                <a class="ss-spinner-arrow up">
                                                                    <i class="ss-icon-chevron-up"><svg><use xlink:href="#ss-icon-chevron-up"></use></svg></i>
                                                                </a>
                                                                <a class="ss-spinner-arrow down disabled">
                                                                    <i class="ss-icon-chevron-down"><svg><use xlink:href="#ss-icon-chevron-down"></use></svg></i>
                                                                </a>
                                                            </div>
                                                            <div class="ss-spinner-help">New Survey Credits</div>
                                                            <h3 class="h1">$0.00</h3>
                                                        </div>
                                                        <div class="ss-setcdr-yc-box-b">
                                                            <span>Your Current Credits</span>
                                                            <strong>159</strong>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="ss-setcdr-yc-col">
                                                    <div class="ss-setcdr-yc-box">
                                                        <span class="ss-setcdr-yc-bar bg-pink-purple"></span>
                                                        <div class="ss-setcdr-yc-box-t">
                                                            <span class="ss-setcdr-yc-box-t-img">
                                                                <span class="lazy-loader">
                                                                    <img class="lazyload" src="images/blank.gif" data-original="images/ROI-Survey.jpg" alt="">
                                                                </span>
                                                            </span>
                                                            <h2 class="h4">ROI Assessment</h2>
                                                            <div class="p2">$40.00/Survey Period</div>
                                                        </div>
                                                        <div class="ss-setcdr-yc-box-m">
                                                            <div class="ss-spinner horizontal">
                                                                <input type="number" value="3" name="spinner" min="0" step="1">
                                                                <a class="ss-spinner-arrow up">
                                                                    <i class="ss-icon-chevron-up"><svg><use xlink:href="#ss-icon-chevron-up"></use></svg></i>
                                                                </a>
                                                                <a class="ss-spinner-arrow down disabled">
                                                                    <i class="ss-icon-chevron-down"><svg><use xlink:href="#ss-icon-chevron-down"></use></svg></i>
                                                                </a>
                                                            </div>
                                                            <div class="ss-spinner-help">New Survey Credits</div>
                                                            <h3 class="h1">$120.00</h3>
                                                        </div>
                                                        <div class="ss-setcdr-yc-box-b">
                                                            <span>Your Current Credits</span>
                                                            <strong>21</strong>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="ss-setcdr-yc-col">
                                                    <div class="ss-setcdr-yc-box">
                                                        <span class="ss-setcdr-yc-bar bg-orange-light"></span>
                                                        <div class="ss-setcdr-yc-box-t">
                                                            <span class="ss-setcdr-yc-box-t-img">
                                                                <span class="lazy-loader">
                                                                    <img class="lazyload" src="images/blank.gif" data-original="images/360-Degree-Survey.jpg" alt="">
                                                                </span>
                                                            </span>
                                                            <h2 class="h4">360-Degree Survey</h2>
                                                            <div class="p2">$85.00/Leader</div>
                                                        </div>
                                                        <div class="ss-setcdr-yc-box-m">
                                                            <div class="ss-spinner horizontal">
                                                                <input type="number" value="6" name="spinner" min="0" step="1">
                                                                <a class="ss-spinner-arrow up">
                                                                    <i class="ss-icon-chevron-up"><svg><use xlink:href="#ss-icon-chevron-up"></use></svg></i>
                                                                </a>
                                                                <a class="ss-spinner-arrow down disabled">
                                                                    <i class="ss-icon-chevron-down"><svg><use xlink:href="#ss-icon-chevron-down"></use></svg></i>
                                                                </a>
                                                            </div>
                                                            <div class="ss-spinner-help">New Survey Credits</div>
                                                            <h3 class="h1">$510.00</h3>
                                                        </div>
                                                        <div class="ss-setcdr-yc-box-b">
                                                            <span>Your Current Credits</span>
                                                            <strong>776</strong>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="ss-setcdr-yc-col">
                                                    <div class="ss-setcdr-yc-box">
                                                        <span class="ss-setcdr-yc-bar bg-hot-pink"></span>
                                                        <div class="ss-setcdr-yc-box-t">
                                                            <span class="ss-setcdr-yc-box-t-img">
                                                                <span class="lazy-loader">
                                                                    <img class="lazyload" src="images/blank.gif" data-original="images/Culture-2020.jpg" alt="">
                                                                </span>
                                                            </span>
                                                            <h2 class="h4">Culture 20/20 ©</h2>
                                                            <div class="p2">$64.50/Participant | $30k if 465+</div>
                                                        </div>
                                                        <div class="ss-setcdr-yc-box-m">
                                                            <div class="ss-spinner horizontal">
                                                                <input type="number" value="1" name="spinner" min="0" step="1">
                                                                <a class="ss-spinner-arrow up">
                                                                    <i class="ss-icon-chevron-up"><svg><use xlink:href="#ss-icon-chevron-up"></use></svg></i>
                                                                </a>
                                                                <a class="ss-spinner-arrow down disabled">
                                                                    <i class="ss-icon-chevron-down"><svg><use xlink:href="#ss-icon-chevron-down"></use></svg></i>
                                                                </a>
                                                            </div>
                                                            <div class="ss-spinner-help">New Survey Credits</div>
                                                            <h3 class="h1">$64.50</h3>
                                                        </div>
                                                        <div class="ss-setcdr-yc-box-b">
                                                            <span>Your Current Credits</span>
                                                            <strong>3</strong>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="ss-setcdr-yc-col">
                                                    <div class="ss-setcdr-yc-box">
                                                        <span class="ss-setcdr-yc-bar bg-dark-brown"></span>
                                                        <div class="ss-setcdr-yc-box-t">
                                                            <span class="ss-setcdr-yc-box-t-img">
                                                                <span class="lazy-loader">
                                                                    <img class="lazyload" src="images/blank.gif" data-original="images/Daily-Question.jpg" alt="">
                                                                </span>
                                                            </span>
                                                            <h2 class="h4">Daily Question</h2>
                                                            <div class="p2">$50.00/50 Surveys</div>
                                                        </div>
                                                        <div class="ss-setcdr-yc-box-m">
                                                            <div class="ss-spinner horizontal">
                                                                <input type="number" value="2" name="spinner" min="0" step="1">
                                                                <a class="ss-spinner-arrow up">
                                                                    <i class="ss-icon-chevron-up"><svg><use xlink:href="#ss-icon-chevron-up"></use></svg></i>
                                                                </a>
                                                                <a class="ss-spinner-arrow down disabled">
                                                                    <i class="ss-icon-chevron-down"><svg><use xlink:href="#ss-icon-chevron-down"></use></svg></i>
                                                                </a>
                                                            </div>
                                                            <div class="ss-spinner-help">New Survey Credits</div>
                                                            <h3 class="h1">$100.00</h3>
                                                        </div>
                                                        <div class="ss-setcdr-yc-box-b">
                                                            <span>Your Current Credits</span>
                                                            <strong>3</strong>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="ss-setcdr-yc-r">
                                            <div class="ss-setcdr-yc-cart">
                                                <div class="ss-setcdr-yc-cart-h">
                                                    <div class="ss-setcdr-yc-cart-h-t">
                                                        <h2 class="h1">$14,497.50</h2>
                                                        <div class="p1">Total After Discount</div>
                                                    </div>
                                                    <div class="ss-setcdr-yc-cart-h-m">
                                                        <div class="p2">Promotional Discount:</div>
                                                        <h3 class="h2">-$170.00</h3>
                                                    </div>
                                                    <div class="ss-setcdr-yc-cart-b">
                                                        <form name="ss-setcdr-yc-promo" class="ss-setcdr-yc-promo" method="post" action="#">
                                                            <div class="ss-setcdr-yc-cart-p">
                                                                <div class="ss-setcdr-yc-cart-p-l">
                                                                    <div class="form-group mb-0">
                                                                        <span class="form-control-wrapper">
                                                                            <input type="text" value="" name="promocode" class="form-control" placeholder="Promo Code">
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                                <div class="ss-setcdr-yc-cart-p-r">
                                                                    <button type="submit" class="btn btn-dark">Add</button>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                                <div class="ss-setcdr-yc-cart-items">
                                                    <div class="ss-setcdr-yc-cart-item">
                                                        <span class="ss-setcdr-yc-cart-item-l">2</span>
                                                        <div class="p2">Enterprise Survey</div>
                                                        <span class="ss-setcdr-yc-cart-item-p">$14.00</span>
                                                    </div>
                                                    <div class="ss-setcdr-yc-cart-item">
                                                        <span class="ss-setcdr-yc-cart-item-l">1</span>
                                                        <div class="p2">T.E.A.M Effectiveness</div>
                                                        <span class="ss-setcdr-yc-cart-item-p">$110.00</span>
                                                    </div>
                                                    <div class="ss-setcdr-yc-cart-item">
                                                        <span class="ss-setcdr-yc-cart-item-l">3</span>
                                                        <div class="p2">ROI Assessment</div>
                                                        <span class="ss-setcdr-yc-cart-item-p">$120.00</span>
                                                    </div>
                                                    <div class="ss-setcdr-yc-cart-item">
                                                        <span class="ss-setcdr-yc-cart-item-l">6</span>
                                                        <div class="p2">360-Degree Survey</div>
                                                        <span class="ss-setcdr-yc-cart-item-p">$510.00</span>
                                                    </div>
                                                    <div class="ss-setcdr-yc-cart-item">
                                                        <span class="ss-setcdr-yc-cart-item-l">1</span>
                                                        <div class="p2">Culture 20/20</div>
                                                        <span class="ss-setcdr-yc-cart-item-p">$64.50</span>
                                                    </div>
                                                    <div class="ss-setcdr-yc-cart-item">
                                                        <span class="ss-setcdr-yc-cart-item-l">2</span>
                                                        <div class="p2">Daily Question</div>
                                                        <span class="ss-setcdr-yc-cart-item-p">$100.00</span>
                                                    </div>
                                                </div>
                                                <hr class="ss-setcdr-yc-cart-sep">
                                                <div class="ss-setcdr-yc-cart-f">
                                                    <a href="#ss-checkout-modal" data-bs-toggle="modal" class="btn btn-primary btn-block">Checkout</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End   [ Your Credits Tab ] -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<?php require_once "modal-checkout.php";?>

<?php require_once "footer.php";?>
