@extends('layouts.teacher')

@section('content')

<div class="app-content my-3 my-md-5">
	<div class="side-app">
        <x-page.header>Attendance</x-page.header>
		<div class="row">
			<div class="col-xl-12 col-lg-12 col-md-12">
				 <!-- Search Section -->
				 <form action="{{ route('teacher.attendance.search') }}" 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-4">
												<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-5">
												<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-3">
                                                <label class="mt-3 mb-sm-1"> Class date: </label>
                                                <div>
                                                    <select class="form-control select2-show-search" id="date" name="date[]" multiple>

                                                    </select>
                                                </div>
                                            </div>
											{{-- <div class="col-md-3">
												<label class=" mt-3 mb-sm-1"> Student: </label>
												<select class="form-control select2-show-search" id="student" name="student" required>
													<option value="0" disabled selected>Select</option>
												</select>
											</div> --}}
										</div>

									</div>
									<div class="mt-4">
										<input type="submit" id="submit" class="btn btn-primary br-te-7 br-be-7 d-block mx-auto"
											value="Search">
									</div>
								</div>
							</div>
						</div>
					</div>
				</form>
			</div>
	    </div>
        @if (request()->date || request()->course || request()->student)
        <div class="card">
            <div class="card-body">
                @if (count($attendance) > 0)
                    @if ($attendance->total() >150)
                        <button class="btn btn-primary mx-auto d-block w-25 my-6"  data-bs-html="true" data-bs-toggle="tooltip" data-bs-placement="top" title="Please Filter the transactions so you can export data smoothly">Export</button>
                    @else
                        <form action="{{route('teacher.attendance.export',request()->course)}}">
                            <input type="hidden" name="student" value="{{request()->student}}">
                            <input type="hidden" name="course" value="{{request()->course}}">
                            @if (request()->date)
                            @foreach(request()->date as $date)
                                <input type="hidden" name="date[]" value="{{ $date }}">
                            @endforeach
                            @endif
                            <button type="submit" class="btn btn-primary mx-auto d-block w-25 my-5">Export</button>
                        </form>
                    @endif
                @endif
                <div class="table-responsive">

                    <table
                        class=" table table-striped table-bordered table-vcenter text-nowrap" id="attendance_table">
                        <thead>
                            <tr>
                                <th style="text-align: center;position:sticky;left:0px;background-color:#223756;color:#eee;z-index: 1;border:none">Student</th>
                                <th style="text-align: center">
                                    Group
                                </th>
                                @foreach ($meetings as $meeting)
                                    <th style="text-align: center;">{{$meeting->mstartdate}} /
                                        ( <i class="fa fa-clock-o text-primary"></i>
                                        {{date('h:i A', strtotime($meeting->mstarttime))}} )
                                    </th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($attendance as $student)
                            <tr class="text-center">
                                <td style="text-align: center;position:sticky;left:0px;background-color:rgba(247, 171, 100, 1);  border:none">
                                    <a style="color:black;" href="#" target="_blank">
                                        {{$student->first_name.' '.$student->middle_name.' '.$student->last_name}}
                                        <i style="z-index: 1000000;" class="mdi mdi-information-outline leading-loose" data-bs-html="true" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="UserID: {{$student->username}} <br>Email: {{$student->email}} <br> Phone: {{$student->phone}} "></i>
                                    </a>
                                </td>

                                <td>
                                    @foreach ($fav_groups as $group)
                                        @if ($group->user_id == $student->user_id)
                                            <span class="badge badge-info">
                                                {{$group->gname}}
                                            </span>
                                        @endif
                                    @endforeach
                                </td>
                                    @foreach ($meetings as $meeting)
                                    @if (in_array($student->user_id,$meeting->attendants->pluck('id')->toArray()))
                                    <td>
                                        <span style="display:none" >A </span>
                                        <i class="fa fa-check-circle text-success font-weight-bold leading-loose" data-bs-toggle="tooltip" data-bs-placement="top" title=""
                                            data-bs-original-title="Attend">
                                        </i>
                                        {{-- @if ($meeting->attendants->where('id',$student->user_id)->first()->pivot->deleted_at)
                                        <span class="badge ms-2 badge-danger">Deleted</span>
                                        @endif
                                        @if ($meeting->attendants->where('id',$student->user_id)->first()->pivot->is_refunded)
                                        <i class="fa fa-check-circle text-danger font-weight-bold leading-loose" data-bs-toggle="tooltip" data-bs-placement="top" title=""
                                            data-bs-original-title="Refunded">
                                        </i>
                                        @endif
                                        @if ($meeting->attendants->where('id',$student->user_id)->first()->pivot->is_refunded_after_post)
                                        <i class="fe fe-check-circle text-danger font-weight-bold leading-loose" data-bs-toggle="tooltip" data-bs-placement="top" title=""
                                            data-bs-original-title="Refunded after post">
                                        </i>
                                        @endif --}}
                                    </td>
                                    @else
                                    <td>
                                        <span style="display:none" >S </span>
                                        <i class="fa fa-window-close font-weight-bold text-danger leading-loose" data-bs-toggle="tooltip" data-bs-placement="top" title=""
                                        data-bs-original-title="Absent"></i>
                                        <span class="badge ms-2" style="background:#8c2828;" >{{$meeting->mstatus == 'Canceled' ? 'Canceled':''}}</span>
                                    </td>
                                    @endif
                                    @endforeach
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <div class="mt-4">
                        {{ $attendance->appends(Request::except('page'))->render('inc.paginate') }}
                    </div>
                    <p class="mt-3">
                        Displaying {{$attendance->count()}} of {{ $attendance->total() }} attendance(s).
                    </p>
                </div>
            </div>
        </div>
        @endif
</div>
@endsection
@section('teacher-js')
<script>
        // 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) {
                    $('#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>');
                        })

                    });
                }
            });
        });

        // course session dates filter
        $('#course').on('change', function() {
            var $date = $('#date');
            $('#date').empty();
            $('#date').append(`<option value="0" disabled selected>Processing...</option>`);
            $.ajax({
                url: "{{ route('getCourseOfferingStartedMeetings') }}",
                type: 'GET',
                data: {
                    coffid: $(this).val()
                },
                success: function(data) {
                    $('#date').empty();

                    $.each(data, function(id, value) {
                        $('#date').append(`
                        <option value=${value.mid}>
                            Class: ${value.mstartdate}
                        </option>`);
                    });
                }
            });
        });

		$(document).ready(function() {
            $('#attendance_table').dataTable({
                "bPaginate": false,
                "searching": true,
                "ordering": true,
                "info": false,
                "drawCallback": function( settings ) {
                }
            })
    })

</script>
@endsection