@extends('layouts.app')

@section('content')

    <div class="">
        <main>
            <div class="w-full px-4 pb-60">
                <div
                    class="grid items-start max-w-2xl grid-cols-1 grid-rows-1 gap-4 mx-auto lg:mx-0 lg:max-w-none lg:grid-cols-5">
                    {{-- İŞLEVLER --}}
                    <div class="grid gap-4 lg:col-span-3">
                        <div class="grid gap-6 p-4 bg-white rounded-lg shadow ring-1 ring-stone-300">
                            <div>
                                <h2 class="flex justify-between leading-6 text-stone-700">
                                    <div class="flex items-center mb-2 text-sm leading-6 text-stone-400">
                                        Satış
                                    </div>
                                </h2>
                                <div class="grid grid-cols-2 gap-2 sm:flex sm:flex-wrap">
                                    <!-- KATEGORİLER -->
                                    <x-main-button name="SATIŞ KATEGORİLERİ" count=""
                                        route="{{ route('pos-categories.index') }}" icon="category" color="stone"
                                        unit="GÖZ AT" data="KATEGORİLERİ ve ÜRÜNLERİ LİSTELEYİN, DÜZENLEYİN"
                                        class='' />
                                    <!-- SATIŞ ÜRÜNLERİ -->
                                    <x-main-button name="SATIŞ ÜRÜNLERİ" count=""
                                        route="{{ route('pos-products.index') }}" icon="fork_spoon" color="teal"
                                        unit="GÖZ AT" data="SATIŞ ÜRÜNLERİNİ LİSTELEYİN, DÜZENLEYİN" class='' />
                                    <!-- CARİ HESAPLAR -->
                                    <x-main-button name="CARİ HESAPLAR" count="{{ $customerCount ?? 0 }}"
                                        route="{{ route('customers.index') }}" icon="checkbook" color="stone"
                                        unit="KAYIT" data="CARİ HESAPLARI LİSTELEYİN, DÜZENLEYİN" class='' />
                                </div>
                            </div>

                            <div>
                                <h2 class="flex justify-between leading-6 text-stone-700">
                                    <div class="flex items-center mb-2 text-sm leading-6 text-stone-400">
                                        Raporlar
                                    </div>
                                </h2>
                                <div class="grid grid-cols-2 gap-2 sm:flex sm:flex-wrap">
                                    <!-- KASA RAPORU -->
                                    <x-main-button name="KASA RAPORU" count=""
                                        route="{{ route('reports.financial-day') }}" icon="account_balance" color="stone"
                                        unit="GÜNLÜK" data="GÜN GÜN SATIŞ VERİLERİNİ TAKİP EDİN" class='' />
                                    <!-- MALİ RAPOR -->
                                    <x-main-button name="MALİ RAPOR" count=""
                                        route="{{ route('reports.mali-report') }}" icon="receipt_long" color="stone"
                                        unit="DENETİM" data="VERGİ ORANLARINA GÖRE KDV KIRILIMI" class='' />
                                    <!-- AI RAPORLARI -->
                                    @if ($is_admin == 1)
                                        <x-main-button name="AI RAPORLARI" count=""
                                            route="{{ route('ai.reports.index') }}" icon="auto_awesome" color="stone"
                                            unit="OLUŞTURULMUŞ" data="AI İLE OLUŞTURULMUŞ RAPORLARI LİSTELEYİN"
                                            class='' />
                                    @endif
                                    <!-- SATIŞ RAPORU -->
                                    <x-main-button name="SATIŞ RAPORU" count="" route="{{ route('reports.sales') }}"
                                        icon="reorder" color="stone" unit="ÜRÜN BAZLI"
                                        data="HANGİ ÜRÜNDEN KAÇ ADET SATILDIĞINI LİSTELEYİN" class='' />
                                    <!-- KAR-ZARAR RAPORU -->
                                    <x-main-button name="KAR-ZARAR" count=""
                                        route="{{ route('reports.cost-summary') }}" icon="ssid_chart" color="stone"
                                        unit="AYLARA GÖRE" data="RAPORU" class='' />
                                    <!-- ENVANTER RAPORU -->
                                    <x-main-button name="ENVANTER" count=""
                                        route="{{ route('reports.inventory.index') }}" icon="shelves" color="stone"
                                        unit="AYLARA GÖRE" data="RAPORU" class='' />
                                    <!-- SİPARİŞLER -->
                                    <x-main-button name="SİPARİŞLER" count="" route="{{ route('reports.orders') }}"
                                        icon="horizontal_rule" color="stone" unit="GÖZ AT"
                                        data="SIRASIYLA SİPARİŞLERİ LİSTELEYİN" class='' />
                                    <!-- ADİSYONLAR -->
                                    <x-main-button name="ADİSYONLAR" count="" route="{{ route('reports.receipts') }}"
                                        icon="receipt" color="stone" unit="GÖZAT" data="GEÇMİŞ ADİSYONLARI LİSTELE"
                                        class='' />
                                    <!-- İPTALLER -->
                                    <x-main-button name="İPTALLER" count="" route="#" icon="close"
                                        color="stone" unit="GÖZ AT" data="İPTAL EDİLEN SİPARİŞLERİ LİSTELEYİN"
                                        class='opacity-50 pointer-events-none' />
                                </div>
                            </div>

                            <div>
                                <h2 class="flex justify-between leading-6 text-stone-700">
                                    <div class="flex items-center mb-2 text-sm leading-6 text-stone-400">
                                        Stok
                                    </div>
                                </h2>
                                <div class="grid grid-cols-2 gap-2 sm:flex sm:flex-wrap">
                                    <!-- STOK KARTLARI -->
                                    <x-main-button name="STOK KARTLARI" count=""
                                        route="{{ route('stocks.index', ['filter' => 'all']) }}" icon="shelves"
                                        color="amber" unit="GÖZ AT" data="STOK KARTLARI EKLEYİN ve DÜZENLEYİN"
                                        class='' />
                                    <!-- HAREKETLER -->
                                    <x-main-button name="HAREKETLERİ" count=""
                                        route="{{ route('stocks.movements') }}" icon="swap_vert" color="stone"
                                        unit="STOK" data="SON STOK HAREKETLERİNİ LİSTELEYİN" class='' />
                                    <!-- REÇETELER -->
                                    <x-main-button name="REÇETELER" count="" route="{{ route('recipes.index') }}"
                                        icon="list_alt" color="sky" unit="GÖZ AT"
                                        data="TEDARİKÇİLERİ LİSTELEYİN ve DÜZENLEYİN" class='' />
                                    <!-- DEPOLAR -->
                                    <x-main-button name="DEPOLARI" count=""
                                        route="{{ route('warehouses.index') }}" icon="warehouse" color="stone"
                                        unit="STOK" data="DEPOLARI EKLEYİN ve DÜZENLEYİN" class='' />
                                </div>
                            </div>

                            <div>
                                <h2 class="flex justify-between leading-6 text-stone-700">
                                    <div class="flex items-center mb-2 text-sm leading-6 text-stone-400">
                                        İşletme
                                    </div>
                                </h2>
                                <div class="grid grid-cols-2 gap-2 sm:flex sm:flex-wrap">
                                    <!-- KISIMLAR -->
                                    {{--
                                <x-main-button name="KISIMLAR" count="" route="#" icon="skillet" color="stone"
                                    unit="GÖZ AT" data="İŞLETMENİZDE YER ALAN ÜRETİM KISIMLARI"
                                    class='opacity-50 pointer-events-none' /> --}}
                                    <!-- MASALAR -->
                                    <x-main-button name="MASALAR" count="" route="{{ route('pos-tables.index') }}"
                                        icon="table_bar" color="stone" unit="GÖZ AT"
                                        data="MASALARI EKLEYİN ve DÜZENLEYİN" class='' />
                                    <!-- YAZICILAR -->
                                    <x-main-button name="YAZICILAR" count="" route="{{ route('printers.index') }}"
                                        icon="print" color="stone" unit="GÖZ AT"
                                        data="İŞLETMENİN YAZICILARINI LİSTELEYİN" class='' />
                                    <!-- TAKİP EKRANLARI -->
                                    <x-main-button name="TAKİP EKRANLARI" count=""
                                        route="{{ route('tracking-sections.index') }}" icon="featured_play_list"
                                        color="stone" unit="GÖZ AT"
                                        data="TAKİP EKRANLARINI VE YAZICI EŞLEŞTİRMELERİNİ YÖNETİN" class='' />
                                </div>
                            </div>

                            <div>
                                <h2 class="flex justify-between leading-6 text-stone-700">
                                    <div class="flex items-center mb-2 text-sm leading-6 text-stone-400">
                                        Entegrasyonlar
                                    </div>
                                </h2>
                                <div class="grid grid-cols-2 gap-2 sm:flex sm:flex-wrap">
                                    <x-main-button name="ENTEGRASYON" count=""
                                        route="{{ route('integrations.settings') }}" icon="electrical_services"
                                        color="stone" unit="TÜM" data="AYARLARI" class='' />
                                    <!-- SABEE -->
                                    <x-main-button name="SABEEAPP" count="" route="#" icon="hotel"
                                        color="sky" unit="OTEL YAZILIMI" data="ENTEGRASYONU"
                                        class='opacity-50 pointer-events-none' />
                                    <!-- YEMEKSEPETİ -->
                                    <x-main-button name="YEMEKSEPETİ" count="" route="#" icon="moped_package"
                                        color="rose" unit="PAKET SERVİS" data="ENTEGRASYONU"
                                        class='opacity-50 pointer-events-none' />
                                    <!-- GETİR -->
                                    <x-main-button name="GETİR" count="" route="#" icon="moped_package"
                                        color="indigo" unit="PAKET SERVİS" data="ENTEGRASYONU"
                                        class='opacity-50 pointer-events-none' />
                                    <!-- E-BELGE -->
                                    <x-main-button name="E-BELGE" count=""
                                        route="{{ route('integrations.eadisyon.index') }}" icon="folder_data"
                                        color="stone" unit="GELİR İDARESİ BAŞKANLIĞI" data="ENTEGRASYONU"
                                        class='' />
                                    <!-- INPOS -->
                                    <x-main-button name="INPOS" count="" route="#" icon="point_of_sale"
                                        color="stone" unit="YAZARKASA POS" data="ENTEGRASYONU"
                                        class='opacity-50 pointer-events-none' />
                                </div>
                            </div>

                            <div>
                                <h2 class="flex justify-between leading-6 text-stone-700">
                                    <div class="flex items-center mb-2 text-sm leading-6 text-stone-400">
                                        Ayarlar
                                    </div>
                                </h2>
                                <div class="grid grid-cols-2 gap-2 sm:flex sm:flex-wrap">
                                    <!-- KULLANICILAR -->
                                    <x-main-button name="KULLANICILAR" count="0"
                                        route="{{ route('companies.index') }}" icon="groups" color="stone"
                                        unit="KAYIT" data="MÜŞTERİLER, TEDARİKÇİLER ve KİŞİLERİ LİSTELEYİN"
                                        class='opacity-50 pointer-events-none' />
                                    <!-- İŞLETME AYARLARI -->
                                    <x-main-button name="AYARLARI" count="" route="{{ route('settings.index') }}"
                                        icon="settings" color="stone" unit="İŞLETME" data="GENEL AYARLARI YAPILANDIRIN"
                                        class='' />
                                    <!-- KULLANICI AYARLARI -->
                                    <x-main-button name="AYARLARI" count="" route="{{ route('companies.index') }}"
                                        icon="settings_account_box" color="stone" unit="KULLANICI"
                                        data="MÜŞTERİLER, TEDARİKÇİLER ve KİŞİLERİ LİSTELEYİN"
                                        class='opacity-50 pointer-events-none' />
                                </div>
                            </div>

                        </div>
                    </div>
                    {{-- SAĞ İÇERİK --}}
                    <div class="grid gap-4 lg:col-span-2">

                        {{-- BETA UYARISI --}}
                        <div class="p-4 border border-yellow-300 rounded-md bg-yellow-50">
                            <div class="flex">
                                <div class="shrink-0">
                                    <svg viewBox="0 0 20 20" fill="currentColor" data-slot="icon" aria-hidden="true"
                                        class="text-yellow-400 size-5">
                                        <path
                                            d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
                                            clip-rule="evenodd" fill-rule="evenodd" />
                                    </svg>
                                </div>
                                <div class="ml-3">
                                    <h3 class="text-sm font-medium text-yellow-800">BETA SÜRÜM KULLANIYORSUNUZ</h3>
                                    <div class="mt-2 text-xs text-yellow-700">
                                        <p>Bu sürümde yeni özelliklere erken erişim sağlarsınız. Ancak bazı hatalarla
                                            karşılaşabileceğinizi, hizmet kesintisi ve veri kayıpları yaşayabileceğinizi
                                            unutmayınız.</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- DÖVİZ KURLARI --}}
                        <div class="p-4 bg-white rounded-lg shadow ring-1 ring-stone-300">
                            <div class="flex gap-x-1">
                                @if (isset($ex_rate) && count($ex_rate) > 0)
                                    @foreach ($ex_rate as $item)
                                        @if ($item)
                                            <span class="pr-1 text-xs text-stone-500">{{ $item->currency }}</span><span
                                                class="font-semibold tracking-tight">{{ number_format($item->rate, 2, ',', '.') }}</span>{{ $loop->last ? '' : ' | ' }}
                                        @endif
                                    @endforeach
                                    @if (isset($ex_rate['USD']) && $ex_rate['USD'] && isset($ex_rate['USD']->date))
                                        <span class="flex items-center pl-3 text-xs font-light gap-x-1 text-stone-400">
                                            <span class="text-sm material-symbols-rounded">
                                                cached
                                            </span>
                                            {{ date('d.m.Y', strtotime($ex_rate['USD']->date)) }}
                                        </span>
                                    @endif
                                @else
                                    <span class="text-xs text-stone-400">Döviz kuru bilgisi bulunamadı</span>
                                @endif
                            </div>
                        </div>

                        {{-- STOK UYARILARI WIDGET --}}
                        <livewire:stock-alert-widget />

                        @if ($is_admin == 1)
                            {{-- YAPAY ZEKA ASİSTANI --}}
                            <div class="p-4 bg-white shadow ring-1 ring-purple-600/50 sm:mx-0 sm:rounded-lg">
                                <h2
                                    class="flex items-center gap-x-1.5 mb-3 text-lg leading-6 font-jbmono-bold text-purple-600">
                                    <span class="material-symbols-rounded">
                                        auto_awesome
                                    </span>
                                    Yapay Zeka Asistanı
                                    <span class="text-xs text-stone-400">DENEYSEL</span>
                                </h2>
                                <p class="text-xs italic text-stone-500">Asistan ile stok ve satış ürünlerinizle ilgili
                                    sorularınıza hızlı
                                    cevaplar
                                    alabilirsiniz. <br>
                                    Örn; <b>"yumurta güncel stok", "yumurta maliyeti nedir?", "yumurta stok hareketleri"</b>
                                    ya
                                    da
                                    <b>"sahanda yumurta fiyatı"</b> yazabilirsiniz.
                                </p>

                                <div class="grid grid-cols-1 mt-4">
                                    <!-- Soru Giriş Alanı -->
                                    <div class="flex">
                                        <input type="text" id="ai-question" placeholder="yumurta stok hareketleri"
                                            class="flex-1 px-3 py-2 text-sm placeholder-purple-300 border border-r-0 border-purple-300 rounded-l-lg bg-purple-50 focus:ring-2 focus:ring-purple-500 focus:border-transparent" />
                                        <div class="grid grid-cols-1 shrink-0 focus-within:relative bg-purple-50">
                                            <select id="currency" name="currency" aria-label="Currency"
                                                class="col-start-1 row-start-1 w-full text-right border-purple-300 border-l-0 bg-purple-50 appearance-none py-1.5 pl-3 pr-7 text-xs text-purple-500 placeholder:text-purple-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-purple-600">
                                                <option value="fast_answer">Hızlı cevap</option>
                                                <option value="report">Rapor oluştur</option>
                                            </select>
                                        </div>
                                        <button onclick="askAI()" id="ask-button"
                                            class="px-3 py-1.5 font-medium text-white transition-colors bg-purple-600 rounded-r-lg hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2">
                                            <span class="items-center">
                                                <span class="text-lg material-symbols-rounded">auto_awesome</span>
                                            </span>
                                        </button>
                                    </div>

                                    <!-- Son Sorgular -->
                                    @if ($quickChats->count() > 0)
                                        <div class="mt-2">
                                            <div class="flex flex-wrap gap-1.5">
                                                @foreach ($quickChats as $chat)
                                                    <button
                                                        onclick="document.getElementById('ai-question').value='{{ addslashes($chat->prompt) }}'; askAI();"
                                                        class="flex items-center px-2 py-1 text-xs transition-colors border rounded gap-x-1 text-stone-700 border-stone-200 bg-stone-50 hover:bg-stone-100">
                                                        <span class="text-sm material-symbols-rounded text-stone-400">
                                                            history
                                                        </span>
                                                        {{ $chat->prompt }}
                                                    </button>
                                                @endforeach
                                            </div>
                                        </div>
                                    @endif

                                    <!-- Cevap Alanı -->
                                    <div id="ai-response" class="hidden mt-2">
                                        <div class="grid p-3 border-2 border-purple-200 rounded-lg gap-y-3 bg-stone-50/50">
                                            <!-- Cevap -->
                                            <div class="flex items-start gap-2">
                                                <span
                                                    class="text-base text-purple-600 material-symbols-rounded">auto_awesome</span>
                                                <div class="flex-1">
                                                    <p class="text-xs font-medium text-purple-600">Cevap</p>
                                                    <p class="text-sm leading-relaxed text-stone-700" id="ai-answer"></p>
                                                </div>
                                            </div>

                                            <!-- Ürün Etiketleri -->
                                            <div id="product-tags" class="hidden pt-2 mt-2 border-t border-purple-200">
                                                <p class="text-[10px] font-medium text-purple-600 uppercase mb-2">İlgili
                                                    Bağlantılar</p>

                                                <!-- Stok Kartları -->
                                                <div id="stock-items-section" class="hidden mb-2">
                                                    <p
                                                        class="text-[9px] font-medium text-stone-600 uppercase mb-1 flex items-center gap-1">
                                                        <span class="material-symbols-rounded text-[10px]">inventory</span>
                                                        Stok Kartları
                                                    </p>
                                                    <div class="flex flex-wrap gap-1" id="stock-items-container">
                                                        <!-- Stok kartları buraya eklenecek -->
                                                    </div>
                                                </div>

                                                <!-- POS Ürünleri -->
                                                <div id="pos-products-section" class="hidden mb-2">
                                                    <p
                                                        class="text-[9px] font-medium text-stone-600 uppercase mb-1 flex items-center gap-1">
                                                        <span
                                                            class="material-symbols-rounded text-[10px]">shopping_cart</span>
                                                        Satış Ürünleri
                                                    </p>
                                                    <div class="flex flex-wrap gap-1" id="pos-products-container">
                                                        <!-- POS ürünleri buraya eklenecek -->
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Detaylar (açılabilir) -->
                                        <details class="mt-2">
                                            <summary class="text-xs cursor-pointer text-stone-500 hover:text-stone-500">
                                                Meraklısı için teknik
                                                detaylar...</summary>
                                            <div class="p-2 mt-2 text-xs rounded bg-stone-100">
                                                <div class="mb-2">
                                                    <strong class="text-stone-700">SQL:</strong>
                                                    <pre class="p-2 mt-1 overflow-x-auto text-xs rounded bg-stone-800 text-stone-100" id="ai-sql"></pre>
                                                </div>
                                                <div>
                                                    <strong class="text-stone-700">Ham Veri:</strong>
                                                    <pre class="p-2 mt-1 overflow-x-auto text-xs rounded bg-stone-800 text-stone-100" id="ai-raw-data"></pre>
                                                </div>
                                            </div>
                                        </details>
                                    </div>

                                    <!-- Hata Mesajı -->
                                    <div id="ai-error" class="hidden mt-2">
                                        <div class="p-2 border border-red-200 rounded-lg bg-red-50">
                                            <div class="flex items-center gap-2">
                                                <span class="text-lg text-red-600 material-symbols-rounded">error</span>
                                                <div class="flex-1">
                                                    <p class="text-sm font-medium text-red-700">Bir hata oluştu</p>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Hata Detayları (açılabilir) -->
                                        <details class="mt-2">
                                            <summary class="text-xs cursor-pointer text-stone-500 hover:text-stone-500">
                                                Hata detaylarını göster</summary>
                                            <div class="p-2 mt-2 text-xs rounded bg-stone-100">
                                                <div class="p-2 overflow-x-auto rounded bg-red-50">
                                                    <pre class="text-xs text-red-700 whitespace-pre-wrap" id="ai-error-message"></pre>
                                                </div>
                                            </div>
                                        </details>
                                    </div>

                                    <!-- Yükleniyor Durumu -->
                                    <div id="ai-loading" class="hidden mt-2">
                                        <div class="flex items-center gap-2 p-3 rounded-lg bg-stone-50">
                                            <div
                                                class="w-4 h-4 border-2 rounded-full border-t-transparent border-stone-600 animate-spin">
                                            </div>
                                            <span class="text-sm text-stone-600">Sonuçlar hazırlanıyor...</span>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            {{-- GEÇMİŞ SORGULAR (Livewire Component) --}}
                            <livewire:recent-ai-chats :company-id="session('selected_pos_access')" />
                        @endif

                    </div>
                </div>
        </main>
    </div>

