@extends('layouts.main_frontend')
@section('main-content')
<!-- Listing of Organisation -->
<link rel="stylesheet" href="{{asset('/css/frontend/organization_list.css')}}" type="text/css" />

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 dashboard-page-head edit-document document pt-3 pb-5 mb-2">
    <div>
        <div class="status">
            <form action="">
                <div class="form-group">
                    <center>  <span class="success_message" style="color:#5cb85c!important;text-align: center!important;">
                        {{ session()->has('flash_message') ? session()->get('flash_message') : '' }} </span></center>
                </div>
            </form>
        </div>
      <div class="loss-event d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-2">
         <div class="user-list-head">
            <div><h1 class="">Organization List</h1></div>
            <div class="user-links">
                <div class="searchbox">
                  <form action="">
                      <div class="form-group has-search">
                        <span class="fa fa-search form-control-feedback"></span>
                        <input type="text" id="filter" class="form-control search" placeholder="Search here..." style="width: 11rem;">
                      </div>
                  </form>
                  </div>
            </div>
         </div>
      </div>
      <div class="list-section table-responsive mt-4">
        <div class="row">
            <table id="myTable" class="list-table" cellpadding="10" cellspacing="0">
                <thead>
                    <tr>
                        <th width="10%">#</th>
                        <th width="60%">Organization Name</th>
                        <th width="30%">Action</th>
                    </tr>
                </thead>
                <tbody> </tbody>
            </table>   
        </div>
      </div>
   </div>
</main>

@endsection

@section('additionaljs')
<!-- <script src = "http://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js" defer ></script> -->
<script src="{{asset('/js/dataTables.min.js')}}" defer></script>

<script>
    spinner.hide();
 $(function () {
    var oTable = $('#myTable').DataTable({
        processing: true,
        searching: true,
        "bLengthChange":false, // Will Disabled Record number per page
        serverSide: true,
        ajax: "{{ route('organizations') }}",
        columns: [
            {data: 'rownum', name: 'rownum',orderable: false, searchable: false},
            {data: 'name', name: 'name'},
            {data: 'edit', name: '', orderable: false, searchable: false},
        ]
    });    
    $('#filter').keyup(function(){
        oTable.search($(this).val()).draw() ;
    })
});
</script>
@endsection