@extends('layouts.app')

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

    </script>
    <div class="container courses-container">
        <div class="panel panel-default panel-bg">
            <div class="panel-heading">Bilder</div>
            <div class="panel-body">
                {!! $content !!}
            </div>
        </div>
    </div>


    <div id="uploadImageModal" 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">Bild hochladen</h4>
                </div>
                <div class="modal-body">
                    <h4>Ziehen Sie die Bilder in die Box oder klicken Sie darauf um Bilder hochzuladen.</h4>
                    <br>
                    <div class="row">
                        <div class="col-lg-1 no-padding"></div>
                        <div class="col-lg-10 no-padding">
                            <!-- <form action="//url('/pictures/file/1')"
                                   class="dropzone"
                                   id="my-awesome-dropzone"></form>-->
                            <div class="dropzone" id="dropzoneFileUpload2" enctype="multipart/form-data"></div>
                        </div>

                    </div>
                    <br>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success" data-dismiss="modal" id="hochladenButton"><i
                                    class="fa fa-check" aria-hidden="true"></i> Fertig
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="deleteImageModal" 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">Bild löschen</h4>
                </div>
                <div class="modal-body">
                    <p>Wollen Sie dieses Bild wirklich löschen?</p>
                    <br>
                    <div id="imageDivDel" style="text-align: center"></div>
                    <br>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal"> Abbrechen
                        </button>
                        <button type="button" class="btn btn-danger imageDeleteSubmit" data-dismiss="modal">Löschen
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="wrongTypeModal" 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">Falsches Dateiformat</h4>
                </div>
                <div class="modal-body">
                    <p>Ups! Es wurde ein falsches Dateiformat verwendet. Erlaubt sind: JPEG und PNG.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">ok</button>
                </div>
            </div>

        </div>
    </div>

    <div id="imageDetailsModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h3 class="modal-title"><i class="fa fa-eye" aria-hidden="true"></i></h3>
                </div>
                <div class="modal-body">
                    <div id="lgmodalcont" style="text-align: center"></div>
                </div>
            </div>

        </div>
    </div>
@endsection