@extends('layouts.admin')

@section('content')
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <div class="container py-12">
        <h2 class="text-lg font-semibold mb-4">Payment Gateway Configuration</h2>

        @if (session('success'))
            <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-4" role="alert">
                <p>{{ session('success') }}</p>
            </div>
        @endif

        @if (session('error'))
            <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-4" role="alert">
                <p>{{ session('error') }}</p>
            </div>
        @endif

        <div class="bg-white shadow-sm rounded-lg p-6 mb-6">
            <form action="{{ route('admin.payment-gateways.store') }}" method="POST">
                @csrf
                <div class="mb-4">
                    <label for="gateway" class="form-label">Payment Gateway</label>
                    <select name="gateway" id="gateway" class="form-control">
                        <option value="stripe">Stripe</option>
                        <option value="razorpay">Razorpay</option>
                        <!-- Add more gateways here -->
                    </select>
                </div>
                <div class="mb-4">
                    <label for="api_key" class="form-label">API Key</label>
                    <input type="text" name="api_key" id="api_key" class="form-control" required>
                </div>
                <div class="mb-4">
                    <label for="api_secret" class="form-label">API Secret</label>
                    <input type="text" name="api_secret" id="api_secret" class="form-control" required>
                </div>
                <div class="mb-4 form-check">
                    <input type="checkbox" name="is_active" id="is_active" class="form-check-input" value="1">
                    <label for="is_active" class="form-check-label">Active</label>
                </div>
                <button type="submit" class="btn btn-primary">Save Configuration</button>
            </form>
        </div>

        <div class="bg-white shadow-sm rounded-lg p-6">
            <h3 class="text-lg font-semibold mb-4">Configured Gateways</h3>
            <table class="table">
                <thead>
                    <tr>
                        <th>Gateway</th>
                        <th>API Key</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($gateways as $gateway)
                        <tr>
                            <td>{{ ucfirst($gateway->gateway) }}</td>
                            <td>{{ substr($gateway->api_key, 0, 10) }}...</td>
                            <td>
                                <span class="badge {{ $gateway->is_active ? 'bg-success' : 'bg-danger' }}">
                                    {{ $gateway->is_active ? 'Active' : 'Inactive' }}
                                </span>
                            </td>
                            <td>
                                <form action="{{ route('admin.payment-gateways.toggle', $gateway) }}" method="POST" style="display:inline;">
                                    @csrf
                                    @method('PATCH')
                                    <button type="submit" class="btn btn-sm {{ $gateway->is_active ? 'btn-warning' : 'btn-success' }}">
                                        {{ $gateway->is_active ? 'Deactivate' : 'Activate' }}
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
@endsection