@extends('admin::layouts.plane')
@section('page_heading') {{ $title }} @endsection
@section('content')
    <div class="col-lg-12">
        <div class="panel panel-default filterable">
            <div class="panel-heading">
                <div class="panel-title font-weight-bold">{{ $title }}</div>
            </div>
            <div class="container-fluid">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-12">
                            &nbsp;
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-4">
                            <select id="program-filter" class="form-control">
                                <option value="">- Select Program -</option>
                                @foreach ($programData as $id => $name)
                                    <option value="{{ $id }}">{{ $name }}</option>
                                @endforeach
                            </select>

                        </div>
                        <div class="col-lg-4">
                            &nbsp;
                        </div>
                        <div class="col-lg-4 text-right">
                            <a href="{{ route('create_scheme') }}" class="btn btn-info">Add Scheme</a>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            &nbsp;
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <table id="schema-table" class="table table-bordered table-hover">
                                <thead>
                                    <tr class="filters">
                                        <th>Program</th>
                                        <th>Start on</th>
                                        <th>Session</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function() {
            var table = $('#schema-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('scheme.data') }}',
                    data: function(d) {
                        d.department = $('#program-filter').val();
                    }
                },
                columns: [{
                        data: 'program',
                        name: 'program',
                        orderable: false
                    },
                    {
                        data: 'start_on',
                        name: 'start_on'
                    },
                    {
                        data: 'session',
                        name: 'session'
                    },
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ],
                dom: 'lrtip' // Excludes the default search input
            });

            $('#program-filter').on('change keyup', function() {
                table.draw();
            });
             $("#program-filter").select2();
        });
    </script>
@stop