@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="flex flex-wrap gap-2">
                                <!-- KASA -->
                                <x-main-button name="KASA" count="0"
                                    route="{{ route('opportunities.index', ['filter' => 'all']) }}"
                                    icon="account_balance" color="stone" unit="KAYIT" data="" w='60' class='' />
                                <!-- CARİ HESAPLAR -->
                                <x-main-button name="CARİ HESAPLAR" count="0"
                                    route="{{ route('opportunities.index', ['filter' => 'new']) }}" icon="checkbook"
                                    color="stone" unit="KAYIT" data="" w='60' 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">
                                    Menü
                                </div>
                            </h2>
                            <div class="flex flex-wrap gap-2">
                                <!-- KATEGORİLER -->
                                <x-main-button name="KATEGORİLER" count=""
                                    route="{{ route('offers.index', ['filter' => 'all']) }}" icon="category"
                                    color="stone" unit="GÖZ AT" data="KATEGORİLERİ LİSTELEYİN ve DÜZENLEYİN" w='60'
                                    class='' />
                                <!-- ÜRÜNLER -->
                                <x-main-button name="ÜRÜNLER" count=""
                                    route="{{ route('offers.index', ['filter' => 'all']) }}" icon="fastfood"
                                    color="stone" unit="GÖZ AT" data="ÜRÜNLERİ LİSTELEYİN ve DÜZENLEYİN" w='60'
                                    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="flex flex-wrap gap-2">
                                <!-- SATIŞLAR -->
                                <x-main-button name="SATIŞLAR" count=""
                                    route="{{ route('offers.index', ['filter' => 'all']) }}" icon="reorder"
                                    color="stone" unit="GÖZ AT" data="HANGİ ÜRÜNDEN KAÇ ADET SATILDIĞINI LİSTELEYİN"
                                    w='60' class='' />
                                <!-- SİPARİŞLER -->
                                <x-main-button name="SİPARİŞLER" count=""
                                    route="{{ route('offers.index', ['filter' => 'all']) }}" icon="horizontal_rule"
                                    color="stone" unit="GÖZ AT" data="SIRASIYLA SİPARİŞLERİ LİSTELEYİN" w='60'
                                    class='' />
                                <!-- ADİSYONLAR -->
                                <x-main-button name="ADİSYONLAR" count=""
                                    route="{{ route('offers.index', ['filter' => 'all']) }}" icon="receipt"
                                    color="stone" unit="GÖZ AT" data="GEÇMİŞ ADİSYONLARI LİSTELEYİN" w='60' class='' />
                                <!-- İPTALLER -->
                                <x-main-button name="İPTALLER" count=""
                                    route="{{ route('offers.index', ['filter' => 'all']) }}" icon="close" color="stone"
                                    unit="GÖZ AT" data="İPTAL EDİLEN SİPARİŞLERİ LİSTELEYİN" w='60' 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">
                                    Alışlar
                                </div>
                            </h2>
                            <div class="flex flex-wrap gap-2">
                                <!-- TEDARİKÇİLER -->
                                <x-main-button name="TEDARİKÇİLER" count=""
                                    route="{{ route('offers.index', ['filter' => 'all']) }}" icon="domain" color="stone"
                                    unit="GÖZ AT" data="TEDARİKÇİLERİ LİSTELEYİN ve DÜZENLEYİN" w='60' class='' />
                                <!-- FATURALAR -->
                                <x-main-button name="FATURALAR" count=""
                                    route="{{ route('offers.index', ['filter' => 'all']) }}" icon="receipt_long"
                                    color="stone" unit="GÖZ AT" data="FATURALARI LİSTELEYİN ve DÜZENLEYİN" w='60'
                                    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">
                                    Stok
                                </div>
                            </h2>
                            <div class="flex flex-wrap gap-2">
                                <!-- STOK KARTLARI -->
                                <x-main-button name="STOK KARTLARI" count=""
                                    route="{{ route('offers.index', ['filter' => 'all']) }}" icon="inventory"
                                    color="stone" unit="GÖZ AT" data="STOK KARTLARI EKLEYİN ve DÜZENLEYİN" w='60'
                                    class='' />
                                <!-- HAREKETLER -->
                                <x-main-button name="HAREKETLER" count=""
                                    route="{{ route('offers.index', ['filter' => 'all']) }}" icon="swap_vert"
                                    color="stone" unit="GÖZ AT" data="FATURALARI LİSTELEYİN ve DÜZENLEYİN" w='60'
                                    class='' />
                                <!-- RAPORLAR -->
                                <x-main-button name="RAPORLAR" count=""
                                    route="{{ route('offers.index', ['filter' => 'all']) }}" icon="bar_chart"
                                    color="stone" unit="GÖZ AT" data="FATURALARI LİSTELEYİN ve DÜZENLEYİN" w='60'
                                    class='' />
                                <!-- REÇETELER -->
                                <x-main-button name="REÇETELER" count=""
                                    route="{{ route('offers.index', ['filter' => 'all']) }}" icon="list_alt"
                                    color="stone" unit="GÖZ AT" data="TEDARİKÇİLERİ LİSTELEYİN ve DÜZENLEYİN" w='60'
                                    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="flex flex-wrap gap-2">
                                <!-- KISIMLAR -->
                                <x-main-button name="KISIMLAR" count=""
                                    route="{{ route('offers.index', ['filter' => 'all']) }}" icon="skillet"
                                    color="stone" unit="GÖZ AT" data="İŞLETMENİZDE YER ALAN ÜRETİM KISIMLARI" w='60'
                                    class='' />
                                <!-- MASALAR -->
                                <x-main-button name="MASALAR" count=""
                                    route="{{ route('offers.index', ['filter' => 'all']) }}" icon="table_bar"
                                    color="stone" unit="GÖZ AT" data="MASALARI EKLEYİN ve DÜZENLEYİN" w='60' class='' />
                                <!-- YAZICILAR -->
                                <x-main-button name="YAZICILAR" count=""
                                    route="{{ route('offers.index', ['filter' => 'all']) }}" icon="print" color="stone"
                                    unit="GÖZ AT" data="FATURALARI LİSTELEYİN ve DÜZENLEYİN" w='60' class='' />
                                <!-- HİZMET BEDELLERİ -->
                                <x-main-button name="HİZMET BEDELLERİ" count=""
                                    route="{{ route('offers.index', ['filter' => 'all']) }}" icon="room_service"
                                    color="stone" unit="GÖZ AT" data="TEDARİKÇİLERİ LİSTELEYİN ve DÜZENLEYİN" w='60'
                                    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="flex flex-wrap gap-2">
                                <x-main-button name="ENTEGRASYONLAR" count="" route="#" icon="electrical_services"
                                    color="stone" unit="GÖZ AT" data="ENTEGRASYON AYARLARI" w='60' class='' />
                                {{-- @foreach ($integrations as $item)
                                <x-main-button name="{{ $item->title }}" count="0"
                                    route="{{ route('integrations.'. $item->slug .'.index', $item->relation_id) }}"
                                    icon="{{ $item->icon }}" color="{{ $item->color }}" unit="KAYIT"
                                    data="{{ $item->description }}" w='60' class='' />
                                @endforeach
                                --}}
                                <!-- SABEE -->
                                <x-main-button name="SABEEAPP" count=""
                                    route="{{ route('offers.index', ['filter' => 'all']) }}" icon="cloud" color="sky"
                                    unit="GÖZ AT" data="OTEL YAZILIMI ENTEGRASYONU" w='60' class='' />
                                <!-- EADİSYON -->
                                <x-main-button name="EADİSYON" count=""
                                    route="{{ route('integrations.eadisyon.index', ['filter' => 'all']) }}"
                                    icon="folder_data" color="purple" unit="QNB FİNANSBANK"
                                    data="GİB EADİSYON ENTEGRASYONU" w='60' class='' />
                                <!-- INPOS -->
                                <x-main-button name="INPOS" count=""
                                    route="{{ route('offers.index', ['filter' => 'all']) }}" icon="credit_card"
                                    color="yellow" unit="GÖZ AT" data="YAZARKASA POS ENTEGRASYONU" w='60' 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">
                                    Ayarlar
                                </div>
                            </h2>
                            <div class="flex flex-wrap gap-2">
                                <!-- 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" w='60' class='' />
                                <!-- İŞLETME AYARLARI -->
                                <x-main-button name="İŞLETME AYARLARI" count="0" route="{{ route('companies.index') }}"
                                    icon="settings" color="stone" unit="KAYIT"
                                    data="MÜŞTERİLER, TEDARİKÇİLER ve KİŞİLERİ LİSTELEYİN" w='60' class='' />
                                <!-- KULLANICI AYARLARI -->
                                <x-main-button name="KULLANICI AYARLARI" count="0"
                                    route="{{ route('companies.index') }}" icon="settings_account_box" color="stone"
                                    unit="KAYIT" data="MÜŞTERİLER, TEDARİKÇİLER ve KİŞİLERİ LİSTELEYİN" w='60'
                                    class='' />
                                <!-- ABONELİK -->
                                <x-main-button name="ABONELİK" count="0" route="{{ route('companies.index') }}"
                                    icon="license" color="stone" unit="KAYIT"
                                    data="MÜŞTERİLER, TEDARİKÇİLER ve KİŞİLERİ LİSTELEYİN" w='60' class='' />
                                <!-- KİŞİLER -->
                                {{--
                                <x-main-button name="KİŞİLER" count="0" route="" icon="person" color="stone"
                                    unit="KAYIT" data="YAPIM AŞAMASINDA" w='60' class='opacity-50 cursor-not-allowed' />
                                --}}
                            </div>
                        </div>

                    </div>
                </div>
                {{-- SAĞ İÇERİK --}}
                <div class="grid gap-4 lg:col-span-2">
                    {{--DÖVİZ KURLARI--}}
                    <div class="p-4 bg-white rounded-lg shadow ring-1 ring-stone-300">
                        <div class="flex gap-x-1">
                            @foreach($ex_rate as $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 ? '' : ' | ' }}
                            @endforeach
                            <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>
                        </div>
                    </div>
                    {{--SON EKLENEN İŞLETMELER--}}
                    <div class="p-4 bg-white shadow ring-1 ring-stone-400/20 sm:mx-0 sm:rounded-lg">
                        <h2 class="flex items-center mb-3 text-lg leading-6 font-jbmono-bold text-stone-700">
                            <span class="mr-1 material-symbols-rounded">
                                history_2
                            </span>
                            Son Eklenen İşletmeler
                        </h2>
                        <div class="grid grid-cols-1">
                            <ul class="flex flex-wrap gap-2">
                                @foreach($last_companies as $company)
                                <li
                                    class="text-xs tracking-tight transition-all rounded-lg bg-stone-100/40 max-w-48 hover:bg-stone-100 hover:shadow-2xl ring-1 ring-stone-200">
                                    <a href="{{ route('companies.show', $company->slug) }}"
                                        class="flex items-center justify-between flex-1 px-2 truncate">
                                        <div class="flex-1 truncate py-1.5">
                                            <p class="font-medium uppercase truncate text-stone-900">{{ $company->name
                                                }}</p>
                                            <p class="text-stone-500">{{ $company->note }}</p>
                                        </div>
                                    </a>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>

                    {{--TEKLİFLER--}}
                    @if(count($deals) > 0)
                    <div class="items-center p-4 bg-white shadow ring-1 ring-stone-400/20 sm:mx-0 sm:rounded-lg">
                        <h2 class="flex items-center mb-2 text-lg leading-6 font-jbmono-bold text-stone-700">
                            <span class="mr-1 material-symbols-rounded">
                                article
                            </span>
                            Teklifler
                        </h2>
                        <div class="grid grid-cols-1 gap-6 mt-4">
                            <ul role="list">
                                @livewire('offer-status', ['offers' => $offers])
                            </ul>
                        </div>
                    </div>
                    @endif

                    {{--İLETİŞİMLER--}}
                    @if(count($opportunities) > 0)
                    <div class="items-center p-4 bg-white shadow ring-1 ring-stone-400/20 sm:mx-0 sm:rounded-lg">
                        <h2 class="flex items-center mb-2 text-lg leading-6 font-jbmono-bold text-stone-700">
                            <span class="mr-1 material-symbols-rounded">
                                hov
                            </span>
                            İletişimler
                        </h2>
                        <div class="grid grid-cols-1 gap-6 mt-4">
                            <ul role="list">
                                @livewire('opportunities', ['opportunities' => $opportunities])
                            </ul>
                        </div>
                    </div>
                    @endif

                    {{--ANLAŞMALAR--}}
                    @if(count($deals) > 0)
                    <div class="items-center p-4 bg-white shadow ring-1 ring-stone-400/20 sm:mx-0 sm:rounded-lg">
                        <h2 class="flex items-center mb-2 text-lg leading-6 font-jbmono-bold text-stone-700">
                            <span class="mr-1 material-symbols-rounded">
                                stylus_note
                            </span>
                            Anlaşmalar
                        </h2>
                        <div class="flex">
                            <div class="shrink-0">
                                <svg class="size-4 text-stone-400" viewBox="0 0 20 20" fill="currentColor"
                                    aria-hidden="true" data-slot="icon">
                                    <path fill-rule="evenodd"
                                        d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z"
                                        clip-rule="evenodd" />
                                </svg>
                            </div>
                            <div class="flex-1 ml-2 md:flex md:justify-between">
                                <p class="text-xs tracking-tighter text-stone-400">Burada anlaşmaya dönişmüş teklifler
                                    listelenir. Anlaşmalardan fatura
                                    oluşturabilirsiniz.</p>
                            </div>
                        </div>
                        <div class="grid grid-cols-1 gap-6 mt-4">
                            <ul role="list">
                                @livewire('deals', ['deals' => $deals])
                            </ul>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
    </main>
