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

<div class="max-w-3xl mx-auto">
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-bold"><?= Lang::get('add_item') ?></h1>
        <a href="<?= APP_URL ?>/subcollections/<?= $subcollection['id'] ?>" class="text-gray-500 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 text-sm transition-colors">
            &larr; <?= htmlspecialchars($subcollection['name']) ?>
        </a>
    </div>

    <form method="POST" action="<?= APP_URL ?>/items" enctype="multipart/form-data">
        <input type="hidden" name="csrf_token" value="<?= Session::getCsrfToken() ?>">
        <input type="hidden" name="subcollection_id" value="<?= $subcollection['id'] ?>">
        <input type="hidden" name="view" value="<?= htmlspecialchars($_GET['view'] ?? 'grid') ?>">

        <!-- Images -->
        <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('image_obverse') ?> / <?= Lang::get('image_reverse') ?></h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="image_obverse" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('image_obverse') ?></label>
                    <div class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-4 text-center hover:border-primary-400 dark:hover:border-primary-500 transition-colors cursor-pointer" onclick="document.getElementById('image_obverse').click()">
                        <img id="preview_obverse" src="<?= APP_URL ?>/images/placeholder-banknote.svg" class="opacity-50 w-full h-40 object-contain rounded-lg mb-2">
                        <div id="placeholder_obverse" class="hidden">
                            <p class="text-sm text-gray-500 dark:text-gray-400"><?= Lang::get('upload') ?> <?= Lang::get('image_obverse') ?></p>
                        </div>
                    </div>
                    <input type="file" id="image_obverse" name="image_obverse" accept="image/*" class="hidden" onchange="previewImage(this, 'preview_obverse', 'placeholder_obverse')">
                </div>
                <div>
                    <label for="image_reverse" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('image_reverse') ?></label>
                    <div class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-4 text-center hover:border-primary-400 dark:hover:border-primary-500 transition-colors cursor-pointer" onclick="document.getElementById('image_reverse').click()">
                        <img id="preview_reverse" src="<?= APP_URL ?>/images/placeholder-banknote.svg" class="opacity-50 w-full h-40 object-contain rounded-lg mb-2">
                        <div id="placeholder_reverse" class="hidden">
                            <p class="text-sm text-gray-500 dark:text-gray-400"><?= Lang::get('upload') ?> <?= Lang::get('image_reverse') ?></p>
                        </div>
                    </div>
                    <input type="file" id="image_reverse" name="image_reverse" accept="image/*" class="hidden" onchange="previewImage(this, 'preview_reverse', 'placeholder_reverse')">
                </div>
            </div>
        </div>

        <!-- Upload specimen, nultih, i ostalih varijacija -->
        <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('additional_images') ?></h2>
            <div id="dropZone" class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-8 text-center hover:border-primary-400 dark:hover:border-primary-500 transition-colors cursor-pointer">
                <svg class="w-12 h-12 mx-auto text-gray-400 dark:text-gray-500 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
                <p class="text-sm text-gray-500 dark:text-gray-400 mb-1"><?= Lang::get('drag_drop_images') ?></p>
                <p class="text-xs text-gray-400 dark:text-gray-500"><?= Lang::get('or_click_to_browse') ?></p>
            </div>
            <input type="file" id="additionalImagesInput" name="additional_images[]" accept="image/*" multiple class="hidden">
            <div id="additionalPreviews" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 mt-4"></div>
        </div>

        <!-- Numista Integration -->
        <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('numista_search') ?></h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                <div>
                    <label for="numista_country" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('country') ?></label>
                    <select id="numista_country" class="w-full px-4 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">
                        <option value="">-</option>
                    </select>
                </div>
                <div>
                    <label for="numista_year" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('year') ?></label>
                    <input type="text" id="numista_year" placeholder="<?= htmlspecialchars(Lang::get('numista_year_placeholder')) ?>" class="w-full px-4 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">
                </div>
                <div>
                    <label for="numista_value" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('value') ?></label>
                    <input type="text" id="numista_value" placeholder="<?= htmlspecialchars(Lang::get('numista_banknote_value_placeholder')) ?>" class="w-full px-4 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">
                </div>
            </div>
            <button type="button" id="searchNumista" data-type="banknote" class="btn-gradient btn-gradient-blue btn-gradient-icon">
                <?= Lang::get('search_numista') ?>
            </button>
            <div id="numistaResults" class="mt-4 hidden">
                <!-- Search results will appear here -->
            </div>
            <div id="numistaLoading" class="mt-4 hidden">
                <div class="flex items-center text-gray-500 dark:text-gray-400">
                    <svg class="animate-spin h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    <?= Lang::get('numista_search_loading') ?>
                </div>
            </div>
            <div id="numistaError" class="mt-4 hidden">
                <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 text-red-700 dark:text-red-300">
                    <p id="numistaErrorMessage"></p>
                </div>
            </div>
        </div>

        <!-- Details -->
        <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('item') ?></h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <div>
                    <label for="country" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('country') ?></label>
                    <input type="text" id="country" name="country"
                           class="w-full px-4 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">
                </div>
                <div>
                    <label for="nominal_value" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('nominal_value') ?></label>
                    <input type="text" id="nominal_value" name="nominal_value"
                           class="w-full px-4 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">
                </div>
                <div>
                    <label for="issue_date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('issue_date') ?></label>
                    <input type="text" id="issue_date" name="issue_date"
                           class="w-full px-4 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">
                </div>
                <div>
                    <label for="catalog_number" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('catalog_number') ?></label>
                    <input type="text" id="catalog_number" name="catalog_number"
                           class="w-full px-4 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">
                </div>
                <div>
                    <label for="dimensions" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('dimensions') ?></label>
                    <input type="text" id="dimensions" name="dimensions"
                           class="w-full px-4 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">
                </div>
                <div>
                    <label for="color" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('color') ?></label>
                    <input type="text" id="color" name="color"
                           class="w-full px-4 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">
                </div>
            </div>

            <div class="mt-4">
                <label for="description_obverse" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('description_obverse') ?></label>
                <textarea id="description_obverse" name="description_obverse" rows="3"
                          class="w-full px-4 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 resize-y"></textarea>
            </div>

            <div class="mt-4">
                <label for="description_reverse" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('description_reverse') ?></label>
                <textarea id="description_reverse" name="description_reverse" rows="3"
                          class="w-full px-4 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 resize-y"></textarea>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                <div>
                    <label for="additional_info" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('additional_info') ?></label>
                    <input type="text" id="additional_info" name="additional_info"
                           class="w-full px-4 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">
                </div>
                <div>
                    <label for="purchase_price" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('purchase_price') ?></label>
                    <input type="text" id="purchase_price" name="purchase_price"
                           class="w-full px-4 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">
                </div>
            </div>

            <div class="mt-4">
                <label for="note" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('note') ?></label>
                <textarea id="note" name="note" rows="3" placeholder="<?= Lang::get('note_placeholder') ?>"
                          class="w-full px-4 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 resize-y"></textarea>
            </div>
        </div>

        <!-- Variants -->
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-semibold"><?= Lang::get('variants') ?></h2>
                <button type="button" id="addVariantBtn" class="btn-gradient btn-gradient-blue btn-gradient-icon btn-gradient-sm">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
                    <?= Lang::get('add_variant') ?>
                </button>
            </div>
            <div id="variantsContainer">
                <div class="variant-row flex flex-wrap items-end gap-3 mb-3 p-3 bg-gray-50 dark:bg-gray-700/30 rounded-lg border border-gray-200 dark:border-gray-600">
                    <div class="flex-1 min-w-[140px]">
                        <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1"><?= Lang::get('condition') ?></label>
                        <select name="variant_condition[]" 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 text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none transition-colors">
                            <option value="">-</option>
                            <?php foreach ($conditionOptions as $co): ?>
                                <option value="<?= $co['id'] ?>"><?= htmlspecialchars($co['label']) ?><?= $co['description'] ? ' (' . htmlspecialchars($co['description']) . ')' : '' ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="flex-1 min-w-[140px]">
                        <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1"><?= Lang::get('variant_type') ?></label>
                        <select name="variant_type[]" 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 text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none transition-colors">
                            <option value="">-</option>
                            <?php foreach ($variantTypeOptions as $vt): ?>
                                <option value="<?= $vt['id'] ?>"><?= htmlspecialchars($vt['localized_label']) ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="flex-1 min-w-[140px]">
                        <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1"><?= Lang::get('additional_note') ?></label>
                        <input type="text" name="variant_note[]" 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 text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none transition-colors">
                    </div>
                    <div class="flex items-center gap-2">
                        <label class="flex items-center space-x-2 cursor-pointer">
                            <span class="text-xs font-medium text-gray-500 dark:text-gray-400"><?= Lang::get('owned') ?></span>
                            <div class="relative">
                                <input type="checkbox" name="variant_owned[0]" value="1" class="sr-only peer">
                                <div class="w-9 h-5 bg-gray-300 dark:bg-gray-600 rounded-full peer peer-checked:bg-green-500 transition-colors"></div>
                                <div class="absolute left-0.5 top-0.5 w-4 h-4 bg-white rounded-full shadow-sm peer-checked:translate-x-4 transition-transform"></div>
                            </div>
                        </label>
                        <button type="button" class="remove-variant-btn text-gray-400 hover:text-red-500 transition-colors hidden" title="<?= Lang::get('remove') ?>">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="flex space-x-3">
            <button type="submit" class="btn-gradient btn-gradient-blue btn-gradient-icon">
                <?= Lang::get('save') ?>
            </button>
            <a href="<?= APP_URL ?>/subcollections/<?= $subcollection['id'] ?>" class="btn-gradient btn-gradient-gray btn-gradient-icon">
                <?= Lang::get('cancel') ?>
            </a>
        </div>
    </form>
</div>

<?php $extraJs = ['items.js']; ?>
<?php require APP_ROOT . '/views/layouts/footer.php'; ?>
