@extends('layouts.web')

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

@section('content')
<div class="container-fluid pt-3">
    <div class="row">
        <div class="col-3">
            <form action="{{ route('log.access_post') }}"
            novalidate class="{{ ($errors->any()) ? 'was-validated' : 'needs-validation' }}"
            method="post"
            >
            @csrf
                <div class="form-group">
                    <label for="date">บันทึกการเข้าระบบ ประจำเดือน <span class="text-red">*</span></label>
                    <div class="input-group mb-3">
                        <input type="text" class="form-control datepiacker" id="date" name="date" placeholder="บันทึกการเข้าระบบประจำเดือน" autocomplete="off" value="{{$date}}" required>
                        <div class="input-group-append">
                            <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
                        </div>
                        <button type="submit" class="btn btn-outline-success show-outline-btn ml-2" value="add-student">แสดง</button>
                    </div>
                    @error('date')
                    <div class="text-danger">{{  $message }}</div>
                    @enderror
                </div>
            </form>
        </div>
    </div>
    <div class="row mt-2">
        <div class="col">
            <div class="card card-outline card-success">
                <div class="card-body">
                    <table class="table" id="access-table">
                        <thead>
                          <tr>
                            <th scope="col" width="10%">ลำดับ</th>
                            <th scope="col" width="30%">ผู้ใช้</th>
                            <th scope="col" width="30%">วัน เวลาที่เข้าระบบ</th>
                            <th scope="col" width="30%">ip address</th>
                          </tr>
                        </thead>
                        <tbody>
                            @foreach ($logs as $indexKey => $log)
                            <tr>
                                <td>{{ $indexKey+1 }}</td>
                                <td>{{ $log->username }}</td>
                                <td>{{ getDayAndTime($log->access) }}</td>
                                <td>{{ $log->ipaddress }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                      </table>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection

@section('footerscript')
<script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('js/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('js/bootstrap-datepicker.th.min.js') }}"></script>
<script src="{{ asset('js/custom.js') }}"></script>
<script>
    $(document).ready(function() {
        $('#access-table').DataTable({
            "lengthChange": false,
            "info": false,
            "pageLength": 50,
            "language": {
                "emptyTable":   "ไม่พบข้อมูล",
                "paginate": {
                    "first":    "หน้าแรก",
                    "last":     "หน้าสุดท้าย",
                    "next":     "ถัดไป",
                    "previous": "ก่อนหน้า"
                },
                "search":       "ค้นหา:",
                "lengthMenu":   "ทั้งหมด _MENU_ รายการ",
                "info":         "ทั้งหมด _TOTAL_ รายการ",
                "infoEmpty":    "ไม่พบรายการ",
            }
        });

        $('#date').datepicker({
            format: 'mm/yyyy',
            autoclose: true,
            language: 'th',
            endDate: '+0m',
            orientation: 'bottom',
            startView: 'months',
            minViewMode: 'months',
        });
    });
</script>
@endsection


