@extends('layouts.admin')

@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('admin.attendance.record.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-3">
												<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-3">
												<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 for="group" class=" mt-3 mb-sm-1"> Group Name: <i
                                                    class="text-danger">(required)</i></label>
                                                <select class="form-control select2-show-search" id="group" required name="group">
                                                </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[]" >

                                                    </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)
        <form action="{{ route('admin.attendance.create') }}" method="post">
            @csrf
            <input type="hidden" name="coffid" value="{{request()->course}}">
            <input type="hidden" name="meetingId" value="{{request()->date[0]}}">

        <div class="card">
            <div class="card-header">
                <div class="row w-100">
                <div class="col-md-6">
                    <h5 class="mb-2 mt-0">Result </h5>
                </div>
                <div class="col-md-6 float-end">
                <button type="button" class="btn btn-primary br-te-7 br-be-7 d-block mx-auto float-end" onclick="checkAllCheckboxes();" >select all</button>
                </div>
                </div>
            </div>
            <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('admin.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 --}}
                @php
                $count=0
                @endphp

                <div class="table-responsive">

                    <table
                        class=" table table-striped table-bordered table-vcenter text-nowrap" id="attendance_table">
                        <thead>
                            <tr>
                                <th>#</th>
                                <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
                                <th style="text-align: center;">
                                    Attended ?
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($attendance as $student)

                            <tr class="text-center">
                                <td>{{++$count}}</td>
                                <td style="text-align: center;position:sticky;left:0px;background-color:rgba(247, 171, 100, 1);  border:none">
                                    <a style="color:black;" href="{{route('admin.students.show',$student->user_id)}}" 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}} <br> Parent Phone: {{$student->parent_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>
                                    @if (!$isEmpty)


                                    @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>
                                    <td class="text-center">

                                            <input class="form-check-input" checked type="checkbox" id="attended" value="{{$student->user_id}}" name="{{'attended['.$meeting->mid.'][]'}}" />

                                            <label class="form-check-label" for="attended">

                                              </label>

                                    </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>
                                    <td class="text-center">
                                            <input class="form-check-input"  type="checkbox" id="attended" value="{{$student->user_id}}" name="{{'attended['.$meeting->mid.'][]'}}" />
                                            <label class="form-check-label" for="attended">

                                              </label>

                                    </td>
                                    @endif

                                    @endforeach
                                    @else
                                    <td class="text-center">
                                        <input class="form-check-input"  type="checkbox" id="attended" value="{{$student->user_id}}" name="{{'attended['.Request::get('date')[0].'][]'}}" />
                                        <label class="form-check-label" for="attended">

                                          </label>

                                </td>
                                    @endif
                                </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 class="card-footer">
                <div class="mt-4">
                    <input type="submit" id="submit" class="btn btn-primary br-te-7 br-be-7 d-block mx-auto"
                        value="Save">
                </div>
            </div>
        </div>
        </form>
        @endif
</div>
@endsection
@section('admin-js')
<script>
function checkAllCheckboxes() {
    // Get all checkbox elements on the page
    const checkboxes = document.querySelectorAll('input[id="attended"]');

    // Loop through the checkboxes and check them
    checkboxes.forEach(checkbox => checkbox.checked = true);

}
        // 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').on('change', function() {
            var $group = $('#group');
            var url="{{ route('getCourseOfferingGroups',[':coffid']) }}"
            url=url.replace(':coffid',$(this).val())

            $('#group').empty();
            $('#group').append(`<option value="0" disabled selected>Processing...</option>`);
            $.ajax({
                url: url,
                type: 'GET',
                success: function(data) {
                    $('#group').empty();
                    $('#group').append(
                        `<option value="0" disabled selected>Select Group*</option>`);
                    $.each(data, function(id, value) {
                        $group.append('<option value="' + value.gid + '">' +
                            value.group_name.gname + '</option>');
                    });
                }
            });
        });




        $('#group').change(function() {
            var selectedGroup = $(this).val();

            $('#date').empty();
            $('#date').append(`<option value="0" disabled selected>Processing...</option>`);
            $.ajax({
                url: '{{ route("getMeetingsBasedOnGroup") }}',
                type: 'GET',
                dataType: 'json',
                data: { group: selectedGroup },
                success: function(data) {
                    $('#date').empty();
                    $.each(data, function(index, session) {
                        $('#date').append(`<option value=${session.mid}>${session.mstartdate} / ${session.mstarttime}</option>`);
                    });
                },
                error: function(xhr, status, error) {
                    console.error('Error fetching data:', error);
                }
            });
        });

        function convertTo12HourNative(time24) {
    // Create a new Date object using a time in 24-hour format
    const [hours, minutes] = time24.split(':');
    const date = new Date();
    date.setHours(hours, minutes);

    // Use toLocaleTimeString to convert to 12-hour format
    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: true });
}

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

</script>
@endsection