@extends('layouts.web')

@section('css')
<link href="{{ asset('css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" />
<link href="{{ asset('css/sweetalert2.min.css') }}" rel="stylesheet">
@endsection

@section('content')
<section class="content">
    <div class="container-fluid pt-3">
        <!-- Small boxes (Stat box) -->
        <div class="row">
            <div class="col-lg-3 col-6">
                <div class="small-box bg-primary">
                    <div class="inner">
                        <h3>{{$students}}</h3>
                        <p>นักเรียนปัจจุบัน</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-user"></i>
                    </div>
                    <a href="{{ route('student.index') }}" class="small-box-footer">รายละเอียด <i class="fas fa-arrow-circle-right"></i></a>
                </div>
            </div>

            <div class="col-lg-3 col-6">
                <div class="small-box bg-info">
                    <div class="inner">
                        <h3>{{$teachers}}</h3>
                        <p>ผู้สอน</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-user-tie"></i>
                    </div>
                    <a href="{{ route('teacher.index') }}" class="small-box-footer">รายละเอียด <i class="fas fa-arrow-circle-right"></i></a>
                </div>
            </div>

            <div class="col-lg-3 col-6">
                <div class="small-box bg-course">
                    <div class="inner">
                        <h3>{{$courses}}</h3>
                        <p>คอร์สเรียน</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-book"></i>
                    </div>
                    <a href="{{ route('course.index') }}" class="small-box-footer">รายละเอียด <i class="fas fa-arrow-circle-right"></i></a>
                </div>
            </div>

            <div class="col-lg-3 col-6">
                <div class="small-box bg-warning">
                    <div class="inner">
                        <h3>{{$vehicles}}</h3>
                        <p>ยานพาหนะ</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-car"></i>
                    </div>
                    <a href="{{ route('vehicle.index') }}" class="small-box-footer">รายละเอียด <i class="fas fa-arrow-circle-right"></i></a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-3 col-6">
                <div class="small-box bg-exam-student">
                    <div class="inner">
                        <h3>{{$exam_student}}</h3>
                        <p>นักเรียนที่มีสอบสัปดานี้</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-chalkboard-teacher"></i>
                    </div>
                    <a href="{{ route('home.showExam') }}" class="small-box-footer">รายละเอียด <i class="fas fa-arrow-circle-right"></i></a>
                </div>
            </div>

            <div class="col-lg-3 col-6">
                <div class="small-box bg-tomorrow-student">
                    <div class="inner">
                        <h3>{{$tomorrow}}</h3>
                        <p>สรุปตารางวันพรุ่งนี้</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-chalkboard-teacher"></i>
                    </div>
                    <a href="{{ route('home.showTomorrow') }}" class="small-box-footer">รายละเอียด <i class="fas fa-arrow-circle-right"></i></a>
                </div>
            </div>

            <div class="col-lg-3 col-6">
                <div class="small-box bg-success">
                    <div class="inner">
                        <h3>{{$income}}</h3>
                        <p>รายรับวันนี้</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-hand-holding-usd"></i>
                    </div>
                    <a href="{{ route('finance') }}" class="small-box-footer">รายละเอียด <i class="fas fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <div class="col-lg-3 col-6">
                <div class="small-box bg-danger">
                    <div class="inner">
                        <h3>{{$outcome}}</h3>
                        <p>รายจ่ายวันนี้</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-hand-holding-usd"></i>
                    </div>
                    <a href="{{ route('finance') }}" class="small-box-footer">รายละเอียด <i class="fas fa-arrow-circle-right"></i></a>
                </div>
            </div>


        </div>
        <!-- /.row -->
        <!-- Main row -->
        <div class="row">
            <div class="col-6">
                <div class="card card-outline card-danger">
                    <div class="card-header">
                        <h3 class="card-title">นักเรียนที่มียอดค้างชำระ</h3>
                    </div>
                    <div class="card-body">
                        <table class="table page-table" id="student-table">
                            <thead>
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">ชื่อ-นามสกุล</th>
                                    <th scope="col">ยอดค้างชำระ</th>
                                </tr>
                            </thead>
                            <tbody>
                            @foreach($remains as $keyIndex => $remain)
                                <tr>
                                    <td>{{ $keyIndex+1 }}</th>
                                    <td>
                                        <a class="course-title-link" href="{{ route('student.show',$remain['sid']) }}">
                                            {{ $remain['name'] }}
                                        </a>
                                    </td>
                                    <td class="text-danger">{{ $remain['remain'] }}</td>
                                </tr>
                            @endforeach
                            </tbody>
                          </table>
                    </div>
                </div>
            </div>
            <div class="col-6">
                <div class="card card-outline card-danger">
                    <div class="card-header">
                        <h3 class="card-title">ครูที่ยังไม่ได้สแกนหลังจากสอนเสร็จ</h3>
                    </div>
                    <div class="card-body">
                        <table class="table page-table">
                            <thead>
                                <tr>
                                    <th scope="col" width="30%">เวลาที่สอนเสร็จ</th>
                                    <th scope="col" width="60%">ชื่อ-นามสกุล</th>
                                    <th scope="col" width="10%"></th>
                                </tr>
                            </thead>
                            <tbody>
                            @foreach($checkouts as $keyIndex => $out)
                                <tr>
                                    <td>{{ formatTimeFromDB($out->endtime) .' น.' }}</td>
                                    <td><a href="#" class="course-title-link">{{ $out->firstname.' '.$out->lastname }}</a></td>
                                    <td>
                                        <form id="checkout{{ $keyIndex }}" class="d-inline"
                                        method="POST"
                                        action="{{ route('teacher.checkout') }}"
                                        onsubmit="confirmalert(event, {{ $keyIndex }})"
                                        >
                                        @csrf
                                            <input type="hidden" name="vbid" value="{{ $out->vbid }}">
                                            <button type="submit" class="btn del-btn btn-sm ml-2" data-toggle="tooltip" data-placement="top" title="สแกนออก">
                                                <i class="fas fa-fingerprint"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                          </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.row (main row) -->
    </div>
    <!-- /.container-fluid -->
