@extends('admin.dashboard')

@section('title', "View Elements of Microunit: $microunit->muid")
@section('stylesheets')
  <link rel="stylesheet" href="/css/admin/dist/dataTables.bootstrap.css">
  <link rel="stylesheet" href="/css/admin/flatui/sort.css">
@endsection

@section('content')

<div class="content-header">
   <h1>
    Dashboard
    <small>OPALESCE Version 1.0</small>
    </h1>
    {!! Breadcrumbs::render('viewmicrounitselements', $microunit) !!}
</div>

<div class="row">
  <div class="col-xs-12">
    <div class="box">
      <div class="box-header">
        <h3 class="box-title">Data Table With Elements of Microunit: <span class="text-red text-bold">{{$microunit->muid}}</span></h3>
        <a href="{{route('admin.elmu.create', $microunit->id)}}" class="btn btn-success pull-right"><i class="fa fa-plus"></i> Add Element</a>
      </div>
      <!-- /.box-header -->
      <div class="box-body table-responsive no-padding">
        <table class="table table-striped table-hover table-bordered">
          <thead>
          <tr>
            <th>#</th>
            <th>ID</th>
            <th>Title</th>
            <th>Type</th>
            <th>Created at</th>
            <th>Actions</th>
          </tr>
          </thead>
          <tbody class="sortable" data-entityname="elementsmu">
          @foreach ($microunit->elementmicrounits as $element)
            <tr data-itemId="{{ $element->id }}">
              <td class="sortable-handle"><span class="glyphicon glyphicon-sort"></span></td>
              <td class="id-column">{{$element->id}}</td>
              <td style="width:50%;">{{$element->title}}</td>
              <td>{{$element->element->name}}</td>
              <td>{{ date('j M. Y', strtotime($element->created_at)) }}</td>
              <td>
                <a href="#" class="btn btn-sm btn-info"  data-toggle="modal" data-target="#modal-{{$element->id}}">
                  <span class="glyphicon glyphicon-eye-open padding-right"></span> View
                </a>@include('admin.elements.modals.view')

                <a href="{{route('admin.element.edit', $element->id)}}"
                  class="btn btn-sm btn-warning"
                  data-toggle="tooltip"
                  data-placement="top">
                  <i class="fa fa-pencil padding-right"></i>Edit
                </a>

                {!! Form::open(['route' => ['admin.element.destroy', $element->id], 'method' => 'DELETE', 'id'=>'form-delete', 'style'=>'display:inline-block']) !!}
                  <button class="btn btn-sm btn-danger"
                    data-toggle="modal"
                    data-target="#confirmDelete-{{$element->id}}"
                    data-btntxt="Disable" type="button"><span class="glyphicon glyphicon-trash padding-right"></span> Delete
                  </button>
                  @include('admin.elements.modals.delete')
                {!! Form::close() !!}

              </td>
            </tr>
          @endforeach
          </tbody>
          <tfoot>
          <tr>
            <th>#</th>
            <th>ID</th>
            <th>Title</th>
            <th>Type</th>
            <th>Created at</th>
            <th>Actions</th>
          </tr>
          </tfoot>
        </table>
      </div><!-- /.box-body -->
    </div><!-- /.box -->
  </div><!--.col-xl-12 -->
</div><!--.row -->
@endsection

@section('javascripts')
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous">
  </script>

  <script src="/js/admin/sort/flat-ui/js/jquery.ui.touch-punch.min.js"></script>
  <script src="/js/admin/sort/flat-ui/js/jquery-ui-1.10.4.custom.min.js"></script>
  <script src="/js/admin/sort/bootstrap-growl/jquery.bootstrap-growl.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-growl/1.0.0/jquery.bootstrap-growl.min.js"></script>
  <script type="text/javascript">

    $(function ()
    {

      var App = {};
      App.notify = {
        message: function(message, type){
            if ($.isArray(message)) {
                $.each(message, function(i, item){
                    App.notify.message(item, type);
                });
            } else {
                $.bootstrapGrowl(message, {
                    type: type,
                    delay: 4000,
                    width: 'auto'
                });
            }
        },

        danger: function(message){
            App.notify.message(message, 'danger');
        },
        success: function(message){
            App.notify.message(message, 'success');
        },
        info: function(message){
            App.notify.message(message, 'info');
        },
        warning: function(message){
            App.notify.message(message, 'warning');
        },
        validationError: function(errors){
            $.each(errors, function(i, fieldErrors){
                App.notify.danger(fieldErrors);
            });
        }
      };

      var changePosition = function(requestData){
        $.ajax({
          'url': '/sort/elements',
          'type': 'POST',
          'data': requestData,
          'success': function(data) {
              if (data.success) {
                  App.notify.success('Saved!');
              } else {
                App.notify.validationError(data.errors);
              }
          },
          'error': function(){
              App.notify.danger('Something wrong!');
          }
        });
      };

      $(document).ready(function(){
        var $sortableTable = $('.sortable');
        if ($sortableTable.length > 0) {
            $sortableTable.sortable({
                handle: '.sortable-handle',
                axis: 'y',
                update: function(a, b){

                    var entityName = $(this).data('entityname');
                    var $sorted = b.item;

                    var $previous = $sorted.prev();
                    var $next = $sorted.next();

                    if ($previous.length > 0) {
                        changePosition({
                            parentId: $sorted.data('parentid'),
                            type: 'moveAfter',
                            entityName: entityName,
                            id: $sorted.data('itemid'),
                            positionEntityId: $previous.data('itemid')
                        });
                    } else if ($next.length > 0) {
                        changePosition({
                            parentId: $sorted.data('parentid'),
                            type: 'moveBefore',
                            entityName: entityName,
                            id: $sorted.data('itemid'),
                            positionEntityId: $next.data('itemid')
                        });
                    } else {
                        console.error('Something wrong!');
                    }
                },
                cursor: "move"
            });
        }
      });

      $('.sortable td').each(function(){
      $(this).css('width', $(this).width() +'px');
      });

    });

  </script>
@endsection