<?php $pageTitle = Lang::get('variant_type_options') . ' - ' . Lang::get('app_name'); ?>
<?php require APP_ROOT . '/views/layouts/header.php'; ?>

<div class="mb-6">
    <div class="flex items-center justify-between">
        <h1 class="text-2xl font-bold"><?= Lang::get('variant_type_options') ?></h1>
        <a href="<?= APP_URL ?>/admin" class="text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 text-sm transition-colors">
            &larr; <?= Lang::get('back') ?>
        </a>
    </div>
</div>

<!-- Add new option -->
<div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
    <h2 class="text-lg font-semibold mb-4"><?= Lang::get('add_option') ?></h2>
    <form method="POST" action="<?= APP_URL ?>/admin/variant-type-options">
        <input type="hidden" name="csrf_token" value="<?= Session::getCsrfToken() ?>">
        
        <!-- Language translations grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 mb-4">
            <?php
            $languages = [
                'en' => 'ENG',
                'sr' => 'SRP',
                'de' => 'DEU',
                'es' => 'ESP',
                'fr' => 'FRA',
                'it' => 'ITA',
                'pt' => 'POR',
                'nl' => 'NLD',
                'pl' => 'POL',
                'ru' => 'RUS',
                'tr' => 'TUR',
                'cs' => 'CES',
                'el' => 'ELL',
                'hu' => 'HUN',
                'ro' => 'RON',
                'sv' => 'SWE',
                'no' => 'NOR',
                'jp' => 'JPN',
                'cn' => 'ZHO',
                'il' => 'HEB'
            ];
            foreach ($languages as $code => $label): ?>
                <div>
                    <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1"><?= $label ?></label>
                    <input type="text" name="label_<?= $code ?>" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none transition-colors text-sm" placeholder="<?= $code === 'en' ? 'Required' : '' ?>" <?= $code === 'en' ? 'required' : '' ?>>
                </div>
            <?php endforeach; ?>
        </div>
        
        <div class="flex items-end gap-4">
            <div class="w-24">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"><?= Lang::get('sort_order') ?></label>
                <input type="number" name="sort_order" value="0" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none transition-colors text-sm">
            </div>
            <button type="submit" class="btn-gradient btn-gradient-blue btn-gradient-sm"><?= Lang::get('add') ?></button>
        </div>
    </form>
</div>

<!-- Existing options -->
<div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
    <div class="p-4 bg-gray-50 dark:bg-gray-700/50 border-b border-gray-200 dark:border-gray-700">
        <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300"><?= Lang::get('existing_options') ?></h3>
    </div>
    <div class="divide-y divide-gray-200 dark:divide-gray-700">
        <?php foreach ($options as $opt): ?>
        <div class="p-4">
            <form method="POST" action="<?= APP_URL ?>/admin/variant-type-options/<?= $opt['id'] ?>">
                <input type="hidden" name="csrf_token" value="<?= Session::getCsrfToken() ?>">
                
                <!-- Language translations grid -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 mb-4">
                    <?php foreach ($languages as $code => $label): ?>
                        <div>
                            <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1"><?= $label ?></label>
                            <input type="text" name="label_<?= $code ?>" value="<?= htmlspecialchars($opt['label_' . $code] ?? '') ?>" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none transition-colors text-sm">
                        </div>
                    <?php endforeach; ?>
                </div>
                
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-4">
                        <div class="w-24">
                            <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1"><?= Lang::get('sort_order') ?></label>
                            <input type="number" name="sort_order" value="<?= $opt['sort_order'] ?>" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none transition-colors text-sm">
                        </div>
                    </div>
                    <div class="flex items-center gap-2">
                        <button type="submit" class="btn-gradient btn-gradient-blue btn-gradient-sm"><?= Lang::get('save') ?></button>
                        <a href="javascript:void(0)" onclick="confirmDelete('<?= Lang::get('confirm_delete') ?>', function(){ window.location.href='<?= APP_URL ?>/admin/variant-type-options/<?= $opt['id'] ?>/delete'; })" class="btn-gradient btn-gradient-red btn-gradient-sm"><?= Lang::get('delete') ?></a>
                    </div>
                </div>
            </form>
        </div>
        <?php endforeach; ?>
    </div>
</div>

<?php require APP_ROOT . '/views/layouts/footer.php'; ?>
