@extends('layouts.dashboard')
@section('title', 'Site Settings')
@section('page-title', 'Site Settings')
@section('content')

<ul class="nav nav-tabs mb-4" style="border-bottom: 2px solid var(--accent);">
    <li class="nav-item"><a class="nav-link {{ $tab === 'general' ? 'active' : '' }}" href="{{ route('admin.settings.edit', ['tab'=>'general']) }}">General</a></li>
    <li class="nav-item"><a class="nav-link {{ $tab === 'seo' ? 'active' : '' }}" href="{{ route('admin.settings.edit', ['tab'=>'seo']) }}">SEO</a></li>
    <li class="nav-item"><a class="nav-link {{ $tab === 'security' ? 'active' : '' }}" href="{{ route('admin.settings.edit', ['tab'=>'security']) }}">Security &amp; reCAPTCHA</a></li>
    <li class="nav-item"><a class="nav-link {{ $tab === 'templates' ? 'active' : '' }}" href="{{ route('admin.settings.edit', ['tab'=>'templates']) }}">Email Templates</a></li>
    <li class="nav-item"><a class="nav-link {{ $tab === 'smtp' ? 'active' : '' }}" href="{{ route('admin.settings.edit', ['tab'=>'smtp']) }}">SMTP</a></li>
    <li class="nav-item"><a class="nav-link {{ $tab === 'payment' ? 'active' : '' }}" href="{{ route('admin.settings.edit', ['tab'=>'payment']) }}">Payment Gateways</a></li>
</ul>

@if($tab === 'general')
<div class="content-card">
    <h3 class="mb-3">General — Site Identity</h3>
    <p class="text-muted">Site name, logo, favicon, and contact info. Changes take effect immediately.</p>
    <form method="POST" action="{{ route('admin.settings.general') }}" enctype="multipart/form-data">
        @csrf @method('PUT')
        <div class="row g-3">
            <div class="col-md-6">
                <label class="form-label">Site Name</label>
                <input type="text" name="site_name" class="form-control" value="{{ old('site_name', setting('site_name', config('app.name'))) }}" required>
                <small class="text-muted">Shown in nav, footer, and browser title.</small>
            </div>
            <div class="col-md-6">
                <label class="form-label">Tagline / Subtitle</label>
                <input type="text" name="site_tagline" class="form-control" value="{{ old('site_tagline', setting('site_tagline')) }}">
            </div>
            <div class="col-md-6">
                <label class="form-label">Contact Email</label>
                <input type="email" name="contact_email" class="form-control" value="{{ old('contact_email', setting('contact_email')) }}">
            </div>
        </div>

        <hr class="my-4">

        <div class="row g-4">
            <div class="col-md-6">
                <label class="form-label">Site Logo</label>
                @if($logo = setting('site_logo'))
                    <div class="mb-2 p-3 rounded" style="background: var(--primary);">
                        <img src="{{ asset('uploads/settings/' . $logo) }}" style="max-height: 80px;">
                    </div>
                    <div class="form-check mb-2">
                        <input type="hidden" name="remove_logo" value="0">
                        <input type="checkbox" name="remove_logo" id="rl" value="1" class="form-check-input">
                        <label for="rl" class="form-check-label small text-danger">Remove current logo</label>
                    </div>
                @endif
                <input type="file" name="site_logo_file" class="form-control" accept="image/*">
                <small class="text-muted">PNG / SVG recommended. Shown on dark background.</small>
            </div>
            <div class="col-md-6">
                <label class="form-label">Favicon</label>
                @if($fav = setting('site_favicon'))
                    <div class="mb-2"><img src="{{ asset('uploads/settings/' . $fav) }}" style="height: 32px; width: 32px; object-fit:contain;"></div>
                    <div class="form-check mb-2">
                        <input type="hidden" name="remove_favicon" value="0">
                        <input type="checkbox" name="remove_favicon" id="rf" value="1" class="form-check-input">
                        <label for="rf" class="form-check-label small text-danger">Remove current favicon</label>
                    </div>
                @endif
                <input type="file" name="site_favicon_file" class="form-control" accept="image/*">
                <small class="text-muted">32×32 or 64×64 PNG / ICO.</small>
            </div>
        </div>

        <div class="mt-4"><button class="btn btn-primary">Save General Settings</button></div>
    </form>
