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

    @extends('adminlte::page')

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


@section('content_header')
    <style>

    </style>
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6 m-0 text-dark">
                <h1>Employee Holidays 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 :: Holidays</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>Names</th>
                                <th>Job Title</th>
                                <th>Location</th>
                                <th>Company</th>
                                <th>Department</th>
                                <th>Team(s)</th>
                                <th>Line Manager</th>
                                <th>Holiday Approver</th>
                                <th>Type</th>
                                <th>Start</th>
                                <th>End</th>
                                <th>Days</th>
                                <th>Approved by</th>
                                <th>Requested date</th>
                                <th>Approved date</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                    </table>
                    <script src="https://cdn.jsdelivr.net/npm/date-fns@latest/dist/date_fns.min.js"></script>
                    <script>
                        $(document).ready(function() {

                            $('#ReportList').DataTable({
                                fixedHeader: true,
                                serverSide: true,
                                processing: true,
                                ajax: '{{ route('admin.reports.holidays') }}',
                                columns: [{
                                        data: 'users.name',
                                        name: 'users.name'
                                    },
                                    {
                                        data: 'users.jobtitle',
                                        name: 'users.jobtitle'
                                    },
                                    {
                                        data: 'locationname',
                                        name: 'locationname'
                                    },
                                    {
                                        data: 'companyname',
                                        name: 'companyname'
                                    },
                                    {
                                        data: 'departmentname',
                                        name: 'departmentname'
                                    },
                                    {
                                        data: 'team.team',
                                        name: 'team.team'
                                    },
                                    {
                                        data: 'line_managers.name',
                                        name: 'line_managers.name'
                                    },
                                    {
                                        data: 'holiday_approvers.name',
                                        name: 'holiday_approvers.name'
                                    },
                                    {
                                        data: 'type',
                                        name: 'type'
                                    },
                                    {
                                        data: 'start_date',
                                        name: 'start_date',

                                    },
                                    {
                                        data: 'end_date',
                                        name: 'end_date'
                                    },
                                    {
                                        data: 'number_days',
                                        name: 'number_days'
                                    },
                                    {
                                        data: 'approve_by',
                                        name: 'approve_by'
                                    },
                                    {
                                        data: 'holidays_data.created_at',
                                        name: 'holidays_data.created_at',
                                    },
                                    {
                                        data: 'holidays_data.updated_at',
                                        name: 'holidays_data.updated_at',
                                    },
                                    {
                                        data: 'status',
                                        name: 'status'
                                    },
                                ],
                                columnDefs: [{
                                    targets: [2, 3, 4, 5, 6, 7],
                                    visible: false
                                }],
                                layout: {
                                    top1Start: {
                                        buttons: [{
                                                extend: 'copy',
                                                text: 'Copy',
                                            },
                                            {
                                                extend: 'excel',
                                                text: 'Export to Excel',
                                                customize: function(xlsx) {
                                                    var sheet = xlsx.xl.worksheets[
                                                        'sheet1.xml'];

                                                    function convertDateFormat(dateValue) {
                                                        if (dateValue.match(
                                                                /^\d{4}-\d{2}-\d{2}$/)) {
                                                            var parts = dateValue.split('-');
                                                            return parts[2] + '/' + parts[1] +
                                                                '/' + parts[0];
                                                        }
                                                        return dateValue;
                                                    }
                                                }
                                            },
                                            {
                                                extend: 'pdf',
                                                text: 'Export to PDF',

                                            },
                                            {
                                                extend: 'print',
                                                text: 'Print',

                                            },
                                            {
                                                extend: 'colvis',
                                                collectionLayout: 'fixed columns',
                                                popoverTitle: 'Column visibility control',
                                            },
                                        ]
                                    },
                                    top2start: {
                                        searchBuilder: {
                                            columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
                                        }
                                    },
                                    topStart: {
                                        pageLength: {
                                            menu: [10, 25, 50, 100, 500, 1000, 2000, 3000, 5000, 7000, 10000]
                                        },
                                    },
                                    topEnd: 'search',
                                    bottomStart: 'info',
                                    bottomEnd: 'paging'
                                },
                                order: [
                                    [0, 'asc']
                                ],
                                stateSave: true,
                            });

                        });
                    </script>

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

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