@extends('layouts.app')

@section('content')

<div class="container" >

    <h4>Task Preview (Editable)</h4>

    <form action="{{ route('tasks.save', [$id, $group]) }}" method="POST"style="background-color: #f8f9fa; padding: 20px; border-radius: 8px;">
        @csrf

        <!-- Editable rendered HTML -->
        <div id="editor"
             contenteditable="true"
             class="docx-container border p-3"
             style="min-height:400px;">
            {!! $htmlContent !!}
        </div>

        <!-- Hidden input to submit edited HTML -->
        <input type="hidden" name="htmlContent" id="htmlContent">

        <button class="btn btn-success mt-3">Save Changes</button>
        <a href="/default_home" class="btn btn-secondary mx-3 mt-4">← Back</a>
    </form>

</div>

<script>
    // Copy edited HTML before submit
    document.querySelector('form').addEventListener('submit', function () {
        document.getElementById('htmlContent').value =
            document.getElementById('editor').innerHTML;
    });
</script>

@endsection




<style>
.docx-container {
    line-height: 1.5;
    font-size: 16px;
}

.docx-container img {
    max-width: 100%;
    height:70%;
}
</style>