{{-- {{ Html::style(config('app.assets_url').'/components/bootstrap-v3/dist/css/bootstrap.min.css') }} --}}
{{-- {{ Html::style('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css') }} --}}

<link rel="stylesheet" href="/Modules/Media/Assets/css/cropper.min.css">
<link rel="stylesheet" href="/Modules/Media/Assets/css/lfm.css">
<link rel="stylesheet" href="/Modules/Media/Assets/css/mfb.css">

{{-- {{ Html::style(config('app.assets_url').'/components/jquery-ui/themes/smoothness/jquery-ui.min.css') }} --}}

<style type="text/css">
.active{outline: solid 2px #337ab7;}

/*.choose_image{width: 100%;}
.active{outline: solid 3px #337ab7;}
.panel-body{height:80%}
.heading{height: 10%}
.panel-heading{height: 100%}
.panel-footer{height: 10%}
#main{height: 100%;background: white;padding: 0px;}
.panel{margin-bottom: 0px !important}
#nav{background: white;border-radius: 0px;border-left: 0px;border-right: 0px;border-top: 0px;}
.panel-body{padding: 0px}
.sidebar{padding-top: 15px;}
#content{padding:0px 10px 10px }*/
</style>
<div class="container-fluid my_container" id="wrapper">
 {{--  <div class="panel panel-primary hidden-xs heading">
    <div class="panel-heading clearfix">
      <h1 class="panel-title col-md-6">Quản lý Media</h1>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    </div>
  </div> --}}

  <div class="panel-body">
    <div class="col-sm-2 hidden-xs sidebar">
      <div id="tree"></div>
    </div>

    <div class="col-sm-10 col-xs-12" id="main">
      <nav class="navbar navbar-default" id="nav">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-buttons">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand clickable hide" id="to-previous">
            <i class="fa fa-arrow-left"></i>
            <span class="hidden-xs">{{ trans('media::lfm.nav-back') }}</span>
          </a>
          {{-- <a class="navbar-brand visible-xs" href="#">{{ trans('media::lfm.title-panel') }}</a> --}}
          <ul class="nav navbar-nav navbar-left">
            <li>
              <a href="#" id="add-folder" data-mfb-label="{{ trans('media::lfm.nav-new') }}">
                <i class="fa fa-folder"></i> {{ trans('media::lfm.nav-new') }}
              </a>
            </li>
            <li>
              <a href="#" id="upload" data-mfb-label="{{ trans('media::lfm.nav-upload') }}">
                <i class="fa fa-upload"></i> {{ trans('media::lfm.nav-upload') }}
              </a>
            </li>
          </ul>
        </div>
        <div class="collapse navbar-collapse" id="nav-buttons">
          <ul class="nav navbar-nav navbar-right">
            {{-- <li>
              <a class="clickable" id="thumbnail-display">
                <i class="fa fa-th-large"></i>
                <span>{{ trans('media::lfm.nav-thumbnails') }}</span>
              </a>
            </li> --}}
         {{--    <li>
              <a class="clickable" id="list-display">
                <i class="fa fa-list"></i>
                <span>{{ trans('media::lfm.nav-list') }}</span>
              </a>
            </li> --}}
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                {{ trans('media::lfm.nav-sort') }} <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#" id="list-sort-alphabetic">
                    <i class="fa fa-sort-alpha-asc"></i> {{ trans('media::lfm.nav-sort-alphabetic') }}
                  </a>
                </li>
                <li>
                  <a href="#" id="list-sort-time">
                    <i class="fa fa-sort-amount-asc"></i> {{ trans('media::lfm.nav-sort-time') }}
                  </a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </nav>
      <div class="visible-xs" id="current_dir" style="padding: 5px 15px;background-color: #f8f8f8;color: #5e5e5e;"></div>
      <div id="alerts"></div>
      <div id="content"></div>
    </div>
  </div>
    <div class="panel-footer clearfix">
      <button type="button" class="btn btn-default pull-right" id="btn-use-file">Thêm File</button>
    </div>
</div>
<div class="modal" id="uploadModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" onclick='$("#uploadModal").modal("hide")' aria-label="Close"><span aia-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">{{ trans('media::lfm.title-upload') }}</h4>
      </div>
      <div class="modal-body">
        <form action="{{ route('unisharp.lfm.upload') }}" role='form' id='uploadForm' name='uploadForm' method='post' enctype='multipart/form-data'>
          <div class="form-group" id="attachment">
            <label for='upload' class='control-label'>{{ trans('media::lfm.message-choose') }}</label>
            <div class="controls">
              <div class="input-group" style="width: 100%">
                <input type="file" id="upload" name="upload[]" multiple="multiple">
              </div>
            </div>
          </div>
          <input type='hidden' name='working_dir' id='working_dir'>
          <input type='hidden' name='type' id='type' value='{{ request("type") }}'>
          <input type='hidden' name='_token' value='{{csrf_token()}}'>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" onclick='$("#uploadModal").modal("hide")'>{{ trans('media::lfm.btn-close') }}</button>
        <button type="button" class="btn btn-primary" id="upload-btn">{{ trans('media::lfm.btn-upload') }}</button>
      </div>
    </div>
  </div>
</div>

{{-- {{ Html::script(config('app.assets_url').'/components/jquery/dist/jquery.min.js') }} --}}
{{-- {{ Html::script(config('app.assets_url').'/components/bootstrap-v3/dist/js/bootstrap.min.js') }} --}}
{{ Html::script('//cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js') }}
{{-- {{ Html::script(config('app.assets_url').'/components/jquery-ui/jquery-ui.min.js') }} --}}
<script src="/Modules/Media/Assets/js/cropper.min.js"></script>
<script src="/Modules/Media/Assets/js/jquery.form.min.js"></script>

<script>
  var route_prefix = "{{ url('/') }}";
  var lfm_route = "{{ url(config('lfm.prefix')) }}";
  var lang = {!! json_encode(trans('media::lfm')) !!};
</script>
<script src="/Modules/Media/Assets/js/script.js"></script>
<script>
  $.fn.fab = function () {
    var menu = this;
    menu.addClass('mfb-component--br mfb-zoomin').attr('data-mfb-toggle', 'hover');
    var wrapper = menu.children('li');
    wrapper.addClass('mfb-component__wrap');
    var parent_button = wrapper.children('a');
    parent_button.addClass('mfb-component__button--main')
      .append($('<i>').addClass('mfb-component__main-icon--resting fa fa-plus'))
      .append($('<i>').addClass('mfb-component__main-icon--active fa fa-times'));
    var children_list = wrapper.children('ul');
    children_list.find('a').addClass('mfb-component__button--child');
    children_list.find('i').addClass('mfb-component__child-icon');
    children_list.addClass('mfb-component__list').removeClass('hide');
  };
  $('#fab').fab({
    buttons: [
      {
        icon: 'fa fa-folder',
        label: "{{ trans('media::lfm.nav-new') }}",
        attrs: {id: 'add-folder'}
      },
      {
        icon: 'fa fa-upload',
        label: "{{ trans('media::lfm.nav-upload') }}",
        attrs: {id: 'upload'}
      }
    ]
  });
// var images_src = [];
// var keyPressed = false;
// $(document).bind('keydown', function (e) {
//     keyPressed = true;
// });
// $(document).bind('keyup', function (e) {
//     keyPressed = false;
// });

// $("#content").on('click','.square.file-item',function(e) {
//     if(keyPressed) {
//           $(this).toggleClass('active');
//     } else {
//           $('.square.file-item').removeClass("active");
//           $(this).addClass("active");
//     }
//     return false;
//   });

</script>