@extends('survey::layouts.master')

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

{{-- 內容 --}}
@section('content')
<input type="hidden" id="js-datatable-url" value="{{route('admin.survey.answer.datatable', $survey->id)}}" />
<form method="POST" id="formStatus">
  <div class="csrfDiv">{{csrf_field()}}</div>
</form>
<div class="row mb-3">
  <div class="col-md text-right">
    <button type="button" class="btn btn-lg btn-primary answerExport" data-url="{{route('admin.survey.answer.export', $survey->id)}}">
      <i class="fas fa-file-download"></i><span class="ml-1">匯出</span>
    </button>
    <a class="btn btn-lg btn-success" href="{{route('admin.survey.show', $survey->id)}}">
      <span class="fas fa-reply mr-1"></span>返回
    </a>
  </div>
</div>
<div class="row mb-3">
  <div class="col overflow-auto">
    <table class="table table-striped table-hover steps-datatable" id="dataTable">
      <thead class="thead-light text-center">
        <tr>
          <th scope="row">填寫時間</th>
          <th scope="row">帳號/信箱</th>
          <th scope="row">狀態</th>
          <th scope="row">繳交時間</th>
          <th scope="row">&ensp;</th>
        </tr>
      </thead>
      <tbody>
        <tr><td colspan="5" class="text-center">查無資料</td></tr>
      </tbody>
      <tfoot></tfoot>
    </table>
  </div>
</div>
@endsection

{{-- Script --}}
@push('scripts')
<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 src="https://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script type="text/javascript">
var answerIndexRoute = '{{route("admin.survey.answer.index", $survey->id)}}';
$(document).ready(function() {
  $(document).on('click', '.answerExport', function() {
    var id = $(this).data('id');

    var url = $(this).data('url');

    LoadingCover.show();
    $('.alert').remove();
    $.ajax({
      url: url ,
      type: 'POST',
      data: {
          _token: $('meta[name="csrf-token"]').attr('content'),
      },
      success: function(data){
        LoadingCover.hide();
        window.location=answerIndexRoute;
      },
      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( "#component-response-alert" );
      }
    });

  });
});

if (typeof Object.assign != 'function') {
  Object.assign = function(target) {
    'use strict';
    if (target == null) {
      throw new TypeError('Cannot convert undefined or null to object');
    }

    target = Object(target);
    for (var index = 1; index < arguments.length; index++) {
      var source = arguments[index];
      if (source != null) {
        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
          }
        }
      }
    }
    return target;
  };
}
dataTableDefSetting.language.searchPlaceholder = "帳號/信箱";
var table = $("#dataTable").DataTable( Object.assign(dataTableDefSetting, {
  serverSide: true,
  stateSave: true,
  ajax: {
    url: $("#js-datatable-url").val(),
    type: 'POST',
    data: function(data) {
      data._token = $('.csrfDiv input').val();
    }
  },
  /**
   * 預設排序
   */
  "order": [
    ["0", "asc"]
  ],

  /**
   * targets: int
   * orderable: boolean 排序
   * orderData: array 複數排序
   * searchable: boolean 查詢
   * visible: boolean 顯示
   * className: string 加進去的class內容
   */
  "columnDefs": [
    { "targets": 0, 'orderable': true, 'searchable': false, 'className': 'align-middle text-center pr-3' },
    { "targets": 1, 'orderable': true, 'searchable': true, 'className': 'align-middle text-center pr-3' },
    { "targets": 2, 'orderable': true, 'searchable': false, 'className': 'align-middle text-center pr-3' },
    { "targets": 3, 'orderable': true, 'searchable': false, 'className': 'align-middle text-center pr-3' },
    { "targets": 4, 'orderable': false, 'searchable': false, 'className': 'align-middle text-right' }
  ]
}));
</script>
@endpush