@extends('layouts.layout-2')

@section('content')

    <style>

        .nav-pills > .nav-item > .nav-link {
            height: 5rem;
            display: flex;
            align-items: center;
        }

        .nav-pills > .sub-item > .nav-link {
            height: 3rem;
            padding-left: 3rem;
        }

        .nav-pills > li.active > a, .nav-pills > li:hover > a {
            background-color: #ddd;
            border-radius: 0;
            color: #333844;
        }


        .carousel-image {
            height: 50vh;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            margin: 0 auto;
        }

        .carousel-indicators {
            bottom: 0;
        }

        .carousel-label, .carousel-label:hover {
            position: absolute;
            bottom: 0;
            background: linear-gradient(transparent 10px, rgba(0, 0, 0, .4), rgba(0, 0, 0, .5));
            padding: 40px 20px 30px;
            width: 100%;
            color: white;
            word-break: break-word;
            text-align: center;
        }

        .carousel-control-background {
            border-radius: 50%;
            width: 25px;
            height: 25px;
            box-shadow: 0 0 10px #666;
            background-color: #666;
        }

        #uploadForm > .dz-default.dz-message {
            border: 2px dashed #ccc;
            border-radius: 5px;
            color: #aaa;
            margin: 0;
            padding: 3rem 0;
        }
        #lfm_empty {
            padding-bottom: 0.8em;
        }
        .messages-card {
            overflow: visible;
        }
        .badge.indicator {
            margin-left: 0.8em;
            width: 0.8em;
            height: 0.8em;
        }
        .file-manager-row-view .file-item-changed {
            width: auto;
        }
        .default-style .file-manager-row-view .file-item-name {
            width: auto;
        }


    </style>
    <h4 class="font-weight-bold mb-4">
        Medien
    </h4>
    <div id="alerts"></div>

    <div class="card messages-card">
        <div class="row no-gutters">

            <!-- content list -->
            <div class="col">
                <div class="file-manager-actions container-p-x py-2">
                    <div>
                        <button id="lfm_upload" type="button" class="btn btn-primary mr-2"><i class="fas fa-upload"></i>&nbsp; Hochladen</button>
                        <button id="lfm_add-file" type="button" class="btn btn-default mr-2"><i class="fas fa-file"></i> Neue Datei</button>
                        <button id="lfm_add-folder" type="button" class="btn btn-secondary mr-2"><i class="fas fa-folder"></i> Neuer Ordner</button>
                        <div class="btn-group mr-2 d-none media-multi-settings">
                            <button type="button" class="btn btn-default md-btn-flat dropdown-toggle px-2" data-toggle="dropdown"><i class="ion ion-ios-settings"></i> Optionen</button>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="javascript:void(0)" data-action="selected_items_move"><i class="fa fa-reply-all"></i> verschieben</a>
                                <a class="dropdown-item" href="javascript:void(0)" data-action="selected_items_remove"><i class="fa fa-trash-alt"></i> löschen</a>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="btn-group btn-group-toggle" data-toggle="buttons">
                            <label class="btn btn-default icon-btn md-btn-flat active">
                                <input type="radio" name="file-manager-view" value="file-manager-col-view" checked> <span class="ion ion-md-apps"></span>
                            </label>
                            <label class="btn btn-default icon-btn md-btn-flat">
                                <input type="radio" name="file-manager-view" value="file-manager-row-view"> <span class="ion ion-md-menu"></span>
                            </label>
                        </div>
                    </div>
                </div>
                <!-- <a class="navbar-brand d-block d-lg-none" id="current_folder"></a> -->

                <div class="container-m-nx container-m-ny bg-lightest mb-2" id="lfm_breadcrumbs">

                    <ol class="breadcrumb text-big container-p-x py-3 m-0">
                        <li class="breadcrumb-item">
                            <a href="javascript:void(0)">home</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="javascript:void(0)">projects</a>
                        </li>
                        <li class="breadcrumb-item active">site</li>
                    </ol>

                    <hr class="m-0">
                </div>
                <div id="lfm_loading" class="d-none text-center mb-4"><i class="fas fa-spinner fa-spin"></i></div>
                <div id="lfm_empty" class="text-center d-none">
                    <i class="far fa-folder-open"></i>
                    {{ trans('laravel-filemanager::lfm.message-empty') }}
                </div>

                <div id="lfm_item-template" class="file-item d-none">
                    <div class="file-item-select-bg bg-primary"></div>
                    <label class="file-item-checkbox custom-control custom-checkbox lfm-click-disable">
                        <input type="checkbox" class="custom-control-input lfm-control-input lfm-click-disable">
                        <span class="custom-control-label lfm-click-disable"></span>
                    </label>
                    <a href="javascript:void(0)" class="file-item-name">

                    </a>
                    <div class="file-item-changed"></div>
                    <div class="file-item-actions btn-group lfm-click-disable">
                        <button type="button" class="btn btn-default btn-sm rounded-pill icon-btn borderless md-btn-flat hide-arrow dropdown-toggle lfm-click-disable" data-toggle="dropdown"><i class="ion ion-ios-more lfm-click-disable"></i></button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="javascript:void(0)" data-action="item_rename"><i class="fa fa-sync-alt"></i> umbenennen</a>
                            <a class="dropdown-item" href="javascript:void(0)" data-action="item_move"><i class="fa fa-reply"></i> verschieben</a>
                            <a class="dropdown-item link-item-download" href="javascript:void(0)" data-action="item_download"><i class="fa fa-download"></i> download</a>
                            <a class="dropdown-item link-item-crop" href="javascript:void(0)" data-action="item_crop"><i class="fa fa-crop"></i> zuschneiden</a>
                           <!-- <a class="dropdown-item link-item-resize" href="javascript:void(0)" data-action="item_resize"><i class="fa fa-crop"></i> Größe ändern</a> -->

                            <a class="dropdown-item link-item-color" href="javascript:void(0)" data-action="item_color"><i class="fa fa-paint-brush"></i> Farbe</a>
                            <a class="dropdown-item" href="javascript:void(0)" data-action="item_trash"><i class="fa fa-trash"></i> löschen</a>
                        </div>
                    </div>
                </div>


                <div class="file-manager-container file-manager-col-view" id="file-manager-content">
                </div>
            </div>

            <!-- / content list -->
            {{--
                            <!-- sidebox -->
                            <div class="messages-sidebox messages-scroll col">

                                <div class="card-header text-uppercase text-expanded text-muted">Areas</div>
                                <div class="card-body py-3">
                                    <div class="media align-items-center">
                                        <div class="media-body">
                                            <button type="button" class="btn btn-primary btn-block" data-toggle="modal" data-target="#modals-load-content"
                                                    data-id="add"
                                                    data-model="area"
                                                    data-action="area-content"
                                                    data-request=""
                                                    data-route="{{ route('iq_content_modal_load') }}"><i class="ion ion-ios-add-circle"></i> Add area</button>
                                        </div>
                                        <a href="javascript:void(0)" class="messages-sidebox-toggler d-lg-none d-block text-muted text-large font-weight-light pl-4">&times;</a>
                                    </div>
                                </div>

                                <div class="card-header text-uppercase text-expanded text-muted">Filter</div>
                                <div class="card-body py-3">
                                    <a href="javascript:void(0)" class="d-flex justify-content-between align-items-center text-body font-weight-bold py-2">
                                        <div>
                                            All
                                        </div>
                                        <div class="badge badge-primary">{{ count($models) }}</div>
                                    </a>
                                    <hr class="border-light my-4">
                                </div>
                            </div>
                            <!-- /  sidebox -->
                            --}}

        </div><!-- / .row -->
    </div><!-- / .card -->

    <div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">{{ trans('laravel-filemanager::lfm.title-upload') }}</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aia-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    {!! Form::open([ 'url' => route('iqcontent.lfm.upload'), 'method' => 'post', 'files' => true, 'enctype' => 'multipart/form-data', 'class' => 'dropzone', 'id' => 'uploadForm' ]) !!}
                    <div class="form-group" id="attachment">
                        <div class="controls text-center">
                            <div class="input-group w-100">
                                <a class="btn btn-primary w-100 text-white" id="upload-button">{{ trans('laravel-filemanager::lfm.message-choose') }}</a>
                            </div>
                        </div>
                    </div>
                    <input type='hidden' name='working_dir' id='working_dir'>
                    <input type='hidden' name='type' id='type' value='{{ request("type") }}'>
                    <div class="fallback">
                        <input name="file" type="file" multiple>
                    </div>
                    {!! Form::close() !!}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary w-100" data-dismiss="modal">{{ trans('laravel-filemanager::lfm.btn-close') }}</button>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="notify" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary w-100" data-dismiss="modal">{{ trans('laravel-filemanager::lfm.btn-close') }}</button>
                    <button type="button" class="btn btn-primary w-100" data-dismiss="modal">{{ trans('laravel-filemanager::lfm.btn-confirm') }}</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="dialog" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <input type="text" class="form-control">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary w-100" data-dismiss="modal">{{ trans('laravel-filemanager::lfm.btn-close') }}</button>
                    <button type="button" class="btn btn-primary w-100" data-dismiss="modal">{{ trans('laravel-filemanager::lfm.btn-confirm') }}</button>
                </div>
            </div>
        </div>
    </div>


    <div id="previewTemplate" class="d-none bg-light text-center">
        <div class="ui-bordered">
            <img src="#" alt="" class="img-fluid media-preview d-none" style="background-color: #fff;">
            <div class="file-manager-col-view d-none"></div>
            <div class="embed-responsive embed-responsive-16by9 d-none">
                <iframe class="embed-responsive-item" src="" allowfullscreen></iframe>
            </div>
            <div class="p-3">
                <h5 class="media-name"> </h5>
                <div class="form-group d-none">
                    <input type="text" class="form-control media-content" readonly>
                </div>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><i class="ion ion-md-link"></i></span>
                    </div>
                    <input type="text" class="form-control media-url" placeholder="Link" readonly>
                    <div class="input-group-append">
                        <span class="input-group-text"><a href="#" class="media-download"><i class="fas fa-external-link-alt"></i></a></span>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script>
        var lang = {!! json_encode(trans('laravel-filemanager::lfm')) !!};

    </script>
@endsection