@extends('adminlte::page')

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

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

@section('content')
@php
    $ajaxUrl = "/admin/".$general['cont_name'];
@endphp
@if($parents['grupa']||$parents['objekat'])
<div class="row mb-3">
  <div class="col-lg-12 col-xl-6">
    <div class="h3">unutar:</div>
    <table class="hiddenAtLoad d-none table table-striped table-bordered"
      id="dep_table"
      data-toggle="table"
      data-pagination="false"
      data-search="false"
      data-show-columns="false"
      data-show-footer="false"
      data-show-header="false"
      data-detail-formatter="def_detailFormatter"
    >
    <thead>
      <tr>
        <th></th>
        <th></th>
        <th data-align="center" data-formatter="breadFormatter" data-events="breadEvents"></th>
      </tr>
    </thead>
    <tbody>
@if($parents['grupa'])
  @foreach ($parents['grupa'] as $key => $field)
      <tr data-id="1">
        <td>Grupe</td>
        <td>{{ $field->ime_grupe}}, {{ $field->j_grad }} ({{ $field->j_tip }})</td>
        <td>grupa</td>
      </tr>
  @endforeach
@endif
@if($parents['objekat'])
      <tr data-id="2" data-qs="getrelObj={{ $parents['objekat']->j_grupa_ids}}">
        <td>Objekta</td>
        <td>{{ $parents['objekat']->prezime}} {{ $parents['objekat']->ime}}, {{ $parents['objekat']->j_ulica }} ({{ $parents['objekat']->j_grad }})</td>
        <td>objekat</td>
      </tr>
@endif
    </tbody>
    </table>
  </div>
</div>
@endif
<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-visible="false">
                  #
                </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-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;
      }
// console.log(value);
// console.log(row);
      return t.join('');
    }

	  function optFormatter(value, row) {
	    var t = [];
	    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($getRelated === false)
        t.push('<a class="related mr-2" href="javascript:void(0)" title="Relacije"><i class="fa fa-filter"></i></a>');
      @endif
      t.push('<a class="next" href="javascript:void(0)" title="Radijatori"><i class="fa fa-arrow-alt-circle-right"></i></a>');
	    return t.join('');
	  }

	  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 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;
      }
    });
    $("#grad_id").change(function() {
      $("#ulica_id").load('/admin/objekat/ulicepogradu/'+$("#grad_id").val());
    });
    $('.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 .related': function (e, value, row, index) {
        window.location.href = '/admin/prostorija?getrelProst=' + row.objekat_id;
      },
      'click .next': function (e, value, row, index) {
        window.location.href = '/admin/radijator?getrelRadi='+row.id;
      },
	    '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