@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="max-w-4xl mx-auto">
        <!-- Header -->
        <div class="mb-6">
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Notification Settings</h1>
            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                Configure notification channels for your customers
            </p>
        </div>

        <!-- Navigation Tabs -->
        <div class="mb-6">
            <div class="border-b border-gray-200 dark:border-gray-700">
                <nav class="-mb-px flex space-x-8" aria-label="Tabs">
                    <!-- WhatsApp Tab -->
                    <a href="{{ route('settings.notifications.whatsapp') }}"
                       class="border-blue-500 text-blue-600 dark:text-blue-400 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                        <svg class="w-5 h-5 inline-block mr-2 -mt-1" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
                        </svg>
                        WhatsApp
                    </a>

                    <!-- Telegram Tab -->
                    <a href="{{ route('settings.notifications.telegram') }}"
                       class="border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 hover:border-gray-300 dark:hover:text-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                        <svg class="w-5 h-5 inline-block mr-2 -mt-1" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
                        </svg>
                        Telegram
                    </a>
                </nav>
            </div>
        </div>

        @if(session('success'))
            <div class="mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-md">
                {{ session('success') }}
            </div>
        @endif

        @if($errors->any())
            <div class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-md">
                <ul class="list-disc list-inside">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <!-- Settings Form -->
        <form action="{{ route('settings.notifications.whatsapp.update') }}" method="POST" class="space-y-6">
            @csrf
            @method('PUT')

            <!-- Provider Selection Section -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">WhatsApp Provider</h2>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                    Choose your WhatsApp messaging provider
                </p>

                <div>
                    <label for="provider" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Provider <span class="text-red-500">*</span>
                    </label>
                    <select name="provider" id="provider" required
                        onchange="toggleProviderFields()"
                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                        <option value="">Select Provider</option>
                        <option value="wasapbot" {{ old('provider', $settings->provider ?? '') == 'wasapbot' ? 'selected' : '' }}>
                            WasapBot.my
                        </option>
                        <option value="official" {{ old('provider', $settings->provider ?? '') == 'official' ? 'selected' : '' }}>
                            WhatsApp Official Business API
                        </option>
                    </select>
                </div>
            </div>

            <!-- WasapBot Credentials Section -->
            <div id="wasapbot_section" class="bg-white dark:bg-gray-800 shadow rounded-lg p-6" style="display: none;">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                    WasapBot.my Credentials
                </h2>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                    Get your credentials from <a href="https://wasapbot.my" target="_blank" class="text-blue-600 hover:underline">WasapBot.my</a>
                </p>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="wasapbot_instance_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Instance ID <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="wasapbot_instance_id" id="wasapbot_instance_id"
                            value="{{ old('wasapbot_instance_id', $settings->wasapbot_instance_id ?? '') }}"
                            placeholder="e.g., abcd1234"
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                        <p class="mt-1 text-xs text-gray-500">Your WasapBot Instance ID</p>
                    </div>

                    <div>
                        <label for="access_token" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Access Token <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="access_token" id="access_token"
                            value="{{ old('access_token', $settings->access_token ?? '') }}"
                            placeholder="e.g., dfdbe0fd"
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                        <p class="mt-1 text-xs text-gray-500">Your WasapBot Access Token</p>
                    </div>

                    <div>
                        <label for="wasapbot_port" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Port
                        </label>
                        <input type="text" name="wasapbot_port" id="wasapbot_port"
                            value="{{ old('wasapbot_port', $settings->wasapbot_port ?? '0010') }}"
                            placeholder="e.g., 0010"
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                        <p class="mt-1 text-xs text-gray-500">Default: 0010</p>
                    </div>

                    <div>
                        <label for="wasapbot_phone_number" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Phone Number
                        </label>
                        <input type="text" name="wasapbot_phone_number" id="wasapbot_phone_number"
                            value="{{ old('wasapbot_phone_number', $settings->wasapbot_phone_number ?? '') }}"
                            placeholder="e.g., 60123456789@s.whatsapp.net"
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                        <p class="mt-1 text-xs text-gray-500">Your WhatsApp number (optional)</p>
                    </div>
                </div>
            </div>

            <!-- Official WhatsApp API Credentials Section -->
            <div id="official_section" class="bg-white dark:bg-gray-800 shadow rounded-lg p-6" style="display: none;">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                    WhatsApp Official API Credentials
                </h2>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                    Get your credentials from <a href="https://developers.facebook.com" target="_blank" class="text-blue-600 hover:underline">Meta Business</a>
                </p>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="phone_number_id_official" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Phone Number ID <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="phone_number_id" id="phone_number_id_official"
                            value="{{ old('phone_number_id', $settings->phone_number_id ?? '') }}"
                            placeholder="e.g., 123456789012345"
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    </div>

                    <div>
                        <label for="business_account_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Business Account ID
                        </label>
                        <input type="text" name="business_account_id" id="business_account_id"
                            value="{{ old('business_account_id', $settings->business_account_id ?? '') }}"
                            placeholder="e.g., 123456789012345"
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    </div>

                    <div class="md:col-span-2">
                        <label for="access_token_official" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Access Token <span class="text-red-500">*</span>
                        </label>
                        <textarea name="access_token" id="access_token_official" rows="2"
                            placeholder="e.g., EAAxxxxxxxxxxxxx..."
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">{{ old('access_token', $settings->access_token ?? '') }}</textarea>
                    </div>
                </div>
            </div>

            {{-- Hidden Providers - Uncomment to enable --}}
            {{--
            <!-- Twilio Credentials Section -->
            <div id="twilio_section" class="bg-white dark:bg-gray-800 shadow rounded-lg p-6" style="display: none;">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                    Twilio WhatsApp Credentials
                </h2>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="api_key_twilio" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Account SID <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="api_key" id="api_key_twilio"
                            value="{{ old('api_key', $settings->api_key ?? '') }}"
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    </div>

                    <div>
                        <label for="api_secret_twilio" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Auth Token <span class="text-red-500">*</span>
                        </label>
                        <input type="password" name="api_secret" id="api_secret_twilio"
                            value="{{ old('api_secret', $settings->api_secret ?? '') }}"
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    </div>

                    <div class="md:col-span-2">
                        <label for="phone_number_id_twilio" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Twilio WhatsApp Number <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="phone_number_id" id="phone_number_id_twilio"
                            value="{{ old('phone_number_id', $settings->phone_number_id ?? '') }}"
                            placeholder="whatsapp:+14155238886"
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    </div>
                </div>
            </div>

            <!-- WATI Credentials Section -->
            <div id="wati_section" class="bg-white dark:bg-gray-800 shadow rounded-lg p-6" style="display: none;">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                    WATI Credentials
                </h2>

                <div class="grid grid-cols-1 gap-4">
                    <div>
                        <label for="api_url_wati" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            WATI API URL <span class="text-red-500">*</span>
                        </label>
                        <input type="url" name="api_url" id="api_url_wati"
                            value="{{ old('api_url', $settings->api_url ?? '') }}"
                            placeholder="https://live-server-123.wati.io"
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    </div>

                    <div>
                        <label for="access_token_wati" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Access Token <span class="text-red-500">*</span>
                        </label>
                        <input type="password" name="access_token" id="access_token_wati"
                            value="{{ old('access_token', $settings->access_token ?? '') }}"
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    </div>
                </div>
            </div>

            <!-- Custom Webhook Section -->
            <div id="webhook_section" class="bg-white dark:bg-gray-800 shadow rounded-lg p-6" style="display: none;">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                    Custom Webhook Configuration
                </h2>

                <div class="grid grid-cols-1 gap-4">
                    <div>
                        <label for="api_url_webhook" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Webhook URL <span class="text-red-500">*</span>
                        </label>
                        <input type="url" name="api_url" id="api_url_webhook"
                            value="{{ old('api_url', $settings->api_url ?? '') }}"
                            placeholder="https://your-service.com/webhook"
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                    </div>

                    <div>
                        <label for="api_key_webhook" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            API Key (Optional)
                        </label>
                        <input type="text" name="api_key" id="api_key_webhook"
                            value="{{ old('api_key', $settings->api_key ?? '') }}"
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                        <p class="mt-1 text-xs text-gray-500">Will be sent as X-API-Key header or Bearer token</p>
                    </div>
                </div>
            </div>
            --}}

            <!-- Notification Triggers Section -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Notification Triggers</h2>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                    Choose when to send WhatsApp notifications to customers
                </p>

                <div class="space-y-3">
                    <div class="flex items-start">
                        <input type="checkbox" name="notify_on_order_created" id="notify_on_order_created" value="1"
                            {{ old('notify_on_order_created', $settings->notify_on_order_created ?? false) ? 'checked' : '' }}
                            class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded mt-1">
                        <div class="ml-2">
                            <label for="notify_on_order_created" class="block text-sm text-gray-900 dark:text-white font-medium">
                                Order Created - When new order is received
                            </label>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                                ℹ️ Only applies to internal orders (Sales Pages & Manual Checkout). Synced WooCommerce and Webhook orders are excluded to prevent spam.
                            </p>
                        </div>
                    </div>

                    <div class="flex items-center">
                        <input type="checkbox" name="notify_on_order_processing" id="notify_on_order_processing" value="1"
                            {{ old('notify_on_order_processing', $settings->notify_on_order_processing ?? false) ? 'checked' : '' }}
                            class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="notify_on_order_processing" class="ml-2 block text-sm text-gray-900 dark:text-white">
                            Order Processing - When order status changes to processing
                        </label>
                    </div>

                    <div class="flex items-center">
                        <input type="checkbox" name="notify_on_order_completed" id="notify_on_order_completed" value="1"
                            {{ old('notify_on_order_completed', $settings->notify_on_order_completed ?? false) ? 'checked' : '' }}
                            class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="notify_on_order_completed" class="ml-2 block text-sm text-gray-900 dark:text-white">
                            Order Completed - When order is marked as completed
                        </label>
                    </div>

                    <div class="flex items-center">
                        <input type="checkbox" name="notify_on_order_cancelled" id="notify_on_order_cancelled" value="1"
                            {{ old('notify_on_order_cancelled', $settings->notify_on_order_cancelled ?? false) ? 'checked' : '' }}
                            class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="notify_on_order_cancelled" class="ml-2 block text-sm text-gray-900 dark:text-white">
                            Order Cancelled - When order is cancelled
                        </label>
                    </div>

                    <div class="flex items-center">
                        <input type="checkbox" name="notify_on_awb_generated" id="notify_on_awb_generated" value="1"
                            {{ old('notify_on_awb_generated', $settings->notify_on_awb_generated ?? true) ? 'checked' : '' }}
                            class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="notify_on_awb_generated" class="ml-2 block text-sm text-gray-900 dark:text-white">
                            AWB Generated - When tracking number is generated
                        </label>
                    </div>
                </div>
            </div>

            <!-- Message Templates Section (WasapBot/Unofficial) -->
            <div id="wasapbot_templates_section" class="bg-white dark:bg-gray-800 shadow rounded-lg p-6" style="display: none;">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Message Templates</h2>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                    Customize the message templates. Available variables: {customer_name}, {order_number}, {total}, {currency}, {tracking_number}, {courier}, {tracking_url}, {store_name}
                </p>

                <div class="space-y-4">
                    <div>
                        <label for="template_order_created" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Order Created Template
                        </label>
                        <textarea name="template_order_created" id="template_order_created" rows="4"
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white font-mono text-sm">{!! old('template_order_created', $settings->template_order_created ?? \App\Models\WhatsAppSetting::getDefaultTemplates()['order_created']) !!}</textarea>
                    </div>

                    <div>
                        <label for="template_order_processing" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Order Processing Template
                        </label>
                        <textarea name="template_order_processing" id="template_order_processing" rows="4"
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white font-mono text-sm">{!! old('template_order_processing', $settings->template_order_processing ?? \App\Models\WhatsAppSetting::getDefaultTemplates()['order_processing']) !!}</textarea>
                    </div>

                    <div>
                        <label for="template_order_completed" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Order Completed Template
                        </label>
                        <textarea name="template_order_completed" id="template_order_completed" rows="4"
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white font-mono text-sm">{!! old('template_order_completed', $settings->template_order_completed ?? \App\Models\WhatsAppSetting::getDefaultTemplates()['order_completed']) !!}</textarea>
                    </div>

                    <div>
                        <label for="template_order_cancelled" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Order Cancelled Template
                        </label>
                        <textarea name="template_order_cancelled" id="template_order_cancelled" rows="4"
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white font-mono text-sm">{!! old('template_order_cancelled', $settings->template_order_cancelled ?? \App\Models\WhatsAppSetting::getDefaultTemplates()['order_cancelled']) !!}</textarea>
                    </div>

                    <div>
                        <label for="template_awb_generated" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            AWB Generated Template
                        </label>
                        <textarea name="template_awb_generated" id="template_awb_generated" rows="4"
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white font-mono text-sm">{!! old('template_awb_generated', $settings->template_awb_generated ?? \App\Models\WhatsAppSetting::getDefaultTemplates()['awb_generated']) !!}</textarea>
                    </div>
                </div>
            </div>

            <!-- Official API Template Names Section -->
            <div id="official_templates_section" class="bg-white dark:bg-gray-800 shadow rounded-lg p-6" style="display: none;">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Meta Template Configuration</h2>

                <div class="mb-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-md">
                    <h3 class="text-sm font-medium text-blue-800 dark:text-blue-300 mb-2">How Meta Templates Work</h3>
                    <p class="text-sm text-blue-700 dark:text-blue-400 mb-2">
                        The Official WhatsApp Business API requires pre-approved message templates registered in Meta Business Manager.
                    </p>
                    <ol class="text-sm text-blue-700 dark:text-blue-400 list-decimal list-inside space-y-1">
                        <li>Go to <a href="https://business.facebook.com/wa/manage/message-templates" target="_blank" class="underline font-medium">Meta Business Manager</a></li>
                        <li>Create message templates for each notification type</li>
                        <li>Wait for approval (usually 24-48 hours)</li>
                        <li>Enter the exact template names below</li>
                    </ol>
                </div>

                <div class="mb-4 p-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-md">
                    <h3 class="text-sm font-medium text-amber-800 dark:text-amber-300 mb-2">Template Variable Mapping (MARKETING Template)</h3>
                    <p class="text-sm text-amber-700 dark:text-amber-400 mb-2">
                        Use <strong>Marketing</strong> template type in Meta to allow seller WhatsApp links. Variables in order:
                    </p>
                    <ul class="text-xs text-amber-700 dark:text-amber-400 font-mono space-y-1">
                        <li><strong>Order Created:</strong> {{1}}=customer_name, {{2}}=order_number, {{3}}=total, {{4}}=store_name, {{5}}=seller_whatsapp_link</li>
                        <li><strong>Order Processing:</strong> {{1}}=customer_name, {{2}}=order_number, {{3}}=store_name, {{4}}=seller_whatsapp_link</li>
                        <li><strong>Order Completed/AWB:</strong> {{1}}=customer_name, {{2}}=order_number, {{3}}=tracking_number, {{4}}=courier, {{5}}=tracking_url, {{6}}=seller_whatsapp_link</li>
                        <li><strong>Order Cancelled:</strong> {{1}}=customer_name, {{2}}=order_number, {{3}}=store_name, {{4}}=seller_whatsapp_link</li>
                    </ul>
                    <p class="text-xs text-amber-600 dark:text-amber-500 mt-2">
                        <strong>Note:</strong> seller_whatsapp_link = wa.me link to seller phone (from user profile)
                    </p>
                </div>

                <div class="space-y-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label for="official_template_language" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Template Language Code <span class="text-red-500">*</span>
                            </label>
                            <select name="official_template_language" id="official_template_language"
                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                                <option value="en" {{ old('official_template_language', $settings->official_template_language ?? 'en') == 'en' ? 'selected' : '' }}>English (en)</option>
                                <option value="ms" {{ old('official_template_language', $settings->official_template_language ?? '') == 'ms' ? 'selected' : '' }}>Malay (ms)</option>
                                <option value="en_US" {{ old('official_template_language', $settings->official_template_language ?? '') == 'en_US' ? 'selected' : '' }}>English US (en_US)</option>
                                <option value="en_GB" {{ old('official_template_language', $settings->official_template_language ?? '') == 'en_GB' ? 'selected' : '' }}>English UK (en_GB)</option>
                                <option value="id" {{ old('official_template_language', $settings->official_template_language ?? '') == 'id' ? 'selected' : '' }}>Indonesian (id)</option>
                                <option value="zh_CN" {{ old('official_template_language', $settings->official_template_language ?? '') == 'zh_CN' ? 'selected' : '' }}>Chinese Simplified (zh_CN)</option>
                            </select>
                            <p class="mt-1 text-xs text-gray-500">Must match the language used when creating templates in Meta</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label for="official_template_order_created" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Order Created Template Name
                            </label>
                            <input type="text" name="official_template_order_created" id="official_template_order_created"
                                value="{{ old('official_template_order_created', $settings->official_template_order_created ?? '') }}"
                                placeholder="e.g., order_confirmation"
                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                            <p class="mt-1 text-xs text-gray-500">Variables: customer_name, order_number, total, store_name</p>
                        </div>

                        <div>
                            <label for="official_template_order_processing" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Order Processing Template Name
                            </label>
                            <input type="text" name="official_template_order_processing" id="official_template_order_processing"
                                value="{{ old('official_template_order_processing', $settings->official_template_order_processing ?? '') }}"
                                placeholder="e.g., order_processing"
                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                            <p class="mt-1 text-xs text-gray-500">Variables: customer_name, order_number, store_name</p>
                        </div>

                        <div>
                            <label for="official_template_order_completed" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Order Completed Template Name
                            </label>
                            <input type="text" name="official_template_order_completed" id="official_template_order_completed"
                                value="{{ old('official_template_order_completed', $settings->official_template_order_completed ?? '') }}"
                                placeholder="e.g., order_shipped"
                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                            <p class="mt-1 text-xs text-gray-500">Variables: customer_name, order_number, tracking_number, courier, tracking_url</p>
                        </div>

                        <div>
                            <label for="official_template_order_cancelled" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Order Cancelled Template Name
                            </label>
                            <input type="text" name="official_template_order_cancelled" id="official_template_order_cancelled"
                                value="{{ old('official_template_order_cancelled', $settings->official_template_order_cancelled ?? '') }}"
                                placeholder="e.g., order_cancelled"
                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                            <p class="mt-1 text-xs text-gray-500">Variables: customer_name, order_number, store_name</p>
                        </div>

                        <div>
                            <label for="official_template_awb_generated" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                AWB Generated Template Name
                            </label>
                            <input type="text" name="official_template_awb_generated" id="official_template_awb_generated"
                                value="{{ old('official_template_awb_generated', $settings->official_template_awb_generated ?? '') }}"
                                placeholder="e.g., shipping_update"
                                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                            <p class="mt-1 text-xs text-gray-500">Variables: customer_name, order_number, tracking_number, courier, tracking_url</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Additional Settings Section -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Additional Settings</h2>

                <div class="space-y-4">
                    <div>
                        <label for="sender_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Sender/Store Name
                        </label>
                        <input type="text" name="sender_name" id="sender_name"
                            value="{{ old('sender_name', $settings->sender_name ?? auth()->user()->company_name ?? '') }}"
                            placeholder="e.g., My Store"
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                        <p class="mt-1 text-xs text-gray-500">This will be used in message templates as {store_name}</p>
                    </div>

                    <div class="flex items-center">
                        <input type="checkbox" name="is_active" id="is_active" value="1"
                            {{ old('is_active', $settings->is_active ?? false) ? 'checked' : '' }}
                            class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="is_active" class="ml-2 block text-sm text-gray-900 dark:text-white">
                            Enable WhatsApp Notifications
                        </label>
                    </div>
                </div>
            </div>

            <!-- Submit Button -->
            <div class="flex justify-end space-x-3">
                <a href="{{ route('dashboard') }}"
                    class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                    Cancel
                </a>
                <button type="submit"
                    class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                    Save Settings
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function toggleProviderFields() {
    const provider = document.getElementById('provider').value;

    // Hide all provider sections
    document.getElementById('wasapbot_section').style.display = 'none';
    document.getElementById('official_section').style.display = 'none';
    document.getElementById('wasapbot_templates_section').style.display = 'none';
    document.getElementById('official_templates_section').style.display = 'none';

    // Disable all provider-specific fields
    document.querySelectorAll('#wasapbot_section input, #wasapbot_section textarea').forEach(field => field.disabled = true);
    document.querySelectorAll('#official_section input, #official_section textarea').forEach(field => field.disabled = true);
    document.querySelectorAll('#wasapbot_templates_section input, #wasapbot_templates_section textarea').forEach(field => field.disabled = true);
    document.querySelectorAll('#official_templates_section input, #official_templates_section textarea, #official_templates_section select').forEach(field => field.disabled = true);

    // Show selected provider section and enable its fields
    if (provider === 'wasapbot') {
        document.getElementById('wasapbot_section').style.display = 'block';
        document.getElementById('wasapbot_templates_section').style.display = 'block';
        document.querySelectorAll('#wasapbot_section input, #wasapbot_section textarea').forEach(field => field.disabled = false);
        document.querySelectorAll('#wasapbot_templates_section input, #wasapbot_templates_section textarea').forEach(field => field.disabled = false);
    } else if (provider === 'official') {
        document.getElementById('official_section').style.display = 'block';
        document.getElementById('official_templates_section').style.display = 'block';
        document.querySelectorAll('#official_section input, #official_section textarea').forEach(field => field.disabled = false);
        document.querySelectorAll('#official_templates_section input, #official_templates_section textarea, #official_templates_section select').forEach(field => field.disabled = false);
    }
}

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