@extends('adminlte::page')

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

@section('content_header')
  <h1>{{ $general['title'] }}</h1>
@stop

@section('content')
@php
    $ajaxUrl = "/admin/".$general['cont_name'];
@endphp
<div id="editor_container">
  <div id="" class="card col-12">
    <div class="card-header">
      <div class="card-title">
        {{ $general['sub_title'] }}
      </div>
      <div class="card-tools">
        <a class="add_new" href="javascript:void(0)" title="Add')"><i class="fa fa-plus-square"></i></a>
      </div>
    </div>
    <div class="card-body justify-content-center align-items-center">
      <div class="row" id="">
        <div class="col-12 pb-2">
            <div class="col-12 d-none pt-2 pb-2" id="editor_div">
            </div>
        </div>
        <div class="col-12">
          <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="{{ $ajaxUrl }}/browse?{{ $qstring }}"
            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>
                <th
                  data-field="created_at"
                  data-sortable="true"
                  data-formatter="dateFormatter"
                  data-visible="true">
                  Kreiran
                </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="status" data-sortable="true" data-align="center" data-formatter="statusFormatter">Status</th>
                <th data-align="center"
                  data-formatter="optFormatter"
                  data-events="optEvents"
                  data-sortable="false">
                  Akcije
                </th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </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')
  <style type="text/css">
    .zoom {
      transition:all .2s;
      position: inherit;
      text-align: center;
    }
    .zoom .card-body {
    }
    .zoom .card-title {
      font-size: 1.4rem;
      font-weight: bold;
      float: none;
    }
    .zoom:hover {
      z-index:25;
      transform:scale(1.15);
      box-shadow:0 .46875rem 4.1875rem rgba(4,9,20,.05),0 .9375rem 2.40625rem rgba(4,9,20,.05),0 .25rem 1.3125rem rgba(4,9,20,.06),0 .125rem 1.1875rem rgba(4,9,20,.06);
      cursor:pointer;
      background:#fff
    }

    td.editor, #editor_div {
      background-color: #F5DEB3 !important;
    }
    .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);
      }
    }

    .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;
    }

    .ui.label {
      background-color: #EEE;
      color: #666 !important;
      font-size: 13px;
    }
    .ui.label .icon:before {
      content: '\f00d';
      font-family: fontAwesome;
      font-style: normal;
      font-size: 12px;
      padding-left: 5px;
      position: relative;
      top: -1px;
    }
    .ui.label .icon:hover:before {
      color: #F00;
    }
    .ui.selection.dropdown {
      min-height: inherit;
    }
    .bootstrap-table .fixed-table-container .fixed-table-body {
      overflow: visible !important;
    }
  </style>
@stop

@section('js')
	<script src="/js/jquery.blockUI.js"></script>
  <script>
	  var blocked = [];
    // var ajaxUrl = "/admin/{{ $general['cont_name'] }}";
    var ajaxUrl = '{{ $ajaxUrl }}';
    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 breadFormatter(value, row) {
      var t = [];
      switch(value) {
        case 'grupa':
          break;
        case 'objekat':
          t.push('<a class="objekat" href="javascript:void(0)" data-id="'+row.id+'" title="Idi na objekat"><i class="fa fa-arrow-alt-circle-left"></i></a>');
          break;
      }
      return t.join('');
    }

	  function optFormatter(value, row) {
	    var t = [];

      // if(row.status == 0) {
  	    t.push('<a class="delete mr-2" href="javascript:void(0)" data-id="'+row.id+'" title="Delete"><i class="fa fa-trash"></i></a>');
      // }
	    t.push('<a class="edit mr-2" href="javascript:void(0)" title="Edit"><i class="fa fa-edit"></i></a>');
      // if(row.status == 0) {
        t.push('<a class="mr-2" href="{{ $ajaxUrl }}/' + row.id + '/statistika" title="Statistika"><i class="fa fa-binoculars"></i></a>');
        t.push('<a class="next" href="javascript:void(0)" title="Detalji"><i class="fa fa-arrow-alt-circle-right"></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 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');
        $('#listing_table a.edit').addClass('d-none');
        $("#ulica_id").load('/admin/objekat/ulicepogradu/'+$("#grad_id").val());

        openEditor($("#editor_div"), -1);
      });
    })

  function statusFormatter(value, row, index) {
    switch(row.status) {
      case 0:
        return '<div class="badge badge-pill pl-2 pr-2 badge-success">Otvoren</div>';
        break;
      case 1:
        return '<div class="badge badge-pill pl-2 pr-2 badge-warning">Zaključan</div>';
        break;
      case 2:
        return '<div class="badge badge-pill pl-2 pr-2 badge-danger">Arhiviran</div>';
        break;
    }
  }

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

  function openEditor(element, index){
    $('.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();
      });

      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($("#listing_table").bootstrapTable('getRowByUniqueId', response.data.id)){
                $("#listing_table").bootstrapTable('updateByUniqueId', {id: response.data.id, row: response.data});
              }else
                window.location.href = '';
            }
            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');
            $('#listing_table a.edit').removeClass('d-none');
          },
          error: function (response) {
            unBlockAll();
            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');
      $('#listing_table a.edit').removeClass('d-none');
      return false;
    });

  }
    window.breadEvents = {
      'click .objekat': function (e, value, row, index) {
        window.location.href = '/admin/objekat?' + $(e.currentTarget).closest('tr').data('qs');
      },
    }

	  window.optEvents = {
      'click .next': function (e, value, row, index) {
        window.location.href = '/admin/ocitavanje/' + row.id + '/detalji';
      },
	    'click .edit': function (e, value, row, index) {
	      $('#listing_table').removeClass('table-hover').bootstrapTable('expandRow', index);
	      $('#listing_table a.edit').addClass('d-none');
	      $('#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;
	    }
	  }

	  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