<?php
$files_info = $this->common_model->get_attach_file($id, $module);
$attach_list = $this->session->userdata($module . '_media_view');
if (empty($attach_list)) {
    $attach_list = 'list_view';
}
?>

<div class="space-y-4">
    <div class="flex flex-wrap items-center justify-between gap-3">
        <div>
            <h3 class="text-base font-semibold text-slate-900 dark:text-slate-100"><?= lang('attach_file_list') ?></h3>
            <p class="text-sm text-slate-500"><?= lang('attachment') ?> manager</p>
        </div>
        <div class="flex flex-wrap items-center gap-2">
            <a data-tooltip="<?= lang('download') . ' ' . lang('all') . ' ' . lang('attachment') ?>"
               href="<?= base_url('admin/common/download_all_attachment/' . $module . '/' . $id) ?>"
               class="inline-flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-50">
                <i data-lucide="download" class="h-4 w-4"></i>
                <?= lang('download') ?>
            </a>
            <button type="button" data-attachment-view="media_view"
                class="inline-flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-50 <?= $attach_list == 'media_view' ? 'hidden' : '' ?>">
                <i data-lucide="grid" class="h-4 w-4"></i>
                <?= lang('media_view') ?>
            </button>
            <button type="button" data-attachment-view="list_view"
                class="inline-flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-50 <?= $attach_list == 'list_view' ? 'hidden' : '' ?>">
                <i data-lucide="list" class="h-4 w-4"></i>
                <?= lang('list_view') ?>
            </button>
            <?= btn_modal('client/projects/new_attachment/' . $project_details->project_id, lang('new') . ' ' . lang('attachment'), lang('new') . ' ' . lang('attachment'),
                'lg', 'plus', array('class' => 'inline-flex items-center gap-2 rounded-lg bg-slate-900 px-3 py-2 text-xs font-semibold text-white hover:bg-slate-800')) ?>
        </div>
    </div>

    <?php $this->load->helper('file'); ?>
    <div class="media-view-container <?= $attach_list == 'media_view' ? '' : 'hidden' ?>">
        <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
            <?php $this->load->view('client/projects/attachment_list', array('project_files_info' => $files_info)); ?>
        </div>
    </div>

    <div class="media-list-container <?= $attach_list == 'list_view' ? '' : 'hidden' ?>">
        <?php
        if (!empty($files_info)) {
            foreach ($files_info as $key => $v_files_info) {
        ?>
                <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-700 dark:bg-slate-900/40" id="media_list_container-<?= $v_files_info[0]->attachments_id ?>">
                    <div class="flex flex-wrap items-center justify-between gap-2 border-b border-slate-200 px-4 py-3 dark:border-slate-700">
                        <div>
                            <div class="text-sm font-semibold text-slate-900 dark:text-slate-100"><?= $v_files_info[0]->title; ?></div>
                            <div class="text-xs text-slate-500 dark:text-slate-400"><?= $v_files_info[0]->fullname; ?> | <?= count(array($v_files_info)) . ' ' . lang('attachment') ?></div>
                        </div>
                        <div class="flex items-center gap-2">
                            <a class="inline-flex items-center gap-2 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"
                               href="<?= base_url() ?>client/projects/download_all_files/<?= $v_files_info[0]->attachments_id ?>">
                                <i data-lucide="download" class="h-4 w-4"></i>
                                <?= lang('download') ?>
                            </a>
                            <?php if ($v_files_info[0]->user_id == $this->session->userdata('user_id')) { ?>
                                <?php echo ajax_anchor(base_url("client/projects/delete_files/" . $v_files_info[0]->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" => "#media_list_container-" . $v_files_info[0]->attachments_id)); ?>
                            <?php } ?>
                        </div>
                    </div>
                    <div class="overflow-x-auto overflow-y-visible">
                        <table class="min-w-full text-sm">
                            <thead class="bg-slate-50 text-slate-500 dark:bg-slate-800 dark:text-slate-300">
                                <tr>
                                    <th class="px-4 py-3 text-left"><?= lang('files') ?></th>
                                    <th class="px-4 py-3 text-left"><?= lang('size') ?></th>
                                    <th class="px-4 py-3 text-left"><?= lang('date') ?></th>
                                    <th class="px-4 py-3 text-left"><?= lang('total') . ' ' . lang('comments') ?></th>
                                    <th class="px-4 py-3 text-left"><?= lang('uploaded_by') ?></th>
                                    <th class="px-4 py-3 text-left"><?= lang('action') ?></th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                                <?php
                                if (!empty($v_files_info)) {
                                    foreach ($v_files_info as $v_files) {
                                        $total_file_comment = total_rows('tbl_task_comment', array('uploaded_files_id' => $v_files->uploaded_files_id));
                                ?>
                                        <tr class="file-item text-slate-700 transition hover:bg-slate-50/70 dark:text-slate-200 dark:hover:bg-slate-800/50">
                                            <td class="px-4 py-3">
                                                <a class="font-medium text-primary hover:underline dark:text-sky-300" data-toggle="modal" data-target="#myModal_extra_lg"
                                                   href="<?= base_url() ?>client/projects/attachment_details/r/<?= $v_files->attachments_id . '/' . $v_files->uploaded_files_id ?>">
                                                    <?= $v_files->file_name ?>
                                                </a>
                                            </td>
                                            <td class="px-4 py-3"><?= $v_files->size ?>Kb</td>
                                            <td class="px-4 py-3"><?= date('Y-m-d' . "<br/> h:m A", safe_strtotime($v_files->upload_time)); ?></td>
                                            <td class="px-4 py-3"><?= $total_file_comment ?></td>
                                            <td class="px-4 py-3"><?= $v_files->fullname ?></td>
                                            <td class="px-4 py-3">
                                                <a class="inline-flex items-center gap-1 rounded-lg border border-slate-200 bg-white px-2 py-1 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"
                                                   href="<?= base_url() ?>client/projects/download_files/<?= $v_files->uploaded_files_id ?>">
                                                    <i data-lucide="download" class="h-4 w-4"></i>
                                                    <?= lang('download') ?>
                                                </a>
                                            </td>
                                        </tr>
                                    <?php
                                    }
                                } else {
                                    ?>
                                    <tr>
                                        <td colspan="6" class="px-4 py-6 text-center text-sm text-slate-500 dark:text-slate-400"><?= lang('nothing_to_display') ?></td>
                                    </tr>
                                <?php } ?>
                            </tbody>
                        </table>
                    </div>
                </div>
        <?php
            }
        }
        ?>
    </div>
</div>

<script type="text/javascript">
    (function() {
        const toggleButtons = document.querySelectorAll('[data-attachment-view]');
        const mediaView = document.querySelector('.media-view-container');
        const listView = document.querySelector('.media-list-container');
        toggleButtons.forEach((btn) => {
            btn.addEventListener('click', () => {
                const type = btn.getAttribute('data-attachment-view');
                if (type === 'media_view') {
                    mediaView.classList.remove('hidden');
                    listView.classList.add('hidden');
                } else {
                    listView.classList.remove('hidden');
                    mediaView.classList.add('hidden');
                }
                toggleButtons.forEach((item) => item.classList.toggle('hidden'));
                fetch('<?= base_url() ?>admin/common/set_media_view/' + type + '/<?= $module ?>');
            });
        });
    })();
</script>

