@extends('layouts.app')
@section('title', 'Payment gateways')
@section('section', 'Settings')

@php
    $mfConnected  = ! empty($mf['token']);
    $tapConnected = ! empty($tap['secret_key']);
@endphp

@section('content')
    <div class="page-head">
        <p class="eyebrow">Settings</p>
        <h1>Payment gateways</h1>
        <p class="lead">Connect the accounts you use to collect payments from your customers.
            These keys belong to your business — checkout uses them to charge KNET, mada, cards and Apple&nbsp;Pay.</p>
    </div>

    <div class="grid-2">
        {{-- ── MyFatoorah ── --}}
        <form class="panel" method="POST" action="{{ route('settings.gateways.update', 'myfatoorah') }}">
            @csrf
            <div class="gw-head">
                <div>
                    <p class="gw-name">MyFatoorah</p>
                    <p class="gw-note">Hosted payment link</p>
                </div>
                @if ($mfConnected)
                    <span class="pill pill-ok"><span class="dot"></span>Connected</span>
                @else
                    <span class="pill pill-off"><span class="dot"></span>Not connected</span>
                @endif
            </div>
            <div class="chips">
                <span class="chip">KNET</span><span class="chip">mada</span>
                <span class="chip">Apple Pay</span><span class="chip">Visa</span><span class="chip">Mastercard</span>
            </div>

            <div class="field">
                <label class="label" for="mf_base">API base URL</label>
                <input class="input" id="mf_base" name="base_url" inputmode="url"
                    value="{{ old('base_url', $mf['base_url'] ?? 'https://apitest.myfatoorah.com') }}">
                <p class="hint">Sandbox: apitest.myfatoorah.com · Live: api.myfatoorah.com (region-specific)</p>
            </div>
            <div class="field">
                <label class="label" for="mf_secret">API token</label>
                <input class="input" id="mf_secret" name="secret" type="password" autocomplete="off"
                    placeholder="{{ $mfConnected ? '•••••••• stored — leave blank to keep' : 'Paste your API token' }}">
            </div>
            <div class="field">
                <label class="label" for="mf_wh">Webhook secret <span style="color:var(--muted);font-weight:400">(optional)</span></label>
                <input class="input" id="mf_wh" name="webhook_secret" type="password" autocomplete="off"
                    placeholder="{{ ! empty($mf['webhook_secret']) ? '•••••••• stored' : 'From Dashboard › Webhooks' }}">
            </div>

            <div class="actions">
                <button class="btn btn-primary" type="submit">Save MyFatoorah</button>
                @if ($mfConnected)
                    <button class="btn btn-quiet" type="submit"
                        formaction="{{ route('settings.gateways.disconnect', 'myfatoorah') }}" formmethod="POST">Disconnect</button>
                @endif
            </div>
        </form>

        {{-- ── Tap ── --}}
        <form class="panel" method="POST" action="{{ route('settings.gateways.update', 'tap') }}">
            @csrf
            <div class="gw-head">
                <div>
                    <p class="gw-name">Tap</p>
                    <p class="gw-note">Hosted charge</p>
                </div>
                @if ($tapConnected)
                    <span class="pill pill-ok"><span class="dot"></span>Connected</span>
                @else
                    <span class="pill pill-off"><span class="dot"></span>Not connected</span>
                @endif
            </div>
            <div class="chips">
                <span class="chip">KNET</span><span class="chip">mada</span>
                <span class="chip">Benefit</span><span class="chip">Apple Pay</span><span class="chip">Cards</span>
            </div>

            <div class="field">
                <label class="label" for="tap_base">API base URL</label>
                <input class="input" id="tap_base" name="base_url" inputmode="url"
                    value="{{ old('base_url', $tap['base_url'] ?? 'https://api.tap.company') }}">
                <p class="hint">Same URL for sandbox and live — the key decides the mode.</p>
            </div>
            <div class="field">
                <label class="label" for="tap_secret">Secret key</label>
                <input class="input" id="tap_secret" name="secret" type="password" autocomplete="off"
                    placeholder="{{ $tapConnected ? '•••••••• stored — leave blank to keep' : 'sk_test_… or sk_live_…' }}">
            </div>
            <div class="field">
                <label class="label" for="tap_wh">Webhook secret <span style="color:var(--muted);font-weight:400">(optional)</span></label>
                <input class="input" id="tap_wh" name="webhook_secret" type="password" autocomplete="off"
                    placeholder="{{ ! empty($tap['webhook_secret']) ? '•••••••• stored' : 'For hashstring validation' }}">
            </div>

            <div class="actions">
                <button class="btn btn-primary" type="submit">Save Tap</button>
                @if ($tapConnected)
                    <button class="btn btn-quiet" type="submit"
                        formaction="{{ route('settings.gateways.disconnect', 'tap') }}" formmethod="POST">Disconnect</button>
                @endif
            </div>
        </form>
    </div>

    <div class="panel" style="margin-top:18px">
        <p class="safe-note" style="margin-top:0">
            <span>🔒</span>
            <span>Keys are stored against your store only and never shared with other stores on the platform.
            Card details are entered on the provider's secure page — they never touch this server.</span>
        </p>
    </div>
@endsection