@extends('layouts.app')

@section('title', 'Ürün Düzenle')

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <div class="w-full">
        <h1 class="text-3xl font-semibold text-gray-900 dark:text-gray-100 mb-6">Ürün Düzenle</h1>

        <form action="{{ route('admin.products.update', $product) }}" method="POST" enctype="multipart/form-data" class="bg-white dark:bg-gray-800 shadow-sm ring-1 ring-gray-900/5 dark:ring-gray-700/50 sm:rounded-xl">
            @csrf
            @method('PUT')

            <div class="px-4 py-6 sm:p-8">
                <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                    <!-- Ürün Adı -->
                    <div class="sm:col-span-2">
                        <label for="name" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            Ürün Adı <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="name" id="name" required value="{{ old('name', $product->name) }}" 
                            class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 dark:text-gray-400 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200" 
                            placeholder="Ürün adını girin">
                        @error('name')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                        @enderror
                    </div>

                    <!-- SKU -->
                    <div>
                        <label for="sku" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            SKU
                        </label>
                        <input type="text" name="sku" id="sku" value="{{ old('sku', $product->sku) }}" 
                            class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 dark:text-gray-400 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200" 
                            placeholder="Stok kodu">
                        @error('sku')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                        @enderror
                    </div>

                    <!-- Kategoriler -->
                    <div>
                        <label for="categories" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            Kategoriler
                        </label>
                        <input type="text" name="categories" id="categories" value="{{ old('categories', $product->categories) }}" 
                            class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 dark:text-gray-400 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200" 
                            placeholder="Örn: Protein, Kas Gelişimi">
                        <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">Kategorileri virgülle ayırın</p>
                        @error('categories')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                        @enderror
                    </div>

                    <!-- Ürün Linki -->
                    <div>
                        <label for="product_link" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            <i class="fas fa-link"></i> Ürün Linki
                        </label>
                        <input type="url" name="product_link" id="product_link" value="{{ old('product_link', $product->product_link) }}" 
                            class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 dark:text-gray-400 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200" 
                            placeholder="https://example.com/urun">
                        <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">Ürüne ait harici link (opsiyonel)</p>
                        @error('product_link')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                        @enderror
                    </div>

                    <!-- Site Seçimi -->
                    <div class="sm:col-span-2">
                        <label for="site_id" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            Site Seçimi <span class="text-gray-500 dark:text-gray-400 font-normal">(Opsiyonel)</span>
                        </label>
                        <select name="site_id" id="site_id" 
                            class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200 cursor-pointer">
                            <option value="">Master Ürün (Site'ye bağlı değil)</option>
                            @foreach($sites as $site)
                            <option value="{{ $site->id }}" {{ old('site_id', $product->site_id) == $site->id ? 'selected' : '' }}>
                                {{ $site->name }}
                            </option>
                            @endforeach
                        </select>
                        <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">Site seçilmezse ürün master ürün olarak oluşturulur.</p>
                        @error('site_id')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                        @enderror
                    </div>

                    <!-- Normal Fiyat -->
                    <div>
                        <label for="regular_price" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            Normal Fiyat
                        </label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                <span class="text-gray-500 dark:text-gray-400 sm:text-sm" id="regular_price_symbol">
                                    @php
                                        $currencies = [
                                            'TRY' => '₺',
                                            'USD' => '$',
                                            'EUR' => '€',
                                            'GBP' => '£',
                                            'CHF' => 'CHF',
                                            'JPY' => '¥',
                                            'CAD' => 'C$',
                                            'AUD' => 'A$'
                                        ];
                                        $productCurrency = $product->site->currency ?? 'TRY';
                                        echo $currencies[$productCurrency] ?? $productCurrency;
                                    @endphp
                                </span>
                            </div>
                            <input type="number" step="0.01" name="regular_price" id="regular_price" value="{{ old('regular_price', $product->regular_price) }}" 
                                class="block w-full rounded-lg border border-gray-300 bg-white pl-8 pr-4 py-2.5 text-gray-900 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 dark:text-gray-400 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200" 
                                placeholder="0.00">
                        </div>
                        @error('regular_price')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                        @enderror
                    </div>

                    <!-- İndirimli Fiyat -->
                    <div>
                        <label for="sale_price" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            İndirimli Fiyat
                        </label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                <span class="text-gray-500 dark:text-gray-400 sm:text-sm" id="sale_price_symbol">
                                    @php
                                        $productCurrency = $product->site->currency ?? 'TRY';
                                        echo $currencies[$productCurrency] ?? $productCurrency;
                                    @endphp
                                </span>
                            </div>
                            <input type="number" step="0.01" name="sale_price" id="sale_price" value="{{ old('sale_price', $product->sale_price) }}" 
                                class="block w-full rounded-lg border border-gray-300 bg-white pl-8 pr-4 py-2.5 text-gray-900 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 dark:text-gray-400 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200" 
                                placeholder="0.00">
                        </div>
                        @error('sale_price')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                        @enderror
                    </div>

                    <!-- Maliyet Fiyatı -->
                    <div>
                        <label for="cost_price" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            Maliyet Fiyatı
                        </label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                <span class="text-gray-500 dark:text-gray-400 sm:text-sm" id="cost_price_symbol">
                                    @php
                                        $productCurrency = $product->site->currency ?? 'TRY';
                                        echo $currencies[$productCurrency] ?? $productCurrency;
                                    @endphp
                                </span>
                            </div>
                            <input type="number" step="0.01" name="cost_price" id="cost_price" value="{{ old('cost_price', $product->cost_price) }}"
                                class="block w-full rounded-lg border border-gray-300 bg-white pl-8 pr-4 py-2.5 text-gray-900 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 dark:text-gray-400 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200"
                                placeholder="0.00">
                        </div>
                        <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">Minimum marj kontrolü için ürünün net alış maliyetini girin.</p>
                        @error('cost_price')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                        @enderror
                    </div>

                    <!-- Minimum Kâr Marjı -->
                    <div>
                        <label for="min_profit_margin_percent" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            Minimum Kâr Marjı (%)
                        </label>
                        <input type="number" step="0.01" min="0" max="99.99" name="min_profit_margin_percent" id="min_profit_margin_percent"
                            value="{{ old('min_profit_margin_percent', $product->min_profit_margin_percent ?? 15) }}"
                            class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 dark:text-gray-400 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200"
                            placeholder="Örn: 15">
                        <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">Yeni fiyatlar bu oranı korumalıdır. Varsayılan değer %15.</p>
                        @error('min_profit_margin_percent')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                        @enderror
                    </div>

                    <!-- Kısa Açıklama -->
                    <div class="sm:col-span-2">
                        <div class="flex items-center justify-between mb-2">
                            <label for="short_description" class="block text-sm font-semibold text-gray-900">
                                Kısa Açıklama
                            </label>
                            <button type="button" id="generate-ai-btn" 
                                class="inline-flex items-center gap-2 px-3 py-1.5 text-xs font-medium text-blue-700 bg-blue-50 border border-blue-200 rounded-lg hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-offset-2 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
                                disabled>
                                <i class="fas fa-magic"></i>
                                <span id="generate-ai-text">AI ile Üret</span>
                                <span id="generate-ai-loading" class="hidden">
                                    <i class="fas fa-spinner fa-spin"></i> Üretiliyor...
                                </span>
                            </button>
                        </div>
                        <textarea name="short_description" id="short_description" rows="3" 
                            class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 dark:text-gray-400 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200 resize-none" 
                            placeholder="Ürünün kısa açıklamasını girin veya AI ile otomatik üretin">{{ old('short_description', $product->short_description) }}</textarea>
                        @error('short_description')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                        @enderror
                    </div>

                    <!-- Uzun Açıklama -->
                    <div class="sm:col-span-2">
                        <label for="description" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            Uzun Açıklama
                        </label>
                        <textarea name="description" id="description" rows="6" 
                            class="block w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2.5 text-gray-900 dark:text-gray-100 shadow-sm placeholder:text-gray-400 dark:placeholder:text-gray-500 dark:text-gray-400 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-opacity-20 sm:text-sm transition-all duration-200 resize-none" 
                            placeholder="Ürünün detaylı açıklamasını girin veya AI ile otomatik üretin">{{ old('description', $product->description) }}</textarea>
                        @error('description')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                        @enderror
                    </div>

                    <!-- Mevcut Görseller -->
                    @if($product->media->count() > 0)
                    <div class="sm:col-span-2">
                        <label class="block text-sm font-semibold text-gray-900 mb-3">Mevcut Görseller</label>
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                            @foreach($product->media as $media)
                            <div class="relative group">
                                <img src="{{ $media->master_image_full_url }}" alt="Görsel" class="w-full h-32 object-cover rounded-lg border border-gray-200">
                                <label class="absolute top-2 left-2 cursor-pointer">
                                    <input type="checkbox" name="delete_media[]" value="{{ $media->id }}" class="sr-only peer">
                                    <div class="flex items-center space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                                        <span class="bg-red-600 text-white text-xs px-2 py-1 rounded flex items-center">
                                            <i class="fas fa-trash mr-1"></i> Sil
                                        </span>
                                    </div>
                                </label>
                            </div>
                            @endforeach
                        </div>
                        <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">Görsellerin üzerine gelerek silme seçeneğini görebilirsiniz.</p>
                    </div>
                    @endif

                    <!-- Yeni Görseller Ekle -->
                    <div class="sm:col-span-2">
                        <label for="images" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-2">
                            Yeni Görseller Ekle
                        </label>
                        <div class="mt-2 flex justify-center rounded-lg border border-dashed border-gray-300 px-6 py-8 hover:border-blue-400 transition-colors duration-200">
                            <div class="text-center">
                                <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-3"></i>
                                <div class="mt-4 flex text-sm leading-6 text-gray-600">
                                    <label for="images" class="relative cursor-pointer rounded-md bg-white font-semibold text-blue-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-blue-600 focus-within:ring-offset-2 hover:text-blue-500">
                                        <span>Dosya seç</span>
                                        <input type="file" name="images[]" id="images" multiple accept="image/*" class="sr-only">
                                    </label>
                                    <p class="pl-1">veya sürükle bırak</p>
                                </div>
                                <p class="text-xs leading-5 text-gray-600 mt-2">PNG, JPG, GIF (Max. 10MB)</p>
                                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Yeni görseller mevcut görsellerin sonuna eklenir</p>
                            </div>
                        </div>
                        @error('images.*')
                        <p class="mt-2 text-sm text-red-600 dark:text-red-400 flex items-center">
                            <i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}
                        </p>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="flex items-center justify-end gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8">
                <a href="{{ route('admin.products.index') }}" class="text-sm font-semibold leading-6 text-gray-900 hover:text-gray-700">İptal</a>
                <button type="submit" class="rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-offset-2 transition-all duration-200">
                    Güncelle
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
    // Para birimi sembolleri
    const currencySymbols = {
        'TRY': '₺',
        'USD': '$',
        'EUR': '€',
        'GBP': '£',
        'CHF': 'CHF',
        'JPY': '¥',
        'CAD': 'C$',
        'AUD': 'A$'
    };

    // Site para birimlerini al
    const sitesData = @json($sites->mapWithKeys(function($site) {
        return [$site->id => [
            'currency' => $site->currency ?? 'TRY',
            'name' => $site->name
        ]];
    }));

    // Seçili site'in para birimini güncelle
    function updateCurrencySymbols() {
        const siteId = document.getElementById('site_id')?.value;
        let currency = 'TRY'; // Varsayılan
        
        if (siteId && sitesData[siteId]) {
            currency = sitesData[siteId].currency;
        }
        
        const symbol = currencySymbols[currency] || currency;
        
        // Tüm para birimi sembollerini güncelle
        const regularSymbol = document.getElementById('regular_price_symbol');
        const saleSymbol = document.getElementById('sale_price_symbol');
        const costSymbol = document.getElementById('cost_price_symbol');
        
        if (regularSymbol) regularSymbol.textContent = symbol;
        if (saleSymbol) saleSymbol.textContent = symbol;
        if (costSymbol) costSymbol.textContent = symbol;
    }

