@extends('layouts.master')
@section('content')
<div class="card">
    <div class="card-body">
        <form method="POST" action="{{ route('student_attendance.search') }}" class="row">
            @csrf

            <div class="form-group col-lg-2 col-md-4 col-sm-6">
                {{ generateDropdown($shifts, 'class="form-control shift_id" id="shift_id" name="shift_id"', $shift_id, "Shift") }}
            </div>
            <div class="form-group col-lg-2 col-md-4 col-sm-6">
                {{ generateDropdown($groups, 'class="form-control group_id" id="group_id" name="group_id"', $group_id, "Group") }}
            </div>
            <div class="form-group col-lg-2 col-md-4 col-sm-6">
                {{ generateDropdown($studentClasses, 'class="form-control student_class" id="student_class" name="student_class_id" required', $student_class_id, "Class") }}
            </div>

            <div class="form-group col-lg-2 col-md-4 col-sm-6">
                {{ generateDropdown([], 'class="form-control section_id" id="section_id" name="section_id"', $section_id, 'Section') }}
            </div>

            <div class="form-group col-lg-2 col-md-4 col-sm-6">
                <input type="date" class="form-control attendance_date" name="attendance_date" value="{{$attendance_date ?? date("Y-m-d")}}" id="attendance_date" readonly required>
            </div>
            <div class="form-group col-lg-2 col-md-4 col-sm-6">
                <button type="submit" class="btn btn-info ">Search</button>
            </div>
        </form>
    </div>
</div>
@if (isset($students))

    <div class="card mt-4">
        <div class="card-body">
            <div class="row">
                <div class="col-md-12">
                    <form method="POST" action="{{ route('marks.store') }}" class="form-inline">
                        @csrf
                        <div class="table-responsive">

                            <table class="table">
                                <thead class="thead-light">
                                    <tr>
                                        <th>Student ID</th>
                                        <th>Roll</th>
                                        <th>Student Name</th>
                                        <th>Action</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($students as $student)
                                        <tr>
                                            <td>{{ $student->student_id_no }}</td>
                                            <td>{{ $student->class_roll }}</td>
                                            <td>{{ $student->first_name }} {{ $student->last_name }}</td>
                                            <td>
                                                <button id="attendance-btn-{{$student->id}}" class="btn btn-sm btn-info" onclick="studentAttendance(event, {{$student->id}}, 'P')" >Present</button>
                                                <button id="attendance-btn-{{$student->id}}" class="btn btn-sm btn-primary" onclick="studentAttendance(event, {{$student->id}}, 'A')" >Absent</button>
                                            </td>
                                            <td id="icon-{{$student->id}}">
                                                @if (isset($student->attendance->is_present) && $student->attendance->is_present == 1)
                                                    <span class="d-inline-block rounded-circle bg-success text-white text-center" style="width: 26px; height: 26px; line-height: 26px; font-weight: bold;">P</span>
                                                @elseif (isset($student->attendance->is_absent) && $student->attendance->is_absent == 1)
                                                    <span class="d-inline-block rounded-circle bg-warning text-white text-center" style="width: 26px; height: 26px; line-height: 26px; font-weight: bold;">A</span>
                                                @else
                                                    <i style="font-size: 1.7rem;color: red; font-weight: bold;" class="fas fa-exclamation-circle"></i>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>

@endif
@stop



@section('scripts')
    <script>
        const shift_id = "{{$shift_id}}";
        const studentAttendance = (event, student_id, attendance_status) => {
            event.preventDefault();
            if(student_id){
                const csrfToken = document.head.querySelector('meta[name="csrf-token"]').content;
                const buttonId = `#attendance-btn-${student_id}`;
                $.post("{{ route('student_attendance.store') }}", {
                    _token: csrfToken,
                    student_id: student_id,
                    attendance_status: attendance_status,
                    shift_id: shift_id
                }, function(response) {
                    if (response.success) {
                        let icon = '';
                        console.log(response)
                        if(response.data.is_present == 1){
                            icon = `<span class="d-inline-block rounded-circle bg-success text-white text-center" style="width: 26px; height: 26px; line-height: 26px; font-weight: bold;">P</span>`;
                        }else if(response.data.is_absent == 1){
                            icon = `<span class="d-inline-block rounded-circle bg-warning text-white text-center" style="width: 26px; height: 26px; line-height: 26px; font-weight: bold;">A</span>`;
                        }
                        $(`#icon-${student_id}`).html(icon);

                        toastr.success(response.message, 'Success');

                    }
                });
            }
        }

        $('.student_class').on('change', function(){
            let student_class_id = $('.student_class').val();
            getSection(student_class_id);
        });

        let student_class_id = "{{ isset($student_class_id) ? $student_class_id : '' }}";

        if(student_class_id!=''){
            getSection(student_class_id);
        }

        function getSection(student_class_id){
            let section_id = "{{ isset($section_id) ? $section_id : '' }}";
            if(student_class_id){
                $.get('{{ route('sections.list_by_class') }}', { student_class_id: student_class_id }, function(response) {
                    let sections = response;

                    let option = '<option value="">Section</option>';
                    for(let i=0;i<sections.length;i++){
                        // if(sections[i].student_class_id == student_class_id){
                            if(section_id==sections[i].id){
                                option += '<option value='+sections[i].id+' selected>'+sections[i].section_name+'</option>';
                            }else{
                                option += '<option value='+sections[i].id+' >'+sections[i].section_name+'</option>';
                            }

                        // }
                    }
                    console.log(option);
                    $('select.section_id').empty().append(option);
                });
            }
        }

    </script>
@endsection