</div>
@endif

@if($tab === 'seo')
<div class="content-card">
    <h3 class="mb-3">SEO — Search & Social Sharing</h3>
    <p class="text-muted">Meta tags, OpenGraph (Facebook/LinkedIn), Twitter cards, and analytics.</p>
    <form method="POST" action="{{ route('admin.settings.seo') }}" enctype="multipart/form-data">
        @csrf @method('PUT')

        <h5 class="mt-3 text-uppercase small" style="color: var(--accent-dark); letter-spacing: .1em;">Search Meta</h5>
        <div class="mb-3">
            <label class="form-label">Meta Title</label>
            <input type="text" name="meta_title" class="form-control" value="{{ old('meta_title', setting('meta_title')) }}" maxlength="200">
            <small class="text-muted">Default browser title for the homepage. Falls back to site name.</small>
        </div>
        <div class="mb-3">
            <label class="form-label">Meta Description</label>
            <textarea name="meta_description" rows="2" class="form-control" maxlength="500">{{ old('meta_description', setting('meta_description')) }}</textarea>
            <small class="text-muted">Shows in Google results. Aim for 150–160 characters.</small>
        </div>
        <div class="mb-3">
            <label class="form-label">Meta Keywords</label>
            <input type="text" name="meta_keywords" class="form-control" value="{{ old('meta_keywords', setting('meta_keywords')) }}">
            <small class="text-muted">Comma-separated. Used by some search engines.</small>
        </div>

        <hr class="my-4">

        <h5 class="text-uppercase small" style="color: var(--accent-dark); letter-spacing: .1em;">OpenGraph (Facebook / LinkedIn / WhatsApp)</h5>
        <div class="mb-3">
            <label class="form-label">OG Title</label>
            <input type="text" name="og_title" class="form-control" value="{{ old('og_title', setting('og_title')) }}">
        </div>
        <div class="mb-3">
            <label class="form-label">OG Description</label>
            <textarea name="og_description" rows="2" class="form-control">{{ old('og_description', setting('og_description')) }}</textarea>
        </div>
        <div class="mb-3">
            <label class="form-label">OG Image (shown when site is shared)</label>
            @if($og = setting('og_image'))
                <div class="mb-2"><img src="{{ asset('uploads/settings/' . $og) }}" style="max-height: 200px; border-radius: 4px;"></div>
                <div class="form-check mb-2">
                    <input type="hidden" name="remove_og_image" value="0">
                    <input type="checkbox" name="remove_og_image" id="rog" value="1" class="form-check-input">
                    <label for="rog" class="form-check-label small text-danger">Remove current OG image</label>
                </div>
            @endif
            <input type="file" name="og_image_file" class="form-control" accept="image/*">
            <small class="text-muted">Recommended: 1200×630 PNG/JPG.</small>
        </div>

        <hr class="my-4">

        <h5 class="text-uppercase small" style="color: var(--accent-dark); letter-spacing: .1em;">Twitter / X</h5>
        <div class="row g-3 mb-3">
            <div class="col-md-6">
                <label class="form-label">Twitter Handle (without @)</label>
                <input type="text" name="twitter_handle" class="form-control" value="{{ old('twitter_handle', setting('twitter_handle')) }}">
            </div>
            <div class="col-md-6">
                <label class="form-label">Twitter Card Type</label>
                <select name="twitter_card" class="form-select">
                    <option value="summary_large_image" {{ setting('twitter_card', 'summary_large_image') === 'summary_large_image' ? 'selected' : '' }}>Summary, large image</option>
                    <option value="summary" {{ setting('twitter_card') === 'summary' ? 'selected' : '' }}>Summary (small image)</option>
                </select>
            </div>
        </div>

        <hr class="my-4">

        <h5 class="text-uppercase small" style="color: var(--accent-dark); letter-spacing: .1em;">Analytics &amp; Verification</h5>
        <div class="mb-3">
            <label class="form-label">Google Analytics Measurement ID</label>
            <input type="text" name="google_analytics" class="form-control" value="{{ old('google_analytics', setting('google_analytics')) }}" placeholder="G-XXXXXXXXXX">
        </div>
        <div class="mb-3">
            <label class="form-label">Google Search Console Verification</label>
            <input type="text" name="google_search_console" class="form-control" value="{{ old('google_search_console', setting('google_search_console')) }}" placeholder='content="abc123..."'>
            <small class="text-muted">Just the verification token, no quotes.</small>
        </div>

        <button class="btn btn-primary">Save SEO Settings</button>
    </form>
