@extends('layouts.app')

@section('head')
<meta name="csrf-token" content="{{ csrf_token() }}">
@endsection

@section('content')
<div class="space-y-4 md:space-y-6" x-data="settingsData()">
    <!-- Header -->
    <div class="bg-slate-800/90 backdrop-blur-xl rounded-xl border border-slate-700/50 p-4 md:p-6">
        <div>
            <h1 class="text-xl md:text-2xl font-bold text-white">Company Settings</h1>
            <p class="text-slate-400 mt-1">Configure your company and system settings</p>
        </div>
    </div>

    <!-- Settings Tabs -->
    <div class="bg-slate-800/90 backdrop-blur-xl rounded-xl border border-slate-700/50 overflow-hidden">
        <!-- Tab Navigation -->
        <div class="border-b border-slate-700">
            <nav class="flex space-x-8 px-6" aria-label="Tabs">
                <button @click="activeTab = 'company'" :class="activeTab === 'company' ? 'border-red-500 text-red-400' : 'border-transparent text-slate-400 hover:text-slate-300'" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors">
                    Company Settings
                </button>
                <button @click="activeTab = 'system'" :class="activeTab === 'system' ? 'border-red-500 text-red-400' : 'border-transparent text-slate-400 hover:text-slate-300'" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors">
                    System Settings
                </button>
                <button @click="activeTab = 'sms'" :class="activeTab === 'sms' ? 'border-red-500 text-red-400' : 'border-transparent text-slate-400 hover:text-slate-300'" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors">
                    SMS Gateway
                </button>
                <button @click="activeTab = 'email'" :class="activeTab === 'email' ? 'border-red-500 text-red-400' : 'border-transparent text-slate-400 hover:text-slate-300'" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors">
                    Email Gateway
                </button>
                <button @click="activeTab = 'whatsapp'" :class="activeTab === 'whatsapp' ? 'border-red-500 text-red-400' : 'border-transparent text-slate-400 hover:text-slate-300'" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors">
                    WhatsApp Gateway
                </button>
                <button @click="activeTab = 'payment'" :class="activeTab === 'payment' ? 'border-red-500 text-red-400' : 'border-transparent text-slate-400 hover:text-slate-300'" class="whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm transition-colors">
                    Payment Gateway
                </button>
            </nav>
        </div>

        <!-- Tab Content -->
        <div class="p-6">
            <!-- Company Settings Tab -->
            <div x-show="activeTab === 'company'" x-transition>
                <form method="POST" action="{{ route('company.settings.update') }}">
                    @csrf
                    <input type="hidden" name="tab" value="company">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Company Name</label>
                            <input type="text" name="company_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="{{ $companySettings['company_name'] ?? '' }}" required>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Phone Number</label>
                            <input type="text" name="phone_number" 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="{{ $companySettings['phone_number'] ?? '' }}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Location</label>
                            <input type="text" name="location" 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="{{ $companySettings['location'] ?? '' }}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Country</label>
                            <select name="country" 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="Kenya" {{ ($companySettings['country'] ?? '') === 'Kenya' ? 'selected' : '' }}>Kenya</option>
                                <option value="Uganda" {{ ($companySettings['country'] ?? '') === 'Uganda' ? 'selected' : '' }}>Uganda</option>
                                <option value="Tanzania" {{ ($companySettings['country'] ?? '') === 'Tanzania' ? 'selected' : '' }}>Tanzania</option>
                                <option value="Nigeria" {{ ($companySettings['country'] ?? '') === 'Nigeria' ? 'selected' : '' }}>Nigeria</option>
                                <option value="Ghana" {{ ($companySettings['country'] ?? '') === 'Ghana' ? 'selected' : '' }}>Ghana</option>
                                <option value="South Africa" {{ ($companySettings['country'] ?? '') === 'South Africa' ? 'selected' : '' }}>South Africa</option>
                            </select>
                        </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 Company Settings
                        </button>
                    </div>
                </form>
            </div>

            <!-- System Settings Tab -->
            <div x-show="activeTab === 'system'" x-transition>
                <form method="POST" action="{{ route('company.settings.update') }}">
                    @csrf
                    <input type="hidden" name="tab" value="system">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <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" {{ ($companySettings['time_format'] ?? '24') === '12' ? 'selected' : '' }}>12 Hour (AM/PM)</option>
                                <option value="24" {{ ($companySettings['time_format'] ?? '24') === '24' ? 'selected' : '' }}>24 Hour</option>
                            </select>
                        </div>
                        <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" {{ ($companySettings['currency'] ?? 'USD') === 'USD' ? 'selected' : '' }}>USD - US Dollar</option>
                                <option value="EUR" {{ ($companySettings['currency'] ?? '') === 'EUR' ? 'selected' : '' }}>EUR - Euro</option>
                                <option value="GBP" {{ ($companySettings['currency'] ?? '') === 'GBP' ? 'selected' : '' }}>GBP - British Pound</option>
                                <option value="KES" {{ ($companySettings['currency'] ?? '') === 'KES' ? 'selected' : '' }}>KES - Kenyan Shilling</option>
                                <option value="NGN" {{ ($companySettings['currency'] ?? '') === 'NGN' ? 'selected' : '' }}>NGN - Nigerian Naira</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Date Format</label>
                            <select name="date_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="Y-m-d" {{ ($companySettings['date_format'] ?? 'Y-m-d') === 'Y-m-d' ? 'selected' : '' }}>YYYY-MM-DD</option>
                                <option value="d/m/Y" {{ ($companySettings['date_format'] ?? '') === 'd/m/Y' ? 'selected' : '' }}>DD/MM/YYYY</option>
                                <option value="m/d/Y" {{ ($companySettings['date_format'] ?? '') === 'm/d/Y' ? 'selected' : '' }}>MM/DD/YYYY</option>
                                <option value="d-m-Y" {{ ($companySettings['date_format'] ?? '') === 'd-m-Y' ? 'selected' : '' }}>DD-MM-YYYY</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Customer Account Prefix</label>
                            <input type="text" name="customer_prefix" 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="{{ $companySettings['customer_prefix'] ?? 'CUST' }}" maxlength="10">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Customer Account Number Length</label>
                            <input type="number" name="customer_prefix_length" 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="{{ $companySettings['customer_prefix_length'] ?? 5 }}" min="1" max="10">
                            <p class="text-xs text-slate-400 mt-1">Note: When generating new accounts, the system will find the highest account number matching this length. Set to 1 to continue from the absolute highest account number regardless of length. Defaults to 5 digits for new customers when no existing accounts are found.</p>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Invoice Prefix</label>
                            <input type="text" name="invoice_prefix" 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="{{ $companySettings['invoice_prefix'] ?? 'INV' }}" maxlength="10">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">Expenses Prefix</label>
                            <input type="text" name="expenses_prefix" 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="{{ $companySettings['expenses_prefix'] ?? 'EXP' }}" maxlength="10">
                        </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 Settings
                        </button>
                    </div>
                </form>
            </div>

            <!-- SMS Gateway Tab -->
            <div x-show="activeTab === 'sms'" x-transition>
                <form method="POST" action="{{ route('company.settings.update') }}">
                    @csrf
                    <input type="hidden" name="tab" value="sms">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">SMS Provider</label>
                            <select name="sms_provider" onchange="togglePartnerIdField()" 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="">Select Provider</option>
                                <option value="textsms" {{ ($companySettings['sms_provider'] ?? '') === 'textsms' ? 'selected' : '' }}>TextSMS</option>
                                <option value="bytewave" {{ ($companySettings['sms_provider'] ?? '') === 'bytewave' ? 'selected' : '' }}>Bytewave</option>
                                <option value="celcom" {{ ($companySettings['sms_provider'] ?? '') === 'celcom' ? 'selected' : '' }}>Celcom</option>
                                <option value="blessedtexts" {{ ($companySettings['sms_provider'] ?? '') === 'blessedtexts' ? 'selected' : '' }}>BlessedTexts</option>
                                <option value="talksasa" {{ ($companySettings['sms_provider'] ?? '') === 'talksasa' ? 'selected' : '' }}>Talksasa</option>
                                <option value="advantasms" {{ ($companySettings['sms_provider'] ?? '') === 'advantasms' ? 'selected' : '' }}>AdvantaSMS</option>
                                <option value="ekinsms" {{ ($companySettings['sms_provider'] ?? '') === 'ekinsms' ? 'selected' : '' }}>EkinSMS</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">API Key</label>
                            <input type="text" 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="{{ $companySettings['sms_api_key'] ?? '' }}">
                        </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="{{ $companySettings['sms_sender_id'] ?? '' }}">
                        </div>
                        <div id="partner-id-field" style="display: none;">
                            <label class="block text-sm font-medium text-slate-300 mb-2">Partner ID</label>
                            <input type="text" name="sms_partner_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="{{ $companySettings['sms_partner_id'] ?? '' }}">
                        </div>
                    </div>

                    <div class="mb-6">
                        <h3 class="text-lg font-semibold text-white mb-4">Customer Types to Notify</h3>
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                            <label class="flex items-center space-x-3">
                                <input type="checkbox" name="sms_pppoe_enabled" value="1" {{ ($companySettings['sms_pppoe_enabled'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                <span class="text-slate-300">PPPoE</span>
                            </label>
                            <label class="flex items-center space-x-3">
                                <input type="checkbox" name="sms_hotspot_enabled" value="1" {{ ($companySettings['sms_hotspot_enabled'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                <span class="text-slate-300">Hotspot</span>
                            </label>
                            <label class="flex items-center space-x-3">
                                <input type="checkbox" name="sms_static_enabled" value="1" {{ ($companySettings['sms_static_enabled'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                <span class="text-slate-300">Static</span>
                            </label>
                            <label class="flex items-center space-x-3">
                                <input type="checkbox" name="sms_dhcp_enabled" value="1" {{ ($companySettings['sms_dhcp_enabled'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                <span class="text-slate-300">DHCP</span>
                            </label>
                        </div>
                    </div>

                    <div class="mb-6">
                        <h3 class="text-lg font-semibold text-white mb-4">Notification Types</h3>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <label class="flex items-center space-x-3">
                                <input type="checkbox" name="sms_new_customer" value="1" {{ ($companySettings['sms_new_customer'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                <span class="text-slate-300">New Customer</span>
                            </label>
                            <label class="flex items-center space-x-3">
                                <input type="checkbox" name="sms_balance_deposit" value="1" {{ ($companySettings['sms_balance_deposit'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                <span class="text-slate-300">Balance Deposit</span>
                            </label>
                            <label class="flex items-center space-x-3">
                                <input type="checkbox" name="sms_new_invoice" value="1" {{ ($companySettings['sms_new_invoice'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                <span class="text-slate-300">New Invoice</span>
                            </label>
                            <label class="flex items-center space-x-3">
                                <input type="checkbox" name="sms_new_payment" value="1" {{ ($companySettings['sms_new_payment'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                <span class="text-slate-300">New Payment</span>
                            </label>
                            <label class="flex items-center space-x-3">
                                <input type="checkbox" name="sms_payment_reminder" value="1" {{ ($companySettings['sms_payment_reminder'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                <span class="text-slate-300">Payment Reminder</span>
                            </label>
                            <label class="flex items-center space-x-3">
                                <input type="checkbox" name="sms_expiry_notification" value="1" {{ ($companySettings['sms_expiry_notification'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                <span class="text-slate-300">Expiry Notification</span>
                            </label>
                        </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 Tab -->
            <div x-show="activeTab === 'email'" x-transition>
                <form method="POST" action="{{ route('company.settings.update') }}">
                    @csrf
                    <input type="hidden" name="tab" value="email">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <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="{{ $companySettings['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="{{ $companySettings['smtp_port'] ?? 587 }}">
                        </div>
                        <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="{{ $companySettings['smtp_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="{{ $companySettings['smtp_password'] ?? '' }}">
                        </div>
                        <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" {{ ($companySettings['smtp_encryption'] ?? 'tls') === 'tls' ? 'selected' : '' }}>TLS</option>
                                <option value="ssl" {{ ($companySettings['smtp_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="smtp_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="{{ $companySettings['smtp_from_address'] ?? '' }}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-300 mb-2">From Name</label>
                            <input type="text" name="smtp_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="{{ $companySettings['smtp_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 Tab -->
            <div x-show="activeTab === 'whatsapp'" x-transition x-data="whatsappData()">
                <div class="mb-6">
                    <label class="block text-sm font-medium text-slate-300 mb-4">WhatsApp Type</label>
                    <div class="flex space-x-6">
                        <label class="flex items-center space-x-3">
                            <input type="radio" x-model="whatsappType" value="external" class="text-red-600 focus:ring-blue-500">
                            <span class="text-slate-300">External API</span>
                        </label>
                        <br class="flex items-center space-x-3">
                            <input type="radio" x-model="whatsappType" value="system" class="text-red-600 focus:ring-blue-500">
                            <span class="text-slate-300">System WhatsApp</span>
                            <span class="px-3 py-1 text-xs font-semibold rounded-full bg-green-500/20 text-green-400 border border-green-500/30">Server Status: {{ $companySettings['whatsapp_server_status'] ?? 'N/A' }}</span>
                        </label>
                    </div>
                </div>

                <!-- External API Configuration -->
                <div x-show="whatsappType === 'external'" x-transition>
                    <form method="POST" action="{{ route('company.settings.update') }}">
                        @csrf
                        <input type="hidden" name="tab" value="whatsapp">
                        <input type="hidden" name="whatsapp_type" value="external">

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">API URL</label>
                                <input type="url" name="external_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="{{ $companySettings['whatsapp_external_url'] ?? '' }}" placeholder="https://api.whatsapp.com">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">API Key</label>
                                <input type="text" name="external_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="{{ $companySettings['whatsapp_external_key'] ?? '' }}" placeholder="Your API key">
                            </div>
                        </div>

                        <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">
                            Save External API Configuration
                        </button>
                    </form>
                </div>

                <!-- System WhatsApp Configuration -->
                <div x-show="whatsappType === 'system'" x-transition>
                    <!-- Step 1: Add Phone -->
                    @if($companySettings['whatsapp_status'] == 0)
                        {{-- <div x-show="step === 1" class="mb-6"> --}}
                            <h3 class="text-lg font-semibold text-white mb-4">Step 1: Add Phone Number</h3>
                            <form method="POST" action="{{ route('whatsapp.store') }}">
                            <div class="flex gap-4">
                                    @csrf
                                <input type="text" name="phone" class="flex-1 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" placeholder="Enter WhatsApp phone number">
                                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition-colors">
                                    Add Phone
                                </button>
                            </div>
                        </form>
                        {{-- </div> --}}
                    @endif

                    <!-- Step 2: Phone List & Actions -->
                    @if($companySettings['whatsapp_status'] == 1 && $companySettings['whatsapp_active'] == "inactive")
                        <h3 class="text-lg font-semibold text-white mb-4">Step 2: Connect Phone</h3>
                        <div class="bg-slate-700/30 rounded-xl border border-slate-600 overflow-hidden">
                            <table class="w-full">
                                <thead class="bg-slate-600/50">
                                    <tr>
                                        <th class="px-4 py-3 text-left text-slate-300">Phone</th>
                                        <th class="px-4 py-3 text-left text-slate-300">Status</th>
                                        <th class="px-4 py-3 text-left text-slate-300">Expiry</th>
                                        <th class="px-4 py-3 text-left text-slate-300">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="border-t border-slate-600">
                                        <td class="px-4 py-3 text-white">{{ $whatsapp->phonenumber }}</td>
                                        <td class="px-4 py-3">
                                            <span class="{{ $whatsapp->status === 'active' ? 'px-3 py-1 text-xs font-semibold rounded-full bg-green-500/20 text-green-400 border border-green-500/30' : 'px-3 py-1 text-xs font-semibold rounded-full bg-yellow-500/20 text-yellow-400 border border-yellow-500/30'}}">{{ $whatsapp->status }}</span>
                                        </td>
                                        <td class="px-4 py-3">
                                            <span class="{{ $whatsapp->expiry > now() ? 'text-green-400' : 'text-yellow-400'}}">{{ $whatsapp->expiry }}</span>
                                        </td>
                                        <td class="px-4 py-3 space-x-2">
                                            <button onclick="openQrModal({{ $whatsapp->id }})" class="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded text-sm">
                                                Scan QR Code
                                            </button>
                                            <button onclick="openPairModal({{ $whatsapp->id }})" class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm">
                                                Use Pair Code
                                            </button>
                                            <button onclick="checkPairStatus({{ $whatsapp->id }})" class="bg-yellow-600 hover:bg-yellow-700 text-white px-3 py-1 rounded text-sm">
                                                Check Status
                                            </button>
                                            <form method="POST" action="{{ route('whatsapp.destroy', $whatsapp->id) }}" class="inline" onsubmit="return confirm('Are you sure you want to remove this WhatsApp gateway?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded text-sm">
                                                    Remove
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    @elseif($companySettings['whatsapp_status'] == 1 && $companySettings['whatsapp_active'] == "active")
                    <!-- Step 4: Connected & Configuration -->
                        <div class="bg-green-900/30 border border-green-600 rounded-lg p-4 mb-6">
                            <h3 class="text-lg font-semibold text-green-400 mb-2">✓ WhatsApp Connected Successfully!</h3>
                            <p class="text-slate-300 mb-2">Phone: <span>{{ $whatsapp->phonenumber }}</span></p>
                            <p class="text-slate-300">Gateway Expiry: <span>{{ $whatsapp->expiry }}</span></p>
                            <p class="text-slate-300">Gateway Url: <span>{{ $whatsapp->url }}</span></p>
                        </div>

                        <form method="POST" action="{{ route('company.settings.update') }}">
                            @csrf
                            <input type="hidden" name="tab" value="whatsapp">
                            <input type="hidden" name="whatsapp_type" value="system">
                            <input type="hidden" name="connected_phone" :value="connectedPhone">
                            <input type="hidden" name="gateway_url" :value="gatewayUrl">

                            <div class="mb-6">
                                <h3 class="text-lg font-semibold text-white mb-4">Customer Types to Notify</h3>
                                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                                    <label class="flex items-center space-x-3">
                                        <input type="checkbox" name="whatsapp_pppoe_enabled" value="1" {{ ($companySettings['whatsapp_pppoe_enabled'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                        <span class="text-slate-300">PPPoE</span>
                                    </label>
                                    <label class="flex items-center space-x-3">
                                        <input type="checkbox" name="whatsapp_hotspot_enabled" value="1" {{ ($companySettings['whatsapp_hotspot_enabled'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                        <span class="text-slate-300">Hotspot</span>
                                    </label>
                                    <label class="flex items-center space-x-3">
                                        <input type="checkbox" name="whatsapp_static_enabled" value="1" {{ ($companySettings['whatsapp_static_enabled'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                        <span class="text-slate-300">Static</span>
                                    </label>
                                    <label class="flex items-center space-x-3">
                                        <input type="checkbox" name="whatsapp_dhcp_enabled" value="1" {{ ($companySettings['whatsapp_dhcp_enabled'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                        <span class="text-slate-300">DHCP</span>
                                    </label>
                                </div>
                            </div>

                            <div class="mb-6">
                                <h3 class="text-lg font-semibold text-white mb-4">Notification Types</h3>
                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                    <label class="flex items-center space-x-3">
                                        <input type="checkbox" name="whatsapp_new_customer" value="1" {{ ($companySettings['whatsapp_new_customer'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                        <span class="text-slate-300">New Customer</span>
                                    </label>
                                    <label class="flex items-center space-x-3">
                                        <input type="checkbox" name="whatsapp_balance_deposit" value="1" {{ ($companySettings['whatsapp_balance_deposit'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                        <span class="text-slate-300">Balance Deposit</span>
                                    </label>
                                    <label class="flex items-center space-x-3">
                                        <input type="checkbox" name="whatsapp_new_invoice" value="1" {{ ($companySettings['whatsapp_new_invoice'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                        <span class="text-slate-300">New Invoice</span>
                                    </label>
                                    <label class="flex items-center space-x-3">
                                        <input type="checkbox" name="whatsapp_new_payment" value="1" {{ ($companySettings['whatsapp_new_payment'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                        <span class="text-slate-300">New Payment</span>
                                    </label>
                                    <label class="flex items-center space-x-3">
                                        <input type="checkbox" name="whatsapp_payment_reminder" value="1" {{ ($companySettings['whatsapp_payment_reminder'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                        <span class="text-slate-300">Payment Reminder</span>
                                    </label>
                                    <label class="flex items-center space-x-3">
                                        <input type="checkbox" name="whatsapp_expiry_notification" value="1" {{ ($companySettings['whatsapp_expiry_notification'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                        <span class="text-slate-300">Expiry Notification</span>
                                    </label>
                                </div>
                            </div>

                            <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">
                                Save WhatsApp Configuration
                            </button>
                        </form>
                    @endif
                </div>
            </div>

            <!-- Payment Gateway Tab -->
            <div x-show="activeTab === 'payment'" x-transition>
                <form method="POST" action="{{ route('company.settings.update') }}">
                    @csrf
                    <input type="hidden" name="tab" value="payment">

                    <div class="space-y-6">
                        <!-- M-Pesa Business -->
                        <div class="bg-slate-700/30 rounded-xl border border-slate-600">
                            <div class="flex items-center justify-between p-4 border-b border-slate-600">
                                <h3 class="text-lg font-semibold text-white">M-Pesa Business</h3>
                                <label class="flex items-center space-x-3">
                                    <input type="checkbox" name="mpesa_business_enabled" value="1" {{ ($companySettings['mpesa_business_enabled'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                    <span class="text-slate-300">Enable</span>
                                </label>
                            </div>
                            <div class="p-4 space-y-4">
                                <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_business_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="{{ $companySettings['mpesa_business_key'] ?? '' }}">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-slate-300 mb-2">Consumer Secret</label>
                                        <input type="password" name="mpesa_business_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="{{ $companySettings['mpesa_business_secret'] ?? '' }}">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-slate-300 mb-2">Shortcode</label>
                                        <input type="text" name="mpesa_business_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="{{ $companySettings['mpesa_business_shortcode'] ?? '' }}">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-slate-300 mb-2">Shortcode Type</label>
                                        <select name="mpesa_business_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" {{ ($companySettings['mpesa_business_shortcode_type'] ?? 'paybill') === 'paybill' ? 'selected' : '' }}>Paybill</option>
                                            <option value="till" {{ ($companySettings['mpesa_business_shortcode_type'] ?? 'paybill') === 'till' ? 'selected' : '' }}>Till</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-slate-300 mb-2">Passkey</label>
                                        <input type="password" name="mpesa_business_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="{{ $companySettings['mpesa_business_passkey'] ?? '' }}">
                                    </div>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-300 mb-2">Used for Customers</label>
                                    <div class="flex flex-wrap gap-4">
                                        <label class="flex items-center space-x-2">
                                            <input type="checkbox" name="mpesa_business_all" value="1" {{ ($companySettings['mpesa_business_all'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                            <span class="text-slate-300">All</span>
                                        </label>
                                        <label class="flex items-center space-x-2">
                                            <input type="checkbox" name="mpesa_business_pppoe" value="1" {{ ($companySettings['mpesa_business_pppoe'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                            <span class="text-slate-300">PPPoE</span>
                                        </label>
                                        <label class="flex items-center space-x-2">
                                            <input type="checkbox" name="mpesa_business_hotspot" value="1" {{ ($companySettings['mpesa_business_hotspot'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                            <span class="text-slate-300">Hotspot</span>
                                        </label>
                                        <label class="flex items-center space-x-2">
                                            <input type="checkbox" name="mpesa_business_static" value="1" {{ ($companySettings['mpesa_business_static'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                            <span class="text-slate-300">Static</span>
                                        </label>
                                        <label class="flex items-center space-x-2">
                                            <input type="checkbox" name="mpesa_business_dhcp" value="1" {{ ($companySettings['mpesa_business_dhcp'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                            <span class="text-slate-300">DHCP</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Personal Paybill -->
                        <div class="bg-slate-700/30 rounded-xl border border-slate-600">
                            <div class="flex items-center justify-between p-4 border-b border-slate-600">
                                <h3 class="text-lg font-semibold text-white">Personal Paybill</h3>
                                <label class="flex items-center space-x-3">
                                    <input type="checkbox" name="personal_paybill_enabled" value="1" {{ ($companySettings['personal_paybill_enabled'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                    <span class="text-slate-300">Enable</span>
                                </label>
                            </div>
                            <div class="p-4 space-y-4">
                                <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">Paybill Name</label>
                                        <input type="text" name="personal_paybill_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="{{ $companySettings['personal_paybill_name'] ?? '' }}">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-slate-300 mb-2">Paybill Number</label>
                                        <input type="text" name="personal_paybill_number" 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="{{ $companySettings['personal_paybill_number'] ?? '' }}">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-slate-300 mb-2">API Source</label>
                                        <select name="personal_paybill_api" 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="system" {{ ($companySettings['personal_paybill_api'] ?? 'system') === 'system' ? 'selected' : '' }}>System API</option>
                                            <option value="company" {{ ($companySettings['personal_paybill_api'] ?? 'system') === 'company' ? 'selected' : '' }}>Company API</option>
                                        </select>
                                    </div>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-300 mb-2">Used for Customers</label>
                                    <div class="flex flex-wrap gap-4">
                                        <label class="flex items-center space-x-2">
                                            <input type="checkbox" name="personal_paybill_all" value="1" {{ ($companySettings['personal_paybill_all'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                            <span class="text-slate-300">All</span>
                                        </label>
                                        <label class="flex items-center space-x-2">
                                            <input type="checkbox" name="personal_paybill_pppoe" value="1" {{ ($companySettings['personal_paybill_pppoe'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                            <span class="text-slate-300">PPPoE</span>
                                        </label>
                                        <label class="flex items-center space-x-2">
                                            <input type="checkbox" name="personal_paybill_hotspot" value="1" {{ ($companySettings['personal_paybill_hotspot'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                            <span class="text-slate-300">Hotspot</span>
                                        </label>
                                        <label class="flex items-center space-x-2">
                                            <input type="checkbox" name="personal_paybill_static" value="1" {{ ($companySettings['personal_paybill_static'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                            <span class="text-slate-300">Static</span>
                                        </label>
                                        <label class="flex items-center space-x-2">
                                            <input type="checkbox" name="personal_paybill_dhcp" value="1" {{ ($companySettings['personal_paybill_dhcp'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                            <span class="text-slate-300">DHCP</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Personal Till -->
                        <div class="bg-slate-700/30 rounded-xl border border-slate-600">
                            <div class="flex items-center justify-between p-4 border-b border-slate-600">
                                <h3 class="text-lg font-semibold text-white">Personal Till</h3>
                                <label class="flex items-center space-x-3">
                                    <input type="checkbox" name="personal_till_enabled" value="1" {{ ($companySettings['personal_till_enabled'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                    <span class="text-slate-300">Enable</span>
                                </label>
                            </div>
                            <div class="p-4 space-y-4">
                                <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">Till Name</label>
                                        <input type="text" name="personal_till_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="{{ $companySettings['personal_till_name'] ?? '' }}">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-slate-300 mb-2">Till Number</label>
                                        <input type="text" name="personal_till_number" 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="{{ $companySettings['personal_till_number'] ?? '' }}">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-slate-300 mb-2">API Source</label>
                                        <select name="personal_till_api" 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="system" {{ ($companySettings['personal_till_api'] ?? 'system') === 'system' ? 'selected' : '' }}>System API</option>
                                            <option value="company" {{ ($companySettings['personal_till_api'] ?? 'system') === 'company' ? 'selected' : '' }}>Company API</option>
                                        </select>
                                    </div>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-300 mb-2">Used for Customers</label>
                                    <div class="flex flex-wrap gap-4">
                                        <label class="flex items-center space-x-2">
                                            <input type="checkbox" name="personal_till_all" value="1" {{ ($companySettings['personal_till_all'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                            <span class="text-slate-300">All</span>
                                        </label>
                                        <label class="flex items-center space-x-2">
                                            <input type="checkbox" name="personal_till_pppoe" value="1" {{ ($companySettings['personal_till_pppoe'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                            <span class="text-slate-300">PPPoE</span>
                                        </label>
                                        <label class="flex items-center space-x-2">
                                            <input type="checkbox" name="personal_till_hotspot" value="1" {{ ($companySettings['personal_till_hotspot'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                            <span class="text-slate-300">Hotspot</span>
                                        </label>
                                        <label class="flex items-center space-x-2">
                                            <input type="checkbox" name="personal_till_static" value="1" {{ ($companySettings['personal_till_static'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                            <span class="text-slate-300">Static</span>
                                        </label>
                                        <label class="flex items-center space-x-2">
                                            <input type="checkbox" name="personal_till_dhcp" value="1" {{ ($companySettings['personal_till_dhcp'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                            <span class="text-slate-300">DHCP</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Personal Bank -->
                        <div class="bg-slate-700/30 rounded-xl border border-slate-600">
                            <div class="flex items-center justify-between p-4 border-b border-slate-600">
                                <h3 class="text-lg font-semibold text-white">Personal Bank</h3>
                                <label class="flex items-center space-x-3">
                                    <input type="checkbox" name="personal_bank_enabled" value="1" {{ ($companySettings['personal_bank_enabled'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                    <span class="text-slate-300">Enable</span>
                                </label>
                            </div>
                            <div class="p-4 space-y-4">
                                <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">Bank Paybill</label>
                                        <input type="text" name="personal_bank_paybill" 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="{{ $companySettings['personal_bank_paybill'] ?? '' }}">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-slate-300 mb-2">Account Number</label>
                                        <input type="text" name="personal_bank_account" 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="{{ $companySettings['personal_bank_account'] ?? '' }}">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-slate-300 mb-2">API Source</label>
                                        <select name="personal_bank_api" 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="system" {{ ($companySettings['personal_bank_api'] ?? 'system') === 'system' ? 'selected' : '' }}>System API</option>
                                            <option value="company" {{ ($companySettings['personal_bank_api'] ?? 'system') === 'company' ? 'selected' : '' }}>Company API</option>
                                        </select>
                                    </div>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-300 mb-2">Used for Customers</label>
                                    <div class="flex flex-wrap gap-4">
                                        <label class="flex items-center space-x-2">
                                            <input type="checkbox" name="personal_bank_all" value="1" {{ ($companySettings['personal_bank_all'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                            <span class="text-slate-300">All</span>
                                        </label>
                                        <label class="flex items-center space-x-2">
                                            <input type="checkbox" name="personal_bank_pppoe" value="1" {{ ($companySettings['personal_bank_pppoe'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                            <span class="text-slate-300">PPPoE</span>
                                        </label>
                                        <label class="flex items-center space-x-2">
                                            <input type="checkbox" name="personal_bank_hotspot" value="1" {{ ($companySettings['personal_bank_hotspot'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                            <span class="text-slate-300">Hotspot</span>
                                        </label>
                                        <label class="flex items-center space-x-2">
                                            <input type="checkbox" name="personal_bank_static" value="1" {{ ($companySettings['personal_bank_static'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                            <span class="text-slate-300">Static</span>
                                        </label>
                                        <label class="flex items-center space-x-2">
                                            <input type="checkbox" name="personal_bank_dhcp" value="1" {{ ($companySettings['personal_bank_dhcp'] ?? '') ? 'checked' : '' }} class="rounded border-slate-600 bg-slate-700 text-red-600 focus:ring-blue-500 focus:ring-offset-slate-800">
                                            <span class="text-slate-300">DHCP</span>
                                        </label>
                                    </div>
                                </div>
                            </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 Payment Settings
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- QR Code Modal -->
<div id="qrModal" class="fixed inset-0 z-50 overflow-y-auto hidden">
    <div class="flex items-center justify-center min-h-screen px-4">
        <div class="fixed inset-0 bg-black opacity-50" onclick="closeQrModal()"></div>
        <div class="relative bg-slate-800 rounded-2xl shadow-2xl w-full max-w-md border border-slate-700">
            <div class="px-6 py-4 border-b border-slate-700 flex justify-between items-center">
                <h3 class="text-xl font-semibold text-white">Scan QR Code</h3>
                <button onclick="closeQrModal()" class="text-slate-400 hover:text-white">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            <div class="p-6 text-center">
                <div id="qrContent">
                    <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-green-500 mx-auto mb-4"></div>
                    <p class="text-slate-300">Loading QR Code...</p>
                </div>
                <div id="qrTimer" class="mt-4 text-sm text-slate-400"></div>
            </div>
        </div>
    </div>
</div>

<!-- Pair Code Modal -->
<div id="pairModal" class="fixed inset-0 z-50 overflow-y-auto hidden">
    <div class="flex items-center justify-center min-h-screen px-4">
        <div class="fixed inset-0 bg-black opacity-50" onclick="closePairModal()"></div>
        <div class="relative bg-slate-800 rounded-2xl shadow-2xl w-full max-w-md border border-slate-700">
            <div class="px-6 py-4 border-b border-slate-700 flex justify-between items-center">
                <h3 class="text-xl font-semibold text-white">Pair Code</h3>
                <button onclick="closePairModal()" class="text-slate-400 hover:text-white">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            <div class="p-6 text-center">
                <div id="pairContent">
                    <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-4"></div>
                    <p class="text-slate-300">Loading Pair Code...</p>
                </div>
                <div id="pairTimer" class="mt-4 text-sm text-slate-400"></div>
            </div>
        </div>
    </div>
</div>

<script>
function settingsData() {
    return {
        activeTab: 'company'
    }
}

function whatsappData() {
    return {
        whatsappType: '{{ $companySettings["whatsapp_type"] ?? "system" }}',

    }
}

function togglePartnerIdField() {
    const provider = document.querySelector('select[name="sms_provider"]').value;
    const partnerIdField = document.getElementById('partner-id-field');

    // Providers that need partner ID: textsms, celcom, advantasms
    const needsPartnerId = ['textsms', 'celcom', 'advantasms', 'ekinsms'].includes(provider);

    partnerIdField.style.display = needsPartnerId ? 'block' : 'none';
}

let qrTimer, pairTimer;
let qrStatusInterval, pairStatusInterval;
let currentGatewayId;

function openQrModal(gatewayId) {
    currentGatewayId = gatewayId;
    document.getElementById('qrModal').classList.remove('hidden');

    // Reset content
    document.getElementById('qrContent').innerHTML = `
        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-green-500 mx-auto mb-4"></div>
        <p class="text-slate-300">Loading QR Code...</p>
    `;

    // Fetch QR code
    fetch(`/whatsapp/${gatewayId}/scan-qr`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                document.getElementById('qrContent').innerHTML = `
                    <img src="${data.qrcode}" class="mx-auto mb-4 max-w-full" alt="QR Code">
                    <p class="text-slate-300">Scan this QR code with WhatsApp</p>
                    <div class="mt-2 flex items-center justify-center">
                        <div class="animate-pulse h-2 w-2 bg-green-500 rounded-full mr-2"></div>
                        <span class="text-green-400 text-sm">Waiting for connection...</span>
                    </div>
                `;
                startQrTimer();
                startStatusCheck();
            }
        })
        .catch(error => {
            document.getElementById('qrContent').innerHTML = `
                <p class="text-red-400">Failed to load QR code</p>
            `;
        });
}

function openPairModal(gatewayId) {
    currentGatewayId = gatewayId;
    document.getElementById('pairModal').classList.remove('hidden');

    // Reset content
    document.getElementById('pairContent').innerHTML = `
        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-4"></div>
        <p class="text-slate-300">Loading Pair Code...</p>
    `;

    // Fetch pair code
    fetch(`/whatsapp/${gatewayId}/pair-code`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                document.getElementById('pairContent').innerHTML = `
                    <div class="bg-slate-700 rounded-lg p-4 mb-4">
                        <div class="text-3xl font-mono font-bold text-blue-400 tracking-widest">${data.pairCode}</div>
                    </div>
                    <p class="text-slate-300">Enter this code in WhatsApp</p>
                    <p class="text-sm text-slate-400 mt-2">Go to WhatsApp > Settings > Linked Devices > Link a Device > Link with phone number instead</p>
                    <div class="mt-2 flex items-center justify-center">
                        <div class="animate-pulse h-2 w-2 bg-blue-500 rounded-full mr-2"></div>
                        <span class="text-blue-400 text-sm">Waiting for connection...</span>
                    </div>
                `;
                startPairTimer();
                startStatusCheck();
            }
        })
        .catch(error => {
            document.getElementById('pairContent').innerHTML = `
                <p class="text-red-400">Failed to load pair code</p>
            `;
        });
}

function closeQrModal() {
    document.getElementById('qrModal').classList.add('hidden');
    clearInterval(qrTimer);
    clearInterval(qrStatusInterval);
}

function closePairModal() {
    document.getElementById('pairModal').classList.add('hidden');
    clearInterval(pairTimer);
    clearInterval(pairStatusInterval);
}

function startQrTimer() {
    let timeLeft = 60;
    document.getElementById('qrTimer').textContent = `Time remaining: ${timeLeft}s`;

    qrTimer = setInterval(() => {
        timeLeft--;
        document.getElementById('qrTimer').textContent = `Time remaining: ${timeLeft}s`;

        if (timeLeft <= 0) {
            clearInterval(qrTimer);
            clearInterval(qrStatusInterval);
            closeQrModal();
        }
    }, 1000);
}

function startPairTimer() {
    let timeLeft = 60;
    document.getElementById('pairTimer').textContent = `Time remaining: ${timeLeft}s`;

    pairTimer = setInterval(() => {
        timeLeft--;
        document.getElementById('pairTimer').textContent = `Time remaining: ${timeLeft}s`;

        if (timeLeft <= 0) {
            clearInterval(pairTimer);
            clearInterval(pairStatusInterval);
            closePairModal();
        }
    }, 1000);
}

function startStatusCheck() {
    qrStatusInterval = setInterval(() => {
        fetch(`/whatsapp/${currentGatewayId}/pair-status`)
            .then(response => response.json())
            .then(data => {
                if (data.success && data.isRegistered) {
                    clearInterval(qrTimer);
                    clearInterval(pairTimer);
                    clearInterval(qrStatusInterval);

                    // Show success message
                    const successMessage = `
                        <div class="text-green-400 mb-4">
                            <svg class="w-16 h-16 mx-auto mb-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                            </svg>
                            <p class="text-lg font-semibold">Connected Successfully!</p>
                            <p class="text-sm text-slate-300 mt-2">WhatsApp has been connected to your account.</p>
                        </div>
                    `;

                    if (!document.getElementById('qrModal').classList.contains('hidden')) {
                        document.getElementById('qrContent').innerHTML = successMessage;
                        setTimeout(() => {
                            closeQrModal();
                            location.reload();
                        }, 2000);
                    }

                    if (!document.getElementById('pairModal').classList.contains('hidden')) {
                        document.getElementById('pairContent').innerHTML = successMessage;
                        setTimeout(() => {
                            closePairModal();
                            location.reload();
                        }, 2000);
                    }
                }
            })
            .catch(error => {
                console.error('Status check failed:', error);
            });
    }, 5000); // Check every 3 seconds
}

function checkPairStatus(gatewayId) {
    const button = event.target;
    const originalText = button.textContent;

    button.textContent = 'Checking...';
    button.disabled = true;

    fetch(`/whatsapp/${gatewayId}/pair-status`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                if (data.isRegistered) {
                    alert('✅ WhatsApp is connected and active!');
                    setTimeout(() => location.reload(), 1000);
                } else {
                    alert('❌ WhatsApp is not connected. Please scan QR code or use pair code.');
                }
            } else {
                alert('❌ Failed to check status. Please try again.');
            }
        })
        .catch(error => {
            alert('❌ Error checking status: ' + error.message);
        })
        .finally(() => {
            button.textContent = originalText;
            button.disabled = false;
        });
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    togglePartnerIdField();
});
</script>
@endsection