@extends('admin.layouts.app')

@section('title', 'Payment Settings')
@section('breadcrumb')
<li class="flex items-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-300" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg></li>
<li><a href="#" class="hover:text-primary-600 transition-colors">Settings</a></li>
<li class="flex items-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-300" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg></li>
<li><span class="text-gray-500">Payment</span></li>
@endsection
@section('heading', 'Payment Settings')
@section('subheading', 'Configure payment gateways and API keys.')

@section('content')

<form action="#" method="POST">
@csrf

{{-- Razorpay --}}
<div class="bg-white rounded-xl border border-gray-100 p-6 mb-6">
    <h3 class="text-base font-semibold text-gray-900 mb-5">Razorpay</h3>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1.5">Key ID</label>
            <div class="relative">
                <input type="password" name="razorpay_key_id" id="razorpay_key" placeholder="rzp_test_••••••••" class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all pr-10">
                <button type="button" onclick="togglePassword('razorpay_key')" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                </button>
            </div>
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1.5">Key Secret</label>
            <div class="relative">
                <input type="password" name="razorpay_key_secret" id="razorpay_secret" placeholder="••••••••" class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all pr-10">
                <button type="button" onclick="togglePassword('razorpay_secret')" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                </button>
            </div>
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1.5">Webhook Secret</label>
            <div class="relative">
                <input type="password" name="razorpay_webhook_secret" id="razorpay_webhook" placeholder="••••••••" class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all pr-10">
                <button type="button" onclick="togglePassword('razorpay_webhook')" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                </button>
            </div>
        </div>
        <div class="md:col-span-2 flex flex-wrap gap-4">
            <div class="flex items-center gap-2">
                <input type="checkbox" name="razorpay_enabled" value="1" class="w-4 h-4 rounded border-gray-300 text-primary-500 focus:ring-primary-500">
                <label class="text-sm font-medium text-gray-700">Enable Razorpay</label>
            </div>
            <div class="flex items-center gap-2">
                <input type="checkbox" name="razorpay_test_mode" value="1" checked class="w-4 h-4 rounded border-gray-300 text-primary-500 focus:ring-primary-500">
                <label class="text-sm font-medium text-gray-700">Test Mode</label>
            </div>
        </div>
    </div>
</div>

{{-- Stripe --}}
<div class="bg-white rounded-xl border border-gray-100 p-6 mb-6">
    <h3 class="text-base font-semibold text-gray-900 mb-5">Stripe</h3>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1.5">Publishable Key</label>
            <div class="relative">
                <input type="password" name="stripe_publishable_key" id="stripe_pub" placeholder="pk_••••••••" class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all pr-10">
                <button type="button" onclick="togglePassword('stripe_pub')" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                </button>
            </div>
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1.5">Secret Key</label>
            <div class="relative">
                <input type="password" name="stripe_secret_key" id="stripe_secret" placeholder="sk_••••••••" class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all pr-10">
                <button type="button" onclick="togglePassword('stripe_secret')" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                </button>
            </div>
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1.5">Webhook Secret</label>
            <div class="relative">
                <input type="password" name="stripe_webhook_secret" id="stripe_webhook" placeholder="whsec_••••••••" class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all pr-10">
                <button type="button" onclick="togglePassword('stripe_webhook')" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                </button>
            </div>
        </div>
        <div class="md:col-span-2 flex flex-wrap gap-4">
            <div class="flex items-center gap-2">
                <input type="checkbox" name="stripe_enabled" value="1" class="w-4 h-4 rounded border-gray-300 text-primary-500 focus:ring-primary-500">
                <label class="text-sm font-medium text-gray-700">Enable Stripe</label>
            </div>
            <div class="flex items-center gap-2">
                <input type="checkbox" name="stripe_test_mode" value="1" checked class="w-4 h-4 rounded border-gray-300 text-primary-500 focus:ring-primary-500">
                <label class="text-sm font-medium text-gray-700">Test Mode</label>
            </div>
        </div>
    </div>
</div>

{{-- PayU --}}
<div class="bg-white rounded-xl border border-gray-100 p-6 mb-6">
    <h3 class="text-base font-semibold text-gray-900 mb-5">PayU</h3>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1.5">Merchant Key</label>
            <div class="relative">
                <input type="password" name="payu_merchant_key" id="payu_key" placeholder="••••••••" class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all pr-10">
                <button type="button" onclick="togglePassword('payu_key')" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                </button>
            </div>
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1.5">Merchant Salt</label>
            <div class="relative">
                <input type="password" name="payu_merchant_salt" id="payu_salt" placeholder="••••••••" class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all pr-10">
                <button type="button" onclick="togglePassword('payu_salt')" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                </button>
            </div>
        </div>
        <div class="md:col-span-2 flex flex-wrap gap-4">
            <div class="flex items-center gap-2">
                <input type="checkbox" name="payu_enabled" value="1" class="w-4 h-4 rounded border-gray-300 text-primary-500 focus:ring-primary-500">
                <label class="text-sm font-medium text-gray-700">Enable PayU</label>
            </div>
            <div class="flex items-center gap-2">
                <input type="checkbox" name="payu_test_mode" value="1" checked class="w-4 h-4 rounded border-gray-300 text-primary-500 focus:ring-primary-500">
                <label class="text-sm font-medium text-gray-700">Test Mode</label>
            </div>
        </div>
    </div>
</div>

{{-- General Payment Settings --}}
<div class="bg-white rounded-xl border border-gray-100 p-6 mb-6">
    <h3 class="text-base font-semibold text-gray-900 mb-5">General Payment Settings</h3>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1.5">Default Gateway</label>
            <select name="default_gateway" class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all appearance-none bg-white">
                <option value="razorpay" selected>Razorpay</option>
                <option value="stripe">Stripe</option>
                <option value="payu">PayU</option>
            </select>
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1.5">Currency</label>
            <select name="currency" class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all appearance-none bg-white">
                <option value="INR" selected>INR (₹)</option>
                <option value="USD">USD ($)</option>
            </select>
        </div>
        <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
            <label class="block text-sm font-medium text-gray-700">Auto-capture Payments</label>
            <input type="checkbox" name="auto_capture" value="1" checked class="w-4 h-4 rounded border-gray-300 text-primary-500 focus:ring-primary-500">
        </div>
        <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
            <label class="block text-sm font-medium text-gray-700">Send Receipt Email</label>
            <input type="checkbox" name="send_receipt_email" value="1" checked class="w-4 h-4 rounded border-gray-300 text-primary-500 focus:ring-primary-500">
        </div>
    </div>
</div>

<button type="submit" class="px-5 py-2.5 bg-primary-500 text-white text-sm font-medium rounded-lg hover:bg-primary-600 transition-colors shadow-sm">Save</button>
</form>

@endsection

@section('scripts')
<script>
function togglePassword(id) {
    const el = document.getElementById(id);
    const btn = el.nextElementSibling;
    const icon = btn.querySelector('svg');
    if (el.type === 'password') {
        el.type = 'text';
        icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/>';
    } else {
        el.type = 'password';
        icon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>';
    }
}
</script>
@endsection