<?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">Invoicing</a>
                            </li>
                            <li class="nav-item">
                                <a href="settings-billing-bill-estimate.php" class="nav-link text-uppercase active">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>
                                            <?php /* ?> <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> <?php */ ?>
                                        </div>
                                        <div class="ss-setcdr-ph-body">
                                            
                                            <div class="d-flex mb-5">
                                                <div class="ss-apm-esl w-1 flex-grow-1">
                                                    <h4 class="h3">EDA Survey Licence</h4>
                                                    <div class="ss-apm-esl-row p3 m-0">
                                                        <div class="ss-apm-esl-employee">
                                                            <i class="ss-icon-users"><svg><use xlink:href="#ss-icon-users"></use></svg></i>
                                                            <div class="fw-600">1 to 49 Employees</div>
                                                        </div>
                                                        <div class="ss-apm-esl-desc">
                                                            <strong class="text-secondary fw-bold">Monthly Plan</strong>
                                                            <div class="fst-italic">Unlimited Access to Current Available Survey Platforms</div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="d-flex flex-column align-items-end ms-4">
                                                    <div class="ss-apm-bp-l">
                                                        <strong>June 11, 2020</strong>
                                                        <i class="ss-icon-arrow-long-right"><svg><use xlink:href="#ss-icon-arrow-long-right"></use></svg></i>
                                                        <strong>June 11, 2020</strong>
                                                    </div>
                                                    <a class="btn btn-danger-100 btn-block text-uppercase fw-bold mt-4">DUE MAY 27, 2020</a>
                                                </div>
                                            </div>

                                            <?php /* ?><div class="ss-setblg-incl">
                                                <h5 class="h5 fw-bold m-0">Included</h5>
                                                <div class="ss-setblg-incl-row">
                                                    <div class="ss-setblg-incl-col">
                                                        <div class="ss-setblg-incl-item">
                                                            <span class="ss-setblg-incl-icon bg-secondary-200 text-secondary">
                                                                <i class="ss-icon-check-outline"><svg><use xlink:href="#ss-icon-check-outline"></use></svg></i>
                                                            </span>
                                                            <span class="ss-setblg-incl-txt">T.E.A.M. Effectiveness (Unlimited)</span>
                                                        </div>
                                                        <div class="ss-setblg-incl-item">
                                                            <span class="ss-setblg-incl-icon bg-secondary-200 text-secondary">
                                                                <i class="ss-icon-check-outline"><svg><use xlink:href="#ss-icon-check-outline"></use></svg></i>
                                                            </span>
                                                            <span class="ss-setblg-incl-txt">Culture 20/20 Survey (Unlimited)</span>
                                                        </div>
                                                        <div class="ss-setblg-incl-item">
                                                            <span class="ss-setblg-incl-icon bg-secondary-200 text-secondary">
                                                                <i class="ss-icon-check-outline"><svg><use xlink:href="#ss-icon-check-outline"></use></svg></i>
                                                            </span>
                                                            <span class="ss-setblg-incl-txt">Basic Survey (Unlimited)</span>
                                                        </div>
                                                        <div class="ss-setblg-incl-item">
                                                            <span class="ss-setblg-incl-icon bg-secondary-200 text-secondary">
                                                                <i class="ss-icon-check-outline"><svg><use xlink:href="#ss-icon-check-outline"></use></svg></i>
                                                            </span>
                                                            <span class="ss-setblg-incl-txt">HR & LD Survey (Unlimitied)</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="ss-setblg-incl-row">
                                                    <div class="ss-setblg-incl-col">
                                                        <div class="ss-setblg-incl-item">
                                                            <span class="ss-setblg-incl-icon">
                                                                <i class="ss-icon-minus"><svg><use xlink:href="#ss-icon-minus"></use></svg></i>
                                                            </span>
                                                            <span class="ss-setblg-incl-txt">360-Degree Survey</span>
                                                        </div>
                                                        <div class="ss-setblg-incl-item">
                                                            <span class="ss-setblg-incl-icon">
                                                                <i class="ss-icon-minus"><svg><use xlink:href="#ss-icon-minus"></use></svg></i>
                                                            </span>
                                                            <span class="ss-setblg-incl-txt">Return-on-Investment Survey</span>
                                                        </div>
                                                        <div class="ss-setblg-incl-item">
                                                            <span class="ss-setblg-incl-icon">
                                                                <i class="ss-icon-minus"><svg><use xlink:href="#ss-icon-minus"></use></svg></i>
                                                            </span>
                                                            <span class="ss-setblg-incl-txt">Daily Questions</span>
                                                        </div>
                                                        <div class="ss-setblg-incl-item">
                                                            <span class="ss-setblg-incl-icon">
                                                                <i class="ss-icon-minus"><svg><use xlink:href="#ss-icon-minus"></use></svg></i>
                                                            </span>
                                                            <span class="ss-setblg-incl-txt">Online Reference Checks</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div> <?php */ ?>

                                            <hr class="opacity-10">
                                            <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 Invoice</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-pd-g">
                                    <h2 class="h4 mb-5">Your License Details</h2>
                                    <div class="ss-setblg-bp align-items-center justify-content-between">
                                        <div class="d-flex">
                                            <div class="ss-apm-sp-r bordered">
                                                <div class="ss-apm-sp-h">
                                                    <h2 class="h2 m-0 lh-1">Small</h2>
                                                    <div class="p3 fw-bold text-primary mt-1">1-49 Employees</div>
                                                </div>
                                                <div class="ss-apm-sp-price lh-1">6,000/Yr</div>
                                                <a class="btn btn-light btn-sm">Change Plan</a>
                                            </div>
                                        </div>
                                        <div class="ss-setblg-bp-l flex-shrink-0 flex-grow-0 w-auto">
                                            <strong class="sm">Billed Monthly</strong>
                                            <div class="ss-apm-bp">
                                                <h6 class="h6 text-body text-uppercase">Subsription Period</h6>
                                                <div class="ss-apm-bp-row">
                                                    <div class="ss-apm-bp-l">
                                                        <strong>June 11, 2020</strong>
                                                        <i class="ss-icon-arrow-long-right text-body"><svg><use xlink:href="#ss-icon-arrow-long-right"></use></svg></i>
                                                        <strong>June 11, 2020</strong>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="d-flex justify-content-end">
                                    <div class="ss-setblg-bp-r">
                                        <a href="#" class="btn btn-danger">Cancel Subscription</a>
                                        <div class="p3 text-gray-300 text-end">Terminate subscription for the period of 11/15/2020 to 11/15/2021</div>
                                    </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";?>
