@extends('root')
@section('title', 'Detail WABA Pool')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Detail WABA Pool',
        'links' => [
            ['url' => route('dashboard'), 'label' => 'Dashboard'],
            ['url' => route('admin.waba-pools.index'), 'label' => 'WABA Pools'],
        ],
        'current' => $wabaPool->phone_number ?? 'Detail'
    ])

    <!-- Header Card -->
    <div class="card mb-3">
        <div class="card-body">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <div class="d-flex align-items-center gap-3">
                        <div class="rounded-circle bg-{{ $wabaPool->type === 'dedicated' ? 'success' : 'primary' }} bg-opacity-10 p-3">
                            <i class="ti ti-{{ $wabaPool->type === 'dedicated' ? 'user-check' : 'users' }} fs-1 text-{{ $wabaPool->type === 'dedicated' ? 'success' : 'primary' }}"></i>
                        </div>
                        <div>
                            <h3 class="mb-1">{{ $wabaPool->phone_number }}</h3>
                            <p class="mb-0 text-muted">{{ $wabaPool->account_name ?? 'No Account Name' }}</p>
                            <div class="mt-2">
                                @if($wabaPool->type === 'dedicated')
                                    <span class="badge bg-success"><i class="ti ti-user-check me-1"></i>Dedicated</span>
                                @else
                                    <span class="badge bg-primary"><i class="ti ti-users me-1"></i>Shared</span>
                                @endif
                                
                                @php
                                    $statusClass = match($wabaPool->status) {
                                        'active' => 'bg-success',
                                        'disconnected' => 'bg-secondary',
                                        'blocked' => 'bg-danger',
                                        'error' => 'bg-warning text-dark',
                                        default => 'bg-secondary'
                                    };
                                @endphp
                                <span class="badge {{ $statusClass }}">{{ ucfirst($wabaPool->status) }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 text-end">
                    <a href="{{ route('admin.waba-pools.index') }}" class="btn btn-outline-secondary">
                        <i class="ti ti-arrow-left me-1"></i> Kembali
                    </a>
                    <button class="btn btn-warning btn-create" data-url="{{ route('admin.waba-pools.edit', $wabaPool->id) }}">
                        <i class="ti ti-pencil me-1"></i> Edit
                    </button>
                    <button class="btn btn-outline-warning" id="btnResetCooldown" title="Reset Cooldown">
                        <i class="ti ti-refresh-alert me-1"></i> Reset Cooldown
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabs Navigation -->
    <ul class="nav nav-tabs mb-3" id="wabaPoolTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button">
                <i class="ti ti-info-circle me-1"></i> Overview
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="routing-tab" data-bs-toggle="tab" data-bs-target="#routing" type="button">
                <i class="ti ti-route me-1"></i> Routing Rules
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="quota-tab" data-bs-toggle="tab" data-bs-target="#quota" type="button">
                <i class="ti ti-chart-bar me-1"></i> Messaging Quota
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="webhook-tab" data-bs-toggle="tab" data-bs-target="#webhook" type="button">
                <i class="ti ti-webhook me-1"></i> Meta Webhook
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="token-tab" data-bs-toggle="tab" data-bs-target="#token-generator" type="button">
                <i class="ti ti-key me-1"></i> Token Generator
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="subscription-tab" data-bs-toggle="tab" data-bs-target="#manage-subscription" type="button">
                <i class="ti ti-plug-connected me-1"></i> Manage Subscription
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="logs-tab" data-bs-toggle="tab" data-bs-target="#logs" type="button">
                <i class="ti ti-list me-1"></i> Logs
            </button>
        </li>
    </ul>

    <!-- Tab Content -->
    <div class="tab-content" id="wabaPoolTabsContent">
        
        <!-- TAB: Overview -->
        <div class="tab-pane fade show active" id="overview" role="tabpanel">
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header"><h5 class="mb-0">Informasi Dasar</h5></div>
                        <div class="card-body">
                            <table class="table table-borderless mb-0">
                                <tr>
                                    <td class="text-muted" width="40%">Account Name</td>
                                    <td class="fw-medium">{{ $wabaPool->account_name ?? '-' }}</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">WABA ID</td>
                                    <td><code>{{ $wabaPool->waba_id }}</code></td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Phone Number ID</td>
                                    <td><code>{{ $wabaPool->phone_number_id }}</code></td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Phone Number</td>
                                    <td class="fw-medium">{{ $wabaPool->phone_number }}</td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Type</td>
                                    <td>
                                        @if($wabaPool->type === 'dedicated')
                                            <span class="badge bg-success">Dedicated</span>
                                        @else
                                            <span class="badge bg-primary">Shared</span>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Status</td>
                                    <td><span class="badge {{ $statusClass }}">{{ ucfirst($wabaPool->status) }}</span></td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Cooldown</td>
                                    <td>
                                        @if ($wabaPool->cooldown_until)
                                            @if ($wabaPool->cooldown_until->isPast())
                                                Yes
                                            @else
                                                {{ $wabaPool->cooldown_until->format('d M Y H:i') }}
                                            @endif
                                        @else
                                            -
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Created</td>
                                    <td>{{ $wabaPool->created_at->format('d M Y H:i') }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    @if($wabaPool->type === 'dedicated')
                    <div class="card border-success">
                        <div class="card-header bg-success bg-opacity-10">
                            <h5 class="mb-0 text-success"><i class="ti ti-user-check me-2"></i>Dedicated Info</h5>
                        </div>
                        <div class="card-body">
                            <table class="table table-borderless mb-0">
                                <tr>
                                    <td class="text-muted" width="40%">Price</td>
                                    <td class="fw-bold text-success d-flex justify-content-between align-items-center">
                                        <span id="priceDisplay">Rp {{ number_format($wabaPool->dedicated_price ?? 0, 0, ',', '.') }}</span>
                                        <button class="btn btn-sm btn-link p-0 text-success" data-bs-toggle="modal" data-bs-target="#editPriceModal">
                                            <i class="ti ti-pencil"></i>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Assigned To</td>
                                    <td>
                                        @if($wabaPool->dedicatedAssigns && $wabaPool->dedicatedAssigns->where('status', 'active')->first())
                                            <span class="fw-medium">{{ $wabaPool->dedicatedAssigns->where('status', 'active')->first()->client->name ?? '-' }}</span>
                                        @else
                                            <span class="text-muted">Not Assigned</span>
                                        @endif
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    @endif
                    
                    <div class="card mt-3">
                        <div class="card-header"><h5 class="mb-0">Quick Stats</h5></div>
                        <div class="card-body">
                            <div class="row text-center">
                                <div class="col-4">
                                    <h4 class="mb-0 text-primary">{{ $wabaPool->used_today ?? 0 }}</h4>
                                    <small class="text-muted">Used Today</small>
                                </div>
                                <div class="col-4">
                                    <h4 class="mb-0 text-success">{{ $wabaPool->limit_max ?? 1000 }}</h4>
                                    <small class="text-muted">Daily Limit</small>
                                </div>
                                <div class="col-4">
                                    <h4 class="mb-0 text-info">{{ $wabaPool->messaging_tier ?? 1 }}</h4>
                                    <small class="text-muted">Tier</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- TAB: Routing Rules -->
        <div class="tab-pane fade" id="routing" role="tabpanel">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Routing Configuration</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Priority Order</label>
                                <input type="number" class="form-control" id="routingPriority" value="1" min="1">
                                <small class="text-muted">Lower number = higher priority</small>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Routing Status</label>
                                <select class="form-select" id="routingStatus">
                                    <option value="enabled" {{ $wabaPool->status === 'active' ? 'selected' : '' }}>Enabled</option>
                                    <option value="disabled" {{ $wabaPool->status !== 'active' ? 'selected' : '' }}>Disabled</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="alert alert-info">
                                <h6 class="alert-heading"><i class="ti ti-info-circle me-2"></i>Routing Info</h6>
                                <p class="mb-0 small">
                                    Nomor ini akan digunakan dalam pool routing berdasarkan prioritas dan ketersediaan quota harian.
                                </p>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-primary" id="btnSaveRouting">
                        <i class="ti ti-device-floppy me-1"></i> Simpan Routing
                    </button>
                </div>
            </div>
        </div>

        <!-- TAB: Messaging Quota -->
        <div class="tab-pane fade" id="quota" role="tabpanel">
            <div class="row">
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header"><h5 class="mb-0">Daily Quota</h5></div>
                        <div class="card-body">
                            @php
                                $used = $wabaPool->used_today ?? 0;
                                $max = $wabaPool->limit_max ?? 1000;
                                $percent = $max > 0 ? round(($used / $max) * 100) : 0;
                                $barClass = $percent > 80 ? 'bg-danger' : ($percent > 50 ? 'bg-warning' : 'bg-success');
                            @endphp
                            <div class="mb-4">
                                <div class="d-flex justify-content-between mb-2">
                                    <span>Usage Today</span>
                                    <span class="fw-bold">{{ $used }} / {{ $max }}</span>
                                </div>
                                <div class="progress" style="height: 20px;">
                                    <div class="progress-bar {{ $barClass }}" style="width: {{ $percent }}%">{{ $percent }}%</div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Daily Limit</label>
                                        <input type="number" class="form-control" id="dailyLimit" value="{{ $max }}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Messaging Tier</label>
                                        <select class="form-select" id="messagingTier">
                                            @for($i = 1; $i <= 4; $i++)
                                                <option value="{{ $i }}" {{ ($wabaPool->messaging_tier ?? 1) == $i ? 'selected' : '' }}>Tier {{ $i }}</option>
                                            @endfor
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="btn btn-primary" id="btnSaveQuota">
                                <i class="ti ti-device-floppy me-1"></i> Update Quota
                            </button>
                            <button type="button" class="btn btn-outline-warning" id="btnResetQuota">
                                <i class="ti ti-refresh me-1"></i> Reset Daily Usage
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header"><h5 class="mb-0">Tier Info</h5></div>
                        <div class="card-body">
                            <table class="table table-sm table-borderless">
                                <tr><td>Tier 1</td><td>1,000/day</td></tr>
                                <tr><td>Tier 2</td><td>10,000/day</td></tr>
                                <tr><td>Tier 3</td><td>100,000/day</td></tr>
                                <tr><td>Tier 4</td><td>Unlimited</td></tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- TAB: Meta Webhook -->
        <div class="tab-pane fade" id="webhook" role="tabpanel">
            <div class="row">
                <div class="col-md-7">
                    <!-- Webhook Configuration -->
                    <div class="card border-primary">
                        <div class="card-header bg-primary bg-opacity-10">
                            <h5 class="mb-0 text-primary"><i class="ti ti-webhook me-2"></i>Konfigurasi Webhook</h5>
                        </div>
                        <div class="card-body">
                            <form id="form-global-webhook">
                                <div class="mb-3">
                                    <label class="form-label">Callback URL <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="webhookUrlGlobal" name="webhook_url_global"
                                            value="{{ $wabaPool->webhook_url_global ?: url('/api/meta/webhook') }}" placeholder="https://yourdomain.com/api/meta/webhook">
                                        <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('#webhookUrlGlobal')">
                                            <i class="ti ti-copy"></i>
                                        </button>
                                        <button class="btn btn-secondary" type="button" id="btnUseDefaultUrl">
                                            Default
                                        </button>
                                    </div>
                                    <small class="text-muted">URL yang akan didaftarkan ke Meta untuk menerima webhook</small>
                                </div>
                                
                                <div class="mb-3">
                                    <label class="form-label">Verify Token <span class="badge bg-info">From .env</span></label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="verifyTokenGlobal" name="verify_token_global"
                                            value="{{ config('waba.webhook_verify_token') }}" readonly>
                                        <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('#verifyTokenGlobal')">
                                            <i class="ti ti-copy"></i>
                                        </button>
                                    </div>
                                    <small class="text-muted">Token diambil dari <code>.env</code> → <code>WABA_WEBHOOK_VERIFY_TOKEN</code></small>
                                </div>
                                
                                <div class="d-flex gap-2">
                                    <button type="submit" class="btn btn-primary" id="btnUpdateWebhookMeta">
                                        <i class="ti ti-cloud-upload me-1"></i> Update Webhook ke Meta
                                    </button>
                                </div>
                            </form>
                            
                            <div class="mt-3">
                                <label class="form-label">Status Registrasi</label>
                                <div>
                                    @if($wabaPool->verify_token_global && $wabaPool->webhook_url_global)
                                        <span class="badge bg-success"><i class="ti ti-check me-1"></i>Registered</span>
                                    @elseif($wabaPool->verify_token_global)
                                        <span class="badge bg-warning text-dark"><i class="ti ti-clock me-1"></i>Token Ready</span>
                                    @else
                                        <span class="badge bg-secondary"><i class="ti ti-x me-1"></i>Not Configured</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="card">
                        <div class="card-header"><h5 class="mb-0">Cara Setup</h5></div>
                        <div class="card-body">
                            <ol class="mb-0 small">
                                <li class="mb-2">Generate <strong>Verify Token</strong></li>
                                <li class="mb-2">Pastikan <strong>Callback URL</strong> benar</li>
                                <li class="mb-2">Klik <strong>Update Webhook ke Meta</strong></li>
                                <li class="mb-2">Sistem akan otomatis mendaftarkan webhook ke Meta API</li>
                            </ol>
                        </div>
                    </div>
                    
                    <div class="card mt-3">
                        <div class="card-header"><h5 class="mb-0">Webhook Fields</h5></div>
                        <div class="card-body">
                            <div class="d-flex flex-wrap gap-2">
                                <span class="badge bg-primary">messages</span>
                                <span class="badge bg-secondary">message_template_status_update</span>
                                <span class="badge bg-secondary">phone_number_quality_update</span>
                            </div>
                        </div>
                    </div>

                    <!-- Subscription Status Card -->
                    <div class="card mt-3 border-info">
                        <div class="card-header bg-info bg-opacity-10">
                            <h5 class="mb-0 text-info"><i class="ti ti-plug-connected me-2"></i>Subscription Status</h5>
                        </div>
                        <div class="card-body">
                            <div id="subscriptionStatusContent">
                                <div class="text-center py-3">
                                    <div class="spinner-border spinner-border-sm text-info" role="status"></div>
                                    <span class="ms-2">Checking subscription...</span>
                                </div>
                            </div>
                            <div class="mt-3">
                                <button type="button" class="btn btn-outline-info btn-sm" id="btnCheckSubscription">
                                    <i class="ti ti-refresh me-1"></i> Check Subscription
                                </button>
                                <button type="button" class="btn btn-warning btn-sm" id="btnRepairSubscription">
                                    <i class="ti ti-tool me-1"></i> Repair Subscription
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Check Webhook Status -->
                    <div class="card mt-3 border-info">
                        <div class="card-header bg-info bg-opacity-10 d-flex justify-content-between align-items-center">
                            <h5 class="mb-0 text-info"><i class="ti ti-cloud-download me-2"></i>Status Webhook dari Meta</h5>
                            <button type="button" class="btn btn-sm btn-info" id="btnCheckWebhookStatus" >
                                <i class="ti ti-refresh me-1"></i> Cek Status
                            </button>
                        </div>
                        <div class="card-body">
                            <div id="webhookStatusContainer">
                                @if(!$wabaPool->meta_token)
                                    <p class="text-muted small mb-0">Set Meta Token terlebih dahulu untuk melihat status.</p>
                                @else
                                    <p class="text-muted small mb-0">Klik "Cek Status" untuk melihat konfigurasi webhook di Meta.</p>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Inbound Logs -->
            <div class="card mt-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Recent Inbound Messages</h5>
                    <button class="btn btn-sm btn-outline-primary" id="btnRefreshInbox">
                        <i class="ti ti-refresh"></i> Refresh
                    </button>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm" id="tableInbox">
                            <thead>
                                <tr>
                                    <th>Time</th>
                                    <th>From</th>
                                    <th>Type</th>
                                    <th>Message</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr><td colspan="4" class="text-center text-muted">No inbound messages yet</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- TAB: Token Generator -->
        <div class="tab-pane fade" id="token-generator" role="tabpanel">
            <div class="row">
                <div class="col-md-6">
                    <!-- Current Token Display -->
                    <div class="card border-{{ $wabaPool->meta_token ? 'success' : 'warning' }}">
                        <div class="card-header bg-{{ $wabaPool->meta_token ? 'success' : 'warning' }} bg-opacity-10">
                            <h5 class="mb-0 text-{{ $wabaPool->meta_token ? 'success' : 'warning' }}">
                                <i class="ti ti-key me-2"></i>Token Saat Ini
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label">Meta Token</label>
                                <div class="input-group">
                                    <input type="password" class="form-control" id="currentMetaToken" 
                                        value="{{ $wabaPool->meta_token}}" readonly>
                                    <button class="btn btn-outline-secondary" type="button" onclick="togglePassword('#currentMetaToken')">
                                        <i class="ti ti-eye"></i>
                                    </button>
                                    <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('#currentMetaToken')">
                                        <i class="ti ti-copy"></i>
                                    </button>
                                </div>
                                @if(!$wabaPool->meta_token)
                                    <small class="text-danger">Token belum dikonfigurasi</small>
                                @else
                                    <small class="text-success">Token tersedia</small>
                                @endif
                            </div>
                            
                            <div class="row mb-3">
                                <div class="col-6">
                                    <label class="form-label small text-muted">Token Generated</label>
                                    <div>{{ $wabaPool->token_generated_at ? $wabaPool->token_generated_at->format('d M Y H:i') : '-' }}</div>
                                </div>
                                <div class="col-6">
                                    <label class="form-label small text-muted">Token Expires</label>
                                    <div>{{ $wabaPool->token_expires_at ? $wabaPool->token_expires_at->format('d M Y H:i') : 'Never (Permanent)' }}</div>
                                </div>
                            </div>
                            
                            @if($wabaPool->meta_token && $wabaPool->app_id && $wabaPool->app_secret)
                            <button type="button" class="btn btn-success w-100" id="btnExchangeToLongLived">
                                <i class="ti ti-transform me-1"></i> Exchange to Long-Lived Token
                            </button>
                            @elseif(!$wabaPool->meta_token)
                            <div class="alert alert-warning mb-0 small">
                                <i class="ti ti-info-circle me-1"></i>
                                Meta token belum tersedia. Paste token baru di form bawah.
                            </div>
                            @else
                            <div class="alert alert-info mb-0 small">
                                <i class="ti ti-info-circle me-1"></i>
                                Lengkapi App ID dan App Secret terlebih dahulu untuk exchange token.
                            </div>
                            @endif
                        </div>
                    </div>
                    
                    <!-- App Credentials -->
                    <div class="card mt-3">
                        <div class="card-header"><h5 class="mb-0">App Credentials</h5></div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label">App ID</label>
                                <input type="text" class="form-control" id="appId" value="{{ $wabaPool->app_id ?? '' }}" placeholder="Enter App ID">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">App Secret</label>
                                <div class="input-group">
                                    <input type="password" class="form-control" id="appSecret" value="{{ $wabaPool->app_secret }}" placeholder="Enter App Secret">
                                    <button class="btn btn-outline-secondary" type="button" onclick="togglePassword('#appSecret')">
                                        <i class="ti ti-eye"></i>
                                    </button>
                                </div>
                            </div>
                            <button type="button" class="btn btn-primary" id="btnSaveCredentials">
                                <i class="ti ti-device-floppy me-1"></i> Save Credentials
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <!-- Set/Update Token -->
                    <div class="card">
                        <div class="card-header"><h5 class="mb-0">Set Token Baru</h5></div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label">Paste Token</label>
                                <textarea class="form-control" id="newMetaToken" rows="4" placeholder="Paste token dari Graph API Explorer atau Business Manager"></textarea>
                                <small class="text-muted">Bisa short-lived atau permanent token</small>
                            </div>
                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-primary" id="btnSaveNewToken">
                                    <i class="ti ti-device-floppy me-1"></i> Simpan Token
                                </button>
                                <button type="button" class="btn btn-success" id="btnSaveAndExchange">
                                    <i class="ti ti-transform me-1"></i> Simpan & Exchange
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Token Actions -->
                    <div class="card mt-3">
                        <div class="card-header"><h5 class="mb-0">Token Actions</h5></div>
                        <div class="card-body">
                            <button type="button" class="btn btn-info w-100 mb-2" id="btnValidateToken" {{ !$wabaPool->meta_token ? 'disabled' : '' }}>
                                <i class="ti ti-shield-check me-1"></i> Validate Token
                            </button>
                            <button type="button" class="btn btn-outline-danger w-100" id="btnRevokeToken" {{ !$wabaPool->meta_token ? 'disabled' : '' }}>
                                <i class="ti ti-trash me-1"></i> Revoke Token
                            </button>
                        </div>
                    </div>
                    
                    <!-- Help -->
                    <div class="card mt-3">
                        <div class="card-header"><h5 class="mb-0">Cara Mendapatkan Token</h5></div>
                        <div class="card-body">
                            <ol class="small mb-0">
                                <li class="mb-1">Buka <a href="https://developers.facebook.com/tools/explorer/" target="_blank">Graph API Explorer</a></li>
                                <li class="mb-1">Pilih aplikasi dan generate token</li>
                                <li class="mb-1">Paste token di form "Set Token Baru"</li>
                                <li class="mb-1">Klik "Simpan & Exchange" untuk konversi ke long-lived</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- TAB: Manage Subscription -->
        <div class="tab-pane fade" id="manage-subscription" role="tabpanel">
            <div class="row">
                <div class="col-md-7">
                    <div class="card border-info">
                        <div class="card-header bg-info bg-opacity-10">
                            <h5 class="mb-0 text-info"><i class="ti ti-plug-connected me-2"></i>App Subscription Fields</h5>
                        </div>
                        <div class="card-body">
                            <p class="text-muted small mb-3">
                                Manage subscription fields untuk WhatsApp Business API. 
                                <strong>Hanya field "messages" yang valid untuk Meta.</strong>
                            </p>
                            
                            <div id="subscriptionFieldsContainer">
                                <div class="text-center py-4">
                                    <div class="spinner-border spinner-border-sm text-info" role="status"></div>
                                    <span class="ms-2">Loading subscription status...</span>
                                </div>
                            </div>
                            
                            <div class="mt-4 pt-3 border-top">
                                <div class="d-flex gap-2">
                                    <button type="button" class="btn btn-primary" id="btnUpdateSubscription">
                                        <i class="ti ti-cloud-upload me-1"></i> Update Subscription
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary" id="btnRefreshSubscription">
                                        <i class="ti ti-refresh me-1"></i> Refresh
                                    </button>
                                </div>
                            </div>
                            
                            <div id="subscriptionUpdateResult" class="mt-3" style="display: none;"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-5">
                    <div class="card">
                        <div class="card-header"><h5 class="mb-0">Info Subscription</h5></div>
                        <div class="card-body">
                            <div class="alert alert-info mb-3">
                                <strong><i class="ti ti-info-circle me-1"></i> WhatsApp API Valid Fields:</strong>
                                <ul class="mb-0 mt-2 small">
                                    <li><code>messages</code> - Pesan chat masuk/keluar</li>
                                </ul>
                            </div>
                            <p class="small text-muted mb-0">
                                Field lain seperti <code>message_deliveries</code>, <code>message_reads</code>, dll. 
                                mungkin tersedia pada API lain tetapi <strong>tidak valid untuk WhatsApp</strong>.
                            </p>
                        </div>
                    </div>
                    
                    <div class="card mt-3">
                        <div class="card-header"><h5 class="mb-0">Current Status</h5></div>
                        <div class="card-body">
                            <div id="subscriptionCurrentStatus">
                                <span class="text-muted small">Loading...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- TAB: Logs -->
        <div class="tab-pane fade" id="logs" role="tabpanel">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Activity Logs</h5>
                    <button class="btn btn-sm btn-outline-primary" id="btnRefreshLogs">
                        <i class="ti ti-refresh"></i> Refresh
                    </button>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm" id="tableLogs">
                            <thead>
                                <tr>
                                    <th>Time</th>
                                    <th>Action</th>
                                    <th>Status</th>
                                    <th>Details</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr><td colspan="4" class="text-center text-muted">Loading logs...</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Price Modal -->
    <div class="modal fade" id="editPriceModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Price</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Dedicated Price</label>
                        <div class="input-group">
                            <span class="input-group-text">Rp</span>
                            <input type="number" class="form-control" id="editPriceInput" value="{{ $wabaPool->dedicated_price ?? 0 }}">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="btnSavePrice">Save</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Toast Container -->
    <div class="toast-container position-fixed bottom-0 end-0 p-3">
        <div id="successToast" class="toast align-items-center text-bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body msg-box">
                    Action successful!
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>

        <div id="failedToast" class="toast align-items-center text-bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body msg-box">
                    Action failed!
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
const wabaPoolId = {{ $wabaPool->id }};

$(document).ready(function() {
    loadTokenStatus();
    
    // Copy to clipboard
    window.copyToClipboard = function(selector) {
        var input = $(selector);
        input.select();
        document.execCommand('copy');
        $('#successToast .msg-box').text('Copied to clipboard!');
        $('#successToast').toast('show');
    };
    
    // Toggle password visibility
    window.togglePassword = function(selector) {
        var input = $(selector);
        input.attr('type', input.attr('type') === 'password' ? 'text' : 'password');
    };
    
    // ===== RESET COOLDOWN HANDLER =====
    $('#btnResetCooldown').on('click', function() {
        if (!confirm('Reset cooldown untuk pool ini? Pool akan bisa digunakan kembali segera.')) {
            return;
        }
        
        var btn = $(this);
        btn.prop('disabled', true).html('<i class="ti ti-loader ti-spin me-1"></i> Resetting...');
        
        $.ajax({
            url: `/admin/waba-pools/${wabaPoolId}/reset-cooldown`,
            type: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            success: function(res) {
                if (res.meta && res.meta.status === 'success') {
                    $('#successToast .msg-box').text(res.meta.message || 'Cooldown berhasil direset!');
                    $('#successToast').toast('show');
                }
            },
            error: function(xhr) {
                $('#failedToast .msg-box').text(xhr.responseJSON?.meta?.message || 'Error resetting cooldown');
                $('#failedToast').toast('show');
            },
            complete: function() {
                btn.prop('disabled', false).html('<i class="ti ti-refresh-alert me-1"></i> Reset Cooldown');
            }
        });
    });
    
    // ===== GLOBAL WEBHOOK HANDLERS =====
    
    // Generate Global Token
    $('#btnGenerateGlobalToken').on('click', function() {
        var btn = $(this);
        btn.prop('disabled', true);
        
        $.ajax({
            url: `/admin/waba-pools/${wabaPoolId}/generate-token`,
            type: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            success: function(res) {
                if (res.meta && res.meta.status === 'success') {
                    $('#verifyTokenGlobal').val(res.data.verify_token);
                    $('#successToast .msg-box').text('Verify token generated!');
                    $('#successToast').toast('show');
                }
            },
            error: function(xhr) {
                $('#failedToast .msg-box').text(xhr.responseJSON?.meta?.message || 'Error generating token');
                $('#failedToast').toast('show');
            },
            complete: function() {
                btn.prop('disabled', false);
            }
        });
    });
    
    // Submit Global Webhook Form
    $('#form-global-webhook').on('submit', function(e) {
        e.preventDefault();
        
        var url = $('#webhookUrlGlobal').val();
        
        if (!url) {
            $('#failedToast .msg-box').text('Webhook URL wajib diisi');
            $('#failedToast').toast('show');
            return;
        }
        
        var btn = $('#btnUpdateWebhookMeta');
        btn.prop('disabled', true).html('<i class="ti ti-loader ti-spin me-1"></i> Updating...');
        
        $.ajax({
            url: `/admin/waba-pools/${wabaPoolId}/update-webhook`,
            type: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            data: {
                webhook_url_global: url
            },
            success: function(res) {
                if (res.meta && res.meta.status === 'success') {
                    $('#successToast .msg-box').text(res.meta.message || 'Webhook updated!');
                    $('#successToast').toast('show');
                } else {
                    // Partial success (saved to DB but Meta failed)
                    $('#failedToast .msg-box').text(res.data?.message || 'Webhook saved but Meta registration failed');
                    $('#failedToast').toast('show');
                }
            },
            error: function(xhr) {
                var msg = xhr.responseJSON?.meta?.message || xhr.responseJSON?.data?.message || 'Error updating webhook';
                $('#failedToast .msg-box').text(msg);
                $('#failedToast').toast('show');
            },
            complete: function() {
                btn.prop('disabled', false).html('<i class="ti ti-cloud-upload me-1"></i> Update Webhook ke Meta');
            }
        });
    });
    
    // Use Default URL
    $('#btnUseDefaultUrl').on('click', function() {
        $('#webhookUrlGlobal').val('{{ url("/api/meta/webhook") }}');
        $('#successToast .msg-box').text('Default URL applied');
        $('#successToast').toast('show');
    });
    

    
    
    // ===== QUOTA HANDLERS =====
    
    // Save Quota
    $('#btnSaveQuota').on('click', function() {
        var btn = $(this);
        var limitMax = $('#dailyLimit').val();
        var messagingTier = $('#messagingTier').val();
        
        if (!limitMax || limitMax < 1) {
            $('#failedToast .msg-box').text('Daily Limit harus lebih dari 0');
            $('#failedToast').toast('show');
            return;
        }
        
        btn.prop('disabled', true).html('<i class="ti ti-loader ti-spin me-1"></i> Saving...');
        
        $.ajax({
            url: `/admin/waba-pools/${wabaPoolId}/update-limit`,
            type: 'PUT',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            data: {
                limit_max: limitMax,
                messaging_tier: messagingTier
            },
            success: function(res) {
                if (res.meta && res.meta.status === 'success') {
                    $('#successToast .msg-box').text('Quota updated successfully!');
                    $('#successToast').toast('show');
                } else {
                    $('#failedToast .msg-box').text(res.meta?.message || 'Failed to update quota');
                    $('#failedToast').toast('show');
                }
            },
            error: function(xhr) {
                $('#failedToast .msg-box').text(xhr.responseJSON?.meta?.message || 'Error updating quota');
                $('#failedToast').toast('show');
            },
            complete: function() {
                btn.prop('disabled', false).html('<i class="ti ti-device-floppy me-1"></i> Update Quota');
            }
        });
    });
    
    // Reset Daily Usage
    $('#btnResetQuota').on('click', function() {
        if (!confirm('Reset pemakaian harian ke 0? Aksi ini tidak dapat dibatalkan.')) return;
        
        var btn = $(this);
        btn.prop('disabled', true).html('<i class="ti ti-loader ti-spin me-1"></i> Resetting...');
        
        $.ajax({
            url: `/admin/waba-pools/${wabaPoolId}/update-usage`,
            type: 'PUT',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            data: {
                used_today: 0,
                error_count: 0,
                cooldown_until: null
            },
            success: function(res) {
                if (res.meta && res.meta.status === 'success') {
                    $('#successToast .msg-box').text('Daily usage reset to 0!');
                    $('#successToast').toast('show');
                    // Reload page to reflect changes
                    setTimeout(() => location.reload(), 1000);
                } else {
                    $('#failedToast .msg-box').text(res.meta?.message || 'Failed to reset usage');
                    $('#failedToast').toast('show');
                }
            },
            error: function(xhr) {
                $('#failedToast .msg-box').text(xhr.responseJSON?.meta?.message || 'Error resetting usage');
                $('#failedToast').toast('show');
            },
            complete: function() {
                btn.prop('disabled', false).html('<i class="ti ti-refresh me-1"></i> Reset Daily Usage');
            }
        });
    });
    
    // ===== TOKEN & CREDENTIALS HANDLERS =====
    
    // Save Credentials
    $('#btnSaveCredentials').on('click', function() {
        var btn = $(this);
        var appId = $('#appId').val();
        var appSecret = $('#appSecret').val();
        
        if (!appId) {
            $('#failedToast .msg-box').text('App ID wajib diisi');
            $('#failedToast').toast('show');
            return;
        }
        
        btn.prop('disabled', true).html('<i class="ti ti-loader ti-spin me-1"></i> Saving...');
        
        $.ajax({
            url: `/admin/waba-pools/${wabaPoolId}`,
            type: 'PUT',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            data: {
                app_id: appId,
                app_secret: appSecret !== '••••••••' ? appSecret : undefined
            },
            success: function(res) {
                if (res.meta && res.meta.status === 'success') {
                    $('#successToast .msg-box').text('Credentials berhasil disimpan!');
                    $('#successToast').toast('show');
                } else {
                    $('#failedToast .msg-box').text(res.meta?.message || 'Gagal menyimpan credentials');
                    $('#failedToast').toast('show');
                }
            },
            error: function(xhr) {
                $('#failedToast .msg-box').text(xhr.responseJSON?.meta?.message || 'Error menyimpan credentials');
                $('#failedToast').toast('show');
            },
            complete: function() {
                btn.prop('disabled', false).html('<i class="ti ti-device-floppy me-1"></i> Save Credentials');
            }
        });
    });
    
    // Save New Token (just save)
    $('#btnSaveNewToken').on('click', function() {
        var btn = $(this);
        var token = $('#newMetaToken').val().trim();
        
        if (!token) {
            $('#failedToast .msg-box').text('Token wajib diisi');
            $('#failedToast').toast('show');
            return;
        }
        
        btn.prop('disabled', true).html('<i class="ti ti-loader ti-spin me-1"></i> Menyimpan...');
        
        $.ajax({
            url: `/admin/waba-pools/${wabaPoolId}/save-token`,
            type: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            data: { meta_token: token },
            success: function(res) {
                if (res.meta && res.meta.status === 'success') {
                    $('#successToast .msg-box').text('Token berhasil disimpan!');
                    $('#successToast').toast('show');
                    $('#newMetaToken').val('');
                    setTimeout(() => location.reload(), 1000);
                } else {
                    $('#failedToast .msg-box').text(res.meta?.message || 'Gagal menyimpan token');
                    $('#failedToast').toast('show');
                }
            },
            error: function(xhr) {
                $('#failedToast .msg-box').text(xhr.responseJSON?.meta?.message || 'Error menyimpan token');
                $('#failedToast').toast('show');
            },
            complete: function() {
                btn.prop('disabled', false).html('<i class="ti ti-device-floppy me-1"></i> Simpan Token');
            }
        });
    });
    
    // Save and Exchange Token
    $('#btnSaveAndExchange').on('click', function() {
        var btn = $(this);
        var token = $('#newMetaToken').val().trim();
        
        if (!token) {
            $('#failedToast .msg-box').text('Token wajib diisi');
            $('#failedToast').toast('show');
            return;
        }
        
        btn.prop('disabled', true).html('<i class="ti ti-loader ti-spin me-1"></i> Processing...');
        
        // First save the token
        $.ajax({
            url: `/admin/waba-pools/${wabaPoolId}/save-token`,
            type: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            data: { meta_token: token },
            success: function(res) {
                if (res.meta && res.meta.status === 'success') {
                    // Now exchange it
                    exchangeTokenAjax(btn, token);
                } else {
                    $('#failedToast .msg-box').text(res.meta?.message || 'Gagal menyimpan token');
                    $('#failedToast').toast('show');
                    btn.prop('disabled', false).html('<i class="ti ti-transform me-1"></i> Simpan & Exchange');
                }
            },
            error: function(xhr) {
                $('#failedToast .msg-box').text(xhr.responseJSON?.meta?.message || 'Error menyimpan token');
                $('#failedToast').toast('show');
                btn.prop('disabled', false).html('<i class="ti ti-transform me-1"></i> Simpan & Exchange');
            }
        });
    });
    
    // Exchange current token to long-lived
    $('#btnExchangeToLongLived').on('click', function() {
        var btn = $(this);
        btn.prop('disabled', true).html('<i class="ti ti-loader ti-spin me-1"></i> Exchanging...');
        exchangeTokenAjax(btn);
    });
    
    // Helper function to exchange token
    function exchangeTokenAjax(btn, tokenToUse) {
        $.ajax({
            url: `/admin/waba-pools/${wabaPoolId}/exchange-token`,
            type: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            data: tokenToUse ? { token: tokenToUse } : {},
            success: function(res) {
                if (res.meta && res.meta.status === 'success') {
                    var msg = res.meta.message || 'Token berhasil digenerate menjadi Long-Lived';
                    if (res.data.expires_at) {
                        msg += ` (Expires: ${res.data.expires_at})`;
                    }
                    $('#successToast .msg-box').text(msg);
                    $('#successToast').toast('show');
                    $('#newMetaToken').val('');
                    setTimeout(() => location.reload(), 1500);
                } else {
                    $('#failedToast .msg-box').text(res.meta?.message || 'Gagal exchange token');
                    $('#failedToast').toast('show');
                }
            },
            error: function(xhr) {
                var msg = xhr.responseJSON?.meta?.message || 'Gagal menukar token, silakan periksa App ID, App Secret, atau token saat ini';
                $('#failedToast .msg-box').text(msg);
                $('#failedToast').toast('show');
            },
            complete: function() {
                if (btn.attr('id') === 'btnExchangeToLongLived') {
                    btn.prop('disabled', false).html('<i class="ti ti-transform me-1"></i> Exchange to Long-Lived Token');
                } else {
                    btn.prop('disabled', false).html('<i class="ti ti-transform me-1"></i> Simpan & Exchange');
                }
            }
        });
    }
    
    // Validate Token
    $('#btnValidateToken').on('click', function() {
        var btn = $(this);
        btn.prop('disabled', true).html('<i class="ti ti-loader ti-spin me-1"></i> Validating...');
        
        $.ajax({
            url: `/admin/waba-pools/${wabaPoolId}/validate-token`,
            type: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            success: function(res) {
                if (res.meta && res.meta.status === 'success' && res.data.is_valid) {
                    var msg = 'Token valid!';
                    if (res.data.expires_at && res.data.expires_at !== 'Never') {
                        msg += ` Expires: ${res.data.expires_at}`;
                    }
                    $('#successToast .msg-box').text(msg);
                    $('#successToast').toast('show');
                } else {
                    $('#failedToast .msg-box').text('Token tidak valid atau expired');
                    $('#failedToast').toast('show');
                }
            },
            error: function(xhr) {
                $('#failedToast .msg-box').text(xhr.responseJSON?.meta?.message || 'Error validating token');
                $('#failedToast').toast('show');
            },
            complete: function() {
                btn.prop('disabled', false).html('<i class="ti ti-shield-check me-1"></i> Validate Token');
            }
        });
    });
    
    // Revoke Token (clear from DB)
    $('#btnRevokeToken').on('click', function() {
        if (!confirm('Hapus token dari database? Token tidak akan bisa digunakan lagi.')) return;
        
        var btn = $(this);
        btn.prop('disabled', true).html('<i class="ti ti-loader ti-spin me-1"></i> Revoking...');
        
        $.ajax({
            url: `/admin/waba-pools/${wabaPoolId}`,
            type: 'PUT',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            data: { 
                meta_token: null,
                token_generated_at: null,
                token_expires_at: null
            },
            success: function(res) {
                if (res.meta && res.meta.status === 'success') {
                    $('#successToast .msg-box').text('Token berhasil dihapus');
                    $('#successToast').toast('show');
                    setTimeout(() => location.reload(), 1000);
                } else {
                    $('#failedToast .msg-box').text(res.meta?.message || 'Gagal menghapus token');
                    $('#failedToast').toast('show');
                }
            },
            error: function(xhr) {
                $('#failedToast .msg-box').text(xhr.responseJSON?.meta?.message || 'Error revoking token');
                $('#failedToast').toast('show');
            },
            complete: function() {
                btn.prop('disabled', false).html('<i class="ti ti-trash me-1"></i> Revoke Token');
            }
        });
    });
    
    // Save Price
    $('#btnSavePrice').on('click', function() {
        var btn = $(this);
        var price = $('#editPriceInput').val();
        
        btn.prop('disabled', true).html('<i class="ti ti-loader ti-spin me-1"></i> Saving...');
        
        $.ajax({
            url: `/admin/waba-pools/${wabaPoolId}`,
            type: 'PUT',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            data: { dedicated_price: price },
            success: function(res) {
                if (res.meta && res.meta.status === 'success') {
                    $('#priceDisplay').text('Rp ' + parseFloat(price).toLocaleString('id-ID'));
                    $('#successToast .msg-box').text('Price updated successfully!');
                    $('#successToast').toast('show');
                    $('#editPriceModal').modal('hide');
                } else {
                     $('#failedToast .msg-box').text(res.meta.message || 'Failed to update price');
                     $('#failedToast').toast('show');
                }
            },
            error: function(xhr) {
                $('#failedToast .msg-box').text(xhr.responseJSON?.message || 'Error updating price');
                $('#failedToast').toast('show');
            },
            complete: function() {
                btn.prop('disabled', false).text('Save');
            }
        });
    });

    // Load Token Status
    function loadTokenStatus() {
        $.ajax({
            url: `/api/admin/waba-pool/${wabaPoolId}/token-status`,
            type: 'GET',
            success: function(res) {
                var html = '';
                if (res.has_token) {
                    var statusClass = res.is_expiring ? 'warning' : 'success';
                    html = `
                        <div class="d-flex align-items-center mb-3">
                            <span class="badge bg-${statusClass} me-2">${res.is_expiring ? 'Expiring Soon' : 'Valid'}</span>
                            ${res.needs_refresh ? '<span class="badge bg-warning">Needs Refresh</span>' : ''}
                        </div>
                        <table class="table table-sm table-borderless">
                            <tr><td>Generated</td><td>${res.generated_at || '-'}</td></tr>
                            <tr><td>Expires</td><td>${res.expires_at || 'Never (Permanent)'}</td></tr>
                            <tr><td>App Credentials</td><td>${res.has_app_credentials ? '<span class="text-success">✓ Configured</span>' : '<span class="text-danger">✗ Not Set</span>'}</td></tr>
                        </table>
                    `;
                } else {
                    html = `
                        <div class="text-center py-3">
                            <i class="ti ti-key-off fs-1 text-muted"></i>
                            <p class="text-muted mt-2">No token configured</p>
                            <p class="small text-muted">Generate a token using the form on the left</p>
                        </div>
                    `;
                }
                $('#tokenStatusContainer').html(html);
            }
        });
    }

    // Check Subscription Status
    function checkSubscriptionStatus() {
        $('#subscriptionStatusContent').html(`
            <div class="text-center py-3">
                <div class="spinner-border spinner-border-sm text-info" role="status"></div>
                <span class="ms-2">Checking subscription...</span>
            </div>
        `);

        $.ajax({
            url: `/admin/waba-pools/${wabaPoolId}/audit-subscription`,
            type: 'GET',
            success: function(res) {
                if (res.meta.code === 200 && res.data) {
                    var data = res.data;
                    var statusClass = data.is_valid ? 'success' : 'warning';
                    var statusText = data.is_valid ? 'Valid' : data.status.replace(/_/g, ' ');
                    var fieldsHtml = data.subscribed_fields.length > 0 
                        ? data.subscribed_fields.map(f => `<span class="badge bg-primary me-1">${f}</span>`).join('') 
                        : '<span class="text-muted">No fields subscribed</span>';

                    var html = `
                        <div class="mb-2">
                            <strong>Status:</strong> 
                            <span class="badge bg-${statusClass}">${statusText}</span>
                        </div>
                        <div class="mb-2">
                            <strong>WABA Object:</strong> 
                            ${data.has_waba_object ? '<span class="text-success">✓</span>' : '<span class="text-danger">✗</span>'}
                        </div>
                        <div class="mb-2">
                            <strong>Messages Field:</strong> 
                            ${data.has_messages_field ? '<span class="text-success">✓ Active</span>' : '<span class="text-danger">✗ Not Active</span>'}
                        </div>
                        <div>
                            <strong>Subscribed Fields:</strong><br>
                            ${fieldsHtml}
                        </div>
                    `;
                    $('#subscriptionStatusContent').html(html);
                } else {
                    $('#subscriptionStatusContent').html(`
                        <div class="alert alert-danger mb-0">
                            <i class="ti ti-alert-triangle me-1"></i> ${res.meta.message || 'Failed to check'}
                        </div>
                    `);
                }
            },
            error: function(xhr) {
                $('#subscriptionStatusContent').html(`
                    <div class="alert alert-danger mb-0">
                        <i class="ti ti-alert-triangle me-1"></i> Error: ${xhr.responseJSON?.meta?.message || 'Request failed'}
                    </div>
                `);
            }
        });
    }

    // Repair Subscription
    $('#btnRepairSubscription').click(function() {
        var btn = $(this);
        btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span> Repairing...');

        $.ajax({
            url: `/admin/waba-pools/${wabaPoolId}/repair-subscription`,
            type: 'POST',
            data: { _token: '{{ csrf_token() }}' },
            success: function(res) {
                if (res.meta.code === 200) {
                    $('#successToast .msg-box').text(res.meta.message || 'Subscription repaired!');
                    $('#successToast').toast('show');
                    // Refresh status
                    checkSubscriptionStatus();
                } else {
                    $('#failedToast .msg-box').text(res.meta.message || 'Repair failed');
                    $('#failedToast').toast('show');
                }
            },
            error: function(xhr) {
                $('#failedToast .msg-box').text(xhr.responseJSON?.meta?.message || 'Error repairing subscription');
                $('#failedToast').toast('show');
            },
            complete: function() {
                btn.prop('disabled', false).html('<i class="ti ti-tool me-1"></i> Repair Subscription');
            }
        });
    });

    // Check Subscription Button
    $('#btnCheckSubscription').click(function() {
        checkSubscriptionStatus();
    });

    // Load subscription status on page load
    checkSubscriptionStatus();

    // ==================== MANAGE SUBSCRIPTION TAB ====================
    
    // Define available subscription fields
    const subscriptionFields = [
        { name: 'messages', label: 'Messages', description: 'Inbound/outbound chat messages', valid: true } ];

    // Load subscription fields into checkboxes
    function loadSubscriptionFields() {
        $('#subscriptionFieldsContainer').html(`
            <div class="text-center py-4">
                <div class="spinner-border spinner-border-sm text-info" role="status"></div>
                <span class="ms-2">Loading subscription status...</span>
            </div>
        `);

        $.ajax({
            url: `/admin/waba-pools/${wabaPoolId}/audit-subscription`,
            type: 'GET',
            success: function(res) {
                if (res.meta.code === 200 && res.data) {
                    var data = res.data;
                    var subscribedFields = data.subscribed_fields || [];
                    
                    var html = '<div class="list-group">';
                    subscriptionFields.forEach(function(field) {
                        var isChecked = subscribedFields.includes(field.name);
                        var disabledAttr = !field.valid ? 'disabled' : '';
                        var validBadge = field.valid 
                            ? '<span class="badge bg-success ms-2">Valid for WhatsApp</span>'
                            : '<span class="badge bg-secondary ms-2">Not for WhatsApp</span>';
                        
                        html += `
                            <label class="list-group-item d-flex gap-3 ${!field.valid ? 'bg-light' : ''}">
                                <input class="form-check-input flex-shrink-0" type="checkbox" 
                                    name="subscription_field" value="${field.name}" 
                                    ${isChecked ? 'checked' : ''} ${disabledAttr}>
                                <span class="flex-grow-1">
                                    <strong>${field.label}</strong> ${validBadge}
                                    <small class="d-block text-muted">${field.description}</small>
                                </span>
                            </label>
                        `;
                    });
                    html += '</div>';
                    
                    $('#subscriptionFieldsContainer').html(html);
                    
                    // Update current status
                    var statusClass = data.is_valid ? 'success' : 'warning';
                    var statusText = data.is_valid ? 'Valid' : data.status.replace(/_/g, ' ');
                    $('#subscriptionCurrentStatus').html(`
                        <div class="mb-2">
                            <strong>Status:</strong> 
                            <span class="badge bg-${statusClass}">${statusText}</span>
                        </div>
                        <div class="mb-2">
                            <strong>WABA Object:</strong> 
                            ${data.has_waba_object ? '<span class="text-success">✓</span>' : '<span class="text-danger">✗</span>'}
                        </div>
                        <div>
                            <strong>Messages:</strong> 
                            ${data.has_messages_field ? '<span class="text-success">✓ Active</span>' : '<span class="text-danger">✗ Inactive</span>'}
                        </div>
                    `);
                } else {
                    $('#subscriptionFieldsContainer').html(`
                        <div class="alert alert-danger mb-0">
                            <i class="ti ti-alert-triangle me-1"></i> ${res.meta.message || 'Failed to load'}
                        </div>
                    `);
                }
            },
            error: function(xhr) {
                $('#subscriptionFieldsContainer').html(`
                    <div class="alert alert-danger mb-0">
                        <i class="ti ti-alert-triangle me-1"></i> Error: ${xhr.responseJSON?.meta?.message || 'Request failed'}
                    </div>
                `);
            }
        });
    }

    // Update Subscription button
    $('#btnUpdateSubscription').click(function() {
        var btn = $(this);
        btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span> Updating...');
        
        // For WhatsApp, only 'messages' is valid - use repair endpoint
        $.ajax({
            url: `/admin/waba-pools/${wabaPoolId}/repair-subscription`,
            type: 'POST',
            data: { _token: '{{ csrf_token() }}' },
            success: function(res) {
                var resultHtml = '';
                if (res.meta.code === 200) {
                    var statusClass = res.data.subscription_status === 'valid' ? 'success' : 
                                     res.data.subscription_status === 'repaired' ? 'info' : 'warning';
                    resultHtml = `
                        <div class="alert alert-${statusClass}">
                            <strong><i class="ti ti-check me-1"></i> ${res.meta.message}</strong>
                            <ul class="mb-0 mt-2 small">
                                <li>Status: <strong>${res.data.subscription_status}</strong></li>
                                <li>Messages Enabled: ${res.data.messages_enabled ? '✓ Yes' : '✗ No'}</li>
                                <li>Repair Attempted: ${res.data.repair_attempted ? 'Yes' : 'No'}</li>
                            </ul>
                        </div>
                    `;
                    // Refresh fields
                    loadSubscriptionFields();
                    checkSubscriptionStatus();
                } else {
                    resultHtml = `
                        <div class="alert alert-danger">
                            <strong><i class="ti ti-x me-1"></i> Update Failed</strong>
                            <p class="mb-0 small">${res.meta.message}</p>
                        </div>
                    `;
                }
                $('#subscriptionUpdateResult').html(resultHtml).show();
            },
            error: function(xhr) {
                $('#subscriptionUpdateResult').html(`
                    <div class="alert alert-danger">
                        <strong><i class="ti ti-x me-1"></i> Error</strong>
                        <p class="mb-0 small">${xhr.responseJSON?.meta?.message || 'Request failed'}</p>
                    </div>
                `).show();
            },
            complete: function() {
                btn.prop('disabled', false).html('<i class="ti ti-cloud-upload me-1"></i> Update Subscription');
            }
        });
    });

    // Refresh button
    $('#btnRefreshSubscription').click(function() {
        loadSubscriptionFields();
    });

    // Check Webhook Status (from Meta API)
    $('#btnCheckWebhookStatus').click(function() {
        var btn = $(this);
        var originalHtml = btn.html();
        btn.prop('disabled', true).html('<i class="ti ti-loader ti-spin me-1"></i> Checking...');
        
        $('#webhookStatusContainer').html(`
            <div class="text-center py-3">
                <div class="spinner-border spinner-border-sm text-info" role="status"></div>
                <span class="ms-2">Checking webhook status...</span>
            </div>
        `);

        $.ajax({
            url: `/admin/waba-pools/${wabaPoolId}/check-webhook-status`,
            type: 'GET',
            success: function(res) {
                if (res.meta.code === 200) {
                    var data = res.data;
                    var subscribedApps = data.subscribed_apps || [];
                    var dbUpdatedMsg = data.db_status_updated ? '<span class="badge bg-success ms-2">DB Updated</span>' : '';
                    
                    var html = `
                        <div class="alert alert-success mb-2">
                            <i class="ti ti-check me-1"></i> ${res.meta.message} ${dbUpdatedMsg}
                        </div>
                        <ul class="list-group list-group-flush small">
                            <li class="list-group-item d-flex justify-content-between">
                                <span>Phone Number ID</span>
                                <span class="fw-bold text-muted" style="font-family: monospace;">${data.phone_number_id || '-'}</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between">
                                <span>Display Phone Number</span>
                                <span class="fw-bold">${data.display_phone_number || '-'}</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between">
                                <span>Verified Name</span>
                                <span class="fw-bold">${data.verified_name || '-'}</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between">
                                <span>Status</span>
                                <span class="badge ${data.status === 'CONNECTED' || data.status === 'REGISTERED' ? 'bg-success' : 'bg-warning'}">${data.status || '-'}</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between">
                                <span>Code Verification Status</span>
                                <span class="badge ${data.code_verification_status === 'VERIFIED' ? 'bg-success' : data.code_verification_status === 'UNVERIFIED' ? 'bg-danger' : 'bg-warning'}">${data.code_verification_status || '-'}</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between">
                                <span>Quality Rating</span>
                                <div>
                                    ${data.quality_rating === 'GREEN' ? '<span class="badge bg-success">GREEN</span>' : 
                                      data.quality_rating === 'YELLOW' ? '<span class="badge bg-warning text-dark">YELLOW</span>' :
                                      data.quality_rating === 'RED' ? '<span class="badge bg-danger">RED</span>' : 
                                      '<span class="badge bg-secondary">' + (data.quality_rating || '-') + '</span>'}
                                </div>
                            </li>
                            <li class="list-group-item d-flex justify-content-between">
                                <span>Platform Type</span>
                                <span class="badge bg-info">${data.platform_type || '-'}</span>
                            </li>
                            ${data.throughput ? `<li class="list-group-item d-flex justify-content-between">
                                <span>Throughput</span>
                                <span class="fw-bold">${data.throughput}</span>
                            </li>` : ''}
                            <li class="list-group-item d-flex justify-content-between">
                                <span>Name Status</span>
                                <span class="badge bg-secondary">${data.name_status || '-'}</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between">
                                <span>Is Subscribed</span>
                                <span class="badge ${data.is_subscribed ? 'bg-success' : 'bg-danger'}">${data.is_subscribed ? 'Yes' : 'No'}</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between">
                                <span>Webhook Status</span>
                                <span class="badge ${data.new_webhook_status === 'active' ? 'bg-success' : 'bg-danger'}">${data.new_webhook_status || '-'}</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between">
                                <span>Token Type</span>
                                <span class="badge bg-primary">${data.using_token_type || '-'}</span>
                            </li>
                        </ul>
                    `;
                    
                    if (subscribedApps && subscribedApps.length > 0) {
                        html += '<div class="mt-3"><strong>Subscribed Apps:</strong><div class="list-group mt-1">';
                        subscribedApps.forEach(function(app) {
                            var wabaData = app.whatsapp_business_api_data || {};
                            var fields = app.fields || [];
                            var fieldNames = fields.map(f => (typeof f === 'string' ? f : (f.name || f)));
                            var appId = wabaData.id || app.id || (app.link ? app.link.match(/app_id=(\d+)/)?.[1] : null) || '-';
                            var appName = wabaData.name || app.name || 'Unknown App';
                            var appCategory = wabaData.category || app.category || '';
                            var appNamespace = wabaData.namespace || app.namespace || '';
                            var appLink = wabaData.link || app.link || '';
                            
                            html += `
                                <div class="list-group-item">
                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <div>
                                            <div class="fw-bold">${appName}</div>
                                            ${appCategory ? `<small class="text-muted">${appCategory}</small>` : ''}
                                        </div>
                                        <div class="text-end">
                                            <small class="text-muted d-block">ID: ${appId}</small>
                                            ${appNamespace ? `<small class="text-muted d-block">NS: ${appNamespace}</small>` : ''}
                                        </div>
                                    </div>
                                    ${appLink ? `<div class="mb-2"><a href="${appLink}" target="_blank" class="text-decoration-none"><small><i class="ti ti-external-link me-1"></i>${appLink}</small></a></div>` : ''}
                                    ${fieldNames.length > 0 ? `<div class="d-flex flex-wrap gap-1">
                                        ${fieldNames.map(f => `<span class="badge bg-secondary">${f}</span>`).join('')}
                                    </div>` : ''}
                                    ${app.override_callback_uri ? `<div class="mt-2"><small class="text-muted">Callback: <code>${app.override_callback_uri}</code></small></div>` : ''}
                                </div>
                            `;
                        });
                        html += '</div></div>';
                    } else {
                        html += '<div class="alert alert-warning mt-2 mb-0">No subscribed apps found for this WABA.</div>';
                    }
                    
                    $('#webhookStatusContainer').html(html);
                    
                    // Also refresh subscription status card if valid
                    checkSubscriptionStatus();
                    
                } else {
                    $('#webhookStatusContainer').html(`
                        <div class="alert alert-danger mb-0">
                            <i class="ti ti-alert-triangle me-1"></i> ${res.meta.message || 'Failed to check status'}
                        </div>
                    `);
                }
            },
            error: function(xhr) {
                 $('#webhookStatusContainer').html(`
                    <div class="alert alert-danger mb-0">
                        <i class="ti ti-alert-triangle me-1"></i> Error: ${xhr.responseJSON?.meta?.message || 'Request failed'}
                    </div>
                `);
            },
            complete: function() {
                btn.prop('disabled', false).html(originalHtml);
            }
        });
    });

    // Load on tab shown
    $('button[data-bs-target="#manage-subscription"]').on('shown.bs.tab', function() {
        loadSubscriptionFields();
    });
});

</script>
@endpush