@extends('layouts.vendors')
@section('content')
<script type="text/javascript" src="{{ URL::asset('assets/admin/base/js/dataTables.min.js') }}"></script>
<link href="{{ URL::asset('assets/admin/base/css/dataTables.min.css') }}" media="all" rel="stylesheet" type="text/css" />
<link href="{{ URL::asset('assets/admin/base/css/toastr.css') }}" rel="stylesheet" />
<script src="{{ URL::asset('assets/admin/base/js/toastr.min.js') }}"></script>

<style>
	.pageheader{
		min-height: 50px;
	}
	.breadcrumb li{
		font-size: 15px;
	}
</style>

<div class="pageheader">
	<div class="media">
			<div class="media-body">
				<ul class="breadcrumb">
					<li><a href="{{url('organisations/dashboard')}}"><i class="glyphicon glyphicon-home"></i> @lang('messages.Organization')</a></li>
					<li><a href="javascript:;">@lang('messages.Program')</a></li>
				</ul>
			</div>
	</div>
</div>

<div class="contentpanel">
	<table id="programTable" class="table table-striped table-bordered">
		<thead>
			<tr>
				<th>@lang('messages.ID')</th> 
				<th>@lang('messages.Program Name')</th>
				<th>@lang('messages.Category')</th>
				<th style="width: 15%;">@lang('messages.Program Location')</th>
				<th>@lang('messages.Created at')</th>
				<th>@lang('messages.Updated at')</th>
				<th>@lang('messages.Status')</th>
				<th>@lang('messages.Help First')</th>
				<th width: 100px;>@lang('messages.Actions')</th>
			</tr>
	 	</thead>
		<tbody>
			<tr>
				<td class="empty-text" colspan="13" style="background-color: #fff!important;">
					<div class="list-empty-text"> @lang('messages.No records found.') </div>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<script>
	$(function() {
			$('#programTable').DataTable({

			dom: '<"srchhook">lfrtip',
			initComplete: function(){
							var show_btn = '<a class="btn btn-primary tip" href="{{ URL::to('organisations/project/create') }}" title="@lang('messages.Add New')" style="margin-left: 10px;">@lang('messages.Add New')</a>';
							$("div.srchhook").addClass("pull-right").html(show_btn);           
				},

			processing: false,
			serverSide: false,
			responsive: true,
			autoWidth:true,
					ajax: '{!! route('ajaxvendorprogramlists.data') !!}',
					"order": [],
					"columnDefs": [ {
					"targets"  : 'no-sort',
					"orderable": false,
					"searchable":true,
					"pagingType": "full",
					'exportable':false
					}],
					columns: [
				{ data: 'program_id', name: 'program_id',orderable: true },
				{ data: 'program_name',searchable: true, name: 'program_name'},
				{ data: 'category_name',searchable: true, name: 'category_name'},
				{ data: 'program_location', name: 'program_location' },
				{ data: 'created_at', name: 'created_at' },
				{ data: 'updated_at', name: 'updated_at' },
				{ data: 'status', name: 'status' },
				{ data: 'help_first', name: 'help_first' },
				{ data: 'action', name: 'action', orderable: false, searchable: false}
					],
					drawCallback: function(){
        		$('td:has(.td_center)').css('text-align', 'center');
        	}
			});
	});
	</script>
@endsection