<%= tmpl( 'tpl_settings_tab', { data : { activeTab : 'premium' } } ) %>

<div style="display: <%= ( data.activeTab && data.activeTab === 'premium' ) ? 'block' : 'none' %>">

    <h4>1.) Wähle das passende Premium Paket für dein Team</h4>

    <div class="row">
        <div class="col-md-4">
            <div class="panel panel-premium panel-pricetable">
                <div class="panel-heading"><h3 class="text-center">Premium25 <i class="glyphicon glyphicon-star"></i></h3></div>
                <div class="panel-body text-center">
                    <p class="lead">
                        <%= TB.Premium.getPrice( TB.Premium.PACKAGE_PREMIUM25 ) %> <small>pro Monat</small>
                    </p>
                    <small>für das <strong>gesamte</strong> Team</small>
                </div>
                <ul class="list-group list-group-flush text-center">
                    <li class="list-group-item <%= ( data.numProfiles > TB.Premium.getMaxAllowedBuddies( TB.Premium.PACKAGE_PREMIUM25 ) ) ? 'text-danger' : '' %>">
                        Bis zu <strong>25</strong> Mitglieder
                    </li>
                    <li class="list-group-item">Standard Funktionen</li>
                    <li class="list-group-item"><strong>Alle Premium Funktionen</strong></li>
                </ul>
                <div class="panel-footer">
                    <button class="btn btn-lg btn-block btn-premium <%= ( data.selectedPremiumId == TB.Premium.PACKAGE_PREMIUM25 ) ? 'btn-premium-selected' : '' %>"
                            data-premium-id="<%= TB.Premium.PACKAGE_PREMIUM25 %>"
                            data-type="btn-premium-select"
                    <%= ( data.numProfiles > TB.Premium.getMaxAllowedBuddies( TB.Premium.PACKAGE_PREMIUM25  ) ) ? 'disabled' : '' %>
                    >

                    <span class="btn-premium-selected-text"  style="display: <%= ( data.selectedPremiumId == TB.Premium.PACKAGE_PREMIUM25 ) ? 'inline-block' : 'none' %>">
                            <i class="glyphicon glyphicon-ok"></i>
                        </span>
                    <span class="btn-premium-select-text" style="display: <%= ( data.selectedPremiumId == TB.Premium.PACKAGE_PREMIUM25 ) ? 'none' : 'inline-block' %>">
                            <%= ( data.numProfiles > TB.Premium.getMaxAllowedBuddies( TB.Premium.PACKAGE_PREMIUM25  ) ) ? 'Gruppe zu groß' : 'Auswählen' %>
                    </span>

                    </button>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-premium panel-pricetable">
                <div class="panel-heading"><h3 class="text-center">Premium50 <i class="glyphicon glyphicon-star"></i></h3></div>
                <div class="panel-body text-center">
                    <p class="lead">
                        <%= TB.Premium.getPrice( TB.Premium.PACKAGE_PREMIUM50 ) %> <small>pro Monat</small>
                    </p>
                    <small>für das <strong>gesamte</strong> Team</small>
                </div>
                <ul class="list-group list-group-flush text-center">
                    <li class="list-group-item <%= ( data.numProfiles > TB.Premium.getMaxAllowedBuddies( TB.Premium.PACKAGE_PREMIUM50  ) ) ? 'text-danger' : '' %>">
                        Bis zu <strong>50</strong> Mitglieder
                    </li>
                    <li class="list-group-item">Standard Funktionen</li>
                    <li class="list-group-item"><strong>Alle Premium Funktionen</strong></li>
                </ul>
                <div class="panel-footer">
                    <button class="btn btn-lg btn-block btn-premium <%= ( data.selectedPremiumId == TB.Premium.PACKAGE_PREMIUM50 ) ? 'btn-premium-selected' : '' %>"
                            data-premium-id="<%= TB.Premium.PACKAGE_PREMIUM50 %>"
                            data-type="btn-premium-select"
                    <%= ( data.numProfiles > TB.Premium.getMaxAllowedBuddies( TB.Premium.PACKAGE_PREMIUM50 ) ) ? 'disabled' : '' %>
                    >

                    <span class="btn-premium-selected-text"  style="display: <%= ( data.selectedPremiumId == TB.Premium.PACKAGE_PREMIUM50 ) ? 'inline-block' : 'none' %>">
                            <i class="glyphicon glyphicon-ok"></i>
                        </span>
                    <span class="btn-premium-select-text" style="display: <%= ( data.selectedPremiumId == TB.Premium.PACKAGE_PREMIUM50 ) ? 'none' : 'inline-block' %>">
                            <%= ( data.numProfiles > TB.Premium.getMaxAllowedBuddies( TB.Premium.PACKAGE_PREMIUM50  ) ) ? 'Nicht verfügbar' : 'Auswählen' %>
                    </span>

                    </button>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-premium panel-pricetable">
                <div class="panel-heading"><h3 class="text-center">Premium100 <i class="glyphicon glyphicon-star"></i></h3></div>
                <div class="panel-body text-center">
                    <p class="lead">
                        <%= TB.Premium.getPrice( TB.Premium.PACKAGE_PREMIUM100 ) %> <small>pro Monat</small>
                    </p>
                    <small>für das <strong>gesamte</strong> Team</small>
                </div>
                <ul class="list-group list-group-flush text-center">
                    <li class="list-group-item <%= ( data.numProfiles > TB.Premium.getMaxAllowedBuddies( TB.Premium.PACKAGE_PREMIUM100 ) ) ? 'text-danger' : '' %>">
                        Bis zu <strong>100</strong> Mitglieder
                    </li>
                    <li class="list-group-item"><i class="icon-ok text-danger"></i> Standard Funktionen</li>
                    <li class="list-group-item"><i class="icon-ok text-danger"></i> <strong>Alle Premium Funktionen</strong></li>
                </ul>
                <div class="panel-footer">
                    <button class="btn btn-lg btn-block btn-premium <%= ( data.selectedPremiumId == TB.Premium.PACKAGE_PREMIUM100 ) ? 'btn-premium-selected' : '' %>"
                            data-premium-id="<%= TB.Premium.PACKAGE_PREMIUM100 %>"
                            data-type="btn-premium-select"
                    <%= ( data.numProfiles > TB.Premium.getMaxAllowedBuddies( TB.Premium.PACKAGE_PREMIUM100 ) ) ? 'disabled' : '' %>
                    >
                    <span class="btn-premium-selected-text"  style="display: <%= ( data.selectedPremiumId == TB.Premium.PACKAGE_PREMIUM100 ) ? 'inline-block' : 'none' %>">
                                <i class="glyphicon glyphicon-ok"></i>
                            </span>
                    <span class="btn-premium-select-text" style="display: <%= ( data.selectedPremiumId == TB.Premium.PACKAGE_PREMIUM100 ) ? 'none' : 'inline-block' %>">
                                <%= ( data.numProfiles > TB.Premium.getMaxAllowedBuddies( TB.Premium.PACKAGE_PREMIUM100  ) ) ? 'Nicht verfügbar' : 'Auswählen' %>
                        </span>
                    </button>
                </div><!--/panel-footer-->
            </div><!--/panel-->
        </div><!--/col-->
    </div><!--/row-->

    <h4>2. Von welchem Paypal Konto dürfen wir den monatlichen Betrag abbuchen?</h4>

    <form>
        <!--
        <div id="dropin-container"></div>
        -->
        <div id="paypal-container"></div>
    </form>

    <div class="panel" style="margin-top: 12px;margin-bottom: 36px;">
        <div class="panel-body">
            <span class="primary-color"><i class="fa fa-info-circle"></i></span> Klicke auf den PayPal Button und wähle das Konto aus, von dem wir den monatlichen Betrag abbuchen dürfen.
        </div>
    </div>

    <h4>3. Bestellung bestätigen und das Premium Paket steht sofort zur Verfügung!</h4>

    <div class="panel panel-default">
        <div class="panel-heading">
            Zusammenfassung
        </div>
        <div class="panel-body">
            <h4>Rechnungsempfänger</h4>
            <form role="form" method="post" id="form_billing_address">
                <input type="hidden" name="id" value="<%= data.team.id %>" />
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="company_name">Firma (optional)</label>
                            <input type="text"
                                   id="company_name"
                                   name="company_name"
                                   placeholder="Firmenname (ggf. Sponsor)"
                                   class="form-control"
                            />
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="tax_id">Steuernummer (optional)</label>
                            <input type="text"
                                   id="tax_id"
                                   name="tax_id"
                                   placeholder="Steuernummer oder -ID"
                                   class="form-control"
                            />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="first_name">Vorname</label>
                            <input type="text"
                                   id="first_name"
                                   name="first_name"
                                   placeholder="Vorname"
                                   value="<%= data.profile.first_name ? data.profile.first_name : '' %>"
                                   class="form-control"
                                   data-validate="required"
                                   data-validate-errormsg="Bitte den Vornamen angeben."
                            />
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="last_name">Nachname</label>
                            <input type="text"
                                   id="last_name"
                                   name="last_name"
                                   placeholder="Nachname"
                                   value="<%= data.profile.last_name ? data.profile.last_name : '' %>"
                                   class="form-control"
                                   data-validate="required"
                                   data-validate-errormsg="Bitte den Nachnamen angeben."
                            />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="street">Straße</label>
                            <input type="text"
                                   name="street"
                                   id="street"
                                   placeholder="Straße und Hausnummer"
                                   value="<%= data.profile.street ? data.profile.street : '' %>"
                                   class="form-control"
                                   data-validate="required"
                                   data-validate-errormsg="Bitte Straße und Hausnummer angeben."
                            />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="zip_code">PLZ</label>
                            <input type="text"
                                   name="zip_code"
                                   id="zip_code"
                                   placeholder="PLZ"
                                   value="<%= data.profile.zip_code ? data.profile.zip_code : '' %>"
                                   class="form-control"
                                   data-validate="required"
                                   data-validate-errormsg="Bitte Postleitzahl angeben."
                            />
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class="form-group">
                            <label for="city">Ort</label>
                            <input type="text"
                                   name="city"
                                   id="city"
                                   placeholder="Ort"
                                   class="form-control"
                                   value="<%= data.profile.city ? data.profile.city : '' %>"
                                   data-validate="required"
                                   data-validate-errormsg="Bitte den Ort angeben."
                            />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="text"
                                   id="email"
                                   name="email"
                                   value="<%= data.account.email ? data.account.email : '' %>"
                                   placeholder="Email vom Rechnungsempfänger"
                                   class="form-control"
                                   data-validate="email"
                                   data-validate-errormsg="Bitte korrekte Email Adresse eingeben."
                            />
                        </div>
                    </div>
                </div>
            </form>
            <hr />
            <div data-id="premium-summary-container">
                <%= tmpl( 'tpl_settings_premium_order_summary', { data: data } ) %>
            </div>
            <hr />
            <div class="row">
                <div class="col-xs-12">
                    <div class="checkbox2 checkbox-primary">
                        <input id="billing-premium-agb"
                               data-id="checkbox-billing-premium-agb"
                               type="checkbox"
                        />
                        <label for="billing-premium-agb">
                            Hiermit akzeptiere ich die <a href="http://tbuddy.de/agb/" target="_blank">AGB</a>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12">
            <button data-id="btn-create-premium"
                    data-style="zoom-in"
                    data-size="l"
                    class="btn btn-block btn-lg btn-premium ladda-button">
                Kostenpflichtig bestellen
            </button>
        </div>
    </div>

</div>