@extends('dashboard.layouts.master')

@section('css')
    <!-- DataTables -->
    <link href="{{ URL::asset('dashboard/plugins/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet"
        type="text/css" />
    <link href="{{ URL::asset('dashboard/plugins/datatables/buttons.bootstrap4.min.css') }}" rel="stylesheet"
        type="text/css" />
    <!-- Responsive datatable examples -->
    <link href="{{ URL::asset('dashboard/plugins/datatables/responsive.bootstrap4.min.css') }}" rel="stylesheet"
        type="text/css" />

    <link href="{{ URL::asset('dashboard/plugins/sweet-alert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css">
@endsection

@section('breadcrumb')
    <div class="col-sm-6">
        <h4 class="page-title">{{ trans('labels.educational_centers') }}</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">{{ $data['group']->name }}</li>
            <li class="breadcrumb-item">{{ $data['class']->title }}</li>
            <li class="breadcrumb-item active">{{ trans('labels.attendance') }}</li>
        </ol>
    </div>
    @if ($data['class']->status == 0)
    <div class="col-sm-6">
        <div class="float-right d-none d-md-block">
            
        </div>
    </div>
    @endif
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <form action="{{ url()->full() }}">
                        <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="{{ request()->student_id ?? null }}" autofocus>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary waves-effect waves-light" type="buttom"
                                aria-haspopup="true" aria-expanded="false">
                                {{ trans('labels.search') }}
                            </button>
                        </div>
                    </form>
                    @if ($data['student'] ?? null)
                        @php($student = $data['student']->student)
                        <form
                            action="{{ route('admin.educational-center.groupClass.update-attendance', $data['student']->id) }}"
                            method="post">
                            @method('PATCH')
                            @csrf
                            <div class="studentData row">
                                <div class="form-group col-12">
                                    <label>{{ trans('labels.name') }}</label>
                                    <input type="text" class="form-control"
                                        value="{{ $data['student']->student->name }}" disabled>
                                </div>
                                <div class="form-group col-6">
                                    <label>{{ trans('labels.degree') }}</label>
                                    <input type="number" class="form-control" name="degree"
                                        value="{{ $data['student']->degree }}" max="{{ $data['class']->educationalClass->full_degree }}" step="0.01">
                                </div>
                                
                                <div class="form-group col-12">
                                    <label>{{ trans('labels.reason') }}</label>
                                    <input name="reason" class="form-control" type="text"
                                        value="{{ $data['student']->reason }}">
                                </div>

                                <div class="form-group col-12">
                                    <div class="col-6 attendanceStatusApproved">
                                        <button class="btn btn-success waves-effect waves-light" type="buttom"
                                            type="submit" aria-haspopup="true" aria-expanded="false">
                                            {{ trans('labels.update') }}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    @elseif(request()->student_id)
                        <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>
                    @endif
                </div>
                @can('educational-centers-data')
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card mini-stat text-black">
                                <div class="card-body">
                                    <div class="mb-4">
                                        <h5 class="font-16 text-uppercase mt-0 text-black-50"
                                            style="font-weight: bold;">
                                            طلاب حاضرون بدون درجات</h5>
                                    </div>
                                    <div class="pt-2">
                                        <div class="float-right"
                                            style="height: 50px;line-height: 50px;text-align: center;">
                                            <a href="{{ route('admin.educational-center.group-classes-students', ['id' => request()->class_id]) }}?type=without_degree"
                                                class="text-black-50">
                                                <span>تفاصيل</span>
                                            </a>
                                        </div>
                                        <h4 class="font-500">
                                            <span
                                                style="font-size: 27px;font-weight: bold;">{{ $data['studentsWithoutDegree'] }}</span>
                                            <i class="mdi mdi-arrow-up text-success ml-2"></i>
                                        </h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                @endcan
                    <table id="datatable-buttons" class="table table-striped table-bordered dt-responsive nowrap"
                        style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                        <thead>
                            <tr>
                                <th>{{ trans('labels.student_id') }}</th>
                                <th>{{ trans('labels.name') }}</th>
                                <th>{{ trans('labels.email') }}</th>
                                <th>{{ trans('labels.phone') }}</th>
                                <th>رقم ولى الامر</th>
                                <th>الحضور</th>
                                <th>{{ trans('labels.degree') }}</th>
                                <th>{{ trans('labels.reason') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($data['students'] as $attend)
                                <tr id="{{ $attend->student->id }}">
                                    <td>
                                        {{ $attend->student->student_id }}
                                    </td>
                                    <td>{{ $attend->student->name }}</td>
                                    <td>{{ $attend->student->email }}</td>
                                    <td>{{ $attend->student->phone }}</td>
                                    <td>{{ $attend->student->parent_phone }}</td>
                                    <td>{{ $attend->attendance ? 'حاضر' : 'غائب' }}</td>
                                    <th>{{ $attend->degree }}</th>
                                    <th>{{ $attend->reason }}</th>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div> <!-- end col -->
    </div>
    {{-- @endif --}}
@endsection

@section('script')
    <script src="{{ URL::asset('dashboard/plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>
    <!-- Buttons examples -->
    <script src="{{ URL::asset('dashboard/plugins/datatables/dataTables.buttons.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/buttons.bootstrap4.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/jszip-new.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/pdfmake-new.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/vfs_fonts-new.js') }}"></script>

    <script src="{{ URL::asset('dashboard/plugins/datatables/buttons.html5.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/buttons.print.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/buttons.colVis.min.js') }}"></script>
    <!-- Responsive examples -->
    <script src="{{ URL::asset('dashboard/plugins/datatables/dataTables.responsive.min.js') }}"></script>
    <script src="{{ URL::asset('dashboard/plugins/datatables/responsive.bootstrap4.min.js') }}"></script>

    <!-- Datatable init js -->
    <script src="{{ URL::asset('dashboard/assets/pages/datatables-new.init.js') }}"></script>

    <!-- Sweet-Alert  -->
    <script src="{{ URL::asset('dashboard/plugins/sweet-alert2/sweetalert2.min.js') }}"></script>

    <script>
        // function getStudent() {
        //     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) {
        //                 $('.studentData').show();

        //                 $el = $('.studentDataText .alert');
        //                 var classList = $el.attr('class').split(' ');
        //                 $.each(classList, function(id, item) {
        //                     if (item.indexOf('alert-') == 0) $el.removeClass(item);
        //                 });

        //                 $el.html(data['text']);

        //                 if (data['color'] == 'red') {
        //                     $el.addClass('alert-danger');
        //                     $('.attendanceStatusApproved').show();
        //                 } else if (data['color'] == 'orange') {
        //                     $el.addClass('alert-warning');
        //                     $('.attendanceStatusApproved').show();
        //                 } else if (data['color'] == 'green') {
        //                     $el.addClass('alert-successs');
        //                     $('.attendanceStatusApproved').hide();
        //                 }
        //             },
        //             error: function(error) {
        //                 var error = error.responseJSON;

        //                 $('.studentData').show();

        //                 $el = $('.studentDataText .alert');
        //                 var classList = $el.attr('class').split(' ');
        //                 $.each(classList, function(id, item) {
        //                     if (item.indexOf('alert-') == 0) $el.removeClass(item);
        //                 });

        //                 $el.html(error['text']);

        //                 if (error['color'] == 'red') {
        //                     $el.addClass('alert-danger');
        //                     $('.attendanceStatusApproved').hide();
        //                 }

        //             }
        //         });
        //     }
        // }

        function attendStudent() {
            var studentId = $('#student_id').val();
            var url =
                '{{ route('admin.educational-center.groupClass.attendance', ['class_id' => $data['class']->id, 'student_id' => ':student_id']) }}?status=' +
                status;
            console.log(2);
            $.ajax({
                type: 'POST',
                url: url.replace(':student_id', studentId),
                success: function(data) {
                    if (data) {
                        $('.studentData').hide();
                        $('#student_id').val('');
                    }
                }
            });
        }

        function attendStudentCancel() {
            console.log(10);

            $('.studentData').hide();
            $('#student_id').val('');
        }

        $(document).keypress(function(event) {
            var keycode = (event.keyCode ? event.keyCode : event.which);
            if (keycode == '13') {
                // getStudent()
            }
        });
    </script>

    <script>
        $('.addAction').click(function(event) {
            console.log($(this));

            event.preventDefault();
            const url = $(this).attr('data-url');
            Swal.fire({
                title: "هل انت متاكد انك تريد انهاء المحاضرة؟",
                text: "عدد الطالب الحاضرين ({{ $data['studentsAttendedCount'] }}) والطالب الغير الحاضرين ({{ $data['studentNotAttendCount'] }})",
                type: "warning",
                showCancelButton: true,
                cancelButtonText: "{{ trans('labels.cancel') }}",
                confirmButtonColor: "#02a499",
                cancelButtonColor: "#ec4561",
                confirmButtonText: "انهاء المحاضرة"
            }).then(function(result) {
                if (result.value) {
                    $('<form action="' + url + '" method="post"> @csrf </form>').appendTo(
                        'body').submit();
                }
            });
        });
    </script>
    <script>
        $('#send-attend').click(function(event) {
            event.preventDefault();
            const url = $(this).attr('href');
            Swal.fire({
                title: "ارسال رسائل الحضور",
                text: "هل انت متاكد من انك تريد ارسال رسائل الحضور",
                type: "warning",
                showCancelButton: true,
                cancelButtonText: "{{ trans('labels.cancel') }}",
                confirmButtonColor: "#02a499",
                cancelButtonColor: "#ec4561",
                confirmButtonText: "تنفيذ"
            }).then(function(result) {
                if (result.value) {

                    Swal.fire({
                        title: "تم الارسال",
                        text: "",
                        type: "success",
                        confirmButtonText: "{{ trans('labels.ok') }}"
                    });
                    $('<form action="' + url + '" method="post"> @csrf @method('post')</form>').appendTo(
                        'body').submit();
                }
            });
        });
    </script>
@endsection