@extends('LaravelVueAdmin.layouts.app')

@section('htmlheader_title') Dashboard @endsection
@section('contentheader_title') Dashboard @endsection
@section('contentheader_description') Overview @endsection
@section('nofile', true)

@section('main-content')

<div class="row">
        <div class="col-sm-6 col-md-2">
            <a href="{{ url(config('LaravelVueAdmin.adminRoute') . '/tickets?status=38') }}"><div class="panel panel-body panel-body-accent">
                <div class="media no-margin">
                    <div class="media-left media-middle">
                        <i class="icon-stack-text icon-3x" style="color: #A7A7A7"></i>
                    </div>

                    <div class="media-body text-right">
                        <h3 class="no-margin text-semibold">{{$stat['draft']}}</h3>
                        <span class="text-uppercase text-size-mini text-muted" style="color: #A7A7A7">DRAFT</span>
                    </div>
                </div>
            </div></a>
        </div>

        <div class="col-sm-6 col-md-2">
            <a href="{{ url(config('LaravelVueAdmin.adminRoute') . '/tickets?status=2') }}"><div class="panel panel-body">
                <div class="media no-margin">
                    <div class="media-left media-middle">
                        <i class="icon-stack-text icon-3x" style="color: #FF5A5A"></i>
                    </div>

                    <div class="media-body text-right">
                        <h3 class="no-margin text-semibold">{{$stat['terbuka']}}</h3>
                        <span class="text-uppercase text-size-mini text-muted" style="color: #FF5A5A">TERBUKA</span>
                    </div>
                </div>
            </div></a>
        </div>

        <div class="col-sm-6 col-md-2">
            <a href="{{ url(config('LaravelVueAdmin.adminRoute') . '/tickets?status=36') }}"><div class="panel panel-body">
                <div class="media no-margin">
                    <div class="media-left media-middle">
                            <i class="icon-stack-text icon-3x" style="color: #4795FF"></i>
                        </div>

                    <div class="media-body text-right">
                        <h3 class="no-margin text-semibold">{{$stat['review']}}</h3>
                        <span class="text-uppercase text-size-mini text-muted" style="color: #4795FF">DIREVIEW</span>
                    </div>

                </div>
            </div></a>
        </div>

        <div class="col-sm-6 col-md-2">
            <a href="{{ url(config('LaravelVueAdmin.adminRoute') . '/tickets?status=37') }}"><div class="panel panel-body">
                <div class="media no-margin">
                    <div class="media-left media-middle">
                            <i class="icon-stack-text icon-3x" style="color: #F5AD00"></i>
                        </div>

                    <div class="media-body text-right">
                        <h3 class="no-margin text-semibold">{{$stat['proses']}} </h3>
                        <span class="text-uppercase text-size-mini text-muted" style="color: #F5AD00">DIPROSES</span>
                    </div>

                </div>
            </div></a>
        </div>

        <div class="col-sm-6 col-md-2">
            <a href="{{ url(config('LaravelVueAdmin.adminRoute') . '/tickets?status=5') }}"><div class="panel panel-body panel-body-accent">
                <div class="media no-margin">
                    <div class="media-left media-middle">
                        <i class="icon-stack-text icon-3x" style="color: #16B121"></i>
                    </div>

                    <div class="media-body text-right">
                        <h3 class="no-margin text-semibold">{{$stat['selesai']}}</h3>
                        <span class="text-uppercase text-size-mini text-muted" style="color: #16B121">SELESAI</span>
                    </div>
                </div>
            </div></a>
        </div>
        <div class="col-sm-6 col-md-2">
            <a href="{{ url(config('LaravelVueAdmin.adminRoute') . '/tickets?status=6') }}"><div class="panel panel-body">
                <div class="media no-margin">
                    <div class="media-left media-middle">
                        <i class="icon-stack-text icon-3x" style="color: #D01313"></i>
                    </div>

                    <div class="media-body text-right">
                        <h3 class="no-margin text-semibold">{{$stat['tidakSelesai'] }}</h3>
                        <span class="text-uppercase text-size-mini text-muted" style="color: #D01313">TIDAK SELESAI</span>
                    </div>
                </div>
            </div></a>
        </div>
        <div class="col-sm-6 col-md-2">
            <a href="{{ url(config('LaravelVueAdmin.adminRoute') . '/tickets?status=7') }}"><div class="panel panel-body">
                <div class="media no-margin">
                    <div class="media-left media-middle">
                        <i class="icon-stack-text icon-3x" style="color: #4D4D4D"></i>
                    </div>

                    <div class="media-body text-right">
                        <h3 class="no-margin text-semibold">{{$stat['tutup']}}</h3>
                        <span class="text-uppercase text-size-mini text-muted" style="color: #4D4D4D">TERTUTUP</span>
                    </div>
                </div>
            </div></a>
        </div>
    </div>


