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

    @extends('adminlte::page')

    @section('title', config('adminlte.title') . ' | Sickness')

@section('content_header')
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6 m-0 text-dark">
                <h1>Sickness</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">Sickness</li>
                </ol>
            </div>
        </div>
    </div>
@stop

@section('content')
    <style>
        .no-arrow::after {
            display: none;
        }

        .deactiveitem:hover {
            background-color: #E4A11B;
        }

        body.dark-mode .deactiveitem:hover {
            background-color: #ad7b16;
            color: #ffffff;
        }

        .viewitem:hover {
            background-color: #14A44D;
            color: #ffffff;
        }

        body.dark-mode .viewitem:hover {
            background-color: #0d7035;
            color: #ffffff;
        }

        .activeitem:hover {
            background-color: #14A44D;
            color: #ffffff;
        }

        body.dark-mode .activeitem:hover {
            background-color: #0d7035;
            color: #ffffff;
        }

        .deleteitem:hover {
            background-color: #DC4C64;
            color: #ffffff;
        }

        body.dark-mode .deleteitem:hover {
            background-color: #a13446;
            color: #ffffff;
        }

        .dropdownMenuLinkcss:hover {
            background-color: #abacaf;
            border-radius: 50%;
        }

        body.dark-mode .dropdownMenuLinkcss:hover {
            background-color: #979797;
            border-radius: 50%;
        }

        /* Clickable row cursor */
        #sicknessList tbody tr {
            cursor: pointer;
        }

        #sicknessList tbody tr td:last-child {
            cursor: default;
        }
    </style>

    <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>
                        {{ session()->forget('success') }}
                    @endif

                    <div class="row">
                        <div class="d-grid gap-1 d-sm-flex">
                            <a href="{{ route('admin.sickness.create') }}" class="btn btn-success">
                                <i class="fa fa-plus"></i> Create new sickness
                            </a>
                            <a href="{{ route('admin.sickness.data') }}" class="btn btn-success">
                                <i class="fas fa-database"></i> Sickness Data
                            </a>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table id="sicknessList" class="table table-striped table-hover w-100">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Employee Ref</th>
                                    <th>Name</th>
                                    <th>Start</th>
                                    <th>End</th>
                                    <th>Employee Type</th>
                                    <th>Dept.</th>
                                    <th>Location</th>
                                    <th>Status</th>
                                    <th><i class="fas fa-paperclip"></i></th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Modal Template -->
    <div id="deleteModalContainer"></div>

    <script>
        $(document).ready(function() {
            var table = $('#sicknessList').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.sickness.index') }}",
                    type: 'GET',
                    data: function(d) {
                        // Include search builder data if available
                        if (d.searchBuilder) {
                            d.searchBuilder = d.searchBuilder;
                        }
                    }
                },
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'employeeref',
                        name: 'employeeref'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'start',
                        name: 'start'
                    },
                    {
                        data: 'end',
                        name: 'end'
                    },
                    {
                        data: 'persontype',
                        name: 'persontype',
                        searchable: false,
                        searchBuilderType: false
                    },
                    {
                        data: 'department',
                        name: 'department'
                    },
                    {
                        data: 'location',
                        name: 'location'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'has_document',
                        name: 'has_document',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                        searchable: false
                    }
                ],
                order: [
                    [0, 'desc']
                ],
                stateSave: true,
                pagingType: 'full_numbers',
                pageLength: 10,
                layout: {
                    top1Start: {

                    },
                    top2start: 'searchBuilder',
                    topStart: {
                        pageLength: {
                            menu: [10, 25, 50, 100, 500, 1000]
                        },
                    },
                    topEnd: 'search',
                    bottomStart: 'info',
                    bottomEnd: 'paging'
                },

                drawCallback: function(settings) {
                    // Attach modal content after table draw
                    attachDeleteModals();
                }
            });

            // Click row to view (except actions column)
            $('#sicknessList tbody').on('click', 'tr', function(e) {
                // Don't trigger if clicking on actions column or within dropdown
                if ($(e.target).closest('td').index() !== 10 &&
                    !$(e.target).closest('.dropdown').length &&
                    !$(e.target).closest('button').length &&
                    !$(e.target).closest('a').length) {

                    var data = table.row(this).data();
                    if (data && data.id) {
                        window.location.href = "{{ route('admin.sickness.index') }}/" + data.id;
                    }
                }
            });

            // Handle delete modal
            function attachDeleteModals() {
                $('.deleteitem').off('click').on('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();

                    var row = $(this).closest('tr');
                    var data = table.row(row).data();

                    // Create modal
                    var modalHtml = `
                        <div class="modal fade" id="deleteModal${data.id}" tabindex="-1" aria-labelledby="modalDelete" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                    <div class="modal-header bg-light">
                                        <h5 class="modal-title">Move: ${data.name} to the recycle bin</h5>
                                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        Are you sure you want to move <b>${data.name}</b> to the recycle bin?
                                    </div>
                                    <div class="modal-footer bg-light">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                        <i class="fa fa-times mr-1"></i>
                                        No, Keep it</button>
                                        <form action="{{ route('admin.sickness.index') }}/${data.id}" method="POST">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-danger">
                                            <i class="fa fa-trash-alt mr-1"></i>
                                            Yes</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;

                    $('#deleteModalContainer').html(modalHtml);
                    $('#deleteModal' + data.id).modal('show');
                });
            }
        });
    </script>
@stop

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

@endcan