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

                        </div>
                        <div class="col-lg-3">
                            <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-3">
                            <input type="text" id="text-filter" class="form-control" placeholder="Search Course Name">
                        </div>
                        <div class="col-lg-3 text-right">
                            <a href="{{ route('create_course') }}" class="btn btn-info">Add Course</a>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            &nbsp;
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <table id="courses-table" class="table table-bordered table-hover">
                                <thead>
                                    <tr class="filters">
                                        <th>Department</th>
                                        <th>Program</th>
                                        <th>Course Name</th>
                                        <th>Course Code</th>
                                        <th>Type</th>
                                        <th>Theory Credits</th>
                                        <th>Practical Credits</th>
                                        <th>Internal</th>
                                        <th>MCQ</th>
                                        <th>Theory</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>

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

    <script type="text/javascript">
        $(document).ready(function() {
            var table = $('#courses-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('courses.data') }}',
                    data: function(d) {
                        d.program = $('#program-filter').val();
                        d.department = $('#department-filter').val();
                        d.search = $('#text-filter').val();
                    }
                },
                columns: [{
                        data: 'department_name',
                        name: 'department_name',
                        orderable: false
                    },
                    {
                        data: 'program',
                        name: 'program',
                        orderable: false
                    },
                    {
                        data: 'course_name',
                        name: 'course_name'
                    },
                    {
                        data: 'course_code',
                        name: 'course_code'
                    },
                    {
                        data: 'course_type',
                        name: 'course_type'
                    },
                    {
                        data: 'theory_credits',
                        name: 'theory_credits'
                    },
                    {
                        data: 'partical_credits',
                        name: 'partical_credits'
                    },
                    {
                        data: 'internal',
                        name: 'internal'
                    },
                    {
                        data: 'mcq',
                        name: 'mcq'
                    },
                    {
                        data: 'theory',
                        name: 'theory'
                    },
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ],
                dom: 'lrtip' // Excludes the default search input
            });

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