@extends('layouts.app')
@section('title', $text->exists ? "Editer un texte" : "Créer un texte")
@section('side_bar')
@include('layouts.admin.side_bar_dashboard')
@endsection
@section('content')


<div class="container">
    <h4>@yield('title')</h4>
    <div class="card shadow p-3 mb-4">
        <div id="textValue" data-content="{{ json_encode($text->body) }}"></div>

        <form action="{{ route($text->exists ? 'texts.update' : 'texts.store', ['text' => $text, 'container' => $container->id]) }}" method="post">
            @csrf
            @method($text->exists ? 'PUT' : 'POST')

            <textarea name="body" id="body" style="display:none;"></textarea>
            <div id="editor">
            </div>

            <div class="mt-3">
                <button class="btn btn-primary" type="submit">
                    {{ $text->exists ? 'Modifier' : 'Créer' }}
                </button>
            </div>
        </form>
    </div>
</div>
{{-- Include Quill library and styles --}}
<link href="{{ asset('css/quil.css') }}" rel="stylesheet">
<script src="{{ asset('js/quil.js') }}"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const quill = new Quill('#editor', {
            theme: 'snow'
        });
        var textValue = JSON.parse(document.getElementById('textValue').getAttribute('data-content'));
        console.log(textValue);

        // Charge le contenu existant dans Quill
        quill.root.innerHTML = textValue;

        quill.on('text-change', function() {
            document.getElementById('body').value = quill.root.innerHTML;
        });
    });
</script>


@endsection