@extends('layouts.app')

@section('content')
<script>
    var token = "{{ Session::token() }}";

</script>
<div class="container">
    <div class="panel panel-default panel-bg">
        <div class="panel-heading">Kursplan</div>
        <div class="panel-body courses-container">
            <div class="row">
                <div class="col-md-12">
                    <ul class="nav nav-tabs" style="cursor: pointer">
                        @if(in_array(3, $buttons->toArray()))
                        <li class="active"><a>Kursplaner</a></li>
                        @endif
                        @if(in_array(4, $buttons->toArray()))
                        <li><a href="firmenfitness">HBC / Firmen</a></li>
                        @endif
                        @if(in_array(32, $buttons->toArray()))
                        <li><a href="/substitutionoverview">Vertretungsübersicht</a></li>
                        @endif
                    </ul>
                </div>
            </div>
            <br>
            <div class="row">
                <div class="col-md-12">
                    <div class="btn-group" role="group" aria-label="Basic example">
                        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
                                title="Neuen Kursplan erstellen" id="newCoursePlanButton"><i class="fa fa-file"
                                                                                             aria-hidden="true"></i>
                            <br>
                            Neuer Kursplan
                        </button>
                        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
                                title="Kurspläne verwalten" onclick="openCoursplanViewModal()"><i class="fa fa-list"
                                                                                                  aria-hidden="true"></i>
                            <br>
                            Kurspläne
                        </button>
                        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
                                title="Kursplan bearbeiten" onclick="showConfig()"><i class="fas fa-pencil-alt"
                                                                                      aria-hidden="true"></i>
                            <br>
                            Einstellungen
                        </button>
                        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
                                title="Neuen Kurs anlegen" data-target="#newCourseModal" id="newcourseopenbutton"><i
                                    class="fa fa-plus"></i>
                            <br>
                            Neuer Kurs
                        </button>
                        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
                                title="Neuen Kurs anlegen" onclick="viewCoursesModal()"><i
                                    class="fas fa-clipboard-check"></i>
                            <br>
                            Kurse
                        </button>
                        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
                                title="Neue Gruppe anlegen" id="newGroupButton" onclick="openGroupModel()"><i
                                    class="fa fa-users" aria-hidden="true"></i>
                            <br>
                            Neue Gruppe
                        </button>
                        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
                                title="Neue Gruppe anlegen" id="newGroupButton" onclick="getGroupList()"><i
                                    class="fa fa-object-ungroup" aria-hidden="true"></i>
                            <br>
                            Gruppen
                        </button>
                        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
                                title="Neue Schriftart hinzufügen" id="newFontButton" onclick="openSubstituteModal()"><i class="fas fa-exchange-alt"></i>
                            <br>
                            Vertretungen
                        </button>
                        <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
                                title="Neue Schriftart hinzufügen" id="newFontButton" onclick="openFontModal()"><i
                                    class="fas fa-file-word" aria-hidden="true"></i>
                            <br>
                            Schriftart
                        </button>
                        <button type="button" class="btn btn-danger" data-toggle="tooltip" data-placement="bottom"
                                title="Kursplan als PDF exportieren" onclick="exportCoursePlan()"><i
                                    class="fas fa-file-pdf"
                                    aria-hidden="true"></i>
                            <br>
                            PDF
                        </button>
                        <button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="bottom"
                                title="Kursplan speichern" id="saveallbutton"><i class="fa fa-save"></i>
                            <br>
                            Speichern
                        </button>
                    </div>
                </div>
            </div>
            <br>
            <div class="row hidden" id="configrow">
                {{ Form::open( array('url' => 'saveconfig', 'class'=>'form-horizontal', 'files' => true)) }}
                <!--<form action="saveconfig" enctype="multipart/form-data">-->
                <div class="col-md-2">
                    <label for="dateinput">Gültig ab:</label>
                    <input type="date" id="dateinput" class="form-control"  name="date">
                </div>
                <div class="col-md-3">
                    <label>Hintergrund:</label><br>
                    <div class="btn btn-primary" onclick="document.getElementById('dropzoneFileUpload4').click();">
                        Datei auswählen
                    </div>
                    <!--<input name="file" id="imageinput" type="file" size="500" accept="image/*"
                                class="hidden">-->
					<span style="padding-left: 10px">Keine Datei ausgewählt</span>                    <div id="dropzoneFileUpload4" class="hidden"></div>
                </div>
                <div class="col-md-2">
                    <label>Schriftfarbe:</label>
                    <input name="text_color" id="textcolorinput" type="color"
                           class="form-control" >

                </div>
                <div class="col-md-1">
                    <label>Schriftgröße:</label>
                    <input name="text_size" id="textsizeinput" type="number"
                           class="form-control" >

                </div>
                <div class="col-md-2">
                    <label>Tabellenfarbe:
                    </label>
                    <input name="table_color" id="tablecolorinput" type="color"
                           class="form-control" >
                </div>
                <div class="col-md-1">
                    <label>Tabellengröße:</label>
                    <input name="table_size" id="tablesizeinput" type="number"
                           class="form-control" >

                </div>
                <!--</form>-->
                <div class="col-md-2">
                    <label for="fontselect">Schrift:</label>
                    <select name="fontselect" id="fontselect" class="form-control">
                        @foreach($fonts as $font)
                        <option @if(!empty($config)&&!empty($config->font_id)&&($font->id == $config->font_id))selected
                            @endif value="{{$font->id}}">{{$font->name}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <div class="checkbox">
                        <label><input type="checkbox"
                                      id="trainercheckbox" >Kursleiter anzeigen</label>
                    </div>
                </div>
                <div class="col-md-2 hidden">
                    <input type="text" class="hidden"  name="id">
                    <input id="submit" type="submit" value="Upload File" class="hidden"/>
                </div>
                {{ Form::close() }}
                <br>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <label for="courseselect">Studio:</label>
                    <select name="courseselect" id="courseselect" class="form-control">
                        @foreach($studios as $studio)
                        <option value="{{$studio->id}}">{{$studio->title}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3" id="planlist">
                    <label for="planselect">Plan:</label>
                    <select name="planselect" id="planselect"
						disabled  class="form-control">
						<option value="0">Kein Kursplan angelegt</option>                        @foreach($courseplan as $plan)
                        <option value="{{$plan->id}}"
                                data-id="{{$plan->id}}" selected>{{$plan->name}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-md-12" id="coursestable">
                    {!! $content !!}
                </div>
                <div id="calendar"></div>
            </div>
            <div class="row" id="legenddiv">
                {!! $legend !!}
            </div>
        </div>
    </div>
</div>



<div id="newCourseModal" tabindex="-1" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Kurs anlegen</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <label for="nameinput">Name:</label>
                        <input type="text" name="nameinput" class="form-control" id="nameinput"/>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-md-6" id="newcoursegroup">
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-md-12">
                        <label for="descinput">Beschreibung:</label>
                        <textarea  name="descinput" id="descinput" cols="30" rows="10"
                                   class="form-control"></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <input data-dismiss="modal" type="submit" class="btn btn-success newCourseSubmit" value="Anlegen"
                       onclick="saveCourse()"/>
                <button type="button" class="btn btn-default" data-dismiss="modal">Abbrechen</button>
            </div>
        </div>
    </div>
</div>

<div id="reactivateCourseModal" tabindex="-1" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Kurs reaktivieren?</h4>
            </div>
            <div class="modal-body" id="coursereactivateformodal">
            </div>
            <div class="modal-footer">
                <input type="hidden" name="coursetimeid" id="courseReactivateTimeid">
                <button type="button" data-dismiss="modal" class="btn btn-success" onclick="saveReactivateCourse()">
                    Reaktivieren
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Abbrechen</button>
            </div>
        </div>
    </div>
</div>
<div id="pauseCourseModal" tabindex="-1" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Kurs pausieren? Kurs erscheint nicht mehr in den Smartphone-Apps, aber ist noch im Kursmanager orange hinterlegt.</h4>
            </div>
            <div class="modal-body" id="coursepauseformodal">
                Achtung! Sollte sich ein Nutzer bereits angemeldet haben, kann er sich auch nicht mehr abmelden.<br />
                Er bekommt keine Information über das Pausieren!<br />
                Kurs bleibt in diesem Zustand, bis er reaktiviert wurde!
            </div>
            <div class="modal-footer">
                <input type="hidden" name="coursetimeid" id="coursePauseTimeid">
                <button type="button" data-dismiss="modal" class="btn btn-success" onclick="savePauseCourse()">
                    Pausieren
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Abbrechen</button>
            </div>
        </div>
    </div>
</div>
<div id="chooseCourseModal" tabindex="-1" class="modal fade" role="dialog">
    <div class="modal-dialog" style="overflow-y: initial !important">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Kurs wählen</h4>
            </div>
            <form onsubmit="saveCourseToDay();return false;"  method="post" action="#">
                <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
                <div class="modal-body" style="max-height: calc(100vh - 200px);overflow-y: auto;">
                    <div class="row step2 hidden">
                        <div class="col-md-12">
                            <h3 id="coursenamemodal"></h3>
                        </div>
                        <hr>
                    </div>
                    <div class="row step1">
                        <div class="col-md-12" id="courselist">

                        </div>
                    </div>
                    <div class="row step2 hidden">
                        <div class="col-md-4">
                            <label for="frominput">Von:</label>
                            <input type="time" id="frominput" name="frominput" class="form-control" required="required">
                        </div>
                        <div class="col-md-4 col-sm-offset-4">
                            <label for="toinput">Bis:</label>
                            <input type="time" id="toinput" name="toinput" class="form-control" required="required">
                        </div>
                    </div>
                    <br>
                    <div class="row step2 hidden">
                        <div class="col-md-4">
                            <label for="placeinput"> Ort:</label>
                            <input type="text" id="placeinput" class="form-control" required="required">
                        </div>
                        <div class="col-md-4">
                            <label for="trainerinput"> Kursleiter (Anzeige):</label>
                            <input type="text" id="trainerinput" class="form-control" required="required">
                        </div>
                        <div class="col-md-4">
                            <label for="usersearchforcourse"> Kursleiter (Intern):</label>
                            <input type="text" class="form-control" id="usersearchforcourse" name="usersearchforcourse" placeholder="Suche..." required="required">
                            <input type="hidden" id="newtrainerinput" name="newtrainerinput">
                        </div>
                    </div>
                    <br>
                    <div class="row step2 hidden">
                        <div class="col-md-12">
                            <h4>Teilnehmerliste</h4>
                        </div>
                    </div>
                    <div class="row step2 hidden">
                        <div class="col-md-5">
                            <br>
                            <input type="checkbox" class="form-check-input" id="participantListCheck">
                            <label class="form-check-label" for="participantListCheck">Teilnehmerliste erstellen</label>
                        </div>
                        <div class="col-md-6">
                            <label for="participantListNumber"> Teilnehmerzahl:</label>
                            <input type="number" id="participantListNumber" class="form-control" placeholder="0">
                        </div>
                    </div>
                    <div class="row hidden">
                        <div class="col-md-6">
                            <label for="wheninput"> Gültig ab:</label>
                            <input type="date" id="wheninput" class="form-control">
                            <input type="text" id="planinput" class="form-control">
                            <input type="text" id="courseidinput" class="form-control">
                            <input type="text" id="dayinput" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success step2 hidden">Speichern
                    </button>
                    <button type="reset" class="btn btn-default" data-dismiss="modal">Abbrechen</button>
                </div>
            </form>
        </div>
    </div>
    <div class="alert substitutionsFormAlert hidden"></div>
</div>


<div id="savedModal" tabindex="-1" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header bg-success">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Erfolgreich!</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        Erfolgreich gespeichert!
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">ok</button>
            </div>
        </div>
    </div>
</div>
<div id="notsavedModal" tabindex="-1" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header bg-danger">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Fehler!</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        Leider ist ein Fehler aufgetreten!
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">ok</button>
            </div>
        </div>
    </div>
</div>
<div id="saveQuestionModal" tabindex="-1" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Speichern</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        Wollen Sie die Änderungen Speichern?
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" data-dismiss="modal" onclick="saveClick()">Speichern
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Abbrechen</button>
            </div>
        </div>
    </div>
</div>
<div id="newCoursePlanModal" tabindex="-1" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Neuen Kursplan anlegen</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <label for="newcourseplanname">Titel:</label>
                        <input type="text" id="newcourseplanname" class="form-control">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <label for="newcourseplandate">Gültig ab:</label>
                        <input type="date" id="newcourseplandate" class="form-control">
                    </div>
                    <div class="col-md-6">
                        <label for="newcourseplandate">Gültig bis:</label>
                        <input type="date" id="newcourseplantodate" class="form-control">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" data-dismiss="modal" onclick="saveCoursePlan()">
                    Speichern
                </button>
                <button class="btn btn-primary" onclick="openCoursplanViewModal()">Kurspläne verwalten</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Abbrechen</button>
            </div>
        </div>
    </div>
</div>

<div id="editCourseModal" tabindex="-1" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Kurs bearbeiten</h4>
            </div>
            <div class="modal-body" id="courseselectformodal">

            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn btn-success" onclick="saveEditCourse()">
                    Speichern
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Abbrechen</button>
            </div>
        </div>
    </div>
</div>

<div id="deleteCourseModal" tabindex="-1" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header bg-danger">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Kurs löschen</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        Wollen Sie den Eintrag wirklich löschen?
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn btn-success" onclick="deleteCourseNew()">
                    Löschen
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Abbrechen</button>
            </div>
        </div>
    </div>
</div>

<div id="newGroupModal" tabindex="-1" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Gruppe erstellen</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <label for="groupname">Name</label>
                        <input type="text" class="form-control" id="groupname">
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-md-6">
                        <label for="groupcolor">Farbe</label>
                        <input type="color" id="groupcolor" class="form-control">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn btn-success" onclick="saveGroup()">
                    Speichern
                </button>
                <button class="btn btn-primary" onclick="getGroupList()">Gruppen verwalten</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Abbrechen</button>
            </div>
        </div>
    </div>
</div>

<div id="changeGroupModal" tabindex="-1" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Gruppe bearbeiten</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <label for="groupnamechange">Name</label>
                        <input type="text" class="form-control" id="groupnamechange">
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-md-6">
                        <label for="groupcolorchange">Farbe</label>
                        <input type="color" id="groupcolorchange" class="form-control">
                    </div>
                </div>
                <div class="row hidden">
                    <div class="col-md-6">
                        <label for="groupidchange">id</label>
                        <input type="text" class="form-control" id="groupidchange">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn btn-success" onclick="changeGroup()">
                    Speichern
                </button>
                <button class="btn btn-danger" onclick="deleteGroupModal()">Löschen</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Abbrechen</button>
            </div>
        </div>
    </div>
</div>
@endsection

<div id="courseFormModalNew" tabindex="-1" class="modal fade" role="dialog"></div>

<div id="courseDeleteModal" tabindex="-1" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header bg-danger">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Kurs löschen</h4>
            </div>
            <div class="modal-body">
                <p>Sind Sie sicher, dass Sie diesen Kurs <b>unwiderruflich</b> löschen möchten?</p>
                <p><i class="fa fa-warning fa-lg"></i> Es werden hiermit auch alle dem Kurs zugehörigen Zeiten gelöscht!
                    <i class="fa fa-warning fa-lg"></i></p>
            </div>
            <input type="text" id="deletecourseid" class="hidden">
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Abbrechen</button>
                <input type="button" class="btn btn-danger" onclick="newCourseDelete()" value="Löschen"/>
            </div>
        </div>
    </div>
</div>

<div id="groupDeleteModal" tabindex="-1" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header bg-danger">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Gruppe löschen</h4>
            </div>
            <div class="modal-body">
                <p>Sind Sie sicher, dass Sie diese Gruppe <b>unwiderruflich</b> löschen möchten?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Abbrechen</button>
                <input type="button" class="btn btn-danger" onclick="deleteGroup()" value="Löschen"/>
            </div>
        </div>
    </div>
</div>

<div id="groupListModal" tabindex="-1" class="modal fade" role="dialog">
    <div class="modal-dialog" style="overflow-y: initial !important">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header bg-danger">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Gruppen verwalten</h4>
            </div>
            <div class="modal-body" id="groupListBody" style="max-height: calc(100vh - 200px);overflow-y: auto;">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
            </div>
        </div>
    </div>
</div>

<div id="uploadFontModal" tabindex="-1" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header bg-danger">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Schriftart hinzufügen</h4>
            </div>
            <div class="modal-body" id="uploadFontModalBody">
            </div>
        </div>

    </div>
</div>

<div id="courseViewModal" tabindex="-1" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header bg-danger">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Kursplanübersicht</h4>
            </div>
            <div class="modal-body" id="courseViewModalBody">
            </div>
        </div>

    </div>
</div>

<div id="substitutionsModal" tabindex="-1" class="modal fade" role="dialog"></div>

<div id="courseListModal" tabindex="-1000" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header bg-danger">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Kurse</h4>
            </div>
            <div class="modal-body" id="courseListModalBody">
            </div>
        </div>

    </div>
</div>

<div id="substitutionOverviewModal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h5 class="modal-title">Vertretungsübersicht</h5>
            </div>
            <div class="modal-body" id="substitutionOverviewModalBody">
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>

<div id="substitutionsFormSpinner" class="spinner hidden text-center">
    <i class="fa fa-circle-o-notch fa-3x fa-spin"></i><br/>
    Laden...
</div>