<div id="breadcrumb" class="row">
    <div class="col-md-12">
        <ol class="breadcrumb breadcrumb-arrow">
            <li>
                <a href="javascript:TB.Controller.reload()"><i class="icon pe-7s-date"></i>Termine</a>
            </li>
            <li class="active"><span>Termin erstellen</span></li>
        </ol>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <h3>Neuen Termin erstellen</h3>
    </div>
</div>

<% if ( false === data.isAllowed ) { %>

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-body">
                <h4>Hinweis</h4>
                <p>Das Anlegen von neuen Terminen ist derzeit für das Termin <strong>deaktiviert</strong> worden.</p>
                <h4>Grund</h4>
                <p>Das Team darf nicht mehr als 10 Mitglieder in der Standard Version enthalten.</p>
                <h4>Bitte melde Dich beim Support Team</h4>
                <p>
                    <a class="btn btn-primary" href="<%= TB.Controller.getUrl( 'Content', 'support' ) %>">
                        Zum Support
                    </a>
                </p>
            </div>
        </div>
    </div>
</div>

<% } else { %>

<div class="row">
    <div class="col-md-12">
        <form id="form_new_appointment_other" role="form" method="post">
            <div class="form-group">
                <label for="subject">Grund</label>
                <input type="text"
                       id="subject"
                       name="subject"
                       placeholder="Grund des Treffens"
                       class="form-control"
                       data-validate="required"
                       data-validate-errormsg="Bitte Grund des Trefens angeben."
                />
            </div>
            <div class="form-group">
                <label for="starttime">Startzeit</label>
                <input type="text"
                       id="starttime"
                       name="starttime"
                       placeholder="31.12.2015 12:00"
                       autocomplete="off"
                       class="form-control"
                       data-datetimepicker="true"
                       data-validate="requiredDatetime"
                       data-validate-mintime="<%= new Date().getTime() %>"
                       data-validate-errormsg="Bitte gebe die Startzeit im folgenden Format ein: TT.MM.YYYY SS:MM. Die Startzeit muss in der Zukunft liegen."
                />
            </div>
            <% if ( false === TB.Premium.isPremium() ) {    %>
                <div class="row">
                    <div class="col-md-12">
                        <div class="panel panel-premium">
                            <div class="panel-heading">
                                Premium Funktion <i class="glyphicon glyphicon-star"></i>
                            </div>
                            <div class="panel-body">
                                <p>
                                    Zu- und Absagefristen können nur in der Premium Version von TBuddy individuell gesetzt werden.
                                </p>
                                <p>
                                    Klicke auf den Button um mehr über TBuddy Premium zu erfahren und die Premium Funktionen für das Team freizuschalten.
                                </p>
                                <% if ( false === TB.Env.isNativeMobile() ) {   %>
                                    <p>
                                        <a class="btn btn-premium" href="<%= TB.Controller.getUrl( 'Settings', 'order_premium' ) %>">
                                            Jetzt Premium <i class="glyphicon glyphicon-star"></i>
                                        </a>
                                    </p>
                                <% }    %>
                            </div>
                        </div>
                    </div>
                </div>
            <% } %>
            <div class="form-group">
                <label for="feedback_deadline">Zusagefrist</label>&nbsp;<span class="span-premium"><i class="glyphicon glyphicon-star"></i></span><br />
                <small>Gibt an, bis wieviel Minuten vor Terminstart das Gruppenmitglied zu- oder absagen kann. Gilt nicht für Coaches und Co-Coaches.</small>
                <div class="input-group">
                    <input type="text"
                           name="feedback_deadline"
                           id="feedback_deadline"
                           class="form-control"
                           data-validate="requiredNumber"
                           data-minvalue="0"
                           data-validate-errormsg="Die Zusagefrist muss mindestens 0 sein."
                           value="0"
                           <%= false === TB.Premium.isPremium() ? 'disabled="disabled"' : '' %>
                           <%= false === TB.Premium.isPremium() ? 'autocomplete="off"' : '' %>
                    />
                    <span class="input-group-addon">Minuten</span>
                </div>
            </div>
            <div class="form-group">
                <label for="feedback_deadline_notice">Hinweistext nach Fristablauf</label>&nbsp;<span class="span-premium"><i class="glyphicon glyphicon-star"></i></span><br />
                <small>Wird angezeigt, wenn jemand nach Firstablauf, zu- oder absagen möchte.</small>
                <input type="text"
                       name="feedback_deadline_notice"
                       id="feedback_deadline_notice"
                       class="form-control"
                       value="Die Zusagefrist für diesen Termin ist abgelaufen. Bitte melde dich beim Coach persönlich ab."
                        <%= false === TB.Premium.isPremium() ? 'disabled="disabled"' : '' %>
                        <%= false === TB.Premium.isPremium() ? 'autocomplete="off"' : '' %>
                />
            </div>
            <div class="form-group">
                <label for="duration">Dauer</label>
                <div class="input-group">
                    <input type="text"
                           name="duration"
                           id="duration"
                           class="form-control"
                           data-validate="requiredNumber"
                           data-minvalue="1"
                           data-validate-errormsg="Bitte Dauer von mindestens 1 Minute angeben."
                           value="60"
                    />
                    <span class="input-group-addon">Minuten</span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <label class="for-custom-radio" for="frequency">Häufigkeit</label>
                        <label class="radiochecklabel radio-inline">
                            <div>
                                <input class="radiocheck"
                                       type="radio"
                                       name="frequency"
                                       value="single"
                                       checked="checked"
                                />
                                Einmaliger Termin
                                <div class="check">
                                    <div class="inside"></div>
                                </div>
                            </div>
                        </label>
                        <label class="radiochecklabel radio-inline">
                            <div>
                                <input class="radiocheck"
                                       type="radio"
                                       name="frequency"
                                       value="serial"
                                />
                                Serientermin&nbsp;<span class="span-premium"><i class="glyphicon glyphicon-star"></i></span>
                                <div class="check">
                                    <div class="inside"></div>
                                </div>
                            </div>
                        </label>
                    </div>
                </div>
            </div>
            <div data-id="frequency-serial-details" style="display:none">
                <% if ( false === TB.Premium.isPremium() ) {    %>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="panel panel-premium">
                                <div class="panel-heading">
                                    Premium Funktion <i class="glyphicon glyphicon-star"></i>
                                </div>
                                <div class="panel-body">
                                    <p>
                                        Das komfortable Anlegen von Serienterminen ist nur in der Premium Version verfügbar.
                                    </p>
                                    <p>
                                        Klicke auf den Button um mehr über TBuddy Premium zu erfahren und die Premium Funktionen für das Team freizuschalten.
                                    </p>
                                    <p>
                                        <a class="btn btn-premium" href="<%= TB.Controller.getUrl( 'Settings', 'order_premium' ) %>">
                                            Jetzt Premium <i class="glyphicon glyphicon-star"></i>
                                        </a>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                <% } else {     %>
                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-12">
                                <label for="frequency-span">Wird wiederholt</label>
                            </div>
                            <div class="col-md-3">
                                <label class="radiochecklabel radio-inline">
                                    <div>
                                        <input class="radiocheck"
                                               type="radio"
                                               name="frequency-span"
                                               value="daily"
                                        />
                                        Täglich
                                        <div class="check">
                                            <div class="inside"></div>
                                        </div>
                                    </div>
                                </label>
                            </div>
                            <div class="col-md-3">
                                <label class="radiochecklabel radio-inline">
                                    <div>
                                        <input class="radiocheck"
                                               type="radio"
                                               name="frequency-span"
                                               value="weekly"
                                               checked="checked"
                                        />
                                        Wöchentlich
                                        <div class="check">
                                            <div class="inside"></div>
                                        </div>
                                    </div>
                                </label>
                            </div>
                            <div class="col-md-3">
                                <label class="radiochecklabel radio-inline">
                                    <div>
                                        <input class="radiocheck"
                                               type="radio"
                                               name="frequency-span"
                                               value="monthly"
                                        />
                                        Monatlich
                                        <div class="check">
                                            <div class="inside"></div>
                                        </div>
                                    </div>
                                </label>
                            </div>
                            <div class="col-md-3">
                                <label class="radiochecklabel radio-inline">
                                    <div>
                                        <input class="radiocheck"
                                               type="radio"
                                               name="frequency-span"
                                               value="annually"
                                        />
                                        Jährlich
                                        <div class="check">
                                            <div class="inside"></div>
                                        </div>
                                    </div>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="frequency-count">Anzahl Wiederholungen</label>
                                <select class="form-control" name="frequency-count">
                                    <% for ( var fqc = 1; fqc < 13; fqc++ ) {   %>
                                    <option value="<%= fqc %>"><%= fqc %></option>
                                    <% }    %>
                                </select>
                            </div>
                        </div>
                    </div>
                 <% }    %>
             </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        <label for="subject">Ort (Optional)</label>
                        <input type="text"
                               name="location"
                               id="location"
                               class="form-control"/>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="comment">Kommentar</label>
                <textarea
                        id="comment"
                        name="comment"
                        placeholder="Beliebiger Kommentar (optional)"
                        class="form-control"
                ></textarea>
            </div>
            <div class="form-group">
                <div class="row">
                    <div class="col-md-6 col-sm-12">
                        <button type="button"
                                id="btn_appointment_save_other_cancel"
                                class="btn btn-primary btn-block">
                            Abbrechen
                        </button>
                    </div>
                    <div class="col-md-6 col-sm-12">
                        <button type="submit"
                                id="btn_appointment_save_other"
                                data-style="zoom-in"
                                data-size="l"
                                class="btn btn-primary btn-block ladda-button">
                            Termin erstellen
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<% }    %>