@extends('layouts.web')

@section('css')
<link href="{{ asset('css/dataTables.bootstrap4.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-all-student">
                    <div class="inner">
                        <h3>{{$all_student}}</h3>
                        <p>จำนวนนักเรียนทั้งหมด</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-user"></i>
                    </div>
                    <div class="small-box-footer"> <i class="far fa-window-minimize"></i></div>
                </div>
            </div>

            <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-secondary">
                    <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>
        <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-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 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>
        <!-- /.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 href="{{ route('student.show',$remain['sid']) }}" class="course-title-link">{{ $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">#</th>
                                    <th scope="col">รถ</th>
                                    <th scope="col">ทะเบียน</th>
                                    <th scope="col">วันหมดอายุภาษี</th>
                                </tr>
                            </thead>
                            <tbody>
                            @foreach($cars as $keyIndex => $car)
                                <tr>
                                    <td>{{ $keyIndex+1 }}</th>
                                    <td><a href="{{ route('vehicle.show',$car['vid']) }}" class="course-title-link">{{ $car['car'] }}</a></td>
                                    <td>{{ $car['register'] }}</td>
                                    <td class="text-danger">{{ $car['expire'] }}</td>
                                </tr>
                            @endforeach
                            </tbody>
                          </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.row (main row) -->
    </div>
    <!-- /.container-fluid -->
</section>
<!-- /.content -->
@endsection


@section('footerscript')
<script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('js/dataTables.bootstrap4.min.js') }}"></script>
<script>
    $(document).ready(function() {
        $('.page-table').DataTable({
            "lengthChange": false,
            "info": false,
            "searching": false,
            "pageLength": 20,
            "language": {
                "emptyTable":   "ไม่พบข้อมูล",
                "paginate": {
                    "first":    "หน้าแรก",
                    "last":     "หน้าสุดท้าย",
                    "next":     "ถัดไป",
                    "previous": "ก่อนหน้า"
                },
                "lengthMenu":   "จำนวนนักเรียนทั้งหมด _MENU_ คน",
            }
        });
    });
</script>
@endsection
