@extends('layouts.master')

@section('title', __("tr.Available Studies Groups"))
@section('titleicon', "icon-file-text")

@section('content')
    <style>
        hr {
            margin-top: 0;
            margin-bottom: 0;
            border-top: 1px solid #000;
        }
    </style>
    <!-- BEGIN .main-content -->
    <div class="main-content">
        <div class="row gutters">
            <div class="col-lg-12 col-xs-12 col-md-12 col-sm-12">

                <div class="card">
                    <div class="card-body pb-0">
                        <div class="filter-box">
                            <div class="row">

                                <div class="col-md-2">
                                    <input data-placement="top" type="text" id="text_search" class="typeahead"
                                           autocomplete="off" placeholder="@lang('tr.TextSearch')">
                                </div>

                                {{--Button--}}
                                <div class="col-md-2 float">
                                    <button class="btn btn-primary" type="button"
                                            id="search_button">@lang('tr.Search')</button>
                                </div>

                                {{--Button--}}
                                <div class="col-md-2 float">
                                    <button class="btn btn-danger" type="button"
                                            id="reset_button">@lang('tr.Reset')</button>
                                </div>

                            </div>
                        </div>

                    </div>
                </div>

                <div class="card">
                    <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
                        <div class="card-body">
                            <table id="data_table" class="display" style="width:100%">
                                <thead>
                                <tr>
                                    <th width="5%">#</th>
                                    <th width="10%">@lang('tr.Term')</th>
                                    <th width="40%">@lang('tr.Title')</th>
                                    <th width="30%">@lang('tr.Instructor')</th>
                                    <th width="15%">@lang('tr.Start Date')</th>
                                    <th width="5%"></th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Row end -->
    </div>
    <!-- END: .main-content -->

    <script type="text/javascript">

        var showURL = '{{ route('studies_groups_show', ['studyGroup'=>'#id']) }}';

        $(document).ready(function () {

            var table = $('#data_table').DataTable({
                processing: true,
                serverSide: true,
                scrollX: true,
                stateSave: false,
                rowId: 'id',
                order: [
                    [0, "desc"]
                ],
                "ajax": {
                    "url": '{{ route('studies_groups_list') }}',
                    "dataSrc": "data.data"
                },
                "columns": [
                    {"data": "id", "name": "id"},
                    {"data": "term_name", "name": "term_name"},
                    {
                        "data": "course_name", "name": "course_name",
                        fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {

                            var html = oData.code + " (" + oData.bylaw + "): " + oData.course_name + '<br>';
                            html += "<span class='badge-course'>" + oData.description + "<span>";

                            $(nTd).html(html);
                        }
                    },
                    {"data": "instructor_name", "name": "instructor_name"},
                    {"data": "start_date", "name": "start_date"},
                    {
                        "data": "id", "name": "id",
                        fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {

                            var html = "";

                            html += "<a title='@lang('tr.View Details')' target='_blank' href='" + showURL.replace('#id', oData.id) + "'><i class='icon-eye'></i></a>&nbsp;";

                            $(nTd).html(html);
                        }
                    },
                ]
            });

            $(".dataTables_filter").hide();

            $('#search_button').on('click', function () {
                table.search($("#text_search").val());
                table.draw();
            });

            $('#text_search').keyup(function (e) {
                if (e.keyCode == 13)
                    $('#search_button').trigger('click');
            });

            $('#reset_button').on('click', function () {
                $("#text_search").val("");
                $('#search_button').trigger('click');
            });
        });
    </script>
@stop