@extends('layouts.app')

@push('css')
<link rel="stylesheet" href="{{ asset('css/modern.css') }}">
@endpush

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card table-card border-0 shadow-sm">
            <div class="card-header-seamless bg-white">
                <h5 class="mb-0 fw-bold"><i class="fas fa-users me-2 text-primary"></i>Team Attendance</h5>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover table-bordered table-striped w-100 mb-0" id="teamAttendanceTable">

                        <thead>
                            <tr>
                                <th>Employee</th>
                                <th>Date</th>
                                <th>Punch In</th>
                                <th>Punch Out</th>
                                <th>Duration (H:M)</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function() {
    $('#teamAttendanceTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('attendances.data') }}?subordinates=true",
        columns: [
            {data: 'employee', name: 'employee'},
            {data: 'date', name: 'date'},
            {data: 'punch_in', name: 'punch_in'},
            {data: 'punch_out', name: 'punch_out'},
            {data: 'duration', name: 'duration', orderable: false, searchable: false}
        ],
        scrollX: true,
        language: {
            search: "_INPUT_",
            searchPlaceholder: "Search team records...",
            paginate: {
                previous: '<i class="fas fa-chevron-left"></i>',
                next: '<i class="fas fa-chevron-right"></i>'
            }
        },
        drawCallback: function() {
            $('.dataTables_paginate > .pagination').addClass('pagination-sm');
        }
    });
});
</script>
@endpush