@extends('admin.layouts.app')

@section('title', 'Payment Gateway Settings')

@section('content')
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-white">Payment Gateway Settings</h1>
        <p class="text-sm text-slate-400 mt-1">Manage payment gateways, commissions, and tax deductions.</p>
    </div>

    @if(session('success'))
        <div class="bg-green-500/10 border border-green-500/20 text-green-500 px-4 py-3 rounded-xl mb-6">
            {{ session('success') }}
        </div>
    @endif

    @if ($errors->any())
        <div class="bg-red-500/10 border border-red-500/20 text-red-500 px-4 py-3 rounded-xl mb-6">
            <ul class="list-disc ml-5">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('admin.settings.payment.update') }}" method="POST">
        @csrf

        <div class="max-w-4xl space-y-8">
            <!-- Active Payment Gateway -->
            <div class="glass-card rounded-2xl p-8 border-l-4 border-blue-500">
                <div class="flex items-center gap-3 mb-6">
                    <div class="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center">
                        <i data-lucide="cog" class="w-5 h-5 text-blue-500"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold text-white">Enable Default Gateway</h3>
                        <p class="text-xs text-slate-500">Select which payment method will be active for users.</p>
                    </div>
                </div>

                <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
                    @foreach(['razorpay' => 'Razorpay', 'paypal' => 'PayPal', 'stripe' => 'Stripe', 'manual' => 'Manual Pay'] as $value => $label)
                        <label class="relative flex flex-col items-center gap-3 p-4 rounded-xl border {{ ($settings['active_payment_gateway'] ?? 'manual') == $value ? 'bg-blue-500/10 border-blue-500 select-active' : 'bg-slate-900/50 border-slate-800 hover:border-slate-700' }} cursor-pointer transition-all">
                            <input type="radio" name="active_payment_gateway" value="{{ $value }}" 
                                {{ ($settings['active_payment_gateway'] ?? 'manual') == $value ? 'checked' : '' }}
                                class="sr-only">
                            <span class="text-xs font-bold uppercase tracking-widest {{ ($settings['active_payment_gateway'] ?? 'manual') == $value ? 'text-blue-400' : 'text-slate-500' }}">{{ $label }}</span>
                            @if(($settings['active_payment_gateway'] ?? 'manual') == $value)
                                <div class="absolute top-2 right-2 w-2 h-2 rounded-full bg-blue-500 shadow-lg shadow-blue-500/50"></div>
                            @endif
                        </label>
                    @endforeach
                </div>
            </div>

            <!-- Razorpay Settings -->
            <div class="glass-card rounded-2xl p-8">
                <div class="flex items-center justify-between mb-8 border-b border-slate-800 pb-4">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-lg bg-indigo-500/10 flex items-center justify-center">
                            <i data-lucide="credit-card" class="w-5 h-5 text-indigo-500"></i>
                        </div>
                        <h3 class="text-lg font-bold text-white">Razorpay Configuration</h3>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" name="razorpay_status" value="1" class="sr-only peer" {{ ($settings['razorpay_status'] ?? 0) ? 'checked' : '' }}>
                        <div class="w-11 h-6 bg-slate-800 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                        <span class="ms-3 text-sm font-medium text-slate-400">Enable</span>
                    </label>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-slate-300">Razorpay Key ID</label>
                        <input type="text" name="razorpay_key" value="{{ $settings['razorpay_key'] ?? '' }}"
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-indigo-500 outline-none transition-all" placeholder="rzp_test_...">
                    </div>
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-slate-300">Razorpay Key Secret</label>
                        <input type="password" name="razorpay_secret" value="{{ $settings['razorpay_secret'] ?? '' }}"
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-indigo-500 outline-none transition-all" placeholder="••••••••••••">
                    </div>
                </div>
            </div>

            <!-- PayPal Settings -->
            <div class="glass-card rounded-2xl p-8">
                <div class="flex items-center justify-between mb-8 border-b border-slate-800 pb-4">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center">
                            <i data-lucide="send" class="w-5 h-5 text-blue-500"></i>
                        </div>
                        <h3 class="text-lg font-bold text-white">PayPal Configuration</h3>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" name="paypal_status" value="1" class="sr-only peer" {{ ($settings['paypal_status'] ?? 0) ? 'checked' : '' }}>
                        <div class="w-11 h-6 bg-slate-800 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                        <span class="ms-3 text-sm font-medium text-slate-400">Enable</span>
                    </label>
                </div>

                <div class="space-y-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-slate-300">PayPal Client ID</label>
                            <input type="text" name="paypal_client_id" value="{{ $settings['paypal_client_id'] ?? '' }}"
                                class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                        </div>
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-slate-300">PayPal Secret</label>
                            <input type="password" name="paypal_secret" value="{{ $settings['paypal_secret'] ?? '' }}"
                                class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                        </div>
                    </div>
                    <div class="max-w-xs">
                        <label class="block text-sm font-medium text-slate-300 mb-2">PayPal Mode</label>
                        <select name="paypal_mode" class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all appearance-none">
                            <option value="sandbox" {{ ($settings['paypal_mode'] ?? 'sandbox') == 'sandbox' ? 'selected' : '' }}>Sandbox (Test)</option>
                            <option value="live" {{ ($settings['paypal_mode'] ?? 'sandbox') == 'live' ? 'selected' : '' }}>Live (Production)</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- Stripe Settings -->
            <div class="glass-card rounded-2xl p-8">
                <div class="flex items-center justify-between mb-8 border-b border-slate-800 pb-4">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-lg bg-emerald-500/10 flex items-center justify-center">
                            <i data-lucide="layout-grid" class="w-5 h-5 text-emerald-500"></i>
                        </div>
                        <h3 class="text-lg font-bold text-white">Stripe Configuration</h3>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" name="stripe_status" value="1" class="sr-only peer" {{ ($settings['stripe_status'] ?? 0) ? 'checked' : '' }}>
                        <div class="w-11 h-6 bg-slate-800 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-emerald-600"></div>
                        <span class="ms-3 text-sm font-medium text-slate-400">Enable</span>
                    </label>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-slate-300">Stripe Publishable Key</label>
                        <input type="text" name="stripe_key" value="{{ $settings['stripe_key'] ?? '' }}"
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-emerald-500 outline-none transition-all">
                    </div>
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-slate-300">Stripe Secret Key</label>
                        <input type="password" name="stripe_secret" value="{{ $settings['stripe_secret'] ?? '' }}"
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-emerald-500 outline-none transition-all">
                    </div>
                </div>
            </div>

            <!-- Commission & Tax (Moved to Bottom) -->
            <div class="glass-card rounded-2xl p-8">
                <div class="flex items-center gap-3 mb-8 border-b border-slate-800 pb-4">
                    <div class="w-10 h-10 rounded-lg bg-slate-500/10 flex items-center justify-center">
                        <i data-lucide="percent" class="w-5 h-5 text-slate-400"></i>
                    </div>
                    <h3 class="text-lg font-bold text-white">Fee Structure</h3>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <!-- Admin Commission -->
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-slate-300">Admin Fee (%)</label>
                        <input type="number" name="admin_commission" value="{{ $settings['admin_commission'] ?? 0 }}" step="0.01"
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                    </div>
                    <!-- Marketplace Commission -->
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-slate-300">Marketplace Fee (%)</label>
                        <input type="number" name="marketplace_commission" value="{{ $settings['marketplace_commission'] ?? 0 }}" step="0.01"
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                    </div>
                    <!-- TDS -->
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-slate-300">TDS Deduction (%)</label>
                        <input type="number" name="tds_deduction" value="{{ $settings['tds_deduction'] ?? 0 }}" step="0.01"
                            class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                    </div>
                </div>
            </div>

            <div class="flex justify-end pt-4 pb-12">
                <button type="submit"
                    class="bg-blue-600 hover:bg-blue-700 text-white font-bold px-12 py-4 rounded-xl shadow-lg shadow-blue-500/20 transition-all flex items-center gap-2">
                    <i data-lucide="save" class="w-5 h-5"></i>
                    Update Gateway Settings
                </button>
            </div>
        </div>
    </form>
@endsection