@extends('layouts.appLayout')

@section('title', 'Mi Nota')
@section('nav_title', 'Mi Nota')

@section('content')

    <div class="container mt-5">

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('myProfilePage') }}">Profile</a></li>
        <li class="breadcrumb-item" aria-current="page"><a href="{{ route('myNotesPage') }}">My Notes</a></li>
        <li class="breadcrumb-item active" aria-current="page">{{$note->title}}</li>
    </ol>
</nav>
@if (session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif
        {{-- Formulario de edición de la nota --}}
        <form method="POST" action="{{ route('note.update', $note->id) }}">
            @csrf
            @method('PUT')

            {{-- Campo de título --}}
            <div class="mb-3 text-white">
                <label for="title" class="form-label inputTextLong">Título de la Nota</label>
                <input type="text" name="title" id="title" class="form-control text-white inputTextLong" value="{{ old('title', $note->title) }}" required>
            </div>

            {{-- Campo de contenido (CKEditor) --}}
            <div class="mb-3">
                <textarea name="content" id="editor1" rows="10" class="form-control">{{ old('content', $note->content) }}</textarea>
            </div>

            <div class="d-flex d-md-block gap-2 mt-4">
                <button type="submit" class="btn btn2 flex-fill">Guardar Cambios</button>
                <a href="{{ route('myNotesPage') }}" class="btn btn1 flex-fill">Volver</a>
            </div>
        </form>
        <br>
    </div>
@endsection

@push('scripts')
    {{-- Cargar CKEditor --}}
    <script>
        // Configuración personalizada de CKEditor con la barra de herramientas completa
        CKEDITOR.replace('editor1', {
            height: 400,  // Aumentar la altura del área de edición
            toolbar: [
                { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'] },
                { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote'] },
                { name: 'insert', items: ['Link', 'Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar'] },
                { name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },
                { name: 'colors', items: ['TextColor', 'BGColor'] },
                { name: 'tools', items: ['Maximize'] },
                { name: 'editing', items: ['Scayt'] }
            ]
        });
    </script>
@endpush
