<?php
$edited = can_action('54', 'edited');
$can_edit = $this->tasks_model->can_action('tbl_task', 'edit', array('task_id' => $task_details->task_id));
$where = array('user_id' => $this->session->userdata('user_id'), 'module_id' => $task_details->task_id, 'module_name' => 'tasks');
$check_existing = $this->tasks_model->check_by($where, 'tbl_pinaction');
if (!empty($check_existing)) {
    $url = 'remove_todo/' . $check_existing->pinaction_id;
    $btn = 'danger';
    $title = lang('remove_todo');
} else {
    $url = 'add_todo_list/tasks/' . $task_details->task_id;
    $btn = 'warning';
    $title = lang('add_todo_list');
}

$p_category = $this->db->where('customer_group_id', $task_details->category_id)->get('tbl_customer_group')->row();
$pc_name = !empty($p_category) ? $p_category->customer_group : '-';

$progress_value = $this->tasks_model->get_task_progress($task_details->task_id);
$progress_percent = max(0, min(100, (int) $progress_value));
$status_key = !empty($task_details->task_status) ? $task_details->task_status : 'not_started';
$status_map = array(
    'completed' => 'bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-500/15 dark:text-emerald-300 dark:border-emerald-500/30',
    'in_progress' => 'bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-500/15 dark:text-blue-300 dark:border-blue-500/30',
    'deferred' => 'bg-rose-50 text-rose-700 border-rose-200 dark:bg-rose-500/15 dark:text-rose-300 dark:border-rose-500/30',
    'waiting_for_someone' => 'bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-500/15 dark:text-amber-300 dark:border-amber-500/30',
    'not_started' => 'bg-slate-100 text-slate-600 border-slate-200 dark:bg-slate-500/15 dark:text-slate-300 dark:border-slate-500/30',
);
$status_badge = isset($status_map[$status_key]) ? $status_map[$status_key] : $status_map['not_started'];

$due_date = $task_details->due_date;
$due_time = !empty($due_date) ? safe_strtotime($due_date) : null;
$current_time = safe_strtotime(date('Y-m-d'));
$is_overdue = !empty($due_time) && $current_time > $due_time && $task_details->task_status != 'completed';
$due_class = $is_overdue ? 'text-rose-600 dark:text-rose-400' : 'text-muted-foreground';
$due_meta_label = !empty($due_time) ? date('m.d.Y', $due_time) : '-';

$billable_label = (!empty($task_details->billable) && $task_details->billable === 'Yes') ? lang('yes') : lang('no');
$billable_class = (!empty($task_details->billable) && $task_details->billable === 'Yes') ? 'text-emerald-600 dark:text-emerald-400' : 'text-muted-foreground';
$estimate_label = !empty($task_details->task_hour) ? $task_details->task_hour : '0:00';

$project_info = null;
$milestones_info = null;
$opportunity_info = null;
$leads_info = null;
$bugs_info = null;
$goal_tracking_info = null;
$parent_task = null;

if (!empty($task_details->project_id)) {
    $project_info = $this->db->where('project_id', $task_details->project_id)->get('tbl_project')->row();
}
if (!empty($task_details->milestones_id)) {
    $milestones_info = $this->db->where('milestones_id', $task_details->milestones_id)->get('tbl_milestones')->row();
}
if (!empty($task_details->opportunities_id)) {
    $opportunity_info = $this->db->where('opportunities_id', $task_details->opportunities_id)->get('tbl_opportunities')->row();
}
if (!empty($task_details->leads_id)) {
    $leads_info = $this->db->where('leads_id', $task_details->leads_id)->get('tbl_leads')->row();
}
if (!empty($task_details->bug_id)) {
    $bugs_info = $this->db->where('bug_id', $task_details->bug_id)->get('tbl_bug')->row();
}
if (!empty($task_details->goal_tracking_id)) {
    $goal_tracking_info = $this->db->where('goal_tracking_id', $task_details->goal_tracking_id)->get('tbl_goal_tracking')->row();
}
if (!empty($task_details->sub_task_id)) {
    $parent_task = $this->db->where('task_id', $task_details->sub_task_id)->get('tbl_task')->row();
}

$sub_tasks = get_result('tbl_task', array('sub_task_id' => $task_details->task_id));

