@extends('layouts.app')

@section('title', 'Settings - EKINPAY')
@section('page-title', 'Platform Settings')

@section('content')
<style>
    body { overflow-x: hidden; }
    main { padding-left: 0 !important; padding-right: 0 !important; }
</style>
<div class="space-y-6 px-4 lg:px-2" x-data="{ activeTab: 'general' }">
    <!-- Tabs Navigation -->
    <div class="bg-slate-800/90 backdrop-blur-xl border border-slate-700/50 rounded-2xl shadow-2xl overflow-hidden" style="max-width: calc(100vw - 2rem);">
        <div class="border-b border-slate-700">
            <nav class="flex overflow-x-auto space-x-4 md:space-x-8 px-4 md:px-6" style="-webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none;" aria-label="Tabs">
                <button @click="activeTab = 'general'" :class="activeTab === 'general' ? 'border-blue-500 text-blue-400' : 'border-transparent text-slate-400 hover:text-white hover:border-slate-300'" class="whitespace-nowrap py-3 md:py-4 px-1 border-b-2 font-medium text-xs md:text-sm transition-colors">
                    General
                </button>
                <button @click="activeTab = 'sms'" :class="activeTab === 'sms' ? 'border-blue-500 text-blue-400' : 'border-transparent text-slate-400 hover:text-white hover:border-slate-300'" class="whitespace-nowrap py-3 md:py-4 px-1 border-b-2 font-medium text-xs md:text-sm transition-colors">
                    SMS
                </button>
                <button @click="activeTab = 'email'" :class="activeTab === 'email' ? 'border-blue-500 text-blue-400' : 'border-transparent text-slate-400 hover:text-white hover:border-slate-300'" class="whitespace-nowrap py-3 md:py-4 px-1 border-b-2 font-medium text-xs md:text-sm transition-colors">
                    Email
                </button>
                <button @click="activeTab = 'whatsapp'" :class="activeTab === 'whatsapp' ? 'border-blue-500 text-blue-400' : 'border-transparent text-slate-400 hover:text-white hover:border-slate-300'" class="whitespace-nowrap py-3 md:py-4 px-1 border-b-2 font-medium text-xs md:text-sm transition-colors">
                    WhatsApp
                </button>
                <button @click="activeTab = 'mpesa'" :class="activeTab === 'mpesa' ? 'border-blue-500 text-blue-400' : 'border-transparent text-slate-400 hover:text-white hover:border-slate-300'" class="whitespace-nowrap py-3 md:py-4 px-1 border-b-2 font-medium text-xs md:text-sm transition-colors">
                    System Payment
                </button>
                <button @click="activeTab = 'payment'" :class="activeTab === 'payment' ? 'border-blue-500 text-blue-400' : 'border-transparent text-slate-400 hover:text-white hover:border-slate-300'" class="whitespace-nowrap py-3 md:py-4 px-1 border-b-2 font-medium text-xs md:text-sm transition-colors">
                    Gateways
                </button>
            </nav>
        </div>

        <!-- Tab Content -->
        <div class="p-4 md:p-6">
            <!-- General Settings -->
            <div x-show="activeTab === 'general'" class="space-y-4">
                <form method="POST" action="{{ route('settings.update') }}">
                    @csrf
                    <input type="hidden" name="tab" value="general">
                    <h3 class="text-lg font-semibold text-white mb-4">General Settings</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Timezone</label>
                            <select name="timezone" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                <option value="UTC" {{ ($generalConfig['timezone'] ?? 'UTC') === 'UTC' ? 'selected' : '' }}>UTC</option>
                                <option value="America/New_York" {{ ($generalConfig['timezone'] ?? '') === 'America/New_York' ? 'selected' : '' }}>Eastern Time</option>
                                <option value="America/Chicago" {{ ($generalConfig['timezone'] ?? '') === 'America/Chicago' ? 'selected' : '' }}>Central Time</option>
                                <option value="America/Denver" {{ ($generalConfig['timezone'] ?? '') === 'America/Denver' ? 'selected' : '' }}>Mountain Time</option>
                                <option value="America/Los_Angeles" {{ ($generalConfig['timezone'] ?? '') === 'America/Los_Angeles' ? 'selected' : '' }}>Pacific Time</option>
                                <option value="Europe/London" {{ ($generalConfig['timezone'] ?? '') === 'Europe/London' ? 'selected' : '' }}>London</option>
                                <option value="Africa/Nairobi" {{ ($generalConfig['timezone'] ?? '') === 'Africa/Nairobi' ? 'selected' : '' }}>Nairobi</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Time Format</label>
                            <select name="time_format" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                <option value="12" {{ ($generalConfig['time_format'] ?? '24') === '12' ? 'selected' : '' }}>12 Hour (AM/PM)</option>
                                <option value="24" {{ ($generalConfig['time_format'] ?? '24') === '24' ? 'selected' : '' }}>24 Hour</option>
                            </select>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Currency</label>
                            <select name="currency" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                <option value="USD" {{ ($generalConfig['currency'] ?? 'USD') === 'USD' ? 'selected' : '' }}>USD - US Dollar</option>
                                <option value="EUR" {{ ($generalConfig['currency'] ?? '') === 'EUR' ? 'selected' : '' }}>EUR - Euro</option>
                                <option value="GBP" {{ ($generalConfig['currency'] ?? '') === 'GBP' ? 'selected' : '' }}>GBP - British Pound</option>
                                <option value="KES" {{ ($generalConfig['currency'] ?? '') === 'KES' ? 'selected' : '' }}>KES - Kenyan Shilling</option>
                                <option value="NGN" {{ ($generalConfig['currency'] ?? '') === 'NGN' ? 'selected' : '' }}>NGN - Nigerian Naira</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Currency Symbol</label>
                            <input type="text" name="currency_symbol" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="{{ $generalConfig['currency_symbol'] ?? '$' }}" maxlength="5">
                        </div>
                    </div>
                    <div class="mt-6">
                        <button type="submit" class="bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white px-6 py-2 rounded-lg transition-all duration-300 shadow-lg">Update General Settings</button>
                    </div>
                </form>
            </div>

            <!-- SMS Gateway -->
            <div x-show="activeTab === 'sms'" class="space-y-4">
                <form method="POST" action="{{ route('settings.update') }}">
                    @csrf
                    <input type="hidden" name="tab" value="sms">
                    <h3 class="text-lg font-semibold text-white mb-4">SMS Gateway Settings</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Provider Name</label>
                            <input type="text" name="sms_provider" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="{{ $smsConfig['provider'] ?? '' }}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">API Key</label>
                            <input type="password" name="sms_api_key" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="{{ $smsConfig['api_key'] ?? '' }}">
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">API URL</label>
                            <input type="url" name="sms_api_url" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="{{ $smsConfig['api_url'] ?? '' }}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Sender ID</label>
                            <input type="text" name="sms_sender_id" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="{{ $smsConfig['sender_id'] ?? '' }}">
                        </div>
                    </div>
                    <div class="mt-6">
                        <button type="submit" class="bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white px-6 py-2 rounded-lg transition-all duration-300 shadow-lg">Update SMS Settings</button>
                    </div>
                </form>
            </div>

            <!-- Email Gateway -->
            <div x-show="activeTab === 'email'" class="space-y-4">
                <form method="POST" action="{{ route('settings.update') }}">
                    @csrf
                    <input type="hidden" name="tab" value="email">
                    <h3 class="text-lg font-semibold text-white mb-4">Email Gateway Settings</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">SMTP Host</label>
                            <input type="text" name="smtp_host" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="{{ $emailConfig['smtp_host'] ?? '' }}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">SMTP Port</label>
                            <input type="number" name="smtp_port" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="{{ $emailConfig['smtp_port'] ?? 587 }}">
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Username</label>
                            <input type="text" name="smtp_username" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="{{ $emailConfig['username'] ?? '' }}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Password</label>
                            <input type="password" name="smtp_password" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="{{ $emailConfig['password'] ?? '' }}">
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Encryption</label>
                            <select name="smtp_encryption" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                <option value="tls" {{ ($emailConfig['encryption'] ?? 'tls') === 'tls' ? 'selected' : '' }}>TLS</option>
                                <option value="ssl" {{ ($emailConfig['encryption'] ?? 'tls') === 'ssl' ? 'selected' : '' }}>SSL</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">From Address</label>
                            <input type="email" name="from_address" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="{{ $emailConfig['from_address'] ?? '' }}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">From Name</label>
                            <input type="text" name="from_name" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="{{ $emailConfig['from_name'] ?? '' }}">
                        </div>
                    </div>
                    <div class="mt-6">
                        <button type="submit" class="bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white px-6 py-2 rounded-lg transition-all duration-300 shadow-lg">Update Email Settings</button>
                    </div>
                </form>
            </div>

            <!-- WhatsApp Gateway -->
            <div x-show="activeTab === 'whatsapp'" class="space-y-4">
                <form method="POST" action="{{ route('settings.update') }}">
                    @csrf
                    <input type="hidden" name="tab" value="whatsapp">
                    <h3 class="text-lg font-semibold text-white mb-4">WhatsApp Gateway Settings</h3>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">WhatsApp Server</label>
                            <input type="text" name="whatsapp_url" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="{{ $whatsappConfig['whatsapp_url'] ?? '' }}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Access Token</label>
                            <input type="password" name="whatsapp_secret" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="{{ $whatsappConfig['whatsapp_secret'] ?? '' }}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Sender Link</label>
                            <input type="text" name="whatsapp_link" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="{{ $whatsappConfig['whatsapp_link'] ?? '' }}">
                        </div>
                    </div>
                    <div class="mt-6">
                        <button type="submit" class="bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white px-6 py-2 rounded-lg transition-all duration-300 shadow-lg">Update WhatsApp Settings</button>
                    </div>
                </form>
            </div>



            <!-- System Payment -->
            <div x-show="activeTab === 'mpesa'" class="space-y-4">
                <form method="POST" action="{{ route('settings.update') }}">
                    @csrf
                    <input type="hidden" name="tab" value="mpesa">
                    <h3 class="text-lg font-semibold text-white mb-4">System Payment Settings</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Consumer Key</label>
                            <input type="password" name="mpesa_consumer_key" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="{{ $mpesaConfig['consumer_key'] ?? '' }}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Consumer Secret</label>
                            <input type="password" name="mpesa_consumer_secret" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="{{ $mpesaConfig['consumer_secret'] ?? '' }}">
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Shortcode</label>
                            <input type="text" name="mpesa_shortcode" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="{{ $mpesaConfig['shortcode'] ?? '' }}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Shortcode Type</label>
                            <select name="mpesa_shortcode_type" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                <option value="paybill" {{ ($mpesaConfig['shortcode_type'] ?? 'paybill') === 'paybill' ? 'selected' : '' }}>M-Pesa Paybill</option>
                                <option value="till" {{ ($mpesaConfig['shortcode_type'] ?? 'paybill') === 'till' ? 'selected' : '' }}>M-Pesa Till/Buy Goods</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Environment</label>
                            <select name="mpesa_environment" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                <option value="sandbox" {{ ($mpesaConfig['environment'] ?? 'sandbox') === 'sandbox' ? 'selected' : '' }}>Sandbox</option>
                                <option value="live" {{ ($mpesaConfig['environment'] ?? 'sandbox') === 'live' ? 'selected' : '' }}>Live</option>
                            </select>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Passkey</label>
                            <input type="password" name="mpesa_passkey" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="{{ $mpesaConfig['passkey'] ?? '' }}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Callback URL</label>
                            <input type="url" name="mpesa_callback_url" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="{{ $mpesaConfig['callback_url'] ?? '' }}">
                        </div>
                    </div>
                    <div class="mt-6">
                        <button type="submit" class="bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white px-6 py-2 rounded-lg transition-all duration-300 shadow-lg">Update System Payment Settings</button>
                    </div>
                </form>
            </div>

            <!-- Platform Gateways -->
            <div x-show="activeTab === 'payment'" class="space-y-6">
                <form method="POST" action="{{ route('settings.update') }}">
                    @csrf
                    <input type="hidden" name="tab" value="payment">
                    <h3 class="text-lg font-semibold text-white mb-4">Platform Gateways</h3>

                    <!-- M-Pesa Till -->
                    <div class="bg-slate-700/30 rounded-lg p-4">
                        <h4 class="text-md font-semibold text-white mb-3">M-Pesa Till</h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Consumer Key</label>
                                <input type="password" name="mpesa_till_consumer_key" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="{{ $paymentConfig['mpesa_till_consumer_key'] ?? '' }}">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Consumer Secret</label>
                                <input type="password" name="mpesa_till_consumer_secret" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="{{ $paymentConfig['mpesa_till_consumer_secret'] ?? '' }}">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Passkey</label>
                                <input type="password" name="mpesa_till_passkey" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="{{ $paymentConfig['mpesa_till_passkey'] ?? '' }}">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Shortcode</label>
                                <input type="text" name="mpesa_till_shortcode" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="{{ $paymentConfig['mpesa_till_shortcode'] ?? '' }}">
                            </div>
                        </div>
                    </div>

                    <!-- M-Pesa Bank -->
                    <div class="bg-slate-700/30 rounded-lg p-4 mt-4">
                        <h4 class="text-md font-semibold text-white mb-3">M-Pesa Bank</h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Consumer Key</label>
                                <input type="password" name="mpesa_bank_consumer_key" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="{{ $paymentConfig['mpesa_bank_consumer_key'] ?? '' }}">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Consumer Secret</label>
                                <input type="password" name="mpesa_bank_consumer_secret" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="{{ $paymentConfig['mpesa_bank_consumer_secret'] ?? '' }}">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Passkey</label>
                                <input type="password" name="mpesa_bank_passkey" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="{{ $paymentConfig['mpesa_bank_passkey'] ?? '' }}">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Shortcode</label>
                                <input type="text" name="mpesa_bank_shortcode" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="{{ $paymentConfig['mpesa_bank_shortcode'] ?? '' }}">
                            </div>
                        </div>
                    </div>

                    <!-- M-Pesa Paybill -->
                    <div class="bg-slate-700/30 rounded-lg p-4 mt-4">
                        <h4 class="text-md font-semibold text-white mb-3">M-Pesa Paybill</h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Consumer Key</label>
                                <input type="password" name="mpesa_paybill_consumer_key" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="{{ $paymentConfig['mpesa_paybill_consumer_key'] ?? '' }}">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Consumer Secret</label>
                                <input type="password" name="mpesa_paybill_consumer_secret" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="{{ $paymentConfig['mpesa_paybill_consumer_secret'] ?? '' }}">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Passkey</label>
                                <input type="password" name="mpesa_paybill_passkey" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="{{ $paymentConfig['mpesa_paybill_passkey'] ?? '' }}">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Shortcode</label>
                                <input type="text" name="mpesa_paybill_shortcode" class="w-full bg-slate-700/50 border border-slate-600 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500" value="{{ $paymentConfig['mpesa_paybill_shortcode'] ?? '' }}">
                            </div>
                        </div>
                    </div>

                    <div class="mt-6">
                        <button type="submit" class="bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white px-6 py-2 rounded-lg transition-all duration-300 shadow-lg">Update Platform Gateway Settings</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection