@php
    // تحديد العملة الافتراضية والعملات المدعومة
    $defaultCurrency = session('currency', 'SAR');
    $currencies = [
        'SAR' => ['name' => 'ريال سعودي', 'symbol' => 'ر.س', 'rate' => 1.00],
        'USD' => ['name' => 'دولار أمريكي', 'symbol' => '$', 'rate' => 0.27],
        'EUR' => ['name' => 'يورو', 'symbol' => '€', 'rate' => 0.24],
        'GBP' => ['name' => 'جنيه إسترليني', 'symbol' => '£', 'rate' => 0.21],
        'AED' => ['name' => 'درهم إماراتي', 'symbol' => 'د.إ', 'rate' => 0.98],
        'KWD' => ['name' => 'دينار كويتي', 'symbol' => 'د.ك', 'rate' => 0.082],
        'EGP' => ['name' => 'جنيه مصري', 'symbol' => 'ج.م', 'rate' => 8.30],
        'QAR' => ['name' => 'ريال قطري', 'symbol' => 'ر.ق', 'rate' => 0.97],
        'BHD' => ['name' => 'دينار بحريني', 'symbol' => 'د.ب', 'rate' => 0.10],
        'OMR' => ['name' => 'ريال عماني', 'symbol' => 'ر.ع', 'rate' => 0.10],
    ];
@endphp

<div class="currency-converter" x-data="{ 
    open: false, 
    currency: '{{ $defaultCurrency }}',
    currencies: {{ json_encode($currencies) }},
    
    formatPrice(price, currency) {
        if (!price) return '0';
        
        const currencyInfo = this.currencies[currency];
        const convertedPrice = (price * currencyInfo.rate).toFixed(2);
        
        return `${currencyInfo.symbol} ${convertedPrice}`;
    },
    
    convertPrice(price, fromCurrency, toCurrency) {
        if (!price) return 0;
        
        // تحويل السعر إلى الريال السعودي أولاً (العملة الأساسية)
        const priceInSAR = price / this.currencies[fromCurrency].rate;
        
        // تحويل السعر من الريال السعودي إلى العملة المطلوبة
        return priceInSAR * this.currencies[toCurrency].rate;
    }
}">
    <div class="relative">
        <button type="button" 
                @click="open = !open" 
                class="inline-flex items-center px-3 py-1 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
            <span x-text="currencies[currency].symbol"></span>
            <span class="ml-1" x-text="currency"></span>
            <svg class="ml-2 -mr-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
        </button>
        
        <div x-show="open" 
             @click.away="open = false"
             x-transition:enter="transition ease-out duration-100"
             x-transition:enter-start="transform opacity-0 scale-95"
             x-transition:enter-end="transform opacity-100 scale-100"
             x-transition:leave="transition ease-in duration-75"
             x-transition:leave-start="transform opacity-100 scale-100"
             x-transition:leave-end="transform opacity-0 scale-95"
             class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
            <div class="py-1">
                <template x-for="(info, code) in currencies" :key="code">
                    <button type="button"
                            @click="currency = code; open = false; $dispatch('currency-changed', { currency: code })"
                            class="w-full text-right px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center justify-between"
                            :class="{ 'bg-blue-100 dark:bg-blue-900 text-blue-900 dark:text-blue-100': currency === code }">
                        <span x-text="info.symbol"></span>
                        <span x-text="info.name"></span>
                    </button>
                </template>
            </div>
        </div>
    </div>
    
    <input type="hidden" name="currency" x-model="currency">
</div>

<script>
    document.addEventListener('currency-changed', function(e) {
        // إرسال طلب AJAX لتحديث العملة في الجلسة
        fetch('/update-currency', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
                currency: e.detail.currency
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // تحديث الصفحة لتطبيق العملة الجديدة
                window.location.reload();
            }
        });
    });
</script>