<?php echo message_box('success'); ?>
<?php echo message_box('error');
$edited = can_action('137', 'edited');
$deleted = can_action('137', 'deleted');

?>

<?php if (!empty($active_language)) : ?>

    <div class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900/40">
        <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 dark:border-slate-700 p-4">
            <h2 class="text-base font-semibold text-slate-800 dark:text-slate-100"><?= lang('translations') ?></h2>
            <form action="<?php echo base_url() ?>admin/settings/add_language" method="post" class="flex flex-wrap items-center gap-2">
                <select class="h-9 rounded-lg border border-border bg-input px-3 text-sm" name="language">
                    <?php if (!empty($availabe_language)) : foreach ($availabe_language as $v_availabe_language) : ?>
                        <option value="<?= str_replace(" ", "_", $v_availabe_language->name) ?>">
                            <?= ucwords($v_availabe_language->name) ?></option>
                    <?php endforeach; ?>
                    <?php endif; ?>
                </select>
                <button type="submit" id="add-translation" class="btn btn-sm btn-primary"><?= lang('add_translation') ?></button>
            </form>
        </div>
        <div class="p-4">
            <div class="overflow-x-auto">
                <table id="datatable_action" class="min-w-full text-sm">
                    <thead>
                    <tr class="text-left text-xs uppercase tracking-wide text-slate-500">
                        <th class="py-2 pr-4"><?= lang('icon') ?></th>
                        <th class="py-2 pr-4"><?= lang('language') ?></th>
                        <th class="py-2 pr-4"><?= lang('progress') ?></th>
                        <th class="py-2 pr-4"><?= lang('done') ?></th>
                        <th class="py-2 pr-4"><?= lang('total') ?></th>
                        <?php if (!empty($edited)) { ?>
                            <th class="py-2"><?= lang('action') ?></th>
                        <?php } ?>
                    </tr>
                    </thead>
                    <tbody>
                    <?php
                    if (!empty($active_language)) :
                        foreach ($active_language as $v_language) :
                            $st = $translation_stats;
                            $total_data = $st[$v_language->name]['total'];
                            $translated_data = $st[$v_language->name]['translated'];
                            
                            $view_status = intval(($translated_data / $total_data) * 1000) / 10;
                            ?>
                            <tr class="border-t border-slate-200 dark:border-slate-700">
                                <td class="py-3 pr-4"><img class="h-5 w-5 rounded-sm" src="<?= base_url('asset/images/flags/' . $v_language->icon) ?>.gif"/>
                                </td>
                                <td class="py-3 pr-4"><a class="text-blue-600 hover:underline"
                                            href="<?= base_url() ?>admin/settings/translations/<?= $v_language->name ?>"><?= ucwords(str_replace("_", " ", $v_language->name)) ?></a>
                                </td>
                                <td class="py-3 pr-4">
                                    <div class="w-full rounded-full bg-slate-100 dark:bg-slate-800">
                                        <?php
                                        $status = 'danger';
                                        if ($view_status > 20) {
                                            $status = 'warning';
                                        }
                                        if ($view_status > 50) {
                                            $status = 'primary';
                                        }
                                        if ($view_status > 80) {
                                            $status = 'success';
                                        }
                                        ?>
                                        <div class="h-2 rounded-full bg-<?= $status == 'success' ? 'emerald' : ($status == 'primary' ? 'blue' : ($status == 'warning' ? 'amber' : 'rose')) ?>-500" role="progressbar"
                                             aria-valuenow="<?= $view_status ?>" aria-valuemin="0" aria-valuemax="100"
                                             style="width: <?= $view_status ?>%;">
                                        </div>
                                    </div>
                                    <div class="mt-1 text-xs text-slate-500">
                                            <?= $view_status ?>%
                                    </div>
                                </td>
                                <td class="py-3 pr-4"><?= $translated_data ?></td>
                                <td class="py-3 pr-4"><?= $total_data ?></td>
                                <?php
                                if ($v_language->active == 1) {
                                    $status = 1;
                                } else {
                                    $status = 0;
                                }
                                ?>
                                <td class="py-3">
                                    <?php if (!empty($edited)) { ?>
                                        <a title="<?= ($v_language->active == 1 ? lang('deactivate') : lang('activate')) ?>"
                                           class="btn btn-xs <?= ($v_language->active == 0 ? 'btn-default' : 'btn-success') ?>"
                                           href="<?= base_url() ?>admin/settings/translations_status/<?= $v_language->name ?>/<?= ($v_language->active == 1 ? 0 : 1) ?>"><i
                                                    data-lucide="check" class="h-4 w-4"></i></a>
                                        <a title="<?= lang('edit') ?>" class="btn btn-xs btn-primary"
                                           href="<?= base_url() ?>admin/settings/translations/<?= $v_language->name ?>"><i
                                                    data-lucide="square-pen" class="h-4 w-4"></i></a><?php } ?>
                                </td>
                            </tr>
                        <?php
                        endforeach;
                        ?>
                    <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
