@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">Einsatzplan</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>Einsatzplaner</a></li>
                            @endif
                            @if(in_array(4, $buttons->toArray()))
                                <li><a href="schichtplaner">Schichtplaner</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 Einsatzplan erstellen" id="newCoursePlanButton"><i class="fa fa-file"
                                                                                                 aria-hidden="true"></i>
                                <br>
                                Neuer Einsatzplan
                            </button>
                            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
                                    title="Schichtpläne verwalten" onclick="openCoursplanViewModal()"><i class="fa fa-list"
                                                                                                      aria-hidden="true"></i>
                                <br>
                                Einsazpläne
                            </button>
                            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
                                    title="Einsatzplan 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 wiederkehrenden Einsatz" data-target="#newCourseModal" id="newcourseopenbutton"><i
                                        class="fa fa-plus"></i>
                                <br>
                                Neue Tätigkeitsart
                            </button>
                            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
                                    title="Alle definierten Einsätze anschauen" onclick="viewCoursesModal()"><i
                                        class="fas fa-clipboard-check"></i>
                                <br>
                                Übersicht Tätigkeitsarten
                            </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" >Einsatzleiter 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="sortBy">Filtern nach:</label>
                        <select name="sortBy" id="sortBy" class="form-control" onchange="sortChange()">
                            <option value="0">Kunde</option>
                            <option value="1">Mitarbeiter</option>
                        </select>
                    </div>
                    <div class="col-md-3 hidden" id="userSearchPlanDiv">
                        <label for="userSearchPlan" id="userSearchPlanLabel" class="hidden">Mitarbeiter:</label>
                        <input type="text" class="form-control hidden" id="userSearchPlan" name="userSearchPlan" placeholder="Bitte zuerst Mitarbeiter suchen...">
                        <input type="hidden" id="userSearchPlanID" name="userSearchPlanID" class="automaticUserSearchPlan">
                    </div>
                    <div class="col-md-3" id="courseselectDiv">
                        <label for="courseselect" id="courseselectLabel">Kunde:</label>
                        <input type="text" class="form-control" id="customerSearchPlan2" name="customerSearchPlan2" placeholder="Kunde suchen..." value="{{ $firstCompanieChainName ?? '' }}">
                        <input type="hidden" id="courseselect" name="courseselect" class="automaticCustomerSearchPlan" value="{{ $firstCompanieChainID ?? '' }}">


                    </div>
                </div><br />
                <div class="col-md-3">
                    <label for="datepicker">Startdatum:</label>
                    <input type="date" class="form-control" id="datepicker" name="datepicker" onchange="selectDate()" value="{{$startdate}}">
                </div>
                <hr>
                <div class="row">
                    <div class="col-md-12" id="coursestable">
                        {!! $content !!}
                    </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">Tätigkeitsarten anlegen</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <label for="nameinput">Tätigkeitsname: </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="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">Einsatz planen</h4>
                </div>
                  <form onsubmit="saveCourseToDay();return false;"  method="post" action="#">
                  <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
                      <input type="hidden" id="dayinput" name="dayinput">
                      <input type="hidden" id="newdate" name="newdate">
                <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">
                      <h4 class="">Wähle Tätigkeitsart</h4>
                        <div class="col-md-12" id="courselist">

                        </div>
                    </div>
                    <div class="row step2 hidden">
                      <input type="hidden" name="courseID" id="courseidinput"/>
                        <div class="col-md-12">
                          <ul class="nav nav-tabs" style="cursor: pointer">
                              <li class="active segmentchoose" id="linkweeklysegment" data-name="weeklysegment"><a>Wöchentlich Wiederholen</a></li>
                              <li class="segmentchoose" id="linkmonthlyDayXsegment" data-name="monthlyDayXsegment"><a>Jeden Monat am X. Tag</a></li>
                              <li class="segmentchoose" id="linkmonthlyWeekXsegment" data-name="monthlyWeekXsegment"><a>Monatlich wiederholen jede X. Woche</a></li>
                              <li class="segmentchoose" id="linkcalenderWeekEvensegment" data-name="calenderWeekEvensegment"><a>Jede Gerade Kalenderwoche</a></li>
                              <li class="segmentchoose" id="linkcalenderWeekUnevensegment" data-name="calenderWeekUnEvensegment"><a>Jede Ungerade Kalenderwoche</a></li>
                              <li class="segmentchoose" id="linkyearlysegment" data-name="yearlysegment"><a>Jährlich wiederholen</a></li>
                              <li class="segmentchoose" id="linkoncesegment" data-name="oncesegment"><a>Einmalig</a></li>
                          </ul>
                          <div id="weeklysegment" class="segment">
                          </div>
                          <div id="monthlyDayXsegment" class="segment hidden">
                            <label for="dayX">
                              Wähle Tag
                            </label>
                            <input type="number" id="dayX" name="dayX" min="1" max="31" class="form-control">
                          </div>
                          <div id="monthlyWeekXsegment" class="segment hidden">
                            <label for="workdays">
                              Jede X. Woche im Monat (Erste Woche beginnt am 01. - Fünfte Woche definiert Restliche 0-3 Tage)
                            </label><br />
                            <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
                              <input type="checkbox" class="btn-check" id="firstWeek" name="firstWeek" value="1" autocomplete="off">
                              <label class="btn btn-outline-primary" for="firstWeek">Erste Woche</label>

                              <input type="checkbox" class="btn-check" id="secondWeek" name="secondWeek" value="1" autocomplete="off">
                              <label class="btn btn-outline-primary" for="secondWeek">Zweite Woche</label>

                              <input type="checkbox" class="btn-check" id="thirdWeek" name="thirdWeek" value="1" autocomplete="off">
                              <label class="btn btn-outline-primary" for="thirdWeek">Dritte Woche</label>

                              <input type="checkbox" class="btn-check" id="fourthWeek" name="fourthWeek" value="1" autocomplete="off">
                              <label class="btn btn-outline-primary" for="fourthWeek">Vierte Woche</label>

                              <input type="checkbox" class="btn-check" id="fifthWeek" name="fifthWeek" value="1" autocomplete="off">
                              <label class="btn btn-outline-primary" for="fifthWeek">Fünfte Woche</label>
                            </div>
                          </div>
                          <div id="calenderWeekEvensegment" class="segment hidden">
                          </div>
                          <div id="calenderWeekUnEvensegment" class="segment hidden">
                          </div>
                          <div id="yearlysegment" class="segment hidden">
                            <label for="yearly">
                              Wähle Referenzdatum
                            </label>
                            <input type="date" id="yearly" name="yearly" class="form-control">
                          </div>
                          <div id="oncesegment" class="segment hidden">
                            <label for="onceDate">
                              Wähle Datum
                            </label>
                            <input type="date" id="onceDate" name="onceDate" class="form-control">
                          </div>
                          <label for="withReport">Mit Arbeitsbericht</label>
                          <input type="checkbox" id="withReport" name="withReport" class="form-control" value="1"/>
                            <label for="frominput">Von:</label>
                            <input type="time" id="frominput" name="frominput" class="form-control">
                            <label for="toinput">Bis:</label>
                            <input type="time" id="toinput" name="toinput" class="form-control">
                        </div>
                    </div>
                    <br>
                    <div class="row step2 hidden">
                        <div class="col-md-12">
                            <div id="withSelect">
                            <label for="customerSearchPlan">Kundenobjekt:</label>

                            <input type="hidden" class="form-control" id="customername" disabled name="customername">

                            <select name="objectselect" id="objectselect" class="form-control">
                            </select>
                        </div>
                            <div id="withOutSelect">
                                <label for="customerSearchPlan">Kunde - Kundenobjekt:</label>
                            <input type="text" class="form-control" id="customerSearchPlan" name="customerSearchPlan" placeholder="Suche...">
                            <input type="hidden" id="customerSearchPlanID" name="customerSearchPlanID" class="automaticCustomerSearchPlan" required>
                            </div>
                        </div>
                        <div class="col-md-12">
                        <label for="withUser">Fester Mitarbeiter?</label>
                        <input type="checkbox" id="withUser" name="withUser" class="form-control" value="1" checked/>
                            <label for="usersearchforcourse"> Mitarbeiter:</label>
                            <input type="text" class="form-control" id="usersearchforcourse" name="usersearchforcourse" placeholder="Suche...">
                            <input type="hidden" id="newtrainerinput" name="newtrainerinput">
                        </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 Einsatzplan 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()">Schichtplä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">Einsatz 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">Einsatz 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">Einsatz löschen</h4>
            </div>
            <div class="modal-body">
                <p>Sind Sie sicher, dass Sie diesen Einsatz <b>unwiderruflich</b> löschen möchten?</p>
                <p><i class="fa fa-warning fa-lg"></i> Es werden hiermit auch alle dem Einsatz 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">Einsatzplanü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">Einsatze</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>