@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">
                                    İletişimler
                                </div>
                            </h2>
                            <div class="grid grid-cols-2 gap-2 sm:flex sm:flex-wrap">
                                <!-- İLETİŞİMLER -->
                                <x-main-button name="İLETİŞİMLER" count="{{ $count_opportunities }}"
                                    route="{{ route('opportunities.index', ['filter' => 'all']) }}" icon="bubble_chart"
                                    color="stone" unit="KAYIT" data="TÜM İLETİŞİMLERİ LİSTELEYİN" w='60' class='' />
                                <!-- BEKLEYENLER -->
                                <x-main-button name="BEKLİYOR" count="0"
                                    route="{{ route('opportunities.index', ['filter' => 'new']) }}" icon="pause"
                                    color="stone" unit="KAYIT" data="" w='60' class='' />
                                <!-- TEKLİFE DÖNÜŞENLER -->
                                <x-main-button name="TEKLİFE DÖNÜŞTÜ" count="0"
                                    route="{{ route('opportunities.index', ['filter' => 'offer']) }}"
                                    icon="line_end_diamond" 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">
                                    Teklifler & Anlaşmalar
                                </div>
                            </h2>
                            <div class="grid grid-cols-2 gap-2 sm:flex sm:flex-wrap">
                                <!-- TEKLİFLER -->
                                <x-main-button name="TEKLİFLER" count="{{ $count_offers }}"
                                    route="{{ route('offers.index', ['filter' => 'all']) }}" icon="article"
                                    color="stone" unit="KAYIT" data="TÜM TEKLİFLERİ LİSTELEYİN" w='60' class='' />
                                <!-- TASLAKLAR -->
                                <x-main-button name="TASLAK" count="{{ $count_draft_offers }}"
                                    route="{{ route('offers.index', ['filter' => 'new']) }}" icon="edit_note"
                                    color="amber" unit="KAYIT" data="" w='60' class='' />
                                <!-- GÖNDERİLENLER -->
                                <x-main-button name="GÖNDERİLDİ" count="{{ $count_sended_offers }}"
                                    route="{{ route('offers.index', ['filter' => 'send']) }}" icon="forward" color="sky"
                                    unit="KAYIT" data="" w='60' class='' />
                                <!-- ONAYLANANLAR -->
                                <x-main-button name="ONAYLANDI" count="{{ $count_accepted_offers }}"
                                    route="{{ route('offers.index', ['filter' => 'accepted']) }}" icon="done_all"
                                    color="teal" unit="KAYIT" data="" w='60' class='' />
                                <!-- REDDEDİLENLER -->
                                <x-main-button name="REDDEDİLDİ" count="{{ $count_rejected_offers }}"
                                    route="{{ route('offers.index', ['filter' => 'rejected']) }}" icon="block"
                                    color="rose" unit="KAYIT" data="" w='60' class='' />
                                <!-- ANLAŞMALAR -->
                                <x-main-button name="ANLAŞMA SAĞLANDI" count="{{ $count_deals }}" route="#"
                                    icon="stylus_note" color="teal" unit="KAYIT"
                                    data="FATURA ve FİŞLERİN TAMAMINI 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">
                                    Entegrasyonlar
                                </div>
                            </h2>
                            <div class="grid grid-cols-2 gap-2 sm:flex sm:flex-wrap">
                                <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
                                --}}
                            </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">
                                    Müşteriler
                                </div>
                            </h2>
                            <div class="grid grid-cols-2 gap-2 sm:flex sm:flex-wrap">
                                <!-- HESAPLAR -->
                                <x-main-button name="MÜŞTERİLER" count="{{ $count_companies }}"
                                    route="{{ route('companies.index') }}" icon="apartment" color="stone" unit="KAYIT"
                                    data="MÜŞTERİLER, TEDARİKÇİLER ve KİŞİLERİ LİSTELEYİN" w='60' class='' />
                                <!-- MÜŞTERİLER -->
                                <x-main-button name="İŞLETMELER" count="{{ $count_companies }}" route="#" icon="store"
                                    color="stone" unit="KAYIT" data="" 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 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="gap-2 flex flex-wrap">
                                @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_offers > 0)
                    <div class="items-center p-4 bg-white shadow ring-1 ring-stone-400/20 sm:mx-0 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')
                            </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 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')
                            </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 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önü0ş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')
                            </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