@extends('admin.layouts.app')

@section('title', 'Settings')
@section('subtitle', 'Control branding, contact details, notification emails, and the global actions used across the site.')

@section('content')
    <form id="refresh-dashboard-data-form" method="POST" action="{{ route('admin.settings.refresh-dashboard-data') }}">
        @csrf
    </form>

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

        <div class="admin-grid admin-grid--two">
            <div class="admin-card">
                <p class="admin-section-title">Branding</p>
                <div class="mt-4 admin-form-grid">
                    <div class="admin-field">
                        <label for="site-name">Site name</label>
                        <input id="site-name" type="text" name="site_name" value="{{ old('site_name', $setting->site_name ?? '') }}">
                    </div>
                    <div class="admin-field">
                        <label for="site-tagline">Tagline</label>
                        <input id="site-tagline" type="text" name="tagline" value="{{ old('tagline', $setting->tagline ?? '') }}">
                    </div>
                    @include('admin.partials.media-picker', [
                        'label' => 'Logo',
                        'name' => 'logo_media_id',
                        'fieldId' => 'settings-logo-media',
                        'value' => old('logo_media_id', $setting->logo_media_id ?? null),
                    ])
                    @include('admin.partials.media-picker', [
                        'label' => 'Favicon',
                        'name' => 'favicon_media_id',
                        'fieldId' => 'settings-favicon-media',
                        'value' => old('favicon_media_id', $setting->favicon_media_id ?? null),
                    ])
                </div>

                <details class="admin-advanced-panel mt-5">
                    <summary>Legacy asset paths</summary>
                    <div class="mt-4 admin-form-grid admin-form-grid--two">
                        <div class="admin-field">
                            <label for="logo-path">Legacy logo path</label>
                            <input id="logo-path" type="text" name="logo" value="{{ old('logo', $setting->logo ?? '') }}">
                        </div>
                        <div class="admin-field">
                            <label for="favicon-path">Legacy favicon path</label>
                            <input id="favicon-path" type="text" name="favicon" value="{{ old('favicon', $setting->favicon ?? '') }}">
                        </div>
                    </div>
                </details>
            </div>

            <div class="admin-card">
                <p class="admin-section-title">Contact details</p>
                <div class="mt-4 admin-form-grid">
                    <div class="admin-field">
                        <label for="contact-email">Contact email</label>
                        <input id="contact-email" type="email" name="contact_email" value="{{ old('contact_email', $setting->contact_email ?? '') }}">
                    </div>
                    <div class="admin-field">
                        <label for="contact-phone">Contact phone</label>
                        <input id="contact-phone" type="text" name="contact_phone" value="{{ old('contact_phone', $setting->contact_phone ?? '') }}">
                    </div>
                    <div class="admin-field">
                        <label for="footer-text">Footer text</label>
                        <textarea id="footer-text" name="footer_text" rows="6">{{ old('footer_text', $setting->footer_text ?? '') }}</textarea>
                    </div>
                </div>
            </div>
        </div>

        <div class="admin-card">
            <p class="admin-section-title">SMTP settings</p>
            <p class="admin-section-subtitle">Save your mail server details here to send contact notifications, support chat emails, password resets, and other Laravel emails without editing the server files manually.</p>

            <div class="mt-4 admin-form-grid admin-form-grid--two">
                <div class="admin-field">
                    <label for="smtp-host">SMTP host</label>
                    <input id="smtp-host" type="text" name="smtp_host" value="{{ old('smtp_host', $setting->smtp_host ?? config('mail.mailers.smtp.host')) }}" placeholder="mail.example.com">
                </div>
                <div class="admin-field">
                    <label for="smtp-port">SMTP port</label>
                    <input id="smtp-port" type="number" name="smtp_port" value="{{ old('smtp_port', $setting->smtp_port ?? config('mail.mailers.smtp.port')) }}" placeholder="587">
                </div>
                <div class="admin-field">
                    <label for="smtp-username">SMTP username</label>
                    <input id="smtp-username" type="text" name="smtp_username" value="{{ old('smtp_username', $setting->smtp_username ?? config('mail.mailers.smtp.username')) }}">
                </div>
                <div class="admin-field">
                    <label for="smtp-password">SMTP password</label>
                    <input id="smtp-password" type="password" name="smtp_password" value="{{ old('smtp_password', $setting->smtp_password ?? config('mail.mailers.smtp.password')) }}">
                </div>
                <div class="admin-field">
                    <label for="smtp-scheme">Connection scheme</label>
                    @php($smtpScheme = old('smtp_scheme', $setting->smtp_scheme ?? config('mail.mailers.smtp.scheme')))
                    <select id="smtp-scheme" name="smtp_scheme">
                        <option value="" @selected(blank($smtpScheme))>Use default / none</option>
                        <option value="smtp" @selected($smtpScheme === 'smtp')>SMTP</option>
                        <option value="tls" @selected($smtpScheme === 'tls')>TLS</option>
                        <option value="smtps" @selected($smtpScheme === 'smtps')>SMTPS / SSL</option>
                    </select>
                </div>
                <div class="admin-field">
                    <label for="smtp-from-address">From email address</label>
                    <input id="smtp-from-address" type="email" name="smtp_from_address" value="{{ old('smtp_from_address', $setting->smtp_from_address ?? config('mail.from.address')) }}" placeholder="info@example.com">
                </div>
                <div class="admin-field md:col-span-2">
                    <label for="smtp-from-name">From name</label>
                    <input id="smtp-from-name" type="text" name="smtp_from_name" value="{{ old('smtp_from_name', $setting->smtp_from_name ?? config('mail.from.name')) }}" placeholder="Saleem Sial Analytics">
                    <p class="admin-field__hint">If SMTP host is left empty, the site keeps using the mail settings from the server `.env` file.</p>
                </div>
            </div>

            <div class="mt-5 admin-card admin-card--subtle">
                <div class="admin-card__actions">
                    <div class="admin-field" style="flex: 1 1 320px; margin: 0;">
                        <label for="test-email">Test email address</label>
                        <input id="test-email" type="email" name="test_email" value="{{ old('test_email', $setting->contact_email ?? auth()->user()?->email ?? '') }}" placeholder="you@example.com">
                        <p class="admin-field__hint">Save the current SMTP values and send a test email to this address.</p>
                    </div>

                    <button type="submit" name="send_test_email" value="1" class="admin-button admin-button--secondary">Save &amp; send test email</button>
                </div>
            </div>
        </div>

        <div class="admin-card">
            <p class="admin-section-title">Email notifications</p>
            <p class="admin-section-subtitle">Enable or disable owner alerts and user auto-replies, then customize the subject lines and templates with placeholders.</p>

            <div class="mt-4 admin-grid admin-grid--two">
            <div class="admin-card admin-card--subtle">
                <div class="admin-toggle-row">
                    <div>
                        <p class="font-semibold">Owner notification</p>
                            <p class="admin-field__hint">Send every contact form message to your contact email.</p>
                        </div>
                        <label class="admin-toggle">
                            <input type="hidden" name="admin_contact_notifications_enabled" value="0">
                            <input type="checkbox" name="admin_contact_notifications_enabled" value="1" @checked(old('admin_contact_notifications_enabled', $setting->admin_contact_notifications_enabled ?? true))>
                            <span></span>
                        </label>
                    </div>

                    <div class="mt-4 admin-form-grid">
                        <div class="admin-field">
                            <label for="admin-contact-subject">Owner email subject</label>
                            <input id="admin-contact-subject" type="text" name="admin_contact_subject" value="{{ old('admin_contact_subject', $setting->admin_contact_subject ?? '') }}">
                        </div>
                        <div class="admin-field">
                            <label for="admin-contact-template">Owner email template</label>
                            <textarea id="admin-contact-template" name="admin_contact_template" rows="9">{{ old('admin_contact_template', $setting->admin_contact_template ?? '') }}</textarea>
                            <p class="admin-field__hint">Available placeholders: <code>@{{ name }}</code>, <code>@{{ email }}</code>, <code>@{{ phone }}</code>, <code>@{{ message }}</code>, <code>@{{ source_label }}</code>, <code>@{{ page_url }}</code>, <code>@{{ site_name }}</code>, <code>@{{ submitted_at }}</code></p>
                        </div>
                    </div>
                </div>

                <div class="admin-card admin-card--subtle">
                    <div class="admin-toggle-row">
                        <div>
                            <p class="font-semibold">User auto-reply</p>
                            <p class="admin-field__hint">Send a confirmation email back to the person who submitted the form.</p>
                        </div>
                        <label class="admin-toggle">
                            <input type="hidden" name="user_contact_auto_reply_enabled" value="0">
                            <input type="checkbox" name="user_contact_auto_reply_enabled" value="1" @checked(old('user_contact_auto_reply_enabled', $setting->user_contact_auto_reply_enabled ?? true))>
                            <span></span>
                        </label>
                    </div>

                    <div class="mt-4 admin-form-grid">
                        <div class="admin-field">
                            <label for="user-contact-subject">User email subject</label>
                            <input id="user-contact-subject" type="text" name="user_contact_subject" value="{{ old('user_contact_subject', $setting->user_contact_subject ?? '') }}">
                        </div>
                        <div class="admin-field">
                            <label for="user-contact-template">User email template</label>
                            <textarea id="user-contact-template" name="user_contact_template" rows="9">{{ old('user_contact_template', $setting->user_contact_template ?? '') }}</textarea>
                            <p class="admin-field__hint">Use the same placeholders. HTML is allowed if you want a custom layout for both contact form and support chat replies.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="admin-card">
            <p class="admin-section-title">Support chat widget</p>
            <p class="admin-section-subtitle">Show a floating contact button on the public site. It uses the same SMTP email settings and notification templates as the main contact form.</p>

            <div class="mt-4 admin-grid admin-grid--two">
                <div class="admin-card admin-card--subtle">
                    <div class="admin-toggle-row">
                        <div>
                            <p class="font-semibold">Enable support chat</p>
                            <p class="admin-field__hint">Visitors can open a small contact panel from any public page.</p>
                        </div>
                        <label class="admin-toggle">
                            <input type="hidden" name="support_chat_enabled" value="0">
                            <input type="checkbox" name="support_chat_enabled" value="1" @checked(old('support_chat_enabled', $setting->support_chat_enabled ?? true))>
                            <span></span>
                        </label>
                    </div>
                </div>

                <div class="admin-form-grid">
                    <div class="admin-field">
                        <label for="support-chat-title">Widget title</label>
                        <input id="support-chat-title" type="text" name="support_chat_title" value="{{ old('support_chat_title', $setting->support_chat_title ?? '') }}">
                    </div>
                    <div class="admin-field">
                        <label for="support-chat-button-label">Button label</label>
                        <input id="support-chat-button-label" type="text" name="support_chat_button_label" value="{{ old('support_chat_button_label', $setting->support_chat_button_label ?? '') }}">
                    </div>
                    <div class="admin-field">
                        <label for="support-chat-intro">Widget intro</label>
                        <textarea id="support-chat-intro" name="support_chat_intro" rows="5">{{ old('support_chat_intro', $setting->support_chat_intro ?? '') }}</textarea>
                    </div>
                </div>
            </div>
        </div>

        <div class="admin-card">
            <p class="admin-section-title">Analytics & tags</p>
            <p class="admin-section-subtitle">Add your Google Tag Manager container or your GA4 measurement ID. GTM is used first when both are filled.</p>
            <div class="mt-4 admin-form-grid admin-form-grid--two">
                <div class="admin-field">
                    <label for="gtm-container-id">GTM container ID</label>
                    <input id="gtm-container-id" type="text" name="gtm_container_id" value="{{ old('gtm_container_id', $setting->gtm_container_id ?? '') }}" placeholder="GTM-XXXXXXX">
                </div>
                <div class="admin-field">
                    <label for="ga-measurement-id">GA4 measurement ID</label>
                    <input id="ga-measurement-id" type="text" name="ga_measurement_id" value="{{ old('ga_measurement_id', $setting->ga_measurement_id ?? '') }}" placeholder="G-XXXXXXXXXX">
                </div>
            </div>
        </div>

        <div class="admin-card">
            <p class="admin-section-title">Dashboard data refresh</p>
            <p class="admin-section-subtitle">Use this when you want to start the dashboard widgets fresh. It clears Recent Activity, Top Pages, Visitor Trend, Traffic Sources, and All Visitors data only.</p>

            <div class="mt-4 admin-card admin-card--subtle">
                <div class="admin-card__actions">
                    <div>
                        <p class="font-semibold">Refresh dashboard site data</p>
                        <p class="admin-field__hint mt-2">This clears stored visit analytics and recent activity records. It does not remove pages, services, contacts, media, or your settings.</p>
                    </div>

                    <button type="submit" form="refresh-dashboard-data-form" class="admin-button admin-button--warning" onclick="return confirm('Refresh the dashboard data? This will clear Recent Activity and visitor analytics widgets so they can start fresh.');">Refresh site data</button>
                </div>
            </div>
        </div>

        <div class="admin-card">
            <p class="admin-section-title">SEO sitemap</p>
            <p class="admin-section-subtitle">Generate the live sitemap from your current pages, services, and published blog posts.</p>

            <div class="mt-4 admin-card admin-card--subtle">
                <div class="admin-card__actions">
                    <div>
                        <p class="font-semibold">Sitemap tools</p>
                        <p class="admin-field__hint mt-2">Open the current <code>sitemap.xml</code> feed or check the <code>robots.txt</code> file that points search engines to it.</p>
                    </div>

                    <div class="flex gap-3">
                        <a href="{{ route('sitemap') }}" class="admin-button" target="_blank" rel="noopener">Generate sitemap</a>
                        <a href="{{ route('robots') }}" class="admin-button admin-button--secondary" target="_blank" rel="noopener">View robots.txt</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="admin-card">
            <p class="admin-section-title">Social links</p>
            <div class="mt-4 admin-form-grid admin-form-grid--two">
                @foreach(['facebook', 'instagram', 'x', 'linkedin'] as $platform)
                    <div class="admin-field">
                        <label for="social-{{ $platform }}">{{ ucfirst($platform) }}</label>
                        <input id="social-{{ $platform }}" type="text" name="social_links[{{ $platform }}]" value="{{ old('social_links.' . $platform, $setting->social_links[$platform] ?? '') }}">
                    </div>
                @endforeach
            </div>
        </div>

        <div class="admin-card">
            <p class="admin-section-title">Global CTAs</p>
            <div class="mt-4 admin-form-grid admin-form-grid--two">
                <div class="admin-field">
                    <label for="header-cta-label">Header CTA label</label>
                    <input id="header-cta-label" type="text" name="header_cta_label" value="{{ old('header_cta_label', $setting->header_cta_label ?? '') }}">
                </div>
                <div class="admin-field">
                    <label for="header-cta-url">Header CTA URL</label>
                    <input id="header-cta-url" type="text" name="header_cta_url" value="{{ old('header_cta_url', $setting->header_cta_url ?? '') }}">
                </div>
                <div class="admin-field">
                    <label for="footer-cta-label">Footer CTA label</label>
                    <input id="footer-cta-label" type="text" name="footer_cta_label" value="{{ old('footer_cta_label', $setting->footer_cta_label ?? '') }}">
                </div>
                <div class="admin-field">
                    <label for="footer-cta-url">Footer CTA URL</label>
                    <input id="footer-cta-url" type="text" name="footer_cta_url" value="{{ old('footer_cta_url', $setting->footer_cta_url ?? '') }}">
                </div>
            </div>
        </div>

        <div class="flex gap-3">
            <button type="submit" class="admin-button">Save settings</button>
            <a href="{{ route('admin.dashboard') }}" class="admin-button admin-button--secondary">Back to dashboard</a>
        </div>
    </form>

    @if(auth()->user()?->isAdmin())
        <form action="{{ route('admin.settings.delete-database') }}" method="POST" class="mt-6">
            @csrf

            <div class="admin-card">
                <p class="admin-section-title">Danger zone</p>
                <p class="admin-section-subtitle">Admin only. This permanently deletes all current database content, then rebuilds the CMS with fresh migrations and seed data so the site can boot again.</p>

                <div class="mt-4 admin-card admin-card--subtle">
                    <div class="admin-card__actions">
                        <div style="flex: 1 1 360px;">
                            <p class="font-semibold">Delete database</p>
                            <p class="admin-field__hint mt-2">Type <code>Confirm</code> and enter your current password to continue.</p>
                        </div>

                        <button
                            type="submit"
                            class="admin-button admin-button--danger"
                            onclick="return confirm('Confirm');"
                        >
                            Delete database
                        </button>
                    </div>

                    <div class="mt-4 admin-grid admin-grid--two">
                        <div class="admin-field">
                            <label for="database-delete-phrase">Confirm</label>
                            <input
                                id="database-delete-phrase"
                                type="text"
                                name="database_delete_phrase"
                                value="{{ old('database_delete_phrase') }}"
                                placeholder="Confirm"
                                autocomplete="off"
                            >
                            @error('database_delete_phrase')
                                <p class="admin-field__hint mt-2" style="color: #b42318;">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="admin-field">
                            <label for="database-delete-password">Current password</label>
                            <input
                                id="database-delete-password"
                                type="password"
                                name="delete_database_password"
                                placeholder="Enter your current password"
                                autocomplete="current-password"
                            >
                            @error('delete_database_password')
                                <p class="admin-field__hint mt-2" style="color: #b42318;">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
        </form>
    @endif
@endsection
