@extends('layouts.app')

@section('title', 'Para Birimi Çarpanları')

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <div class="sm:flex sm:items-center">
        <div class="sm:flex-auto">
            <h1 class="text-3xl font-semibold text-gray-900 dark:text-gray-100">Para Birimi Çarpanları</h1>
            <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">
                Her para birimi için global çarpan ayarlayın. Bu çarpan tüm sitelerde o para birimini kullanan siteler için geçerli olacaktır.
            </p>
        </div>
        <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
            <a href="{{ route('settings.index') }}" class="inline-flex items-center gap-2 rounded-md bg-gray-600 dark:bg-gray-500 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 dark:hover:bg-gray-400 transition">
                <i class="fas fa-arrow-left"></i>
                Ayarlara Dön
            </a>
        </div>
    </div>

    <!-- Info Card -->
    <div class="mt-6 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fas fa-info-circle text-blue-400 dark:text-blue-300"></i>
            </div>
            <div class="ml-3">
                <p class="text-sm text-blue-800 dark:text-blue-300">
                    <strong>Nasıl Çalışır?</strong> Para birimi çarpanı, fiyat hesaplamasında kullanılır. 
                    Formül: <code class="bg-blue-100 dark:bg-blue-800 px-2 py-1 rounded">(EUR Fiyatı × Kur) × Para Birimi Çarpanı × Site Çarpanı</code>
                </p>
            </div>
        </div>
    </div>

    <!-- Add New Currency Multiplier Form -->
    <div class="mt-6 bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
        <div class="px-4 py-5 sm:p-6 border-b border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
                <i class="fas fa-plus-circle text-indigo-600 dark:text-indigo-400 mr-2"></i>
                Yeni Para Birimi Çarpanı Ekle
            </h3>
            <form id="addMultiplierForm" class="space-y-4">
                @csrf
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label for="currency" class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">
                            Para Birimi <span class="text-red-500">*</span>
                        </label>
                        <select 
                            id="currency" 
                            name="currency" 
                            required
                            class="block w-full px-4 py-3 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all">
                            <option value="">Para Birimi Seçin...</option>
                            @foreach($commonCurrencies as $code => $name)
                            <option value="{{ $code }}">{{ $code }} - {{ $name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label for="multiplier" class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">
                            Çarpan <span class="text-red-500">*</span>
                        </label>
                        <input 
                            type="number" 
                            id="multiplier" 
                            name="multiplier" 
                            step="0.0001" 
                            min="0.0001" 
                            max="10.0000" 
                            value="1.0000"
                            required
                            class="block w-full px-4 py-3 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all placeholder-gray-400 dark:placeholder-gray-500"
                            placeholder="1.0000">
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Örn: 1.05 = %5 ek maliyet</p>
                    </div>
                    <div>
                        <label for="description" class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">
                            Açıklama
                        </label>
                        <input 
                            type="text" 
                            id="description" 
                            name="description" 
                            class="block w-full px-4 py-3 text-sm text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 dark:focus:border-indigo-400 transition-all placeholder-gray-400 dark:placeholder-gray-500"
                            placeholder="Opsiyonel açıklama">
                    </div>
                </div>
                <div class="flex justify-end">
                    <button 
                        type="submit" 
                        class="inline-flex items-center justify-center rounded-lg border border-transparent shadow-sm px-5 py-2.5 bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-700 dark:to-purple-700 text-sm font-semibold text-white hover:from-indigo-700 hover:to-purple-700 dark:hover:from-indigo-600 dark:hover:to-purple-600 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800 focus:ring-indigo-500 dark:focus:ring-indigo-400 transition-all">
                        <i class="fas fa-save mr-2"></i>
                        Kaydet
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Existing Multipliers List -->
    <div class="mt-6 bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
        <div class="px-4 py-5 sm:p-6">
            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
                <i class="fas fa-list text-indigo-600 dark:text-indigo-400 mr-2"></i>
                Mevcut Para Birimi Çarpanları
            </h3>
            
            @if($multipliers->isEmpty())
            <div class="text-center py-12">
                <i class="fas fa-inbox text-gray-400 dark:text-gray-500 text-4xl mb-4"></i>
                <p class="text-gray-500 dark:text-gray-400">Henüz para birimi çarpanı eklenmemiş.</p>
            </div>
            @else
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                    <thead class="bg-gray-50 dark:bg-gray-700">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                Para Birimi
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                Çarpan
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                Açıklama
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                Güncellenme
                            </th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                İşlemler
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                        @foreach($multipliers as $multiplier)
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold bg-indigo-100 dark:bg-indigo-900/30 text-indigo-800 dark:text-indigo-300">
                                        {{ $multiplier->currency }}
                                    </span>
                                    @if(isset($commonCurrencies[$multiplier->currency]))
                                    <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">
                                        {{ $commonCurrencies[$multiplier->currency] }}
                                    </span>
                                    @endif
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">
                                    {{ number_format((float)$multiplier->multiplier, 4) }}
                                </span>
                                @if((float)$multiplier->multiplier != 1.0)
                                <span class="ml-2 text-xs text-gray-500 dark:text-gray-400">
                                    ({{ ((float)$multiplier->multiplier - 1) * 100 > 0 ? '+' : '' }}{{ number_format(((float)$multiplier->multiplier - 1) * 100, 2) }}%)
                                </span>
                                @endif
                            </td>
                            <td class="px-6 py-4">
                                <span class="text-sm text-gray-500 dark:text-gray-400">
                                    {{ $multiplier->description ?? '-' }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                                {{ $multiplier->updated_at->format('d.m.Y H:i') }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <button 
                                    onclick="deleteMultiplier('{{ $multiplier->currency }}')"
                                    class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 transition-colors">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @endif
        </div>
    </div>
</div>

@push('scripts')
<script>
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');

// Form submit
document.getElementById('addMultiplierForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const data = {
        currency: formData.get('currency'),
        multiplier: parseFloat(formData.get('multiplier')),
        description: formData.get('description') || null,
    };
    
    if (!data.currency || !data.multiplier) {
        showMessage('error', 'Lütfen tüm zorunlu alanları doldurun.');
        return;
    }
    
    if (data.multiplier < 0.0001 || data.multiplier > 10.0000) {
        showMessage('error', 'Çarpan değeri 0.0001 ile 10.0000 arasında olmalıdır.');
        return;
    }
    
    try {
        const response = await fetch('{{ route("settings.currency-multipliers.store") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json'
            },
            body: JSON.stringify(data)
        });
        
        const result = await response.json();
        
        if (response.ok && result.success) {
            showMessage('success', result.message);
            setTimeout(() => {
                location.reload();
            }, 1000);
        } else {
            showMessage('error', result.message || 'Çarpan kaydedilirken hata oluştu.');
        }
    } catch (error) {
        console.error('Error:', error);
        showMessage('error', 'Bir hata oluştu: ' + error.message);
    }
});

