@extends('layouts.app_hr')

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

@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.attendance_policies')}}</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-body">
                <div class="add-new">
                    <a href="{{route('attendance-policies.create')}}" class="btn btn-primary">{{__('messages.add')}}</a>
                </div>
                <div class="table-responsive mt-5">
                    <table class="table" id="attendance_policies_table">
                        <thead>
                        <tr>
                            <th>{{ __('hr.policy_name') }}</th>
                            <th>{{ __('hr.type') }}</th>
                            <th>{{ __('hr.max_occurrences') }}</th>
                            <th>{{ __('messages.actions') }}</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
@endsection

@section('javascript')
    <script>
        $(document).ready(function() {
            var  attendance_policies_table =  $('#attendance_policies_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route("attendance-policies.index") }}',
                columns: [
                    { data: 'policy_name', name: 'policy_name' },
                    { data: 'policy_type', name: 'policy_type' },
                    { data: 'max_occurrences_per_policy', name: 'max_occurrences_per_policy' },
                    { data: 'actions', name: 'actions', orderable: false, searchable: false }
                ],
                language: {
                    url: '//cdn.datatables.net/plug-ins/1.11.5/i18n/{{ app()->getLocale() }}.json'
                }
            });

        });
        attendance_policies_table.buttons().container().appendTo( '.add-new' );

    </script>
@endsection