@extends('layouts.app')

@section('content')

    <div class="space-y-10 divide-y divide-gray-900/10 max-w-6xl mx-auto pb-24">
        <div class="grid grid-cols-3 gap-x-8 gap-y-8 md:grid-cols-1">

            <div class="grid grid-cols-3 gap-x-8 gap-y-8 pt-10 md:grid-cols-1">

                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <span class="material-symbols-outlined text-4xl text-{{ $opportunity_color }}-600">
                            hov
                        </span>
                    </div>
                    <div class="pl-2 pb-1 w-0 flex-1">
                        <dl>
                            <dd>
                                <div class="text-2xl font-bold text-{{ $opportunity_color }}-600">YENİ FIRSAT</div>
                            </dd>
                        </dl>
                    </div>
                </div>

                <form action="{{ route('opportunity.store') }}" method="post"
                      class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2">
                    @csrf
                    <div class="px-4 py-6 sm:p-8">

                        <h3 class="text-base leading-6 text-stone-400">Gerekli alanlar</h3>

                        <div class="grid max-w-2xl grid-cols-1 gap-6 mt-4 sm:grid-cols-6">

                            {{--İŞLETME SEÇ--}}
                            <div class="sm:col-span-4">
                                <label for="combobox" class="block text-sm font-medium leading-6 text-gray-900">İşletme seç/oluştur</label>
                                <div class="mt-2" x-data="companyCombobox()" x-init="init()">
                                    <div class="relative">
                                        <input required @click="toggleDropdown()" id="combobox" type="text" name="company_name"
                                               class="w-full rounded-md border-0 bg-stone-50 py-1.5 pl-3 pr-12 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6"
                                               role="combobox" aria-controls="options" aria-expanded="false"
                                               x-model="search" @input="filterCompanies" placeholder="İŞLETME SEÇİNİZ">
                                        <input type="hidden" name="company_id" x-model="selectedCompanyId">
                                        <ul class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
                                            id="options" role="listbox" x-show="isOpen" @click.away="toggleDropdown()">
                                            <template x-for="(company, index) in filteredCompanies" :key="index">
                                                <li class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900" role="option" tabindex="-1"
                                                    @click="selectCompany(company)">
                                                    <span class="block truncate" x-text="company.name"></span>
                                                </li>
                                            </template>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            {{--GÖRÜŞME YÖNTEMİ--}}
                            <div class="sm:col-span-3">
                                <label for="communication" class="block text-sm font-medium leading-6 text-gray-900">İletişim yöntemi</label>
                                <select required id="communication" name="communication"
                                        class="mt-2 block w-full rounded-md bg-stone-50 border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-sky-600 sm:text-sm sm:leading-6">
                                    <option value="telefon görüşmesi" selected>TELEFON GÖRÜŞMESİ</option>
                                    <option value="eposta görüşmesi">EPOSTA GÖRÜŞMESİ</option>
                                    <option value="mesajlaşma">MESAJLAŞMA</option>
                                    <option value="yüz yüze görüşme">YÜZ YÜZE GÖRÜŞME</option>
                                </select>
                            </div>
                            <div class="sm:col-span-3">
                                <label for="contact" class="block text-sm font-medium leading-6 text-gray-900">Görüşülen kişi</label>
                                <div class="mt-2">
                                    <input required type="text" name="contact" id="contact"
                                           class="block w-full rounded-md bg-stone-50 border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6"
                                           placeholder="AHMET BEY">
                                </div>
                            </div>
                            <div class="sm:col-span-4">
                                <label for="product_combobox" class="block text-sm font-medium leading-6 text-gray-900">Hangi ürün/hizmet odağında görüşüldü?</label>
                                <div class="mt-2" x-data="productCombobox()" x-init="init()">
                                    <div class="relative">
                                        <input required @click="toggleDropdown()" id="product_combobox" type="text" name="product_name"
                                               class="w-full rounded-md border-0 bg-stone-50 py-1.5 pl-3 pr-12 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6"
                                               role="combobox" aria-controls="options" aria-expanded="false"
                                               x-model="search" @input="filterProducts" placeholder="ÜRÜN/HİZMET SEÇİNİZ">
                                        <input type="hidden" name="product_id" x-model="selectedProductId">
                                        <ul class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
                                            id="options" role="listbox" x-show="isOpen" @click.away="isOpen = false">
                                            <template x-for="(product, index) in filteredProducts" :key="index">
                                                <li class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900" role="option" tabindex="-1"
                                                    @click="selectProduct(product)">
                                                    <span class="block truncate" x-text="product.name"></span>
                                                </li>
                                            </template>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <fieldset class="sm:col-span-6">
                                <legend class="text-sm font-semibold leading-6 text-gray-900">Teklif veriledcek mi?</legend>
                                <div class="mt-2 space-y-6 sm:flex sm:items-center tracking-tighter sm:space-x-10 sm:space-y-0">
                                    <div class="flex items-center">
                                        <input id="1" name="is_offer" value="evet" type="radio" checked class="h-4 w-4 border-gray-300 text-stone-600 focus:ring-sky-600">
                                        <label for="1" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Evet</label>
                                    </div>
                                    <div class="flex items-center">
                                        <input id="2" name="is_offer" value="hayır" type="radio" class="h-4 w-4 border-gray-300 text-stone-600 focus:ring-sky-600">
                                        <label for="2" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Hayır</label>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset class="sm:col-span-6">
                                <legend class="text-sm font-semibold leading-6 text-gray-900">Satışa dönme ihtimali nedir?</legend>
                                <p class="mt-1 text-sm leading-6 text-gray-600">Aşağıdakilerden hangisi bu fırsatın satışa dönme ihtimalini tanımlar?</p>
                                <div class="mt-2 space-y-6 sm:flex sm:items-center tracking-tighter sm:space-x-6 sm:space-y-0">
                                    <div class="flex items-center">
                                        <input id="5" name="to_deal_rate" value="çok yüksek" type="radio" class="h-4 w-4 border-gray-300 text-stone-600 focus:ring-sky-600">
                                        <label for="5" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Çok yüksek</label>
                                    </div>
                                    <div class="flex items-center">
                                        <input id="4" name="to_deal_rate" value="yüksek" type="radio" class="h-4 w-4 border-gray-300 text-stone-600 focus:ring-sky-600">
                                        <label for="4" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Yüksek</label>
                                    </div>
                                    <div class="flex items-center">
                                        <input id="3" name="to_deal_rate" value="yarı yarıya" type="radio" checked
                                               class="h-4 w-4 border-gray-300 text-stone-600 focus:ring-sky-600">
                                        <label for="3" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Yarı yarıya</label>
                                    </div>
                                    <div class="flex items-center">
                                        <input id="2" name="to_deal_rate" value="düşük" type="radio" class="h-4 w-4 border-gray-300 text-stone-600 focus:ring-sky-600">
                                        <label for="2" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Düşük</label>
                                    </div>
                                    <div class="flex items-center">
                                        <input id="1" name="to_deal_rate" value="çok düşük" type="radio" class="h-4 w-4 border-gray-300 text-stone-600 focus:ring-sky-600">
                                        <label for="1" class="ml-3 block text-sm font-medium leading-6 text-gray-900">Çok düşük</label>
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                    </div>

                    <div class="px-4 py-6 sm:p-8 border-dashed border-t-2 border-stone-600/10">

                        <h3 class="text-base leading-6 text-stone-400">İsteğe bağlı alanlar</h3>
                        <div class="grid max-w-2xl grid-cols-1 gap-6 mt-4 sm:grid-cols-6">

                            <div class="sm:col-span-full">
                                <label for="revenue_expectation" class="block text-sm font-medium leading-6 text-gray-900">Gelir beklentisi</label>
                                <div class="relative mt-2 rounded-md shadow-sm">
                                    <input type="text" name="revenue_expectation" id="revenue_expectation" class="block w-full text-end bg-stone-50 rounded-md border-0 py-1.5 pl-7 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6" placeholder="0.00" aria-describedby="price-currency">
                                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                        <span class="text-gray-500 sm:text-sm" id="price-currency">USD</span>
                                    </div>
                                </div>
                            </div>

                            <div class="sm:col-span-full">
                                <label for="additional_information" class="block text-sm font-medium leading-6 text-gray-900">Varsa ilave görüşler</label>
                                <div class="mt-2">
                                    <input type="text" name="additional_information" id="additional_information"
                                           class="block w-full rounded-md bg-stone-50 border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6"
                                           placeholder="Teklif vermek için bir görüşme daha gerekebilir.">
                                </div>
                            </div>

                            <div class="col-span-full">
                                <label for="content" class="block text-sm font-medium leading-6 text-gray-900">Fırsat detayları</label>
                                <div class="mt-2" x-data="{ content: '' }">
                                    <textarea rows="4" type="text" name="content" id="content" autocomplete="content"
                                              class="block w-full rounded-md bg-stone-50 rounded-bl-none border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-violet-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-violet-600 sm:text-sm sm:leading-6"
                                              x-model="content">

                                    </textarea>
                                    <span class="isolate inline-flex rounded-md shadow-sm mt-1">
                                          <span
                                              class="relative inline-flex items-center gap-x-1.5 rounded-bl-md bg-gradient-to-l from-fuchsia-800 to-violet-500 px-3 py-1.5 text-xs font-semibold text-white focus:z-10">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-stars" viewBox="0 0 16 16">
                                                    <path
                                                        d="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.73 1.73 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.73 1.73 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.73 1.73 0 0 0 3.407 2.31zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.16 1.16 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.16 1.16 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732z"/>
                                                </svg>
                                                Ai
                                          </span>
                                          <button @click="generateContent" type="button"
                                                  class="relative -ml-px inline-flex items-center rounded-br-md bg-violet-50 px-3 py-1.5 text-xs font-semibold text-violet-900 ring-1 ring-inset ring-violet-300 hover:bg-violet-100/80 focus:z-10">
                                                FIRSAT DETAYI OLUŞTUR
                                          </button>
                                    </span>
                                </div>
                            </div>

                            <div class="sm:col-span-2 sm:col-start-1">
                                <label for="date" class="block text-sm font-medium leading-6 text-gray-900">Tarih</label>
                                <div class="mt-2">
                                    <input required type="date" name="date" id="date" autocomplete="date" value="{{ $today }}"
                                           class="block w-full rounded-md bg-stone-50 border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="flex items-center justify-end gap-x-4 border-t bg-gradient-to-l from-stone-900/10 rounded-b-xl px-4 py-4 sm:px-8">
                        @include('modals.cancel', [
                            'title' => 'YAPTIĞINIZ DEĞİŞİKLİKLER KAYBOLACAK!',
                            'subtitle' => 'BELGEYİ İPTAL ETMEK İSTEDİĞİNİZDEN EMİN MİSİNİZ?',
                            'route' => route('dashboard'),
                            'button' => 'VAZGEÇ',
                            'cancel' => 'GERİ DÖN',
                            'confirm' => 'İPTAL ET'
                            ])
                        @include('modals.confirm', [
                            'title' => 'BELGE OLUŞTURULACAK',
                            'subtitle' => 'DEVAM ETMEK İSTİYOR MUSUNUZ?',
                            'route' => '#',
                            'button' => 'OLUŞTUR',
                            'cancel' => 'GERİ DÖN',
                            'confirm' => 'OLUŞTUR'
                            ])
                    </div>
                </form>
            </div>
        </div>
    </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": `Aşağıdaki bilgiler ışığında bir kaç cümleden oluşan kurumsal bir görüşme sonrası özeti yazalım. "tartışmak" veya benzeri kelimeleri kullanmayın.
                                        Görüşülen kişi: ${document.querySelector('input[name="contact"]').value},
                                        Görüşme nasıl gerçekleşti: ${document.querySelector('select[name="communication"]').value},
                                        Hangi ürün/hizmet hakkında konuşuldu -tartışmak: ${document.querySelector('input[name="product_name"]').value},
                                        İlave yorum: ${document.querySelector('input[name="additional_information"]').value},
                                        Teklif verilecek mi: ${document.querySelector('input[name="is_offer"]:checked').value},
                                        Satış ihtimali nedir: ${document.querySelector('input[name="to_deal_rate"]:checked').value},
                                        Tahmini anlaşma değeri USD (Not olarak sona bir cümlede ekle): ${document.querySelector('input[name="revenue_expectation"]').value},
