<div class="space-y-5">
    <section class="overflow-hidden rounded-2xl border border-border bg-background shadow-sm">
        <div class="border-b border-border px-5 py-5">
            <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
                <div class="min-w-0">
                    <div class="mb-2 flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
                        <span class="inline-flex items-center gap-1 font-semibold">
                            <i data-lucide="check-square" class="h-4 w-4"></i>
                            <?= lang('tasks') . ' ' . lang('details') ?>
                        </span>
                        <?php if (!empty($project_info->project_name)) { ?>
                            <i data-lucide="chevron-right" class="h-3.5 w-3.5"></i>
                            <span><?= html_escape($project_info->project_name) ?></span>
                        <?php } ?>
                    </div>
                    <h1 class="m-0 break-words text-2xl font-bold leading-tight text-foreground">
                        <?= html_escape($task_details->task_name) ?>
                    </h1>
                </div>
                <div class="flex flex-wrap items-center gap-2">
                    <span class="inline-flex items-center rounded-full border px-3 py-1.5 text-xs font-bold uppercase tracking-wide <?= $task_status_class ?>">
                        <?= lang($task_details->task_status) ?>
                    </span>
                    <span class="inline-flex items-center rounded-full border px-3 py-1.5 text-xs font-bold uppercase tracking-wide <?= $timer_is_on ? 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900/40 dark:bg-emerald-950/30 dark:text-emerald-200' : 'border-rose-200 bg-rose-50 text-rose-700 dark:border-rose-900/40 dark:bg-rose-950/30 dark:text-rose-200' ?>">
                        <?= lang('timer_status') ?>: <?= $timer_is_on ? lang('on') : lang('off') ?>
                    </span>
                </div>
            </div>
        </div>

        <div class="grid gap-4 p-5 md:grid-cols-2 xl:grid-cols-4">
            <div class="rounded-xl border border-border bg-card p-4">
                <div class="text-xs font-bold uppercase tracking-wide text-muted-foreground"><?= lang('start_date') ?></div>
                <div class="mt-2 text-base font-semibold text-foreground"><?= !empty($task_details->task_start_date) ? display_date($task_details->task_start_date) : '-' ?></div>
            </div>
            <div class="rounded-xl border border-border bg-card p-4">
                <div class="text-xs font-bold uppercase tracking-wide text-muted-foreground"><?= lang('due_date') ?></div>
                <div class="mt-2 flex flex-wrap items-center gap-2 text-base font-semibold <?= $task_is_overdue ? 'text-rose-500' : 'text-foreground' ?>">
                    <?= !empty($task_details->due_date) ? display_date($task_details->due_date) : '-' ?>
                    <?php if ($task_is_overdue) { ?>
                        <span class="rounded-full bg-rose-500/10 px-2 py-0.5 text-xs font-bold text-rose-500"><?= lang('overdue') ?></span>
                    <?php } ?>
                </div>
            </div>
            <div class="rounded-xl border border-border bg-card p-4">
                <div class="text-xs font-bold uppercase tracking-wide text-muted-foreground"><?= lang('estimated_hour') ?></div>
                <div class="mt-2 text-base font-semibold text-foreground"><?= !empty($task_details->task_hour) ? html_escape($task_details->task_hour) : '0' ?> <?= lang('hours') ?></div>
            </div>
            <div class="rounded-xl border border-border bg-card p-4">
                <div class="text-xs font-bold uppercase tracking-wide text-muted-foreground"><?= lang('completed') ?></div>
                <div class="mt-3 flex items-center gap-3">
                    <div class="h-2.5 w-full rounded-full bg-muted">
                        <div class="h-2.5 rounded-full bg-primary" style="width: <?= (float) $task_details->task_progress ?>%"></div>
                    </div>
                    <span class="w-10 text-right text-sm font-bold text-foreground"><?= (float) $task_details->task_progress ?>%</span>
                </div>
            </div>
        </div>
    </section>

    <section class="grid gap-5 lg:grid-cols-[minmax(0,1fr)_22rem]">
        <div class="rounded-2xl border border-border bg-background p-5 shadow-sm">
            <h2 class="m-0 text-lg font-bold text-foreground"><?= lang('description') ?></h2>
            <div class="mt-4 rounded-xl border border-border bg-card p-4 text-sm leading-7 text-muted-foreground">
                <?= !empty($task_details->task_description) ? $task_details->task_description : lang('nothing_to_display') ?>
            </div>
            <?php if (!empty($project_settings[11]) && $project_settings[11] == 'show_tasks_hours') { ?>
                <div class="mt-5 rounded-xl border border-border bg-card p-4">
                    <?= $this->tasks_model->get_time_spent_result($this->tasks_model->task_spent_time_by_id($task_details->task_id)) ?>
                </div>
            <?php } ?>
        </div>

        <aside class="space-y-5">
            <div class="rounded-2xl border border-border bg-background p-5 shadow-sm">
                <h2 class="m-0 text-lg font-bold text-foreground"><?= lang('overview') ?></h2>
                <div class="mt-4 space-y-3 text-sm">
                    <div class="flex items-start justify-between gap-4 border-b border-border pb-3">
                        <span class="text-muted-foreground"><?= lang('project_name') ?></span>
                        <strong class="text-right text-foreground"><?= !empty($project_info->project_name) ? html_escape($project_info->project_name) : '-' ?></strong>
                    </div>
                    <div class="flex items-start justify-between gap-4 border-b border-border pb-3">
                        <span class="text-muted-foreground"><?= lang('milestone') ?></span>
                        <strong class="text-right text-foreground"><?= !empty($milestones_info->milestone_name) ? html_escape($milestones_info->milestone_name) : '-' ?></strong>
                    </div>
                    <div class="flex items-start justify-between gap-4 border-b border-border pb-3">
                        <span class="text-muted-foreground"><?= lang('created_by') ?></span>
                        <strong class="text-right text-foreground"><?= !empty($created_by_info->fullname) ? html_escape($created_by_info->fullname) : '-' ?></strong>
                    </div>
                    <div class="flex items-start justify-between gap-4">
                        <span class="text-muted-foreground"><?= lang('created_date') ?></span>
                        <strong class="text-right text-foreground"><?= !empty($task_details->task_created_date) ? display_date($task_details->task_created_date) . ' ' . display_time($task_details->task_created_date) : '-' ?></strong>
                    </div>
                </div>
            </div>

            <div class="rounded-2xl border border-border bg-background p-5 shadow-sm">
                <h2 class="m-0 text-lg font-bold text-foreground"><?= lang('participants') ?></h2>
                <div class="mt-4 flex flex-wrap gap-2">
                    <?php if (!empty($task_participants)) { ?>
                        <?php foreach ($task_participants as $participant) { ?>
                            <span class="inline-flex items-center gap-2 rounded-full border border-border bg-card py-1 pl-1 pr-3 text-sm font-semibold text-foreground">
                                <img src="<?= base_url() . $participant->avatar ?>" class="h-7 w-7 rounded-full object-cover" alt="<?= html_escape($participant->fullname) ?>">
                                <?= html_escape($participant->fullname) ?>
                            </span>
                        <?php } ?>
                    <?php } else { ?>
                        <span class="inline-flex items-center gap-2 rounded-full border border-border bg-card px-3 py-2 text-sm font-semibold text-foreground">
                            <i data-lucide="users" class="h-4 w-4 text-muted-foreground"></i>
                            <?= lang('everyone') ?>
                        </span>
                    <?php } ?>
                </div>
            </div>
        </aside>
    </section>
</div>
