@extends('backend.template.layouts.template-base')
@section('title', 'Legal Policies')

@section('content')
    <div class="container-fluid p-2 legal-policy-page">

        <h3 class="page-title mb-4">Legal Policies</h3>

        <div class="row g-4">

            {{-- ── LEFT: Policy list ──────────────────────────────── --}}
            <div class="col-lg-3 col-md-4">
                <div class="policy-sidebar">

                    <button class="create-policy-btn" onclick="createNew()">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <g clip-path="url(#clip0_lp)">
                                <mask id="mask0_lp" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0"
                                    width="20" height="20">
                                    <path d="M20 0H0V20H20V0Z" fill="white" />
                                </mask>
                                <g mask="url(#mask0_lp)">
                                    <path d="M5 10H15" stroke="white" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path d="M10 15V5" stroke="white" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                </g>
                            </g>
                            <defs>
                                <clipPath id="clip0_lp">
                                    <rect width="20" height="20" fill="white" />
                                </clipPath>
                            </defs>
                        </svg>
                        &nbsp; Create New Policy
                    </button>

                    <div class="policy-list" id="policyList">
                        @forelse($policies as $policy)
                            <div class="policy-item {{ $loop->first ? 'active' : '' }}" data-id="{{ $policy->id }}"
                                onclick="loadPolicy({{ $policy->id }})">
                                <span class="policy-name">{{ $policy->title }}</span>
                                <button class="policy-delete-btn" title="Delete"
                                    onclick="event.stopPropagation(); deletePolicy({{ $policy->id }}, '{{ addslashes($policy->title) }}')">
                                    <i class="ri-delete-bin-line"></i>
                                </button>
                            </div>
                        @empty
                            <p class="text-muted text-center py-3" style="font-size:13px;" id="emptyMsg">
                                No policies yet.
                            </p>
                        @endforelse
                    </div>

                </div>
            </div>

            {{-- ── RIGHT: Editor ──────────────────────────────────── --}}
            <div class="col-lg-9 col-md-8">
                <div class="policy-editor-card">

                    <div class="editor-header">
                        <input type="text" id="policyTitle" class="policy-title-input"
                            placeholder="Type policy name here...">
                        <button class="update-btn" id="savePolicyBtn" onclick="savePolicy()">
                            {{ $policies->isEmpty() ? 'Create Policy' : 'Update Policy' }}
                        </button>
                    </div>

                    <textarea id="policyEditor"></textarea>

                </div>
            </div>

        </div>
    </div>

    {{-- Delete Confirmation Modal --}}
    <div class="modal fade" id="deletePolicyModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered" style="max-width:420px;">
            <div class="modal-content custom-modal">
                <div class="modal-header delete-header" style="height:60px;">
                    <h5 class="mt-2">Delete Policy?</h5>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete <strong id="deletePolicyName"></strong>?
                        This action cannot be undone.</p>
                </div>
                <div class="modal-footer custom-footer">
                    <button class="btn-cancel" data-bs-dismiss="modal">Cancel</button>
                    <button id="deletePolicyConfirm" class="btn-delete-action">Delete</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        const CSRF = "{{ csrf_token() }}";
        const LP_BASE = "{{ url('/admin/legal-policy') }}";

        var editorInstance = null;
        var currentPolicyId = null;
        var policies = @json($policies->map(fn($p) => ['id' => $p->id, 'title' => $p->title, 'content' => $p->content]));

        /* ── Init CKEditor ─────────────────────────────────────────── */
        ClassicEditor.create(document.querySelector('#policyEditor'), {
            toolbar: [
                'heading', '|',
                'bold', 'italic', '|',
                'bulletedList', 'numberedList', '|',
                'link', 'insertTable', 'imageUpload', '|',
                'undo', 'redo'
            ]
        }).then(function(editor) {
            editorInstance = editor;
            if (policies.length > 0) {
                loadPolicy(policies[0].id);
            }
        }).catch(console.error);

        /* ── Load policy into editor ───────────────────────────────── */
        function loadPolicy(id) {
            var policy = policies.find(function(p) {
                return p.id == id;
            });
            if (!policy) return;
            currentPolicyId = id;
            document.getElementById('policyTitle').value = policy.title;
            if (editorInstance) editorInstance.setData(policy.content || '');
            document.querySelectorAll('.policy-item').forEach(function(el) {
                el.classList.remove('active');
            });
            var item = document.querySelector('.policy-item[data-id="' + id + '"]');
            if (item) item.classList.add('active');
            document.getElementById('savePolicyBtn').textContent = 'Update Policy';
        }

        /* ── Create new (clear form) ───────────────────────────────── */
        function createNew() {
            currentPolicyId = null;
            document.getElementById('policyTitle').value = '';
            if (editorInstance) editorInstance.setData('');
            document.querySelectorAll('.policy-item').forEach(function(el) {
                el.classList.remove('active');
            });
            document.getElementById('savePolicyBtn').textContent = 'Create Policy';
            document.getElementById('policyTitle').focus();
        }

        /* ── Save (create or update) ───────────────────────────────── */
        function savePolicy() {
            var title = document.getElementById('policyTitle').value.trim();
            var content = editorInstance ? editorInstance.getData() : '';
            if (!title) {
                toastr.warning('Please enter a policy name.');
                return;
            }

            var url = currentPolicyId ? LP_BASE + '/' + currentPolicyId + '/update' : LP_BASE;
            var $btn = $('#savePolicyBtn').prop('disabled', true).text('Saving…');

            $.ajax({
                url: url,
                type: 'POST',
                data: {
                    _token: CSRF,
                    title: title,
                    content: content
                },
                success: function(res) {
                    var isNew = !currentPolicyId;
                    toastr.success(isNew ? 'Policy created.' : 'Policy updated.');

                    if (isNew) {
                        currentPolicyId = res.policy.id;
                        policies.push({
                            id: res.policy.id,
                            title: res.policy.title,
                            content: res.policy.content
                        });

                        // Remove "No policies yet" message if present
                        var emptyMsg = document.getElementById('emptyMsg');
                        if (emptyMsg) emptyMsg.remove();

                        // Append to sidebar list
                        var div = document.createElement('div');
                        div.className = 'policy-item active';
                        div.setAttribute('data-id', res.policy.id);
                        div.setAttribute('onclick', 'loadPolicy(' + res.policy.id + ')');
                        div.innerHTML =
                            '<span class="policy-name">' + escHtml(res.policy.title) + '</span>' +
                            '<button class="policy-delete-btn" title="Delete" onclick="event.stopPropagation(); deletePolicy(' +
                            res.policy.id + ', \'' + escHtml(res.policy.title) + '\')">' +
                            '<i class="ri-delete-bin-line"></i></button>';
                        document.querySelectorAll('.policy-item').forEach(function(el) {
                            el.classList.remove('active');
                        });
                        document.getElementById('policyList').appendChild(div);
                    } else {
                        // Update in-memory cache
                        var idx = policies.findIndex(function(p) {
                            return p.id == res.policy.id;
                        });
                        if (idx >= 0) {
                            policies[idx].title = res.policy.title;
                            policies[idx].content = res.policy.content;
                        }
                        // Update sidebar label
                        var item = document.querySelector('.policy-item[data-id="' + res.policy.id + '"]');
                        if (item) item.querySelector('.policy-name').textContent = res.policy.title;
                    }
                    $btn.prop('disabled', false).text('Update Policy');
                },
                error: function(xhr) {
                    var msg = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message :
                        'Failed to save.';
                    toastr.error(msg);
                    $btn.prop('disabled', false).text(currentPolicyId ? 'Update Policy' : 'Create Policy');
                }
            });
        }

        /* ── Delete policy ─────────────────────────────────────────── */
        var deletePolicyId = null;

        function deletePolicy(id, name) {
            deletePolicyId = id;
            document.getElementById('deletePolicyName').textContent = name;
            new bootstrap.Modal(document.getElementById('deletePolicyModal')).show();
        }

        $('#deletePolicyConfirm').on('click', function() {
            var $btn = $(this).prop('disabled', true).text('Deleting…');
            $.ajax({
                url: LP_BASE + '/' + deletePolicyId + '/destroy',
                type: 'POST',
                data: {
                    _token: CSRF
                },
                success: function() {
                    toastr.success('Policy deleted.');
                    bootstrap.Modal.getInstance(document.getElementById('deletePolicyModal')).hide();

                    policies = policies.filter(function(p) {
                        return p.id != deletePolicyId;
                    });
                    var item = document.querySelector('.policy-item[data-id="' + deletePolicyId + '"]');
                    if (item) item.remove();

                    if (currentPolicyId == deletePolicyId) {
                        currentPolicyId = null;
                        document.getElementById('policyTitle').value = '';
                        if (editorInstance) editorInstance.setData('');
                        document.getElementById('savePolicyBtn').textContent = 'Create Policy';

                        // Load next available policy or show empty message
                        if (policies.length > 0) {
                            loadPolicy(policies[0].id);
                        } else {
                            var p = document.createElement('p');
                            p.id = 'emptyMsg';
                            p.className = 'text-muted text-center py-3';
                            p.style.fontSize = '13px';
                            p.textContent = 'No policies yet.';
                            document.getElementById('policyList').appendChild(p);
                        }
                    }
                    $btn.prop('disabled', false).text('Delete');
                },
                error: function() {
                    toastr.error('Failed to delete.');
                    $btn.prop('disabled', false).text('Delete');
                }
            });
        });

        function escHtml(str) {
            return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
                .replace(/'/g, '&#39;');
        }
    </script>
@endsection