@extends('layout.layout')

{{-- Style --}}
@push('links')
@endpush

{{-- Content --}}
@section('content')
@include('custom::component.reply-btn', ['url' => $back_route])
<div class="row mb-3">
  <div class="col-12">
    <form method="POST" id="form">
      <div class="shadow-sm p-3 mb-4 bg-white rounded-lg">
        <h3 class="font-weight-bold text-center">報名人員範例匯出</h3>
        <hr>
        @csrf
        <div class="col-12 text-center mt-4">
          <input type="button" class="btn btn-lg btn-success font-weight-bold exportBtn" value="範例匯出">
        </div>
      </div>
    </form>
  </div>
  <div class="col-12">
    <form method="POST" id="importform">
      <div class="shadow-sm p-3 mb-5 bg-white rounded-lg">
        <h3 class="font-weight-bold text-center">報名人員匯入</h3>
        <hr>
        @csrf
        <div class="form-group row mt-4">
          <div class="col-12 text-center">
            <label class="upfileLabel btn btn-success btn-lg font-weight-bold" for="importBtn"><span class="">上傳匯入</span></label>
            <input id="importBtn" type="file" accept=".xlsx" hidden>
          </div>
          <div class="col-12 text-center">
            <small class="text-muted">上傳格式: .xlsx</small>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>
@endsection

{{-- Script --}}
@push('scripts')
<script src="https://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script>
var export_route = "{{$export_route}}";
var import_route = "{{$import_route}}";
</script>
<script>
  $(document).ready(function() {
    $(document).on('click', '.exportBtn', function() {
      var url = export_route;
      var form = $("#form");
      if (!form[0].checkValidity()) {

        form[0].reportValidity();
        return;
      }

      LoadingCover.show();
      $('.alert').remove();
      $.ajax({
        url: url ,
        type: 'POST',
        data: form.serialize(),
        success: function(data){
          LoadingCover.hide();
          window.location.reload();
        },
        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" );
        }
      });

    });

    $(document).on('change', '#importBtn', function(e) {
      var files = e.target.files;
      if (files.length<=0) {
        return;
      }
      var form = $("#importform");
      if (!form[0].checkValidity()) {

        form[0].reportValidity();

        $('#importBtn').val('');
        return;
      }

      if (upload_confirm()) {
        $('html').scrollTop(0);
        xlsx_upload();
        return;
      }else {
        $('#importBtn').val('');
        return;
      }
    });

    function xlsx_upload(){
      var data = new FormData();
      var form = $("#importform");
      var form_data = form.serializeArray();
      for (var i = 0; i < form_data.length; i++) {
        var input = form_data[i];
        data.append(input.name, input.value);
      }
      data.append("file",$('#importBtn')[0].files[0]);
      LoadingCover.show();
      $.ajax({
        url: import_route ,
        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;
      }
    }

  });
</script>
@endpush