<?php $pageTitle = Lang::get('add_coin') . ' - ' . 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_coin') ?></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 ?>/coins" 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-coin.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-coin.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>

        <!-- Additional 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('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="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-4">
                <p class="text-sm text-blue-700 dark:text-blue-300">
                    <?= Lang::get('numista_disclaimer') ?>
                </p>
            </div>
            <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_coin_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="coin" 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>

        <!-- Osnovni podaci -->
        <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('basic_data') ?></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="year_minted" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('year_minted') ?></label>
                    <input type="text" id="year_minted" name="year_minted"
                           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="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>
        </div>

        <!-- Tehnički podaci -->
        <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('technical_data') ?></h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <div>
                    <label for="material" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('material') ?></label>
                    <select id="material" name="material" onchange="toggleAlloyField(this.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">
                        <option value="">-</option>
                        <option value="copper"><?= Lang::get('material_copper') ?></option>
                        <option value="silver"><?= Lang::get('material_silver') ?></option>
                        <option value="gold"><?= Lang::get('material_gold') ?></option>
                        <option value="brass"><?= Lang::get('material_brass') ?></option>
                        <option value="aluminum"><?= Lang::get('material_aluminum') ?></option>
                        <option value="alloy"><?= Lang::get('material_alloy') ?></option>
                    </select>
                </div>
                <div id="alloyDetailsContainer" class="hidden">
                    <label for="alloy_details" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('alloy_details') ?></label>
                    <input type="text" id="alloy_details" name="alloy_details"
                           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="weight" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('weight') ?> (g)</label>
                    <input type="number" id="weight" name="weight" step="0.001" min="0"
                           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="diameter" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('diameter') ?> (mm)</label>
                    <input type="number" id="diameter" name="diameter" step="0.001" min="0"
                           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="thickness" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('thickness') ?> (mm)</label>
                    <input type="number" id="thickness" name="thickness" step="0.001" min="0"
                           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="orientation" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('orientation') ?></label>
                    <select id="orientation" name="orientation"
                            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>
                        <option value="medal"><?= Lang::get('orientation_medal') ?></option>
                        <option value="coin"><?= Lang::get('orientation_coin') ?></option>
                    </select>
                </div>
                <div>
                    <label for="mintage" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('mintage') ?></label>
                    <input type="number" id="mintage" name="mintage" min="0"
                           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>

        <!-- Dizajn -->
        <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('design') ?></h2>
            <div class="space-y-4">
                <div>
                    <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>
                    <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>
                    <label for="legends" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('legends') ?></label>
                    <textarea id="legends" name="legends" 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>
        </div>

        <!-- Numizmatički podaci -->
        <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('numismatic_data') ?></h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label for="condition_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('gradation') ?></label>
                    <select id="condition_id" name="condition_id"
                            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>
                        <?php foreach ($conditionOptions as $co): ?>
                            <option value="<?= $co['id'] ?>"><?= htmlspecialchars($co['label']) ?><?= $co['description'] ? ' (' . htmlspecialchars($co['description']) . ')' : '' ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <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 class="flex items-center">
                    <label class="flex items-center space-x-2 cursor-pointer">
                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300"><?= Lang::get('owned') ?></span>
                        <div class="relative">
                            <input type="checkbox" name="owned" value="1" class="sr-only peer">
                            <div class="w-11 h-6 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-5 h-5 bg-white rounded-full transition-transform peer-checked:translate-x-5"></div>
                        </div>
                    </label>
                </div>
            </div>
        </div>

        <!-- Dodatno -->
        <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') ?></h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label for="origin" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('origin') ?></label>
                    <input type="text" id="origin" name="origin"
                           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>
                    <label for="current_value" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"><?= Lang::get('current_value') ?></label>
                    <input type="text" id="current_value" name="current_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>
            <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>

        <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 = ['coins.js']; ?>
<?php require APP_ROOT . '/views/layouts/footer.php'; ?>
