@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 pt-20 -mt-16">
    <div class="px-4 pt-4 mx-auto max-w-screen-2xl pb-60 sm:px-6 lg:px-8">
        <div id="notes-container" class="grid w-full grid-cols-1 gap-4 mx-auto lg:mx-0 lg:max-w-none">
            {{--DÜZENLE--}}
            <div class="grid w-full grid-cols-1 mx-auto min-w-96">
                <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="p-0 mt-3">
                            <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: true,
            menubar: false,
            height: "100vh",
            max_height: "100vh",
            min_height: "50vh",
            autoresize_bottom_margin: 20,
            statusbar: true,
            content_css: tinymce - 5,
        });
</script>
@endsection