<?php
$edited = can_action('57', 'edited');
$deleted = can_action('57', 'deleted');
?>

<div class="space-y-4">
    <div>
        <h3 class="text-base font-semibold text-slate-900 dark:text-slate-100"><?= lang('project_settings') ?></h3>
    </div>

    <div class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 shadow-sm">
        <form action="<?= base_url() ?>admin/projects/update_settings/<?= $project_details->project_id ?>" method="post" class="space-y-4">
            <?php
            $project_permissions = $this->db->get('tbl_project_settings')->result();
            $permission_rows = array();
            $client_permission_count = 0;
            $staff_permission_count = 0;
            $get_permissions = !empty($project_details->project_settings)
                ? normalize_project_settings($project_details->project_settings)
                : array();
            foreach ($project_permissions as $v_permissions) {
                $checked = false;
                if (!empty($project_details->project_settings)) {
                    if (in_array($v_permissions->settings, $get_permissions)) {
                        $checked = true;
                    }
                } else {
                    $checked = true;
                }
                $group = strpos((string) $v_permissions->settings, 'show_staff_') === 0 ? 'staff' : 'client';
                if ($group === 'staff') {
                    $staff_permission_count++;
                } else {
                    $client_permission_count++;
                }
                $permission_rows[] = array(
                    'id' => $v_permissions->settings_id,
                    'settings' => $v_permissions->settings,
                    'checked' => $checked,
                    'group' => $group,
                );
            }
            ?>
            <div class="rounded-2xl border border-slate-200 bg-slate-50/80 p-4 dark:border-slate-700 dark:bg-slate-800/50" data-project-settings-panel>
                <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                    <div>
                        <h4 class="text-sm font-semibold text-slate-900 dark:text-slate-100"><?= lang('permission') ?></h4>
                        <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Use the quick actions to manage all project visibility settings in one click.</p>
                    </div>
                    <div class="flex flex-wrap gap-2">
                        <button type="button" class="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-white px-3 py-2 text-xs font-semibold text-slate-700 transition hover:border-slate-400 hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800" data-settings-toggle="all">
                            <i data-lucide="check-check" class="h-4 w-4"></i>
                            <span>Select All</span>
                        </button>
                        <button type="button" class="inline-flex items-center gap-2 rounded-lg border border-indigo-200 bg-indigo-50 px-3 py-2 text-xs font-semibold text-indigo-700 transition hover:bg-indigo-100 dark:border-indigo-800/60 dark:bg-indigo-900/30 dark:text-indigo-300 dark:hover:bg-indigo-900/40" data-settings-toggle="staff">
                            <i data-lucide="users" class="h-4 w-4"></i>
                            <span>Staff Permission</span>
                        </button>
                        <button type="button" class="inline-flex items-center gap-2 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs font-semibold text-emerald-700 transition hover:bg-emerald-100 dark:border-emerald-800/60 dark:bg-emerald-900/30 dark:text-emerald-300 dark:hover:bg-emerald-900/40" data-settings-toggle="client">
                            <i data-lucide="briefcase-business" class="h-4 w-4"></i>
                            <span>Client Permission</span>
                        </button>
                    </div>
                </div>

                <div class="mt-4 grid grid-cols-1 gap-3 md:grid-cols-3">
                    <div class="rounded-xl border border-slate-200 bg-white px-4 py-3 dark:border-slate-700 dark:bg-slate-900">
                        <p class="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">Total Controls</p>
                        <p class="mt-1 text-lg font-semibold text-slate-900 dark:text-slate-100"><?= count($permission_rows) ?></p>
                    </div>
                    <div class="rounded-xl border border-indigo-200 bg-indigo-50 px-4 py-3 dark:border-indigo-800/60 dark:bg-indigo-900/30">
                        <p class="text-xs font-semibold uppercase tracking-wide text-indigo-600 dark:text-indigo-300">Staff Permissions</p>
                        <p class="mt-1 text-lg font-semibold text-indigo-700 dark:text-indigo-200"><?= $staff_permission_count ?></p>
                    </div>
                    <div class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 dark:border-emerald-800/60 dark:bg-emerald-900/30">
                        <p class="text-xs font-semibold uppercase tracking-wide text-emerald-600 dark:text-emerald-300">Client Permissions</p>
                        <p class="mt-1 text-lg font-semibold text-emerald-700 dark:text-emerald-200"><?= $client_permission_count ?></p>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3" data-project-settings-grid>
                <?php foreach ($permission_rows as $permission_row) : ?>
                    <?php
                    $is_staff = $permission_row['group'] === 'staff';
                    $card_classes = $is_staff
                        ? 'border-indigo-200 bg-indigo-50/60 dark:border-indigo-800/60 dark:bg-indigo-900/20'
                        : 'border-slate-200 bg-slate-50/60 dark:border-slate-800 dark:bg-slate-800/60';
                    $badge_classes = $is_staff
                        ? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/50 dark:text-indigo-300'
                        : 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300';
                    ?>
                    <label class="group flex items-start gap-3 rounded-xl border px-4 py-3 transition hover:shadow-sm <?= $card_classes ?>" data-setting-card data-setting-group="<?= html_escape($permission_row['group']) ?>">
                        <input
                            type="checkbox"
                            name="<?= $permission_row['id'] ?>"
                            value="<?= html_escape($permission_row['settings']) ?>"
                            class="mt-0.5 h-4 w-4 rounded border-slate-300 text-primary"
                            data-project-setting-checkbox
                            data-setting-group="<?= html_escape($permission_row['group']) ?>"
                            <?= $permission_row['checked'] ? 'checked' : '' ?>
                        >
                        <div class="min-w-0 flex-1">
                            <div class="flex items-center justify-between gap-3">
                                <span class="text-sm font-medium text-slate-700 dark:text-slate-200"><?= lang($permission_row['settings']) ?></span>
                                <span class="shrink-0 rounded-full px-2.5 py-1 text-[11px] font-semibold <?= $badge_classes ?>">
                                    <?= ucfirst($permission_row['group']) ?>
                                </span>
                            </div>
                            <p class="mt-1 text-xs text-slate-500 dark:text-slate-400"><?= html_escape(str_replace('_', ' ', $permission_row['settings'])) ?></p>
                        </div>
                    </label>
                <?php endforeach; ?>
            </div>

            <div class="flex justify-end">
                <button type="submit" class="inline-flex items-center rounded-lg bg-slate-900 px-4 py-2 text-sm font-semibold text-white hover:bg-slate-800 dark:bg-slate-600">
                    <?= lang('updates') ?>
                </button>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const panel = document.querySelector("[data-project-settings-panel]");
    if (!panel) {
        return;
    }

    const checkboxes = Array.from(document.querySelectorAll("[data-project-setting-checkbox]"));
    if (!checkboxes.length) {
        return;
    }

    const toggleButtons = Array.from(panel.querySelectorAll("[data-settings-toggle]"));

    const setCheckboxGroup = function (group) {
        const targets = group === "all"
            ? checkboxes
            : checkboxes.filter(function (checkbox) {
                return checkbox.dataset.settingGroup === group;
            });

        if (!targets.length) {
            return;
        }

        const shouldCheck = targets.some(function (checkbox) {
            return !checkbox.checked;
        });

        targets.forEach(function (checkbox) {
            checkbox.checked = shouldCheck;
        });
    };

    toggleButtons.forEach(function (button) {
        button.addEventListener("click", function () {
            const group = button.dataset.settingsToggle;
            setCheckboxGroup(group);
        });
    });
});
</script>
