<div class="modal fade" id="summaryModal">
    <div class="modal-dialog"  style="max-width: 50%;">
        <div class="modal-content">
            <div class="modal-header">
                <div>
                    <h5 class="modal-title" id="summary-modal-title"><?php echo $title; ?></h5>
                    <p style="padding: 0; margin: 0;" class="text-muted" id="summary-modal-subtitle"><?php  if($userName) echo strtoupper($userName); ?></p>
                </div>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table id="table_allocations" class="table table-bordered table-striped table-hover">
                        <thead>
                        <th>Date & Time</th> 
                        <th>Activity</th>
                        <th>Data</th>
                        <th>By</th>
                        </thead>
                        <tbody>
                            <?php if (count($history) > 0): ?>
                                <?php foreach ($history as $h): ?>
                                    <tr>
                                        <td>
                                            <div><?php echo date_format(date_create($h['created_at']), 'd/m/Y'); ?></div>
                                            <div class="small text-muted"><?php echo date_format(date_create($h['created_at']), 'h:i:s A'); ?></div>
                                        </td>
                                        <td><?php echo strtoupper($h['activity']); ?></td>
                                        <td class="record-data" data-trigger="hover" data-tooltip="<?php echo $h['record_data']; ?>">
                                            <div  style="white-space: nowrap; width: 300px; overflow: hidden; text-overflow: ellipsis; ">
                                            <?php echo $h['record_data']; ?>
                                            </div>
                                        </td>
                                        <td><?php echo $h['name']; ?></td>
                                    </tr>
                                <?php endforeach; ?>
                            <?php else: ?>
                                <tr>
                                    <td colspan="4">No data</td>
                                </tr>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // $(function () {
    //     $('.record-data').hover(function(){
    //         // var tooltipJson = JSON.parse($(this).data("tooltip"));
    //         console.log(JSON.stringify(tooltipJson));
    //     });
    // })

</script>