@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="department-filter" class="form-control">
                                <option value="">- Select Department -</option>
                                @foreach ($departments as $id => $name)
                                    <option value="{{ $id }}">{{ $name }}</option>
                                @endforeach
                            </select>

                        </div>
                        <div class="col-lg-4">
                            <input type="text" id="text-filter" class="form-control" placeholder="Search Program Name">
                        </div>
                        <div class="col-lg-4 text-right">
                            <a href="{{ route('create_program') }}" class="btn btn-info">Add Program</a>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            &nbsp;
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <table id="program-table" class="table table-bordered table-hover">
                                <thead>
                                    <tr class="filters">
                                        <th>Department</th>
                                        <th>Program Name</th>
                                        <th>UG or PG</th>
                                        <th>Year</th>
                                        <th>Semester</th>
                                        <th>Time fixed</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>

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

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