@extends('adminlte::page')

@section('title', $general['title'])

@section('content_header')
  <h1>{{ $general['title'] }}</h1>
  <div class="h4 pt-2">{{ $general['sub_title'] }}</div>
@stop

@section('content')
<div id="" class="card col-6">
  <div class="card-body justify-content-center align-items-center">
    Očitavanje: <b>{{ $ocitavanje->godina }} {{ $ocitavanje->j_mesec }} {{ $ocitavanje->naziv }}</b>
  </div>
</div>
<div id="main_container">
<div class="row">
    <div class="col-lg-3 col-6">
      <div class="small-box bg-info">
        <div class="inner">
          <h3>Očitano: {{ $sume['kalorimetar - zbirni']['ocitano'] }}<br>Ukupno: {{ $sume['kalorimetar - zbirni']['prisutno'] }}</h3>
          <p>Zbirni kalorimetri</p>
        </div>
        <div class="icon">
          <i class="fas fa-fw fa-microchip "></i>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-6">
      <div class="small-box bg-warning">
        <div class="inner">
          <h3>Očitano: {{ $sume['kalorimetar - individualni']['ocitano'] }}<br>Ukupno: {{ $sume['kalorimetar - individualni']['prisutno'] }}</h3>
          <p>Individualni kalorimetri</p>
        </div>
        <div class="icon">
          <i class="fas fa-fw fa-microchip "></i>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-6">
      <div class="small-box bg-success">
        <div class="inner">
          <h3>Očitano: {{ $sume['alokator']['ocitano'] }}<br>Ukupno: {{ $sume['alokator']['prisutno'] }}</h3>
          <p>Alokatori</p>
        </div>
        <div class="icon">
          <i class="fas fa-fw fa-microchip "></i>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="action_container" class="card col-12">
  <div class="card-header">
    <div class="card-title">
      Kreirani obračuni
    </div>
    <div class="card-tools hideOnEdit">
      <button class="btn btn-info add_new hideOnCreate">
        Kreiraj novi obračun
      </button>
      <button disabled="" class="btn btn-info showOnCreate">
        <span role="status" aria-hidden="true" class="btnspn spinner-border spinner-border-sm"></span>
        Kreiranje novog obračuna je u toku
      </button>
    </div>
  </div>
  <div class="card-body justify-content-center align-items-center">
    <div class="col-12 d-none pt-2 pb-2" id="editor_div"></div>
    <table class="hiddenAtLoad d-none table-striped"
      id="listing_table"
      data-toggle="table"
      data-pagination="true"
      data-side-pagination="server"
      data-page-size="25"
      data-search="true"
      data-url="/admin/obracun/browse?ocitavanje={{ $ocitavanje->id }}"
      data-unique-id="id"
      data-sort-name="id"
      data-sort-order="desc"
      data-id-field="id"
      data-show-footer="false"
      data-row-style="rowStyle"
      data-row-attributes="rowAttributes"
      data-detail-view="true"
      data-detail-view-icon="true"
      data-detail-formatter="detailFormatter"
    >
      <thead>
        <tr>
          <th data-field="id" data-sortable="true" data-visible="true">
            #
          </th>
  @foreach ($fields as $key => $field)
  @if($field['list'])
          <th data-field="@if(array_key_exists('display_field', $field)){{ $field['display_field'] }}@else{{ $key }}@endif" data-sortable="true">
            {{ $field['label'] }}
          </th>
  @endif
  @endforeach
          <th data-field="godina" data-sortable="true" data-align="center">Godina</th>
          <th data-field="mesec" data-sortable="true" data-align="center">Mesec</th>
          <th data-field="closed" data-sortable="true" data-align="center" data-formatter="statusFormatter">Otvoren</th>
          <th
            data-field="created_at"
            data-sortable="true"
            data-formatter="dateFormatter"
            data-visible="true">
            Kreiran
          </th>
          <th data-align="center"
            data-formatter="optFormatter"
            data-events="optEvents"
            data-sortable="false">
            Akcije
          </th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</div>
<div class="spinner_overlay" id="spinner_overlay">
  <div class="w-100 d-flex justify-content-center align-items-center">
    <div class="spinner"></div>
  </div>
</div>          
@stop