`
                        }
                    ],
                    "temperature": 0.5,
                    "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>
    {{--COMPANIES COMBOBOX--}}
    <script>
        function companyCombobox() {
            return {
                search: '',
                isOpen: false,
                companies: @json($companies_all),
                filteredCompanies: [],
                selectedCompanyId: null,
                selectedCompanyName: null,
                init() {
                    this.filteredCompanies = this.companies;
                },
                toggleDropdown() {
                    this.isOpen = !this.isOpen;
                },
                filterCompanies() {
                    const turkishCharMap = {
                        'i': 'iı',
                        'ı': 'iı',
                        's': 'sş',
                        'ş': 'sş',
                        'g': 'gğ',
                        'ğ': 'gğ',
                        'u': 'uü',
                        'ü': 'uü',
                        'c': 'cç',
                        'ç': 'cç',
                        'o': 'oö',
                        'ö': 'oö'
                    };

                    const normalizeString = (str) => {
                        return str.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').split('').map(char => {
                            return turkishCharMap[char] || char;
                        }).join('');
                    };

                    const searchLower = normalizeString(this.search);
                    this.filteredCompanies = this.companies.filter(company => {
                        const normalizedCompanyName = normalizeString(company.name);
                        return searchLower.split('').every(char => normalizedCompanyName.includes(char));
                    });
                    this.isOpen = true;
                },
                selectCompany(company) {
                    this.search = company.name;
                    this.selectedCompanyId = company.id;
                    this.selectedCompanyName = company.name;
                    this.isOpen = false;
                }
            }
        }
    </script>
    {{--PRODUCTS COMBOBOX--}}
    <script>
        function productCombobox() {
            return {
                search: '',
                isOpen: false,
                products: @json($product_and_services_all),
                filteredProducts: [],
                selectedProductId: null,
                selectedProductName: null,
                init() {
                    this.filteredProducts = this.products;
                },
                toggleDropdown() {
                    this.isOpen = !this.isOpen;
                },
                filterProducts() {
                    const turkishCharMap = {
                        'i': 'iı',
                        'ı': 'iı',
                        's': 'sş',
                        'ş': 'sş',
                        'g': 'gğ',
                        'ğ': 'gğ',
                        'u': 'uü',
                        'ü': 'uü',
                        'c': 'cç',
                        'ç': 'cç',
                        'o': 'oö',
                        'ö': 'oö'
                    };

                    const normalizeString = (str) => {
                        return str.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').split('').map(char => {
                            return turkishCharMap[char] || char;
                        }).join('');
                    };

                    const searchLower = normalizeString(this.search);
                    this.filteredProducts = this.products.filter(product => {
                        const normalizedProductName = normalizeString(product.name);
                        return searchLower.split('').every(char => normalizedProductName.includes(char));
                    });
                    this.isOpen = true;
                },
                selectProduct(product) {
                    this.search = product.name;
                    this.selectedProductId = product.id;
                    this.selectedProductName = product.name;
                    this.isOpen = false;
                }
            }
        }
    </script>
@endsection