@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">
                            tactic
                        </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İ YAPILACAK EKLE</div>
                            </dd>
                        </dl>
                    </div>
                </div>

                <form action="{{ route('tasks.store.opportunity') }}" method="post" accept-charset="UTF-8"
                      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">Fırsat detayları</h3>

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

                            <div class="sm:col-span-4">
                                <label for="combobox" class="block text-sm font-medium leading-6 text-gray-900">İşletme</label>
                                <div class="mt-2">
                                    <input type="text" name="company_name" id="company_name" value="{{ $opportunity->company->name }}" disabled
                                           class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200 sm:text-sm/6"
                                           placeholder="you@example.com">
                                    <input type="text" hidden="" name="company_id" value="{{ $opportunity->company_id }}">
                                </div>
                            </div>
                            <div class="sm:col-span-full">
                                <label for="content" class="block text-sm font-medium leading-6 text-gray-900">Fırsat notu</label>
                                <div class="mt-2">
                                    <label id="content"
                                           class="block w-full text-lg tracking-tighter rounded-md border-0 py-3 px-4 bg-stone-50 text-stone-700 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400
                                              focus:ring-2 focus:ring-inset focus:ring-indigo-600">
                                        {{ $opportunity->content }}
                                    </label>
                                </div>
                            </div>
                        </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 pb-4">Fırsat için yeni yapılacak/lar oluştur</h3>

                        <div class="grid max-w-7xl grid-cols-1 gap-6 sm:grid-cols-6">
                            <!-- ROWS -->
                            <div class="col-span-full">
                                <div id="invoice"
                                     class="mx-auto px-6 max-w-7xl py-6 bg-white shadow-sm ring-1 ring-inset ring-violet-300 sm:rounded-lg lg:col-span-2 lg:row-span-2 lg:row-end-2"
                                     x-data="{
                                                                             rows: {{ json_encode($potential_tasks) }},
                                                                             totalForAllRows: 0,
                                                                             currentIndex: null,
                                                                             addRow() {
                                                                                 this.rows.push('');
                                                                             },
                                                                             removeRow(index) {
                                                                                 if (this.rows[index]) {
                                                                                     this.rows.splice(index, 1);
                                                                                 }
                                                                             },
                                                                             isRowsEmpty() {
                                                                              return this.rows.length === 0;
                                                                             }
                                                                         }"
                                >

                                    <h3 class="text-sm flex items-center leading-6 tracking-tighter text-violet-800">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-stars mr-2" 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>
                                        Fırsat metni içerisinden, yapay zeka ile oluşturulmuş potansiyel yapılacaklar
                                    </h3>
                                    <p class="text-xs text-stone-400 pb-4 pl-6">Her yeni satır yeni bir yapılacak kaydı oluşturur.</p>

                                    <textarea name="rows">
                                        @foreach($potential_tasks as $task)
                                            {!! $task . '<br>'!!}
                                        @endforeach
                                    </textarea>
                                </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' => 'İŞLEMİ İPTAL ETMEK İSTEDİĞİNİZDEN EMİN MİSİNİZ?',
                            'route' => route('dashboard'),
                            'button' => 'VAZGEÇ',
                            'cancel' => 'HAYIR, GERİ DÖN',
                            'confirm' => 'EVET, İPTAL ET'
                            ])
                        @include('modals.confirm', [
                            'title' => 'YAPILACAKLAR OLUŞTURULACAK',
                            'subtitle' => 'DEVAM ETMEK İSTİYOR MUSUNUZ?',
                            'route' => '#',
                            'button' => 'EVET, OLUŞTUR',
                            'cancel' => 'HAYIR, GERİ DÖN',
                            'confirm' => 'OLUŞTUR'
                            ])
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script>
        tinymce.init({
            selector: 'textarea',
            menubar: false,
            toolbar: false,
            statusbar: false,
            language: 'tr_TR',
            forced_root_block: false,
            setup: function (editor) {
                editor.on('keydown', function (e) {
                    if (e.keyCode == 13) {
                        e.preventDefault();
                        editor.insertContent('<br>');

                        // İşaretçiyi yeni satırın başına taşı
                        var range = editor.selection.getRng();
                        var brElement = range.startContainer.nextSibling;
                        if (brElement && brElement.nodeName === 'BR') {
                            var newRange = document.createRange();
                            newRange.setStartAfter(brElement);
                            newRange.setEndAfter(brElement);
                            editor.selection.setRng(newRange);
                        } else {
                            // Eğer <br> etiketi bulunamazsa, işaretçiyi son konuma yerleştir
                            var newRange = document.createRange();
                            newRange.setStart(range.startContainer, range.startOffset + 1);
                            newRange.setEnd(range.startContainer, range.startOffset + 1);
                            editor.selection.setRng(newRange);
                        }
                    }
                });
            },
        });
    </script>
@endsection