@section('css')
<script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>
  <style type="text/css">
    .spinner {
      height: 60px;
      width: 60px;
      margin: auto;
      display: flex;
      position: absolute;
      -webkit-animation: rotation .6s infinite linear;
      -moz-animation: rotation .6s infinite linear;
      -o-animation: rotation .6s infinite linear;
      animation: rotation .6s infinite linear;
      border-left: 6px solid rgba(0, 174, 239, .15);
      border-right: 6px solid rgba(0, 174, 239, .15);
      border-bottom: 6px solid rgba(0, 174, 239, .15);
      border-top: 6px solid rgba(0, 174, 239, .8);
      border-radius: 100%;
    }

    @-webkit-keyframes rotation {
      from {
        -webkit-transform: rotate(0deg);
      }
      to {
        -webkit-transform: rotate(359deg);
      }
    }

    @-moz-keyframes rotation {
      from {
        -moz-transform: rotate(0deg);
      }
      to {
        -moz-transform: rotate(359deg);
      }
    }

    @-o-keyframes rotation {
      from {
        -o-transform: rotate(0deg);
      }
      to {
        -o-transform: rotate(359deg);
      }
    }

    @keyframes rotation {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(359deg);
      }
    }

    td.editor, #editor_div {
      background-color: #F5DEB3 !important;
    }

    #action_container.in_progress {

    }

    #action_container.in_editmode .hideOnEdit {
      display: none;
    }

    #action_container .showOnCreate {
      display: none;
    }

    #action_container.in_createmode .showOnCreate {
      display: block;
    }

    #action_container.in_createmode .hideOnCreate {
      display: none;
    }

    .spinner_overlay {
      position: absolute;
      display: none;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,0.3);
      z-index: 2;
      cursor: pointer;
    }
    </style>
@stop

