@extends('layouts.dashboard')

@section('title-content')
    <title>{{ config('app.name') }} Course Details | External</title>
@endsection


@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="boxpane">
                <div class="boxpane-header">
                    <h2 class="blue"><i class="fa-fw fa fa-dashboard"></i>
                        EE-Registered Student(s) on the course-<b class="black">{{ $course->course_code }}</b>
                    </h2>
                    <div class="boxpane-header">
                        <div class="boxpane-icon">
                            <ul class="btn-tasks">
                                @role('DAEO|HOD')
                                    @if ($results_confirmation->confirmation_status == 1)
                                        

                                        <li class="dropdown">

                                            <a href="{{ route('courses.ue.external-uploads', $id) }}">
                                                <i class="icon fa fa-file-excel-o" data-placement="left"></i>EE
                                                Upload
                                            </a>&nbsp;&nbsp;
                                            <a data-toggle="dropdown" href="#">
                                                <i class="icon fa fa-tasks" data-placement="left"
                                                    title="{{ 'Actions' }}"></i>
                                            </a>&nbsp;&nbsp;

                                        </li>

                                        <li class="dropdown">

                                            <a href="{{ route('se.external.export', [$id, $batch_id]) }}">
                                                <i class="icon fa fa-file-excel-o" data-placement="left"></i>EE
                                                Sheet
                                            </a>&nbsp;&nbsp;


                                        </li>
                                    @endif
                                @endrole

                            </ul>
                        </div>
                    </div>
                </div>
                <div class="boxpane-content">
                    <div class="row">
                        <div class="col-xs-12">

                        </div>
                        <div class="col-md-12">

                            <div class="table-responsive">
                                <table id="supplementaryTable"
                                    class="table table-striped table-bordered table-hover text-justify"
                                    style="width: 100%;">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Student Name</th>
                                            <th>Sex</th>
                                            <th>Registration No.</th>
                                            <th>External Mark Score</th>


                                        </tr>


                                    </thead>
                                    <tbody></tbody>
                                    <tfoot></tfoot>
                                </table>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

@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>
    <script type="text/javascript">
        $(document).ready(function() {

            let supplTable = $('#supplementaryTable').DataTable({
                processing: true,
                //serverSide: true,
                ajax: '{{ route('courses.get-external-students', [$id, $batch_id]) }}',
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex'
                    },
                    {
                        data: 'fullname'
                    },
                    {
                        data: 'gender'
                    },
                    {
                        data: 'reg_no'
                    },
                    {
                        data: 'extenal_mark'
                    },
                ],

            });


            // courseTable.draw(false);
        })
    </script>
@endsection
@section('css')
    <style>
        /* Table Styles
            =================================================================== */
        /* cellpadding */
        table th,
        td {
            padding: 0;
        }

        /* cellspacing */
        table {
            border-collapse: separate;
            border-spacing: 0;
        }

        /* cellspacing="5" */
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        /* cellspacing="0" */

        /* valign */
        th,
        td {
            vertical-align: top;
        }

        /* align (center) */
        table {
            margin: 0;
        }

        table {
            font-size: 11px;
            font-family: Tahoma;
            font-weight: bold;
        }
    </style>
@endsection