@extends('layout.layout')

{{-- Style --}}
@push('links')
<link href="{{ asset('css/datatable/datatables.min.css') }}" rel="stylesheet" type="text/css">
@endpush

{{-- Content --}}
@section('content')
<input type="hidden" id="js-datatable-baseUrl" value="{{$datatable_route}}" />
<div class="row mb-3 btn-action-section">
  <div class="col-md text-right">
    <a class="btn btn-lg btn-success" href="{{$create_route}}">
      <i class="fas fa-plus fa-fw"></i><span class="ml-1">新增</span>
    </a>
    <button class="btn btn-success btn-lg exportBtn"><i class="fas fa-file-download"></i><span class="ml-1">匯出</span></button>
    <label class="upfileLabel btn btn-success btn-lg mb-0" for="importBtn"><i class="fas fa-file-upload"></i><span class="ml-1">匯入</span></label>
    <input id="importBtn" type="file" accept=".xlsx" hidden>
  </div>
</div>
<div class="row mb-3">
  <div class="col overflow-auto">
    <table class="table table-striped table-hover steps-datatable" id="dataTable" style="min-width:1200px">
      <thead class="thead-light text-center">
        <tr>
          <th scope="col">帳號</th>
          <th scope="col">姓名</th>
          <th scope="col">信箱</th>
          <th scope="col">身份</th>
          <th scope="col">狀態</th>
          <th scope="col">最後登入時間</th>
          <th scope="col">&ensp;</th>
        </tr>
      </thead>
      <tbody>
        <tr><td colspan="7" class="text-center">查無資料</td></tr>
      </tbody>
      <tfoot></tfoot>
    </table>
  </div>
</div>
@endsection

{{-- Script --}}
@push('scripts')
<script src="https://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="{{ asset('js/datatable/datatables.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/datatable/datatable-default-setting.js') }}"></script>
<script type="text/javascript" src="{{ Module::asset('user:js/admin/index.js') }}"></script>
<script type="text/javascript">
  var userRoute = "{{route('admin.user.index')}}";
  var exportRoute = "{{route('admin.user.export')}}";
  var importRoute = "{{route('admin.user.import')}}";
  $(document).ready(function() {

    $(document).on('click', '.exportBtn', function() {
      var url = exportRoute;

      LoadingCover.show();
      $('.alert').remove();
      $.ajax({
        url: url ,
        type: 'POST',
        data: {
            _token: $('meta[name="csrf-token"]').attr('content'),
        },
        success: function(data){
          LoadingCover.hide();
          window.location=userRoute;
        },
        error: function(xhr){
          LoadingCover.hide();
          var errors = xhr.responseJSON;
          var alerts = [];
          for (var i = 0; i < Object.keys(errors).length; i++) {
            var error_arr = errors[Object.keys(errors)[i]];
            for (var j = 0; j < error_arr.length; j++) {
              alerts.push({ type: "danger", content: error_arr[j] });
            }
          }
          $( "#AlertTemplate" ).tmpl( alerts )
          .prependTo( "#calendarForm-response-alert" );
        }
      });

    });

    $(document).on('change', '#importBtn', function(e) {
      var files = e.target.files;
      if (files.length<=0) {
        return;
      }
      if (upload_confirm()) {
        xlsx_upload();
        return;
      }else {
        return;
      }
    });

    function xlsx_upload(){
      var data = new FormData();
      var _token = $('meta[name="csrf-token"]').attr('content')
      data.append("file",$('#importBtn')[0].files[0]);
      data.append("_token", _token);
      LoadingCover.show();
      $.ajax({
        url: importRoute ,
        type: 'POST',
        data: data,
        contentType:false,
        cache:false,
        processData:false,
        success: function(data){
          window.location.reload();
        },
        error: function(xhr, type){
          $('#importBtn').val('');
          LoadingCover.hide();
          var errors = xhr.responseJSON;
          var alerts = [];
          for (var i = 0; i < Object.keys(errors).length; i++) {
            var error_arr = errors[Object.keys(errors)[i]];
            for (var j = 0; j < error_arr.length; j++) {
              alerts.push({ type: "danger", content: error_arr[j] });
            }
          }
          $( "#AlertTemplate" ).tmpl( alerts )
          .prependTo( "#component-response-alert" );
        }
      });
    }

    function upload_confirm() {
      var msg = "您真的確定要上傳嗎？\n\n請確認！";
      if (confirm(msg)==true){
      return true;
      }else{
      return false;
      }
    }
    $(document).on('click', '.delete-btn', function() {
      var form = $(this).parent();
      if (!confirm('刪除後無法復原\n\n您確定要刪除嗎？')) {
        return;
      }
      LoadingCover.show();
      form[0].submit();
    });
  });
</script>
@endpush