</div>
@endif

@if($tab === 'security')
<div class="content-card">
    <h3 class="mb-3">Security — Google reCAPTCHA</h3>
    <p class="text-muted">Protect your forms from spam. Get keys from <a href="https://www.google.com/recaptcha/admin/create" target="_blank">Google reCAPTCHA Admin</a> (choose v2 "I'm not a robot").</p>

    <form method="POST" action="{{ route('admin.settings.security') }}">
        @csrf @method('PUT')

        <div class="form-check form-switch mb-4 p-3 rounded" style="background: rgba(212,175,55,0.08); border-left: 4px solid var(--accent);">
            <input type="hidden" name="recaptcha_enabled" value="0">
            <input type="checkbox" name="recaptcha_enabled" id="re" value="1" class="form-check-input" {{ setting('recaptcha_enabled') ? 'checked' : '' }}>
            <label for="re" class="form-check-label"><strong>Enable Google reCAPTCHA on all front-end forms</strong></label>
            <div class="small text-muted mt-1">Master switch. Even if checked, you also need to fill in keys below for it to actually work.</div>
        </div>

        <div class="row g-3">
            <div class="col-md-6">
                <label class="form-label">Site Key (public)</label>
                <input type="text" name="recaptcha_site_key" class="form-control" value="{{ old('recaptcha_site_key', setting('recaptcha_site_key')) }}">
            </div>
            <div class="col-md-6">
                <label class="form-label">Secret Key (private)</label>
                <input type="text" name="recaptcha_secret_key" class="form-control" value="{{ old('recaptcha_secret_key', setting('recaptcha_secret_key')) }}">
            </div>
        </div>

        <h5 class="mt-4 text-uppercase small" style="color: var(--accent-dark); letter-spacing: .1em;">Apply to which forms?</h5>
        <div class="form-check">
            <input type="hidden" name="recaptcha_on_login" value="0">
            <input type="checkbox" name="recaptcha_on_login" id="rcl" value="1" class="form-check-input" {{ setting('recaptcha_on_login', true) ? 'checked' : '' }}>
            <label for="rcl" class="form-check-label">Login form</label>
        </div>
        <div class="form-check">
            <input type="hidden" name="recaptcha_on_register" value="0">
            <input type="checkbox" name="recaptcha_on_register" id="rcr" value="1" class="form-check-input" {{ setting('recaptcha_on_register', true) ? 'checked' : '' }}>
            <label for="rcr" class="form-check-label">Register form</label>
        </div>
        <div class="form-check mb-4">
            <input type="hidden" name="recaptcha_on_contact" value="0">
            <input type="checkbox" name="recaptcha_on_contact" id="rcc" value="1" class="form-check-input" {{ setting('recaptcha_on_contact', true) ? 'checked' : '' }}>
            <label for="rcc" class="form-check-label">Contact form</label>
        </div>

        <hr class="my-4">
        <h5 class="text-uppercase small" style="color: var(--accent-dark); letter-spacing: .1em;">Blog Content Moderation</h5>
        <div class="mb-3">
            <label class="form-label">Blocked words / phrases</label>
            <textarea name="blog_bad_words" rows="5" class="form-control" placeholder="badword1, bad phrase, anotherword">{{ old('blog_bad_words', setting('blog_bad_words')) }}</textarea>
            <small class="text-muted">When reseller or admin saves a blog, listed words are automatically removed from title, excerpt, and content. Use commas or new lines.</small>
        </div>

        <button class="btn btn-primary">Save Security Settings</button>
    </form>
