@extends('layouts.admin')
@section('content')
    <div class="app-content my-3 my-md-5">
        <div class="side-app">
            <x-page.header>Extended Recordings</x-page.header>
             <!-- Search Section -->
             <form action="{{ route('admin.recording.extendedRecordings',['#recordings']) }}" method="get">
                <div class="mb-5">
                    <div class="">
                        <div class="p-5 bg-white">
                            <div class="mt-3 item2-gl-nav">
                                <div class="d-block ">
                                    <h5 class="mb-2 mt-0">@lang('student.filter by')</h5>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label class=" mt-3 mb-sm-1"> Sessions: </label>
                                            <select class="form-control select2-show-search" id="session" name="acysid">
                                               <option value="0" selected disabled>Select session</option>
                                               @foreach ($sessions as $session)
                                                   <option value="{{$session->acysid}}">{{$session->acyname}}</option>
                                               @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label class=" mt-3 mb-sm-1"> Course Name: </label>
                                            <select class="form-control select2-show-search" id="course" name="course">

                                            </select>
                                        </div>

                                    </div>
                                    <div class="d-flex justify-content-center  mt-6">
                                        <div class="me-3">
                                            <input type="submit" id="submit" class="btn btn-primary br-te-7 br-be-7 "
                                                value="@lang('student.apply filter')">
                                        </div>
                                        <div class="">
                                            <a class="form-control btn  text-light br-te-7 br-be-7 " style="background: #F84242" href="{{route('admin.recording.extendedRecordings')}}">
                                                Reset <i class="fa fa-repeat"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <!--End Search Section -->
           <div class="row">
               <div class="col-md-12 col-lg-12">
                   <div class="card">
                       <div class="card-header">
                           <h3 class="card-title">Students List</h3>
                       </div>
                       <div class="card-body">

                           <div class="table-responsive" id="recordings">
                               <table
                                   class="table card-table table-striped table-bordered border-top table-vcenter text-nowrap" id="recordings_table">
                                   <thead>
                                       <tr>
                                           <th style="text-align: center;">id</th>
                                           <th style="text-align: center;">student name</th>
                                           <th style="text-align: center;">course name</th>
                                           <th style="text-align: center;">end date</th>
                                           <th style="text-align: center;">extended by</th>
                                           <th style="text-align: center;">enrollment method</th>
                                       </tr>
                                   </thead>
                                   <tbody>
                                       @php
                                       $count=0
                                       @endphp
                                       @forelse ($extended_recordings as $recording)
                                           <tr class="text-center">
                                               <td>{{ ++$count }}</td>
                                               <td>
                                                    <a href="{{route('admin.students.show',[$recording->user_id,'is_active_tab=tab3'])}}" target="_blank">
                                                        {{ $recording->first_name.' '.$recording->middle_name.' '.$recording->last_name }}
                                                        <i class="mdi mdi-information-outline leading-loose" data-bs-html="true" data-bs-toggle="tooltip" data-bs-placement="top" title="
                                                        Email: {{ $recording->email}} <br>
                                                        "
                                                        data-bs-original-title=""></i>
                                                    </a>
                                                </td>
                                               <td>
                                                    {{$recording->has_label ? ' ( '.$recording->label.' ) ':''}}  {{$recording->acyname.'_'.$recording->cname.' ( '.$recording->lshort_name.' )'}}
                                                    _{{ $recording->ttname }}
                                                </td>
                                               <td>{{ $recording->recording_end_date }}</td>
                                               <td>
                                                @if ($recording->recording_end_date_extended_by)
                                                {{ $recording->recording_extended_by_fname.' '. $recording->recording_extended_by_lname}}
                                                @else
                                                👻 null
                                                @endif
                                                </td>
                                               <td>
                                                @if ($recording->fees_by_lesson == 1)
                                                    <span class="badge badge-success">By Lesson</span>
                                                @else
                                                <span class="badge badge-primary">By Course</span>
                                                @endif
                                               </td>
                                           </tr>
                                           @empty
                                           <tr>
                                               <td colspan="11">
                                                   <img src="{{env('SECURE_ASSETS').'/images/media/empty_table.svg'}}" class="mx-auto d-block" width="100" alt="empty table">
                                                   <p class="text-primary font-weight-bold text-center mt-3">There is no data!</p>
                                               </td>
                                           </tr>
                                       @endforelse
                                   </tbody>
                               </table>
                               <div class="mt-4">
                                {{ $extended_recordings->appends(Request::except('page'))->render('inc.paginate') }}
                                </div>
                                <p class="mt-3">
                                    Displaying {{$extended_recordings->count()}} of {{ $extended_recordings->total() }} student(s).
                                </p>
                           </div>
                       </div>
                   </div>
               </div>
           </div>
           {{-- @endif --}}

        </div>
    </div>
@endsection
@section('admin-js')
{{-- draw all data tables --}}
<script>
    $(document).ready(function(){
        $('#recordings_table').dataTable( {
            "drawCallback": function( settings ) {
            },
        "bPaginate": false,
        "searching": true,
        "ordering": true,
        "info": false,
        })
    })

    // course session filter
    $('#session').on('change', function() {
            var $course = $('#course');
            $('#course').empty();
            $('#course').append(`<option value="0" disabled selected>Processing...</option>`);
            $.ajax({
                url: "{{ route('sessionFilter') }}",
                type: 'GET',
                data: {
                    acysid: $(this).val()
                },
                success: function(data) {
                    console.log(data)
                    $('#course').empty();
                    $('#course').append(
                        `<option value="0" disabled selected>Select Course*</option>`);
                    // offered course
                    $.each(data, function(id, value) {

                        value.teaching_team.coaching_teachers.map((teacher)=>{
                            $course.append('<option value="' + value.coffid + '">' +
                            (value.has_label ? '( '+value.label+' ) ' : '') + value.course.cname + ' ( '+ value.course.level.lshort_name+' ) '
                            +'_ '+ teacher.first_name+' '+ teacher.middle_name+' '+ teacher.last_name
                            +'_ '+value.academic_year_session.acyname
                            +'</option>');
                        })

                    });
                }
            });
        });

    </script>
@endsection