<?php
$uploaded_file = [];
if (!empty($announcements_details->attachment)) {
    $uploaded_file = json_decode($announcements_details->attachment);
}

$show_custom_fields = custom_form_label(16, $announcements_details->announcements_id);
?>

<div class="mx-auto max-w-5xl space-y-4">
    <div class="rounded-2xl bg-gradient-to-r from-sky-500 via-indigo-500 to-violet-500 p-[1px] shadow-lg">
        <div class="rounded-2xl bg-white p-4 dark:bg-gray-800">
            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                <div>
                    <p class="text-xs font-semibold uppercase tracking-[0.2em] text-sky-600 dark:text-sky-300"><?= lang('title') ?></p>
                    <p class="mt-1 text-lg font-semibold text-gray-900 dark:text-white"><?php if (!empty($announcements_details->title)) echo $announcements_details->title; ?></p>
                </div>
                <div class="rounded-lg bg-sky-50 px-3 py-2 text-sm text-sky-700 dark:bg-sky-900/40 dark:text-sky-200">
                    <?= lang('start_date') ?>: <?= display_date($announcements_details->start_date) ?>
                    <br/>
                    <?= lang('end_date') ?>: <?= display_date($announcements_details->end_date) ?>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-4 lg:grid-cols-12">
        <div class="space-y-4 lg:col-span-4">
            <div class="rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
                <p class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400"><?= lang('created_by') ?></p>
                <p class="mt-1 text-sm font-medium text-gray-800 dark:text-gray-100"><?php echo fullname($announcements_details->user_id); ?></p>
            </div>

            <div class="rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
                <p class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400"><?= lang('created_date') ?></p>
                <p class="mt-1 text-sm text-gray-700 dark:text-gray-200"><?= display_date($announcements_details->created_date) . ' ' . display_time($announcements_details->created_date); ?></p>
            </div>

            <div class="rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
                <p class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400"><?= lang('status') ?></p>
                <div class="mt-1">
                    <?php if ($announcements_details->status == 'unpublished') : ?>
                        <span class="inline-flex items-center rounded-full bg-rose-100 px-2.5 py-0.5 text-xs font-semibold text-rose-700"><?= lang('unpublished') ?></span>
                    <?php else : ?>
                        <span class="inline-flex items-center rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-semibold text-emerald-700"><?= lang('published') ?></span>
                    <?php endif; ?>
                </div>
            </div>

            <?php if (!empty($announcements_details->all_client)) : ?>
                <div class="rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
                    <p class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400"><?= lang('share_with') ?></p>
                    <p class="mt-1 text-sm font-medium text-gray-800 dark:text-gray-100"><?= lang('client') ?></p>
                </div>
            <?php endif; ?>
        </div>

        <div class="space-y-4 lg:col-span-8">
            <div class="rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
                <p class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400"><?= lang('attachment') ?></p>
                <?php if (!empty($uploaded_file)) : ?>
                    <ul class="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2">
                        <?php foreach ($uploaded_file as $fKey => $v_files) : if (!empty($v_files)) : ?>
                                <li class="rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-900">
                                    <div class="flex items-center gap-3">
                                        <?php if ($v_files->is_image == 1) : ?>
                                            <img src="<?= base_url() . $v_files->path ?>" class="h-12 w-12 rounded-md object-cover ring-1 ring-gray-200 dark:ring-gray-600">
                                        <?php else : ?>
                                            <div class="flex h-12 w-12 items-center justify-center rounded-md bg-gray-200 text-xs font-semibold text-gray-700 dark:bg-gray-700 dark:text-gray-100">FILE</div>
                                        <?php endif; ?>

                                        <div class="min-w-0 flex-1">
                                            <a href="<?= base_url() ?>admin/announcements/download_files/<?= $announcements_details->announcements_id . '/' . $fKey ?>" class="block truncate text-sm font-semibold text-indigo-600 hover:underline dark:text-indigo-300"><?= $v_files->fileName ?></a>
                                            <div class="mt-1 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
                                                <span><?= $v_files->size ?> <?= lang('kb') ?></span>
                                                <a href="<?= base_url() ?>admin/announcements/download_files/<?= $announcements_details->announcements_id . '/' . $fKey ?>" class="font-semibold text-indigo-600 dark:text-indigo-300">Download</a>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                        <?php endif; endforeach; ?>
                    </ul>
                <?php else : ?>
                    <p class="mt-3 text-sm text-gray-500 dark:text-gray-400">No attachments available.</p>
                <?php endif; ?>
            </div>

            <?php if (!empty($show_custom_fields)) : ?>
                <div class="rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
                    <p class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Custom Fields</p>
                    <div class="mt-3 divide-y divide-gray-200 dark:divide-gray-700">
                        <?php foreach ($show_custom_fields as $c_label => $v_fields) : if (!empty($v_fields)) : ?>
                                <div class="grid grid-cols-12 gap-2 py-2">
                                    <div class="col-span-5 text-sm font-medium text-gray-700 dark:text-gray-300"><?= $c_label ?></div>
                                    <div class="col-span-7 text-sm text-gray-700 dark:text-gray-100"><?= $v_fields ?></div>
                                </div>
                        <?php endif; endforeach; ?>
                    </div>
                </div>
            <?php endif; ?>

            <div class="rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
                <p class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400"><?= lang('description') ?></p>
                <div class="mt-3 rounded-lg border-l-4 border-indigo-500 bg-indigo-50 p-3 text-sm leading-6 text-gray-700 dark:border-indigo-400 dark:bg-indigo-900/20 dark:text-gray-200">
                    <?= $announcements_details->description ?>
                </div>
            </div>
        </div>
    </div>
</div>
