@extends('adminlte::page')

@section('title', 'Gradovi')

@section('content_header')
  <h1>Gradovi</h1>
@stop

@section('content')
<div id="editor_container">
  <div id="" class="card col-6">
    <div class="card-header">
      <div class="card-title">
        Lista gradova
      </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="false"
            data-url="/admin/gradovi/browse"
            data-unique-id="id"
            data-sort-name="ime_grada"
            data-sort-order="asc"
            data-search="false"
            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>
                <th data-field="ime_grada" data-sortable="true">
                  Ime
                </th>
                <th data-field="post_broj" data-sortable="true">
                  Postanski broj
                </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="row">
<div class="card text-white bg-info mb-2 zoom col-6" style="max-width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">12dfs sdf sdf sdf sdfsdfsd</h5>
  </div>
</div>
  <div class="card border-primary mb-2 zoom" style="max-width: 18rem;">
    <div class="card-body">
      <h5 class="card-title align-middle">Primary card title</h5>
    </div>    
  </div>
  <div class="card border-primary mb-2 zoom" style="max-width: 18rem;">
    <div class="card-body text-primary">
      <h5 class="card-title">Primary card title</h5>
    </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;
    }
  </style>
@stop

@section('js')
	<script src="/js/jquery.blockUI.js"></script>
  <script>
	  var blocked = [];
	  var ajaxUrl = "/admin/gradovi";

	  $(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" href="javascript:void(0)" title="Edit"><i class="fa fa-edit"></i></a>');
	    return t.join('');
	  }

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

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

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

  function openEditor(element, index){
    $(".hiddenAtLoad").removeClass('d-none');
    // $('.bsToggle').bootstrapToggle();
    $(".role_check").change(function() {
      var id = $(this).attr('id');
      if($(this).prop('checked'))
      {
        $(".role_check").each(function(key, value){
          if($(value).attr('id') != id) {
            $(value).prop('checked', false).change();
          }
        });
      }
    });
    $('.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,
          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 .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