document.addEventListener('DOMContentLoaded', function() {
    // Site seçimi değiştiğinde para birimini güncelle
    const siteSelect = document.getElementById('site_id');
    if (siteSelect) {
        // Site değiştiğinde güncelle
        siteSelect.addEventListener('change', updateCurrencySymbols);
    }
    // Checkbox ile görsel silme işlemi
    document.querySelectorAll('input[name="delete_media[]"]').forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const label = this.closest('label');
            const span = label.querySelector('span');
            if (this.checked) {
                span.classList.remove('opacity-0');
                span.classList.add('bg-red-700');
            } else {
                span.classList.add('opacity-0');
                span.classList.remove('bg-red-700');
            }
        });
    });

    // AI ile açıklama üretme
    const productNameInput = document.getElementById('name');
    const generateAiBtn = document.getElementById('generate-ai-btn');
    const generateAiText = document.getElementById('generate-ai-text');
    const generateAiLoading = document.getElementById('generate-ai-loading');
    const shortDescriptionTextarea = document.getElementById('short_description');
    const descriptionTextarea = document.getElementById('description');

    // Ürün adı değiştiğinde butonu aktif/pasif yap
    productNameInput.addEventListener('input', function() {
        const productName = this.value.trim();
        if (productName.length >= 3) {
            generateAiBtn.disabled = false;
            generateAiBtn.classList.remove('opacity-50', 'cursor-not-allowed');
        } else {
            generateAiBtn.disabled = true;
            generateAiBtn.classList.add('opacity-50', 'cursor-not-allowed');
        }
    });

    // Sayfa yüklendiğinde kontrol et
    if (productNameInput.value.trim().length >= 3) {
        generateAiBtn.disabled = false;
        generateAiBtn.classList.remove('opacity-50', 'cursor-not-allowed');
    }

    // AI ile üretme butonu
    generateAiBtn.addEventListener('click', function() {
        const productName = productNameInput.value.trim();
        
        if (!productName || productName.length < 3) {
            alert('Lütfen önce ürün adını girin (minimum 3 karakter)');
            productNameInput.focus();
            return;
        }

        // Butonu devre dışı bırak ve loading göster
        generateAiBtn.disabled = true;
        generateAiText.classList.add('hidden');
        generateAiLoading.classList.remove('hidden');

        // Site ID'yi al (ürün site'e bağlıysa)
        const siteId = @json($product->site_id ?? null);

        // API isteği
        fetch('{{ route("admin.products.generate-descriptions") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                product_name: productName,
                site_id: siteId
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Kısa açıklama
                if (data.short_description) {
                    shortDescriptionTextarea.value = data.short_description;
                }
                
                // Uzun açıklama
                if (data.description) {
                    descriptionTextarea.value = data.description;
                }

                // Başarı mesajı
                showNotification('AI açıklamalar başarıyla üretildi!', 'success');
            } else {
                throw new Error(data.error || 'Bir hata oluştu');
            }
        })
        .catch(error => {
            console.error('AI Generation Error:', error);
            showNotification(error.message || 'AI açıklamalar üretilirken bir hata oluştu. Lütfen tekrar deneyin.', 'error');
        })
        .finally(() => {
            // Butonu tekrar aktif et
            generateAiBtn.disabled = false;
            generateAiText.classList.remove('hidden');
            generateAiLoading.classList.add('hidden');
        });
    });

    // Bildirim gösterme fonksiyonu
    function showNotification(message, type) {
        const notification = document.createElement('div');
        notification.className = `fixed top-4 right-4 z-50 px-4 py-3 rounded-lg shadow-lg transition-all duration-300 ${
            type === 'success' ? 'bg-green-500 text-white' : 'bg-red-500 text-white'
        }`;
        notification.innerHTML = `
            <div class="flex items-center gap-2">
                <i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'}"></i>
                <span>${message}</span>
            </div>
        `;
        
        document.body.appendChild(notification);
        
        setTimeout(() => {
            notification.classList.add('opacity-0');
            setTimeout(() => notification.remove(), 300);
        }, 3000);
    }
});
</script>
@endpush
@endsection