</div>
@endif

@if($tab === 'templates')
<div class="content-card">
    <h3 class="mb-3">Email Templates</h3>
    <p class="text-muted">Use placeholders like <code>@{{user_name}}</code>, <code>@{{app_name}}</code>, <code>@{{dashboard_link}}</code>, <code>@{{login_link}}</code>, <code>@{{reset_link}}</code>, <code>@{{blog_title}}</code>, <code>@{{blog_link}}</code>, <code>@{{login_time}}</code>, <code>@{{login_ip}}</code>.</p>

    <form method="POST" action="{{ route('admin.settings.templates') }}">
        @csrf @method('PUT')

        <h5 class="text-uppercase small" style="color: var(--accent-dark); letter-spacing: .1em;">User Registration Email</h5>
        <div class="mb-2">
            <label class="form-label">Subject</label>
            <input type="text" name="email_template_welcome_subject" class="form-control" value="{{ old('email_template_welcome_subject', setting('email_template_welcome_subject', $templateDefaults['email_template_welcome_subject'] ?? '')) }}">
        </div>
        <div class="mb-3">
            <label class="form-label">HTML Body</label>
            <textarea name="email_template_welcome_body" rows="8" class="form-control rich-editor">{{ old('email_template_welcome_body', setting('email_template_welcome_body', $templateDefaults['email_template_welcome_body'] ?? '')) }}</textarea>
        </div>

        <h5 class="text-uppercase small" style="color: var(--accent-dark); letter-spacing: .1em;">Login Alert Email</h5>
        <div class="mb-2">
            <label class="form-label">Subject</label>
            <input type="text" name="email_template_login_subject" class="form-control" value="{{ old('email_template_login_subject', setting('email_template_login_subject', $templateDefaults['email_template_login_subject'] ?? '')) }}">
        </div>
        <div class="mb-3">
            <label class="form-label">HTML Body</label>
            <textarea name="email_template_login_body" rows="8" class="form-control rich-editor">{{ old('email_template_login_body', setting('email_template_login_body', $templateDefaults['email_template_login_body'] ?? '')) }}</textarea>
        </div>

        <h5 class="text-uppercase small" style="color: var(--accent-dark); letter-spacing: .1em;">Reset Password Email</h5>
        <div class="mb-2">
            <label class="form-label">Subject</label>
            <input type="text" name="email_template_reset_subject" class="form-control" value="{{ old('email_template_reset_subject', setting('email_template_reset_subject', $templateDefaults['email_template_reset_subject'] ?? '')) }}">
        </div>
        <div class="mb-3">
            <label class="form-label">HTML Body</label>
            <textarea name="email_template_reset_body" rows="8" class="form-control rich-editor">{{ old('email_template_reset_body', setting('email_template_reset_body', $templateDefaults['email_template_reset_body'] ?? '')) }}</textarea>
        </div>

        <h5 class="text-uppercase small" style="color: var(--accent-dark); letter-spacing: .1em;">Blog Published Email</h5>
        <div class="mb-2">
            <label class="form-label">Subject</label>
            <input type="text" name="email_template_blog_subject" class="form-control" value="{{ old('email_template_blog_subject', setting('email_template_blog_subject', $templateDefaults['email_template_blog_subject'] ?? '')) }}">
        </div>
        <div class="mb-3">
            <label class="form-label">HTML Body</label>
            <textarea name="email_template_blog_body" rows="8" class="form-control rich-editor">{{ old('email_template_blog_body', setting('email_template_blog_body', $templateDefaults['email_template_blog_body'] ?? '')) }}</textarea>
        </div>

        <button class="btn btn-primary">Save Email Templates</button>
    </form>
</div>
@endif

