@extends('layouts.admin')

@section('title', 'WhatsApp Settings')

@section('page-title', 'WhatsApp Settings')

@section('breadcrumbs')
    <a href="{{ route('admin.settings.index') }}" class="hover:text-primary">Settings</a>
    <span class="material-symbols-outlined text-xs">chevron_right</span>
    <span class="text-primary font-medium">WhatsApp Settings</span>
@endsection

@section('content')
<div class="max-w-7xl mx-auto">
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="mb-6">
            <h2 class="text-xl font-bold text-gray-900">WhatsApp Settings</h2>
            <p class="text-sm text-gray-500 mt-1">Configure WhatsApp Business API settings for sending messages, invoices, receipts, and quotations</p>
        </div>

        @if (session('success'))
            <div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg flex items-center gap-2">
                <span class="material-symbols-outlined text-green-600">check_circle</span>
                <span class="text-sm text-green-800">{{ session('success') }}</span>
            </div>
        @endif

        @if (session('error'))
            <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg flex items-center gap-2">
                <span class="material-symbols-outlined text-red-600">error</span>
                <span class="text-sm text-red-800">{{ session('error') }}</span>
            </div>
        @endif

        @if ($errors->any())
            <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg">
                <div class="flex items-start">
                    <span class="material-symbols-outlined text-red-600 mr-2">error</span>
                    <div class="flex-1">
                        <h3 class="text-sm font-medium text-red-800 mb-2">Please correct the following errors:</h3>
                        <ul class="list-disc list-inside text-sm text-red-700 space-y-1">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        @endif

        <form method="POST" action="{{ route('admin.settings.whatsapp.update') }}" class="space-y-6" id="whatsapp-settings-form">
            @csrf
            
            <div>
                <label for="whatsapp_link_recipient_phone" class="block text-sm font-medium text-gray-700 mb-2">
                    Company WhatsApp Number for Link Sharing (Optional)
                </label>
                <input
                    type="text"
                    name="whatsapp_link_recipient_phone"
                    id="whatsapp_link_recipient_phone"
                    value="{{ old('whatsapp_link_recipient_phone', $whatsappConfig->config['link_recipient_phone'] ?? '') }}"
                    class="w-full rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 shadow-sm placeholder:text-gray-400 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors sm:text-sm"
                    placeholder="+1234567890"
                >
                <p class="mt-1 text-xs text-gray-500">This is your company WhatsApp number used in the "Send Link via WhatsApp" flow.</p>
            </div>

            <!-- WhatsApp Provider Selection -->
            <div>
                <label for="provider" class="block text-sm font-medium text-gray-700 mb-2">
                    WhatsApp Provider <span class="text-red-500">*</span>
                </label>
                <select name="provider" id="provider" required class="w-full rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 shadow-sm focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors sm:text-sm" onchange="toggleProviderFields()">
                    <option value="whatsapp_business" {{ ($currentProvider ?? 'whatsapp_business') === 'whatsapp_business' ? 'selected' : '' }}>WhatsApp Business API</option>
                    <option value="twilio" {{ ($currentProvider ?? '') === 'twilio' ? 'selected' : '' }}>Twilio</option>
                    <option value="360dialog" {{ ($currentProvider ?? '') === '360dialog' ? 'selected' : '' }}>360dialog</option>
                    <option value="custom" {{ ($currentProvider ?? '') === 'custom' ? 'selected' : '' }}>Custom</option>
                </select>
                <p class="mt-1 text-xs text-gray-500">Select the WhatsApp provider you want to use</p>
            </div>

            <!-- WhatsApp Business API Configuration -->
            <div id="whatsapp_business-config" class="provider-config">
                <div class="mb-4 flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-gray-900">WhatsApp Business API Configuration</h3>
                </div>
                <div class="mb-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                    <div class="flex items-start gap-3">
                        <span class="material-symbols-outlined text-blue-600 text-lg">info</span>
                        <div class="flex-1">
                            <h4 class="text-sm font-semibold text-blue-900 mb-2">How to Get Your Credentials</h4>
                            <ol class="text-xs text-blue-800 space-y-1.5 list-decimal list-inside">
                                <li>Go to <a href="https://developers.facebook.com/apps/" target="_blank" class="underline font-medium">Meta Developers Apps</a></li>
                                <li>Navigate to <strong>WhatsApp Manager</strong> → <strong>API Setup</strong></li>
                                <li><strong>Phone Number ID:</strong> Found in <strong>Phone Numbers</strong> section (15-16 digit number)</li>
                                <li><strong>Access Token:</strong> Click <strong>"Generate Access Token"</strong> in API Setup (starts with EAA...)</li>
                                <li><strong>Business Account ID:</strong> Found in <strong>Business Settings</strong> → <strong>WhatsApp Accounts</strong> (optional)</li>
                                <li><strong>Webhook Verify Token:</strong> Create your own secure random string for webhook verification (optional)</li>
                            </ol>
                            <p class="mt-2 text-xs text-blue-700">
                                <strong>Note:</strong> For production, create a permanent access token via <strong>System Users</strong> in Business Settings.
                            </p>
                        </div>
                    </div>
                </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                        <label for="whatsapp_phone_number_id" class="block text-sm font-medium text-gray-700 mb-2">
                            Phone Number ID <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="whatsapp_phone_number_id" id="whatsapp_phone_number_id" value="{{ old('whatsapp_phone_number_id', env('WHATSAPP_PHONE_NUMBER_ID', $whatsappConfig->phone_number_id ?? '')) }}" required class="w-full rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 shadow-sm placeholder:text-gray-400 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors sm:text-sm" placeholder="123456789012345">
                        <p class="mt-1 text-xs text-gray-500">Your WhatsApp Business Phone Number ID from Meta</p>
                    </div>
                    <div>
                        <label for="whatsapp_access_token" class="block text-sm font-medium text-gray-700 mb-2">
                            Access Token <span class="text-red-500">*</span>
                        </label>
                        <input type="password" name="whatsapp_access_token" id="whatsapp_access_token" value="{{ old('whatsapp_access_token') }}" required class="w-full rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 shadow-sm placeholder:text-gray-400 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors sm:text-sm" placeholder="Leave blank to keep current">
                        <p class="mt-1 text-xs text-gray-500">Your WhatsApp Business API access token (starts with EAA…). Meta tokens expire—when you see “Session has expired” or “Error validating access token”, generate a new token and paste it here (and in <code class="text-xs bg-gray-100 px-1 rounded">.env</code> if you use it). For production, prefer a permanent token from a System User in Meta Business Settings.</p>
                    </div>
                    <div>
                        <label for="whatsapp_business_account_id" class="block text-sm font-medium text-gray-700 mb-2">Business Account ID</label>
                        <input type="text" name="whatsapp_business_account_id" id="whatsapp_business_account_id" value="{{ old('whatsapp_business_account_id', env('WHATSAPP_BUSINESS_ACCOUNT_ID', $whatsappConfig->business_account_id ?? '')) }}" class="w-full rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 shadow-sm placeholder:text-gray-400 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors sm:text-sm" placeholder="Optional">
                        <p class="mt-1 text-xs text-gray-500">Your WhatsApp Business Account ID (optional)</p>
                    </div>
                    <div>
                        <label for="whatsapp_verify_token" class="block text-sm font-medium text-gray-700 mb-2">Webhook Verify Token</label>
                        <input type="text" name="whatsapp_verify_token" id="whatsapp_verify_token" value="{{ old('whatsapp_verify_token', env('WHATSAPP_VERIFY_TOKEN', $whatsappConfig->config['verify_token'] ?? '')) }}" class="w-full rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 shadow-sm placeholder:text-gray-400 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors sm:text-sm" placeholder="Create any random secret, e.g. myapp_verify_2026">
                        <p class="mt-1 text-xs text-gray-500">Create this yourself and paste the exact same token in Meta Webhooks (Verify Token). Leave blank if you are not using webhooks.</p>
                    </div>
                </div>
            </div>

            <!-- Twilio Configuration -->
            <div id="twilio-config" class="provider-config hidden">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Twilio WhatsApp Configuration</h3>
                <div class="mb-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                    <div class="flex items-start gap-3">
                        <span class="material-symbols-outlined text-blue-600 text-lg">info</span>
                        <div class="flex-1">
                            <h4 class="text-sm font-semibold text-blue-900 mb-2">How to Get Your Twilio Credentials</h4>
                            <ol class="text-xs text-blue-800 space-y-1.5 list-decimal list-inside">
                                <li>Sign up at <a href="https://www.twilio.com/try-twilio" target="_blank" class="underline font-medium">Twilio</a> (free trial available)</li>
                                <li>Go to <strong>Console Dashboard</strong> → <strong>Account Info</strong></li>
                                <li><strong>Account SID:</strong> Found in Account Info section (starts with AC...)</li>
                                <li><strong>Auth Token:</strong> Click "View" next to Auth Token in Account Info (keep it secret!)</li>
                                <li><strong>WhatsApp From Number:</strong> 
                                    <ul class="list-disc list-inside ml-4 mt-1">
                                        <li>For testing: Use Twilio Sandbox number <code class="bg-blue-100 px-1 rounded">whatsapp:+14155238886</code></li>
                                        <li>For production: Get approved WhatsApp number from <strong>Phone Numbers</strong> → <strong>Manage</strong> → <strong>Buy a Number</strong> → Select WhatsApp-enabled number</li>
                                    </ul>
                                </li>
                            </ol>
                            <p class="mt-2 text-xs text-blue-700">
                                <strong>Note:</strong> Twilio WhatsApp requires number verification. Use sandbox for testing, then request production approval.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="twilio_account_sid" class="block text-sm font-medium text-gray-700 mb-2">
                            Account SID <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="twilio_account_sid" id="twilio_account_sid" value="{{ old('twilio_account_sid', env('TWILIO_ACCOUNT_SID', $whatsappConfig->api_key ?? '')) }}" required class="w-full rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 shadow-sm placeholder:text-gray-400 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors sm:text-sm" placeholder="ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">
                    </div>
                    <div>
                        <label for="twilio_auth_token" class="block text-sm font-medium text-gray-700 mb-2">
                            Auth Token <span class="text-red-500">*</span>
                        </label>
                        <input type="password" name="twilio_auth_token" id="twilio_auth_token" value="{{ old('twilio_auth_token') }}" required class="w-full rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 shadow-sm placeholder:text-gray-400 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors sm:text-sm" placeholder="Leave blank to keep current">
                </div>
                <div>
                        <label for="twilio_whatsapp_from" class="block text-sm font-medium text-gray-700 mb-2">
                            WhatsApp From Number <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="twilio_whatsapp_from" id="twilio_whatsapp_from" value="{{ old('twilio_whatsapp_from', env('TWILIO_WHATSAPP_FROM', $whatsappConfig->phone_number_id ?? 'whatsapp:+14155238886')) }}" required class="w-full rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 shadow-sm placeholder:text-gray-400 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors sm:text-sm" placeholder="whatsapp:+14155238886">
                        <p class="mt-1 text-xs text-gray-500">Twilio WhatsApp number (with whatsapp: prefix)</p>
                    </div>
                </div>
            </div>

            <!-- 360dialog Configuration -->
            <div id="360dialog-config" class="provider-config hidden">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">360dialog Configuration</h3>
                <div class="mb-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                    <div class="flex items-start gap-3">
                        <span class="material-symbols-outlined text-blue-600 text-lg">info</span>
                        <div class="flex-1">
                            <h4 class="text-sm font-semibold text-blue-900 mb-2">How to Get Your 360dialog Credentials</h4>
                            <ol class="text-xs text-blue-800 space-y-1.5 list-decimal list-inside">
                                <li>Sign up at <a href="https://www.360dialog.com/" target="_blank" class="underline font-medium">360dialog</a> (free tier available)</li>
                                <li>Complete the registration and verify your account</li>
                                <li>Go to <strong>Dashboard</strong> → <strong>API Keys</strong></li>
                                <li><strong>API Key:</strong> Copy your API Key from the dashboard (starts with your instance identifier)</li>
                                <li><strong>Instance ID:</strong> Found in <strong>Dashboard</strong> → <strong>Instances</strong> section</li>
                                <li>Connect your WhatsApp Business Account to 360dialog</li>
                                <li>Verify your phone number through 360dialog's verification process</li>
                            </ol>
                            <p class="mt-2 text-xs text-blue-700">
                                <strong>Note:</strong> 360dialog acts as a gateway to Meta's WhatsApp Business API, making setup easier than direct API integration.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="360dialog_api_key" class="block text-sm font-medium text-gray-700 mb-2">
                            API Key <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="360dialog_api_key" id="360dialog_api_key" value="{{ old('360dialog_api_key', env('360DIALOG_API_KEY', $whatsappConfig->api_key ?? '')) }}" required class="w-full rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 shadow-sm placeholder:text-gray-400 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors sm:text-sm" placeholder="Your 360dialog API Key">
                </div>
                <div>
                        <label for="360dialog_instance_id" class="block text-sm font-medium text-gray-700 mb-2">
                            Instance ID <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="360dialog_instance_id" id="360dialog_instance_id" value="{{ old('360dialog_instance_id', env('360DIALOG_INSTANCE_ID', $whatsappConfig->phone_number_id ?? '')) }}" required class="w-full rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 shadow-sm placeholder:text-gray-400 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors sm:text-sm" placeholder="Your 360dialog Instance ID">
                    </div>
                </div>
            </div>

            <!-- Custom Configuration -->
            <div id="custom-config" class="provider-config hidden">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Custom WhatsApp Provider Configuration</h3>
                <div class="mb-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                    <div class="flex items-start gap-3">
                        <span class="material-symbols-outlined text-blue-600 text-lg">info</span>
                        <div class="flex-1">
                            <h4 class="text-sm font-semibold text-blue-900 mb-2">How to Configure Custom WhatsApp Provider</h4>
                            <p class="text-xs text-blue-800 mb-2">
                                Use this option if you have your own WhatsApp API endpoint or are using a third-party service not listed above.
                            </p>
                            <ol class="text-xs text-blue-800 space-y-1.5 list-decimal list-inside mb-2">
                                <li><strong>API URL:</strong> Your custom endpoint URL (must be publicly accessible via HTTPS)</li>
                                <li><strong>API Key:</strong> (Optional) Authentication key for your API</li>
                                <li><strong>API Secret:</strong> (Optional) Additional security token for your API</li>
                            </ol>
                            <div class="mt-2 p-2 bg-blue-100 rounded text-xs text-blue-900">
                                <strong>Expected Request Format:</strong>
                                <pre class="mt-1 text-xs bg-white p-2 rounded overflow-x-auto">POST {API_URL}
{
  "to": "+1234567890",
  "message": "Your message",
  "media_url": "https://example.com/file.pdf",
  "media_type": "document"
}</pre>
                            </div>
                            <div class="mt-2 p-2 bg-blue-100 rounded text-xs text-blue-900">
                                <strong>Expected Response Format:</strong>
                                <pre class="mt-1 text-xs bg-white p-2 rounded overflow-x-auto">{
  "success": true,
  "message": "Message sent successfully",
  "id": "message_id_123"
}</pre>
                            </div>
                            <p class="mt-2 text-xs text-blue-700">
                                <strong>Note:</strong> Your API must accept POST requests, return JSON responses, and support media attachments (PDFs, images) for document sending.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="md:col-span-2">
                        <label for="custom_whatsapp_api_url" class="block text-sm font-medium text-gray-700 mb-2">
                            API URL <span class="text-red-500">*</span>
                        </label>
                        <input type="url" name="custom_whatsapp_api_url" id="custom_whatsapp_api_url" value="{{ old('custom_whatsapp_api_url', env('CUSTOM_WHATSAPP_API_URL', '')) }}" required class="w-full rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 shadow-sm placeholder:text-gray-400 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors sm:text-sm" placeholder="https://api.example.com/whatsapp/send">
                        <p class="mt-1 text-xs text-gray-500">Full URL endpoint for sending WhatsApp messages</p>
                    </div>
                    <div>
                        <label for="custom_whatsapp_api_key" class="block text-sm font-medium text-gray-700 mb-2">API Key</label>
                        <input type="text" name="custom_whatsapp_api_key" id="custom_whatsapp_api_key" value="{{ old('custom_whatsapp_api_key', env('CUSTOM_WHATSAPP_API_KEY', $whatsappConfig->api_key ?? '')) }}" class="w-full rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 shadow-sm placeholder:text-gray-400 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors sm:text-sm" placeholder="Optional API key">
                </div>
                <div>
                        <label for="custom_whatsapp_api_secret" class="block text-sm font-medium text-gray-700 mb-2">API Secret</label>
                        <input type="password" name="custom_whatsapp_api_secret" id="custom_whatsapp_api_secret" value="{{ old('custom_whatsapp_api_secret') }}" class="w-full rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 shadow-sm placeholder:text-gray-400 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors sm:text-sm" placeholder="Leave blank to keep current">
                    </div>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="flex items-center justify-end gap-3 pt-6 border-t border-gray-200">
                <button type="button" onclick="openTestWhatsAppModal()" class="px-4 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors font-medium">
                    <span class="material-symbols-outlined text-sm mr-2 align-middle">chat</span>
                    Test WhatsApp
                </button>
                <button type="submit" class="px-4 py-2.5 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                    Save Settings
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Test WhatsApp Modal -->
<div id="test-whatsapp-modal" data-admin-modal class="hidden fixed inset-0 z-[100] overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" onclick="closeTestWhatsAppModal()"></div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <form method="POST" action="{{ route('admin.settings.whatsapp.test') }}">
                @csrf
                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Send Test WhatsApp Message</h3>
                    <div>
                        <label for="test_phone" class="block text-sm font-medium text-gray-700 mb-2">
                            Phone Number <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="test_phone" id="test_phone" required class="w-full rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-2.5 shadow-sm placeholder:text-gray-400 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-colors sm:text-sm" placeholder="+1234567890">
                        <p class="mt-1 text-xs text-gray-500">Enter phone number in E.164 format (e.g., +1234567890)</p>
                    </div>
                </div>
                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                    <button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary text-base font-medium text-white hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary sm:ml-3 sm:w-auto sm:text-sm">
                        Send Test Message
                    </button>
                    <button type="button" onclick="closeTestWhatsAppModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                        Cancel
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function toggleProviderFields() {
    const provider = document.getElementById('provider').value;
    
    // Hide all config sections
    document.querySelectorAll('.provider-config').forEach(el => {
        el.classList.add('hidden');
    });
    
    // Show relevant config section
    if (provider === 'whatsapp_business') {
        document.getElementById('whatsapp_business-config').classList.remove('hidden');
        document.getElementById('whatsapp_phone_number_id').required = true;
        document.getElementById('whatsapp_access_token').required = true;
    } else {
        document.getElementById('whatsapp_phone_number_id').required = false;
        document.getElementById('whatsapp_access_token').required = false;
    }
    
    if (provider === 'twilio') {
        document.getElementById('twilio-config').classList.remove('hidden');
        document.getElementById('twilio_account_sid').required = true;
        document.getElementById('twilio_auth_token').required = true;
        document.getElementById('twilio_whatsapp_from').required = true;
    } else {
        document.getElementById('twilio_account_sid').required = false;
        document.getElementById('twilio_auth_token').required = false;
        document.getElementById('twilio_whatsapp_from').required = false;
    }
    
    if (provider === '360dialog') {
        document.getElementById('360dialog-config').classList.remove('hidden');
        document.getElementById('360dialog_api_key').required = true;
        document.getElementById('360dialog_instance_id').required = true;
    } else {
        document.getElementById('360dialog_api_key').required = false;
        document.getElementById('360dialog_instance_id').required = false;
    }
    
    if (provider === 'custom') {
        document.getElementById('custom-config').classList.remove('hidden');
        document.getElementById('custom_whatsapp_api_url').required = true;
    } else {
        document.getElementById('custom_whatsapp_api_url').required = false;
    }
}

function openTestWhatsAppModal() {
    document.getElementById('test-whatsapp-modal').classList.remove('hidden');
}

function closeTestWhatsAppModal() {
    document.getElementById('test-whatsapp-modal').classList.add('hidden');
}

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