@extends('webprofile.front.jollyany.master')

@section('assets')
<!-- <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css"> -->

<link rel="stylesheet" href="{!! asset('backend/js/datatables.net-bs/css/dataTables.bootstrap.min.css') !!}">
   
<style>

tr.group,
tr.group:hover {
    background-color: #ddd !important;
}

</style>
@endsection

@section('meta')
<meta name="{{ Str::slug($setting['web_title']) }}" content="custom"/>
  <meta name="description" content="{{ $setting['web_title'] }}">
  @if(array_key_exists('default_keyword', $setting))
<meta name="keywords" content="{{ $setting['default_keyword'] }}">
  @endif
<meta name="author" content="{{ $setting['web_title'] }}">
@endsection

@section('content')
  <section class="post-wrapper-top jt-shadow clearfix">
    <div class="container">
      <div class="col-lg-12">
          <h2>Download</h2>
      </div>
    </div>
  </section><!-- end post-wrapper-top -->

  <section class="blog-wrapper">
    <div class="container">
        <div class="row">
          <div id="main-content" class="col-md-12" role="main" align="justify">
            <table class="table table-bordered data-table">
				<thead>
				<tr>
					<th style="width: 5%;">No</th>
					<th>Nama Dokumen</th>
					<th style="width: 7%">Kategori</th>
					<th style="width: 15%;">Tanggal Publikasi</th>
					<th style="width: 20%;">Option</th>
				</tr>
				</thead>
				<tbody>
				@foreach ($categoriesFile as $value)
				<!-- <tr>
					<td style="font-weight: bold;">KATEGORI : {{ $value->name }}</td>
				</tr> -->
					@php
						$no = 1;
					@endphp
				
					@foreach ($value->rFile as $item)
					<tr>
						<td style="text-align: center; color: black;">{{ $no++ }}</td>
						<td style="color: black;">{{ $item->title }}</td>
						<td style="text-align: center; color: black;"> {{ $value->name }}</td>
						<td style="text-align: center; color: black;">{{ InseoHelper::tgl($item->created_at) }}</td>
						<td style="text-align: center;">
							<a href="{{ $setting['url_static'] . '/' . $setting['directory'] . '/file/' .$item->file }}" class="btn btn-info"><i class="fa fa-eye"> Lihat</i></a>
							<a href="{{ url('downloadlink/'.$item->id) }}" class="btn btn-info"><i class="fa fa-download"> Download</i></a>

						</td>
					</tr>
					@endforeach
				
				@endforeach
				</tbody>
			</table>
          </div>
        </div>
      </div><!-- end title -->
    </div><!-- end container -->
  </section><!--end white-wrapper -->
 
@endsection
@section('scripts')
<script src="{!!asset('backend/js/datatables.net/js/jquery.dataTables.min.js') !!}"></script>
<script src="{!!asset('backend/js/datatables.net-bs/js/dataTables.bootstrap.min.js') !!}"></script>
<!-- <script src="{!!asset('backend/js/datatables.net-bs/js/dataTables.bootstrap.min.js') !!}"></script> -->

<!-- <script src="{{ url('backend/assets/plugins/jquery-datatable/buttons/dataTables.buttons.min.js') }}"></script>
<script src="{{ url('backend/assets/plugins/jquery-datatable/buttons/buttons.bootstrap4.min.js') }}"></script>
<script src="{{ url('backend/assets/plugins/jquery-datatable/buttons/buttons.colVis.min.js') }}"></script>
<script src="{{ url('backend/assets/plugins/jquery-datatable/buttons/buttons.html5.min.js') }}"></script>
<script src="{{ url('backend/assets/plugins/jquery-datatable/buttons/buttons.print.min.js') }}"></script> -->

<script>
    // var url = "{{ route('download') }}";
	
// 	$(document).ready(function() {
// 	 $('.data-table').DataTable();
//  } );
 $(document).ready(function() {
    var groupColumn = 2;
    var table = $('.data-table').DataTable({
        "columnDefs": [
            { "visible": false, "targets": groupColumn }
        ],
        "order": [[ groupColumn, 'asc' ]],
        "displayLength": 25,
        "drawCallback": function ( settings ) {
            var api = this.api();
            var rows = api.rows( {page:'current'} ).nodes();
            var last=null;
 
            api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
                if ( last !== group ) {
                    $(rows).eq( i ).before(
                        '<tr class="group"><td colspan="5">'+group+'</td></tr>'
                    );
 
                    last = group;
                }
            } );
        }
    } );
 
    // Order by the grouping
    // $('.data-table tbody').on( 'click', 'tr.group', function () {
    //     var currentOrder = table.order()[0];
    //     if ( currentOrder[0] === groupColumn && currentOrder[1] === 'asc' ) {
    //         table.order( [ groupColumn, 'desc' ] ).draw();
    //     }
    //     else {
    //         table.order( [ groupColumn, 'asc' ] ).draw();
    //     }
    // } );
} );
</script>
{{ Html::script('js/master/file.js') }}
  <!-- <script src="https://code.jquery.com/jquery-3.5.1.js"></script> 
  <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>
 <script>
 $(document).ready(function() {
	 $('.download').DataTable();
 } );
 </script> -->
 @stop