$status_label = strtoupper(lang($status_key));
$status_badge_map = array(
    'completed' => 'bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-500/20 dark:text-emerald-300 dark:border-emerald-500/30',
    'in_progress' => 'bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-500/20 dark:text-blue-300 dark:border-blue-500/30',
    'deferred' => 'bg-amber-100 text-amber-700 border-amber-200 dark:bg-amber-500/20 dark:text-amber-300 dark:border-amber-500/30',
    'waiting_for_someone' => 'bg-violet-100 text-violet-700 border-violet-200 dark:bg-violet-500/20 dark:text-violet-300 dark:border-violet-500/30',
    'not_started' => 'bg-slate-100 text-slate-700 border-slate-200 dark:bg-slate-500/20 dark:text-slate-300 dark:border-slate-500/30',
);
$status_chip = isset($status_badge_map[$status_key]) ? $status_badge_map[$status_key] : $status_badge_map['not_started'];

$assigned_label = lang('everyone');
if ($task_details->permission != 'all') {
    $permission_users = json_decode($task_details->permission, true);
    if (!empty($permission_users) && is_array($permission_users)) {
        $permission_ids = array_keys($permission_users);
        $first_user_id = (int) reset($permission_ids);
        $assigned_label = fullname($first_user_id);
        $extra_count = count($permission_ids) - 1;
        if ($extra_count > 0) {
            $assigned_label .= ' +' . $extra_count;
        }
    }
}

$related_title = '-';
$related_url = '';
if (!empty($leads_info)) {
    $related_title = $leads_info->lead_name . ' (' . lang('lead') . ')';
    $related_url = base_url('admin/leads/leads_details/' . $leads_info->leads_id);
} elseif (!empty($opportunity_info)) {
    $related_title = $opportunity_info->opportunity_name . ' (' . lang('opportunities') . ')';
    $related_url = base_url('admin/opportunities/details/' . $opportunity_info->opportunities_id);
} elseif (!empty($project_info)) {
    $related_title = $project_info->project_name . ' (' . lang('project') . ')';
    $related_url = base_url('admin/projects/details/' . $project_info->project_id);
} elseif (!empty($bugs_info)) {
    $related_title = $bugs_info->bug_title . ' (' . lang('bugs') . ')';
    $related_url = base_url('admin/bugs/view_bug/' . $bugs_info->bug_id);
}

$subtasks_total = 0;
$subtasks_completed = 0;
if (!empty($sub_tasks)) {
    foreach ($sub_tasks as $sub_task_row) {
        $subtasks_total++;
        if ((int) $sub_task_row->task_progress >= 100 || $sub_task_row->task_status === 'completed') {
            $subtasks_completed++;
        }
    }
}

$assigned_html = '';
if ($task_details->permission != 'all') {
    $get_permission = json_decode($task_details->permission);
    if (!empty($get_permission)) {
        foreach ($get_permission as $permission => $v_permission) {
            $user_info = get_staff_details($permission);
            if (!empty($user_info)) {
                $ring = ($user_info->role_id == 1) ? 'ring-rose-500' : 'ring-emerald-500';
                $assigned_html .= '<span class="relative inline-flex items-center" data-tooltip="' . fullname($permission) . '">
                    <img src="' . base_url() . staffImage($permission) . '" class="h-7 w-7 rounded-full ring-2 ring-white dark:ring-slate-900 ' . $ring . '" alt="' . fullname($permission) . '">
                </span>';
            }
        }
    }
} else {
    $assigned_html .= '<span class="inline-flex items-center gap-1 rounded-full border border-border px-2.5 py-1 text-xs font-semibold text-muted-foreground">' . lang('everyone') . '</span>';
}

$participant_count = 0;
if ($task_details->permission === 'all') {
    $participant_count = 0;
} else {
    $permission_snapshot = json_decode($task_details->permission, true);
    $participant_count = !empty($permission_snapshot) && is_array($permission_snapshot) ? count($permission_snapshot) : 0;
}

$task_reference = !empty($task_details->task_code) ? $task_details->task_code : '#' . $task_details->task_id;
$created_label = !empty($task_details->created_date) ? display_date($task_details->created_date) : (!empty($task_details->created_time) ? display_date($task_details->created_time) : '-');
$task_due_summary = !empty($due_meta_label) ? $due_meta_label : '-';
$schedule_note = $is_overdue ? lang('overdue') : lang('on_schedule');
$schedule_note_class = $is_overdue ? 'text-rose-600 dark:text-rose-400' : 'text-slate-500 dark:text-slate-400';
?>

