@canany(['hr_manager_hq', 'holidays_adjustment'])

    @extends('adminlte::page')

    @section('title', config('adminlte.title') . ' | Holidays Adjustment')

@section('content_header')
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6 m-0 text-dark">
                <h1>Holiday Adjustments</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.index') }}">Admin</a></li>
                    <li class="breadcrumb-item active">Holidays Adjustment</li>
                </ol>
            </div>
        </div>
    </div>
@stop

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    @if (session('success'))
                        <script>
                            toastr.options = {
                                "closeButton": true,
                                "debug": false,
                                "newestOnTop": false,
                                "progressBar": true,
                                "positionClass": "toast-top-right",
                                "preventDuplicates": false,
                                "onclick": null,
                                "showDuration": "300",
                                "hideDuration": "1000",
                                "timeOut": "5000",
                                "extendedTimeOut": "1000",
                                "showEasing": "swing",
                                "hideEasing": "linear",
                                "showMethod": "fadeIn",
                                "hideMethod": "fadeOut"
                            };
                            toastr.success('{{ session('success') }}');
                        </script>
                    @endif

                    <div class="table-responsive">
                        <table id="holadjList" class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Employee</th>
                                    <th>Location</th>
                                    <th>Country</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {{-- Data will be loaded via AJAX --}}
                            </tbody>
                        </table>
                    </div>

                    <style>
                        #holadjList tbody tr {
                            cursor: pointer;
                        }
                    </style>

                    <script>
                        $(document).ready(function() {
                            var table = $('#holadjList').DataTable({
                                processing: true,
                                serverSide: true,
                                ajax: {
                                    url: "{{ route('admin.holidays_adjustment.index') }}",
                                    type: 'GET',
                                    data: function(d) {
                                        // SearchBuilder data will be automatically included
                                    }
                                },
                                columns: [{
                                        data: 'id',
                                        name: 'id',
                                        title: '#'
                                    },
                                    {
                                        data: 'name',
                                        name: 'name',
                                        title: 'Employee'
                                    },
                                    {
                                        data: 'location',
                                        name: 'location',
                                        title: 'Location'
                                    },
                                    {
                                        data: 'countrycode',
                                        name: 'countrycode',
                                        title: 'Country'
                                    },
                                    {
                                        data: 'actions',
                                        name: 'actions',
                                        title: 'Actions',
                                        orderable: false,
                                        searchable: false
                                    }
                                ],
                                layout: {
                                    topStart: {
                                        pageLength: {
                                            menu: [10, 25, 50, 100, 500, 1000]
                                        }
                                    },
                                    topEnd: 'search',
                                    bottomStart: 'info',
                                    bottomEnd: 'paging'
                                },
                                order: [
                                    [1, 'asc']
                                ],
                                pagingType: 'full_numbers',
                                stateSave: true
                            });

                            // Click row to edit
                            $('#holadjList').on('click', 'tbody tr', function() {
                                var data = table.row(this).data();
                                if (data && data.id) {
                                    window.location.href = '{{ route('admin.holidays_adjustment.index') }}/' + data.id +
                                        '/edit';
                                }
                            });

                            // Initialize tooltips
                            $(function() {
                                $('[data-toggle="tooltip"]').tooltip();
                            });
                        });
                    </script>

                </div>
            </div>
        </div>
    </div>
@stop

@section('footer')
    &nbsp;
@stop

@endcan