<?php echo message_box('success'); ?>
<?php echo message_box('error'); ?>
<?php $realtime_notification = config_item('realtime_notification'); ?>
<?php $desktop_notifications = config_item('desktop_notifications'); ?>

<div class="rounded-2xl">
    <div class="grid grid-cols-12 gap-6">
        <?php echo form_open(base_url('admin/settings/set_noticifation'), array('id' => 'form', 'class' => 'p-0 space-y-6 lg:col-span-7', 'role' => 'form')); ?>

        <div class="grid grid-cols-1 gap-4">
            <?= form_input_group('pusher_app_id', lang('pusher_app_id'), config_item('pusher_app_id'), 'text', false); ?>
            <?= form_input_group('pusher_app_key', lang('pusher_app_key'), config_item('pusher_app_key'), 'text', false); ?>
            <?= form_input_group('pusher_app_secret', lang('pusher_app_secret'), config_item('pusher_app_secret'), 'text', false); ?>
            <?= form_input_group('pusher_cluster', lang('pusher_cluster'), config_item('pusher_cluster'), 'text', false); ?>

            <div class="space-y-2">
                <?php
                $auto_attrs = array(
                    'class' => 'auto_check_for_new_notifications',
                    'min' => '1',
                );
                if ($realtime_notification == 1) {
                    $auto_attrs['disabled'] = 'disabled';
                }
                echo form_input_group('auto_check_for_new_notifications', lang('auto_check_for_new_notifications'), config_item('auto_check_for_new_notifications'), 'number', false, $auto_attrs);
                ?>
                <p class="text-xs text-muted-foreground"><?= lang('auto_check_for_new_notifications_help') ?></p>
            </div>
        </div>

        <div class="space-y-3">
            <?= form_checkbox('desktop_notifications', lang('desktop_notifications'), !empty($desktop_notifications) && $desktop_notifications == 1, false, array('value' => 1)); ?>
            <?= form_checkbox('realtime_notification', lang('realtime_notification'), !empty($realtime_notification) && $realtime_notification == 1, false, array('id' => 'realtime_notification', 'value' => 1)); ?>
        </div>

        <div class="flex items-center justify-start gap-2">
            <button type="submit" id="sbtn" class="btn btn-sm btn-primary"><?= lang('update') ?></button>
        </div>

        <?php echo form_close(); ?>

        <div class="p-6 rounded-xl lg:col-span-5 border border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50 text-sm text-slate-600 dark:text-slate-300">
            <p class="font-semibold text-slate-800 dark:text-slate-100 mb-2">Notification Settings</p>
            <p class="mb-2">Go to <a class="text-blue-600 hover:underline" href="https://pusher.com/">pusher.com</a> after signup, create an app and follow the details.</p>
            <div class="space-y-2">
                <p><strong>Name your App</strong> – ex ultimate-pro</p>
                <p><strong>Select a Cluster</strong> – By default pusher.com will select your cluster. You can change it if needed. Read more: <a class="text-blue-600 hover:underline" href="https://pusher.com/docs/clusters">https://pusher.com/docs/clusters</a></p>
                <p><strong>Front-end tech</strong> – Select jQuery</p>
                <p><strong>Back-end tech</strong> – Select PHP</p>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    (function () {
        var realtimeToggle = document.getElementById('realtime_notification');
        var autoInput = document.querySelector('.auto_check_for_new_notifications');
        if (!realtimeToggle || !autoInput) {
            return;
        }

        var syncAutoCheck = function () {
            if (realtimeToggle.checked) {
                autoInput.setAttribute('disabled', 'disabled');
            } else {
                autoInput.removeAttribute('disabled');
            }
        };

        realtimeToggle.addEventListener('change', syncAutoCheck);
        syncAutoCheck();
    })();
</script>
