@extends('layouts.cork')
@section('title', $title)

<!-- BEGIN PAGE CSS -->
@section('page-css')
    <style>
        .toggle-code-snippet {
            margin-bottom: 0px;
        }

        body.dark .toggle-code-snippet {
            margin-bottom: 0px;
        }
    </style>
    <link rel="stylesheet" href="/cork/src/plugins/css/dark/table/datatable/dt-global_style.css">
@endsection
<!-- END PAGE CSS -->

<!-- BEGIN BREADCRUMB -->
@section('breadcrumb')
    <div class="page-meta">
        <nav class="breadcrumb-style-one" aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('sections.index') }}">Sections</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ $title }}</li>
            </ol>
        </nav>
    </div>
@endsection
<!-- END BREADCRUMB -->
@section('content')
    <h6>
        Course: <a href="#">{{ $section->course->name }}</a><br />
        Term: {{ $section->year->year }} {{ $section->termDesc() }}<br />
        Teacher: {{ $section->teacher->last_name . ', ' . $section->teacher->first_name }}<br />
        Enrollments: {{ $section->enrollments->count() }} of {{ $section->enrollment_max }} enrolled<br />
        Delivery: @if ($section->delivery === 'I')
            ITV
        @else
            Online
        @endif
        <br />
        Restricted Schools: 
        @if (!empty($section->restricted_school_ids))
            <span class="badge badge-warning">Restricted</span>
        @endif
        {{ $section->getRestrictedSchoolNames() }}
        <br />
        Description: {{ $section->course->description }}
    </h6>

    @if (auth()->user()->role_id == 1 || auth()->user()->role_id == 2 || auth()->user()->role_id == 4)
        <!-- List Enrollments -->
        @if ($section->enrollments->isEmpty())
            <h4>No Enrollments Found</h4>
        @else
            <div class="m-2">
                <h4>{{ $section->enrollments->count() }} Enrollments</h4>
            </div>
            <div class="table-responsive">
                <table class="table table-bordered table-hover mb-4" id="enrollments-table">
                    <thead>
                        <tr>
                            <th>Last Name</th>
                            <th>First Name</th>
                            <th>Email</th>
                            <th>School</th>
                            <th>Grade</th>
                            @if (auth()->user()->role_id != 4)
                                <th>Action</th>
                            @endif
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($section->enrollments as $e)
                            <tr>
                                <td>{{ $e->student->last_name ?? '' }}</td>
                                <td>{{ $e->student->first_name ?? '' }}</td>
                                <td>{{ $e->student->email ?? '' }}</td>
                                <td>{{ $e->student->school->name ?? '' }}</td>
                                <td>{{ $e->student->grade ?? '' }}</td>
                                @if (auth()->user()->role_id != 4)
                                    <td>
                                        <a href="{{ route('enrollments.show', $e->id) }}">View</a> |
                                        <a href="{{ route('enrollments.edit', $e->id) }}">Edit</a> |
                                        <a href="{{ route('enrollments.delete', $e->id) }}">Delete</a>
                                    </td>
                                @endif
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif

        <!-- List Facilitators -->
        @if ($facilitators->isEmpty())
            <h4>No Facilitators Found</h4>
        @else
            <div class="m-2">
                <h4>{{ $facilitators->count() }} Facilitators</h4>
            </div>
            <div class="table-responsive">
                <table class="table table-bordered table-hover mb-4" id="facilitators-table">
                    <thead>
                        <tr>
                            <th>Last Name</th>
                            <th>First Name</th>
                            <th>School</th>
                            <th>Position</th>
                            <th>Email</th>
                            <th>Phone</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($facilitators as $facilitator)
                            <tr>
                                <td>{{ $facilitator->last_name }}</td>
                                <td>{{ $facilitator->first_name }}</td>
                                <td>{{ $facilitator->school->name }}</td>
                                <td>{{ $facilitator->position->position }}</td>
                                <td>{{ $facilitator->email }}</td>
                                <td>{{ $facilitator->formattedPhone() }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    @endif

    @if (auth()->user()->role_id == 1 || auth()->user()->role_id == 2)
        <p class="mt-2">
            <button class="btn btn-warning mb-2"
                onclick="window.location.href = '{{ route('sections.edit', $section->id) }}';">Edit Section</button> 
            <button class="btn btn-danger mb-2"
                onclick="window.location.href = '{{ route('sections.delete', $section->id) }}';">Delete Section</button>
        </p>
    @endif
@endsection
<!--  BEGIN PAGE SCRIPTS FILE  -->
@section('page-js')
    <script src="/cork/src/plugins/src/table/datatable/datatables.js"></script>
    <script src="/cork/src/plugins/src/table/datatable/button-ext/dataTables.buttons.min.js"></script>
    <script src="/cork/src/plugins/src/table/datatable/button-ext/jszip.min.js"></script>
    <script src="/cork/src/plugins/src/table/datatable/button-ext/buttons.html5.min.js"></script>
    <script src="/cork/src/plugins/src/table/datatable/button-ext/buttons.print.min.js"></script>
    <script src="/cork/src/plugins/src/table/datatable/custom_miscellaneous.js"></script>
    <script>
        var enrollmentsTable = $('#enrollments-table').DataTable({
            "dom": "<'dt--top-section'<'row'<'col-sm-12 col-md-6 d-flex justify-content-md-start justify-content-center'B><'col-sm-12 col-md-6 d-flex justify-content-md-end justify-content-center mt-md-0 mt-3'f>>>" +
                "<'table-responsive'tr>" +
                "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
            buttons: {
                buttons: [{
                        extend: 'csv',
                        className: 'btn'
                    },
                    {
                        extend: 'excel',
                        className: 'btn'
                    },
                    {
                        extend: 'print',
                        className: 'btn'
                    }
                ]
            },
            "oLanguage": {
                "oPaginate": {
                    "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12,19 5,12 12,5"></polyline></svg>',
                    "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12,5 19,12 12,19"></polyline></svg>'
                },
                "sInfo": "Showing page _PAGE_ of _PAGES_",
                "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path></svg>',
                "sSearchPlaceholder": "Search...",
                "sLengthMenu": "Results :  _MENU_",
                "emptyTable": "No enrollments found"
            },
            "stripeClasses": [],
            "lengthMenu": [25, 50, 75, 100],
            "pageLength": 50,
            "responsive": true,
            "autoWidth": false
        });

        var facilitatorsTable = $('#facilitators-table').DataTable({
            "dom": "<'dt--top-section'<'row'<'col-sm-12 col-md-6 d-flex justify-content-md-start justify-content-center'B><'col-sm-12 col-md-6 d-flex justify-content-md-end justify-content-center mt-md-0 mt-3'f>>>" +
                "<'table-responsive'tr>" +
                "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
            buttons: {
                buttons: [{
                        extend: 'csv',
                        className: 'btn'
                    },
                    {
                        extend: 'excel',
                        className: 'btn'
                    },
                    {
                        extend: 'print',
                        className: 'btn'
                    }
                ]
            },
            "order": [[ 2, "asc" ], [ 0, "asc" ]],
            "oLanguage": {
                "oPaginate": {
                    "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12,19 5,12 12,5"></polyline></svg>',
                    "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12,5 19,12 12,5"></polyline></svg>'
                },
                "sInfo": "Showing page _PAGE_ of _PAGES_",
                "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.35-4.35"></path></svg>',
                "sSearchPlaceholder": "Search...",
                "sLengthMenu": "Results :  _MENU_",
                "emptyTable": "No facilitators found"
            },
            "stripeClasses": [],
            "lengthMenu": [25, 50, 75, 100],
            "pageLength": 50,
            "responsive": true,
            "autoWidth": false
        });
    </script>
@endsection
<!--  END PAGE SCRIPTS FILE  -->