<!DOCTYPE html>
<html lang="hr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kalkulator Aurashop.fn</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
</head>
<body class="bg-gray-50 text-gray-900">
    <nav class="fixed top-0 w-full bg-white/90 backdrop-blur-md shadow-md z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-3">
            <div class="flex justify-between items-center">
                <div class="text-2xl font-bold text-blue-600 flex items-center hover:scale-105 transition-transform">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2">
                        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                    </svg>
                    Aurashop.fn
                </div>
                <div class="hidden md:flex space-x-6">
                    <a href="/" class="text-blue-600 hover:text-blue-800 transition-colors">Početna</a>
                    <a href="/about" class="text-blue-600 hover:text-blue-800 transition-colors">O nama</a>
                    <a href="/usluge" class="text-blue-600 hover:text-blue-800 transition-colors">Usluge</a>
                    <a href="/contact" class="text-blue-600 hover:text-blue-800 transition-colors">Kontakt</a>
                    <a href="/convert" class="text-blue-600 hover:text-blue-800 transition-colors">Konverter</a>
                </div>
                <button class="md:hidden text-blue-600" id="mobile-menu-button">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-16 6h16"/>
                    </svg>
                </button>
            </div>
        </div>
    </nav>

    <div class="min-h-screen pt-24 bg-gradient-to-br from-blue-500 to-purple-600">
        <div class="container mx-auto px-4 py-8">
            <div class="grid md:grid-cols-2 gap-8">
                <!-- Converter Card -->
                <div class="bg-white p-8 rounded-xl shadow-lg animate__animated animate__fadeIn">
                    <h2 class="text-3xl font-bold mb-6 text-center text-blue-600">Kalkulator Valuta</h2>
                    
                    <form id="conversionForm" class="space-y-4">
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block mb-2 text-gray-700">Iz Valute:</label>
                                <select id="fromCurrency" class="w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none">
                                    <option value="EUR" selected>Euro (EUR)</option>
                                    <option value="USD">Dollar (USD)</option>
                                    <option value="BAM">Marka (BAM)</option>
                                    <option value="HRK">Kuna (HRK)</option>
                                </select>
                            </div>
                            <div>
                                <label class="block mb-2 text-gray-700">U Valutu:</label>
                                <select id="toCurrency" class="w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none">
                                    <option value="BAM">Marka (BAM)</option>
                                    <option value="HRK">Kuna (HRK)</option>
                                    <option value="RSD">Dinar (RSD)</option>
                                    <option value="USD">Dollar (USD)</option>
                                </select>
                            </div>
                        </div>
                        
                        <div>
                            <label class="block mb-2 text-gray-700">Iznos:</label>
                            <input type="number" id="amountInput" min="0" step="0.01" required 
                                   class="w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none"
                                   placeholder="Unesite iznos">
                        </div>
                        
                        <button type="submit" 
                                class="w-full bg-blue-600 text-white py-3 rounded-md hover:bg-blue-700 transition duration-300 ease-in-out transform hover:scale-105">
                            Izračunaj
                        </button>
                    </form>
                    
                    <div id="resultContainer" class="mt-4 p-4 bg-green-50 rounded-md hidden">
                        <p id="resultText" class="text-green-800 font-semibold text-center"></p>
                    </div>
                </div>

                <!-- Rate Overview Card -->
                <div class="bg-white p-8 rounded-xl shadow-lg animate__animated animate__fadeIn">
                    <h2 class="text-3xl font-bold mb-6 text-center text-blue-600">Trenutni Tečaj</h2>
                    <div class="space-y-4">
                        <div class="grid grid-cols-2 gap-4">
                            <div class="p-4 bg-blue-50 rounded-lg">
                                <p class="text-sm text-blue-600 font-semibold">EUR → USD</p>
                                <p class="text-2xl font-bold text-blue-800">1.08</p>
                            </div>
                            <div class="p-4 bg-blue-50 rounded-lg">
                                <p class="text-sm text-blue-600 font-semibold">EUR → BAM</p>
                                <p class="text-2xl font-bold text-blue-800">1.96</p>
                            </div>
                            <div class="p-4 bg-blue-50 rounded-lg">
                                <p class="text-sm text-blue-600 font-semibold">EUR → HRK</p>
                                <p class="text-2xl font-bold text-blue-800">7.54</p>
                            </div>
                            <div class="p-4 bg-blue-50 rounded-lg">
                                <p class="text-sm text-blue-600 font-semibold">EUR → RSD</p>
                                <p class="text-2xl font-bold text-blue-800">117.50</p>
                            </div>
                        </div>
                        <div class="mt-6">
                            <p class="text-sm text-gray-600 text-center">Updata se automatski svakih 12h</p>
                        </div>
                    </div>
                </div>
            </div>

        
            <div class="grid md:grid-cols-2 gap-8 mt-8">
                <div class="bg-white p-6 rounded-xl shadow-lg">
                    <h3 class="text-xl font-bold mb-4 text-blue-600">Brze Konverzije</h3>
                    <div class="grid grid-cols-2 gap-4" id="quickConversions">
                       
                        <button class="p-3 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors text-left">
                            <span class="block text-sm text-blue-600">15 EUR → RSD</span>
                            <span class="block text-lg font-bold text-blue-800">1762.50 RSD</span>
                        </button>
                        <button class="p-3 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors text-left">
                            <span class="block text-sm text-blue-600">15 EUR → BAM</span>
                            <span class="block text-lg font-bold text-blue-800">29.40 BAM</span>
                        </button>
                        <button class="p-3 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors text-left">
                            <span class="block text-sm text-blue-600">15 EUR → HRK</span>
                            <span class="block text-lg font-bold text-blue-800">113.10 HRK</span>
                        </button>
                        <button class="p-3 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors text-left">
                            <span class="block text-sm text-blue-600">20 EUR → RSD</span>
                            <span class="block text-lg font-bold text-blue-800">2350.00 RSD</span>
                        </button>
                    </div>
                </div>

                <div class="bg-white p-6 rounded-xl shadow-lg">
                    <h3 class="text-xl font-bold mb-4 text-blue-600">Kalkulator Napojnice</h3>
                    <div class="space-y-4">
                        <input type="number" id="billAmount" placeholder="Iznos računa" 
                               class="w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none">
                        <select id="tipPercentage" class="w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none">
                            <option value="10">10% Napojnice</option>
                            <option value="15">15% Napojnice</option>
                            <option value="20">20% Napojnice</option>
                        </select>
                        <div id="tipResult" class="text-center font-semibold text-blue-600 p-4 bg-blue-50 rounded-lg"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="bg-gray-900 text-white py-12">
        <div class="container mx-auto px-4 text-center">
            © 2024 Aurashop.fn 
        </div>
    </footer>

    <script>
   
        document.getElementById('mobile-menu-button').addEventListener('click', () => {
            const nav = document.querySelector('.md\\:flex');
            nav.classList.toggle('hidden');
        });

        document.getElementById('conversionForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const amount = document.getElementById('amountInput').value;
            const targetCurrency = document.getElementById('toCurrency').value;
            
            const resultContainer = document.getElementById('resultContainer');
            const resultText = document.getElementById('resultText');

            try {
                const response = await fetch('/api/convert', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ amount, targetCurrency })
                });

                const data = await response.json();
                resultText.textContent = `${amount} EUR = ${data.convertedAmount} ${targetCurrency}`;
                resultContainer.classList.remove('hidden');
                resultContainer.classList.remove('bg-red-50');
                resultContainer.classList.add('bg-green-50');
            } catch (error) {
                resultText.textContent = 'Greška prilikom konverzije';
                resultContainer.classList.remove('hidden');
                resultContainer.classList.remove('bg-green-50');
                resultContainer.classList.add('bg-red-50');
            }
        });

        document.getElementById('billAmount').addEventListener('input', calculateTip);
        document.getElementById('tipPercentage').addEventListener('change', calculateTip);

        function calculateTip() {
            const billAmount = parseFloat(document.getElementById('billAmount').value) || 0;
            const tipPercentage = parseFloat(document.getElementById('tipPercentage').value) || 0;
            const tipAmount = billAmount * (tipPercentage / 100);
            const totalAmount = billAmount + tipAmount;
            
            document.getElementById('tipResult').textContent = 
                `Napojnica: ${tipAmount.toFixed(2)}€ | Ukupno: ${totalAmount.toFixed(2)}€`;
        }
    </script>
</body>
</html>