@extends('layouts.dashboard')

@section('title-content')
    <title>{{ config('app.name') }} | Admitted Students</title>
@endsection


@section('content')
    <section class="content">
        <div class="boxpane">
            <div class="boxpane-header">
                <h2 class="blue"><i class="fa-fw fa fa-dashboard"></i>
                    All Admitted Students
                </h2>

                <div class="boxpane-icon">
                    <ul class="btn-tasks">
                        <li class="dropdown">
                            <a data-toggle="dropdown" href="#">
                                <i class="icon fa fa-tasks" data-placement="left" title="{{ 'Actions' }}"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="boxpane-content">
                <div class="row">
                    <div class="col-lg-12">
                        <p class="introtext">
                            Here below is the list of all students that have been admitted successful to the
                            Local Government Training Institute (LGTI) this academic year,click on student name to
                            perform registration process on that student or use the form bellow to filter students
                        </p>

                        <div class="table-responsive">
                            <table id="admTable1" class="table table-bordered table-hover" style="width: 100%;">
                                <thead>
                                    <tr>

                                        <th>Course Code</th>
                                        <th>Course Name</th>
                                        <th>Semester.</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('css')
    <!-- X-editable css -->
    <link type="text/css" href="{{ asset('assets/plugins/x-editable/bootstrap3-editable/css/bootstrap-editable.css') }}"
        rel="stylesheet">
    <link href="{{ asset('assets/plugins/switchery/switchery.min.css') }}" rel="stylesheet" />
@endsection
@section('scripts')
    <script src="{{ asset('assets/dashboard/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/dashboard/js/dataTables.bootstrap4.min.js') }}"></script>
    <!-- X-editable Plugin -->
    <script src="{{ asset('assets/plugins/moment/moment.js') }}"></script>
    <script type="text/javascript"
        src="{{ asset('assets/plugins/x-editable/bootstrap3-editable/js/bootstrap-editable.min.js') }}"></script>


    <script type="text/javascript">

        $(document).ready(function() {
            $('#admTable1').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                ajax: {
                    url: '{{ route('exam-coupons.getCoursesJson') }}'

                },
                columns: [{
                        data: 'course_code',
                        name: 'course_code',

                    },
                    {
                        data: 'course_name',
                        name: 'course_name',

                    },
                    {
                        data: 'semester',
                        name: 'semester',
                        searchable: false
                    },

                    {
                        data: 'actions',
                        name: 'actions',
                        searchable: false
                    }
                ]
            });
            $('#filter-form').on('submit', function(e) {
                admTable.draw();
                e.preventDefault();
            });
        });


        $(function() {
            //modify buttons style
            $.fn.editableform.buttons =
                '<button type="submit" class="btn btn-primary editable-submit btn-sm waves-effect waves-light"><i class="mdi mdi-check"></i></button>' +
                '<button type="button" class="btn btn-light editable-cancel btn-sm waves-effect"><i class="mdi mdi-close"></i></button>';
        });

        $('.student_disco_status').editable({
            prepend: "Select Status",
            mode: 'inline',
            inputclass: 'form-control-sm',
            source: [{
                    value: 'In Progress',
                    text: 'In Progress'
                },
                {
                    value: 'SPECIAL',
                    text: 'SPECIAL'
                },
                {
                    value: 'ABSCONDED',
                    text: 'ABSCONDED'
                },
                {
                    value: 'POSTPONED',
                    text: 'POSTPONED'
                },


            ],
            display: function(value, sourceData) {
                var colors = {
                        "": "gray",
                        1: "green",
                        2: "blue"
                    },
                    elem = $.grep(sourceData, function(o) {
                        return o.value == value;
                    });

                if (elem.length) {
                    $(this).text(elem[0].text).css("color", colors[value]);
                } else {
                    $(this).empty();
                }
            },
            params: function(params) {
                // add additional params from data-attributes of trigger element
                params._token = $('meta[name="csrf-token"]').attr('content');
                //// params.value = $(this).editable().data('value');
                // params.cs_id = $(this).editable().data('cs_id');
                return params;
            },
            send: 'always',
            ajaxOptions: {
                dataType: 'json',
                type: 'post'
            },
            success: function(data) {
                console.log(data);
            },
            error: function(response, newValue) {

                console.log(response);
            }
        });
    </script>
@endsection