@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">Firmen Fitness 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><a href="courseplan">Kursplaner</a></li>
                            @endif
                            @if(in_array(4, $buttons->toArray()))
                                <li class="active"><a>Firmenfitness</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 d-flex" role="group" aria-label="Basic example">
                            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
                                    title="Neuen Kursplan erstellen" id="newFFCoursePlanButton"><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="openFFCoursplanViewModal()"><i
                                        class="fa fa-list"
                                        aria-hidden="true"></i>
                                <br>
                                Kurspläne verwalten
                            </button>
                            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
                                    title="Kursplan bearbeiten" onclick="showFFConfig()"><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="#newFFCourseModal"
                                    id="newffcourseopenbutton"><i
                                        class="fa fa-plus"></i>
                                <br>
                                Neuer Kurs
                            </button>
                            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
                                    title="Neue Gruppe anlegen" id="newGroupButton" onclick="openFFGroupModel()"><i
                                        class="fa fa-users" aria-hidden="true"></i>
                                <br>
                                Neue Gruppe
                            </button>
                            <button type="button" class="btn btn-default hidden" data-toggle="tooltip"
                                    data-placement="bottom"
                                    title="Neue Gruppe anlegen" id="newGroupButton" onclick="getFFGroupList()"><i
                                        class="fa fa-object-ungroup" aria-hidden="true"></i>
                                <br>
                                Gruppen verwalten
                            </button>
                            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
                                    title="Neue Schriftart hinzufügen" id="newFontButton" onclick="openFFFontModal()"><i
                                        class="fas fa-file-word" aria-hidden="true"></i>
                                <br>
                                Schriftart hinzufügen
                            </button>
                            <button type="button" class="btn btn-danger" data-toggle="tooltip" data-placement="bottom"
                                    title="Kursplan als PDF exportieren" onclick="exportFFCoursePlan()"><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="saveffallbutton"><i class="fa fa-save"></i>
                                <br>
                                Speichern
                            </button>
                        </div>
                    </div>
                </div>
                <br>
                <div class="row hidden" id="ffconfigrow">
                    {!! $configrow !!}
                </div>
                <br>
                <div class="row" id="select-section">
                    {!!$select!!}
                </div>
                <hr>
                <div class="row">
                    <div class="col-md-12" id="ffcoursestable">
                        {!! $content !!}
                    </div>
                </div>
                <div class="row" id="fflegenddiv">
                    {!! $legend !!}
                </div>
            </div>
        </div>
    </div>

    <div id="showModal" tabindex="-1" class="modal fade" role="dialog"></div>
    {!! $alertModal !!}


    <div id="chooseFFCourseModal" 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>
                <div class="modal-body" style="max-height: calc(100vh - 200px);overflow-y: auto;">
                    <div class="row ffstep2 hidden">
                        <div class="col-md-12">
                            <h3 id="ffcoursenamemodal"></h3>
                        </div>
                        <hr>
                    </div>
                    <div class="row ffstep1">
                        <div class="col-md-12" id="ffcourselist">

                        </div>
                    </div>
                    <div class="row ffstep2 hidden">
                        <div class="col-md-4">
                            <label for="fffrominput">Von:</label>
                            <input type="time" id="fffrominput" name="frominput" class="form-control">
                        </div>
                        <div class="col-md-4 col-sm-offset-4">
                            <label for="fftoinput">Bis:</label>
                            <input type="time" id="fftoinput" name="toinput" class="form-control">
                        </div>
                    </div>
                    <br>
                    <div class="row ffstep2 hidden">
                        <div class="col-md-6">
                            <label for="ffplaceinput"> Ort:</label>
                            <input type="text" id="ffplaceinput" class="form-control"
                                   placeholder="Ort an dem der Kurs stattfindet">
                        </div>
                        <div class="col-md-6">
                            <label for="fftrainerinput"> Kursleiter:</label>
                            <input type="text" id="fftrainerinput" class="form-control"
                                   placeholder="Kursleiter des Kurses">
                        </div>
                    </div>
                    <div class="row hidden">
                        <div class="col-md-6">
                            <label for="ffwheninput"> Gültig ab:</label>
                            <input type="date" id="ffwheninput" class="form-control">
                            <input type="text" id="ffplaninput" class="form-control">
                            <input type="text" id="ffcourseidinput" class="form-control">
                            <input type="text" id="ffdayinput" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn btn-success ffstep2 hidden"
                            onclick="saveFFCourseToDay()">Speichern
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Abbrechen</button>
                </div>
            </div>
        </div>
    </div>


                <div id="reactivateFFCourseModal" 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="ffcourseReactivateTimeid">
                                <button type="button" data-dismiss="modal" class="btn btn-success" onclick="saveReactivateFFCourse()">
                                    Reaktivieren
                                </button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Abbrechen</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="pauseFFCourseModal" 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="ffcourseReactivateTimeid">
                                <button type="button" data-dismiss="modal" class="btn btn-success" onclick="savePauseFFCourse()">
                                    Pausieren
                                </button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Abbrechen</button>
                            </div>
                        </div>
                    </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="saveFFQuestionModal" 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="saveFFClick()">Speichern
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Abbrechen</button>
                </div>
            </div>
        </div>
    </div>


    <div id="editFFCourseModal" 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="ffcourseselectformodal">

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

    <div id="deleteFFCourseModal" 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="deleteFFCourseNew()">
                        Löschen
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Abbrechen</button>
                </div>
            </div>
        </div>
    </div>

    <div id="changeFFGroupModal" 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="ffgroupnamechange">Name</label>
                            <input type="text" class="form-control" id="ffgroupnamechange">
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-md-6">
                            <label for="ffgroupcolorchange">Farbe</label>
                            <input type="color" id="ffgroupcolorchange" class="form-control">
                        </div>
                    </div>
                    <div class="row hidden">
                        <div class="col-md-6">
                            <label for="ffgroupidchange">id</label>
                            <input type="text" class="form-control" id="ffgroupidchange">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn btn-success" onclick="changeFFGroup()">
                        Speichern
                    </button>
                    <button class="btn btn-danger" onclick="deleteFFGroupModal()">Löschen</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Abbrechen</button>
                </div>
            </div>
        </div>
    </div>
@endsection

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

<div id="ffcourseDeleteModal" 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="deleteffcourseid" 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="newFFCourseDelete()" value="Löschen"/>
            </div>
        </div>
    </div>
</div>

<div id="ffgroupDeleteModal" 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="deleteFFGroup()" value="Löschen"/>
            </div>
        </div>
    </div>
</div>