</div>

@endsection

@section('scripts')
<script>
    function generateContent() {
            const MISTRAL_API_KEY = '{{ config('services.mistral.api_key') }}';

            async function sendMessage() {
                const url = 'https://api.mistral.ai/v1/chat/completions';
                const data = {
                    "model": "open-mistral-nemo",
                    "messages": [
                        {
                            "role": "user",
                            "content": `Girilen metnin imla ve argo söz kontrollerini yapalım. Daha okunaklı ve anlaşılır bir hale gelmesi için düzenlemeler yapalım. Hiç bir açıklama eklemeyelim.
                                        Girilen metin: ${document.querySelector('textarea[name="content"]').value}`
                        }
                    ],
                    "temperature": 0.0,
                    "top_p": 1,
                    "max_tokens": 512,
                    "stream": false,
                    "safe_prompt": false,
                    "random_seed": 42
                };

                try {
                    const response = await fetch(url, {
                        method: 'POST',
                        headers: {
                            'Authorization': `Bearer ${MISTRAL_API_KEY}`,
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(data)
                    });

                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }

                    const result = await response.json();
                    document.querySelector('textarea[name="content"]').value = result.choices[0].message.content;
                } catch (error) {
                    console.error('There was a problem with the fetch operation:', error);
                }
            }

            sendMessage();
        }
</script>
@endsection