@extends('layouts.app')

@section('title', $layoutTitle)

@section('content')
<div class="legal-disclaimer-admin">
    <div class="page-header-bar">
        <div class="header-title-row">
            <div class="page-title-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
            </div>
            <div>
                <h1 class="page-title">{{ $pageHeading }}</h1>
                <p class="page-subtitle">{!! $adminSubtitle !!}</p>
            </div>
        </div>
    </div>

    @if($errors->any())
        <div class="alert alert-error legal-disclaimer-alert" role="alert">
            <strong>Please fix the errors below.</strong>
            <ul class="legal-disclaimer-error-list">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
        </div>
    @endif

    <div id="legalRichPageAjaxErrors" class="alert alert-error legal-disclaimer-alert" style="display:none;" role="alert" aria-live="polite"></div>

    <form method="post" action="{{ $formAction }}" class="legal-disclaimer-form" id="{{ $formId }}">
        @csrf
        @method('PUT')
        <div class="legal-disclaimer-card card">
            <div class="card-section-header">
                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
                {{ $cardSectionTitle }}
            </div>
            <div class="legal-disclaimer-fields">
                <div class="form-group">
                    <label class="form-label" for="{{ $fieldPrefix }}_page_title">Page title</label>
                    <input class="form-input" id="{{ $fieldPrefix }}_page_title" name="{{ $fieldPrefix }}[page_title]" value="{{ old($fieldPrefix.'.page_title', $document['page_title']) }}" required maxlength="500">
                </div>
                <div class="form-group form-group--editor">
                    <label class="form-label" for="{{ $textareaId }}">Page body (all sections)</label>
                    <textarea id="{{ $textareaId }}" name="{{ $fieldPrefix }}[content]" class="form-input legal-disclaimer-editor-source" rows="12" required>{!! old($fieldPrefix.'.content', $document['content']) !!}</textarea>
                </div>
            </div>
            <div class="legal-disclaimer-actions">
                <button type="submit" class="btn-primary">Save</button>
            </div>
        </div>
    </form>