<div class="panel panel-flat blog-horizontal blog-horizontal-2">
    <div class="panel-body">
    <table id="example1" class="row" width="100%">
    </table>
</div></div>
@endsection
@push('scripts')
<script type="text/javascript" src="{{ asset('/LaravelVueAdmin/assets/js/plugins/notifications/sweet_alert.min.js') }}"></script>
<script src="{{ asset('LaravelVueAdmin/assets/js/plugins/tables/datatables/datatables.min.js') }}"></script>
<script>
    function format ( d ) {
        return '<td></td><td><p>'+d[2]+'</p></td>';
    }

    $(function () {
      var dt = $("#example1").DataTable({
        processing: true,
        serverSide: true,
        autoWidth: false,
        dom: '<"top">rt<"bottom"ip><"clear">',
        language: {
          "url": "{{ asset('LaravelVueAdmin/assets/js/plugins/tables/datatables/Indonesian.json') }}",
        },
        pageLength: 5,
        ajax: "{{ url(config('LaravelVueAdmin.adminRoute') . '/dashboard_dt_ajax') }}",
        columns: [
              {
                  "class":          "details-control",
                  "orderable":      false,
                  "searchable": false,
                  "data":           1,
                  "render": function ( data, type, row ) {
                      return '<div class="panel panel-flat blog-horizontal blog-horizontal-3 blog-horizontal-xs"><div class="panel-body">'+row[5]+'<div class="blog-preview"><div class="content-group-sm"><h5 class="blog-title text-semibold"><a href="" title="">'+data+'</a></h5><ul class="list-inline list-inline-separate"><li><a href="#">Dibuat oleh '+row[4]+'</a></li><li>'+row[6]+'</li></ul>'+row[2]+'</div></div></div><div class="panel-footer panel-footer-condensed"><div class="heading-elements not-collapsible"><ul class="list-inline list-inline-separate heading-text text-muted"></ul></div></div></div>';
                  },
                  "defaultContent": 'null'
              }
          ],
          order: [],
      });
      $.fn.dataTable.ext.errMode = 'none';
      $('#example1').on('error.dt', function(e, settings, techNote, message) {
        (function($) {
            $.jGrowl('Terjadi kesalahan saat <strong>memuat data</strong>, Silahkan <a class="alert-link" onclick="window.location.reload(true);"><u><i class="icon-reload-alt"></i>MUAT ULANG</u></a> halaman!', {
              position: 'center',
              theme: 'bg-danger alert-styled-left',
              sticky: true,
              header: 'PROSES DIHENTIKAN'
            });
        })(window.jQuery);
      });

    // Array to track the ids of the details displayed rows
      var detailRows = [];
   /*
      $('#example1 tbody').on( 'click', 'tr td.details-control', function () {
          var tr = $(this).closest('tr');
          var row = dt.row( tr );
          var idx = $.inArray( tr.attr('id'), detailRows );

          if ( row.child.isShown() ) {
              tr.removeClass( 'details' );
              row.child.hide();

              // Remove from the 'open' array
              detailRows.splice( idx, 1 );
          }
          else {
              tr.addClass( 'details' );
              row.child( format( row.data() ) ).show();

              // Add to the 'open' array
              if ( idx === -1 ) {
                  detailRows.push( tr.attr('id') );
              }
          }
      } );

      // On each draw, loop over the `detailRows` array and show any child rows
      dt.on( 'draw', function () {
          $.each( detailRows, function ( i, id ) {
              $('#'+id+' td.details-control').trigger( 'click' );
          } );
      } );
  */
      $("#ticket-add-form").validate({

      });
    });
  </script>
  @endpush