@extends('layouts.app_hr')

@section('title', __('hr.biometric_records'))

@section('content')

    <!-- Content Header (Page header) -->
    <section class="content-header">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-style1">
                <li class="breadcrumb-item">
                    <a href="#">{{__('home.home')}}</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="#">{{__('hr.attendance')}}</a>
                </li>
                <li class="breadcrumb-item active">{{__('hr.biometric_records')}}</li>
            </ol>
        </nav>
    </section>

    <div class="container">
        <div class="card tw-transition-all tw-duration-200 tw-bg-white tw-shadow-sm hover:tw-shadow-md tw-rounded-xl hover:tw-translate-y-0.5 tw-ring-1 tw-ring-gray-200 no-print">
            <div class="card-header">
                <form method="POST" action="{{ route('biometric-records.import') }}" enctype="multipart/form-data" class="d-inline">
                    @csrf
                    <input type="file" name="file" required class="form-control">
                    <button type="submit" class="btn btn-primary">{{ __('hr.import_records') }}</button>
                </form>
                <a href="{{ route('biometric-records.process') }}" class="btn btn-success">{{ __('hr.process_records') }}</a>
            </div>
            <div class="card-body">
                <table id="biometricRecordsTable" class="table table-bordered">
                    <thead>
                    <tr>
                        <th>{{ __('hr.user_id') }}</th>
                        <th>{{ __('hr.device_id') }}</th>
                        <th>{{ __('hr.timestamp') }}</th>
                        <th>{{ __('hr.type') }}</th>
                        <th>{{ __('messages.actions') }}</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('javascript')
    <script>
        $(document).ready(function () {
            $('#biometricRecordsTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('biometric-records.index') }}",
                columns: [
                    {data: 'user_id', name: 'user_id'},
                    {data: 'device_id', name: 'device_id'},
                    {data: 'timestamp', name: 'timestamp'},
                    {data: 'type', name: 'type'},
                    {data: 'actions', name: 'actions', orderable: false, searchable: false},
                ]
            });
        });
    </script>
@endsection