@extends('layouts.admin', ['title' => 'Payment Settings', 'pageTitle' => 'Payment Settings', 'active' => 'settings'])

@php
    $activeTab = 'payments';
    $intro = 'Configure accepted payment methods, gateway credentials, customer messages, and invoice payment behavior.';
    $currencies = ['USD' => 'USD - US Dollar', 'EUR' => 'EUR - Euro', 'GBP' => 'GBP - British Pound', 'PKR' => 'PKR - Pakistani Rupee'];
    $secretConfigured = fn (string $key) => (bool) data_get($settings, '_secret_configured.'.$key, false);
@endphp

@section('content')
    <div class="space-y-5">
        <div class="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
            <p class="max-w-3xl text-sm font-medium leading-6 text-booklio-muted">{{ $intro }}</p>
            <x-ui.button class="w-full sm:w-auto" type="submit" form="payment-settings-form">
                <x-ui.icon name="check" class="h-4 w-4" />
                <span>Save Payment Settings</span>
            </x-ui.button>
        </div>

        @if (session('status'))
            <div class="rounded-lg border border-emerald-200 bg-emerald-50 p-4 text-sm font-bold text-emerald-700">
                {{ session('status') }}
            </div>
        @endif

        <section class="grid gap-5 xl:grid-cols-[300px_minmax(0,1fr)]">
            @include('admin.settings.partials.nav', ['activeTab' => $activeTab])

            <form id="payment-settings-form" method="POST" action="{{ route('admin.settings.payments.update') }}" class="min-w-0 space-y-5">
                @csrf

                <x-ui.card title="General Payment Settings" description="These defaults affect invoices, checkout, receipts, and payment status messages.">
                    <div class="grid gap-4 md:grid-cols-2">
                        <x-form.select name="general[default_currency]" field="general.default_currency" label="Default currency" :value="data_get($settings, 'general.default_currency')" :options="$currencies" />
                        <x-form.select name="general[currency_position]" field="general.currency_position" label="Currency position" :value="data_get($settings, 'general.currency_position')" :options="['before' => 'Before amount ($100)', 'after' => 'After amount (100 $)']" />
                        <div class="flex items-center justify-between gap-4 rounded-lg border border-booklio-border bg-slate-50 p-4">
                            <div>
                                <p class="text-sm font-extrabold text-booklio-dark">Enable tax</p>
                                <p class="mt-1 text-xs leading-5 text-booklio-muted">Apply default tax settings to new invoices.</p>
                            </div>
                            <label class="relative inline-flex shrink-0 cursor-pointer items-center">
                                <input type="checkbox" name="general[enable_tax]" value="1" @checked(data_get($settings, 'general.enable_tax')) class="peer sr-only">
                                <span class="h-6 w-11 rounded-full bg-slate-300 transition peer-checked:bg-booklio-primary"></span>
                                <span class="absolute left-1 h-4 w-4 rounded-full bg-white transition peer-checked:translate-x-5"></span>
                            </label>
                        </div>
                        <x-form.input name="general[tax_name]" field="general.tax_name" label="Tax name" :value="data_get($settings, 'general.tax_name')" />
                        <x-form.input name="general[tax_percentage]" field="general.tax_percentage" label="Tax percentage" type="number" step="0.01" min="0" max="100" :value="data_get($settings, 'general.tax_percentage')" />
                        <x-form.input name="general[invoice_due_days]" field="general.invoice_due_days" label="Invoice due days" type="number" min="0" :value="data_get($settings, 'general.invoice_due_days')" />
                        <div class="md:col-span-2">
                            <x-form.textarea name="general[payment_success_message]" field="general.payment_success_message" label="Payment success message" :value="data_get($settings, 'general.payment_success_message')" rows="3" />
                        </div>
                        <div class="md:col-span-2">
                            <x-form.textarea name="general[payment_failed_message]" field="general.payment_failed_message" label="Payment failed message" :value="data_get($settings, 'general.payment_failed_message')" rows="3" />
                        </div>
                    </div>
                </x-ui.card>

                <div class="grid gap-5 xl:grid-cols-2">
                    <x-settings.payment-gateway-card title="Cash Payment" description="Allow staff to record in-person cash payments against invoices and appointments." icon="wallet" :enabled="data_get($settings, 'cash.enabled')" toggle-name="cash[enabled]" badge="Manual">
                        <div class="grid gap-4">
                            <x-form.input name="cash[display_name]" field="cash.display_name" label="Display name" :value="data_get($settings, 'cash.display_name')" />
                            <x-form.textarea name="cash[instructions]" field="cash.instructions" label="Instructions" :value="data_get($settings, 'cash.instructions')" rows="3" />
                        </div>
                    </x-settings.payment-gateway-card>

                    <x-settings.payment-gateway-card title="Bank Transfer" description="Show bank details and optional payment proof instructions on invoices." icon="building-2" :enabled="data_get($settings, 'bank.enabled')" toggle-name="bank[enabled]" badge="Manual">
                        <div class="grid gap-4 md:grid-cols-2">
                            <x-form.input name="bank[bank_name]" field="bank.bank_name" label="Bank name" :value="data_get($settings, 'bank.bank_name')" />
                            <x-form.input name="bank[account_holder_name]" field="bank.account_holder_name" label="Account holder name" :value="data_get($settings, 'bank.account_holder_name')" />
                            <x-settings.secret-input name="bank[account_number]" field="bank.account_number" label="Account number / IBAN" :configured="$secretConfigured('bank.account_number')" help="Stored encrypted. Leave blank to keep the current value." />
                            <x-settings.secret-input name="bank[swift_bic]" field="bank.swift_bic" label="SWIFT/BIC" :configured="$secretConfigured('bank.swift_bic')" help="Stored encrypted. Leave blank to keep the current value." />
                            <x-form.input name="bank[branch_name]" field="bank.branch_name" label="Branch name" :value="data_get($settings, 'bank.branch_name')" />
                            <div class="flex items-center justify-between gap-4 rounded-lg border border-booklio-border bg-slate-50 p-4">
                                <div>
                                    <p class="text-sm font-extrabold text-booklio-dark">Upload payment proof</p>
                                    <p class="mt-1 text-xs leading-5 text-booklio-muted">Customer upload placeholder.</p>
                                </div>
                                <label class="relative inline-flex shrink-0 cursor-pointer items-center">
                                    <input type="checkbox" name="bank[upload_payment_proof]" value="1" @checked(data_get($settings, 'bank.upload_payment_proof')) class="peer sr-only">
                                    <span class="h-6 w-11 rounded-full bg-slate-300 transition peer-checked:bg-booklio-primary"></span>
                                    <span class="absolute left-1 h-4 w-4 rounded-full bg-white transition peer-checked:translate-x-5"></span>
                                </label>
                            </div>
                            <div class="md:col-span-2">
                                <x-form.textarea name="bank[payment_instructions]" field="bank.payment_instructions" label="Payment instructions" :value="data_get($settings, 'bank.payment_instructions')" rows="3" />
                            </div>
                        </div>
                    </x-settings.payment-gateway-card>

                    <x-settings.payment-gateway-card title="Stripe Settings" description="Accept online card payments through Stripe. Use test credentials until backend API wiring is ready." icon="credit-card" :enabled="data_get($settings, 'stripe.enabled')" toggle-name="stripe[enabled]" badge="Test / Live">
                        <div class="grid gap-4 md:grid-cols-2">
                            <x-form.select name="stripe[mode]" field="stripe.mode" label="Mode" :value="data_get($settings, 'stripe.mode')" :options="['test' => 'Test', 'live' => 'Live']" />
                            <x-form.select name="stripe[currency]" field="stripe.currency" label="Stripe currency" :value="data_get($settings, 'stripe.currency')" :options="$currencies" />
                            <div class="md:col-span-2">
                                <x-settings.secret-input name="stripe[publishable_key]" field="stripe.publishable_key" label="Stripe publishable key" :configured="$secretConfigured('stripe.publishable_key')" help="Stored encrypted in Booklio settings. Leave blank to keep current key." />
                            </div>
                            <div class="md:col-span-2">
                                <x-settings.secret-input name="stripe[secret_key]" field="stripe.secret_key" label="Stripe secret key" :configured="$secretConfigured('stripe.secret_key')" help="Never expose this value in frontend production." />
                            </div>
                            <div class="md:col-span-2">
                                <x-settings.secret-input name="stripe[webhook_secret]" field="stripe.webhook_secret" label="Stripe webhook secret" :configured="$secretConfigured('stripe.webhook_secret')" />
                            </div>
                            <div class="md:col-span-2">
                                <x-form.input name="stripe[payment_description]" field="stripe.payment_description" label="Payment description" :value="data_get($settings, 'stripe.payment_description')" />
                            </div>
                        </div>
                        <div class="mt-5 flex flex-col gap-3 sm:flex-row sm:justify-end">
                            <x-ui.button variant="secondary" type="submit" formaction="{{ route('admin.settings.payments.test', 'stripe') }}"><span>Test Connection</span></x-ui.button>
                            <x-ui.button type="submit"><span>Save Stripe Settings</span></x-ui.button>
                        </div>
                    </x-settings.payment-gateway-card>

                    <x-settings.payment-gateway-card title="PayPal Settings" description="Accept PayPal payments from customers using sandbox or live app credentials." icon="globe-2" :enabled="data_get($settings, 'paypal.enabled')" toggle-name="paypal[enabled]" badge="Sandbox / Live">
                        <div class="grid gap-4 md:grid-cols-2">
                            <x-form.select name="paypal[mode]" field="paypal.mode" label="Mode" :value="data_get($settings, 'paypal.mode')" :options="['sandbox' => 'Sandbox', 'live' => 'Live']" />
                            <x-form.select name="paypal[currency]" field="paypal.currency" label="PayPal currency" :value="data_get($settings, 'paypal.currency')" :options="$currencies" />
                            <div class="md:col-span-2">
                                <x-settings.secret-input name="paypal[client_id]" field="paypal.client_id" label="PayPal client ID" :configured="$secretConfigured('paypal.client_id')" />
                            </div>
                            <div class="md:col-span-2">
                                <x-settings.secret-input name="paypal[client_secret]" field="paypal.client_secret" label="PayPal client secret" :configured="$secretConfigured('paypal.client_secret')" help="Stored encrypted. Backend gateway integration will use this later." />
                            </div>
                            <div class="md:col-span-2">
                                <x-settings.secret-input name="paypal[webhook_id]" field="paypal.webhook_id" label="PayPal webhook ID" :configured="$secretConfigured('paypal.webhook_id')" />
                            </div>
                        </div>
                        <div class="mt-5 flex flex-col gap-3 sm:flex-row sm:justify-end">
                            <x-ui.button variant="secondary" type="submit" formaction="{{ route('admin.settings.payments.test', 'paypal') }}"><span>Test Connection</span></x-ui.button>
                            <x-ui.button type="submit"><span>Save PayPal Settings</span></x-ui.button>
                        </div>
                    </x-settings.payment-gateway-card>
                </div>

                <x-ui.card title="Future Gateway Placeholders" description="These disabled cards reserve space for future marketplace-friendly payment integrations.">
                    <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-5">
                        @foreach ($futureGateways as $gateway)
                            <div class="rounded-lg border border-dashed border-booklio-border bg-slate-50 p-4">
                                <div class="flex items-center justify-between gap-3">
                                    <span class="flex h-10 w-10 items-center justify-center rounded-lg bg-white text-slate-500 shadow-soft">
                                        <x-ui.icon name="plug" class="h-5 w-5" />
                                    </span>
                                    <x-ui.badge variant="muted">Coming soon</x-ui.badge>
                                </div>
                                <h3 class="mt-4 text-sm font-extrabold text-booklio-dark">{{ $gateway['name'] }}</h3>
                                <p class="mt-2 text-xs leading-5 text-booklio-muted">{{ $gateway['description'] }}</p>
                                <button type="button" class="mt-4 h-9 w-full rounded-lg border border-booklio-border bg-white px-3 text-xs font-bold text-slate-600 shadow-soft">Configure later</button>
                            </div>
                        @endforeach
                    </div>
                </x-ui.card>

                <x-ui.card title="Security Notes" description="Backend-ready safeguards for production payment settings.">
                    <div class="grid gap-4 md:grid-cols-3">
                        <div class="rounded-lg bg-slate-50 p-4">
                            <p class="text-sm font-extrabold text-booklio-dark">Encrypted credentials</p>
                            <p class="mt-2 text-xs leading-5 text-booklio-muted">Stripe, PayPal, bank account, and webhook secrets are encrypted with Laravel Crypt before they are saved.</p>
                        </div>
                        <div class="rounded-lg bg-slate-50 p-4">
                            <p class="text-sm font-extrabold text-booklio-dark">No API calls yet</p>
                            <p class="mt-2 text-xs leading-5 text-booklio-muted">Test connection buttons save the form and return a placeholder message until real gateway SDKs are connected.</p>
                        </div>
                        <div class="rounded-lg bg-slate-50 p-4">
                            <p class="text-sm font-extrabold text-booklio-dark">Secret-safe UI</p>
                            <p class="mt-2 text-xs leading-5 text-booklio-muted">Configured secrets are never printed back into the page. Blank secret fields keep existing encrypted values.</p>
                        </div>
                    </div>
                </x-ui.card>

                <div class="flex flex-col gap-3 sm:flex-row sm:justify-end">
                    <x-ui.button variant="secondary" href="{{ route('admin.settings.payments') }}">Cancel</x-ui.button>
                    <x-ui.button type="submit">
                        <x-ui.icon name="check" class="h-4 w-4" />
                        <span>Save Payment Settings</span>
                    </x-ui.button>
                </div>
            </form>
        </section>
    </div>
@endsection