<?php
$notes_length = !empty($project_details->notes) ? strlen(trim(strip_tags($project_details->notes))) : 0;
$notes_status = $notes_length > 0 ? 'Saved' : 'Draft';
?>

<div class="project-overview-shell space-y-4">
    <div class="flex items-center justify-between">
        <div>
            <h3 class="text-base font-semibold text-slate-900 dark:text-slate-100"><?= lang('notes') ?></h3>
            <p class="text-sm text-muted-foreground">Working notes, scope reminders, and project context.</p>
        </div>
    </div>

    <div class="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
        <div class="project-kpi-card rounded-xl border border-border bg-card p-4 shadow-sm">
            <div class="flex items-center gap-3">
                <div class="rounded-xl bg-indigo-50 p-2.5 text-indigo-600 dark:bg-indigo-900/30 dark:text-indigo-400">
                    <i data-lucide="notebook" class="h-5 w-5"></i>
                </div>
                <div>
                    <div class="text-2xl font-bold text-foreground"><?= (int) $notes_length ?></div>
                    <div class="text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground">Characters</div>
                </div>
            </div>
        </div>

        <div class="project-kpi-card rounded-xl border border-border bg-card p-4 shadow-sm">
            <div class="flex items-center gap-3">
                <div class="rounded-xl bg-cyan-50 p-2.5 text-cyan-600 dark:bg-cyan-900/30 dark:text-cyan-400">
                    <i data-lucide="file-text" class="h-5 w-5"></i>
                </div>
                <div>
                    <div class="text-2xl font-bold text-foreground"><?= $notes_length > 0 ? 1 : 0 ?></div>
                    <div class="text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground">Saved Note</div>
                </div>
            </div>
        </div>

        <div class="project-kpi-card rounded-xl border border-border bg-card p-4 shadow-sm">
            <div class="flex items-center gap-3">
                <div class="rounded-xl bg-emerald-50 p-2.5 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400">
                    <i data-lucide="check-circle-2" class="h-5 w-5"></i>
                </div>
                <div>
                    <div class="text-2xl font-bold text-foreground"><?= $notes_status ?></div>
                    <div class="text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground">Status</div>
                </div>
            </div>
        </div>
    </div>

    <div class="project-section-card rounded-2xl border border-border bg-card p-6 shadow-sm">
        <div class="mb-4 flex flex-wrap items-center justify-between gap-3 border-b border-border pb-4">
            <div>
                <h4 class="text-sm font-semibold text-foreground">Project Notes</h4>
                <p class="text-xs text-muted-foreground">Keep a clean internal record of decisions, scope, and reminders.</p>
            </div>
            <div class="flex flex-wrap gap-2 text-xs">
                <span class="project-summary-chip inline-flex items-center gap-2 px-2.5 py-1 text-slate-700 dark:text-slate-200"><span class="h-2 w-2 rounded-full bg-indigo-500"></span><?= (int) $notes_length ?> chars</span>
                <span class="project-summary-chip inline-flex items-center gap-2 px-2.5 py-1 text-slate-700 dark:text-slate-200"><span class="h-2 w-2 rounded-full bg-emerald-500"></span><?= $notes_status ?></span>
            </div>
        </div>
        <form action="<?= base_url() ?>admin/projects/save_project_notes/<?= $project_details->project_id ?>" method="post" class="space-y-4">
					<?= form_editor('notes', lang('notes'), (!empty($project_details->notes) ? $project_details->notes : ''), false, array('class' => 'textarea_', 'data-height' => '260px')); ?>
            
			<div class="flex justify-end">
                <button type="submit" class="inline-flex items-center rounded-2xl bg-slate-900 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-slate-800">
                    <?= lang('save') ?>
                </button>
            </div>
        </form>
    </div>
</div>
