@extends('master')
@section('title', '企业公告')
@section('main')
  <div class="app-main-banner">
    <h3>Foxymoon</h3>
    <p>{{$bandTitle or '盈狐科技————让报关业务变得更简单'}}</p>
  </div>

  <!-- Bootstrap -->
  <link rel="stylesheet" href="{{asset('upload/css/uploader.css')}}" rel="stylesheet" />
  <link rel="stylesheet" href="{{asset('upload/css/demo.css')}}" rel="stylesheet" />
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->

    <div class="container demo-wrapper">
      <div class="page-header">
        <h2>员工文件共享平台</h2>
      </div>

      <div class="row demo-columns">
        <div class="col-md-6">
          <!-- D&D Zone-->
          <div id="drag-and-drop-zone" class="uploader">
            <div>请拖拽文件到方框内</div>
            <div class="or">-or-</div>
            <div class="browser">
              <label>
                <span>选择文件</span>
                <input type="file" name="files[]" multiple="multiple" title='Click to add Files'>
              </label>
            </div>
          </div>
          <!-- /D&D Zone -->

          <!-- Debug box -->
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">详情</h3>
            </div>
            <div class="panel-body demo-panel-debug">
              <ul id="demo-debug">
              </ul>
            </div>
          </div>
          <!-- /Debug box -->
        </div>
        <!-- / Left column -->

        <div class="col-md-6">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">进展</h3>
            </div>
            <div class="panel-body demo-panel-files" id='demo-files'>
              <span class="demo-note">没有拖拽文件或上传文件...</span>
            </div>
          </div>
        </div>
        <!-- / Right column -->
      </div>

      <div class="alert alert-info">
        欢迎您使用盛大报关联合Foxymoon推出的新平台，目前是试运行期间，如果您发现BUG，设计不合理，还望您海涵并告知我们，邮箱345108530@qq.com，新年快乐！
      </div>

      <div class="demo-footer">
        <p>&copy; Foxymoon</p>
      </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="{{asset('upload/js/demo.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('upload/src/dmuploader.js')}}"></script>
    <script type="text/javascript">

      $('#drag-and-drop-zone').dmUploader({
        url: '/api/v3/file-upload?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjIxLCJpc3MiOiJodHRwOlwvXC93d3cueXRvbmdndWFuLmNuXC9hcGlcL3YzXC9sb2dpbiIsImlhdCI6MTQ4NjEyNDk3NCwiZXhwIjoxNDg4NzE2OTc0LCJuYmYiOjE0ODYxMjQ5NzQsImp0aSI6IjEzNDVlNjM0Mjg4Y2YxMmFjN2E3Mzg1ZDdiNTExM2QxIn0.3M4zEUY-gklTBhXAf2P9mbAfrpViNSjX9jOH450ZrN4',
        dataType: 'json',
        //allowedTypes: 'image/*',
        /*extFilter: 'jpg;png;gif',*/
        onInit: function(){
          $.danidemo.addLog('#demo-debug', 'default', '插件已经准备完毕...');
        },
        onBeforeUpload: function(id){
          $.danidemo.addLog('#demo-debug', 'default', '开始上传 #' + id);

          $.danidemo.updateFileStatus(id, 'default', 'Uploading...');
        },
        onNewFile: function(id, file){
          $.danidemo.addFile('#demo-files', id, file);
        },
        onComplete: function(){
          $.danidemo.addLog('#demo-debug', 'default', 'All pending tranfers completed');
        },
        onUploadProgress: function(id, percent){
          var percentStr = percent + '%';

          $.danidemo.updateFileProgress(id, percentStr);
        },
        onUploadSuccess: function(id, data){
          $.danidemo.addLog('#demo-debug', 'success', '上传文件 #' + id + ' 成功');

          $.danidemo.addLog('#demo-debug', 'info', '服务器返回 #' + id + ': ' + JSON.stringify(data));

          $.danidemo.updateFileStatus(id, 'success', '上传完成');

          $.danidemo.updateFileProgress(id, '100%');
        },
        onUploadError: function(id, message){
          $.danidemo.updateFileStatus(id, 'error', message);

          $.danidemo.addLog('#demo-debug', 'error', '上传文件失败 #' + id + ': ' + message);
        },
        onFileTypeError: function(file){
          $.danidemo.addLog('#demo-debug', 'error', '文件 \'' + file.name + '\' 不能被上传: 必须上传图片类型!');
        },
        onFileSizeError: function(file){
          $.danidemo.addLog('#demo-debug', 'error', '文件 \'' + file.name + '\' 不能被上传: 尺寸超过限制');
        },
        onFileExtError: function(file){
          $.danidemo.addLog('#demo-debug', 'error', '文件 \'' + file.name + '\' 该后缀名文件不允许上传');
        },
        onFallbackMode: function(message){
          $.danidemo.addLog('#demo-debug', 'info', '请使用其他浏览器,本浏览器不支持: ' + message);
        }
      });
    </script>
@endsection