@extends('layouts.admin')

@section('title', 'Privacy & Legal Content')
@section('header', 'Privacy & Legal Content')

@section('content')
<div class="page-header">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1>Privacy & Legal Content</h1>
            <p>Update the platform's legal content displayed to users.</p>
        </div>
    </div>
</div>

<div class="row g-4">
    <div class="col-12">
        <div class="table-card">
            <div class="card-header bg-transparent">
                <h5 class="mb-0 fw-bold">Privacy & Legal Content</h5>
            </div>
            <div class="p-4">
                <form action="{{ route('admin.settings.update') }}" method="POST">
                    @csrf
                    <input type="hidden" name="redirect_to" value="admin.settings.privacy">

                    <div class="row gy-3">
                        <div class="col-12">
                            <label class="form-label fw-semibold">Terms of Service</label>
                            <textarea name="legal_terms" class="form-control rich-text-editor" rows="8">{{ $settings['legal_terms'] ?? 'Use of this platform is subject to account, order, payment, cancellation and support policies.' }}</textarea>
                            <small class="text-muted">You can use simple HTML like &lt;p&gt;, &lt;strong&gt;, &lt;ul&gt;, and &lt;li&gt;.</small>
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-semibold">Privacy Policy</label>
                            <textarea name="legal_privacy" class="form-control rich-text-editor" rows="8">{{ $settings['legal_privacy'] ?? 'We process customer, store, driver, location and order data to operate delivery and support workflows.' }}</textarea>
                            <small class="text-muted">HTML content is rendered on the public legal pages.</small>
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-semibold">Refund Policy</label>
                            <textarea name="legal_refund" class="form-control rich-text-editor" rows="6">{{ $settings['legal_refund'] ?? 'Refund eligibility depends on payment status, store acceptance, delivery progress and support review.' }}</textarea>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Legal Contact Email</label>
                            <input type="email" name="legal_contact_email" class="form-control" value="{{ $settings['legal_contact_email'] ?? ($settings['contact_email'] ?? config('mail.from.address')) }}">
                            <small class="text-muted">Shown on public legal pages and help sections.</small>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary mt-3">Save Privacy & Legal</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.rich-text-editor').forEach(function (textarea) {
            if (textarea.dataset.initialized === 'true') {
                return;
            }

            textarea.dataset.initialized = 'true';

            const wrapper = document.createElement('div');
            wrapper.className = 'border rounded p-2 bg-white';
            textarea.parentNode.insertBefore(wrapper, textarea);
            wrapper.appendChild(textarea);

            const toolbar = document.createElement('div');
            toolbar.className = 'btn-group btn-group-sm mb-2';
            toolbar.innerHTML = [
                ['Bold', '<strong>B</strong>', 'bold'],
                ['Italic', '<em>I</em>', 'italic'],
                ['Paragraph', '<p>P</p>', 'paragraph'],
                ['Bullet List', '<ul><li>•</li></ul>', 'list']
            ].map(function (item) {
                return '<button type="button" class="btn btn-outline-secondary" data-action="' + item[2] + '">' + item[1] + '</button>';
            }).join('');
            wrapper.insertBefore(toolbar, textarea);

            toolbar.querySelectorAll('button').forEach(function (button) {
                button.addEventListener('click', function () {
                    const action = this.dataset.action;
                    const selectionStart = textarea.selectionStart;
                    const selectionEnd = textarea.selectionEnd;
                    const selected = textarea.value.substring(selectionStart, selectionEnd) || 'Text';

                    let inserted = '';
                    if (action === 'bold') {
                        inserted = '<strong>' + selected + '</strong>';
                    } else if (action === 'italic') {
                        inserted = '<em>' + selected + '</em>';
                    } else if (action === 'paragraph') {
                        inserted = '<p>' + selected + '</p>';
                    } else if (action === 'list') {
                        inserted = '<ul><li>' + selected + '</li></ul>';
                    }

                    if (inserted) {
                        textarea.value = textarea.value.substring(0, selectionStart) + inserted + textarea.value.substring(selectionEnd);
                        textarea.focus();
                        const cursorPos = selectionStart + inserted.length;
                        textarea.setSelectionRange(cursorPos, cursorPos);
                    }
                });
            });
        });
    });
</script>
@endpush