<?php elseif (!empty($language_files)) : ?>
    <section class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900/40">
        <header class="flex items-center justify-between border-b border-slate-200 dark:border-slate-700 p-4 text-base font-semibold text-slate-800 dark:text-slate-100">
            <span><i data-lucide="settings"></i><?= lang('translations') ?> - <?= ucwords($language) ?></span>
        </header>
        <div class="p-4 overflow-x-auto">
            <table id="table-translations-files" class="min-w-full text-sm">
                <thead>
                <tr class="text-left text-xs uppercase tracking-wide text-slate-500">
                    <th class="py-2 pr-4"><?= lang('type') ?></th>
                    <th class="py-2 pr-4"><?= lang('file') ?></th>
                    <th class="py-2 pr-4"><?= lang('progress') ?></th>
                    <th class="py-2 pr-4"><?= lang('done') ?></th>
                    <th class="py-2 pr-4"><?= lang('total') ?></th>
                    <th class="py-2"><?= lang('options') ?></th>
                </tr>
                </thead>
                <tbody>
                <?php foreach ($language_files as $file => $altpath) :
                    $shortfile = str_replace("_lang.php", "", $file);
                    $st = $translation_stats[$language]['files'][$shortfile];
                    $fn = ucwords(str_replace("_", " ", $shortfile));
                    $total = $st['total'];
                    $translated = $st['translated'];
                    $pc = intval(($translated / $total) * 1000) / 10;
                    ?>
                    <tr class="border-t border-slate-200 dark:border-slate-700">
                        <td class="py-3 pr-4"><?= ($altpath == './system/' ? 'System' : 'Application') ?></td>
                        <td class="py-3 pr-4"><a class="text-blue-600 hover:underline"
                                    href="<?= base_url() ?>admin/settings/edit_translations/<?= $language ?>/<?= $shortfile ?>"><?= $fn ?></a>
                        </td>
                        <td class="py-3 pr-4">
                            <div class="w-full rounded-full bg-slate-100 dark:bg-slate-800">
                                <?php $bar = 'danger';
                                if ($pc > 20) {
                                    $bar = 'warning';
                                }
                                if ($pc > 50) {
                                    $bar = 'primary';
                                }
                                if ($pc > 80) {
                                    $bar = 'success';
                                } ?>
                                <div class="h-2 rounded-full bg-<?= $bar == 'success' ? 'emerald' : ($bar == 'primary' ? 'blue' : ($bar == 'warning' ? 'amber' : 'rose')) ?>-500" role="progressbar"
                                     aria-valuenow="<?= $pc ?>" aria-valuemin="0" aria-valuemax="100"
                                     style="width: <?= $pc ?>%;"></div>
                            </div>
                            <div class="mt-1 text-xs text-slate-500"><?= $pc ?>%</div>
                        </td>
                        <td class="py-3 pr-4"><?= $translated ?></td>
                        <td class="py-3 pr-4"><?= $total ?></td>
                        <td class="py-3">
                            <a class="btn btn-xs btn-default"
                               href="<?= base_url() ?>admin/settings/edit_translations/<?= $language ?>/<?= $shortfile ?>"><i
                                        data-lucide="square-pen" class="h-4 w-4"></i></a>
                        </td>
                    </tr>
                <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </section>
<?php elseif (!empty($current_languages)) : ?>
    <?php $attributes = array('class' => 'p-6 space-y-6', 'id' => 'form-strings');
    echo form_open_multipart('admin/settings/set_translations/' . $current_languages . '/' . $active_language_files, $attributes); ?>
    <input type="hidden" name="_language" value="<?= $current_languages ?>">
    <input type="hidden" name="_file" value="<?= $active_language_files ?>">
    
    <section class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900/40">
        <header class="flex flex-wrap items-center justify-between gap-2 border-b border-slate-200 dark:border-slate-700 p-4 text-base font-semibold text-slate-800 dark:text-slate-100">
            <span><i data-lucide="settings"></i>
            <?php
            $fn = ucwords(str_replace("_", " ", $active_language_files));
            $total = count(array($english));
            $translated = 0;
            if ($language == 'english') {
                $percent = 100;
            } else {
                foreach ($english as $key => $value) {
                    if (isset($translation[$key]) && $translation[$key] != $value) {
                        $translated++;
                    }
                }
                $percent = intval(($translated / $total) * 100);
            }
            ?>
            <?= lang('translations') ?> | <a class="text-rose-600 hover:underline"
                                             href="<?= base_url() ?>admin/settings/translations/<?= $current_languages ?>"><?= ucwords(str_replace("_", " ", $current_languages)) ?></a>
            | <?= $percent ?>% <?= mb_strtolower(lang('done')) ?>
            </span>
            <button type="submit" id="save-translation"
                    class="btn btn-xs btn-primary"><?= lang('save_translation') ?></button>
        </header>
        <div class="p-4 overflow-x-auto">
            <table id="table-strings" class="min-w-full text-sm">
                <thead>
                <tr class="text-left text-xs uppercase tracking-wide text-slate-500">
                    <th class="py-2 pr-4">English</th>
                    <th class="py-2 pr-4"><?= ucwords(str_replace("_", " ", $language)) ?></th>
                </tr>
                </thead>
                <tbody>
                <?php
                foreach ($english as $key => $value) : ?>
                    <tr class="border-t border-slate-200 dark:border-slate-700">
                        <td class="py-2 pr-4 text-slate-700 dark:text-slate-200"><?= $value ?></td>
                        <td class="py-2 pr-4">
                            <input class="w-full rounded-lg border border-border bg-input px-3 py-2 text-sm" type="text"
                                   value="<?= (isset($translation[$key]) ? $translation[$key] : $value) ?>"
                                   name="hello[<?= $key ?>]"/>
                        </td>
                    </tr>
                <?php endforeach; ?>
                </tbody>
            </table>
        </div>
        
        <!-- End details -->
    </section>
    </form>
<?php endif; ?>
<script type="text/javascript">
    (function () {
        var saveButton = document.getElementById('save-translation');
        if (!saveButton) {
            return;
        }
        saveButton.addEventListener('click', function () {
            saveButton.classList.add('opacity-75');
        });
    })();
</script>