</div>
@endsection

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-lite.min.css">
<style>
.legal-disclaimer-admin .page-header-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.legal-disclaimer-admin .header-title-row { display: flex; align-items: center; gap: 0.85rem; }
.legal-disclaimer-admin .page-title-icon {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent); flex-shrink: 0;
}
.legal-disclaimer-admin .page-title { font-size: 1.5rem; font-weight: 700; margin: 0; color: var(--text,#111); letter-spacing: -0.3px; line-height: 1.2; }
.legal-disclaimer-admin .page-subtitle { margin: 0.15rem 0 0; font-size: 0.845rem; color: var(--text-muted,#888); }
.legal-disclaimer-admin .page-subtitle code { font-size: 0.8em; }

.legal-disclaimer-alert { margin-bottom: 1rem; }
.legal-disclaimer-error-list { margin: 0.5rem 0 0; padding-left: 1.25rem; }

.legal-disclaimer-card {
    border-radius: 14px;
    padding: 1.5rem 1.75rem 1.65rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
    border: 1px solid var(--border,#e8e8e8);
    background: var(--card-bg,#fff);
}
.legal-disclaimer-admin .card-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted,#999);
    margin-bottom: 1.25rem;
    padding-bottom: 0.85rem;
    border-bottom: 1.5px solid var(--border,#f0f0f0);
}
.legal-disclaimer-admin .card-section-header svg { color: var(--accent); flex-shrink: 0; }

.legal-disclaimer-fields { display: flex; flex-direction: column; gap: 1.1rem; }
.legal-disclaimer-admin .form-group { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; min-width: 0; }
.legal-disclaimer-admin .form-group--editor .note-editor { margin-top: 0.25rem; }
.legal-disclaimer-admin .form-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted,#888);
}
.legal-disclaimer-admin .form-input {
    padding: 0.6rem 0.9rem;
    border: 1.5px solid var(--border,#e0e0e0);
    border-radius: 9px;
    font-size: 0.925rem;
    background: var(--card-bg,#fff);
    color: var(--text,#111);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
}
.legal-disclaimer-admin .form-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.legal-disclaimer-admin .legal-disclaimer-editor-source { display: none; }

.legal-disclaimer-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1.5px solid var(--border,#f0f0f0);
}
.legal-disclaimer-admin .legal-disclaimer-actions .btn-primary,
.legal-disclaimer-admin .legal-disclaimer-actions button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.65rem 1.35rem;
    background: var(--accent);
    color: #fff !important;
    border: none;
    border-radius: 9px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 28%, transparent);
}
.legal-disclaimer-admin .legal-disclaimer-actions .btn-primary:hover,
/* .legal-disclaimer-admin .legal-disclaimer-actions button[type="submit"]:disabled {
    opacity: 0.75;
    cursor: not-allowed;
    transform: none;
} */
</style>
@endpush

@push('scripts')
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.20/dist/summernote-lite.min.js"></script>
<script>
(function () {
    var ta = document.getElementById({!! json_encode($textareaId) !!});
    var form = document.getElementById({!! json_encode($formId) !!});
    if (!ta || !form || typeof jQuery === 'undefined') return;

    var fieldPrefix = {!! json_encode($fieldPrefix) !!};

    function legalRichEncodeContentForStorage(html) {
        try {
            return 'b64:' + btoa(unescape(encodeURIComponent(String(html))));
        } catch (e) {
            return html;
        }
    }

    jQuery(ta).summernote({
        placeholder: {!! json_encode($editorPlaceholder ?? 'Add headings, paragraphs, lists, and links.') !!},
        tabsize: 2,
        height: 480,
        dialogsInBody: true,
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'italic', 'underline', 'clear']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['insert', ['link', 'hr']],
            ['view', ['fullscreen', 'codeview', 'help']]
        ]
    });

    form.addEventListener('submit', function (e) {
        e.preventDefault();
        if (jQuery(ta).summernote) {
            ta.value = jQuery(ta).summernote('code');
        }

        var ajaxErr = document.getElementById('legalRichPageAjaxErrors');
        if (ajaxErr) {
            ajaxErr.style.display = 'none';
            ajaxErr.innerHTML = '';
        }

        var submitBtn = form.querySelector('button[type="submit"]');
        var prevBtnText = submitBtn ? submitBtn.textContent : '';
        if (submitBtn) {
            submitBtn.disabled = true;
            submitBtn.textContent = 'Saving...';
        }

        var tokenMeta = document.querySelector('meta[name="csrf-token"]');
        var token = tokenMeta ? tokenMeta.getAttribute('content') : '';
        if (!token && form.querySelector('[name="_token"]')) {
            token = form.querySelector('[name="_token"]').value;
        }

        var rawHtml = ta.value;
        var encodedBody = legalRichEncodeContentForStorage(rawHtml);

        var fd = new FormData(form);
        console.log(encodedBody);
        fd.set(fieldPrefix + '[content]', encodedBody);

        // PHP does not populate multipart body for HTTP PUT; use POST + Laravel _method spoof (already in form).
        fetch(form.action, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': token || ''
            },
            body: fd,
            credentials: 'same-origin'
        }).then(function (res) {
            return res.text().then(function (text) {
                var data = {};
                try {
                    data = text ? JSON.parse(text) : {};
                } catch (ignore) {}
                return { ok: res.ok, status: res.status, data: data };
            });
        }).then(function (result) {
            if (submitBtn) {
                submitBtn.disabled = false;
                submitBtn.textContent = prevBtnText;
            }
            if (result.ok && result.data && result.data.message) {
                if (typeof Swal !== 'undefined') {
                    Swal.fire({ toast: true, position: 'top-end', icon: 'success', title: result.data.message, showConfirmButton: false, timer: 4500, timerProgressBar: true, background: '#fff', color: '#1a1a1a' });
                }
                return;
            }
            var msg = (result.data && result.data.message) ? result.data.message : 'Could not save. Please try again.';
            if (result.status === 419) {
                msg = 'Session expired. Please refresh the page and try again.';
            }
            var html = '<strong>' + msg + '</strong>';
            if (result.data && result.data.errors) {
                var items = [];
                Object.keys(result.data.errors).forEach(function (k) {
                    var arr = result.data.errors[k];
                    if (Array.isArray(arr)) {
                        arr.forEach(function (line) { items.push('<li>' + String(line).replace(/</g, '&lt;') + '</li>'); });
                    }
                });
                if (items.length) {
                    html += '<ul class="legal-disclaimer-error-list">' + items.join('') + '</ul>';
                }
            }
            if (ajaxErr) {
                ajaxErr.innerHTML = html;
                ajaxErr.style.display = 'block';
            } else if (typeof Swal !== 'undefined') {
                Swal.fire({ toast: true, position: 'top-end', icon: 'error', title: msg, showConfirmButton: false, timer: 5500, timerProgressBar: true, background: '#fff', color: '#1a1a1a' });
            }
        }).catch(function () {
            if (submitBtn) {
                submitBtn.disabled = false;
                submitBtn.textContent = prevBtnText;
            }
            if (ajaxErr) {
                ajaxErr.innerHTML = '<strong>Network error. Please check your connection and try again.</strong>';
                ajaxErr.style.display = 'block';
            }
        });
    });
})();
</script>
@endpush