@extends('dashboard.layouts.master')

@section('css')
    <style>
        .studentData,
        .attendanceStatusApproved,
        .attendanceStatusRefused,
        .studentDataEmpty,
        .degree {
            display: none;
        }
    </style>
@endsection

@section('breadcrumb')
    <div class="col-sm-6">
        <h4 class="page-title">{{ trans('labels.attendance') }}</h4>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">{{ trans('labels.dashboard') }}</a></li>
            <li class="breadcrumb-item"><a
                    href="{{ route('admin.educational-center.index') }}">{{ trans('labels.educational_centers') }}</a>
            </li>
            <li class="breadcrumb-item">{{ $data['center']->name }}</li>
            <li class="breadcrumb-item">{{ trans('labels.groups') }}</li>
            <li class="breadcrumb-item">{{ $data['group']->name }}</li>
            <li class="breadcrumb-item">{{trans('labels.classes')}}</li>
            <li class="breadcrumb-item">{{ $data['class']->title }}</li>
            <li class="breadcrumb-item active">{{ trans('labels.attendance') }}</li>
        </ol>
    </div>

    <div class="col-sm-6">
        @can('configure-data')
        <div class="float-right d-none d-md-block">
                <button class="btn btn-primary waves-effect waves-light" type="button"
                    onclick="location.href='{{ route('admin.educational-center.center-group-students-export', $data['class']->id) }}'"
                    aria-haspopup="true" aria-expanded="false">
                    {{ trans('labels.export') }}
                </button>
        </div>
        <form action="{{ route('admin.educational-center.center-group-students-import', $data['class']->id) }}"
            enctype="multipart/form-data" method="post">
            <button class="btn btn-primary waves-effect" id="waves-light" disabled type="submit" aria-haspopup="true"
                aria-expanded="false">
                {{ trans('labels.import_student') }}
            </button>
            <input type="file" name="file">

        </form>
        @endcan
    </div>
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <div class="form-group">
                        <label>{{ trans('labels.student') }}</label>
                        <input class="form-control @error('student_id') is-invalid @enderror" id="student_id"
                            name="student_id" value="{{ old('student_id') }}">
                        @error('student_id')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary waves-effect waves-light" type="buttom" aria-haspopup="true"
                            aria-expanded="false" onclick="getStudent()">
                            {{ trans('labels.search') }}
                        </button>
                    </div>
                    <div class="form-group studentData">
                        <div style="text-align:center">
                            <div style="width: 150px;height: 150px;
                                border-radius: 50%;
                                border-radius: 50%;
                                margin: auto;" id="flag">
                                
                            </div>
                            <div style="margin-top: 12px;" id="hint"></div>
                            <div style="margin-top: 12px;" id="last_class_exam"></div>
                        </div>
                        <div class="table-responsive mb-2" style="margin-top:20px">
                            <table class="table table-striped mb-0">
                                <tbody>
                                    <tr>
                                        <th scope="row" style="width: 300px;">{{ trans('labels.student_id') }}</th>
                                        <td id="student_id"></td>
                                    </tr>
                                    <tr>
                                        <th scope="row" style="width: 300px;">{{ trans('labels.student_name') }}</th>
                                        <td id="student_name"></td>
                                    </tr>
                                    <tr>
                                        <th scope="row" style="width: 300px;">{{ trans('labels.image') }}</th>
                                        <td id="profile_image">
                                            {{-- <a href="{{ $data->image_full_path }}"
                                                style="color: blue; text-decoration: underline;"><img
                                                    src="{{ $data->image_full_path }}" height="50px"></a> --}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <th scope="row" style="width: 300px;">{{ trans('labels.educational_center') }}
                                        </th>
                                        <td id="center"></td>
                                    </tr>
                                    <tr>
                                        <th scope="row" style="width: 300px;">{{ trans('labels.group') }}</th>
                                        <td id="group"></td>
                                    </tr>
                                    <tr>
                                        <th scope="row" style="width: 300px;">المحاضرات السابقة</th>
                                        <td id="latest_lectures"></td>
                                    </tr>
                                    <tr>
                                        <th scope="row" style="width: 300px;">{{ trans('labels.last_exam') }}</th>
                                        <td id="exam"></td>
                                    </tr>
                                    <tr class="degree">
                                        <th scope="row" style="width: 300px;">{{ trans('labels.degree') }}</th>
                                        <td>

                                            <div class="col-12">
                                                <input id="degree" name="degree" class="form-control col-12 mr-2"
                                                    style="
                                            float: right;"
                                                    placeholder="enter degree" type="number">
                                                <button class="btn btn-success waves-effect waves-light" type="buttom"
                                                    aria-haspopup="true" aria-expanded="false" onclick="addDegree()">
                                                    اضافة
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th scope="row" style="width: 300px;">{{ trans('labels.attendance') }}</th>
                                        <td id="attendanceStatus"></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="row">
                            <div class="col-6 attendanceStatusApproved">
                                <button class="btn btn-success waves-effect waves-light" type="buttom" aria-haspopup="true"
                                    aria-expanded="false" onclick="attendStudent('approved')">
                                    موافق
                                </button>
                            </div>

                            <div class="col-6 attendanceStatusRefused">
                                <input id="reason" name="reason" class="form-control col-8 mr-2"
                                    style="
                                float: right;" placeholder="enter reason">
                                <button class="btn btn-danger waves-effect waves-light" type="buttom" aria-haspopup="true"
                                    aria-expanded="false" onclick="attendStudent('refused')">
                                    رفض
                                </button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12" id="changeStudentId" style="margin-top:20px">
                                <input id="new_student_id" name="new_student_id" class="form-control col-8 mr-2" placeholder="enter student id">
                                <button class="btn btn-primary waves-effect waves-light" type="buttom" aria-haspopup="true"
                                    aria-expanded="false" onclick="updateStudentId()">
                                    تحديث
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="form-group studentDataEmpty">
                        <div class="table-responsive mb-2" style="margin-top:20px">
                            <table class="table table-striped mb-0">
                                <tbody>
                                    <tr>
                                        <th scope="row" style="width: 300px;"> لايوجد طالب بهذا الكود
                                        </th>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div> <!-- end col -->
    </div>
@endsection

@section('script')
    <script>
        function getStudent() {

            $('.attendanceStatusApproved').hide();
            $('.attendanceStatusRefused').hide();

            var studentId = $('#student_id').val();
            if (studentId) {
                $.ajax({
                    type: 'GET',
                    url: `{{ route('admin.educational-center.groupClass.attendance.get-student-by-student-id') }}?student_id=${studentId}&class_id={{ $data['class']->id }}`,
                    success: function(data) {
                        if (data) {
                            var sheftKey = false;
                            let color = data['is_correct'] ? 'green' : 'red';
                            $('#flag').css('background-color', color);
                            $('#hint').html(data['hint']);
                            $('#last_class_exam').html(data['last_class_exam']);
                            $('td#student_id').html(data['student_id']);
                            $('#new_student_id').val(data['student_id']);
                            $('td#student_name').html(data['name']);
                            $('td#profile_image').html(`<a href="${data['profile_image_full_path']}"
                                                style="color: blue; text-decoration: underline;"><img
                                                    src="${data['profile_image_full_path']}" height="50px"></a>`);
                            $('td#center').html(data['center_name']);
                            $('td#group').html(data['group_name']);
                            $('td#attendanceStatus').html((data['attendance']) ? ((data['attendance']['attendance'] == 1) 
                            ? 'تم الحضور' 
                            : '<span style="color:red">تم الرفض '+ data['attendance']['reason']+'</span>') 
                            : 'لم يحضر بعد');

                            $('#degree').val((data['attendance']) ? data['attendance']['degree'] : 0);

                            $('td#exam').html(data['exam']);
                            
                            $('td#latest_lectures').html(data['attend']);

                            $('#reason').val((data['attendance']) ? data['attendance']['reason'] : '');

                            $('.studentData').show();
                            $('#changeStudentId').show();

                            if (data['attendance']) {
                                if (data['attendance']['attendance'] == 1) {
                                    $('.attendanceStatusRefused').show();
                                    $('.attendanceStatusApproved').hide();
                                    console.log(data['attendance']['attendance']);
                                    $('.degree').show();
                                    $('#degree').focus();
                                    $(document).keydown(function(event) {
                                        if (event.keyCode == '27') {
                                            attendStudent('refused')
                                        }
                                    });
                                } else {
                                    $('.attendanceStatusApproved').show();
                                    $('.attendanceStatusRefused').hide();
                                    $('.degree').hide();

                                    $(document).keydown(function(event) {
                                        if (event.keyCode == '16') {
                                            if(!sheftKey){
                                                attendStudent('approved')   
                                            }
                                            sheftKey = true;
                                        }
                                    });
                                }
                            } else {
                                $('.attendanceStatusApproved').show();
                                $('.attendanceStatusRefused').show();
                                $('.degree').hide();

                                $(document).keydown(function(event) {

                                    if (event.keyCode == '27') {
                                        attendStudent('refused')
                                    }

                                    if (event.keyCode == '16') {
                                        if(!sheftKey){
                                            attendStudent('approved')   
                                        }
                                        sheftKey = true;
                                    }
                                });
                            }
                        } else {
                            $('.studentData').hide();
                        }
                        $('.studentDataEmpty').hide();
                    },
                    error: function() {
                        $('.studentData').hide();
                        $('.studentDataEmpty').show();
                    }
                });
            }
        }

        function attendStudent(status) {
            var studentId = $('#student_id').val();
            var reason = $('#reason').val();

            var url =
                '{{ route('admin.educational-center.groupClass.attendance', ['class_id' => $data['class']->id, 'student_id' => ':student_id']) }}?status=' +
                status + '&reason=' + reason;
            if (studentId && ((status == 'refused' && reason) || status == 'approved')) {
                $.ajax({
                    type: 'POST',
                    url: url.replace(':student_id', studentId),
                    success: function(data) {
                        if (data) {
                            $('td#student_id').html('');
                            $('td#student_name').html('');
                            $('td#profile_image').html('');
                            $('td#center').html('');
                            $('td#group').html('');
                            $('.studentData').hide();
                            $('#student_id').val('');
                            $('#student_id').focus();
                        }
                    }
                });
            }
        }

        function addDegree() {
            var studentId = $('#student_id').val();
            var degree = $('#degree').val();
            var url =
                '{{ route('admin.educational-center.groupClass.attendance', ['class_id' => $data['class']->id, 'student_id' => ':student_id']) }}?degree=' +
                degree;
                console.log(url);
            if (degree) {
                $.ajax({
                    type: 'POST',
                    url: url.replace(':student_id', studentId),
                    success: function(data) {
                        if (data) {
                            $('td#student_id').html('');
                            $('td#student_name').html('');
                            $('td#profile_image').html('');
                            $('td#center').html('');
                            $('td#group').html('');
                            $('#degree').val('');
                            $('.studentData').hide();
                            $('#student_id').val('');
                        }
                    }
                });
            }
        }
        
        function updateStudentId(){
            
            var studentId = $('#student_id').val();
            var newId   = $('#new_student_id').val();
            var url = "{{ route('admin.educational-center.updateStudentId') }}";
            url = url.replace(':student_id', studentId);
            url = url.replace('%3Astudent_id', studentId);
            console.log(url);
            url =  url.replace(':new_id', newId);
            url =  url.replace('%3Anew_id', newId);
            console.log(url);
            console.log(studentId);
            console.log(newId);
            $.ajax({
                type: 'POST',
                url: url,
                data:{"student_id": studentId, "new_id": newId},
                success: function(data) {
                    $('#changeStudentId').hide();
                }
            });
            
        }

        $(document).keypress(function(event) {
            var keycode = (event.keyCode ? event.keyCode : event.which);
            if (keycode == '13') {
                if ($("#student_id").is(":focus")) {

                    getStudent();
                }
            }
            if(keycode == '32'){
                console.log(keycode);
                if ($("#degree").is(":focus")) {
                    addDegree()
                }
            }
        });
    </script>

    <script>
        $("input[type=file]").on('change', function() {
            if ($(this).val()) {
                $('#waves-light').attr('disabled', false)
            } else {
                $('#waves-light').attr('disabled', true)
            }
        });
    </script>
@endsection