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

@section('subhead')
<title>Atarud MIS - Student Attendance Daily Report</title>
@endsection
<link rel="stylesheet" href="{{ asset('dist/persianDatepicker/css/persianDatepicker-default.css') }}" />

@section('subcontent')
<div class="flex items-center mt-8">
    <div class="dropdown">
        <button class="dropdown-toggle btn btn-primary intro-y" aria-expanded="false" data-tw-toggle="dropdown">Select
            Report Type</button>
        <div class="dropdown-menu w-40">
            <ul class="dropdown-content">
                <li>
                    <a href="{{route('report.attendance.daily')}}" class="dropdown-item">Daily Report</a>
                </li>
                <li>
                    <a href="{{route('report.attendance.monthly')}}" class="dropdown-item">Monthly Report</a>
                </li>
                <li>
                    <a href="{{route('report.attendance.custom')}}" class="dropdown-item">Custom Report</a>
                </li>
                <li>
                    <a href="{{route('report.attendance.classbase')}}" class="dropdown-item">Class Base Report</a>
                </li>
                <li>
                    <a href="{{route('report.attendance.daily.branch')}}" class="dropdown-item">Branch Report</a>
                </li>
            </ul>
        </div>
    </div>


</div>
<div class="flex items-center mt-8">
    <h2 class="intro-y text-lg font-medium mr-auto">Student Attendance Daily Report</h2>
</div>

<div class="grid grid-cols-12 gap-6 mt-6">

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

        <div class="overflow-x-auto">

            <form method="get" action="{{ route('report.attendance.daily') }}">
                @csrf
                @method('get')
                <table class="table">
                    <thead class="table-light">
                        <tr>
                            <th>Select Program</th>
                            <th>Select Semester</th>
                            <th>Select Section</th>
                            <th>Select Course</th>
                            <th>Action</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr>
                            <td>
                                <select name="Program" class="form-control" id="program_id"
                                    onchange="get_class_semesters(this.value)">
                                    <option value="">Select Progarm</option>
                                    @foreach ($programs as $row)
                                    <option value="{{ $row->id }}">
                                        {{ $row->title }}
                                    </option>
                                    @endforeach
                                </select>
                            </td>
                            <td>
                                <select name="semester_id" class="form-control" id="semester_id"
                                    onchange="getSection(this.value)">
                                    <option value="">Select Semester</option>
                                </select>
                            </td>
                            <td>
                                <select name="section_id" class="form-control" id="section_id"
                                    onchange="get_section_courses(this.value)">
                                    <option value="">Select Section</option>
                                </select>
                            </td>
                            <td>
                                <select name="course_id" class="form-control" id="section_selector_holder">
                                    <option value="">Select Class</option>
                                </select>
                            </td>
                            <td>
                                <input type="text" placeholder="YYYY-0M-0D" class="form-control pdpF2" name="date"
                                    id="date">
                            </td>
                            <td>
                                <button type="sumbit" class="btn btn-sm btn-primary"
                                    style="display: inline;">Result</button>
                            </td>
                        </tr>
                    </tbody>

                </table>
            </form>

        </div>


        <div class="overflow-x-auto" style="border-radius:5px; border:1px solid #e5e7eb; background-color: white;">
            <div class="p-5">
                @if(isset($att))

                <img style='width:400px;' id='logo' src="{{asset('uploads/logo.png')}}">
                <h1 style="color:#37AFEE; font-size: 20px; padding: 6px; margin-top:5px;">Student Daily Attendance
                    Report</h1>
                <div class="overflow-x-auto parents" id="parent">
                    <table class="table mt-5" id="child" style="width: 100%;">
                        <thead class="table-light">
                            <tr>
                                <th class="whitespace-nowrap">#</th>
                                <th class="whitespace-nowrap">ID</th>
                                <th class="whitespace-nowrap">Student Name</th>
                                <th class="whitespace-nowrap">Father Name</th>
                                <th class="whitespace-nowrap">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($att as $row)
                            @php
                            $student = App\Models\Student::where('id', $row->student_id)->first();
                            if($student == null) continue;
                            $invoice = App\Models\Invoice::where('student_id',
                            $student->student_id)->where('section_id', $data['course']->id)->first();
                            $invoice_id = $invoice != null ? $invoice->id: '';
                            @endphp
                            <tr>
                                <td>{{++$loop->index}}</td>
                                <td>{{$student->id}}</td>
                                <td>{{$student->name}}</td>
                                <td>{{$student->father_name}}</td>
                                <td>
                                    @php echo(student_attendance_status($row->status)) @endphp
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="p-5">
                    <table class="table table-bordered datatable" cellpadding="0" cellspacing="0"
                        style="width:30%; float: right;">
                        <thead>
                            @foreach ($data['total'] as $row )
                            <tr>
                                <td>@php echo(student_attendance_status($row->status)) @endphp</td>
                                <td>{{ $row->total }}</td>
                            </tr>
                            @endforeach

                        </thead>
                    </table>
                </div>

                @endif
            </div>
        </div>

        <!-- END: Data List -->
    </div>

    @endsection
    @section('script')
    <script src="{{ asset('dist/js/jquery.js') }}"></script>
    <script src="{{ asset('dist/persianDatepicker/js/persianDatepicker.js') }}"></script>
    <script>
        $(function () {

            $(".pdpF2").persianDatepicker({
                months: ["حمل", "ثور", "جوزا", "سرطان", "اسد", "سنبله", "میزان", "عقرب", "قوس", "جدی", "دلو", "حوت"],
                dowTitle: ["شنبه", "یکشنبه", "دوشنبه", "سه شنبه", "چهارشنبه", "پنج شنبه", "جمعه"],
                shortDowTitle: ["ش", "ی", "د", "س", "چ", "پ", "ج"],
                showGregorianDate: !1,
                persianNumbers: !0,
                formatDate: "YYYY/MM/DD",
                selectedBefore: !1,
                selectedDate: null,
                startDate: null,
                endDate: null,
                prevArrow: '\u25c4',
                nextArrow: '\u25ba',
                theme: 'default',
                alwaysShow: !1,
                selectableYears: null,
                selectableMonths: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
                cellWidth: 25, // by px
                cellHeight: 20, // by px
                fontSize: 13, // by px
                isRTL: !1,
                calendarPosition: {
                    x: 0,
                    y: 0,
                },
                onShow: function () {},
                onHide: function () {},
                onSelect: function () {},
                onRender: function () {}
        });

        });
    </script>


    <script>
        function get_class_semesters(program_id) {
            $.ajax({
                method: 'GET',
                url: "{{ url('/get/program/semester/') }}",
                data: {
                    p_id: program_id,
                },

                success: function(response) {

                    jQuery('#semester_id').html(response);

                }
            });
        }
        function get_section_courses(section_id) {
            $.ajax({
                method: 'GET',
                url: "{{ url('/get/section/course/') }}",
                data: {
                    s_id: section_id,
                },

                success: function(response) {
                    jQuery('#section_selector_holder').html(response);

                }
            });
        }
        function getSection(semester_id) {
            $.ajax({
                method: 'GET',
                url: "{{ url('/get/semester/section/') }}",
                data: {
                    s_id: semester_id,
                },

                success: function(response) {
                    jQuery('#section_id').html(response);

                }
            });
        }
    </script>
    @endsection