<?php if (!empty($project_files_info)) { ?>
    <?php
    $this->load->helper('file');
    foreach ($project_files_info as $group) {
        if (empty($group[0])) {
            continue;
        }
        $attachment = $group[0];
        $uploaded_by = $this->db->where('user_id', $attachment->user_id)->get('tbl_account_details')->row();
        $files = $group;
        shuffle($files);
        $visible_files = array_slice($files, 0, 4);
        $more = max(count($group) - 4, 0);
    ?>
        <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-700 dark:bg-slate-900/40" id="attachment_container-<?= $attachment->attachments_id ?>">
            <div class="flex items-start justify-between gap-3 border-b border-slate-200 px-4 py-3 dark:border-slate-700">
                <div>
                    <a href="<?= base_url() ?>client/projects/attachment_details/g/<?= $attachment->attachments_id ?>" data-toggle="modal" data-target="#myModal_extra_lg" class="block font-semibold text-slate-900 hover:text-primary dark:text-slate-100 dark:hover:text-sky-300">
                        <?= html_escape($attachment->title) ?>
                    </a>
                    <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
                        <?= !empty($uploaded_by->fullname) ? html_escape($uploaded_by->fullname) : '-' ?> | <?= count($group) ?> <?= lang('attachment') ?>
                    </p>
                </div>
                <div class="flex items-center gap-2">
                    <a data-toggle="tooltip" data-placement="top" title="<?= lang('download') . ' ' . lang('all') ?>" href="<?= base_url() ?>client/projects/download_all_files/<?= $attachment->attachments_id ?>" class="inline-flex items-center rounded-lg border border-slate-200 bg-white px-2.5 py-1.5 text-xs font-semibold text-slate-600 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700">
                        <i data-lucide="download" class="h-4 w-4"></i>
                    </a>
                    <?php if ($attachment->user_id == $this->session->userdata('user_id')) { ?>
                        <?php echo ajax_anchor(base_url("client/projects/delete_files/" . $attachment->attachments_id), "<i class='text-rose-600' data-lucide='trash-2'></i>", array("class" => "inline-flex items-center rounded-lg border border-rose-200 bg-rose-50 px-2.5 py-1.5 text-xs font-semibold text-rose-600 hover:bg-rose-100", "title" => lang('delete'), "data-fade-out-on-success" => "#attachment_container-" . $attachment->attachments_id)); ?>
                    <?php } ?>
                </div>
            </div>
            <div class="grid grid-cols-2 gap-3 p-4">
                <?php foreach ($visible_files as $index => $file) {
                    $file_name = (strlen($file->file_name) > 18) ? strip_html_tags(mb_substr($file->file_name, 0, 18)) . '...' : $file->file_name;
                ?>
                    <a data-toggle="modal" data-target="#myModal_extra_lg" href="<?= base_url() ?>client/projects/attachment_details/r/<?= $attachment->attachments_id . '/' . $file->uploaded_files_id ?>" class="group relative overflow-hidden rounded-xl border border-slate-200 bg-slate-50 dark:border-slate-700 dark:bg-slate-800/60">
                        <?php if ($file->is_image == 1) { ?>
                            <img class="h-32 w-full object-cover transition duration-200 group-hover:scale-105" src="<?= base_url() . $file->files ?>" alt="">
                        <?php } else { ?>
                            <div class="flex h-32 items-center justify-center text-slate-500 dark:text-slate-300">
                                <i data-lucide="file-text" class="h-8 w-8"></i>
                            </div>
                        <?php } ?>
                        <div class="border-t border-slate-200 px-3 py-2 text-xs dark:border-slate-700">
                            <div class="font-semibold text-slate-700 dark:text-slate-200"><?= html_escape($file_name) ?></div>
                            <div class="mt-1 flex items-center justify-between text-slate-500 dark:text-slate-400">
                                <span><?= $file->size ?> <?= lang('kb') ?></span>
                                <span><?= display_date($attachment->upload_time) ?></span>
                            </div>
                        </div>
                        <?php if ($more > 0 && $index === 3) { ?>
                            <span class="absolute inset-0 flex items-center justify-center bg-slate-900/60 text-lg font-bold text-white">+<?= $more ?></span>
                        <?php } ?>
                    </a>
                <?php } ?>
            </div>
        </div>
    <?php } ?>
<?php } ?>