<div class="space-y-4">
    <div class="grid gap-4 xl:grid-cols-4">
        <div class="min-w-0 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900 xl:col-span-2">
            <div class="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
                <div class="min-w-0 flex-1">
                    <div class="flex flex-wrap items-center gap-3">
                        <span class="inline-flex items-center rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-[11px] font-semibold text-slate-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300"><?= html_escape($task_reference) ?></span>
                        <span class="inline-flex items-center rounded-md border px-2.5 py-1 text-[10px] font-bold tracking-[0.08em] <?= $status_chip ?>"><?= $status_label ?></span>
                    </div>
                    <p class="mt-3 text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400"><?= lang('task') ?> <?= lang('overview') ?></p>
                    <p class="mt-1 text-sm font-semibold text-slate-900 dark:text-slate-100"><?= !empty($task_details->task_name) ? html_escape($task_details->task_name) : '-' ?></p>
                    <div class="mt-3 flex flex-wrap gap-2">
                        <span class="inline-flex items-center rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-medium text-slate-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200"><?= html_escape($pc_name) ?></span>
                        <span class="inline-flex items-center rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-medium <?= $billable_class ?> dark:border-slate-700 dark:bg-slate-800"><?= $billable_label === lang('yes') ? 'Billable' : 'Not Billable' ?></span>
                        <?php if (!empty($parent_task)) { ?>
                            <span class="inline-flex items-center rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-medium text-slate-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200"><?= lang('sub_task') ?></span>
                        <?php } ?>
                    </div>
                    <div class="mt-4 flex flex-wrap items-center gap-x-5 gap-y-2 text-[12px] text-slate-700 dark:text-slate-300">
                        <div class="inline-flex items-center gap-2">
                            <i data-lucide="clock-3" class="h-3.5 w-3.5 text-slate-400"></i>
                            <span><?= $estimate_label ?> hrs est.</span>
                        </div>
                        <div class="inline-flex items-center gap-2 <?= $is_overdue ? 'text-rose-600 dark:text-rose-400' : '' ?>">
                            <i data-lucide="calendar" class="h-3.5 w-3.5 text-slate-400"></i>
                            <span>Due <?= $task_due_summary ?></span>
                            <?php if ($is_overdue) { ?>
                                <i data-lucide="alert-circle" class="h-3.5 w-3.5"></i>
                            <?php } ?>
                        </div>
                        <div class="inline-flex items-center gap-2">
                            <i data-lucide="calendar-range" class="h-3.5 w-3.5 text-slate-400"></i>
                            <span>Created <?= $created_label ?></span>
                        </div>
                    </div>
                </div>

                <div class="w-full rounded-2xl border border-slate-200 bg-slate-50 p-4 xl:w-[280px] dark:border-slate-700 dark:bg-slate-800/60">
                    <div class="mb-2 flex items-center justify-between text-xs font-bold uppercase tracking-[0.12em] text-slate-500 dark:text-slate-300">
                        <span><?= lang('progress') ?></span>
                        <span class="text-xl leading-none text-slate-800 dark:text-slate-100"><?= $progress_percent ?>%</span>
                    </div>
                    <div class="h-3 w-full rounded-full bg-slate-200 dark:bg-slate-700">
                        <div class="h-3 rounded-full bg-blue-600" style="width: <?= $progress_percent ?>%"></div>
                    </div>
                    <p class="mt-3 text-xs <?= $schedule_note_class ?>"><?= $schedule_note ?></p>
                </div>
            </div>
        </div>

        <div class="min-w-0 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
            <div class="flex items-center justify-between gap-3">
                <div>
                    <p class="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400"><?= lang('timeline') ?></p>
                    <p class="mt-1 text-sm font-semibold text-slate-900 dark:text-slate-100"><?= $created_label ?> <span class="mx-1 text-slate-300">&rarr;</span> <?= $task_due_summary ?></p>
                </div>
                <span class="inline-flex h-11 w-11 items-center justify-center rounded-2xl bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-300">
                    <i data-lucide="calendar-range" class="h-5 w-5"></i>
                </span>
            </div>
            <p class="mt-4 text-sm <?= $schedule_note_class ?>"><?= $is_overdue ? lang('overdue') : lang('on_schedule') ?></p>
        </div>

        <div class="min-w-0 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
            <div class="flex items-center justify-between gap-3">
                <div>
                    <p class="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400"><?= lang('assigned_to') ?></p>
                    <p class="mt-1 text-sm font-semibold text-slate-900 dark:text-slate-100" data-task-assigned-count="<?= (int) $task_details->task_id ?>"><?= $participant_count > 0 ? $participant_count . ' ' . lang('members') : lang('everyone') ?></p>
                </div>
                <?php if (!empty($can_edit) && !empty($edited)) { ?>
                    <?= btn_modal(
                        'admin/tasks/update_users/' . $task_details->task_id,
                        '',
                        lang('assigned_to'),
                        'md',
                        'user-plus',
                        array('class' => 'inline-flex h-10 w-10 items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-700 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800')
                    ); ?>
                <?php } ?>
            </div>
            <div class="mt-4 flex flex-wrap items-center gap-2" data-task-assigned-members="<?= (int) $task_details->task_id ?>">
                <?= $assigned_html ?>
            </div>
        </div>
    </div>

    <section class="grid grid-cols-1 gap-4 xl:grid-cols-12">
        <div class="min-w-0 space-y-4 xl:col-span-8">
            <article class="overflow-hidden rounded-lg border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900">
                <header class="flex items-center gap-2 border-b border-slate-200 px-5 py-3 dark:border-slate-700">
                    <i data-lucide="align-left" class="h-3.5 w-3.5 text-slate-400"></i>
                    <h3 class="text-sm font-semibold text-slate-800 dark:text-slate-100"><?= lang('description') ?></h3>
                </header>
                <div class="p-4">
                    <?php if (!empty(trim(strip_tags((string) $task_details->task_description)))) { ?>
                        <div class="text-[12px] leading-5 text-slate-600 dark:text-slate-300">
                            <?= $task_details->task_description ?>
                        </div>
                    <?php } else { ?>
                        <div class="rounded-xl border-2 border-dashed border-slate-200 bg-slate-50 px-6 py-10 text-center dark:border-slate-700 dark:bg-slate-800/40">
                            <div class="mx-auto mb-3 inline-flex h-12 w-12 items-center justify-center rounded-full bg-slate-100 dark:bg-slate-700">
                                <i data-lucide="file-text" class="h-6 w-6 text-slate-400"></i>
                            </div>
                            <p class="text-sm font-semibold text-slate-700 dark:text-slate-200">No description provided</p>
                            <?php if (!empty($can_edit) && !empty($edited)) { ?>
                                <a href="<?= base_url('admin/tasks/create/' . $task_details->task_id) ?>" class="mt-4 inline-flex items-center rounded-md border border-slate-300 bg-white px-4 py-2 text-[11px] font-semibold text-slate-700 hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700">
                                    Add Description
                                </a>
                            <?php } ?>
                        </div>
                    <?php } ?>
                </div>
            </article>

            <article class="overflow-hidden rounded-lg border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900">
                <header class="flex items-center justify-between border-b border-slate-200 px-5 py-3 dark:border-slate-700">
                    <div class="inline-flex items-center gap-2">
                        <i data-lucide="list-checks" class="h-3.5 w-3.5 text-slate-400"></i>
                        <h3 class="text-sm font-semibold text-slate-800 dark:text-slate-100">Subtasks</h3>
                    </div>
                    <div class="text-[11px] font-semibold text-slate-400 dark:text-slate-500"><?= $subtasks_completed ?>/<?= $subtasks_total ?></div>
                </header>
                <div class="p-4 text-center text-[11px] text-slate-400 dark:text-slate-500">
                    <?php if (!empty($sub_tasks)) { ?>
                        <div class="space-y-3 text-left">
                            <?php foreach ($sub_tasks as $v_task) {
                                $sub_done = ((int) $v_task->task_progress >= 100 || $v_task->task_status === 'completed');
                                $sub_due_time = !empty($v_task->due_date) ? safe_strtotime($v_task->due_date) : null;
                                $sub_due_label = !empty($sub_due_time) ? date('m.d.Y', $sub_due_time) : '-';
                                $sub_is_overdue = !empty($sub_due_time) && $current_time > $sub_due_time && !$sub_done;
                                $sub_billable_label = (!empty($v_task->billable) && $v_task->billable === 'Yes') ? 'Billable' : 'Not Billable';
                                if ($v_task->task_status === 'completed') {
                                    $sub_status_class = 'bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-500/20 dark:text-emerald-300 dark:border-emerald-500/30';
                                } elseif ($v_task->task_status === 'in_progress') {
                                    $sub_status_class = 'bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-500/20 dark:text-blue-300 dark:border-blue-500/30';
                                } elseif ($v_task->task_status === 'deferred') {
                                    $sub_status_class = 'bg-amber-100 text-amber-700 border-amber-200 dark:bg-amber-500/20 dark:text-amber-300 dark:border-amber-500/30';
                                } elseif ($v_task->task_status === 'waiting_for_someone') {
                                    $sub_status_class = 'bg-violet-100 text-violet-700 border-violet-200 dark:bg-violet-500/20 dark:text-violet-300 dark:border-violet-500/30';
                                } else {
                                    $sub_status_class = 'bg-slate-100 text-slate-700 border-slate-200 dark:bg-slate-500/20 dark:text-slate-300 dark:border-slate-500/30';
                                }
                            ?>
                                <div class="flex items-center justify-between gap-3 rounded-lg border border-slate-200 px-4 py-2 dark:border-slate-700">
                                    <div class="flex min-w-0 items-center gap-3">
                                        <label class="inline-flex h-4 w-4 shrink-0 items-center justify-center">
                                            <input type="checkbox" value="<?= $v_task->task_id ?>" data-id="<?= $v_task->task_id ?>" class="js-subtask-complete-toggle h-4 w-4 rounded border-border text-emerald-600 focus:ring-2 focus:ring-emerald-500/20" <?= $sub_done ? 'checked' : '' ?> <?= empty($edited) ? 'disabled' : '' ?>>
                                        </label>
                                        <div class="min-w-0">
                                            <a href="<?= base_url('admin/tasks/details/' . $v_task->task_id) ?>" class="block truncate text-[11px] font-medium text-slate-700 hover:text-blue-600 dark:text-slate-200 dark:hover:text-blue-400">
                                                <?= html_escape($v_task->task_name) ?>
                                            </a>
                                            <div class="mt-0.5 flex flex-wrap items-center gap-2 text-[10px] text-slate-500 dark:text-slate-400">
                                                <span class="<?= $sub_is_overdue ? 'text-rose-600 dark:text-rose-400 font-semibold' : '' ?>">Due <?= $sub_due_label ?></span>
                                                <span class="text-slate-300 dark:text-slate-600">|</span>
                                                <span><?= $sub_billable_label ?></span>
                                            </div>
                                        </div>
                                    </div>
                                    <span class="inline-flex items-center rounded-md border px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.06em] <?= $sub_status_class ?>">
                                        <?= lang($v_task->task_status) ?>
                                    </span>
                                </div>
                            <?php } ?>
                        </div>
                    <?php } else { ?>
                        No subtasks created yet.
                    <?php } ?>
                </div>
            </article>
        </div>

        <aside class="min-w-0 space-y-4 xl:col-span-4">
            <article class="overflow-hidden rounded-lg border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900">
            <header class="border-b border-slate-200 px-5 py-3 dark:border-slate-700">
                    <h3 class="text-sm font-semibold text-slate-800 dark:text-slate-100">Classification</h3>
                </header>
                <div class="space-y-4 px-5 py-4 text-[11px]">
                    <div>
                        <p class="mb-1 inline-flex items-center gap-2 text-xs font-bold uppercase tracking-[0.12em] text-slate-500 dark:text-slate-400">
                            <i data-lucide="briefcase" class="h-3.5 w-3.5"></i>
                            Category
                        </p>
                        <p class="font-semibold text-slate-800 dark:text-slate-100"><?= html_escape($pc_name) ?></p>
                    </div>
                    <div class="flex items-center gap-2">
                        <p class="mb-1 inline-flex items-center gap-2 text-xs font-bold uppercase tracking-[0.12em] text-slate-500 dark:text-slate-400">
                            <i data-lucide="link-2" class="h-3.5 w-3.5"></i>
                            Related To
                        </p>
                        <?php if (!empty($related_url) && $related_title !== '-') { ?>
                            <a href="<?= $related_url ?>" class="font-semibold text-blue-600 hover:underline dark:text-blue-400"><?= html_escape($related_title) ?></a>
                        <?php } else { ?>
                            <p class="font-semibold text-slate-800 dark:text-slate-100">-</p>
                        <?php } ?>
                    </div>
                    <div>
                        <p class="mb-2 inline-flex items-center gap-2 text-xs font-bold uppercase tracking-[0.12em] text-slate-500 dark:text-slate-400">
                            <i data-lucide="tag" class="h-3.5 w-3.5"></i>
                            Tags
                        </p>
                        <div class="flex flex-wrap items-center gap-2 text-sm">
                            <?php if (!empty($task_details->tags)) { ?>
                                <?= get_tags($task_details->tags, true) ?>
                            <?php } else { ?>
                                <span class="rounded-md border border-slate-200 bg-slate-50 px-2.5 py-1 text-xs font-semibold text-slate-500 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300">-</span>
                            <?php } ?>
                        </div>
                    </div>
                </div>
            </article>

            <article class="overflow-hidden rounded-lg border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900">
                <header class="border-b border-slate-200 px-5 py-3 dark:border-slate-700">
                    <h3 class="text-sm font-semibold text-slate-800 dark:text-slate-100">Scheduling &amp; Financials</h3>
                </header>
                <div class="grid grid-cols-1 gap-4 px-5 py-4 text-[11px] sm:grid-cols-2">
                    <div>
                        <p class="mb-1 inline-flex items-center gap-2 text-xs font-bold uppercase tracking-[0.12em] text-slate-500 dark:text-slate-400">
                            <i data-lucide="calendar" class="h-3.5 w-3.5"></i>
                            <?= lang('start_date') ?>
                        </p>
                        <p class="font-semibold text-slate-800 dark:text-slate-100"><?= !empty($task_details->task_start_date) ? display_date($task_details->task_start_date) : '-' ?></p>
                    </div>
                    <div>
                        <p class="mb-1 inline-flex items-center gap-2 text-xs font-bold uppercase tracking-[0.12em] text-slate-500 dark:text-slate-400">
                            <i data-lucide="clock-3" class="h-3.5 w-3.5"></i>
                            <?= lang('due_date') ?>
                        </p>
                        <p class="font-semibold <?= $due_class ?>"><?= !empty($task_details->due_date) ? display_date($task_details->due_date) : '-' ?></p>
                    </div>
                    <div>
                        <p class="mb-1 inline-flex items-center gap-2 text-xs font-bold uppercase tracking-[0.12em] text-slate-500 dark:text-slate-400">
                            <i data-lucide="badge-dollar-sign" class="h-3.5 w-3.5"></i>
                            <?= lang('hourly_rate') ?>
                        </p>
                        <p class="font-semibold text-slate-800 dark:text-slate-100">$<?= !empty($task_details->hourly_rate) ? number_format((float) $task_details->hourly_rate, 2) : '0.00' ?></p>
                    </div>
                    <div>
                        <p class="mb-1 inline-flex items-center gap-2 text-xs font-bold uppercase tracking-[0.12em] text-slate-500 dark:text-slate-400">
                            <i data-lucide="badge-check" class="h-3.5 w-3.5"></i>
                            <?= lang('billable') ?>
                        </p>
                        <p class="font-semibold text-slate-800 dark:text-slate-100"><?= $billable_label ?></p>
                    </div>
                </div>
            </article>
        </aside>
    </section>
</div>

<script>
    (function($) {
        if (window.__taskDetailSubToggleBound) {
            return;
        }
        window.__taskDetailSubToggleBound = true;

        $(document).on('change', '.js-subtask-complete-toggle', function() {
            const el = this;
            const taskId = $(el).data('id');
            if (!taskId) {
                return;
            }

            const isChecked = $(el).is(':checked');
            $(el).prop('disabled', true);

            $.ajax({
                url: base_url + 'admin/tasks/completed_tasks/' + taskId,
                type: 'POST',
                dataType: 'json',
                data: {
                    task_progress: isChecked ? 100 : 0,
                    task_status: isChecked ? 'completed' : 'not_started',
                    csrf_token: typeof getCookie === 'function' ? getCookie('csrf_cookie') : ''
                }
            }).always(function() {
                window.location.reload();
            });
        });
    })(jQuery);
</script>
