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

@section('content')
    <div class="page-head">
        <div><h1>Payment gateways</h1><p>Mobile money, card and bank integrations.</p></div>
        <button type="button" class="btn" data-modal="gateway-modal">+ New gateway</button>
    </div>

    <div class="card">
        <div class="card-body tight">
            <div class="table-wrap">
                <table class="data">
                    <thead><tr><th>Gateway</th><th>Provider</th><th>Environment</th><th class="num">Transactions</th>
                        <th class="num">Volume</th><th class="num">Success rate</th><th>Status</th><th></th></tr></thead>
                    <tbody>
                    @forelse ($gateways as $gateway)
                        @php
                            $total = $gateway->transactions()->count();
                            $success = $gateway->transactions()->where('status', 'success')->count();
                        @endphp
                        <tr>
                            <td><strong>{{ $gateway->name }}</strong></td>
                            <td><span class="badge info">{{ title_case_words($gateway->provider) }}</span></td>
                            <td class="small">{{ title_case_words($gateway->environment) }}</td>
                            <td class="num">{{ number_format($total) }}</td>
                            <td class="num">{{ money($gateway->transactions()->where('status', 'success')->sum('amount')) }}</td>
                            <td class="num">{{ $total > 0 ? percent(($success / $total) * 100) : '—' }}</td>
                            <td><span class="badge {{ status_color($gateway->is_active ? 'active' : 'inactive') }}">
                                {{ $gateway->is_active ? 'active' : 'inactive' }}</span></td>
                            <td class="right">
                                <form method="POST" action="{{ route('settings.gateways.toggle', $gateway) }}">
                                    @csrf
                                    <button type="submit" class="btn xs {{ $gateway->is_active ? 'danger' : 'success' }}">
                                        {{ $gateway->is_active ? 'Disable' : 'Enable' }}
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="8">
                            @include('components.empty-state', ['icon' => '&#128179;', 'title' => 'No gateways configured',
                                'message' => 'Add a payment processor to accept online payments.',
                                'action' => '<button type="button" class="btn sm" data-modal="gateway-modal">+ New gateway</button>'])
                        </td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal-backdrop" id="gateway-modal">
        <div class="modal">
            <form method="POST" action="{{ route('settings.gateways.store') }}">
                @csrf
                <div class="modal-head"><h3>New payment gateway</h3>
                    <button type="button" class="modal-close" data-modal-close>&times;</button></div>
                <div class="modal-body">
                    <div class="form-grid cols-1">
                        <div class="field"><label>Gateway name <span class="req">*</span></label>
                            <input type="text" name="name" required placeholder="Hubtel Mobile Money"></div>
                        <div class="field"><label>Provider <span class="req">*</span></label>
                            <select name="provider" required>
                                @foreach (['hubtel','paystack','flutterwave','stripe','mtn_momo','vodafone_cash','airteltigo_money','bank'] as $p)
                                    <option value="{{ $p }}">{{ title_case_words($p) }}</option>
                                @endforeach
                            </select></div>
                        <div class="field"><label>Environment <span class="req">*</span></label>
                            <select name="environment" required>
                                <option value="sandbox">Sandbox</option>
                                <option value="production">Production</option>
                            </select></div>
                        <div class="field"><label>Public key</label>
                            <input type="text" name="public_key" class="mono"></div>
                        <div class="field"><label>Secret key</label>
                            <input type="password" name="secret_key" class="mono">
                            <span class="hint">Stored encrypted at rest.</span></div>
                        <div class="field"><label>Webhook secret</label>
                            <input type="password" name="webhook_secret" class="mono"></div>
                        <label class="check"><input type="checkbox" name="is_active" value="1" checked> Active</label>
                    </div>
                </div>
                <div class="modal-foot">
                    <button type="button" class="btn secondary" data-modal-close>Cancel</button>
                    <button type="submit" class="btn">Create gateway</button>
                </div>
            </form>
        </div>
    </div>
@endsection