</section>
<!-- /.content -->
@endsection


@section('footerscript')
<script src="{{ asset('js/sweetalert2.min.js') }}"></script>
<script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('js/dataTables.bootstrap4.min.js') }}"></script>
<script>
    function confirmalert(e, f) {
        var form = 'del-frm' + f;
        e.preventDefault();
        Swal.fire({
                title: 'ยืนยันการสแกนหลังสอนเสร็จ ?',
                icon: 'warning',
                showCancelButton: false,
                confirmButtonColor: '#62966C',
                denyButtonColor: '#CACACA',
                showDenyButton: true,
                confirmButtonText: 'ตกลง',
                denyButtonText: 'ยกเลิก'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById(form).submit();
                } else if (result.isDenied) {
                    return false;
                }
            });
    }
    $(document).ready(function() {
        $('.page-table').DataTable({
            "lengthChange": false,
            "info": false,
            "searching": false,
            "pageLength": 20,
            "language": {
                "emptyTable":   "ไม่พบข้อมูล",
                "paginate": {
                    "first":    "หน้าแรก",
                    "last":     "หน้าสุดท้าย",
                    "next":     "ถัดไป",
                    "previous": "ก่อนหน้า"
                },
                "lengthMenu":   "จำนวนนักเรียนทั้งหมด _MENU_ คน",
            }
        });

        $('#student-table tr td:not(:last-child)').click(function () {
            var href = $(this).closest('tr').find('a').attr('href');
            location.href = href;
        });

        $('#teacher-table tr td:not(:last-child)').click(function () {
            var href = $(this).closest('tr').find('a').attr('href');
            location.href = href;
        });
    });
</script>
@if (session('feedback'))
<script>
    Swal.fire({
                text: '{{ session('feedback') }}',
                icon: 'success',
                confirmButtonText: 'ตกลง',
                confirmButtonColor: '#62966C'
    })
</script>
@endif
@endsection