@section('js')
	<script src="/js/jquery.blockUI.js"></script>
  <script>
	  var blocked = [];
    var ajaxUrl = '/admin/obracun';
    var queryStr = '{{ $qstring ?? '' }}';

	  $(document).ready(function() {
	    $(".hiddenAtLoad").removeClass('d-none');
	  });

	  $('#listing_table').on('load-success.bs.table post-body.bs.table', function(data, status, jqXHR) {
	    $('th:first-child, td:first-child', $(this)).addClass('d-none');;
	  });

	  function optFormatter(value, row) {
	    var t = [];
	    t.push('<a class="delete mr-2 hideOnEdit" href="javascript:void(0)" data-id="'+row.id+'" title="Delete"><i class="fa fa-trash"></i></a>');
	    t.push('<a class="edit mr-2 hideOnEdit" href="javascript:void(0)" title="Edit"><i class="fa fa-edit"></i></a>');
	    return t.join('');
	  }

    function dateFormatter(value, row) {
      if(Date.parse(value)) {
        const date = new Date(value);
        return new Intl.DateTimeFormat("lt-LT", {year: 'numeric',  month: '2-digit',  day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit'}).format(date);
      } else {
        return '-';
      }
    }

    function statusFormatter(value, row, index) {
      switch(row.closed) {
        case 0:
          return '<div class="badge badge-pill pl-2 pr-2 badge-success">Da</div>';
          break;
        case 1:
          return '<div class="badge badge-pill pl-2 pr-2 badge-danger">Ne</div>';
          break;
      }
    }

	  function detailFormatter(index, row, element) {
	    element.addClass('editor').load(ajaxUrl + '/'+row.id+'/edit?'+queryStr, function() {
	      openEditor(element, index);
	    });
	  }

    $(".add_new").click(function () {
      $("#editor_div").addClass('editor').removeClass('d-none').load(ajaxUrl + '/create?'+queryStr, function() {
        $('#listing_table').removeClass('table-hover');
        openEditor($("#editor_div"), -1);
      });
    })

    function rowAttributes(row, index) {
      return {
        'data-id': row.id
      }
    }

    function openEditor(element, index){
      $('#action_container').addClass('in_editmode');
      $('.ui.dropdown').dropdown();
      $(".hiddenAtLoad").removeClass('d-none');
      element.find(':input').first().focus();
      element.keyup(function (e) {
        if (e.which == 13) {
          $('.submit').click();
          return false;
        }
        if(e.which == 27) {
          $('.cancel').click();
          return false;
        }
      });
      $('.submit', element).click(function() {
        var form = $(this).closest("form");
        var formData = form.serializeArray();

        form.removeClass('was-validated');
        $.each($('.is-invalid'), function(key, value){
            $(value).removeClass('is-invalid').parent().find('.invalid-feedback').remove();
        });

        formData.push({name:'ocitavanjeID', value: '{{ $ocitavanje->id }}'});
        blockElement($(this).parents('.card'));
        var url = ajaxUrl ;
        if(index == -1) {
          var method = "POST";
        }else {
          var method = "PUT";
          url = url + '/'+form.data('id');
        }
        $.ajax({
            url: url+'?'+queryStr,
            dataType: "json",
            data: formData,
            type: method,
            cache: false,
            success: function (response) {
              unBlockAll();
              if(response.data) {
                if(response.status == 'updated') {
                  $("#listing_table").bootstrapTable('updateByUniqueId', {id: response.data.id, row: response.data});
                }else{
                  changeStatus({msg: "", running: true}, 'ObracunCreation');
                  clearTimeout(pollTimer);
                  pollTimer = setTimeout(poll, 5000);
                }
              }
              if(index == -1)
                $("#editor_div").removeClass('editor').addClass('d-none').html('');
              else
                $('#listing_table').addClass('table-hover').bootstrapTable('collapseRow', index);
              $('#listing_table i.noedit').addClass('d-none');
              $('#action_container').removeClass('in_editmode');
            },
            error: function (response) {
              unBlockAll();
              $('#action_container').removeClass('in_editmode');
              if (response.status == 422) {
                $.each(response.responseJSON.errors, function (i, error) {
                    var el = $(document).find('#'+i);
                    el.addClass('is-invalid');
                    el.after($('<div class="invalid-feedback">'+error[0]+'</div>'));
                });
              }else{
              }
            }
        });

        return false;
      });
      $('.cancel', element).click(function() {
        if(index == -1){
          $("#editor_div").removeClass('editor').addClass('d-none').html('');
        }else{
          $('#listing_table').addClass('table-hover').bootstrapTable('collapseRow', index);
        }
        $('#listing_table i.noedit').addClass('d-none');
        $('#action_container').removeClass('in_editmode');
        return false;
      });
    }


	  window.optEvents = {
      'click .next': function (e, value, row, index) {
        window.location.href = '/admin/ocitavanje/detalji/'+row.id;
      },
	    'click .edit': function (e, value, row, index) {
	      $('#listing_table').removeClass('table-hover').bootstrapTable('expandRow', index);
	      $('#action_container').addClass('in_editmode');
	      $('#listing_table i.noedit').removeClass('d-none');
	    },
	    'click .delete': function (e, value, row, index) {
	      var popOpts={
	        placement: 'left',
	        title: 'Delete Item',
	        html: true,
	        trigger: 'focus',
	        content: '<a class="btn btn-xs btn-danger decline" href="javascript:void(0)"><i class="fas fa-times"></i> Ne</a>&nbsp;<a class="btn btn-xs btn-success pull-right popover-confirm" href="javascript:void(0)"><i class="fas fa-check"></i> Da</a>',
	      }
	      $(e.currentTarget).popover(popOpts).popover('show').on('shown.bs.popover', function(e) {
	        var pdelete=$(this);
	        var pop=$(".popover");
	        var popButtons=pop.find('a').click(function(){
	          if($(this).is('.popover-confirm')){
	            var formData = [];
	            formData.push({name:'_token', value: '{{ csrf_token() }}'});
	            blockElement($(this).parents('.card'));
	            $.ajax({
	                url: ajaxUrl + '/' + row.id,
	                dataType: "json",
	                data: formData,
	                type: "DELETE",
	                cache: false,
	                success: function (response) {
	                  unBlockAll();
	                  if(response.error)
	                  {
	                    $('#ModalLabel').html(response.error.title);
	                    $('#ModalBody').html(response.error.msg);
	                    $("#AlertModal").modal('show');
	                  }else{
	                    $("#listing_table").bootstrapTable('removeByUniqueId', response.data.id);
	                  }
	                },
	                error: function (response) {
	                  unBlockAll();
	                }
	            });
	          }
	          pdelete.popover('dispose');
	        }); 
	      });
	      return false;
	    }
	  }

    let runningJobs = [];
    let pollTimer;
    poll();
    function poll() {
      $.ajax({
          url: ajaxUrl + '/getCreationStatus',
          type: "GET",
          dataType: "json",
          timeout: 2000,
          success: (data) => {
            parsePollResults(data);
          },
          complete: () => {
            pollTimer = setTimeout(poll, 3000);
          }
      })
    }

    function parsePollResults(data) {
      var t = Object.entries(data);
      for (var i = t.length - 1; i >= 0; i--) {
        var prop = t[i][0];
        if(typeof runningJobs[prop] === 'undefined'){
          runningJobs[prop] = {};
          changeStatus(data[prop], prop);
        }else if(data[prop].running != runningJobs[prop].running) {
          changeStatus(data[prop], prop);
        }
        if(data[prop].running){
          updateStatus(data[prop], prop);
        }
      }
    }

    function updateStatus(data, prop) {
    }

    function changeStatus(data, prop) {
      runningJobs[prop].running = data.running;
      var el = prop;
      if(data.running) {
        $("#action_container").addClass('in_createmode');
      }else{
        $("#action_container").removeClass('in_createmode');
        $("#listing_table").bootstrapTable('refresh');        
      }
    }

	  function blockElement(element)
	  {
      var bl = $("#spinner_overlay").clone();
      bl.removeAttr('id').appendTo(element);
      bl.css("display","flex");
      blocked.push(bl);
	  }

	  function unBlockAll()
	  {
	    for (var i = blocked.length - 1; i >= 0; i--) {
	      blocked[i].remove();
	    }
	  }
  </script>
@stop