@extends('layouts.school')
@section('title', 'Online Payments')
@section('header', 'Online Payments')
@section('content')
    <div class="mx-auto max-w-3xl space-y-6">

        @if (!$active)
            <div class="rounded-xl bg-amber-50 p-4 text-sm text-amber-800 ring-1 ring-amber-200">
                No gateway is active. Parents can still claim bank transfers and staff can record
                cash payments in the office. Configure and activate a provider below to let parents
                pay invoices online.
            </div>
            @if (!empty(array_filter($platformConfigured)))
                <div class="rounded-xl bg-primary-50 p-4 text-sm text-primary-800 ring-1 ring-primary-200">
                    Some platform payment keys are configured. You can enable the
                    <strong>Pishon gateway</strong> per provider to start accepting online payments immediately,
                    or enter your own merchant keys.
                </div>
            @endif
        @else
            <div class="rounded-xl bg-green-50 p-4 text-sm text-green-800 ring-1 ring-green-200">
                <strong>{{ ucfirst($active->provider) }}</strong> is the active gateway
                ({{ $active->mode }} mode) for online fee payments.
            </div>
        @endif

        @if (!$onlineEnabled)
            <div class="rounded-xl bg-amber-50 p-4 text-sm text-amber-800 ring-1 ring-amber-200">
                "Enable online payments in the parent portal" is currently off in
                <a href="{{ route('school.finance.settings', request()->route('schoolId')) }}" class="underline">Finance Settings</a>.
            </div>
        @endif

        @foreach ($providers as $provider)
            @php($config = $configs->firstWhere('provider', $provider))
            <div class="rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5">
                <div class="mb-4 flex items-center justify-between">
                    <div>
                        <h3 class="text-sm font-semibold text-gray-900">{{ ucfirst($provider) }}</h3>
                        <p class="text-xs text-gray-500">
                            @if ($config && $config->isPishonMode())
                                Pishon gateway · {{ $config->mode }} mode
                                @if ($config->is_active)
                                    · <span class="font-medium text-green-700">Active</span>
                                @else
                                    ·
                                    <button type="button"
                                        class="font-medium text-primary-600 underline"
                                        value="{{ route('school.finance.gateways.activate', [request()->route('schoolId'), $config->id]) }}"
                                        data-activate>
                                        activate
                                    </button>
                                @endif
                            @elseif ($config)
                                {{ $config->mode }} mode · Own keys
                                @if ($config->is_active)
                                    · <span class="font-medium text-green-700">Active</span>
                                @else
                                    ·
                                    <button type="button"
                                        class="font-medium text-primary-600 underline"
                                        value="{{ route('school.finance.gateways.activate', [request()->route('schoolId'), $config->id]) }}"
                                        data-activate>
                                        activate
                                    </button>
                                @endif
                            @else
                                Not configured
                            @endif
                        </p>
                    </div>
                    @if ($config && $config->isPishonMode())
                        <span class="rounded-full bg-primary-50 px-3 py-1 text-xs font-medium text-primary-700">Pishon gateway</span>
                    @elseif ($config && $config->hasCredentials())
                        <span class="rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-600">Keys saved</span>
                    @endif
                </div>

                @if ($config && $config->isPishonMode())
                    <div class="mb-4 rounded-xl border border-primary-200 bg-primary-50 p-4 text-sm text-primary-800">
                        <div class="flex items-start gap-3">
                            <div>
                                <p class="font-medium">This provider is managed by Pishon.</p>
                                <p class="mt-1 text-xs">
                                    Payments run through the platform gateway and are settled to your default
                                    settlement profile. No keys are stored on this school.
                                </p>
                                <p class="mt-2 text-xs">
                                    Webhook URL to register with {{ ucfirst($provider) }} (if not already set):
                                    <code class="rounded bg-primary-100 px-1.5 py-0.5 text-[11px]">{{ url('/api/webhooks/payments/' . $provider) }}</code>
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="flex flex-wrap items-center justify-between gap-3">
                        @if (!$hasSettlementProfile)
                            <a href="{{ route('school.finance.settlement.index', request()->route('schoolId')) }}"
                                class="text-xs font-medium text-amber-700 underline">
                                Add a settlement profile so payouts reach your bank account.
                            </a>
                        @else
                            <a href="{{ route('school.finance.settlement.index', request()->route('schoolId')) }}"
                                class="text-xs font-medium text-primary-600 underline">
                                Manage settlement profile
                            </a>
                        @endif

                        <div class="flex items-center gap-3">
                            <button type="button" data-test-connection
                                data-url="{{ route('school.finance.gateways.test', [request()->route('schoolId'), $config->id]) }}"
                                class="rounded-lg border border-gray-300 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50">
                                Test connection
                            </button>
                            @if ($config->is_active)
                                <form method="POST" action="{{ route('school.finance.gateways.deactivate', [request()->route('schoolId'), $config->id]) }}">
                                    @csrf @method('PATCH')
                                    <button class="text-xs font-medium text-red-600 hover:text-red-700">Deactivate gateway</button>
                                </form>
                            @endif
                        </div>
                    </div>
                @else
                    <form method="POST" action="{{ route('school.finance.gateways.store', [request()->route('schoolId'), $provider]) }}" class="space-y-4">
                        @csrf
                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Mode</label>
                                <select name="mode" class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none">
                                    <option value="test" {{ $config?->mode === 'test' ? 'selected' : '' }}>Test</option>
                                    <option value="live" {{ $config?->mode === 'live' ? 'selected' : '' }}>Live</option>
                                </select>
                            </div>
                            <div class="sm:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Public key</label>
                                <input type="text" name="public_key" value="{{ $config?->public_key ?? '' }}" required maxlength="255" placeholder="pk_test_…" autocomplete="off" class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Secret key</label>
                                <input type="password" name="secret_key" required maxlength="255" placeholder="sk_test_…" autocomplete="new-password" class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none">
                                @if ($config && $config->hasCredentials())
                                    <p class="mt-1 text-xs text-gray-500">Current key: {{ $config->maskedSecret() }} — saved encrypted.</p>
                                @endif
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Webhook secret</label>
                                <input type="password" name="webhook_secret" required maxlength="255" placeholder="whsec_…" autocomplete="new-password" class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none">
                            </div>
                        </div>

                        <p class="text-xs text-gray-500">
                            Webhook URL to register with {{ ucfirst($provider) }}:
                            <code class="rounded bg-gray-100 px-1.5 py-0.5 text-[11px]">{{ url('/api/webhooks/payments/' . $provider) }}</code>
                            @if ($config && filled($config->webhook_secret))
                                · <span class="font-medium text-green-700">webhook secret saved</span>
                            @else
                                · <span class="text-amber-700">set a webhook secret to receive payment confirmations</span>
                            @endif
                            (signature-verified and idempotent).
                        </p>

                        @if ($config && $config->hasCredentials())
                            <div class="flex items-center gap-3">
                                <button type="button" data-test-connection
                                    data-url="{{ route('school.finance.gateways.test', [request()->route('schoolId'), $config->id]) }}"
                                    class="rounded-lg border border-gray-300 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50">
                                    Test connection
                                </button>
                                <span class="text-xs text-gray-500">Verifies your saved {{ ucfirst($provider) }} keys.</span>
                            </div>
                        @endif

                        <div class="flex items-center justify-between">
                            <label class="flex items-center gap-2 text-sm text-gray-700">
                                <input type="checkbox" name="activate" value="1" class="rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                                Save and activate this gateway
                            </label>
                            <button class="rounded-lg bg-primary-600 px-5 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">Save Credentials</button>
                        </div>
                    </form>

                    <div class="mt-4 border-t border-gray-100 pt-4">
                        <p class="text-xs font-medium text-gray-600">Prefer Pishon to handle this for you?</p>
                        <div class="mt-2 flex flex-wrap items-center gap-3">
                            <form method="POST" action="{{ route('school.finance.gateways.pishon', [request()->route('schoolId'), $provider]) }}">
                                @csrf
                                <button
                                    @unless ($platformConfigured[$provider] ?? false)
                                        disabled title="Platform gateway not configured yet"
                                    @endunless
                                    class="rounded-lg border border-primary-600 px-4 py-2 text-xs font-semibold text-primary-600 hover:bg-primary-50 disabled:cursor-not-allowed disabled:opacity-40">
                                    Use Pishon gateway (no keys needed)
                                </button>
                            </form>
                            @if (!$hasSettlementProfile)
                                <a href="{{ route('school.finance.settlement.index', request()->route('schoolId')) }}"
                                    class="text-xs text-amber-700 underline">
                                    Add a settlement profile first
                                </a>
                            @endif
                        </div>
                        @unless ($platformConfigured[$provider] ?? false)
                            <p class="mt-1 text-xs text-gray-500">The platform gateway isn't configured yet — use your own keys for now.</p>
                        @endunless
                    </div>
                @endif
            </div>
        @endforeach
    </div>
@endsection

@push('scripts')
    <script>
        (function () {
            var token = '{{ csrf_token() }}';
            document.querySelectorAll('[data-activate]').forEach(function (btn) {
                btn.addEventListener('click', function () {
                    var form = document.createElement('form');
                    form.method = 'POST';
                    form.action = btn.value;
                    form.innerHTML = '<input type="hidden" name="_token" value="' + token + '"><input type="hidden" name="_method" value="PATCH">';
                    document.body.appendChild(form);
                    form.submit();
                });
            });

            document.querySelectorAll('[data-test-connection]').forEach(function (btn) {
                btn.addEventListener('click', function () {
                    var original = btn.textContent;
                    btn.disabled = true;
                    btn.textContent = 'Testing…';
                    fetch(btn.dataset.url, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': token,
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                        },
                    })
                        .then(function (r) { return r.json(); })
                        .then(function (payload) {
                            alert((payload.ok ? 'Success — ' : 'Failed — ') + (payload.message || 'no detail'));
                        })
                        .catch(function () { alert('Could not reach the provider. Try again.'); })
                        .finally(function () {
                            btn.disabled = false;
                            btn.textContent = original;
                        });
                });
            });
        })();
    </script>
@endpush