@extends('layout')

@section('content')
    <div class="container py-4">
        <!-- ✅ Summary -->
        <div class="row">
            <!-- ✅ User Privacy -->
            <div class="col-md-6 mb-4">
                <div class="card p-4 shadow-sm border h-100">
                    <h2 class="h4">Privacy Policy for User</h2>
                    <p>{!! \Illuminate\Support\Str::limit(strip_tags($userPrivacy->privacy_policy ?? 'No content available.'), 150) !!}</p>
                    <div class="mt-3">
                        <button type="button" class="RedirectButton" data-bs-toggle="modal"
                            data-bs-target="#editUserPrivacyModal">Edit</button>
                    </div>
                </div>
            </div>

            <!-- ✅ Partner Privacy -->
            <div class="col-md-6 mb-4">
                <div class="card p-4 shadow-sm border h-100">
                    <h2 class="h4">Privacy Policy for Partner</h2>
                    <p>{!! \Illuminate\Support\Str::limit(strip_tags($partnerPrivacy->privacy_policy ?? 'No content available.'), 150) !!}</p>
                    <div class="mt-3">
                        <button type="button" class="RedirectButton" data-bs-toggle="modal"
                            data-bs-target="#editPartnerPrivacyModal">Edit</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- ✅ Full View -->
        <div class="row">
            <!-- User Full -->
            <div class="col-md-6 mb-4">
                <div class="card p-4 shadow-sm border h-100">
                    <h2 class="h5">Full Privacy Policy (User)</h2>
                    <div style="max-height: 340px; overflow-y: auto;">
                        {!! $userPrivacy->privacy_policy ?? '<p>No privacy policy available.</p>' !!}
                    </div>
                </div>
            </div>

            <!-- Partner Full -->
            <div class="col-md-6 mb-4">
                <div class="card p-4 shadow-sm border h-100">
                    <h2 class="h5">Full Privacy Policy (Partner)</h2>
                    <div style="max-height: 340px; overflow-y: auto;">
                        {!! $partnerPrivacy->privacy_policy ?? '<p>No privacy policy available.</p>' !!}
                    </div>
                </div>
            </div>
        </div>

        <!-- ✅ Modal for User -->
        <div class="modal fade" id="editUserPrivacyModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-xl modal-dialog-centered">
                <div class="modal-content">
                    <form method="POST" action="{{ route('privacy.update') }}">
                        @csrf
                        <input type="hidden" name="type" value="user">
                        <div class="modal-header">
                            <h5 class="modal-title">Edit Privacy Policy (User)</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <textarea id="userPrivacyEditor" name="privacy_policy" style="min-height: 300px;">{!! old('privacy_policy', $userPrivacy->privacy_policy ?? '') !!}</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>

        <!-- ✅ Modal for Partner -->
        <div class="modal fade" id="editPartnerPrivacyModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-xl modal-dialog-centered">
                <div class="modal-content">
                    <form method="POST" action="{{ route('privacy.update') }}">
                        @csrf
                        <input type="hidden" name="type" value="partner">
                        <div class="modal-header">
                            <h5 class="modal-title">Edit Privacy Policy (Partner)</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <textarea id="partnerPrivacyEditor" name="privacy_policy" style="min-height: 300px;">{!! old('privacy_policy', $partnerPrivacy->privacy_policy ?? '') !!}</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 -->
    <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 -->
    <script src="https://cdn.tiny.cloud/1/nn13fnj9bbbeowqf4ch8jrv17ntoxal5n0wpgo1oc2j29h0v/tinymce/7/tinymce.min.js"
        referrerpolicy="origin"></script>
    <script>
        tinymce.init({
            selector: '#userPrivacyEditor, #partnerPrivacyEditor',
            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