@endsection

@section('scripts')
    <script>
        // AI durumunu kontrol et
        async function checkOllamaStatus() {
            try {
                const response = await fetch('/ai/health');
                const data = await response.json();

                console.log('Health check response:', data); // Debug için

                const indicator = document.getElementById('status-indicator');
                const statusText = document.getElementById('status-text');

                if (data.status === 'ok' && data.model_available) {
                    indicator.className = 'inline-block w-2 h-2 bg-green-500 rounded-full';
                    const providerName = data.provider === 'qwen' ? 'Yapay zeka hazır. v3' : 'Yapay zeka hazır. v2.5';
                    statusText.textContent = providerName;
                } else if (data.status === 'ok' && !data.model_available) {
                    indicator.className = 'inline-block w-2 h-2 bg-yellow-500 rounded-full';
                    statusText.textContent = `Model bulunamadı: ${data.configured_model}`;
                } else {
                    indicator.className = 'inline-block w-2 h-2 bg-red-500 rounded-full';
                    const providerName = data.provider === 'qwen' ? 'Bağlantı yok. v3' : 'Bağlantı yok. v2.5';
                    statusText.textContent = providerName;
                }
            } catch (error) {
                console.error('Health check error:', error); // Debug için
                const indicator = document.getElementById('status-indicator');
                const statusText = document.getElementById('status-text');
                indicator.className = 'inline-block w-2 h-2 bg-red-500 rounded-full';
                statusText.textContent = 'Bağlantı hatası';
            }
        }

        // Sayfa yüklendiğinde durumu kontrol et
        checkOllamaStatus();

        // Enter tuşu ile soru sorma
        document.getElementById('ai-question').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault(); // Form submit'i engelle
                askAI();
            }
        });

        // AI'ye soru sor
        async function askAI() {
            const questionInput = document.getElementById('ai-question');
            const question = questionInput.value.trim();

            if (!question) {
                return;
            }

            // UI elementlerini al
            const responseDiv = document.getElementById('ai-response');
            const errorDiv = document.getElementById('ai-error');
            const loadingDiv = document.getElementById('ai-loading');
            const askButton = document.getElementById('ask-button');

            // Eğer zaten bir istek devam ediyorsa tekrar istek atma
            if (askButton.disabled) {
                return;
            }

            // Tüm sonuç alanlarını gizle
            responseDiv.classList.add('hidden');
            errorDiv.classList.add('hidden');

            // Yükleme göster
            loadingDiv.classList.remove('hidden');
            askButton.disabled = true;
            askButton.classList.add('opacity-50');

            try {
                // Seçilen sorgu tipini al
                const queryTypeSelect = document.getElementById('query-type');
                const queryType = queryTypeSelect ? queryTypeSelect.value : 'fast_answer';

                const response = await fetch('/ai/query', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({
                        question,
                        query_type: queryType
                    })
                });

                // Response kontrolü
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }

                const contentType = response.headers.get('content-type');
                if (!contentType || !contentType.includes('application/json')) {
                    const text = await response.text();
                    console.error('Non-JSON response:', text);
                    throw new Error('Sunucu JSON dışında bir yanıt döndü. Lütfen log dosyalarını kontrol edin.');
                }

                const data = await response.json();

                console.log('Query response:', data); // Debug için

                // Yükleme gizle
                loadingDiv.classList.add('hidden');

                if (data.success) {
                    // Rapor mı yoksa normal cevap mı?
                    if (data.is_report) {
                        // Rapor oluşturuldu - Rapor sayfasına yönlendir butonu göster
                        const answerDiv = document.getElementById('ai-answer');
                        answerDiv.textContent = data.summary;

                        const reportButton = document.createElement('a');
                        reportButton.href = data.report_url;
                        reportButton.className =
                            'inline-flex items-center px-4 py-2 ml-2 bg-purple-600 hover:bg-purple-700 text-white text-sm font-medium rounded-lg transition-colors mt-3 block w-fit';
                        reportButton.innerHTML = `
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                    </svg>
                    Raporu Görüntüle
                `;

                        answerDiv.appendChild(reportButton);

                        // SQL ve raw data'yı gizle (rapor için gerekli değil)
                        document.getElementById('ai-sql').textContent = 'Rapor oluşturuldu';
                        document.getElementById('ai-raw-data').textContent = 'Rapor ID: ' + data.report_id;

                        // Ürün etiketlerini gizle
                        document.getElementById('product-tags').classList.add('hidden');
                    } else {
                        // Normal soru-cevap
                        document.getElementById('ai-answer').textContent = data.answer;
                        document.getElementById('ai-sql').textContent = data.sql;
                        document.getElementById('ai-raw-data').textContent = JSON.stringify(data.raw_data, null, 2);

                        // Ürün etiketlerini göster - kategorilendirilmiş
                        const productTagsDiv = document.getElementById('product-tags');
                        const stockItemsSection = document.getElementById('stock-items-section');
                        const posProductsSection = document.getElementById('pos-products-section');
                        const stockItemsContainer = document.getElementById('stock-items-container');
                        const posProductsContainer = document.getElementById('pos-products-container');

                        // Container'ları temizle
                        stockItemsContainer.innerHTML = '';
                        posProductsContainer.innerHTML = '';

                        if (data.products && data.products.length > 0) {
                            let hasStockItems = false;
                            let hasPosProducts = false;

                            // Her ürün için etiket oluştur
                            data.products.forEach(product => {
                                const tag = document.createElement('a');

                                // Ürün tipine göre farklı yönlendirme
                                if (product.type === 'pos_product') {
                                    tag.href = `/pos-products/show/${product.id}`;
                                    tag.className =
                                        'inline-flex items-center gap-1 px-3 py-1.5 text-xs border border-teal-200 font-medium text-teal-700 bg-teal-50 rounded-lg hover:bg-teal-100 transition-colors';
                                    tag.innerHTML = `
                                        <span class="text-xs material-symbols-rounded">fork_spoon</span>
                                        ${product.name}
                                    `;
                                    posProductsContainer.appendChild(tag);
                                    hasPosProducts = true;
                                } else {
                                    // Varsayılan olarak StockItem
                                    tag.href = `/stocks/show/${product.id}`;
                                    tag.className =
                                        'inline-flex items-center gap-1 px-3 py-1.5 text-xs border border-amber-200 font-medium text-amber-700 bg-amber-50 rounded-lg hover:bg-amber-100 transition-colors';
                                    tag.innerHTML = `
                                        <span class="text-xs material-symbols-rounded">shelves</span>
                                        ${product.name}
                                    `;
                                    stockItemsContainer.appendChild(tag);
                                    hasStockItems = true;
                                }
                            });

                            // Bölüm görünürlüğünü ayarla
                            if (hasStockItems) {
                                stockItemsSection.classList.remove('hidden');
                            } else {
                                stockItemsSection.classList.add('hidden');
                            }

                            if (hasPosProducts) {
                                posProductsSection.classList.remove('hidden');
                            } else {
                                posProductsSection.classList.add('hidden');
                            }

                            // Ana bölüm görünürlüğünü ayarla
                            if (hasStockItems || hasPosProducts) {
                                productTagsDiv.classList.remove('hidden');
                            } else {
                                productTagsDiv.classList.add('hidden');
                            }
                        } else {
                            // Ürün yoksa tüm bölümleri gizle
                            stockItemsSection.classList.add('hidden');
                            posProductsSection.classList.add('hidden');
                            productTagsDiv.classList.add('hidden');
                        }
                    }

                    responseDiv.classList.remove('hidden');

                    // Livewire component'ini yenile
                    Livewire.dispatch('chatAdded');
                } else {
                    // Hata mesajını göster
                    const errorMessage = data.error || 'Bir hata oluştu';
                    let errorDetails = errorMessage;

                    if (data.debug) {
                        errorDetails += '\n\n🔍 DEBUG:\n';
                        errorDetails += 'Type: ' + (data.debug.type || 'Unknown') + '\n';
                        errorDetails += 'File: ' + (data.debug.file || 'Unknown') + '\n';
                        errorDetails += 'Line: ' + (data.debug.line || 'Unknown');
                    }

                    if (data.sql) {
                        errorDetails += '\n\nÜretilen SQL:\n' + data.sql;
                    }

                    if (data.raw_data) {
                        errorDetails += '\n\nHam Veri:\n' + JSON.stringify(data.raw_data, null, 2);
                    }

                    document.getElementById('ai-error-message').textContent = errorDetails;
                    errorDiv.classList.remove('hidden');
                }
            } catch (error) {
                // Yükleme gizle
                loadingDiv.classList.add('hidden');

                // Hata göster
                document.getElementById('ai-error-message').textContent = 'Bağlantı hatası: ' + error.message;
                errorDiv.classList.remove('hidden');
            } finally {
                // Butonu tekrar aktif et
                askButton.disabled = false;
                askButton.classList.remove('opacity-50');
            }
        }
    </script>
@endsection