
<style>
    .tooltip-inner {
        white-space: pre-wrap;
    }
</style>

<div class="space-y-4">
    <div class="rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-700 dark:bg-slate-900/40">
        <div class="px-6 py-5 flex flex-col gap-3 border-b border-slate-200 dark:border-slate-700 md:flex-row md:items-center md:justify-between">
            <div>
                <h3 class="text-xl font-bold text-slate-900 dark:text-slate-100"><?= lang('timesheet'); ?></h3>
            </div>
        </div>

        <div class="p-6">
            <div class="overflow-hidden rounded-xl border border-slate-200 dark:border-slate-700">
                <div class="overflow-x-auto">
                <table class="min-w-full text-sm DataTables" id="DataTables">
                    <thead class="bg-slate-50 text-slate-500 dark:bg-slate-800 dark:text-slate-300">
                        <tr>
                            <th class="px-4 py-3 text-left"><?= lang('start_time') ?></th>
                            <th class="px-4 py-3 text-left"><?= lang('stop_time') ?></th>
                            <th class="px-4 py-3 text-left"><?= lang('project_name') ?></th>
                            <th class="px-4 py-3 text-left"><?= lang('time_spend') ?></th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                        <?php
                        $total_timer = get_result('tbl_tasks_timer', array(
                            'project_id' => $project_details->project_id,
                            'start_time !=' => 0,
                            'end_time !=' => 0
                        ));

                        if (!empty($total_timer)) {
                            foreach ($total_timer as $v_timer) {
                        ?>
                                <tr class="transition hover:bg-slate-50/70 dark:hover:bg-slate-800/50 text-slate-700 dark:text-slate-200">
                                    <td class="px-4 py-3">
                                        <span class="inline-flex rounded-full bg-emerald-50 px-2 py-1 text-xs text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300">
                                            <?= display_datetime($v_timer->start_time, true) ?>
                                        </span>
                                    </td>
                                    <td class="px-4 py-3">
                                        <span class="inline-flex rounded-full bg-rose-50 px-2 py-1 text-xs text-rose-700 dark:bg-rose-900/40 dark:text-rose-300">
                                            <?= display_datetime($v_timer->end_time, true); ?>
                                        </span>
                                    </td>
                                    <td class="px-4 py-3">
                                        <a href="<?= base_url() ?>client/projects/project_details/<?= $v_timer->project_id ?>" class="font-medium text-primary hover:underline dark:text-sky-300">
                                            <?= html_escape($project_details->project_name) ?>
                                        </a>
                                    </td>
                                    <td class="px-4 py-3 text-xs text-slate-500 dark:text-slate-400">
                                        <?= $this->items_model->get_time_spent_result($v_timer->end_time - $v_timer->start_time) ?>
                                    </td>
                                </tr>
                        <?php
                            }
                        } else { ?>
                            <tr>
                                <td colspan="4" class="px-4 py-6 text-center text-sm text-slate-500 dark:text-slate-400">
                                    <?= lang('no_data_found') ?>
                                </td>
                            </tr>
                        <?php } ?>
                    </tbody>
                </table>
            </div>
            </div>
        </div>
    </div>
</div>

<!-- <script type="text/javascript">
    $(document).ready(function () {
        if ($.fn.dataTable) {
            $('#DataTables').dataTable({
                order: [[0, 'desc']]
            });
        }
    });
</script> -->