@if($tab === 'smtp')
<div class="content-card">
    <h3 class="mb-3">SMTP Settings</h3>
    <p class="text-muted">Configure outgoing email provider. These values override environment mail settings at runtime.</p>

    <form method="POST" action="{{ route('admin.settings.smtp') }}">
        @csrf @method('PUT')
        <div class="row g-3">
            <div class="col-md-4">
                <label class="form-label">Mailer</label>
                <select name="smtp_mailer" class="form-select">
                    @php $mailer = old('smtp_mailer', setting('smtp_mailer', config('mail.default', 'smtp'))); @endphp
                    <option value="smtp" {{ $mailer === 'smtp' ? 'selected' : '' }}>smtp</option>
                    <option value="log" {{ $mailer === 'log' ? 'selected' : '' }}>log</option>
                    <option value="array" {{ $mailer === 'array' ? 'selected' : '' }}>array</option>
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label">Host</label>
                <input type="text" name="smtp_host" class="form-control" value="{{ old('smtp_host', setting('smtp_host', config('mail.mailers.smtp.host'))) }}">
            </div>
            <div class="col-md-2">
                <label class="form-label">Port</label>
                <input type="number" name="smtp_port" class="form-control" value="{{ old('smtp_port', setting('smtp_port', config('mail.mailers.smtp.port'))) }}">
            </div>
            <div class="col-md-2">
                <label class="form-label">Encryption</label>
                <input type="text" name="smtp_encryption" class="form-control" placeholder="tls/ssl" value="{{ old('smtp_encryption', setting('smtp_encryption', config('mail.mailers.smtp.encryption'))) }}">
            </div>
            <div class="col-md-6">
                <label class="form-label">Username</label>
                <input type="text" name="smtp_username" class="form-control" value="{{ old('smtp_username', setting('smtp_username', config('mail.mailers.smtp.username'))) }}">
            </div>
            <div class="col-md-6">
                <label class="form-label">Password</label>
                <input type="password" name="smtp_password" class="form-control" placeholder="Leave blank to keep existing">
            </div>
            <div class="col-md-6">
                <label class="form-label">From Address</label>
                <input type="email" name="smtp_from_address" class="form-control" value="{{ old('smtp_from_address', setting('smtp_from_address', config('mail.from.address'))) }}">
            </div>
            <div class="col-md-6">
                <label class="form-label">From Name</label>
                <input type="text" name="smtp_from_name" class="form-control" value="{{ old('smtp_from_name', setting('smtp_from_name', config('mail.from.name'))) }}">
            </div>
        </div>

        <div class="mt-4">
            <button class="btn btn-primary">Save SMTP Settings</button>
        </div>
    </form>
</div>
@endif

