@extends('layouts.backend')
@section('mainContentArea')
<div class="card card-default">
    <div class="card-header">
        <h4>
            Manage Sub-Sections
            <!-- {!! $addBtn !!} -->
            <a href="{{ route('subsections.create') }}" class="btn btn-success float-right btn-sm" style="margin:10px;"><i class="fa fas fa-plus"></i> Add New Subsection</a>  
          
        </h4>
    </div>
    <div class="card-body">
        <table class="table table-bordered data-table">
            <thead>
                <tr>
                    <th>S.No.</th>
                    <th>Name</th>
                    <th>Parent</th>                    
                    <th>Photo</th>
                    <th width="100px">Action</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
<!-- The Modal -->

@endsection

@section('extraJs')
<script type="text/javascript">
    $(function () {
      
      var table = $('.data-table').DataTable({
          processing: true,
          serverSide: true,
          pageLength: 50,
          ajax: "{{ route('subsections.index') }}",
          columns: [
              {data: 'DT_RowIndex', name: 'DT_RowIndex'},
              {data: 'name', name: 'name'},
              {data: 'parent_id', name: 'parent_id'},
              {data: 'photo', name: 'photo', render: function(data, type, full, meta) {
                return "<img src=\"{{ asset('uploads/sections') }}/" + data + "\" width=\"100\"/>";
              }},
              {data: 'action', name: 'action', orderable: false, searchable: false},
          ]
      });
      
    });
  </script>
@endsection