@extends('layouts.app')

@section('content')

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

        <div class="grid grid-cols-3 pt-10 gap-x-8 gap-y-8 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="flex-1 w-0 pb-1 pl-2">
                    <dl>
                        <dd>
                            <div class="text-2xl font-bold text-{{ $opportunity_color }}-600">YENİ GÖREV 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">İletişim 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 px-4 py-3 text-lg tracking-tighter border-0 rounded-md shadow-sm bg-stone-50 text-stone-700 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 border-t-2 border-dashed sm:p-8 border-stone-600/10">

                    <h3 class="pb-4 text-base leading-6 text-stone-400">İletişim için yeni görev/ler oluştur</h3>

                    <div class="grid grid-cols-1 gap-6 max-w-7xl sm:grid-cols-6">
                        <!-- ROWS -->
                        <div class="col-span-full">
                            <div id="invoice"
                                class="px-6 py-6 mx-auto bg-white shadow-sm max-w-7xl 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="flex items-center text-sm leading-6 tracking-tighter text-violet-800">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                        class="mr-2 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>
                                    İletişim metni içerisinden, yapay zeka ile oluşturulmuş potansiyel görevler
                                </h3>
                                <p class="pb-4 pl-6 text-xs text-stone-400">Her yeni satır yeni bir görev 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 px-4 py-4 border-t gap-x-4 bg-gradient-to-l from-stone-900/10 rounded-b-xl 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' => 'GÖREV/LER 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