@if($tab === 'payment')
<div class="content-card">
    <h3 class="mb-3">Payment Gateways</h3>
    <p class="text-muted">Enable/disable gateways and configure credentials from admin panel.</p>

    <form method="POST" action="{{ route('admin.settings.payment') }}">
        @csrf @method('PUT')

        <div class="p-3 mb-4 rounded" style="background: rgba(212,175,55,0.08); border-left: 4px solid var(--accent);">
            <h5 class="mb-3">PayPal</h5>
            <div class="form-check mb-3">
                <input type="hidden" name="gateway_paypal_enabled" value="0">
                <input type="checkbox" name="gateway_paypal_enabled" id="gpe" value="1" class="form-check-input" {{ setting('gateway_paypal_enabled', false) ? 'checked' : '' }}>
                <label class="form-check-label" for="gpe">Enable PayPal</label>
            </div>
            <div class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">Mode</label>
                    <select name="gateway_paypal_mode" class="form-select">
                        <option value="sandbox" {{ setting('gateway_paypal_mode', 'sandbox') === 'sandbox' ? 'selected' : '' }}>sandbox</option>
                        <option value="live" {{ setting('gateway_paypal_mode') === 'live' ? 'selected' : '' }}>live</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Currency</label>
                    <input type="text" name="gateway_paypal_currency" class="form-control" value="{{ old('gateway_paypal_currency', setting('gateway_paypal_currency', 'USD')) }}">
                </div>
                <div class="col-md-6">
                    <label class="form-label">Sandbox Client ID</label>
                    <input type="text" name="gateway_paypal_sandbox_client_id" class="form-control" value="{{ old('gateway_paypal_sandbox_client_id', setting('gateway_paypal_sandbox_client_id')) }}">
                </div>
                <div class="col-md-6">
                    <label class="form-label">Sandbox Client Secret</label>
                    <input type="password" name="gateway_paypal_sandbox_client_secret" class="form-control" placeholder="Leave blank to keep existing">
                </div>
                <div class="col-md-6">
                    <label class="form-label">Live Client ID</label>
                    <input type="text" name="gateway_paypal_live_client_id" class="form-control" value="{{ old('gateway_paypal_live_client_id', setting('gateway_paypal_live_client_id')) }}">
                </div>
                <div class="col-md-6">
                    <label class="form-label">Live Client Secret</label>
                    <input type="password" name="gateway_paypal_live_client_secret" class="form-control" placeholder="Leave blank to keep existing">
                </div>
            </div>
        </div>

        <div class="p-3 mb-4 rounded" style="background: rgba(27,59,47,0.06); border-left: 4px solid var(--primary);">
            <h5 class="mb-3">Tap</h5>
            <div class="form-check mb-3">
                <input type="hidden" name="gateway_tap_enabled" value="0">
                <input type="checkbox" name="gateway_tap_enabled" id="gte" value="1" class="form-check-input" {{ setting('gateway_tap_enabled', false) ? 'checked' : '' }}>
                <label class="form-check-label" for="gte">Enable Tap</label>
            </div>
            <div class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">Currency</label>
                    <input type="text" name="gateway_tap_currency" class="form-control" value="{{ old('gateway_tap_currency', setting('gateway_tap_currency', 'USD')) }}">
                </div>
                <div class="col-md-9">
                    <label class="form-label">Base URL</label>
                    <input type="text" name="gateway_tap_base_url" class="form-control" value="{{ old('gateway_tap_base_url', setting('gateway_tap_base_url', 'https://api.tap.company/v2')) }}">
                </div>
                <div class="col-md-6">
                    <label class="form-label">Public Key</label>
                    <input type="text" name="gateway_tap_public_key" class="form-control" value="{{ old('gateway_tap_public_key', setting('gateway_tap_public_key')) }}">
                </div>
                <div class="col-md-6">
                    <label class="form-label">Secret Key</label>
                    <input type="password" name="gateway_tap_secret_key" class="form-control" placeholder="Leave blank to keep existing">
                </div>
            </div>
        </div>

        <button class="btn btn-primary">Save Payment Settings</button>
    </form>
</div>
@endif

@push('head')
<style>
.nav-tabs .nav-link { color: var(--text-muted); border: none; padding: .75rem 1.25rem; font-weight: 600; }
.nav-tabs .nav-link.active { color: var(--primary); background: transparent; border-bottom: 3px solid var(--accent); margin-bottom: -2px; }
.nav-tabs .nav-link:hover { color: var(--accent-dark); border: none; }
</style>
<link href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.css" rel="stylesheet">
@endpush
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const editors = document.querySelectorAll('textarea.rich-editor');
    if (!editors.length) return;

    function initEditors() {
        editors.forEach(function (textarea, i) {
            const wrapper = document.createElement('div');
            wrapper.style.background = '#fff';
            wrapper.style.borderRadius = '6px';
            wrapper.id = 'quill-editor-' + i;
            textarea.style.display = 'none';
            textarea.parentNode.insertBefore(wrapper, textarea.nextSibling);

            const quill = new Quill(wrapper, {
                theme: 'snow',
                modules: {
                    toolbar: [
                        [{ header: [1, 2, 3, false] }],
                        ['bold', 'italic', 'underline'],
                        [{ list: 'ordered' }, { list: 'bullet' }],
                        ['link', 'blockquote', 'code-block'],
                        ['clean']
                    ]
                }
            });

            quill.root.innerHTML = textarea.value || '';

            const form = textarea.closest('form');
            if (form) {
                form.addEventListener('submit', function () {
                    textarea.value = quill.root.innerHTML;
                });
            }
        });
    }

    if (window.Quill) {
        initEditors();
    } else {
        const script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js';
        script.onload = initEditors;
        document.body.appendChild(script);
    }
});
</script>
@endpush
@endsection
