<style type="text/css">
    .progress-bar-purple { background-color: #564aa3 !important }
</style>
<?= message_box('success'); ?>
<?= message_box('error'); ?>

<div class="space-y-6">
    <div class="rounded-2xl border border-border bg-card shadow-sm">        
        <div class="p-4">
            <div class="table-responsive">
                <table class="table table-striped DataTables" id="DataTables" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th><?= lang('subject') ?></th>
                            <th><?= lang('type') ?></th>
                            <th><?= lang('achievement') ?></th>
                            <th><?= lang('start_date') ?></th>
                            <th><?= lang('end_date') ?></th>
                            <th class="col-options no-sort text-right"><?= lang('action') ?></th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    list = base_url + "admin/goal_tracking/goal_trackingList";

    $(function() {
        $(document).on('click', '[data-goal-filter-action]', function() {
            var $item = $(this);
            var $dropdown = $item.closest('details');
            var filterBy = $item.data('goal-filter') || '';
            var selectedLabel = $item.data('goal-filter-label') || '<?= html_escape(lang('all')); ?>';

            $dropdown.find('[data-header-filter-item]').removeClass('bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300');
            $dropdown.find('[data-header-filter-item]').addClass('text-slate-700 hover:bg-slate-50 dark:text-slate-200 dark:hover:bg-slate-800');
            $item.addClass('bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300');
            $item.removeClass('text-slate-700 hover:bg-slate-50 dark:text-slate-200 dark:hover:bg-slate-800');
            $dropdown.find('[data-header-filter-selected]').text(selectedLabel);
            $dropdown.prop('open', false);

            list = base_url + "admin/goal_tracking/goal_trackingList" + (filterBy ? "/" + filterBy : "");
            if (typeof table_url !== "undefined") {
                table_url(list);
            } else if (typeof fire_datatable === 'function') {
                fire_datatable(list, 'DataTables');
            }
        });
    });
</script>
