@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">{{ $class->name }}</li>
            <li class="breadcrumb-item active">{{ trans('labels.attendance') }}</li>
        </ol>
    </div>

    <div class="col-sm-6">

    </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>
                        <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;">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 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 addnew" id="addnew" style="display: none;">
                                <button class="btn btn-success waves-effect waves-light" type="buttom" aria-haspopup="true"
                                    aria-expanded="false" onclick="addStudent()">
                                    تسجيل حضور
                                </button>
                            </div>

                            <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>
                    <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.class-booking.get-class-booking-by-id') }}?student_id=${studentId}&class_id={{ $class->id }}`,
                    success: function(data) {
                        if (data) {
                            if(data['class-booking-id'] == 0){
                                 $('.studentData').show();
                                let color = 'red';
                                $('#flag').css('background-color', color);
                                $('#hint').html(data['hint']);
                                $('td#student_id').html(data['student']['phone']);
                                $('td#student_name').html(data['student']['name']);
                                $('#addnew').show();
                            }else if(data['attendance'] == 5){
                                $('.studentData').show();
                                let color = 'red';
                                $('#flag').css('background-color', color);
                                $('#hint').html(data['hint']);
                                $('td#student_id').html(data['class-booking-id']);
                                $('td#student_name').html(data['student']['name']);
                                $('#addnew').hide();
                            }else{
                                var sheftKey = false;
                                let color = data['attenance'] ? 'red' : 'green';
                                $('#flag').css('background-color', color);
                                $('#hint').html(data['hint']);
                                $('td#student_id').html(data['class-booking-id']);
                                $('td#student_name').html(data['student']['name']);
                                // $('td#profile_image').html(`<a href="${data['student']['profile_image_full_path']}"
                                //                     style="color: blue; text-decoration: underline;"><img
                                //                         src="${data['profile_image_full_path']}" height="50px"></a>`);
                                $('td#attendanceStatus').html(
                                    (data['attendance'])
                                     ? 
                                        (
                                            (data['attendance'] == 1) 
                                            ? 'تم الحضور' 
                                            : '<span style="color:red">تم الرفض '+ data['attendance']['reason']+'</span>'
                                        ) 
                                    : 'لم يحضر بعد');

                                $('#degree').val((data['attendance']) ? data['attendance']['degree'] : 0);
                                
                                $('#reason').val((data['attendance']) ? data['attendance']['reason'] : '');
                                $('#addnew').hide();
                                $('.studentData').show();
                                $('#changeStudentId').show();

                                if (data['attendance']) {
                                    $('.attendanceStatusApproved').hide();
                                    $('.attendanceStatusRefused').hide(); 
                                } 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 bookingId = $('td#student_id').text();
            var reason = $('#reason').val();

            var url =
                '{{ route('admin.class-booking.attendance', ['id' => ':bookingId']) }}?status=' +
                status + '&reason=' + reason;
            console.log(url);
            console.log(status);
            console.log(bookingId);
            var data = {};
            data['_token'] = $('meta[name="csrf-token"]').attr('content');
            if ((status == 'refused' && reason) || status == 'approved') {
                console.log('url');
                $.ajax({
                    type: 'POST',
                    url: url.replace(':bookingId', bookingId),
                    data: data,
                    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 addStudent(){
            var studentId = $('td#student_id').text();
            var data = {};
            data['_token'] = $('meta[name="csrf-token"]').attr('content');
            var url =
                '{{ route('admin.class-booking.add-order', ['class_booking_id' => $class->id ]) }}&student_id='+studentId;
            $.ajax({
                type: 'POST',
                data: data,
                url: url.replace(':studentId', 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' => $class->id, 'student_id' => ':student_id']) }}?degree=' +
                degree;
                console.log(url);
            var data = {};
            data['_token'] = $('meta[name="csrf-token"]').attr('content');
            if (degree) {
                $.ajax({
                    type: 'POST',
                    url: url.replace(':student_id', studentId),
                    data: data,
                    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, '_token' : $('meta[name="csrf-token"]').attr('content')},
                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