@extends('layout')

@section('content')
    <div class="container py-4">
        <!-- ✅ Summary Card -->
        <div class="card p-4 shadow-sm border mb-4">
            <h2 class="h4">About Us</h2>
            <p>
                {!! \Illuminate\Support\Str::limit(strip_tags($data->about_us ?? 'No content available.'), 150) !!}
            </p>
            <div class="mt-3">
                <button type="button" class="RedirectButton" data-bs-toggle="modal" data-bs-target="#editModal">Edit</button>

            </div>
        </div>

        <!-- ✅ Full About Us Card with Scroll -->
        <div class="card p-4 shadow-sm border mb-4">
            <h2 class="h5">Full About Us</h2>
            <div style="max-height: 340px; overflow-y: auto;">
                {!! $data->about_us ?? '<p>No About Us content available.</p>' !!}
            </div>
        </div>

        <!-- ✅ Edit Modal -->
        <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl modal-dialog-centered">
                <div class="modal-content">
                    <form method="POST" action="{{ route('about.update') }}">
                        @csrf
                        <div class="modal-header">
                            <h5 class="modal-title">Edit About Us</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>

                        <div class="modal-body">
                            <textarea id="aboutEditor" name="about_us">{!! old('about_us', $data->about_us ?? '') !!}</textarea>
                        </div>

                        <div class="modal-footer">
                            <button type="submit" class="btn btn-success">Save</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>

    <!-- ✅ Bootstrap CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    <!-- ✅ TinyMCE CDN -->
    <script src="https://cdn.tiny.cloud/1/nn13fnj9bbbeowqf4ch8jrv17ntoxal5n0wpgo1oc2j29h0v/tinymce/7/tinymce.min.js"
        referrerpolicy="origin"></script>

    <!-- ✅ TinyMCE Init -->
    <script>
        tinymce.init({
            selector: '#aboutEditor',
            plugins: [
                'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount',
                'checklist mediaembed pageembed tableofcontents footnotes mergetags autocorrect markdown'
            ],
            toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | align lineheight | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
            height: 300,
            branding: false,
        });
    </script>
@endsection