<section class="content-header">
    <h1>
        Billing
        <small>manage your billing &amp; licensing</small>
    </h1>
</section>
<section class="content">
    <div class="callout callout-warning" ng-if="subscription && subscription.cancelled">
        <h4><i class="fa fa-warning"></i> Canceled</h4>
        The subscription to this organization has been canceled.
    </div>
    <div class="callout callout-warning" ng-if="subscription && subscription.markedForCancel">
        <h4><i class="fa fa-warning"></i> Pending Cancellation</h4>
        <p>
            The subscription to this organization has been marked for cancellation at the end of the
            current billing period.
        </p>
        <button type="button" class="btn btn-default btn-flat" ng-click="reinstate()">
            Reinstate Plan
        </button>
    </div>
    <div class="box box-default">
        <div class="box-header with-border">
            <h3 class="box-title">Plan</h3>
        </div>
        <div class="box-body">
            <div class="row">
                <div class="col-sm-6">
                    <dl ng-if="selfHosted">
                        <dt>Name</dt>
                        <dd>{{plan.name || '-'}}</dd>
                        <dt>Expiration</dt>
                        <dd ng-if="loading">
                            Loading...
                        </dd>
                        <dd ng-if="!loading && expiration">
                            {{expiration | date: 'medium'}}
                        </dd>
                        <dd ng-if="!loading && !expiration">
                            Never expires
                        </dd>
                    </dl>
                    <dl ng-if="!selfHosted">
                        <dt>Name</dt>
                        <dd>{{plan.name || '-'}}</dd>
                        <dt>Total Seats</dt>
                        <dd>{{plan.seats || '-'}}</dd>
                    </dl>
                </div>
                <div class="col-sm-6" ng-if="!selfHosted">
                    <dl>
                        <dt>Status</dt>
                        <dd>
                            <span style="text-transform: capitalize;">{{(subscription && subscription.status) || '-'}}</span>
                            <span ng-if="subscription.markedForCancel">- marked for cancellation</span>
                        </dd>
                        <dt>Next Charge</dt>
                        <dd>{{nextInvoice ? ((nextInvoice.date | date: 'mediumDate') + ', ' + (nextInvoice.amount | currency:'$')) : '-'}}</dd>
                    </dl>
                </div>
            </div>
            <div class="row" ng-if="!selfHosted && !noSubscription">
                <div class="col-md-6">
                    <strong>Details</strong>
                    <div ng-show="loading">
                        Loading...
                    </div>
                    <div class="table-responsive" style="margin: 0;" ng-show="!loading">
                        <table class="table" style="margin: 0;">
                            <tbody>
                                <tr ng-repeat="item in subscription.items">
                                    <td>
                                        {{item.name}} {{item.qty > 1 ? '&times;' + item.qty : ''}}
                                        @ {{item.amount | currency:'$'}} /{{item.interval}}
                                    </td>
                                    <td class="text-right">{{(item.qty * item.amount) | currency:'$'}} /{{item.interval}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="box-footer" ng-if="!selfHosted">
            <button type="button" class="btn btn-default btn-flat" ng-click="changePlan()">
                Change Plan
            </button>
            <button type="button" class="btn btn-default btn-flat" ng-click="cancel()"
                    ng-if="!noSubscription && !subscription.cancelled && !subscription.markedForCancel">
                Cancel Plan
            </button>
            <button type="button" class="btn btn-default btn-flat" ng-click="reinstate()"
                    ng-if="!noSubscription && subscription.markedForCancel">
                Reinstate Plan
            </button>
            <button type="button" class="btn btn-default btn-flat" ng-click="license()"
                    ng-if="!subscription.cancelled">
                Download License
            </button>
        </div>
        <div class="box-footer" ng-if="selfHosted">
            <button type="button" class="btn btn-default btn-flat" ng-click="updateLicense()">
                Update License
            </button>
            <a href="https://vault.bitwarden.com" class="btn btn-default btn-flat" target="_blank">
                Manage Billing
            </a>
        </div>
    </div>
    <div class="box box-default">
        <div class="box-header with-border">
            <h3 class="box-title">User Seats</h3>
        </div>
        <div class="box-body">
            <div ng-show="loading">
                Loading...
            </div>
            <div ng-show="!loading">
                Your plan currently has a total of <b>{{plan.seats}}</b> seats.
            </div>
        </div>
        <div class="box-footer" ng-if="!selfHosted && !noSubscription && canAdjustSeats">
            <button type="button" class="btn btn-default btn-flat" ng-click="adjustSeats(true)">
                Add Seats
            </button>
            <button type="button" class="btn btn-default btn-flat" ng-click="adjustSeats(false)">
                Remove Seats
            </button>
        </div>
    </div>
    <div class="box box-default" ng-if="storage && !selfHosted">
        <div class="box-header with-border">
            <h3 class="box-title">Storage</h3>
        </div>
        <div class="box-body">
            <p>
                Your plan has a total of {{storage.maxGb}} GB of encrypted file storage.
                You are currently using {{storage.currentName}}.
            </p>
            <div class="progress" style="margin: 0;">
                <div class="progress-bar progress-bar-info" role="progressbar"
                     aria-valuenow="{{storage.percentage}}" aria-valuemin="0" aria-valuemax="1"
                     style="min-width: 50px; width: {{storage.percentage}}%;">
                    {{storage.percentage}}%
                </div>
            </div>
        </div>
        <div class="box-footer">
            <button type="button" class="btn btn-default btn-flat" ng-click="adjustStorage(true)">
                Add Storage
            </button>
            <button type="button" class="btn btn-default btn-flat" ng-click="adjustStorage(false)">
                Remove Storage
            </button>
        </div>
    </div>
    <div class="box box-default" ng-if="!selfHosted">
        <div class="box-header with-border">
            <h3 class="box-title">Payment Method</h3>
        </div>
        <div class="box-body">
            <div ng-show="loading">
                Loading...
            </div>
            <div ng-show="!loading && !paymentSource">
                <i class="fa fa-credit-card"></i> No payment method on file.
            </div>
            <div ng-show="!loading && paymentSource">
                <div class="callout callout-warning" ng-if="paymentSource.type === 1 && paymentSource.needsVerification">
                    <h4><i class="fa fa-warning"></i> You must verify your bank account</h4>
                    <p>
                        We have made two micro-deposits to your bank account (it may take 1-2 business days to show up).
                        Enter these amounts to verify the bank account. Failure to verify the bank account will result in a
                        missed payment and your organization being disabled.
                    </p>
                    <button class="btn btn-default btn-flat" ng-click="verifyBank()">Verify Now</button>
                </div>
                <i class="fa" ng-class="{'fa-credit-card': paymentSource.type === 0,
                   'fa-university': paymentSource.type === 1, 'fa-paypal fa-fw text-blue': paymentSource.type === 2}"></i>
                {{paymentSource.description}}
            </div>
        </div>
        <div class="box-footer">
            <button type="button" class="btn btn-default btn-flat" ng-click="changePayment()">
                {{ paymentSource ? 'Change Payment Method' : 'Add Payment Method' }}
            </button>
        </div>
    </div>
    <div class="box box-default" ng-if="!selfHosted">
        <div class="box-header with-border">
            <h3 class="box-title">Charges</h3>
        </div>
        <div class="box-body">
            <div ng-show="loading">
                Loading...
            </div>
            <div ng-show="!loading && !charges.length">
                No charges.
            </div>
            <div class="table-responsive" ng-show="charges.length">
                <table class="table">
                    <tbody>
                        <tr ng-repeat="charge in charges">
                            <td style="width: 30px">
                                <a href="#" stop-click ng-click="viewInvoice(charge)" title="Invoice">
                                    <i class="fa fa-file-pdf-o"></i>
                                </a>
                            </td>
                            <td style="width: 200px">
                                {{charge.date | date: 'mediumDate'}}
                            </td>
                            <td style="min-width: 150px">
                                {{charge.paymentSource}}
                            </td>
                            <td style="width: 150px; text-transform: capitalize;">
                                {{charge.status}}
                            </td>
                            <td class="text-right" style="width: 150px;">
                                {{charge.amount | currency:'$'}}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="box-footer">
            Note: Any charges will appear on your statement as <b>BITWARDEN</b>.
        </div>
    </div>
</section>
