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

    @extends('adminlte::page')

    @section('title', config('adminlte.title') . ' | Reports :: Balance')

@section('content_header')
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6 m-0 text-dark">
                <h1>Employee Balance Report</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="/admin">Admin</a></li>
                    <li class="breadcrumb-item"><a href="/admin/reports">Reports</a></li>
                    <li class="breadcrumb-item active">Reports :: Balance</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="row">
                        <div class="col-12 p-2">
                            <a href="{{ route('admin.reports.index') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Back
                            </a>
                        </div>
                    </div>

                    <table id="ReportList" class="table table-striped table-hover" style="width:100%">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Names</th>
                                <th>Job Title</th>
                                <th>Company</th>
                                <th>Department</th>
                                <th>Team(s)</th>
                                <th>Location</th>
                                <th>Line Manager</th>
                                <th>Holiday Approver</th>
                                <th>Year</th>
                                <th>Allowance</th>
                                <th>Carry Over</th>
                                <th>Carry Over taken</th>
                                <th>Carry Over remain</th>
                                <th>TOIL</th>
                                <th>Adjustments</th>
                                <th>Taken</th>
                                <th>Balance</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Data will be loaded via AJAX -->
                        </tbody>
                    </table>

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

@section('js')
    <script>
        $(document).ready(function() {
            $('#ReportList').DataTable({
                fixedHeader: true,
                serverSide: false,
                processing: true,
                ajax: {
                    url: '{{ route('admin.reports.balance') }}',
                    type: 'GET',
                    dataSrc: 'data'
                },
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'jobtitle',
                        name: 'jobtitle'
                    },
                    {
                        data: 'company',
                        name: 'company'
                    },
                    {
                        data: 'department',
                        name: 'department'
                    },
                    {
                        data: 'team',
                        name: 'team',
                        render: function(data, type, row) {
                            if (!data || data === 'Unassigned') {
                                return '<b><span class="badge badge-secondary" style="font-size: 15px">Unassigned</span></b>';
                            }
                            // Split comma-separated team IDs and render badges
                            let teams = data.split(',');
                            let badges = '';
                            teams.forEach(function(team) {
                                badges +=
                                    '<b><span class="badge badge-secondary" style="font-size: 15px">' +
                                    team.trim() + '</span></b> ';
                            });
                            return badges;
                        }
                    },
                    {
                        data: 'location',
                        name: 'location'
                    },
                    {
                        data: 'line_manager',
                        name: 'line_manager'
                    },
                    {
                        data: 'holiday_approver',
                        name: 'holiday_approver'
                    },
                    {
                        data: 'year',
                        name: 'year'
                    },
                    {
                        data: 'allowance',
                        name: 'allowance',
                        render: function(data) {
                            return parseFloat(data).toFixed(1);
                        }
                    },
                    {
                        data: 'carry_over',
                        name: 'carry_over',
                        render: function(data) {
                            return parseFloat(data).toFixed(1);
                        }
                    },
                    {
                        data: 'carry_over_taken',
                        name: 'carry_over_taken',
                        render: function(data) {
                            return parseFloat(data).toFixed(1);
                        }
                    },
                    {
                        data: 'carry_over_remain',
                        name: 'carry_over_remain',
                        render: function(data) {
                            return parseFloat(data).toFixed(1);
                        }
                    },
                    {
                        data: 'toil',
                        name: 'toil',
                        render: function(data) {
                            return parseFloat(data).toFixed(1);
                        }
                    },
                    {
                        data: 'adjustment',
                        name: 'adjustment',
                        render: function(data) {
                            return parseFloat(data).toFixed(1);
                        }
                    },
                    {
                        data: 'taken',
                        name: 'taken',
                        render: function(data) {
                            return parseFloat(data).toFixed(1);
                        }
                    },
                    {
                        data: null,
                        name: 'balance',
                        render: function(data, type, row) {
                            let balance = parseFloat(row.remain) + parseFloat(row
                                .carry_over_remain);
                            return balance.toFixed(1);
                        }
                    }
                ],
                columnDefs: [{
                    targets: [3, 4, 5, 6, 7, 8],
                    visible: false
                }],
                layout: {
                    top1Start: {
                        buttons: [{
                                extend: 'copy'
                            },
                            {
                                extend: 'excel'
                            },
                            {
                                extend: 'pdf'
                            },
                            {
                                extend: 'print'
                            },
                            {
                                extend: 'colvis',
                                collectionLayout: 'fixed columns',
                                popoverTitle: 'Column visibility control'
                            }
                        ]
                    },
                    top2start: 'searchBuilder',
                    topStart: {
                        pageLength: {
                            menu: [10, 25, 50, 100, 500, 1000]
                        }
                    },
                    topEnd: 'search',
                    bottomStart: 'info',
                    bottomEnd: 'paging'
                },
                order: [
                    [1, 'asc']
                ],
                stateSave: true
            });
        });
    </script>
@endsection

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

@endcan