@extends('layouts.app')

@section('head')
    <script src="https://cdn.tiny.cloud/1/opnb5tiaxvfkkojbej4xw1cr9h524cvb9aaw2srmg8t13cf9/tinymce/7/tinymce.min.js"
            referrerpolicy="origin"></script>
@endsection

@section('styles')

@endsection

@section('content')

    @include('components.alert')

    <main class="min-h-screen -mt-16 pt-20">
        <div class="mx-auto max-w-screen-2xl px-4 pt-4 pb-60 sm:px-6 lg:px-8">
            <div id="notes-container" class="mx-auto grid w-full grid-cols-1 gap-4 lg:mx-0 lg:max-w-none">
                {{--DÜZENLE--}}
                <div class="grid min-w-96 w-full mx-auto grid-cols-1">
                    <form method="post" action="{{ route('note.update') }}" enctype="multipart/form-data"
                          class="bg-white p-3 rounded-lg border-2 border-{{ $note->color }}-300">
                        @csrf
                        @method('post')

                        <input type="hidden" name="id" value="{{ $note->id }}">

                        <div class="overflow-hidden">
                            <div>
                                <label for="title" class="block pl-1 text-sm leading-6 text-gray-500">Not Başlığı</label>
                                <input type="text" name="title" value="{{ $note->title }}" id="title"
                                       class="block w-full rounded-md border-0 py-2 px-3 text-gray-900 ring-1 ring-inset ring-{{ $note->color }}-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-{{ $note->color }}-600 sm:text-sm sm:leading-6">
                            </div>
                            <div class="mt-3 p-0">
                                <label for="content" class="block pl-1 text-sm leading-6 text-gray-500">Not detayı</label>
                                <textarea name="content" id="content" rows="4" class="w-full">{{ $note->content }}</textarea>
                            </div>
                        </div>

                        <div class="pt-2">
                            <div class="flex items-center justify-between">
                                <div class="flex">
                                    <select name="company_id"
                                            class="block w-full rounded-md border-0 py-1.5 px-3 mr-3 text-gray-900 ring-1 ring-inset ring-{{ $note->color }}-300 focus:ring-2 focus:ring-{{ $note->color }}-600 sm:text-sm sm:leading-6">
                                        <option value="" selected>Kişisel not</option>
                                        @foreach($companies_all as $company)
                                            <option {{ $note->company_id == $company->id ? 'selected' : '' }} value="{{ $company->id }}">{{ $company->name }}</option>
                                        @endforeach
                                    </select>
                                    <select name="color"
                                            class="block w-full rounded-md border-0 py-1.5 px-3 text-gray-900 ring-1 ring-inset ring-{{ $note->color }}-300 focus:ring-2 focus:ring-{{ $note->color }}-600 sm:text-sm sm:leading-6">
                                        @foreach($colors_all as $color)
                                            <option {{ $note->color == $color->code ? 'selected' : '' }} value="{{ $color->code }}">{{ $color->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="flex">
                                </div>
                                <div class="flex-shrink-0">
                                    <x-button-black click="" type="submit" ring="{{ $note->color }}">
                                        GÜNCELLE
                                    </x-button-black>
                                </div>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </main>

@endsection

@section('scripts')
    <script>
        tinymce.init({
            selector: 'textarea',
            plugins: 'autoresize',
            toolbar: false,
            menubar: false,
            max_height: 800,
            statusbar: false,
            content_css: tinymce - 5,
        });
    </script>
@endsection