// Delete multiplier
async function deleteMultiplier(currency) {
    if (!confirm(`"${currency}" para birimi çarpanını silmek istediğinize emin misiniz?`)) {
        return;
    }
    
    try {
        const response = await fetch(`{{ route('settings.currency-multipliers.destroy', '') }}/${currency}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json'
            }
        });
        
        const result = await response.json();
        
        if (response.ok && result.success) {
            showMessage('success', result.message);
            setTimeout(() => {
                location.reload();
            }, 1000);
        } else {
            showMessage('error', result.message || 'Çarpan silinirken hata oluştu.');
        }
    } catch (error) {
        console.error('Error:', error);
        showMessage('error', 'Bir hata oluştu: ' + error.message);
    }
}

// Show message function
function showMessage(type, message) {
    let messageContainer = document.getElementById('messageContainer');
    if (!messageContainer) {
        messageContainer = document.createElement('div');
        messageContainer.id = 'messageContainer';
        messageContainer.className = 'fixed top-4 right-4 z-50 max-w-md';
        document.body.appendChild(messageContainer);
    }

    const bgColor = type === 'success' 
        ? 'bg-green-50 dark:bg-green-900/30 border-green-200 dark:border-green-700 text-green-800 dark:text-green-300'
        : 'bg-red-50 dark:bg-red-900/30 border-red-200 dark:border-red-700 text-red-800 dark:text-red-300';
    
    const icon = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle';

    const messageDiv = document.createElement('div');
    messageDiv.className = `rounded-md border p-4 mb-3 ${bgColor} shadow-lg`;
    messageDiv.innerHTML = `
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fas ${icon}"></i>
            </div>
            <div class="ml-3">
                <p class="text-sm font-medium">${message}</p>
            </div>
            <div class="ml-auto pl-3">
                <button onclick="this.parentElement.parentElement.parentElement.remove()" class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
    `;

    messageContainer.appendChild(messageDiv);

    setTimeout(() => {
        if (messageDiv.parentElement) {
            messageDiv.remove();
        }
    }, 5000);
}
</script>
@endpush
@endsection