@extends('layouts.dashboard')

@section('content')
@php
$provOptions = static function (string $current): string {
    $html = '';
    foreach (['local', 'mailchimp', 'off'] as $o) {
        $html .= '<option value="' . e($o) . '"' . ($current === $o ? ' selected' : '') . '>'
            . e(t('admin.newsletter.opt_' . $o)) . '</option>';
    }
    return $html;
};
@endphp
<div class="qm-ops-head">
    <div>
        <h2 class="qm-snap-section-title mb-0"><span class="qm-snap-title-bar" aria-hidden="true"></span>{!! t('admin.newsletter.title') !!}</h2>
    </div>
    <a class="qm-btn qm-btn-outline qm-btn-sm" href="{!! route('admin.subscribers') !!}"><i class="fas fa-users me-1" aria-hidden="true"></i> {!! t('admin.newsletter.view_subscribers') !!}</a>
</div>

<form method="post" action="{!! route('admin.newsletter') !!}">
    {!! csrf_field() !!}
    <div class="qm-card">
        <div class="qm-card-head">
            <h2 class="mb-0">{!! t('admin.newsletter.h_forms') !!}</h2>
        </div>
        <div class="qm-card-body">
            <div class="qm-form-grid">
                <div class="mb-0">
                    <label class="form-label" for="np-home">{!! t('admin.newsletter.field_home') !!}</label>
                    <select class="form-select" id="np-home" name="newsletter_provider_home">{!! $provOptions($providerHome) !!}</select>
                </div>
                <div class="mb-0">
                    <label class="form-label" for="np-blog">{!! t('admin.newsletter.field_blog') !!}</label>
                    <select class="form-select" id="np-blog" name="newsletter_provider_blog">{!! $provOptions($providerBlog) !!}</select>
                </div>
            </div>
        </div>
        <div class="qm-card-foot">
            <button type="submit" class="qm-btn"><i class="fas fa-save me-1" aria-hidden="true"></i> {!! t('admin.newsletter.save') !!}</button>
        </div>
    </div>
</form>

<form method="post" action="{!! route('admin.settings.mailchimp') !!}">
    {!! csrf_field() !!}
    <div class="qm-card">
        @php $mcOn = setting('mailchimp_enabled', '0') === '1';
@endphp
        <div class="qm-card-head">
            <div class="d-flex align-items-center flex-wrap gap-2">
                <h2 class="mb-0">{!! t('admin.settings.h_mailchimp') !!}</h2>
                <span class="qm-pill {!! ($hasMailchimpKey ?? false) ? 'qm-pill-green' : 'qm-pill-grey' !!}">{!! ($hasMailchimpKey ?? false) ? t('admin.settings.pill_secret_set') : t('admin.settings.pill_no_secret') !!}</span>
            </div>
            <label class="qm-check mb-0"><input type="checkbox" name="mailchimp_enabled" value="1" {!! $mcOn ? 'checked' : '' !!} data-toggle-hide="mc-connect" data-toggle-foot="mc-foot"> {!! t('admin.settings.field_mailchimp_enable') !!}</label>
        </div>
        <div id="mc-connect" class="qm-card-body{!! $mcOn ? '' : ' d-none' !!}">
        <div class="mb-2">
            <label class="form-label" for="s-mc-key">{!! t('admin.settings.field_mailchimp_api_key') !!}</label>
            <div class="qm-pw-wrap">
                <input type="password" id="s-mc-key" name="mailchimp_api_key" class="form-control" autocomplete="off" spellcheck="false" value="{{ $mailchimpKey ?? '' }}" placeholder="{!! t('admin.settings.placeholder_mailchimp_key') !!}">
                <button type="button" class="qm-pw-toggle" data-toggle-password="s-mc-key" aria-pressed="false" aria-label="{!! t('common.show_key') !!}"><i class="fas fa-eye" aria-hidden="true"></i></button>
            </div>
        </div>
        <div class="mb-3">
            <label class="form-label" for="s-mc-list">{!! t('admin.settings.field_mailchimp_audience_id') !!}</label>
            @php
            $savedAudienceId   = trim((string) setting('mailchimp_audience_id', ''));
            $savedAudienceName = trim((string) setting('mailchimp_audience_name', ''));
@endphp
            <input type="hidden" name="mailchimp_audience_name" id="s-mc-list-name" value="{{ $savedAudienceName }}">
            <div class="d-flex gap-2">
                <select id="s-mc-list" name="mailchimp_audience_id" class="form-select">
                    @if ($savedAudienceId !== '')
                    <option value="{{ $savedAudienceId }}" selected>{{ $savedAudienceName !== '' ? $savedAudienceName : $savedAudienceId }}</option>
                    @else
                    <option value="">{!! t('admin.settings.opt_mailchimp_load_first') !!}</option>
                    @endif
                </select>
                <button type="button" class="qm-btn qm-btn-outline qm-btn-sm text-nowrap" id="mc-load-audiences" data-mailchimp-key-field="s-mc-key" data-mailchimp-saved-id="{{ $savedAudienceId }}">{!! t('admin.settings.btn_mailchimp_load') !!}</button>
            </div>
            <p class="qm-hint mt-2 mb-0" id="mc-audiences-status">{!! t('admin.settings.hint_mailchimp') !!}</p>
        </div>
        </div>
        <div class="qm-card-foot{!! $mcOn ? '' : ' d-none' !!}" id="mc-foot">
            <button type="submit" class="qm-btn">{!! t('admin.settings.save_mailchimp') !!}</button>
        </div>
    </div>
</form>

<script>
/* Reveal the Mailchimp key + audience only while the sync toggle is on; keep Save
   available when the toggle differs from its saved state so a change can be saved. */
(function () {
    Array.prototype.forEach.call(document.querySelectorAll('[data-toggle-hide]'), function (cb) {
        var body = document.getElementById(cb.getAttribute('data-toggle-hide'));
        var footId = cb.getAttribute('data-toggle-foot');
        var foot = footId ? document.getElementById(footId) : null;
        if (!body && !foot) { return; }
        var initial = cb.checked;
        cb.addEventListener('change', function () {
            if (body) { body.classList.toggle('d-none', !cb.checked); }
            if (foot) { foot.classList.toggle('d-none', !cb.checked && cb.checked === initial); }
        });
    });
})();
</script>
@endsection