<?php $__env->startSection('content'); ?>
    <div class="card">
        <div class="card-header">
           <div class="row align-items-center">
            <div class="col">
                <h5 class="mb-0">Payroll Groups</h5>
            </div>
            <div class="col-auto">
                <a href="<?php echo e(route('payroll.payroll-groups.create')); ?>" class="btn btn-primary btn-sm">
                    Add Pyroll Group
                </a>
            </div>
        </div>    
        </div>
         
        <div class="card-body">           
            <table id="payroll-groups-table" class="table table-bordered table-striped w-100">
                <thead>
                    <tr>
                        <th width="5%">#</th>
                        <th>Code</th>
                        <th>Name</th>
                        <th>Description</th>
                        <th width="10%">Status</th>
                        <th width="15%">Actions</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="payrollGroupModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <!-- Modal content will be loaded here -->
            </div>
        </div>
    </div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
    <script>
        let table;

        $(document).ready(function() {
            // Initialize DataTable
           
            let table = $('#payroll-groups-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: "<?php echo e(route('payroll.payroll-groups.index')); ?>",
                order: [[1, 'desc']],
                dom:
                    "<'row mb-3 align-items-center'<'col-md-6'l><'col-md-6 d-flex justify-content-end'f>>" +
                    "<'table-responsive'tr>" +
                    "<'row mt-3 align-items-center'<'col-md-6'i><'col-md-6 d-flex justify-content-end'p>>",
                language: {
                    search: "",
                    searchPlaceholder: "Search payroll groups...",
                    lengthMenu: "Show _MENU_ entries",
                    info: "Showing _START_–_END_ of _TOTAL_ payroll groups"
                },
                columns: [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'code', name: 'code' },
                    { data: 'name', name: 'name' },
                    { data: 'description', name: 'description' },
                    { data: 'status', name: 'status' },
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ]
            });
        });

        function openModal(action, id = null) {
            let url = action === 'create'
                ? '<?php echo e(route('payroll.payroll-groups.create')); ?>'
                : `/payroll/payroll-groups/${id}/edit`;

            $.get(url, function(data) {
                $('#payrollGroupModal .modal-content').html(data);
                $('#payrollGroupModal').modal('show');
            });
        }

        function savePayrollGroup() {
            let form = $('#payrollGroupForm');
            let url = form.attr('action');
            let method = form.find('input[name="_method"]').val() || 'POST';

            $.ajax({
                url: url,
                type: method,
                data: form.serialize(),
                success: function(response) {
                    if (response.status) {
                        $('#payrollGroupModal').modal('hide');
                        table.ajax.reload();
                        Swal.fire('Success!', response.message, 'success');
                    }
                },
                error: function(xhr) {
                    let errors = xhr.responseJSON.errors;
                    let errorMessage = '';

                    if (errors) {
                        $.each(errors, function(key, value) {
                            errorMessage += value[0] + '<br>';
                        });
                    } else {
                        errorMessage = xhr.responseJSON.message || 'An error occurred';
                    }

                    Swal.fire('Error!', errorMessage, 'error');
                }
            });
        }

        $(document).on('click', '.btn-delete', function () {
            let id = $(this).data('id');

            Swal.fire({
                title: 'Are you sure?',
                text: 'This record will be deleted!',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "<?php echo e(url('payroll/payroll-groups')); ?>/" + id,
                    type: 'DELETE',
                    data: { _token: "<?php echo e(csrf_token()); ?>" },
                    success: function (res) {
                        Swal.fire('Deleted!', res.message, 'success');
                        table.ajax.reload();
                    }
                });
            }
        });
    });


    </script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/codeproh/va.laraoffice.com/app/Modules/HR/Payroll/Providers/../Views/payroll-groups/index.blade.php ENDPATH**/ ?>