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

    @extends('adminlte::page')

    @section('title', $title)

@section('content_header')
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6 m-0 text-dark">
                <h1>{{ $subtitle }}</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">Documents</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 mb-2">
                        <div class="col-sm-10">
                            <a href="{{ route('admin.documents.create') }}" class="btn btn-success"><i
                                    class="fa fa-plus"></i>
                                Create new document</a>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table id="teamsList" class="table table-striped table-hover w-100">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Document Name</th>
                                    <th>Description</th>
                                    <th>Read required</th>
                                    <th>Section</th>
                                    <th>Employee</th>
                                    <th>Added by</th>
                                    <th>Created</th>
                                    <th>Updated</th>
                                    <th class="w-200px">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Data will be loaded via AJAX -->
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <!-- Delete Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-light">
                    <h5 class="modal-title" id="deleteModalLabel">Move Document to 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 id="deleteDocName"></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 id="deleteForm" 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>

    <script>
        $(document).ready(function() {
            var table = $('#teamsList').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.documents.index') }}",
                    type: 'GET',
                    data: function(d) {
                        // SearchBuilder data will be automatically included
                    }
                },
                columns: [{
                        data: 'id',
                        name: 'id',
                        title: '#'
                    },
                    {
                        data: 'docname',
                        name: 'docname',
                        title: 'Document Name'
                    },
                    {
                        data: 'description',
                        name: 'description',
                        title: 'Description'
                    },
                    {
                        data: 'req_read',
                        name: 'req_read',
                        title: 'Read required',
                        searchBuilderType: false
                    },
                    {
                        data: 'section',
                        name: 'section',
                        title: 'Section'
                    },
                    {
                        data: 'employee',
                        name: 'employee',
                        title: 'Employee'
                    },
                    {
                        data: 'addedby',
                        name: 'addedby',
                        title: 'Added by'
                    },
                    {
                        data: 'created_at',
                        name: 'created_at',
                        title: 'Created'
                    },
                    {
                        data: 'updated_at',
                        name: 'updated_at',
                        title: 'Updated'
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        title: null,
                        orderable: false,
                        searchable: false,
                        searchBuilderType: false
                    }
                ],
                columnDefs: [{
                        targets: [3, 8],
                        visible: false
                    },
                    {
                        // Exclude 'Read required' and 'Actions' from Search Builder
                        targets: [3, 9],
                        searchBuilderTitle: null
                    }
                ],
                layout: {
                    top1Start: {
                        buttons: [{
                            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']
                ],
                pagingType: 'full_numbers',
                drawCallback: function() {
                    // Re-initialize tooltips after each draw
                    $('[data-toggle="tooltip"]').tooltip();
                }
            });

            // Handle delete button click
            $(document).on('click', '.delete-doc', function(e) {
                e.preventDefault();
                var docId = $(this).data('id');
                var docName = $(this).data('name');
                var docSection = $(this).data('section');

                $('#deleteModalLabel').text('Move: ' + docSection + '/' + docName + ' to recycle bin');
                $('#deleteDocName').text(docName);
                $('#deleteForm').attr('action', "{{ url('admin/documents') }}/" + docId);
                $('#deleteModal').modal('show');
            });

            // Handle delete form submission
            $('#deleteForm').on('submit', function(e) {
                e.preventDefault();
                var form = $(this);
                var url = form.attr('action');

                $.ajax({
                    url: url,
                    type: 'POST',
                    data: form.serialize(),
                    success: function(response) {
                        $('#deleteModal').modal('hide');
                        toastr.success('Document moved to recycle bin successfully');
                        table.ajax.reload();
                    },
                    error: function(xhr) {
                        toastr.error('An error occurred while deleting the document');
                    }
                });
            });

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

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

@endcan