@extends('layouts.app')

@section('title', 'Payment settings')
@section('heading', 'Payment gateway settings')

@section('content')
@php $input = 'mt-1 w-full rounded-xl border border-slate-200 bg-white px-3 py-2.5 text-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20'; @endphp
<div class="mx-auto max-w-xl">
    <x-superadmin.page-header
        eyebrow="Billing"
        title="Payment settings"
        subtitle="Razorpay credentials. When set here, they override .env. Leave blank to use .env only."
    />

    <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm sm:p-6">
        <form action="{{ route('superadmin.payment-settings.store') }}" method="post" class="space-y-5">
            @csrf
            <div>
                <label for="razorpay_key_id" class="block text-sm font-medium text-slate-700">Razorpay Key ID</label>
                <input type="text" name="razorpay_key_id" id="razorpay_key_id" value="{{ old('razorpay_key_id', $razorpayKeyId) }}" autocomplete="off"
                       class="{{ $input }}" placeholder="rzp_live_... or rzp_test_...">
                @error('razorpay_key_id') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
            </div>
            <div>
                <label for="razorpay_key_secret" class="block text-sm font-medium text-slate-700">Razorpay Key Secret</label>
                <input type="password" name="razorpay_key_secret" id="razorpay_key_secret" value="{{ old('razorpay_key_secret') }}" autocomplete="off"
                       class="{{ $input }}" placeholder="{{ $hasRazorpaySecret ? 'Leave blank to keep current' : 'Enter secret' }}">
                <p class="mt-1 text-xs text-slate-500">Leave blank to keep the existing secret unchanged.</p>
                @error('razorpay_key_secret') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
            </div>
            <button type="submit" class="inline-flex rounded-xl bg-primary px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:opacity-95">Save</button>
        </form>
    </div>
</div>
@endsection