@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-rounded 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İ İLETİŞİM</div>
                            </dd>
                        </dl>
                    </div>
                </div>

                <form action="{{ route('opportunities.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-12 mt-4 sm:grid-cols-6">
                            {{--İLETİŞİM YÖNTEMİ--}}
                            <div class="sm:col-span-6">
                                <fieldset>
                                    <legend class="text-sm/6 font-semibold text-stone-700">İletişim yöntemi</legend>
                                    <div class="mt-2 grid grid-cols-2 gap-y-6 sm:grid-cols-3 sm:gap-x-4"
                                         x-data="{ selected: '' }">
                                        <label aria-label="Telefon görüşmesi" aria-description="Last message sent an hour ago to 621 users"
                                               class="relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-xs focus:outline-hidden"
                                               :class="{ 'border-sky-600 ring-2 ring-sky-600': selected === 'telefon görüşmesi', 'border-gray-300': selected !== 'telefon görüşmesi' }">
                                            <input type="radio" name="communication" value="telefon görüşmesi" class="sr-only" x-model="selected">
                                            <span class="flex flex-1">
                                                <span class="flex flex-col">
                                                    <span class="material-symbols-rounded text-3xl text-stone-700 mt-2">
                                                        phone_in_talk
                                                    </span>
                                                    <span class="block text-sm font-medium text-stone-700">Telefon görüşmesi</span>
                                                </span>
                                            </span>
                                            <svg class="size-5 text-sky-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
                                                 x-show="selected === 'telefon görüşmesi'">
                                                <path fill-rule="evenodd"
                                                      d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z"
                                                      clip-rule="evenodd"/>
                                            </svg>
                                            <span class="pointer-events-none absolute -inset-px rounded-lg border-2" aria-hidden="true"
                                                  :class="{ 'border-sky-600': selected === 'telefon görüşmesi', 'border-transparent': selected !== 'telefon görüşmesi' }"></span>
                                        </label>
                                        <label aria-label="Mesajlaşma" aria-description="Last message sent an hour ago to 621 users"
                                               class="relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-xs focus:outline-hidden"
                                               :class="{ 'border-sky-600 ring-2 ring-sky-600': selected === 'mesajlaşma', 'border-gray-300': selected !== 'mesajlaşma' }">
                                            <input type="radio" name="communication" value="mesajlaşma" class="sr-only" x-model="selected">
                                            <span class="flex flex-1">
                                                <span class="flex flex-col">
                                                    <span class="material-symbols-rounded text-3xl text-stone-700 mt-2">
                                                        forum
                                                    </span>
                                                    <span class="block text-sm font-medium text-stone-700">Mesajlaşma</span>
                                                </span>
                                            </span>
                                            <svg class="size-5 text-sky-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
                                                 x-show="selected === 'mesajlaşma'">
                                                <path fill-rule="evenodd"
                                                      d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z"
                                                      clip-rule="evenodd"/>
                                            </svg>
                                            <span class="pointer-events-none absolute -inset-px rounded-lg border-2" aria-hidden="true"
                                                  :class="{ 'border-sky-600': selected === 'mesajlaşma', 'border-transparent': selected !== 'mesajlaşma' }"></span>
                                        </label>
                                        <label aria-label="Yüz yüze görüşme" aria-description="Last message sent an hour ago to 621 users"
                                               class="relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-xs focus:outline-hidden"
                                               :class="{ 'border-sky-600 ring-2 ring-sky-600': selected === 'yüz yüze görüşme', 'border-gray-300': selected !== 'yüz yüze görüşme' }">
                                            <input type="radio" name="communication" value="yüz yüze görüşme" class="sr-only" x-model="selected">
                                            <span class="flex flex-1">
                                                <span class="flex flex-col">
                                                    <span class="material-symbols-rounded text-3xl text-stone-700 mt-2">
                                                        adaptive_audio_mic
                                                    </span>
                                                    <span class="block text-sm font-medium text-stone-700">Yüz yüze görüşme</span>
                                                </span>
                                            </span>
                                            <svg class="size-5 text-sky-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
                                                 x-show="selected === 'yüz yüze görüşme'">
                                                <path fill-rule="evenodd"
                                                      d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z"
                                                      clip-rule="evenodd"/>
                                            </svg>
                                            <span class="pointer-events-none absolute -inset-px rounded-lg border-2" aria-hidden="true"
                                                  :class="{ 'border-sky-600': selected === 'yüz yüze görüşme', 'border-transparent': selected !== 'yüz yüze görüşme' }"></span>
                                        </label>
                                        <label aria-label="E-posta iletişimi" aria-description="Last message sent an hour ago to 621 users"
                                               class="relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-xs focus:outline-hidden"
                                               :class="{ 'border-sky-600 ring-2 ring-sky-600': selected === 'e-posta iletişimi', 'border-gray-300': selected !== 'e-posta iletişimi' }">
                                            <input type="radio" name="communication" value="e-posta iletişimi" class="sr-only" x-model="selected">
                                            <span class="flex flex-1">
                                                <span class="flex flex-col">
                                                    <span class="material-symbols-rounded text-3xl text-stone-700 mt-2">
                                                        mail
                                                    </span>
                                                    <span class="block text-sm font-medium text-stone-700">E-posta iletişimi</span>
                                                </span>
                                            </span>
                                            <svg class="size-5 text-sky-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
                                                 x-show="selected === 'e-posta iletişimi'">
                                                <path fill-rule="evenodd"
                                                      d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z"
                                                      clip-rule="evenodd"/>
                                            </svg>
                                            <span class="pointer-events-none absolute -inset-px rounded-lg border-2" aria-hidden="true"
                                                  :class="{ 'border-sky-600': selected === 'e-posta iletişimi', 'border-transparent': selected !== 'e-posta iletişimi' }"></span>
                                        </label>
                                        <label aria-label="online görüşme" aria-description="Last message sent an hour ago to 621 users"
                                               class="relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-xs focus:outline-hidden"
                                               :class="{ 'border-sky-600 ring-2 ring-sky-600': selected === 'online görüşme', 'border-gray-300': selected !== 'online görüşme' }">
                                            <input type="radio" name="communication" value="online görüşme" class="sr-only" x-model="selected">
                                            <span class="flex flex-1">
                                                <span class="flex flex-col">
                                                    <span class="material-symbols-rounded text-3xl text-stone-700 mt-2">
                                                        wifi
                                                    </span>
                                                    <span class="block text-sm font-medium text-stone-700">Online görüşme</span>
                                                </span>
                                            </span>
                                            <svg class="size-5 text-sky-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
                                                 x-show="selected === 'online görüşme'">
                                                <path fill-rule="evenodd"
                                                      d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z"
                                                      clip-rule="evenodd"/>
                                            </svg>
                                            <span class="pointer-events-none absolute -inset-px rounded-lg border-2" aria-hidden="true"
                                                  :class="{ 'border-sky-600': selected === 'online görüşme', 'border-transparent': selected !== 'online görüşme' }"></span>
                                        </label>
                                    </div>
                                </fieldset>
                            </div>
                            {{--İŞLETME SEÇ--}}
                            <div class="sm:col-span-4">
                                <label for="combobox" class="block text-sm font-medium leading-6 text-stone-700">İş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-stone-700 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 uppercase"
                                               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-stone-700" role="option"
                                                    tabindex="-1"
                                                    @click="selectCompany(company)">
                                                    <span class="block truncate" x-text="company.name"></span>
                                                </li>
                                            </template>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            {{--GÖRÜŞÜLEN KİŞİ--}}
                            <div class="sm:col-span-3">
                                <label for="contact" class="block text-sm font-medium leading-6 text-stone-700">İletişim kurulan 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-stone-700 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6"
                                           placeholder="AHMET BEY">
                                </div>
                            </div>
                            {{--ÜRÜN/HİZMET--}}
                            <div class="sm:col-span-4">
                                <label for="product_combobox" class="block text-sm font-medium leading-6 text-stone-700">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-stone-700 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 uppercase"
                                               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-stone-700" role="option"
                                                    tabindex="-1"
                                                    @click="selectProduct(product)">
                                                    <span class="block truncate" x-text="product.name"></span>
                                                </li>
                                            </template>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            {{--TEKLİF--}}
                            <fieldset class="sm:col-span-6">
                                <legend class="text-sm font-semibold leading-6 text-stone-700">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-stone-700">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-stone-700">Hayır</label>
                                    </div>
                                </div>
                            </fieldset>
                            {{--SATIŞ İHTİMALİ--}}
                            <fieldset class="sm:col-span-6">
                                <legend class="text-sm font-semibold leading-6 text-stone-700">Satışa dönme ihtimali nedir?</legend>
                                <p class="mt-1 text-sm leading-6 text-stone-600">Aşağıdakilerden hangisi bu iletişimin 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-stone-700">Ç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-stone-700">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-stone-700">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-stone-700">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-stone-700">Ç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-12 mt-4 sm:grid-cols-6">
                            {{--GELİR BEKLENTİSİ--}}
                            <div class="sm:col-span-3">
                                <label for="revenue_expectation" class="block text-sm font-medium leading-6 text-stone-700">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-stone-700 ring-1 ring-inset ring-gray-300 placeholder:text-stone-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-stone-500 sm:text-sm" id="price-currency">USD</span>
                                    </div>
                                </div>
                            </div>
                            {{--GÖRÜŞLER--}}
                            <div class="sm:col-span-full">
                                <label for="additional_information" class="block text-sm font-medium leading-6 text-stone-700">Varsa ilave
                                    görüşler</label>
                                <div class="mt-2">
                                    <textarea rows="3" type="text" name="additional_information" id="additional_information"
                                           class="block w-full rounded-md bg-stone-50 border-0 py-1.5 text-stone-700 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6 uppercase"
                                              placeholder="Örn; Teklif vermek için bir görüşme daha gerekebilir."></textarea>
                                </div>
                            </div>
                            {{--İLETİŞİM METNİ--}}
                            <div class="col-span-full">
                                <label for="content" class="block text-sm font-medium leading-6 text-stone-700">İletişim 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-stone-700 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-gray-600 sm:text-sm sm:leading-6 uppercase"
                                              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-gray-900 to-gray-700 px-3 py-1.5 text-xs font-semibold text-white focus:z-10">
                                              <img class="h-4 w-auto" src="https://cdn.apper.com.tr/img/mistral/mistral_ai_logo-white.webp" alt="">
                                          </span>
                                          <button @click="generateContent" type="button"
                                                  class="relative -ml-px inline-flex items-center rounded-br-md bg-gray-50 px-3 py-1.5 text-xs font-semibold text-stone-700 ring-1 ring-inset ring-gray-300 hover:bg-gray-100/80 focus:z-10">
                                                İLETİŞİM DETAYI OLUŞTUR
                                          </button>
                                    </span>
                                </div>
                            </div>
                            {{--TARİH--}}
                            <div class="sm:col-span-2 sm:col-start-1">
                                <label for="date" class="block text-sm font-medium leading-6 text-stone-700">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-stone-700 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-stone-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' => 'İLETİŞİMİ İ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' => 'İLETİŞİM 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('input[name="communication"]:checked').value},
                                        Hangi ürün/hizmet hakkında konuşuldu -tartışmak: ${document.querySelector('input[name="product_name"]').value},
                                        İlave yorum: ${document.querySelector('textarea[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