{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: index.blade.php
------------------------------------------------------
Use: The site-settings page: four tabs (general, gateway,
     SMS, email), each its own form saving on its own. The
     active tab follows the URL hash so a save returns to it.
=====================================================
--}}

@extends('layouts.admin')

@section('title', __('admin.settings.title'))

@php use App\Support\Format; @endphp

@section('breadcrumb')
    <x-ui.breadcrumb :items="[
        ['label' => __('admin.breadcrumb.home'), 'url' => route('admin.users.index')],
        ['label' => __('admin.settings.breadcrumb')],
    ]" />
@endsection

@php
    // Shared field classes (kept here so every input reads the same).
    $labelCls = 'mb-1.5 block text-[13px] font-bold';
    $inputCls = 'w-full rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3.5 py-3 text-sm outline-none transition focus:border-primary-600 focus:bg-white';
    $ltrCls = $inputCls.' text-left';
@endphp

@section('page')
    <div class="mb-5">
        <h1 class="mb-1 text-2xl font-bold tracking-tight">{{ __('admin.settings.title') }}</h1>
        <p class="text-sm text-ink-muted">{{ __('admin.settings.subtitle') }}</p>
    </div>

    <x-ui.info-box class="mb-5">{{ __('admin.settings.info') }}</x-ui.info-box>

    <div x-data="{ tab: (window.location.hash || '#general').slice(1) }"
         class="grid grid-cols-1 gap-5 lg:grid-cols-[220px_1fr] lg:items-start">

        {{-- Tabs --}}
        <div class="flex flex-row flex-wrap gap-1 rounded-2xl border border-line bg-white p-2 lg:flex-col">
            @foreach (__('admin.settings.tabs') as $key => $label)
                <button type="button" x-on:click="tab = '{{ $key }}'; history.replaceState(null, '', '#{{ $key }}')"
                        x-bind:class="tab === '{{ $key }}' ? 'bg-primary-50 text-primary-700' : 'text-ink-muted hover:bg-[#faf9fd]'"
                        class="flex items-center gap-2.5 rounded-xl px-3.5 py-2.5 text-[13.5px] font-bold transition">
                    {{ $label }}
                </button>
            @endforeach
        </div>

        {{-- Panels --}}
        <div class="rounded-2xl border border-line bg-white p-6">
            {{-- ===== General ===== --}}
            <form method="POST" action="{{ route('admin.settings.general') }}" enctype="multipart/form-data" x-ref="form" x-data="{ busy: false }" x-show="tab === 'general'">
                @csrf
                <div class="mb-5 text-base font-bold">{{ __('admin.settings.general.heading') }}</div>

                {{-- Logo --}}
                <div class="mb-6 flex items-center gap-4 border-b border-[#f0eff5] pb-6">
                    <div class="flex size-16 shrink-0 items-center justify-center overflow-hidden rounded-2xl bg-gradient-to-bl from-primary-600 to-primary-400">
                        @if ($siteLogoUrl)
                            <img src="{{ $siteLogoUrl }}" alt="" class="size-full object-contain">
                        @else
                            <svg class="size-8 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="5.5" width="19" height="13" rx="2.5"/><line x1="2.5" y1="9.5" x2="21.5" y2="9.5"/><path d="M6 14.5h4"/></svg>
                        @endif
                    </div>
                    <div>
                        <div class="mb-1.5 text-sm font-bold">{{ __('admin.settings.general.logo') }}</div>
                        <label class="inline-flex cursor-pointer items-center gap-2 rounded-[10px] bg-primary-50 px-4 py-2 text-[12.5px] font-bold text-primary-600 transition hover:bg-primary-100">
                            <input type="file" name="logo" accept="image/png,image/jpeg,image/webp" class="hidden" x-on:change="$refs.logoName.textContent = $event.target.files[0]?.name || ''">
                            {{ __('admin.settings.general.logo_change') }}
                        </label>
                        <span x-ref="logoName" class="mr-2 text-[12px] text-ink-faint" dir="ltr"></span>
                        <p class="mt-1.5 text-[11.5px] text-ink-faint">{{ __('admin.settings.general.logo_hint') }}</p>
                    </div>
                </div>

                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <label class="{{ $labelCls }}">{{ __('admin.settings.general.site_title') }}</label>
                        <input name="site_title" value="{{ old('site_title', $s->siteTitle()) }}" class="{{ $inputCls }}">
                    </div>
                    <div>
                        <label class="{{ $labelCls }}">{{ __('admin.settings.general.support_email') }}</label>
                        <input name="support_email" value="{{ old('support_email', $s->supportEmail()) }}" dir="ltr" class="{{ $ltrCls }}">
                    </div>
                    <div>
                        <label class="{{ $labelCls }}">{{ __('admin.settings.general.support_phone') }}</label>
                        <input name="support_phone" value="{{ old('support_phone', $s->supportPhone()) }}" dir="ltr" class="{{ $ltrCls }}">
                    </div>
                    <div class="sm:col-span-2">
                        <label class="{{ $labelCls }}">{{ __('admin.settings.general.contact_email') }}</label>
                        <input name="contact_email" value="{{ old('contact_email', $s->get('contact_email')) }}" dir="ltr" class="{{ $ltrCls }}">
                        <p class="mt-1.5 text-[11.5px] text-ink-faint">{{ __('admin.settings.general.contact_email_hint') }}</p>
                    </div>
                </div>

                {{-- SEO --}}
                <div class="mb-4 mt-7 text-[13.5px] font-bold">{{ __('admin.settings.general.seo_section') }}</div>
                <div class="grid grid-cols-1 gap-4">
                    <div>
                        <label class="{{ $labelCls }}">{{ __('admin.settings.general.seo_description') }}</label>
                        <textarea name="seo_description" rows="2" class="{{ $inputCls }}">{{ old('seo_description', $s->seoDescription()) }}</textarea>
                    </div>
                    <div>
                        <label class="{{ $labelCls }}">{{ __('admin.settings.general.seo_keywords') }}</label>
                        <input name="seo_keywords" value="{{ old('seo_keywords', $s->seoKeywords()) }}" class="{{ $inputCls }}">
                    </div>
                </div>

                {{-- Maintenance --}}
                <div class="mb-4 mt-7 text-[13.5px] font-bold">{{ __('admin.settings.general.maintenance_section') }}</div>
                <label class="flex cursor-pointer items-center gap-3 rounded-xl border border-[#f0eff5] bg-[#faf9fd] px-4 py-3">
                    <input type="checkbox" name="maintenance_mode" value="1" @checked($s->maintenanceMode()) class="size-4 accent-secondary-500">
                    <span class="text-[13.5px] font-bold">{{ __('admin.settings.general.maintenance_mode') }}</span>
                </label>
                <p class="mt-2 flex items-start gap-1.5 text-[11.5px] leading-6 text-ink-faint">{{ __('admin.settings.general.maintenance_hint') }}</p>
                <div class="mt-3">
                    <label class="{{ $labelCls }}">{{ __('admin.settings.general.maintenance_message') }}</label>
                    <textarea name="maintenance_message" rows="2" class="{{ $inputCls }}">{{ old('maintenance_message', $s->get('maintenance_message')) }}</textarea>
                </div>

                @include('admin.settings._save')
            </form>

            {{-- ===== Rules & defaults ===== --}}
            <form method="POST" action="{{ route('admin.settings.rules') }}" x-ref="form" x-data="{ busy: false, pct: {{ (int) $s->defaultMerchantFeePercent() / 100 }} }" x-show="tab === 'rules'" x-cloak>
                @csrf
                <div class="mb-5 text-base font-bold">{{ __('admin.settings.rules.heading') }}</div>

                <div class="mb-2 text-[13.5px] font-bold">{{ __('admin.settings.rules.fee_section') }}</div>
                <p class="mb-4 text-[11.5px] text-ink-faint">{{ __('admin.settings.rules.fee_hint') }}</p>
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <label class="{{ $labelCls }}">{{ __('admin.settings.rules.fee_percent') }} (٪)</label>
                        <input type="number" step="0.01" min="0" max="100" x-model.number="pct" dir="ltr" class="{{ $ltrCls }}">
                        <input type="hidden" name="default_merchant_fee_percent" x-bind:value="Math.round((pct || 0) * 100)">
                    </div>
                    <div>
                        <label class="{{ $labelCls }}">{{ __('admin.settings.rules.fee_cap') }} ({{ __('admin.settings.toman') }})</label>
                        <input name="default_merchant_fee_cap" value="{{ old('default_merchant_fee_cap', $s->defaultMerchantFeeCap()) }}" inputmode="numeric" dir="ltr" class="{{ $inputCls }}" style="text-align:right">
                    </div>
                </div>

                <div class="mb-3 mt-7 text-[13.5px] font-bold">{{ __('admin.settings.rules.limits_section') }}</div>
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <label class="{{ $labelCls }}">{{ __('admin.settings.rules.card_fee') }} ({{ __('admin.settings.toman') }})</label>
                        <input name="physical_card_fee" value="{{ old('physical_card_fee', $s->physicalCardFee()) }}" inputmode="numeric" dir="ltr" class="{{ $inputCls }}" style="text-align:right">
                    </div>
                    <div>
                        <label class="{{ $labelCls }}">{{ __('admin.settings.rules.bank_accounts_limit') }}</label>
                        <input name="bank_accounts_limit" value="{{ old('bank_accounts_limit', $s->bankAccountsLimit()) }}" inputmode="numeric" dir="ltr" class="{{ $inputCls }}" style="text-align:right">
                    </div>
                    <div>
                        <label class="{{ $labelCls }}">{{ __('admin.settings.rules.withdrawal_minimum') }} ({{ __('admin.settings.toman') }})</label>
                        <input name="withdrawal_minimum" value="{{ old('withdrawal_minimum', $s->withdrawalMinimum()) }}" inputmode="numeric" dir="ltr" class="{{ $inputCls }}" style="text-align:right">
                    </div>
                    <div>
                        <label class="{{ $labelCls }}">{{ __('admin.settings.rules.settlement_minimum') }} ({{ __('admin.settings.toman') }})</label>
                        <input name="settlement_minimum" value="{{ old('settlement_minimum', $s->settlementMinimum()) }}" inputmode="numeric" dir="ltr" class="{{ $inputCls }}" style="text-align:right">
                    </div>
                </div>

                {{-- Good-standing gate for the credit-request page. --}}
                <div class="mb-3 mt-7 text-[13.5px] font-bold">{{ __('admin.settings.rules.standing_section') }}</div>
                <p class="mb-4 text-[11.5px] text-ink-faint">{{ __('admin.settings.rules.standing_hint') }}</p>
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <label class="{{ $labelCls }}">{{ __('admin.settings.rules.credit_request_min_standing') }}</label>
                        <select name="credit_request_min_standing" class="{{ $inputCls }}">
                            @foreach (\App\Support\GoodStanding::tiers() as $tier)
                                <option value="{{ $tier['index'] }}" @selected((int) old('credit_request_min_standing', $s->creditRequestMinStanding()) === $tier['index'])>{{ $tier['label'] }}@if ($tier['index'] === 0) — {{ __('admin.settings.rules.standing_all') }}@endif</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                @include('admin.settings._save')
            </form>

            {{-- ===== Gateway ===== --}}
            <form method="POST" action="{{ route('admin.settings.gateway') }}" x-ref="form" x-data="{ busy: false, gateway: '{{ $s->get('payment_gateway', 'test') }}' }" x-show="tab === 'gateway'" x-cloak>
                @csrf
                <div class="mb-2 text-base font-bold">{{ __('admin.settings.gateway.heading') }}</div>
                <p class="mb-5 text-[12.5px] text-ink-muted">{{ __('admin.settings.gateway.hint') }}</p>

                <div class="flex flex-col gap-3">
                    @foreach (['test', 'zarinpal'] as $g)
                        <label class="flex cursor-pointer items-center justify-between gap-3 rounded-[14px] border-[1.5px] p-4 transition"
                               x-bind:class="gateway === '{{ $g }}' ? 'border-primary-600 bg-primary-50' : 'border-[#f0eff5] hover:border-primary-300'">
                            <span class="flex items-center gap-3">
                                <input type="radio" name="payment_gateway" value="{{ $g }}" x-model="gateway" class="size-4 accent-primary-600">
                                <span>
                                    <span class="block text-sm font-bold">{{ __('admin.settings.gateway.drivers.'.$g) }}</span>
                                    <span class="mt-0.5 block text-[11.5px] text-ink-faint">{{ __('admin.settings.gateway.driver_hints.'.$g) }}</span>
                                </span>
                            </span>
                        </label>
                    @endforeach
                </div>

                {{-- Zarinpal credentials --}}
                <div x-show="gateway === 'zarinpal'" x-cloak class="mt-5 grid grid-cols-1 gap-4 border-t border-[#f0eff5] pt-5 sm:grid-cols-2">
                    <div>
                        <label class="{{ $labelCls }}">{{ __('admin.settings.gateway.zarinpal_merchant_id') }}</label>
                        <input name="zarinpal_merchant_id" value="{{ old('zarinpal_merchant_id', $s->get('zarinpal_merchant_id')) }}" dir="ltr" class="{{ $ltrCls }}">
                    </div>
                    <label class="flex items-center gap-3 self-end rounded-xl border border-[#f0eff5] bg-[#faf9fd] px-4 py-3">
                        <input type="checkbox" name="zarinpal_sandbox" value="1" @checked($s->bool('zarinpal_sandbox', true)) class="size-4 accent-primary-600">
                        <span class="text-[13px] font-bold">{{ __('admin.settings.gateway.zarinpal_sandbox') }}</span>
                    </label>
                </div>

                @include('admin.settings._save')
            </form>

            {{-- ===== SMS ===== --}}
            <form method="POST" action="{{ route('admin.settings.sms') }}" x-ref="form" x-data="{ busy: false }" x-show="tab === 'sms'" x-cloak>
                @csrf
                <div class="mb-5 text-base font-bold">{{ __('admin.settings.sms.heading') }}</div>

                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <label class="{{ $labelCls }}">{{ __('admin.settings.sms.driver') }}</label>
                        <select name="sms_driver" class="{{ $inputCls }}">
                            @foreach (__('admin.settings.sms.drivers') as $key => $label)
                                <option value="{{ $key }}" @selected($s->get('sms_driver', 'log') === $key)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="{{ $labelCls }}">{{ __('admin.settings.sms.sender') }}</label>
                        <input name="ippanel_sender" value="{{ old('ippanel_sender', $s->get('ippanel_sender')) }}" dir="ltr" class="{{ $ltrCls }}">
                    </div>
                    <div class="sm:col-span-2">
                        <label class="{{ $labelCls }}">{{ __('admin.settings.sms.api_key') }}</label>
                        <input name="ippanel_api_key" type="password" placeholder="{{ $s->get('ippanel_api_key') ? '••••••••••••' : '' }}" dir="ltr" class="{{ $ltrCls }}" style="font-family:monospace">
                        <p class="mt-1.5 text-[11.5px] text-ink-faint">{{ __('admin.settings.sms.api_key_hint') }}</p>
                    </div>
                </div>

                <div class="mb-3 mt-7 text-[13.5px] font-bold">{{ __('admin.settings.sms.patterns_heading') }}</div>
                <p class="mb-1.5 text-[11.5px] text-ink-faint">{{ __('admin.settings.sms.patterns_hint') }}</p>
                <p class="mb-4 text-[11.5px] text-ink-faint">{{ __('admin.settings.sms.sample_vars_hint') }}</p>
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach ($patterns as $pattern)
                        <div class="rounded-xl border border-line bg-white p-3.5">
                            <label class="mb-1.5 block text-[12px] font-bold text-ink-soft">{{ __('admin.settings.sms.pattern_labels.'.$pattern) }}</label>
                            <input name="pattern_{{ $pattern }}" value="{{ old('pattern_'.$pattern, $s->get('ippanel_pattern_'.$pattern)) }}" dir="ltr" class="{{ $ltrCls }}" placeholder="pattern code">

                            {{-- Suggested pattern body, with the exact variables the
                                 system sends -- an operator copies this into ippanel. --}}
                            <div class="mt-2.5 rounded-lg border border-line bg-page px-3 py-2" x-data="{ copied: false }">
                                <div class="mb-1 flex items-center justify-between gap-2">
                                    <span class="text-[10.5px] font-bold text-ink-faint">{{ __('admin.settings.sms.sample_label') }}</span>
                                    <button
                                        type="button"
                                        class="text-[10.5px] font-bold text-primary-600 transition hover:text-primary-700"
                                        x-on:click="navigator.clipboard.writeText($refs.smp_{{ $pattern }}.textContent.trim()); copied = true; setTimeout(() => copied = false, 1500)"
                                    >
                                        <span x-show="! copied">{{ __('admin.settings.sms.sample_copy') }}</span>
                                        <span x-show="copied" x-cloak>{{ __('admin.settings.sms.sample_copied') }}</span>
                                    </button>
                                </div>
                                <p x-ref="smp_{{ $pattern }}" dir="rtl" class="whitespace-pre-line text-[11px] leading-6 text-ink-soft">{{ __('admin.settings.sms.pattern_samples.'.$pattern) }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>

                @include('admin.settings._save')
            </form>

            {{-- ===== Captcha (ArCaptcha) ===== --}}
            <form method="POST" action="{{ route('admin.settings.captcha') }}" x-ref="form" x-data="{ busy: false }" x-show="tab === 'captcha'" x-cloak>
                @csrf
                <div class="mb-4 text-base font-bold">{{ __('admin.settings.captcha.heading') }}</div>
                <x-ui.info-box class="mb-5">{{ __('admin.settings.captcha.info') }}</x-ui.info-box>

                @php
                    $capUsed = $captcha->usageThisPeriod();
                    $capQuota = $captcha->quota();
                    $capRemaining = $captcha->remaining();
                    $capPct = $capQuota > 0 ? min(100, (int) round($capUsed / $capQuota * 100)) : 0;
                    $capLow = $capQuota > 0 && $capRemaining <= (int) ceil($capQuota * 0.1);
                @endphp
                <div class="mb-6 rounded-xl border border-line bg-page p-4">
                    <div class="mb-2 flex items-center justify-between text-[13px]">
                        <span class="font-bold">{{ __('admin.settings.captcha.usage_title', ['period' => \App\Support\Format::persianDigits($captcha->periodLabel())]) }}</span>
                        <span class="font-bold {{ $capLow ? 'text-secondary-500' : 'text-green-600' }}">{{ __('admin.settings.captcha.remaining', ['remaining' => \App\Support\Format::persianDigits((string) $capRemaining)]) }}</span>
                    </div>
                    <div class="h-2.5 w-full overflow-hidden rounded-full bg-white">
                        <div class="h-full rounded-full {{ $capLow ? 'bg-secondary-500' : 'bg-primary-600' }}" style="width: {{ $capPct }}%"></div>
                    </div>
                    <div class="mt-2 text-[11.5px] text-ink-faint">{{ __('admin.settings.captcha.used_of', ['used' => \App\Support\Format::persianDigits((string) $capUsed), 'quota' => \App\Support\Format::persianDigits((string) $capQuota)]) }}</div>
                </div>

                <label class="mb-5 flex w-fit cursor-pointer items-center gap-2.5">
                    <span class="relative inline-flex">
                        <input type="checkbox" name="arcaptcha_enabled" value="1" @checked($s->bool('arcaptcha_enabled')) class="peer sr-only">
                        <span class="h-6 w-11 rounded-full bg-[#d9d7e4] transition peer-checked:bg-primary-600"></span>
                        <span class="absolute right-0.5 top-0.5 size-5 rounded-full bg-white shadow transition peer-checked:-translate-x-5"></span>
                    </span>
                    <span class="text-[13px] font-bold">{{ __('admin.settings.captcha.enabled') }}</span>
                </label>

                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <label class="{{ $labelCls }}">{{ __('admin.settings.captcha.site_key') }}</label>
                        <input name="arcaptcha_site_key" value="{{ old('arcaptcha_site_key', $s->get('arcaptcha_site_key')) }}" dir="ltr" class="{{ $ltrCls }}" style="font-family:monospace">
                    </div>
                    <div>
                        <label class="{{ $labelCls }}">{{ __('admin.settings.captcha.secret_key') }}</label>
                        <input name="arcaptcha_secret_key" type="password" placeholder="{{ $s->get('arcaptcha_secret_key') ? '••••••••••••' : '' }}" dir="ltr" class="{{ $ltrCls }}" style="font-family:monospace">
                        <p class="mt-1.5 text-[11.5px] text-ink-faint">{{ __('admin.settings.captcha.secret_hint') }}</p>
                    </div>
                    <div>
                        <label class="{{ $labelCls }}">{{ __('admin.settings.captcha.quota') }}</label>
                        <input name="arcaptcha_monthly_quota" type="number" min="0" value="{{ old('arcaptcha_monthly_quota', $captcha->quota()) }}" dir="ltr" class="{{ $ltrCls }}">
                        <p class="mt-1.5 text-[11.5px] text-ink-faint">{{ __('admin.settings.captcha.quota_hint') }}</p>
                    </div>
                </div>

                @include('admin.settings._save')
            </form>

            {{-- ===== Email ===== --}}
            <form method="POST" action="{{ route('admin.settings.email') }}" x-ref="form" x-show="tab === 'email'" x-cloak
                  x-data="emailSettings({ previewBase: @js(route('admin.settings.email.preview')), header: @js(old('mail_header', $s->mailHeader())), footer: @js(old('mail_footer', $s->mailFooter())) })">
                @csrf
                <div class="mb-5 text-base font-bold">{{ __('admin.settings.email.heading') }}</div>

                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div class="sm:col-span-2">
                        <label class="{{ $labelCls }}">{{ __('admin.settings.email.driver') }}</label>
                        <select name="mail_driver" class="{{ $inputCls }}">
                            @foreach (__('admin.settings.email.drivers') as $key => $label)
                                <option value="{{ $key }}" @selected($s->get('mail_driver', 'log') === $key)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="{{ $labelCls }}">{{ __('admin.settings.email.from_name') }}</label>
                        <input name="mail_from_name" value="{{ old('mail_from_name', $s->get('mail_from_name')) }}" class="{{ $inputCls }}">
                    </div>
                    <div>
                        <label class="{{ $labelCls }}">{{ __('admin.settings.email.from_address') }}</label>
                        <input name="mail_from_address" value="{{ old('mail_from_address', $s->get('mail_from_address')) }}" dir="ltr" class="{{ $ltrCls }}">
                    </div>
                    <div>
                        <label class="{{ $labelCls }}">{{ __('admin.settings.email.host') }}</label>
                        <input name="smtp_host" value="{{ old('smtp_host', $s->get('smtp_host')) }}" dir="ltr" class="{{ $ltrCls }}">
                    </div>
                    <div>
                        <label class="{{ $labelCls }}">{{ __('admin.settings.email.port') }}</label>
                        <input name="smtp_port" value="{{ old('smtp_port', $s->get('smtp_port')) }}" inputmode="numeric" dir="ltr" class="{{ $ltrCls }}">
                    </div>
                    <div>
                        <label class="{{ $labelCls }}">{{ __('admin.settings.email.username') }}</label>
                        <input name="smtp_username" value="{{ old('smtp_username', $s->get('smtp_username')) }}" dir="ltr" class="{{ $ltrCls }}">
                    </div>
                    <div>
                        <label class="{{ $labelCls }}">{{ __('admin.settings.email.password') }}</label>
                        <input name="smtp_password" type="password" placeholder="{{ $s->get('smtp_password') ? '••••••••••' : '' }}" dir="ltr" class="{{ $ltrCls }}" style="font-family:monospace">
                        <p class="mt-1.5 text-[11.5px] text-ink-faint">{{ __('admin.settings.email.password_hint') }}</p>
                    </div>
                    <div>
                        <label class="{{ $labelCls }}">{{ __('admin.settings.email.encryption') }}</label>
                        <select name="smtp_encryption" class="{{ $inputCls }}">
                            @foreach (__('admin.settings.email.encryptions') as $key => $label)
                                <option value="{{ $key }}" @selected($s->get('smtp_encryption', 'tls') === $key)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                {{-- Email header/footer, wrapped around every notification email. --}}
                <div class="mb-3 mt-7 text-[13.5px] font-bold">{{ __('admin.settings.email.templates_heading') }}</div>
                <p class="mb-4 text-[11.5px] text-ink-faint">{{ __('admin.settings.email.templates_hint') }}</p>
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <label class="{{ $labelCls }}">{{ __('admin.settings.email.header_text') }}</label>
                        <textarea name="mail_header" rows="3" class="{{ $inputCls }}" x-model="header" x-on:input.debounce.400ms="refresh()" placeholder="{{ __('admin.settings.email.header_placeholder') }}"></textarea>
                    </div>
                    <div>
                        <label class="{{ $labelCls }}">{{ __('admin.settings.email.footer_text') }}</label>
                        <textarea name="mail_footer" rows="3" class="{{ $inputCls }}" x-model="footer" x-on:input.debounce.400ms="refresh()" placeholder="{{ __('admin.settings.email.footer_placeholder') }}"></textarea>
                    </div>
                </div>

                {{-- Live preview of the branded email with the header/footer above. --}}
                <div class="mb-3 mt-7 flex items-center justify-between gap-3">
                    <div>
                        <div class="text-[13.5px] font-bold">{{ __('admin.settings.email.preview_heading') }}</div>
                        <p class="mt-1 text-[11.5px] text-ink-faint">{{ __('admin.settings.email.preview_hint') }}</p>
                    </div>
                    <button type="button" x-on:click="refresh()" class="inline-flex shrink-0 items-center gap-1.5 rounded-lg bg-[#f2f0fa] px-3 py-2 text-[12px] font-bold text-primary-600 transition hover:bg-[#e8e3f8]">
                        <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-3-6.7L21 8"/><path d="M21 3v5h-5"/></svg>
                        {{ __('admin.settings.email.preview_refresh') }}
                    </button>
                </div>
                <div class="overflow-hidden rounded-2xl border border-line bg-[#f4f3f9]">
                    <iframe x-ref="previewFrame" x-bind:src="frameSrc" title="{{ __('admin.settings.email.preview_heading') }}" class="h-[560px] w-full border-0" loading="lazy"></iframe>
                </div>

                @include('admin.settings._save')
            </form>

            {{-- Send the sample email to verify SMTP end to end (its own form). --}}
            <form method="POST" action="{{ route('admin.settings.email.test') }}" x-show="tab === 'email'" x-cloak
                  x-data="{ busy: false }"
                  x-on:submit.prevent="$store.confirm.ask({ message: @js(__('admin.settings.email.test_confirm')), onConfirm: () => { busy = true; $el.submit(); } })">
                @csrf
                <div class="mt-4 rounded-2xl border border-line bg-white p-5">
                    <div class="mb-1 text-[13.5px] font-bold">{{ __('admin.settings.email.test_heading') }}</div>
                    <p class="mb-4 text-[11.5px] text-ink-faint">{{ __('admin.settings.email.test_hint') }}</p>
                    <div class="flex flex-wrap items-end gap-3">
                        <div class="min-w-[220px] flex-1">
                            <label class="{{ $labelCls }}">{{ __('admin.settings.email.test_email_label') }}</label>
                            <input name="test_email" type="email" value="{{ old('test_email', $s->supportEmail()) }}" dir="ltr" required class="{{ $ltrCls }}">
                            @error('test_email')<p class="mt-1.5 text-[11.5px] text-secondary-500">{{ $message }}</p>@enderror
                        </div>
                        <button type="submit" x-bind:disabled="busy"
                                class="inline-flex items-center gap-2 rounded-xl bg-primary-600 px-6 py-3 text-sm font-bold text-white transition hover:bg-primary-700 disabled:cursor-not-allowed disabled:opacity-70">
                            <span x-show="busy" x-cloak class="size-4 animate-spin rounded-full border-2 border-white/30 border-t-white"></span>
                            {{ __('admin.settings.email.test_button') }}
                        </button>
                    </div>
                </div>
            </form>

            {{-- ===== Plugins ===== --}}
            <div x-show="tab === 'plugins'" x-cloak x-data="pluginManager({ storeUrl: @js(route('admin.settings.plugins.store')) })">
                <div class="mb-2 flex items-center justify-between gap-3">
                    <div class="text-base font-bold">{{ __('admin.settings.plugins.heading') }}</div>
                    <button type="button" x-on:click="openCreate()" class="inline-flex items-center gap-1.5 rounded-xl bg-primary-600 px-4 py-2.5 text-[13px] font-bold text-white transition hover:bg-primary-700">
                        <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
                        {{ __('admin.settings.plugins.add') }}
                    </button>
                </div>
                <p class="mb-5 text-[12.5px] text-ink-muted">{{ __('admin.settings.plugins.hint') }}</p>

                <div class="flex flex-col gap-3">
                    {{-- The official, built-in plugins: served from the app itself;
                         not operator-editable. Same list as the public docs page. --}}
                    @foreach (\App\Support\BuiltinPlugins::all() as $builtin)
                        <div class="rounded-[14px] border border-primary-100 bg-primary-50/40 p-4">
                            <div class="flex flex-wrap items-start justify-between gap-3">
                                <div class="min-w-0">
                                    <div class="flex flex-wrap items-center gap-2 text-[14px] font-bold">
                                        {{ $builtin['title'] }}
                                        <span class="rounded-md bg-white px-1.5 py-0.5 text-[10.5px] font-normal text-ink-muted" dir="ltr">v{{ $builtin['version'] }}</span>
                                        <span class="rounded-md bg-primary-600/10 px-2 py-0.5 text-[10.5px] font-bold text-primary-600">{{ __('admin.settings.plugins.builtin_badge') }}</span>
                                    </div>
                                    <div class="mt-1.5 flex flex-wrap gap-1.5">
                                        @foreach ($builtin['tags'] as $tag)
                                            <span class="rounded-md bg-primary-50 px-2 py-0.5 text-[10.5px] font-bold text-primary-600" dir="ltr">{{ $tag }}</span>
                                        @endforeach
                                    </div>
                                    <p class="mt-2 text-[11.5px] leading-6 text-ink-faint">{{ __('admin.settings.plugins.builtin_hint') }}</p>
                                </div>
                                <a href="{{ $builtin['url'] }}" class="shrink-0 rounded-lg border border-line bg-white px-3 py-1.5 text-[12px] font-bold text-ink-soft transition hover:border-primary-300">{{ __('admin.settings.plugins.download') }}</a>
                            </div>
                        </div>
                    @endforeach

                    @forelse ($plugins as $plugin)
                        @php
                            $pluginPayload = [
                                'title' => $plugin->title,
                                'version' => $plugin->version,
                                'zip_url' => $plugin->zip_url,
                                'install_text' => $plugin->install_text,
                                'tags' => $plugin->tags ?? [],
                                'sort_order' => $plugin->sort_order,
                                'updateUrl' => route('admin.settings.plugins.update', $plugin),
                            ];
                        @endphp
                        <div class="rounded-[14px] border border-[#f0eff5] p-4">
                            <div class="flex flex-wrap items-start justify-between gap-3">
                                <div class="min-w-0">
                                    <div class="flex items-center gap-2 text-[14px] font-bold">
                                        {{ $plugin->title }}
                                        <span class="rounded-md bg-[#f1f0f5] px-1.5 py-0.5 text-[10.5px] font-normal text-ink-muted" dir="ltr">v{{ $plugin->version }}</span>
                                    </div>
                                    @if (! empty($plugin->tags))
                                        <div class="mt-1.5 flex flex-wrap gap-1.5">
                                            @foreach ($plugin->tags as $tag)
                                                <span class="rounded-md bg-primary-50 px-2 py-0.5 text-[10.5px] font-bold text-primary-600">{{ $tag }}</span>
                                            @endforeach
                                        </div>
                                    @endif
                                </div>
                                <div class="flex shrink-0 items-center gap-2">
                                    <a href="{{ $plugin->zip_url }}" target="_blank" rel="noopener" class="rounded-lg border border-line px-3 py-1.5 text-[12px] font-bold text-ink-soft transition hover:border-primary-300">{{ __('admin.settings.plugins.download') }}</a>
                                    <button type="button" x-on:click="openEdit(@js($pluginPayload))" class="rounded-lg bg-primary-50 px-3 py-1.5 text-[12px] font-bold text-primary-600 transition hover:bg-primary-100">{{ __('admin.settings.plugins.edit') }}</button>
                                    <form method="POST" action="{{ route('admin.settings.plugins.destroy', $plugin) }}" x-ref="del{{ $plugin->id }}">
                                        @csrf @method('DELETE')
                                        <button type="button" x-on:click="$store.confirm.ask({ message: @js(__('admin.settings.plugins.confirm_delete')), onConfirm: () => $refs.del{{ $plugin->id }}.submit() })" class="rounded-lg bg-secondary-50 px-3 py-1.5 text-[12px] font-bold text-secondary-500 transition hover:bg-secondary-100">{{ __('admin.settings.plugins.delete') }}</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="rounded-[14px] border border-dashed border-[#e3e1ec] bg-[#fbfbfd] px-4 py-10 text-center text-sm text-ink-muted">{{ __('admin.settings.plugins.empty') }}</div>
                    @endforelse
                </div>

                {{-- Add / edit modal --}}
                <template x-teleport="body">
                    <div x-show="open" x-cloak class="fixed inset-0 z-[120] flex items-center justify-center p-4" x-transition.opacity>
                        <div class="absolute inset-0 bg-ink/45 backdrop-blur-sm" x-on:click="close()"></div>
                        <div class="relative flex max-h-[88vh] w-full max-w-lg flex-col overflow-hidden rounded-2xl bg-white shadow-2xl" x-on:keydown.escape.window="close()">
                            <div class="flex items-center justify-between border-b border-[#ececf2] px-6 py-4.5">
                                <h3 class="text-base font-bold" x-text="method === 'PUT' ? @js(__('admin.settings.plugins.modal.edit_title')) : @js(__('admin.settings.plugins.modal.add_title'))"></h3>
                                <button type="button" x-on:click="close()" class="grid size-8 place-items-center rounded-lg bg-[#f2f0fa] text-ink-soft transition hover:bg-[#e8e3f8]"><svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
                            </div>
                            <form method="POST" x-bind:action="action" x-ref="form" class="flex flex-col gap-4 overflow-y-auto p-6">
                                @csrf
                                <input type="hidden" name="_method" x-bind:value="method">
                                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                                    <div>
                                        <label class="{{ $labelCls }}">{{ __('admin.settings.plugins.modal.title') }}</label>
                                        <input name="title" x-model="form.title" class="{{ $inputCls }}">
                                    </div>
                                    <div>
                                        <label class="{{ $labelCls }}">{{ __('admin.settings.plugins.modal.version') }}</label>
                                        <input name="version" x-model="form.version" dir="ltr" class="{{ $ltrCls }}">
                                    </div>
                                </div>
                                <div>
                                    <label class="{{ $labelCls }}">{{ __('admin.settings.plugins.modal.zip_url') }}</label>
                                    <input name="zip_url" x-model="form.zip_url" dir="ltr" class="{{ $ltrCls }}" placeholder="https://…">
                                </div>
                                <div>
                                    <label class="{{ $labelCls }}">{{ __('admin.settings.plugins.modal.tags') }}</label>
                                    <input name="tags" x-model="form.tags" class="{{ $inputCls }}">
                                    <p class="mt-1.5 text-[11.5px] text-ink-faint">{{ __('admin.settings.plugins.modal.tags_hint') }}</p>
                                </div>
                                <div>
                                    <label class="{{ $labelCls }}">{{ __('admin.settings.plugins.modal.install_text') }}</label>
                                    <textarea name="install_text" x-model="form.install_text" rows="5" class="{{ $inputCls }}"></textarea>
                                </div>
                                <div class="w-40">
                                    <label class="{{ $labelCls }}">{{ __('admin.settings.plugins.modal.sort_order') }}</label>
                                    <input name="sort_order" x-model="form.sort_order" inputmode="numeric" dir="ltr" class="{{ $inputCls }}" style="text-align:right">
                                </div>
                                <div class="flex justify-end gap-2 border-t border-[#f0eff5] pt-4">
                                    <button type="button" x-on:click="close()" class="rounded-xl bg-[#f2f0fa] px-5 py-2.5 text-sm font-bold text-ink-soft transition hover:bg-[#e8e3f8]">{{ __('admin.settings.plugins.modal.cancel') }}</button>
                                    <button type="button" x-on:click="save()" class="rounded-xl bg-primary-600 px-6 py-2.5 text-sm font-bold text-white transition hover:bg-primary-700">{{ __('admin.settings.plugins.modal.save') }}</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>
@endsection