# CheckInCheckOut

resources / views / CheckInCheckOut / CheckInCheckOut.blade.php
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Check In/Out</title>
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    {{--  Bootstrap  --}}
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    {{--  Custom Style Css  --}}
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>
<body>
<div class="container-fluid">
    <div class="container">
        <div class="row justify-content-center align-items-center vh-100">
            <div class="col-12 col-md-6 ">
                <div class="card shadow-sm border-0">
                    <div class="card-bod py-5 px-3">
                        <div class="text-center">
                            <h5 class="fw-bold text-primary mb-0">QR Code Scanner</h5>
                            <img src="data:image/png;base64,
                                    {!!
                                        base64_encode(QrCode::format('png')
                                        ->size(250)
                                        ->generate($hashQR_code))
                                    !!}
                            " class="text-center qr-code-img my-3">
                            <p class="mb-3 text-black-50 fw-bold">
                                Please scan
                                <span class="text-primary">QR code</span>
                                to Check-in or Check-out !
                            </p>
                        </div>
                        <hr class="mt-0 mb-2">
                        <div class="text-center">
                            <h5 class="fw-bold text-primary my-3">Enter Your Pin Code</h5>
                            <input type="text" name="mycode" id="pincode-input1">
                            <p class="mb-3 text-black-50 fw-bold mb-0 mt-3">
                                Please enter
                                <span class="text-primary">Pin code</span>
                                to Check-in or Check-out !
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{{-- Bootstrap Js --}}
<script src="{{ asset('assets/jquery/jquery-3.6.0.min.js') }}"></script>
<script src="{{ asset('js/app.js') }}"></script>
<script>
    let token = document.head.querySelector('meta[name="csrf-token"]');
    if (token){
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': token.content
            }
        });
    }else {
        console.log('ajax-error');
        console.log('CSRF-TOKEN is not found.');
    }
    const Toast = Swal.mixin({
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true,
        didOpen: (toast) => {
            toast.addEventListener('mouseenter', Swal.stopTimer)
            toast.addEventListener('mouseleave', Swal.resumeTimer)
        }
    })
    $('#pincode-input1').pincodeInput({inputs:6,complete:function(value, e, errorElement){
            console.log("code entered: " + value);
            $.ajax({
                url: "{{ route('employee.checkIn') }}",
                type: 'POST',
                data: {
                    pin_code: value
                }
            }).done(function (res){
                if (res.status == 'Success'){
                    Toast.fire({
                        icon: 'success',
                        title: res.message,
                    });
                }else {
                    Toast.fire({
                        icon: 'warning',
                        title: res.message,
                    });
                }
                $('.pincode-input-text').val('');
                $('.pincode-input-text').first().select().focus();
            });
    }});
$('.pincode-input-text').first().select().focus();
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
# Demo

checkInCheckOut
← Project Attendance →