@extends('layouts.admin')
@section('content')
    <div class="app-content my-3 my-md-5  profile-1">
        <div class="side-app">
            <x-page.header>Canceled Meetings</x-page.header>
             <!-- Search Section -->
             <form action="{{ route('admin.canceledMeetings',['#meetings']) }}" 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">
                                        <input type="hidden" value="{{request()->get('type')}}" name="type">
                                        <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 class="col-md-6">
                                            <label class="mt-3 mb-sm-1"> from: </label>
                                            <div>
                                            <input type="date" class="form-control" name="start_date" id="from" value="{{request()->start_date ? request()->start_date :''}}">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="mt-3 mb-sm-1"> to: </label>
                                            <div>
                                            <input type="date" class="form-control" name="end_date" id="to" value="{{request()->start_date ? request()->end_date :''}}">
                                            </div>
                                        </div>
                                        <div class="mt-6">
                                            <input type="submit" id="submit" class="btn btn-primary br-te-7 br-be-7 mx-auto d-block"
                                                value="@lang('student.apply filter')">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <!--End Search Section -->
           {{-- tabs --}}
           <div class="mt-8">
            <div class="ps-0 pb-5">
                <div class="wideget-user-tab">
                    <div class="tab-menu-heading">
                        <div class="tabs-menu1">
                            <ul class="nav">
                                <li>
                                    <a href="{{ route('admin.canceledMeetings',['type=canceled','#meetings']) }}" class="w-100 {{request()->type == 'canceled' || !request()->type ? 'active':''}}">
                                        Canceled
                                        @if ( request()->type == 'canceled' || !request()->type )
                                            <span class="badge badge-light light ms-2">{{ $canceled_meetings->total() }}</span>
                                        @endif
                                    </a>
                                </li>
                                <li class="ms-0">
                                    <a href="{{ route('admin.canceledMeetings',['type=adjusted','#meetings']) }}" class="ms-3 me-2 w-100  {{request()->type == 'adjusted' ? 'active':''}}" >
                                        Adjusted
                                        @if ( request()->type == 'adjusted')
                                            <span class="badge badge-light light ms-2">{{ $canceled_meetings->total() }}</span>
                                        @endif
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
           <div class="row">
               <div class="col-md-12 col-lg-12">
                   <div class="card">
                       <div class="card-header">
                           <h3 class="card-title">Meetings List</h3>
                       </div>
                       <div class="card-body">

                           <div class="table-responsive" id="meetings">
                               <table
                                   class="table card-table table-striped table-bordered border-top table-vcenter text-nowrap" id="meetings_table">
                                   <thead>
                                       <tr>
                                           <th style="text-align: center;">@lang('student.table.id')</th>
                                           <th style="text-align: center;">@lang('student.table.course name')</th>
                                           <th style="text-align: center;">teaching team</th>
                                           <th style="text-align: center;">start date</th>
                                           <th style="text-align: center;">start time</th>
                                            <th style="text-align: center;">meeting number</th>
                                            <th style="text-align: center;">topic</th>
                                            <th style="text-align: center;">group</th>
                                            @if (request()->type == 'adjusted')
                                            <th style="text-align: center;">adjustment date</th>
                                            @endif
                                       </tr>
                                   </thead>
                                   <tbody>

                                       @forelse ($canceled_meetings as $key=>$meeting)
                                           <tr class="text-center">
                                               <td>{{ ++$key }}</td>
                                               <td>
                                                {{$meeting->has_label ? ' ( '.$meeting->label.' ) ':''}}  {{$meeting->acyname.'_'.$meeting->cname.' ( '.$meeting->lshort_name.' )'}}
                                                </td>
                                                <td>
                                                    {{ $meeting->ttname }}
                                                </td>
                                               <td>
                                                   {{ $meeting->mstartdate }}
                                               </td>
                                               <td>{{ $meeting->mstarttime }}</td>
                                               <td>
                                                {{$meeting->mnumber}}
                                                </td>
                                                <td>
                                                    {{$meeting->mtopic}}
                                                </td>
                                                <td>
                                                    {{$meeting->is_extra ? 'Extra': $meeting->gname}}
                                                </td>
                                                @if (request()->type == 'adjusted')
                                                <td>
                                                    <p>
                                                        <i class="fa fa-calendar"></i>
                                                        {{ date('Y-m-d', strtotime($meeting->adjustment_date)) . ' / '}}
                                                        <i class="fa fa-clock-o"></i>
                                                        {{date('h:i A', strtotime($meeting->adjustment_date))}}
                                                    </p>
                                                </td>
                                                @endif
                                           </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">
                                {{ $canceled_meetings->appends(Request::except('page'))->render('inc.paginate') }}
                                </div>
                                <p class="mt-3">
                                    Displaying {{$canceled_meetings->count()}} of {{ $canceled_meetings->total() }} meeting(s).
                                </p>
                           </div>
                       </div>
                   </div>
               </div>
           </div>
           {{-- @endif --}}

        </div>
    </div>
@endsection
@section('admin-js')
{{-- draw all data tables --}}
<script>
    $(document).ready(function(){
        $('#transactions_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