@extends('layouts.admin')

@section('title', 'Payment Providers')
@section('page_title', 'Payment Gateway Configurations')

@section('content')

    <div class="space-y-8">
        
        <p class="text-xs text-gray-400">Configure multi-gateway payment processing. Toggle test / sandbox mode and credentials without restarting servers.</p>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            @foreach($providers as $p)
                <div class="p-6 rounded-2xl bg-[#161b22] border border-[#30363d] space-y-6 flex flex-col justify-between">
                    
                    <div class="space-y-4">
                        <div class="flex items-center justify-between border-b border-[#30363d] pb-3">
                            <div class="flex items-center gap-2.5">
                                @if($p->provider === 'stripe')
                                    <i class="fa-brands fa-cc-stripe text-2xl text-indigo-400"></i>
                                @elseif($p->provider === 'square')
                                    <i class="fa-brands fa-square text-2xl text-sky-400"></i>
                                @else
                                    <i class="fa-solid fa-money-bill-wave text-2xl text-emerald-400"></i>
                                @endif
                                <div>
                                    <h3 class="font-serif text-base font-bold text-white uppercase">{{ $p->provider }}</h3>
                                    <span class="text-[10px] text-gray-400 font-mono">{{ $p->display_name }}</span>
                                </div>
                            </div>

                            <span class="text-[10px] font-bold uppercase px-2 py-0.5 rounded-full {{ $p->is_enabled ? 'bg-emerald-950 text-emerald-300 border border-emerald-500/30' : 'bg-rose-950 text-rose-300 border border-rose-500/30' }}">
                                {{ $p->is_enabled ? 'Enabled' : 'Disabled' }}
                            </span>
                        </div>

                        <form method="POST" action="{{ route('admin.payments.update', $p->id) }}" class="space-y-4 text-xs">
                            @csrf
                            @method('PUT')

                            <div>
                                <label class="block font-semibold text-gray-300 mb-1">Display Name (Checkout)</label>
                                <input type="text" name="display_name" value="{{ old('display_name', $p->display_name) }}" required class="w-full bg-[#0e1117] border border-[#30363d] rounded-xl px-3 py-2 text-white focus:outline-none focus:border-amber-400">
                            </div>

                            @if($p->provider === 'stripe')
                                <div>
                                    <label class="block font-semibold text-gray-300 mb-1">Stripe Publishable Key</label>
                                    <input type="text" name="config[publishable_key]" value="{{ $p->config['publishable_key'] ?? '' }}" placeholder="pk_test_..." class="w-full bg-[#0e1117] border border-[#30363d] rounded-xl px-3 py-2 text-white font-mono text-[11px] focus:outline-none focus:border-amber-400">
                                </div>
                                <div>
                                    <label class="block font-semibold text-gray-300 mb-1">Stripe Secret Key</label>
                                    <input type="password" name="config[secret_key]" value="{{ $p->config['secret_key'] ?? '' }}" placeholder="sk_test_..." class="w-full bg-[#0e1117] border border-[#30363d] rounded-xl px-3 py-2 text-white font-mono text-[11px] focus:outline-none focus:border-amber-400">
                                </div>
                                <div>
                                    <label class="block font-semibold text-gray-300 mb-1">Webhook Secret</label>
                                    <input type="password" name="config[webhook_secret]" value="{{ $p->config['webhook_secret'] ?? '' }}" placeholder="whsec_..." class="w-full bg-[#0e1117] border border-[#30363d] rounded-xl px-3 py-2 text-white font-mono text-[11px] focus:outline-none focus:border-amber-400">
                                </div>
                            @elseif($p->provider === 'square')
                                <div>
                                    <label class="block font-semibold text-gray-300 mb-1">Square Application ID</label>
                                    <input type="text" name="config[application_id]" value="{{ $p->config['application_id'] ?? '' }}" placeholder="sandbox-sq0idb-..." class="w-full bg-[#0e1117] border border-[#30363d] rounded-xl px-3 py-2 text-white font-mono text-[11px] focus:outline-none focus:border-amber-400">
                                </div>
                                <div>
                                    <label class="block font-semibold text-gray-300 mb-1">Square Access Token</label>
                                    <input type="password" name="config[access_token]" value="{{ $p->config['access_token'] ?? '' }}" class="w-full bg-[#0e1117] border border-[#30363d] rounded-xl px-3 py-2 text-white font-mono text-[11px] focus:outline-none focus:border-amber-400">
                                </div>
                                <div>
                                    <label class="block font-semibold text-gray-300 mb-1">Location ID</label>
                                    <input type="text" name="config[location_id]" value="{{ $p->config['location_id'] ?? '' }}" class="w-full bg-[#0e1117] border border-[#30363d] rounded-xl px-3 py-2 text-white font-mono text-[11px] focus:outline-none focus:border-amber-400">
                                </div>
                            @else
                                <div>
                                    <label class="block font-semibold text-gray-300 mb-1">Customer Checkout Instructions</label>
                                    <textarea name="config[instructions]" rows="4" class="w-full bg-[#0e1117] border border-[#30363d] rounded-xl p-3 text-white focus:outline-none focus:border-amber-400">{{ $p->config['instructions'] ?? 'Pay with cash or credit card upon receipt of your food order.' }}</textarea>
                                </div>
                            @endif

                            <div class="space-y-2 pt-2 border-t border-[#30363d]">
                                <label class="flex items-center gap-2 cursor-pointer text-gray-300">
                                    <input type="checkbox" name="is_enabled" value="1" {{ $p->is_enabled ? 'checked' : '' }} class="rounded accent-amber-400">
                                    <span>Enable on Checkout Page</span>
                                </label>

                                @if($p->provider !== 'merchant')
                                    <label class="flex items-center gap-2 cursor-pointer text-amber-300">
                                        <input type="checkbox" name="is_test_mode" value="1" {{ $p->is_test_mode ? 'checked' : '' }} class="rounded accent-amber-400">
                                        <span>Sandbox / Test Mode</span>
                                    </label>
                                @endif
                            </div>

                            <button type="submit" class="w-full bg-amber-400 hover:bg-amber-300 text-black font-bold py-2 rounded-xl transition-colors shadow">
                                Save {{ ucfirst($p->provider) }} Settings
                            </button>
                        </form>
                    </div>

                </div>
            @endforeach
        </div>

    </div>

@endsection