@extends('layout.layout')

{{-- Style --}}
@push('links')
<style nonce="{{ csp_nonce() }}">
  .hidden{
    display: none;
  }
  #log-field{
    background-color: #F2F2F2;
    border-left: solid 5px #191919;
    color: #7F7F7F;
    height:500px;
  }
</style>
@endpush

{{-- Content --}}
@section('content')
<div class="row mb-3 btn-action-section">
  <div class="col-12 text-right">
    <i class="fas fa-spinner fa-pulse fa-2x loading-icon @if(!$cpa_ing) hidden @endif mr-3"></i><button class="btn btn-success btn-lg syncBtn mr-0 mr-sm-2" @if($cpa_ing) disabled @endif><i class="fas fa-sync-alt"></i><span class="ml-1">同步</span></button>
  </div>
  <div class="col-12 text-right mt-3">
    <span class="text-danger">上次同步時間 : </span><span class="text-danger last_cpa_updated">{{$last_cpa_updated ?? '無'}}</span>
  </div>
</div>
<div class="row mb-3">
  <div class="col">
    <div class="w-100 overflow-auto p-3" id="log-field">

    </div>
  </div>
</div>
@endsection

{{-- Script --}}
@push('scripts')
<script nonce="{{ csp_nonce() }}">
var syncRoute = "{{$sync_route}}";
var logRoute = "{{$log_route}}";
$(document).ready(function() {
  var timer;
  $(document).on('click', '.syncBtn', function() {
    if (!confirm('同步後單位及職稱均會更新與CPA相符\n\n您確定要同步嗎？')) {
      return;
    }

    $(".syncBtn").prop("disabled", true);
    $(".loading-icon").removeClass('hidden');
    $.ajax({
      url: syncRoute ,
      type: 'POST',
      data: {
          _token: $('meta[name="csrf-token"]').attr('content'),
      },
      success: function(data){

      },
      error: function(xhr){
        console.log(xhr);
      }
    });
    clearTimeout(timer);
    timer = setInterval("log_render()",2000);
  });

  log_render();
  timer = setInterval("log_render()",3000);
});
function log_render(){
  $.ajax({
    url: logRoute ,
    type: 'POST',
    data: {
        _token: $('meta[name="csrf-token"]').attr('content'),
    },
    success: function(data){
      $('#log-field').html(data.content);
      updateScroll();
      if (data.cpa_ing==1) {
        $(".syncBtn").prop("disabled", true);
        $(".loading-icon").removeClass('hidden');
      }else {
        $(".syncBtn").prop("disabled", false);
        $(".loading-icon").addClass('hidden');
      }
      if (data.last_cpa_updated!==null) {
        $('.last_cpa_updated').html(data.last_cpa_updated);
      }
    },
    error: function(xhr, type){
      console.log(xhr);
    }
  });
}

function updateScroll(){
    var element = document.getElementById("log-field");
    element.scrollTop = element.scrollHeight;
}
</script>
@endpush