@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'])
<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"></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></td>
      </tr>
  @endforeach
@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-style: normal;
      font-size: 12px;
      padding-left: 5px;
      position: relative;
      top: -1px;
    }
    .ui.label .icon:hover:before {
      color: #F00;
    }

  </style>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/icheck-bootstrap/3.0.1/icheck-bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/transition.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/icon.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/label.min.css" />
  <link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
@stop

@section('js')
	<script src="/js/jquery.blockUI.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.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 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="prostorije" href="javascript:void(0)" title="Prostorije u ovom objektu"><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){
    $('.bsToggle').bootstrapToggle();
    $( "#adr_vlasnika_razl_check" ).change(function(e) {
      if(this.checked)
        $("#adr_vlasnika").removeClass('d-none');
      else
        $("#adr_vlasnika").addClass('d-none');
    });
    $( "#adr_zakupac_check" ).change(function(e) {
      if(this.checked)
        $("#adr_zakupac").removeClass('d-none');
      else
        $("#adr_zakupac").addClass('d-none');
    });
    $('.ui.dropdown:not(.server)').dropdown();
    $('#grupa_id').dropdown({
      onChange: function(value, text, $choice) {
        $('#grupa_id').dropdown('setup menu', []);
        console.log('bla');
      },
      apiSettings: {
        method: 'POST',
        cache: false,
        saveRemoteData: false,
        on: 'click',
        url: '/admin/grupa/getAssignableGroups',
        data: { '_token': '{{ csrf_token() }}'},
        beforeSend: function (settings) {
            settings.data.ids = $('#grupa_id').val().join();
            settings.data.query = settings.urlData.query;
            return settings;
        },
        onResponse: function(response) {
          var query = this.urlData.query;
          return { 
            success: true,
            results: response.results.filter(function(value) { return value.name.toLowerCase().indexOf(query) >= 0 })
          };
        }
      }
    });
    $('#grupa_id').dropdown('setup menu', []);
    $(".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());
    });

    $("#vl_grad_id").change(function() {
      $("#vl_ulica_id").load('/admin/objekat/ulicepogradu/'+$("#vl_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.optEvents = {
      'click .related': function (e, value, row, index) {
        window.location.href = '/admin/objekat?getrelObj=' + row.j_grupa_ids;
      },
      'click .prostorije': function (e, value, row, index) {
        window.location.href = '/admin/prostorija?getrelProst=' + 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