<?php
$attendees = array();
if (!empty($details->attendees)) {
    $attendees_data = @unserialize($details->attendees);
    if (!empty($attendees_data['attendees']) && is_array($attendees_data['attendees'])) {
        $attendees = $attendees_data['attendees'];
    }
}
?>

<style>
    .meeting-description-content,
    .meeting-description-content * {
        color: #374151 !important;
    }

    .meeting-description-content {
        background: #f5f3ff !important;
        border-left-color: #8b5cf6 !important;
        overflow-wrap: anywhere;
    }

    .meeting-description-content p,
    .meeting-description-content div,
    .meeting-description-content span {
        background: transparent !important;
    }

    .dark .meeting-description-content,
    .dark .meeting-description-content * {
        color: #e5e7eb !important;
    }

    .dark .meeting-description-content {
        background: rgba(91, 33, 182, 0.2) !important;
        border-left-color: #a78bfa !important;
    }
</style>

<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('meeting_details') ?></p>
                    <p class="mt-1 text-lg font-semibold text-gray-900 dark:text-white">
                        <?= !empty($details->meeting_subject) ? $details->meeting_subject : lang('subject') ?>
                    </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') ?>:
                    <?= !empty($details->start_date) ? display_datetime($details->start_date, true) : '-' ?>
                </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('responsible') ?></p>
                <p class="mt-1 text-sm font-medium text-gray-800 dark:text-gray-100">
                    <?= !empty($details->user_id) ? fullname($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('location') ?></p>
                <p class="mt-1 text-sm font-medium text-gray-800 dark:text-gray-100">
                    <?= !empty($details->location) ? $details->location : '-' ?>
                </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('attendess') ?></p>
                <?php if (!empty($attendees)) : ?>
                    <div class="mt-3 space-y-2">
                        <?php foreach ($attendees as $attendee_id) : ?>
                            <div class="rounded-lg bg-gray-50 px-3 py-2 text-sm font-medium text-gray-700 dark:bg-gray-900 dark:text-gray-200">
                                <?= fullname($attendee_id) ?>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php else : ?>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">-</p>
                <?php endif; ?>
            </div>
        </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('subject') ?></p>
                <p class="mt-1 text-sm text-gray-700 dark:text-gray-200">
                    <?= !empty($details->meeting_subject) ? $details->meeting_subject : '-' ?>
                </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('end_date') ?></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">
                    <?= !empty($details->end_date) ? display_datetime($details->end_date, true) : '-' ?>
                </div>
            </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('description') ?></p>
                <div class="meeting-description-content mt-3 rounded-lg border-l-4 border-violet-500 bg-violet-50 p-3 text-sm leading-6 text-gray-700 dark:border-violet-400 dark:bg-indigo-900/20 dark:text-gray-200">
                    <?= !empty($details->description) ? $details->description : '-' ?>
                </div>
            </div>
        </div>
    </div>
</div>
