@extends('admin.dashboard')

@section('title', 'Elements')
@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('elements') !!}
</div>

<div class="row">
  <div class="col-xs-12">
    <div class="box">
      <div class="box-header">
        <h3 class="box-title">Data Table With All Elements</h3>
      </div>
      <!-- /.box-header -->
      <div class="box-body">
        <table id="microunits-table" class="table table-striped table-hover table-bordered">
          <thead>
          <tr>
            <th>#</th>
            <th>ID</th>
            <th>Element Title</th>
            <th>Microunit</th>
            <th>Type</th>
            <th>Language</th>
            <th>Author</th>
            <th>Created</th>
            <th>CRUD</th>
          </tr>
          </thead>
          <tbody class="sortable" data-entityname="elementsmu">
          @foreach ($elements 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:40%;">{{$element->title}}</td>
              <td>{{$element->microunit->muid}}</td>
              <td>{{$element->element->name}}</td>
              <td>{{$element->language->language}}</td>
              @if($element->author)
                <td>{{$element->author->name}}</td>
              @elseif($element->admin)
                <td>{{$element->admin->name}} (Admin)</td>
              @else
                <p>
                  There are no authors!
                </p>
              @endif
              <td>{{ date('j M. Y', strtotime($element->created_at)) }}</td>
              <td>
                <a href="{{route('admin.element.create')}}" class="btn btn-xs btn-success">
                  <span class="glyphicon glyphicon-plus"></span>
                </a>
                <a href="#" class="btn btn-xs btn-info"  data-toggle="modal" data-target="#modal-{{$element->id}}">
                  <span class="glyphicon glyphicon-eye-open"></span>
                </a>
                <a href="{{route('admin.element.edit', $element->id)}}" class="btn btn-xs btn-warning">
                  <span class="glyphicon glyphicon-pencil"></span>
                </a>
                {!! Form::open(['route' => ['admin.element.destroy', $element->id], 'method' => 'DELETE', 'id' => 'form-delete-m-'.$element->id, 'style'=>'display:inline-block']) !!}
                  <a href="" class="data-delete btn btn-xs btn-danger" data-form="{{$element->id}}">
                    <i class="glyphicon glyphicon-trash"></i>
                  </a>
                {!! Form::close() !!}
              </td>
            </tr>
            <!-- Modal Element View -->
            <div id="modal-{{$element->id}}" class="modal fade" role="dialog">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header bg-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">×</span></button>
                    <h4 class="modal-title"><i class="fa fa-cogs" aria-hidden="true"></i> {{$element->element->name}}</h4>
                  </div>
                  <div class="modal-body">
                    <div class="box box-solid">
                      <div class="box-header with-border">
                        <i class="fa fa-info"></i>
                        <h3 class="box-title">Element of Microunit with id <span class="text-red">{{$element->microunit->muid}}</span></h3>
                      </div>
                      <!-- /.box-header -->
                      <div class="box-body">
                        <dl class="dl-horizontal">
                          <dt>Language</dt>
                          <dd>{{$element->language->language}}</dd>
                          <hr>
                          <dt>Title</dt>
                          <dd>{{$element->title}}</dd>
                          <hr>
                          <dt>Description</dt>
                          <dd>{{$element->description}}</dd>
                          <hr>
                          <dt>Filename</dt>
                          <dd><a href="{{$element->filename}}" target="_blank">{{$element->filename}}</a></dd>
                        </dl>
                      </div><!-- /.box-body -->
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-right" data-dismiss="modal">Close</button>
                  </div>
                </div><!-- /.modal-content -->
              </div>
            </div>
          @endforeach
          </tbody>
          <tfoot>
          <tr>
            <th>ID</th>
            <th>Element Title</th>
            <th>Microunit</th>
            <th>Type</th>
            <th>Language</th>
            <th>Author</th>
            <th>Created</th>
            <th>CRUD</th>
          </tr>
          </tfoot>
        </table>
      </div><!-- /.box-body -->
    </div><!-- /.box -->
  </div><!--.col-xl-12 -->
</div><!--.row -->
@endsection

@section('javascripts')
  <script src="/js/admin/dist/jquery.dataTables.min.js"></script>
  <script src="/js/admin/dist/dataTables.bootstrap.min.js"></script>
  <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 () {
    // $("#microunits-table").DataTable({
    //     // "order": [[ 6, "desc" ]]
    // });

    $('.data-delete').on('click', function (e) {
      if (!confirm('Are you sure you want to delete?')) return;
      e.preventDefault();
      $('#form-delete-m-' + $(this).data('form')).submit();
    });

    // $('#addelement').on('hidden.bs.modal', function () {
    //   location.reload();
    // });

    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