@extends('../layout/' . $layout)

@section('subhead')
    <title>Atarud MIS - Teachers Teaching Time</title>
@endsection
<style type="text/css">
    .stu_pro tr td {
        padding: 1px;
    }
</style>
@section('subcontent')
    <div class="flex items-center mt-8">
        <h2 class="intro-y text-lg font-medium mr-auto">Teachers Teaching Times</h2>
    </div>

    <div class="grid grid-cols-12 gap-6 mt-5">
        <div class="intro-y col-span-12 flex flex-wrap sm:flex-nowrap items-center mt-2">



            <div class="hidden md:block mx-auto text-slate-500"></div>
            <div class="w-full sm:w-auto mt-3 sm:mt-0 sm:ml-auto md:ml-0">
                <div class="w-56 relative text-slate-500">
                    <input type="text" class="form-control w-56 box pr-10" placeholder="Search...">
                    <i class="w-4 h-4 absolute my-auto inset-y-0 mr-3 right-0" data-lucide="search"></i>
                </div>
            </div>
        </div>

        <!-- BEGIN: Data List -->
        <div class="intro-y col-span-12 overflow-auto lg:overflow-visible">

            <!-- BEGIN: Latest Tasks -->
            @foreach ($teachers as $teacher)
                <div class="intro-y box col-span-12 lg:col-span-6 mt-4">
                    <div class="flex items-center px-5 py-5 sm:py-0 border-b border-slate-200/60 dark:border-darkmode-400">
                        {{-- <h2 class="font-medium text-base mr-auto">Latest Tasks</h2> --}}
                        <div class="relative flex items-center p-5 mr-auto">
                            <div class="w-12 h-12 image-fit">
                                <img alt="Midone - HTML Admin Template" class="rounded-full"
                                    src="{{ asset('dist/images/' . $fakers[0]['photos'][0]) }}">
                            </div>
                            <div class="ml-4 mr-auto">
                                <div class="font-medium text-base">{{ $teacher->name }}</div>
                                <div class="text-slate-500">{{ $teacher->fname }}</div>
                            </div>

                        </div>

                    </div>
                    @php
                        $teaching_history = App\Models\TeachingHistory::where('teacher_id', $teacher->id)->get();
                    @endphp


                    <div class="p-5">
                        <div class="tab-content">
                            <div id="latest-tasks-new" class="tab-pane active" role="tabpanel"
                                aria-labelledby="latest-tasks-new-tab">
                                @foreach ($teaching_history as $row)
                                    @php
                                        $course = App\Models\Course::where('id', $row->course_id)->first();
                                    @endphp
                                    <div class="flex items-center mt-4">

                                        <div class="border-l-2 border-primary dark:border-primary pl-4">
                                            <a href="" class="font-medium">{{ $course->title }}</a>
                                            <div class="text-slate-500">{{ $course->time_start }} - {{ $course->time_end }}
                                            </div>
                                        </div>

                                    </div>
                                @endforeach


                            </div>
                        </div>
                    </div>
                </div>
            @endforeach

            <!-- END: Latest Tasks -->
            {{-- {!! $teachers->links() !!} --}}
        </div>
        <!-- END: Data List -->
    </div>

    @include('../pages/student/show')
    @include('../pages/student/delete')
@endsection
@section('script')
    <script src="{{ asset('dist/js/jquery.js') }}"></script>

    <script>
        $(document).ready(function() {
            $('#select_all_ids').click(function() {
                $('.form-check-input').prop('checked', $(this).prop('checked'));
            });
            $('#deleteAllSelectedRecord').click(function(e) {
                e.preventDefault();
                var all_ids = [];
                $('input:checkbox[name=ids]:checked').each(function() {
                    all_ids.push($(this).val());
                });

                $.ajax({
                    method: "get",
                    url: "{{ url('/student/selected/') }}",
                    // type: "DELETE",
                    data: {
                        ids: all_ids,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(response) {
                        $.each(all_ids, function(key, val) {
                            $('#student_ids' + val).remove();
                        });

                    }
                });

            });
        });

        function deleteStudent(id) {
            $('#studentId').val(id);
        }
        // print invoice function
        function PrintElem(elem) {
            Popup($(elem).html());
        }

        function Popup(data) {
            var mywindow = window.open('', 'invoice', 'height=600,width=850');
            mywindow.document.write('<html><head><title>Invoice</title>');
            mywindow.document.write('<link rel="stylesheet" href="assets/css/neon-theme.css" type="text/css" />');
            mywindow.document.write(
                '<link rel="stylesheet" href="assets/js/datatables/responsive/css/datatables.responsive.css" type="text/css" />'
            );
            mywindow.document.write('</head><body >');
            mywindow.document.write(data);
            mywindow.document.write('</body></html>');

            mywindow.print();
            mywindow.close();

            return true;
        }

        function getStudentInfo(e) {
            $.ajax({
                method: 'GET',
                url: "{{ url('/student/info') }}",
                data: {
                    student_id: e,
                },
                success: function(response) {
                    console.log(response);
                    jQuery('#example-tab-2').html(response[0]);
                    jQuery('#example-tab-1').html(response[1]);
                    jQuery('#student_id').html(response[2].id);
                    jQuery('#student_name').html(response[2].id);
                    jQuery('#student_fname').html(response[2].father_name);

                }
            });
        }

        function screenGrabber() {

            var src = document.getElementById("id_card_print");
            takeHighResScreenshot(src, 5);

        }

        function takeHighResScreenshot(srcEl, scaleFactor) {
            // Save original size of element
            var originalWidth = srcEl.offsetWidth;
            var originalHeight = srcEl.offsetHeight;
            // Force px size (no %, EMs, etc)
            srcEl.style.width = originalWidth + "px";
            srcEl.style.height = originalHeight + "px";

            // Position the element at the top left of the document because of bugs in html2canvas. The bug exists when supplying a custom canvas, and offsets the rendering on the custom canvas based on the offset of the source element on the page; thus the source element MUST be at 0, 0.
            // See html2canvas issues #790, #820, #893, #922
            srcEl.style.position = "fixed";
            srcEl.style.top = "-40px";
            //srcEl.style.left = "-204.5px";
            //srcEl.style.left = "-374.5px";
            srcEl.style.left = "-540px";
            // Create scaled canvas
            var scaledCanvas = document.createElement("canvas");
            scaledCanvas.width = (originalWidth * scaleFactor);
            scaledCanvas.height = originalHeight * scaleFactor;
            scaledCanvas.style.width = originalWidth + "px";
            scaledCanvas.style.height = originalHeight + "px";
            var scaledContext = scaledCanvas.getContext("2d");
            scaledContext.scale(scaleFactor, scaleFactor);

            html2canvas(srcEl, {
                    canvas: scaledCanvas
                })
                .then(function(canvas) {
                    checkCardPosition();
                    img = canvas.toDataURL("image/jpg");
                    window.open(img);
                });
        };

        function checkCardPosition() {
            $('#id_card_print').css('top', '230px');
            $('#id_card_print').css('left', '50px');

        }
    </script>
@endsection