@extends('layouts.master')

@section('css')
    <!-- Table css -->
    <!-- <link href="{{ URL::asset('plugins/RWD-Table-Patterns/dist/css/rwd-table.min.css') }}" rel="stylesheet" type="text/css" media="screen"> -->
@endsection

@section('breadcrumb')
    <div class="col-sm-6">
        <h4 class="page-title text-left">Attendance</h4>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0);">Home</a></li>
            <li class="breadcrumb-item"><a href="javascript:void(0);">Attendance</a></li>


        </ol>
    </div>
@endsection
@section('button')
@endsection

@section('content')
@include('includes.flash')

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">

                    <div class="table-rep-plugin">
                        <div class="table-responsive mb-0" data-pattern="priority-columns">
                            <table id="datatable-buttonss" class="table table-striped table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;" data-ordering="false">
                                        
                                <thead>
                                    <tr>
                                    <th >Attendance Number</th>
                                        <th >ID Number</th>
                                        <th >ID Number</th>
                                    
                                        <th >State</th>
                                        <th>Timestamp</th>

                                        <th >Type</th>
                                        <th >Device Serial Number</th>
                    


                                    </tr>
                                </thead>
                           <!-- paste here -->

                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div> <!-- end col -->






    </div> <!-- end row -->

@endsection


@section('script')
    <!-- Responsive-table-->
    <script>

var attendanceFaceTypeMap = {
    '15': { class: 'badge-success', label: 'Face' },
    '4': { class: 'badge-danger', label: 'Card' },
    '1': { class: 'badge-primary', label: 'Fingerprint' }
};

var attendanceTypeMap = {
    '0': { class: 'badge-success', label: 'Check-in' },
    '1': { class: 'badge-danger', label: 'Check-out' },
    '2': { class: 'badge-primary', label: 'Break-out' },
    '3': { class: 'badge-dark', label: 'Break-in' },
    '7': { class: 'badge-secondary', label: 'Door-pm' },
    '6': { class: 'badge-warning', label: 'Door-am' },
    '4': { class: 'badge-dark', label: 'OverCheck-in' },
    '5': { class: 'badge-dark', label: 'OverCheck-out' }
};


$(document).ready(function() {
    
    $('#datatable-buttonss').DataTable({
        "processing": false,
        "deferRender": true,
        "scrollX":        true,
        "scrollCollapse": true,
           "retrieve": true,
           dom: 'frltipB',

buttons: [
    'copy', 'csv', 'excel', 'pdf', 'print'
],
        "ajax": {
            "url": "{{ route('admin.attendance') }}",
            "dataType": "json",
            "data": function (d) {
                // Modify the request parameters to include current page, length, etc.
                d.draw = d.draw || 1; // DataTables draw counter
            }
        },
        "columns": [
            { "data": "attendance_number" },
            { "data": "id_number" },
            // { "data": "employee.name" },
            { 
                "data": "employee.name",
                "render": function(data, type, full, meta) {
                    return data ? data : ''; // If employee name is null, return an empty string
                }
            },
            { 
                "data": "state",
                "render": function(data, type, row) {
                    if (data in attendanceFaceTypeMap) {
                        return '<span class="badge badge-pill float-left ' + attendanceFaceTypeMap[data].class + '">' + attendanceFaceTypeMap[data].label + '</span>';
                    } else {
                        return '<span class="badge badge-danger badge-pill float-left">Unknown</span>';
                    }
                }
            },
            { "data": "attendance_date_time" },
            { 
                "data": "type",
                "render": function(data, type, row) {
                    if (data in attendanceTypeMap) {
                        return '<span class="badge badge-pill float-left ' + attendanceTypeMap[data].class + '">' + attendanceTypeMap[data].label + '</span>';
                    } else {
                        return '<span class="badge badge-danger badge-pill float-left">Unknown</span>';
                    }
                }
            },
            { "data": "device_serial_number" }
        ],
        "paging": true, // Enable pagination
        // "lengthMenu": [10, 25, 50, 100], // Define the page length menu
        "pageLength": 10, // Initial page length
        "searching": true, // Enable search field
        "info": true // Show information about the table (e.g., "Showing 1 to 10 of 50 entries")
    });
});


</script>



@endsection


@section('script')


<!-- <script>
    $(function() {
        $('.table-responsive').responsiveTable({
            addDisplayAllBtn: 'btn btn-secondary'
            
        });
    });
</script> -->


@endsection