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

@section('subhead')
    <title>Atarud MIS - Timesheet</title>
@endsection
<style>
    .form-control {
        margin-bottom: 20px;
    }
    table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    }
    th{
        background-color: rgb(244, 200, 4);
        color: white;
    }
</style>
@section('subcontent')
    <div class="grid grid-cols-12 gap-6 mt-5">
        <!-- BEGIN: Data List -->
        <div class="intro-y col-span-12 overflow-auto lg:overflow-visible">

            <button onClick="PrintElem('#timetable')" class="btn btn-primary printer" style="float:right; margin-right: 50px;">Print</button>
            <table style="width: 100%; background-color:white; color:white; text-align:center">
                <tr style=" ">
                    <td style="width:40%;" rowspan="2"><img src="{{ asset('logo/logo.png') }}" width="100%" height="80px"></td>
                    <td style="text-align: center; font-weight: bold; font-size: 50px; background-color: rgb(0 119 181 / var(--tw-bg-opacity));" colspan="2"><h1>Timesheet</h1></td>
                </tr>
                <tr style="border: 1px solid white; background-color: rgb(0 119 181 / var(--tw-bg-opacity));">
                    <td style="border: 1px solid white; font-weight: bold; font-size: 25px;"><h1>Date of Update</h1></td>
                    <td style="border: 1px solid white; font-weight: bold; font-size: 25px;">{{ date('D M-d-y') }}</td>
                </tr>
            </table>
            <div class="overflow-x-auto" id="timetable">
                @if(isset($teachers) )

                <div style="width: 100%; height: 50px; border:1px solid black; background-color: rgb(0 119 181 / var(--tw-bg-opacity)); color:white; text-align:center; ">
                    <h1 style="font-size: 40px; margin-top:8px; ">Timesheet</h1>
                </div>
                <table class="table table-report  table-responsive">
                    <thead>
                        <tr>
                            <th class="whitespace-nowrap">No</th>
                            <th class="whitespace-nowrap">Name</th>
                            <th class="whitespace-nowrap">Fathername</th>
                            <th class="whitespace-nowrap">Courses</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($teachers as $row)
                            @php
                                $subjectTeachs = App\Models\SubjectTeach::where('teacher_id', $row->id)->pluck('course_id')->toArray();
                                // $classroom = $data != null ? $data->name : '';
                                $courses = App\Models\Course::whereIn('id', $subjectTeachs)->where('status', 'active')->get();
                                // $totalMorning += $totalStudents;
                            @endphp
                            <tr>
                                <td>{{ ++$loop->index}}</td>
                                <td>{{ $row->name }}</td>
                                <td>{{ $row->fname }}</td>
                                <td>
                                {{-- @if(count($courses) > 0) --}}
                                    @foreach ($courses as $data )
                                    [ {{ $data->title }} ( {{ $data->time_start }} - {{ $data->time_end }}) ] -
                                    @endforeach
                                {{-- @endif --}}
                            </td>
                            </tr>
                        @endforeach

                            </tbody>
                        </table>
                        @endif
                {{-- <table style="text-align: right; font-size: 20px;width: 100%; border: 1px solid black; margin-top: -10px; color:white;  background-color: rgb(0 119 181 / var(--tw-bg-opacity));" >
                    <tr style="border: 1px solid black;">
                        <td style="border: 1px solid black; padding: 10px 10px 10px 10px;">Total of Student Morning Section</td>
                        <td style="border: 1px solid black; padding: 10px 10px 10px 10px;">{{ $totalMorning }}</td>
                    </tr>
                    <tr style="border: 1px solid black;">
                        <td style="border: 1px solid black; padding: 10px 10px 10px 10px;">Total of Student Afternoon Section</td>
                        <td style="border: 1px solid black; padding: 10px 10px 10px 10px;">{{ $totalAfternoon }}</td>
                    </tr>
                </table> --}}
            </div>
        </div>
        <!-- END: Data List -->
    </div>
@endsection
@section('script')
    <script src="{{ asset('dist/js/jquery.js') }}"></script>
    <script>

    // print invoice function
    function PrintElem(elem) {
        Popup($(elem).html());
    }

    function Popup(data) {
        var mywindow = window.open('', 'TimeTable', 'height=600,width=950');
        mywindow.document.write('<html><head><title>Invoice</title>');
        mywindow.document.write('</head><body >');
        mywindow.document.write(data);
        mywindow.document.write('</body></html>');

        setTimeout(() => {
            mywindow.print();
        mywindow.close();

        }, 500);
        return true;
    }
</script>
@endsection