@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="{{asset('upload/libs/html5shiv.js')}}"></script>
  <script src="{{asset('upload/libs/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="attachments[]" 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">
        阿迪达斯上传文件测试页面，如果您发现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 src="{{asset('upload/js/demo.min.js')}}"></script>
    <script src="{{asset('upload/src/dmuploader.js')}}"></script>

  <script>
      function getCookie(name){
        var arr,reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
        if(arr = document.cookie.match(reg)){
          return decodeURI(arr[2]);
        }else{
          location='/logout';
        }
      }

      var jwt_token=getCookie('jwt_token');

      $('#drag-and-drop-zone').dmUploader({
        url: '/api/v3/file-upload?token='+jwt_token,
        dataType: 'json',
        fileName: 'attachments[]',
        //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