@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 Schichtplan</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">Einsatzplaner</a></li>
                            @endif
                            @if(in_array(4, $buttons->toArray()))
                                <li class="active"><a>Schichtplaner</a></li>
                            @endif
                            @if(in_array(15, $buttons->toArray()))
                                <li><a href="freeWork">Spezial Einsätze</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 Schichtplan erstellen" id="newFFCoursePlanButton"><i class="fa fa-file"
                                                                                                   aria-hidden="true"></i>
                                <br>
                                Neuer Schichtplan
                            </button>
                            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
                                    title="Schichtpläne verwalten" onclick="openFFCoursplanViewModal()"><i
                                        class="fa fa-list"
                                        aria-hidden="true"></i>
                                <br>
                                Schichtpläne verwalten
                            </button>
                            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
                                    title="Schichtplan 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="Neue Schicht anlegen" data-target="#newFFCourseModal"
                                    id="newffcourseopenbutton"><i
                                        class="fa fa-plus"></i>
                                <br>
                                Neue Schicht
                            </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">Schicht 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 Schicht stattfindet">
                        </div>
                        <div class="col-md-6">
                            <label for="fftrainerinput"> Schichtleiter:</label>
                            <input type="text" id="fftrainerinput" class="form-control"
                                   placeholder="Schichtleiter des Schichtes">
                        </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="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">Schicht 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">Schicht 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">Schicht löschen</h4>
            </div>
            <div class="modal-body">
                <p>Sind Sie sicher, dass Sie diesen Schicht <b>unwiderruflich</b> löschen möchten?</p>
                <p><i class="fa fa-warning fa-lg"></i> Es werden hiermit auch alle dem Schicht 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>