<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>Übersicht</span></li>
        </ol>
    </div>
</div>
<div class="row">
    <div class="col-xs-10">
        <h3>Anstehende Termine</h3>
    </div>
    <div class="col-xs-2">
        <h3>
            <button id="btn-coach-help"
                    class="btn btn-link pull-right coach-help">
                <i class="glyphicon glyphicon-question-sign"></i>&nbsp;Hilfe
            </button>
        </h3>
    </div>
</div>
<div class="row">

    <div class="col-md-12">


        <%
        var today = moment().format("YYYYMMDD"), oldCount = 0, currentAppointments = [], oldAppointments = [], inOldAppointments = false;

        if( data.appointments && data.appointments.length > 0 ) {

            for ( var i = 0; i < data.appointments.length; i++ ) {

                if ( data.appointments[i].starttime < TB.Utils.getUnixTimestamp() &&
                     moment(data.appointments[i].starttime*1000).format("YYYYMMDD") != today ) {

                    oldAppointments.push( data.appointments[i] );

                } else {

                    currentAppointments.push( data.appointments[i] );

                }
            }
        }

        %>

        <div class="specialContentBig">

            <div class="panel panel-default">
                <div class="panel-body">

                    <table class="table table-striped table-appointment">
                        <thead>
                        <tr>
                            <th>Wann</th>
                            <th>Was</th>
                            <th>Wo</th>
                            <th>Dein Status</th>
                        </tr>
                        </thead>
                        <tbody>

                        <% if ( currentAppointments && currentAppointments.length > 0 ) { %>

                        <% for ( var i = 0; i < currentAppointments.length; i++ ) { %>

                        <%
                        var numAccepted = 0,
                        numDeclined = 0,
                        numMaybe = 0,
                        isMatch = currentAppointments[i].subject ? false : true,
                        isOver = ( currentAppointments[i].starttime < TB.Utils.getUnixTimestamp() ),
                        d = data,
                        ownStateCode = null;
                        ownState = '<span class="label label-' + ((isOver) ? 'normal' : 'danger' ) + '">Noch offen</span>',
                        ownStateText = '';

                        $.each( data[ 'attendees_' + currentAppointments[i].id ] , function( i, v ) {
                        switch( v.status ) {
                        case 'accepted':
                        numAccepted++;
                        break;

                        case 'declined':
                        numDeclined++;
                        break;
                        }

                        if ( v.profile_id == data.profile.id ) {
                        ownStateCode = v.status;
                        }

                        } );
                        %>

                        <tr>
                            <td data-title="Beginn">
                                <a type="button"
                                   href="#/c=Appointment&a=detail&appointment_id=<%= currentAppointments[i].id %>">
                                    <%= TB.Utils.getDatetimeStringFromUnixTimestamp( currentAppointments[i].starttime ) %>
                                </a>
                            </td>
                            <td data-title="Was">
                                <% if ( isMatch ) { %>
                                <span class="label label-primary"><%= currentAppointments[i].home %></span> : <span class="label label-primary"><%= currentAppointments[i].guest %></span>
                                <% } else {     %>
                                <%= currentAppointments[i].subject %>
                                <% }    %>
                            </td>
                            <td data-title="Wo">
                                <%= TB.GUI.getValue( currentAppointments[i].location, 'Kein Ort angegeben' ) %>
                            </td>
                            <td data-title="Dein Status">
                                <span class="label label-success" data-accepted-label-id="<%= currentAppointments[i].id %>"><%= numAccepted %></span>
                                <div class="btn-group" data-toggle="buttons">
                                    <label class="lada btn <%= ( ownStateCode == 'accepted' ) ? 'btn-success active' : 'btn-disabled' %> <%= ( inOldAppointments || !TB.Client.can( TB.ACL.RIGHTS.APPOINTMENT_SETATTENDANCESTATUS ) ) ? 'disabled' : '' %>"
                                           data-style="zoom-in"
                                           data-size="l"
                                           data-label-type="accept" data-appointment-id="<%= currentAppointments[i].id %>">
                                        <input type="radio" name="status" value="accepted" id="status_accepted" autocomplete="off"
                                        <%= ( ownStateCode == 'accepted' ) ? 'checked="checked"' : '' %>
                                        />
                                        <span class="glyphicon glyphicon-thumbs-up"></span>
                                    </label>
                                    <label class="lada btn <%= ( ownStateCode == 'declined') ? 'btn-danger active' : 'btn-disabled' %> <%= ( inOldAppointments || !TB.Client.can( TB.ACL.RIGHTS.APPOINTMENT_SETATTENDANCESTATUS ) ) ? 'disabled' : '' %>"
                                           data-style="zoom-in"
                                           data-size="l"
                                           data-label-type="decline" data-appointment-id="<%= currentAppointments[i].id %>">
                                        <input type="radio" name="status" value="declined" id="status_declined" autocomplete="off"
                                        <%= ( ownStateCode == 'declined' ) ? 'checked="checked"' : '' %> />
                                        <span class="glyphicon glyphicon-thumbs-down"></span>
                                    </label>
                                </div>
                                <span class="label label-danger" data-declined-label-id="<%= currentAppointments[i].id %>"><%= numDeclined %></span>
                            </td>
                        </tr>
                        <% } %>

                        <% } else { %>
                        <tr>
                            <td colspan="4"><span class="label label-primary">Keine anstehenden Termine gefunden.</span></td>
                        </tr>
                        <% } %>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="row">
                <% if ( TB.Client.can( TB.ACL.RIGHTS.APPOINTMENT_CREATE ) || TB.Client.can( TB.ACL.RIGHTS.APPOINTMENT_CREATESERIAL ) ) {    %>
                    <div class="col-md-3 col-sm-12">
                        <button data-id="btn_appointment_subscribe"
                                class="btn btn-block btn-premium"
                                role="button">
                            Termine abonnieren <i class="glyphicon glyphicon-star"></i>
                        </button>
                    </div>
                    <div class="col-md-3 col-sm-12">
                        <button data-id="btn_appointment_export"
                                class="btn btn-block btn-premium"
                                role="button">
                            Excel Export <i class="glyphicon glyphicon-star"></i>
                        </button>
                    </div>
                    <div class="col-md-3 col-sm-12">
                        <button data-id="btn_appointment_create_match"
                                class="btn btn-block btn-primary"
                                role="button">
                            Spieltermin erstellen
                        </button>
                    </div>
                    <div class="col-md-3 col-sm-12">
                        <button data-id="btn_appointment_create_other"
                                class="btn btn-block btn-primary"
                                role="button">
                            Termin erstellen
                        </button>
                    </div>
                <% } else {  %>
                    <div class="col-md-12 col-sm-12">
                        <button data-id="btn_appointment_subscribe"
                                class="btn btn-block btn-premium"
                                role="button">
                            Termine abonnieren <i class="glyphicon glyphicon-star"></i>
                        </button>
                    </div>
                <% }    %>
            </div>

            <hr />

            <div class="row">
                <div class="col-xs-12">
                    <h3>Vergangene Termine <span class="span-premium"><i class="glyphicon glyphicon-star"></i></span></h3>
                </div>
            </div>

            <% var lenOldAppointments = ( oldAppointments && oldAppointments.length ) ? oldAppointments.length : 0; %>
            <button data-id="btn-show-old-appointments" class="btn btn-premium">
                Ein-/Ausblenden (<%= ( lenOldAppointments > 9 ) ? '9+' : lenOldAppointments %>) <i class="glyphicon glyphicon-star"></i>&nbsp;<i class="glyphicon glyphicon-chevron-right"></i><i class="glyphicon glyphicon-chevron-down" style="display:none"></i>
            </button>
            <div id="appointment-table-old-appointment" style="display: none;">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <table class="table table-striped table-condensed table-appointment" >
                            <thead>
                            <tr>
                                <th>Wann</th>
                                <th>Was</th>
                                <th>Wo</th>
                                <th>Status</th>
                            </tr>
                            </thead>
                            <tbody>

                            <% if( oldAppointments && oldAppointments.length > 0 ) { %>


                            <%
                            oldAppointments.reverse();
                            for ( var i = 0; i < oldAppointments.length ; i++ ) {


                            %>

                            <%
                            var numAccepted = 0,
                            numDeclined = 0,
                            numMaybe = 0,
                            isMatch = oldAppointments[i].subject ? false : true,
                            isOver = true,
                            d = data,
                            ownStateCode = null;
                            ownState = '<span class="label label-' + ((isOver) ? 'normal' : 'danger' ) + '">Noch offen</span>',
                            ownStateText = '';

                            $.each( data[ 'attendees_' + oldAppointments[i].id ] , function( i, v ) {
                            switch( v.status ) {
                            case 'accepted':
                            numAccepted++;
                            break;

                            case 'declined':
                            numDeclined++;
                            break;
                            }

                            if ( v.profile_id == data.profile.id ) {
                            ownStateCode = v.status;
                            }
                            } );
                            %>

                            <tr>
                                <td data-title="Beginn">
                                    <a type="button"
                                       href="#/c=Appointment&a=detail&appointment_id=<%= oldAppointments[i].id %>">
                                        <%= TB.Utils.getDatetimeStringFromUnixTimestamp(oldAppointments[i].starttime ) %>
                                    </a>
                                </td>
                                <td data-title="Was">
                                    <% if ( isMatch ) { %>
                                    <span class="label label-primary"><%= oldAppointments[i].home %></span> : <span class="label label-primary"><%= oldAppointments[i].guest %></span>
                                    <% } else {     %>
                                    <%= oldAppointments[i].subject %>
                                    <% }    %>
                                </td>
                                <td data-title="Wo">
                                    <%= TB.GUI.getValue( oldAppointments[i].location, 'Kein Ort angegeben' ) %>
                                </td>
                                <td data-title="Dein Status">
                                    <span class="label label-success" data-accepted-label-id="<%= data.appointments[i].id %>"><%= numAccepted %></span>
                                    <div class="btn-group" data-toggle="buttons">
                                        <label class="lada btn <%= ( ownStateCode == 'accepted' ) ? 'btn-success active' : 'btn-disabled' %> disabled"
                                               data-style="zoom-in"
                                               data-size="l"
                                               data-label-type="accept" data-appointment-id="<%= oldAppointments[i].id %>">
                                            <input type="radio" name="status" value="accepted" id="status_accepted" autocomplete="off"
                                            <%= ( ownStateCode == 'accepted' ) ? 'checked="checked"' : '' %>
                                            />
                                            <span class="glyphicon glyphicon-thumbs-up"></span>
                                        </label>
                                        <label class="lada btn <%= ( ownStateCode == 'declined') ? 'btn-danger active' : 'btn-disabled' %> disabled"
                                               data-style="zoom-in"
                                               data-size="l"
                                               data-label-type="decline" data-appointment-id="<%= oldAppointments[i].id %>">
                                            <input type="radio" name="status" value="declined" id="status_declined" autocomplete="off"
                                            <%= ( ownStateCode == 'declined' ) ? 'checked="checked"' : '' %> />
                                            <span class="glyphicon glyphicon-thumbs-down"></span>
                                        </label>
                                    </div>
                                    <span class="label label-danger" data-declined-label-id="<%= oldAppointments[i].id %>"><%= numDeclined %></span>
                                </td>
                            </tr>
                            <% } %>

                            <% } else { %>
                            <tr>
                                <td colspan="4"><span class="label label-primary">Keine alten Termine gefunden</span></td>
                            </tr>
                            <% } %>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>


        <div class="specialContentSmall">

            <div class="panel panel-default">
                <div class="panel-body">
                    <table class="table table-striped table-condensed table-appointment">
                        <thead>
                        <tr>
                            <th>Wann</th>
                            <th>Was</th>
                            <th>Status</th>
                        </tr>
                        </thead>

                        <tbody>

                        <% if ( currentAppointments && currentAppointments.length > 0 ) { %>

                        <% for ( var i = 0; i < currentAppointments.length; i++ ) { %>

                        <%
                        var numAccepted = 0,
                        numDeclined = 0,
                        numMaybe = 0,
                        isMatch = currentAppointments[i].subject ? false : true,
                        isOver = ( currentAppointments[i].starttime < TB.Utils.getUnixTimestamp() ),
                        d = data,
                        ownStateCode = null;
                        ownState = '<span class="label label-' + ((isOver) ? 'normal' : 'danger' ) + '">Noch offen</span>',
                        ownStateText = '';

                        $.each( data[ 'attendees_' + currentAppointments[i].id ] , function( i, v ) {
                        switch( v.status ) {
                        case 'accepted':
                        numAccepted++;
                        break;

                        case 'declined':
                        numDeclined++;
                        break;
                        }

                        if ( v.profile_id == data.profile.id ) {
                        ownStateCode = v.status;
                        }

                        } );
                        %>


                        <tr>
                            <td>
                                <a type="button"
                                   href="#/c=Appointment&a=detail&appointment_id=<%= currentAppointments[i].id %>">
                                    <%= TB.Utils.getDatetimeStringFromUnixTimestampMini( currentAppointments[i].starttime ) %><br />
                                    <%= TB.Utils.getTimeStringFromUnixTimestampMini( currentAppointments[i].starttime ) %>
                                </a>
                            </td>
                            <td>
                                <% if ( isMatch ) { %>
                                <span class="label label-primary"><%= currentAppointments[i].home %></span> : <br /><span class="label label-primary"><%= currentAppointments[i].guest %></span>
                                <% } else {     %>
                                <%= currentAppointments[i].subject %><br />&nbsp;
                                <% }    %>
                            </td>
                            <td >
                                <!--
                                    <span class="label <%= ( ownStateCode == 'accepted' ) ? 'label-success' : 'clickable' %> <%= ( inOldAppointments ) ? 'disabled' : '' %>"
                                          data-appointment-id="<%= currentAppointments[i].id %>"
                                          data-action="setstatus"
                                          data-label-type="accepted">
                                        <span class="glyphicon glyphicon-thumbs-up"></span>
                                    </span>&nbsp;
                                    <span class="label <%= ( ownStateCode == 'declined') ? 'label-danger' : 'clickable' %> <%= ( inOldAppointments ) ? 'disabled' : '' %>"
                                          data-appointment-id="<%= currentAppointments[i].id %>"
                                          data-action="setstatus"
                                          data-label-type="declined">
                                        <span class="glyphicon glyphicon-thumbs-down"></span>
                                    </span>
                                    -->

                                <div class="btn-group" data-toggle="buttons">
                                    <label class="lada btn btn-sm <%= ( ownStateCode == 'accepted' ) ? 'btn-success active' : 'btn-disabled' %> <%= ( inOldAppointments || !TB.Client.can( TB.ACL.RIGHTS.APPOINTMENT_SETATTENDANCESTATUS ) ) ? 'disabled' : '' %>"
                                           data-style="zoom-in"
                                           data-size="l"
                                           data-label-type="accept" data-appointment-id="<%= currentAppointments[i].id %>">
                                        <input type="radio" name="status" value="accepted" id="status_accepted" autocomplete="off"
                                        <%= ( ownStateCode == 'accepted' ) ? 'checked="checked"' : '' %>
                                        />
                                        <span class="glyphicon glyphicon-thumbs-up"></span>
                                    </label>
                                    <label class="lada btn btn-sm <%= ( ownStateCode == 'declined') ? 'btn-danger active' : 'btn-disabled' %> <%= ( inOldAppointments || !TB.Client.can( TB.ACL.RIGHTS.APPOINTMENT_SETATTENDANCESTATUS ) ) ? 'disabled' : '' %>"
                                           data-style="zoom-in"
                                           data-size="l"
                                           data-label-type="decline" data-appointment-id="<%= currentAppointments[i].id %>">
                                        <input type="radio" name="status" value="declined" id="status_declined" autocomplete="off"
                                        <%= ( ownStateCode == 'declined' ) ? 'checked="checked"' : '' %> />
                                        <span class="glyphicon glyphicon-thumbs-down"></span>
                                    </label>
                                </div><br />
                                <span class="label label-success" data-accepted-label-id="<%= currentAppointments[i].id %>"><%= numAccepted %></span>&nbsp;<span class="label label-danger" data-declined-label-id="<%= currentAppointments[i].id %>"><%= numDeclined %></span>

                            </td>
                        </tr>
                        <% } %>

                        <% } else { %>
                        <tr>
                            <td colspan="3"><span class="label label-primary">Keine anstehenden Termine gefunden.</span></td>
                        </tr>
                        <% } %>
                        </tbody>
                    </table>

                </div>
            </div>

            <div class="row">
                <% if ( TB.Client.can( TB.ACL.RIGHTS.APPOINTMENT_CREATE ) || TB.Client.can( TB.ACL.RIGHTS.APPOINTMENT_CREATESERIAL ) ) {    %>
                <div class="col-md-3 col-sm-12">
                    <button data-id="btn_appointment_subscribe"
                            class="btn btn-block btn-premium"
                            role="button">
                        Termine abonnieren <i class="glyphicon glyphicon-star"></i>
                    </button>
                </div>
                <div class="col-md-3 col-sm-12">
                    <button data-id="btn_appointment_export"
                            class="btn btn-block btn-premium"
                            role="button">
                        Excel Export <i class="glyphicon glyphicon-star"></i>
                    </button>
                </div>
                <div class="col-md-3 col-sm-12">
                    <button data-id="btn_appointment_create_match"
                            class="btn btn-block btn-primary"
                            role="button">
                        Spieltermin erstellen
                    </button>
                </div>
                <div class="col-md-3 col-sm-12">
                    <button data-id="btn_appointment_create_other"
                            class="btn btn-block btn-primary"
                            role="button">
                        Termin erstellen
                    </button>
                </div>
                <% } else {  %>
                <div class="col-md-12 col-sm-12">
                    <button data-id="btn_appointment_subscribe"
                            class="btn btn-block btn-premium"
                            role="button">
                        Termine abonnieren <i class="glyphicon glyphicon-star"></i>
                    </button>
                </div>
                <% }    %>
            </div>

            <hr />


            <div class="row">
                <div class="col-xs-12">
                    <h3>Vergangene Termine <span class="span-premium"><i class="glyphicon glyphicon-star"></i></span></h3>
                </div>
            </div>



            <% var lenOldAppointments = ( oldAppointments && oldAppointments.length ) ? oldAppointments.length : 0; %>
            <button data-id="btn-show-old-appointments" class="btn btn-premium">
                Ein-/Ausblenden (<%= ( lenOldAppointments > 9 ) ? '9+' : lenOldAppointments %>) <i class="glyphicon glyphicon-star"></i>&nbsp;<i class="glyphicon glyphicon-chevron-right"></i><i class="glyphicon glyphicon-chevron-down" style="display:none"></i>
            </button>
            <div id="appointment-table-old-appointment-small" style="display: none;">

                <div class="panel panel-default">
                    <div class="panel-body">

                        <table class="table table-striped table-condensed table-appointment" >
                            <thead>
                            <tr>
                                <th>Wann</th>
                                <th>Was</th>
                                <th>Status</th>
                            </tr>
                            </thead>
                            <tbody>

                            <% if( oldAppointments && oldAppointments.length > 0 ) { %>


                            <%
                            for ( var i = 0; i < oldAppointments.length ; i++ ) {


                            %>

                            <%
                            var numAccepted = 0,
                            numDeclined = 0,
                            numMaybe = 0,
                            isMatch = oldAppointments[i].subject ? false : true,
                            isOver = true,
                            d = data,
                            ownStateCode = null;
                            ownState = '<span class="label label-' + ((isOver) ? 'normal' : 'danger' ) + '">Noch offen</span>',
                            ownStateText = '';

                            $.each( data[ 'attendees_' + oldAppointments[i].id ] , function( i, v ) {
                            switch( v.status ) {
                            case 'accepted':
                            numAccepted++;
                            break;

                            case 'declined':
                            numDeclined++;
                            break;
                            }

                            if ( v.profile_id == data.profile.id ) {
                            ownStateCode = v.status;
                            }
                            } );
                            %>

                            <tr>
                                <td>
                                    <a type="button"
                                       href="#/c=Appointment&a=detail&appointment_id=<%= oldAppointments[i].id %>">
                                        <%= TB.Utils.getDatetimeStringFromUnixTimestampMini(oldAppointments[i].starttime ) %><br />
                                        <%= TB.Utils.getTimeStringFromUnixTimestampMini( oldAppointments[i].starttime ) %>
                                    </a>
                                </td>
                                <td>
                                    <% if ( isMatch ) { %>
                                    <span class="label label-primary"><%= oldAppointments[i].home %></span> : <span class="label label-primary"><%= oldAppointments[i].guest %></span>
                                    <% } else {     %>
                                    <%= oldAppointments[i].subject %><br />&nbsp;
                                    <% }    %>
                                </td>
                                <td>
                                    <!--
                                    <div class="btn-group" data-toggle="buttons">
                                        <label class="lada btn <%= ( ownStateCode == 'accepted' ) ? 'btn-success active' : 'btn-disabled' %> disabled"
                                               data-style="zoom-in"
                                               data-size="l"
                                               data-label-type="accept" data-appointment-id="<%= oldAppointments[i].id %>">
                                            <input type="radio" name="status" value="accepted" id="status_accepted" autocomplete="off"
                                            <%= ( ownStateCode == 'accepted' ) ? 'checked="checked"' : '' %>
                                            />
                                            <span class="glyphicon glyphicon-thumbs-up"></span>
                                        </label>
                                        <label class="lada btn <%= ( ownStateCode == 'declined') ? 'btn-danger active' : 'btn-disabled' %> disabled"
                                               data-style="zoom-in"
                                               data-size="l"
                                               data-label-type="decline" data-appointment-id="<%= oldAppointments[i].id %>">
                                            <input type="radio" name="status" value="declined" id="status_declined" autocomplete="off"
                                            <%= ( ownStateCode == 'declined' ) ? 'checked="checked"' : '' %> />
                                            <span class="glyphicon glyphicon-thumbs-down"></span>
                                        </label>
                                    </div>
                                    -->
                                    <div class="btn-group" data-toggle="buttons">
                                        <label class="lada btn btn-sm <%= ( ownStateCode == 'accepted' ) ? 'btn-success active' : 'btn-disabled' %> <%= ( isOver ) ? 'disabled' : '' %>"
                                               data-style="zoom-in"
                                               data-size="l"
                                               data-label-type="accept" data-appointment-id="<%= oldAppointments[i].id %>">
                                            <input type="radio" name="status" value="accepted" id="status_accepted" autocomplete="off"
                                            <%= ( ownStateCode == 'accepted' ) ? 'checked="checked"' : '' %>
                                            />
                                            <span class="glyphicon glyphicon-thumbs-up"></span>
                                        </label>
                                        <label class="lada btn btn-sm <%= ( ownStateCode == 'declined') ? 'btn-danger active' : 'btn-disabled' %> <%= ( isOver ) ? 'disabled' : '' %>"
                                               data-style="zoom-in"
                                               data-size="l"
                                               data-label-type="decline" data-appointment-id="<%= oldAppointments[i].id %>">
                                            <input type="radio" name="status" value="declined" id="status_declined" autocomplete="off"
                                            <%= ( ownStateCode == 'declined' ) ? 'checked="checked"' : '' %> />
                                            <span class="glyphicon glyphicon-thumbs-down"></span>
                                        </label>
                                    </div><br />
                                    <span class="label label-success" data-accepted-label-id="<%= oldAppointments[i].id %>"><%= numAccepted %></span>&nbsp;<span class="label label-danger" data-declined-label-id="<%= oldAppointments.id %>"><%= numDeclined %></span>
                                </td>
                            </tr>
                            <% } %>

                            <% } else { %>
                            <tr>
                                <td colspan="34"><span class="label label-primary">Keine alten Termine gefunden</span></td>
                            </tr>
                            <% } %>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>