@extends('app-admin.layout')
@section('title', $module->name.' — Wavora Admin')
@section('page-title', $module->name)
@section('page-sub', 'Module: '.$module->code)

@php
use App\Models\Tenant;
use App\Models\WaDevice;
use App\Models\Plan;
use App\Models\Message;
use App\Models\Webhook;
use App\Models\ApiKey;
use App\Models\Subscription;
use App\Models\Invoice;
use App\Models\GatewayNode;
use App\Models\AuditLog;
use App\Models\User;

$code = $module->code;
@endphp

@section('topbar-actions')
    @if($code === 'tenants')
        <button class="btn btn-apple btn-sm" onclick="Swal.fire({title:'Add Tenant',text:'Tenant registration via public signup. Direct admin creation coming soon.',icon:'info',confirmButtonColor:\'#bfff5a\'})">
            <span class="ms">add</span> Add Tenant
        </button>
    @elseif($code === 'plans')
        @if(auth()->user()->canDoAction('plans', 'edit'))
            <button class="btn btn-apple btn-sm" onclick="showCreatePlanModal()">
                <span class="ms">add</span> New Plan
            </button>
        @endif
    @elseif($code === 'devices')
        <button class="btn btn-apple btn-sm" onclick="showAddDeviceModal()">
            <span class="ms">add</span> Add Device
        </button>
    @endif
@endsection

@section('content')

{{-- ─── TENANTS ─── --}}
@if($code === 'tenants')
@php $tenants = Tenant::withCount(['waDevices','members'])->latest()->paginate(20); @endphp
<div class="card">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px">
        <div class="card-title" style="margin-bottom:0">All Tenants <span class="badge badge-blue">{{ $tenants->total() }}</span></div>
    </div>
    <div class="table-wrap">
        <table>
            <thead><tr>
                <th>Tenant</th><th>Email</th><th>Devices</th><th>Members</th><th>Status</th><th>Joined</th>
            </tr></thead>
            <tbody>
            @forelse($tenants as $t)
            <tr>
                <td>
                    <div style="display:flex;align-items:center;gap:10px">
                        <div style="width:30px;height:30px;border-radius:8px;background:var(--apple-dim);color:#5a8a00;display:grid;place-items:center;font-weight:700;font-size:12px;flex-shrink:0">
                            {{ strtoupper(substr($t->name,0,1)) }}
                        </div>
                        <div>
                            <div style="font-weight:600;font-size:13px">{{ $t->name }}</div>
                            <div class="td-mono">{{ $t->slug ?? $t->id }}</div>
                        </div>
                    </div>
                </td>
                <td class="td-mono">{{ $t->email ?? '—' }}</td>
                <td><span class="badge badge-gray">{{ $t->wa_devices_count }}</span></td>
                <td><span class="badge badge-gray">{{ $t->members_count }}</span></td>
                <td>
                    @php $s = $t->status ?? 'active'; @endphp
                    <span class="badge {{ $s==='active'?'badge-green':($s==='suspended'?'badge-red':'badge-yellow') }}">{{ $s }}</span>
                </td>
                <td style="color:var(--muted);font-size:12px">{{ $t->created_at?->format('d M Y') }}</td>
            </tr>
            @empty
            <tr><td colspan="6"><div class="empty"><span class="ms">corporate_fare</span><p>No tenants yet</p></div></td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
    @if($tenants->hasPages())
    <div style="padding:12px 0 0;display:flex;gap:8px;flex-wrap:wrap">{{ $tenants->links() }}</div>
    @endif
</div>

{{-- ─── USERS ─── --}}
@elseif($code === 'users')
@php $users = User::latest()->paginate(20); @endphp
<div class="card">
    <div class="card-title">Platform Users <span class="badge badge-blue">{{ $users->total() }}</span></div>
    <div class="table-wrap">
        <table>
            <thead><tr><th>Name</th><th>Email</th><th>Role</th><th>Joined</th></tr></thead>
            <tbody>
            @forelse($users as $u)
            <tr>
                <td>
                    <div style="display:flex;align-items:center;gap:8px">
                        <div style="width:28px;height:28px;border-radius:8px;background:var(--frost);display:grid;place-items:center;font-weight:700;font-size:12px;color:var(--muted);flex-shrink:0">
                            {{ strtoupper(substr($u->name,0,1)) }}
                        </div>
                        <span style="font-weight:500">{{ $u->name }}</span>
                    </div>
                </td>
                <td class="td-mono">{{ $u->email }}</td>
                <td><span class="badge badge-gray">{{ $u->group?->name ?? 'admin' }}</span></td>
                <td style="color:var(--muted);font-size:12px">{{ $u->created_at?->format('d M Y') }}</td>
            </tr>
            @empty
            <tr><td colspan="4"><div class="empty"><span class="ms">group</span><p>No users</p></div></td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- ─── DEVICES ─── --}}
@elseif($code === 'devices')
@php $devices = WaDevice::with('tenant', 'devicePlans.plan')->latest()->paginate(20); @endphp
<div class="card">
    <div class="card-title">WA Devices <span class="badge badge-blue">{{ $devices->total() }}</span></div>
    <div class="table-wrap">
        <table>
            <thead><tr><th>Label</th><th>Phone</th><th>Tenant</th><th>Plan</th><th>Status</th><th>Action</th></tr></thead>
            <tbody>
            @forelse($devices as $d)
            <tr>
                <td>
                    <div style="display:flex;align-items:center;gap:8px">
                        <div style="width:28px;height:28px;border-radius:8px;background:var(--frost);display:grid;place-items:center">
                            <span class="ms" style="font-size:15px;color:var(--muted)">smartphone</span>
                        </div>
                        <span style="font-weight:500">{{ $d->label ?? $d->name ?? 'Device' }}</span>
                    </div>
                </td>
                <td class="td-mono">{{ $d->phone_number ?? $d->phone ?? '—' }}</td>
                <td style="font-size:12px;color:var(--muted)">{{ $d->tenant?->name ?? '—' }}</td>
                <td>
                    @php 
                        $activePlan = $d->devicePlans->where('status', 'active')->first();
                        $planName = $activePlan ? $activePlan->plan->name : 'No Plan';
                    @endphp
                    <span class="badge badge-apple">{{ $planName }}</span>
                </td>
                <td>
                    @php $s = $d->status ?? 'unknown'; @endphp
                    <span class="badge {{ $s==='connected'?'badge-green':($s==='disconnected'?'badge-red':'badge-gray') }}">{{ $s }}</span>
                </td>
                <td>
                    <a href="{{ route('app-admin.wa-devices.index') }}" class="btn btn-outline btn-sm">
                        <span class="ms">settings</span> Manage
                    </a>
                </td>
            </tr>
            @empty
            <tr><td colspan="6"><div class="empty"><span class="ms">smartphone</span><p>No devices</p></div></td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- ─── MESSAGES ─── --}}
@elseif($code === 'messages')
@php $msgs = Message::with('tenant','waDevice')->latest()->paginate(30); @endphp
<div class="card">
    <div class="card-title">Messages <span class="badge badge-blue">{{ $msgs->total() }}</span></div>
    <div class="table-wrap">
        <table>
            <thead><tr><th>To</th><th>Type</th><th>Tenant</th><th>Device</th><th>Status</th><th>Time</th></tr></thead>
            <tbody>
            @forelse($msgs as $m)
            <tr>
                <td class="td-mono">{{ $m->to ?? $m->recipient ?? '—' }}</td>
                <td><span class="badge badge-gray">{{ $m->type ?? 'text' }}</span></td>
                <td style="font-size:12px;color:var(--muted)">{{ $m->tenant?->name ?? '—' }}</td>
                <td style="font-size:12px;color:var(--muted)">{{ $m->waDevice?->label ?? '—' }}</td>
                <td>
                    @php $s=$m->status??'queued'; $c=match($s){'sent'=>'badge-green','failed'=>'badge-red','queued'=>'badge-yellow','processing'=>'badge-blue',default=>'badge-gray'}; @endphp
                    <span class="badge {{ $c }}">{{ $s }}</span>
                </td>
                <td style="color:var(--muted);font-size:12px">{{ $m->created_at?->format('d M H:i') }}</td>
            </tr>
            @empty
            <tr><td colspan="6"><div class="empty"><span class="ms">forum</span><p>No messages</p></div></td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- ─── PLANS ─── --}}
@elseif($code === 'plans')
@php $plans = Plan::orderBy('id', 'asc')->get(); @endphp
<div style="display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));gap:16px;margin-bottom:20px">
    @forelse($plans as $p)
    <div class="card" style="border:{{ $p->code==='free'?'2px solid var(--apple)':'1px solid var(--border)' }}">
        <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px">
            <div>
                <div style="font-weight:700;font-size:16px">{{ $p->name }}</div>
                <div class="td-mono" style="font-size:11px;margin-top:2px">{{ $p->code }}</div>
            </div>
            <span class="badge {{ $p->is_active?'badge-green':'badge-gray' }}">{{ $p->is_active?'Active':'Inactive' }}</span>
        </div>
        <div style="font-size:24px;font-weight:800;color:var(--ink);margin-bottom:4px">
            @if($p->price_monthly == 0) Free
            @else Rp{{ number_format($p->price_monthly,0,',','.') }}<span style="font-size:13px;font-weight:400;color:var(--muted)">/mo</span>
            @endif
        </div>
        <div class="divider"></div>
        <div style="display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)">
            @if(isset($p->limits['messages_per_day']))
            <div style="display:flex;gap:6px;align-items:center"><span class="ms" style="font-size:14px;color:var(--apple)">check_circle</span> {{ number_format($p->limits['messages_per_day']) }} msg/day</div>
            @else
            <div style="display:flex;gap:6px;align-items:center"><span class="ms" style="font-size:14px;color:var(--apple)">check_circle</span> Unlimited msg/day</div>
            @endif
            @if(isset($p->limits['messages_per_month']))
            <div style="display:flex;gap:6px;align-items:center"><span class="ms" style="font-size:14px;color:var(--apple)">check_circle</span> {{ number_format($p->limits['messages_per_month']) }} msg/month</div>
            @else
            <div style="display:flex;gap:6px;align-items:center"><span class="ms" style="font-size:14px;color:var(--muted)">info</span> Unlimited msg/month</div>
            @endif
            <div style="display:flex;gap:6px;align-items:center"><span class="ms" style="font-size:14px;color:var(--apple)">check_circle</span> {{ number_format($p->limits['operators'] ?? 1) }} operator limit</div>
            <div style="display:flex;gap:6px;align-items:center">
                @if(in_array('mandatory_footer', $p->features ?? []))
                    <span class="ms" style="font-size:14px;color:var(--muted)">info</span> Branding required
                @else
                    <span class="ms" style="font-size:14px;color:var(--apple)">check_circle</span> No branding footer
                @endif
            </div>
        </div>
        @if(auth()->user()->canDoAction('plans', 'edit'))
        <div style="margin-top:16px;display:flex;justify-content:flex-end">
            <button class="btn btn-outline btn-sm" onclick="showEditPlanModal('{{ json_encode($p) }}')">
                <span class="ms" style="font-size:14px">edit</span> Edit Plan
            </button>
        </div>
        @endif
    </div>
    @empty
    <div class="card" style="grid-column:1/-1"><div class="empty"><span class="ms">layers</span><p>No plans yet. Seed the database.</p></div></div>
    @endforelse
</div>

<div class="card" style="margin-top:24px">
    <div class="card-title" style="margin-bottom:15px">Tabel Perbandingan Paket</div>
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th style="font-weight:700">Fitur & Batasan</th>
                    @foreach($plans as $p)
                        <th style="text-align:center;min-width:140px">
                            <div style="font-weight:700;font-size:14px;color:var(--ink)">{{ $p->name }}</div>
                            <div class="td-mono" style="font-size:10px;color:var(--muted)">{{ $p->code }}</div>
                        </th>
                    @endforeach
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="font-weight:500">Harga Bulanan</td>
                    @foreach($plans as $p)
                        <td style="text-align:center;font-weight:700;color:var(--ink)">
                            @if($p->price_monthly == 0)
                                <span class="badge badge-green">Free</span>
                            @else
                                Rp{{ number_format($p->price_monthly,0,',','.') }}
                            @endif
                        </td>
                    @endforeach
                </tr>
                <tr>
                    <td style="font-weight:500">Harga 3 Bulan</td>
                    @foreach($plans as $p)
                        <td style="text-align:center;font-weight:600;color:var(--ink)">
                            @if(($p->price_3_months ?? 0) == 0)
                                <span class="badge badge-green">Free</span>
                            @else
                                Rp{{ number_format($p->price_3_months,0,',','.') }}
                            @endif
                        </td>
                    @endforeach
                </tr>
                <tr>
                    <td style="font-weight:500">Harga 6 Bulan</td>
                    @foreach($plans as $p)
                        <td style="text-align:center;font-weight:600;color:var(--ink)">
                            @if(($p->price_6_months ?? 0) == 0)
                                <span class="badge badge-green">Free</span>
                            @else
                                Rp{{ number_format($p->price_6_months,0,',','.') }}
                            @endif
                        </td>
                    @endforeach
                </tr>
                <tr>
                    <td style="font-weight:500">Harga 12 Bulan</td>
                    @foreach($plans as $p)
                        <td style="text-align:center;font-weight:600;color:var(--ink)">
                            @if(($p->price_12_months ?? 0) == 0)
                                <span class="badge badge-green">Free</span>
                            @else
                                Rp{{ number_format($p->price_12_months,0,',','.') }}
                            @endif
                        </td>
                    @endforeach
                </tr>
                <tr>
                    <td style="font-weight:500">Pesan Per Hari</td>
                    @foreach($plans as $p)
                        <td style="text-align:center;font-weight:500">
                            @if(isset($p->limits['messages_per_day']) && $p->limits['messages_per_day'] !== '' && $p->limits['messages_per_day'] > 0)
                                {{ number_format($p->limits['messages_per_day']) }} / hari
                            @else
                                <span class="badge badge-blue">Unlimited</span>
                            @endif
                        </td>
                    @endforeach
                </tr>
                <tr>
                    <td style="font-weight:500">Pesan Per Bulan</td>
                    @foreach($plans as $p)
                        <td style="text-align:center;font-weight:500">
                            @if(isset($p->limits['messages_per_month']) && $p->limits['messages_per_month'] !== '' && $p->limits['messages_per_month'] > 0)
                                {{ number_format($p->limits['messages_per_month']) }} / bulan
                            @else
                                <span class="badge badge-blue">Unlimited</span>
                            @endif
                        </td>
                    @endforeach
                </tr>
                <tr>
                    <td style="font-weight:500">Batas Operator</td>
                    @foreach($plans as $p)
                        <td style="text-align:center;font-weight:600">{{ number_format($p->limits['operators'] ?? 1) }} Operator</td>
                    @endforeach
                </tr>
                <tr>
                    <td style="font-weight:500">Tanpa Branding Footer</td>
                    @foreach($plans as $p)
                        <td style="text-align:center">
                            @if(in_array('mandatory_footer', $p->features ?? []))
                                <span class="badge badge-red">Wajib Branding</span>
                            @else
                                <span class="badge badge-green">Tanpa Branding</span>
                            @endif
                        </td>
                    @endforeach
                </tr>
                <tr>
                    <td style="font-weight:500">Status Aktif</td>
                    @foreach($plans as $p)
                        <td style="text-align:center">
                            <span class="badge {{ $p->is_active?'badge-green':'badge-gray' }}">
                                {{ $p->is_active?'Aktif':'Nonaktif' }}
                            </span>
                        </td>
                    @endforeach
                </tr>
            </tbody>
        </table>
    </div>
</div>


@if(auth()->user()->canDoAction('plans', 'edit'))
<script>
function submitForm(action, data) {
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = action;
    
    const csrf = document.createElement('input');
    csrf.type = 'hidden';
    csrf.name = '_token';
    csrf.value = '{{ csrf_token() }}';
    form.appendChild(csrf);
    
    for (const key in data) {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = key;
        if (typeof data[key] === 'object') {
            input.value = JSON.stringify(data[key]);
        } else {
            input.value = data[key];
        }
        form.appendChild(input);
    }
    
    document.body.appendChild(form);
    form.submit();
}

function autoCalculateAllPrices(prefix = '') {
    const planPriceInput = document.getElementById(prefix ? prefix + '-plan-price' : 'plan-price');
    if (!planPriceInput) return;
    const monthlyPrice = parseFloat(planPriceInput.value) || 0;
    
    // 3 Months
    const disc3Input = document.getElementById(prefix ? prefix + '-plan-disc-3' : 'plan-disc-3');
    const price3Input = document.getElementById(prefix ? prefix + '-plan-price-3' : 'plan-price-3');
    if (disc3Input && price3Input) {
        const disc = parseFloat(disc3Input.value) || 0;
        price3Input.value = Math.round((monthlyPrice * 3) * (1 - disc / 100));
    }
    
    // 6 Months
    const disc6Input = document.getElementById(prefix ? prefix + '-plan-disc-6' : 'plan-disc-6');
    const price6Input = document.getElementById(prefix ? prefix + '-plan-price-6' : 'plan-price-6');
    if (disc6Input && price6Input) {
        const disc = parseFloat(disc6Input.value) || 0;
        price6Input.value = Math.round((monthlyPrice * 6) * (1 - disc / 100));
    }
    
    // 12 Months
    const disc12Input = document.getElementById(prefix ? prefix + '-plan-disc-12' : 'plan-disc-12');
    const price12Input = document.getElementById(prefix ? prefix + '-plan-price-12' : 'plan-price-12');
    if (disc12Input && price12Input) {
        const disc = parseFloat(disc12Input.value) || 0;
        price12Input.value = Math.round((monthlyPrice * 12) * (1 - disc / 100));
    }
}

function showCreatePlanModal() {
    Swal.fire({
        title: 'Create New Plan',
        html: `
            <div style="text-align:left">
                <div class="form-group">
                    <label class="form-label">Plan Name</label>
                    <input id="plan-name" class="form-input" placeholder="e.g. Enterprise">
                </div>
                <div class="form-group" style="margin-top:10px">
                    <label class="form-label">Plan Code (Unique)</label>
                    <input id="plan-code" class="form-input" placeholder="e.g. enterprise">
                </div>
                
                <div style="display:grid; grid-template-columns: 1fr; gap:10px; margin-top:10px">
                    <div class="form-group">
                        <label class="form-label">Price / Month (Rp)</label>
                        <input id="plan-price" type="number" class="form-input" placeholder="e.g. 100000" oninput="autoCalculateAllPrices('')">
                    </div>
                </div>
                
                <div style="display:grid; grid-template-columns: 1fr 1fr 1fr; gap:8px; margin-top:10px; padding: 10px; background: var(--frost); border-radius: 8px; border: 1px solid var(--border)">
                    <div class="form-group">
                        <label class="form-label" style="font-size:11px">Price 3 Months (Rp)</label>
                        <input id="plan-price-3" type="number" class="form-input" placeholder="e.g. 285000" style="padding: 6px 8px; font-size:12px">
                        <div style="display:flex; align-items:center; gap:2px; margin-top:4px">
                            <input id="plan-disc-3" type="number" value="5" class="form-input" style="width:36px; padding:2px 4px; font-size:10px; text-align:center; height:auto" oninput="autoCalculateAllPrices('')">
                            <span style="font-size:10px; color:var(--muted)">% Disc</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label" style="font-size:11px">Price 6 Months (Rp)</label>
                        <input id="plan-price-6" type="number" class="form-input" placeholder="e.g. 540000" style="padding: 6px 8px; font-size:12px">
                        <div style="display:flex; align-items:center; gap:2px; margin-top:4px">
                            <input id="plan-disc-6" type="number" value="10" class="form-input" style="width:36px; padding:2px 4px; font-size:10px; text-align:center; height:auto" oninput="autoCalculateAllPrices('')">
                            <span style="font-size:10px; color:var(--muted)">% Disc</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label" style="font-size:11px">Price 12 Months (Rp)</label>
                        <input id="plan-price-12" type="number" class="form-input" placeholder="e.g. 960000" style="padding: 6px 8px; font-size:12px">
                        <div style="display:flex; align-items:center; gap:2px; margin-top:4px">
                            <input id="plan-disc-12" type="number" value="20" class="form-input" style="width:36px; padding:2px 4px; font-size:10px; text-align:center; height:auto" oninput="autoCalculateAllPrices('')">
                            <span style="font-size:10px; color:var(--muted)">% Disc</span>
                        </div>
                    </div>
                    <div style="grid-column: 1/-1; text-align: right; margin-top: 5px">
                        <button type="button" class="btn btn-ghost btn-sm" onclick="autoCalculateAllPrices('')" style="font-size:11px; padding: 4px 8px">
                            <span class="ms" style="font-size:12px; vertical-align:middle; margin-right:4px">autorenew</span> Auto Generate
                        </button>
                    </div>
                </div>

                <div class="form-group" style="margin-top:10px">
                    <label class="form-label">Messages per Day Limit</label>
                    <input id="plan-msg-limit" type="number" class="form-input" placeholder="Leave empty for unlimited">
                </div>
                <div class="form-group" style="margin-top:10px">
                    <label class="form-label">Messages per Month Limit (Optional)</label>
                    <input id="plan-msg-month-limit" type="number" class="form-input" placeholder="Leave empty for unlimited">
                </div>
                <div class="form-group" style="margin-top:10px">
                    <label class="form-label">Operator Limit</label>
                    <input id="plan-op-limit" type="number" class="form-input" placeholder="10" value="10">
                </div>
                <div class="form-group" style="margin-top:10px">
                    <label class="form-label">Features</label>
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:12px;margin-top:5px">
                        <label><input type="checkbox" name="plan-features" value="text" checked> Text Messages</label>
                        <label><input type="checkbox" name="plan-features" value="image" checked> Image Messages</label>
                        <label><input type="checkbox" name="plan-features" value="file" checked> File Messages</label>
                        <label><input type="checkbox" name="plan-features" value="video"> Video Messages</label>
                        <label><input type="checkbox" name="plan-features" value="webhook" checked> Webhooks</label>
                        <label><input type="checkbox" name="plan-features" value="api_keys" checked> API Keys</label>
                        <label><input type="checkbox" name="plan-features" value="mandatory_footer"> Wajib Branding Footer</label>
                    </div>
                </div>
                <div class="form-group" style="margin-top:12px">
                    <label style="font-size:13px;display:flex;align-items:center;gap:6px">
                        <input id="plan-active" type="checkbox" checked> Active / Available for subscriptions
                    </label>
                </div>
            </div>
        `,
        focusConfirm: false,
        showCancelButton: true,
        confirmButtonText: 'Create Plan',
        confirmButtonColor: '#bfff5a',
        preConfirm: () => {
            const name = document.getElementById('plan-name').value;
            const code = document.getElementById('plan-code').value;
            const price = document.getElementById('plan-price').value;
            const price3 = document.getElementById('plan-price-3').value;
            const price6 = document.getElementById('plan-price-6').value;
            const price12 = document.getElementById('plan-price-12').value;
            const msgLimit = document.getElementById('plan-msg-limit').value;
            const msgMonthLimit = document.getElementById('plan-msg-month-limit').value;
            const opLimit = document.getElementById('plan-op-limit').value;
            const isActive = document.getElementById('plan-active').checked;
            
            const features = [];
            document.querySelectorAll('input[name="plan-features"]:checked').forEach(cb => {
                features.push(cb.value);
            });
 
            if (!name || !code || price === '') {
                Swal.showValidationMessage('Name, Code, and Price are required');
                return false;
            }
 
            return {
                name,
                code,
                price_monthly: parseFloat(price),
                price_3_months: parseFloat(price3) || 0,
                price_6_months: parseFloat(price6) || 0,
                price_12_months: parseFloat(price12) || 0,
                is_active: isActive ? 1 : 0,
                limits: {
                    ...(msgLimit !== '' ? { messages_per_day: parseInt(msgLimit) } : {}),
                    ...(msgMonthLimit !== '' ? { messages_per_month: parseInt(msgMonthLimit) } : {}),
                    devices: 1,
                    operators: parseInt(opLimit) || 1
                },
                features: features
            };
        }
    }).then((result) => {
        if (result.isConfirmed) {
            submitForm('{{ route("app-admin.plans.store") }}', result.value);
        }
    });
}
 
function showEditPlanModal(planJson) {
    const plan = JSON.parse(planJson);
    const hasFeature = (f) => plan.features && plan.features.includes(f);
    
    Swal.fire({
        title: 'Edit Plan: ' + plan.name,
        html: `
            <div style="text-align:left">
                <input type="hidden" id="edit-plan-id" value="${plan.id}">
                <div class="form-group">
                    <label class="form-label">Plan Name</label>
                    <input id="edit-plan-name" class="form-input" value="${plan.name}" placeholder="e.g. Enterprise">
                </div>
                <div class="form-group" style="margin-top:10px">
                    <label class="form-label">Plan Code (Unique)</label>
                    <input id="edit-plan-code" class="form-input" value="${plan.code}" placeholder="e.g. enterprise">
                </div>
                
                <div style="display:grid; grid-template-columns: 1fr; gap:10px; margin-top:10px">
                    <div class="form-group">
                        <label class="form-label">Price / Month (Rp)</label>
                        <input id="edit-plan-price" type="number" class="form-input" value="${plan.price_monthly}" placeholder="e.g. 500000" oninput="autoCalculateAllPrices('edit')">
                    </div>
                </div>
                
                <div style="display:grid; grid-template-columns: 1fr 1fr 1fr; gap:8px; margin-top:10px; padding: 10px; background: var(--frost); border-radius: 8px; border: 1px solid var(--border)">
                    <div class="form-group">
                        <label class="form-label" style="font-size:11px">Price 3 Months (Rp)</label>
                        <input id="edit-plan-price-3" type="number" class="form-input" value="${plan.price_3_months || 0}" placeholder="e.g. 285000" style="padding: 6px 8px; font-size:12px">
                        <div style="display:flex; align-items:center; gap:2px; margin-top:4px">
                            <input id="edit-plan-disc-3" type="number" value="5" class="form-input" style="width:36px; padding:2px 4px; font-size:10px; text-align:center; height:auto" oninput="autoCalculateAllPrices('edit')">
                            <span style="font-size:10px; color:var(--muted)">% Disc</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label" style="font-size:11px">Price 6 Months (Rp)</label>
                        <input id="edit-plan-price-6" type="number" class="form-input" value="${plan.price_6_months || 0}" placeholder="e.g. 540000" style="padding: 6px 8px; font-size:12px">
                        <div style="display:flex; align-items:center; gap:2px; margin-top:4px">
                            <input id="edit-plan-disc-6" type="number" value="10" class="form-input" style="width:36px; padding:2px 4px; font-size:10px; text-align:center; height:auto" oninput="autoCalculateAllPrices('edit')">
                            <span style="font-size:10px; color:var(--muted)">% Disc</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label" style="font-size:11px">Price 12 Months (Rp)</label>
                        <input id="edit-plan-price-12" type="number" class="form-input" value="${plan.price_12_months || 0}" placeholder="e.g. 960000" style="padding: 6px 8px; font-size:12px">
                        <div style="display:flex; align-items:center; gap:2px; margin-top:4px">
                            <input id="edit-plan-disc-12" type="number" value="20" class="form-input" style="width:36px; padding:2px 4px; font-size:10px; text-align:center; height:auto" oninput="autoCalculateAllPrices('edit')">
                            <span style="font-size:10px; color:var(--muted)">% Disc</span>
                        </div>
                    </div>
                    <div style="grid-column: 1/-1; text-align: right; margin-top: 5px">
                        <button type="button" class="btn btn-ghost btn-sm" onclick="autoCalculateAllPrices('edit')" style="font-size:11px; padding: 4px 8px">
                            <span class="ms" style="font-size:12px; vertical-align:middle; margin-right:4px">autorenew</span> Auto Generate
                        </button>
                    </div>
                </div>

                <div class="form-group" style="margin-top:10px">
                    <label class="form-label">Messages per Day Limit</label>
                    <input id="edit-plan-msg-limit" type="number" class="form-input" value="${plan.limits?.messages_per_day !== undefined && plan.limits?.messages_per_day !== null ? plan.limits.messages_per_day : ''}" placeholder="Leave empty for unlimited">
                </div>
                <div class="form-group" style="margin-top:10px">
                    <label class="form-label">Messages per Month Limit (Optional)</label>
                    <input id="edit-plan-msg-month-limit" type="number" class="form-input" value="${plan.limits?.messages_per_month !== undefined && plan.limits?.messages_per_month !== null ? plan.limits.messages_per_month : ''}" placeholder="Leave empty for unlimited">
                </div>
                <div class="form-group" style="margin-top:10px">
                    <label class="form-label">Operator Limit</label>
                    <input id="edit-plan-op-limit" type="number" class="form-input" value="${plan.limits?.operators || 1}" placeholder="10">
                </div>
                <div class="form-group" style="margin-top:10px">
                    <label class="form-label">Features</label>
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:12px;margin-top:5px">
                        <label><input type="checkbox" name="edit-plan-features" value="text" ${hasFeature('text') ? 'checked' : ''}> Text Messages</label>
                        <label><input type="checkbox" name="edit-plan-features" value="image" ${hasFeature('image') ? 'checked' : ''}> Image Messages</label>
                        <label><input type="checkbox" name="edit-plan-features" value="file" ${hasFeature('file') ? 'checked' : ''}> File Messages</label>
                        <label><input type="checkbox" name="edit-plan-features" value="video" ${hasFeature('video') ? 'checked' : ''}> Video Messages</label>
                        <label><input type="checkbox" name="edit-plan-features" value="webhook" ${hasFeature('webhook') ? 'checked' : ''}> Webhooks</label>
                        <label><input type="checkbox" name="edit-plan-features" value="api_keys" ${hasFeature('api_keys') ? 'checked' : ''}> API Keys</label>
                        <label><input type="checkbox" name="edit-plan-features" value="mandatory_footer" ${hasFeature('mandatory_footer') ? 'checked' : ''}> Wajib Branding Footer</label>
                    </div>
                </div>
                <div class="form-group" style="margin-top:12px">
                    <label style="font-size:13px;display:flex;align-items:center;gap:6px">
                        <input id="edit-plan-active" type="checkbox" ${plan.is_active ? 'checked' : ''}> Active / Available for subscriptions
                    </label>
                </div>
            </div>
        `,
        focusConfirm: false,
        showCancelButton: true,
        confirmButtonText: 'Update Plan',
        confirmButtonColor: '#bfff5a',
        preConfirm: () => {
            const name = document.getElementById('edit-plan-name').value;
            const code = document.getElementById('edit-plan-code').value;
            const price = document.getElementById('edit-plan-price').value;
            const price3 = document.getElementById('edit-plan-price-3').value;
            const price6 = document.getElementById('edit-plan-price-6').value;
            const price12 = document.getElementById('edit-plan-price-12').value;
            const msgLimit = document.getElementById('edit-plan-msg-limit').value;
            const msgMonthLimit = document.getElementById('edit-plan-msg-month-limit').value;
            const opLimit = document.getElementById('edit-plan-op-limit').value;
            const isActive = document.getElementById('edit-plan-active').checked;
            
            const features = [];
            document.querySelectorAll('input[name="edit-plan-features"]:checked').forEach(cb => {
                features.push(cb.value);
            });
 
            if (!name || !code || price === '') {
                Swal.showValidationMessage('Name, Code, and Price are required');
                return false;
            }
 
            return {
                name,
                code,
                price_monthly: parseFloat(price),
                price_3_months: parseFloat(price3) || 0,
                price_6_months: parseFloat(price6) || 0,
                price_12_months: parseFloat(price12) || 0,
                is_active: isActive ? 1 : 0,
                limits: {
                    ...(msgLimit !== '' ? { messages_per_day: parseInt(msgLimit) } : {}),
                    ...(msgMonthLimit !== '' ? { messages_per_month: parseInt(msgMonthLimit) } : {}),
                    devices: 1,
                    operators: parseInt(opLimit) || 1
                },
                features: features
            };
        }
    }).then((result) => {
        if (result.isConfirmed) {
            submitForm(`/app-admin/plans/${plan.id}/update`, result.value);
        }
    });
}
</script>
@endif

{{-- ─── WEBHOOKS ─── --}}
@elseif($code === 'webhooks')
@php $hooks = Webhook::with('tenant')->latest()->paginate(20); @endphp
<div class="card">
    <div class="card-title">Webhooks <span class="badge badge-blue">{{ $hooks->total() }}</span></div>
    <div class="table-wrap">
        <table>
            <thead><tr><th>URL</th><th>Tenant</th><th>Events</th><th>Status</th><th>Created</th></tr></thead>
            <tbody>
            @forelse($hooks as $h)
            <tr>
                <td class="td-mono" style="max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ $h->url }}</td>
                <td style="font-size:12px;color:var(--muted)">{{ $h->tenant?->name ?? '—' }}</td>
                <td style="font-size:12px">{{ is_array($h->events)?implode(', ',$h->events):($h->events??'all') }}</td>
                <td><span class="badge {{ $h->is_active?'badge-green':'badge-gray' }}">{{ $h->is_active?'Active':'Disabled' }}</span></td>
                <td style="color:var(--muted);font-size:12px">{{ $h->created_at?->format('d M Y') }}</td>
            </tr>
            @empty
            <tr><td colspan="5"><div class="empty"><span class="ms">webhook</span><p>No webhooks</p></div></td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- ─── API KEYS ─── --}}
@elseif($code === 'api_keys')
@php $keys = ApiKey::with('tenant')->latest()->paginate(20); @endphp
<div class="card">
    <div class="card-title">API Keys <span class="badge badge-blue">{{ $keys->total() }}</span></div>
    <div class="table-wrap">
        <table>
            <thead><tr><th>Name</th><th>Tenant</th><th>Key (masked)</th><th>Status</th><th>Last Used</th></tr></thead>
            <tbody>
            @forelse($keys as $k)
            <tr>
                <td style="font-weight:500">{{ $k->name ?? 'API Key' }}</td>
                <td style="font-size:12px;color:var(--muted)">{{ $k->tenant?->name ?? '—' }}</td>
                <td class="td-mono">{{ '••••'.substr($k->key_hash??'',0,8) }}</td>
                <td><span class="badge {{ $k->is_active?'badge-green':'badge-gray' }}">{{ $k->is_active?'Active':'Revoked' }}</span></td>
                <td style="color:var(--muted);font-size:12px">{{ $k->last_used_at?->diffForHumans() ?? '—' }}</td>
            </tr>
            @empty
            <tr><td colspan="5"><div class="empty"><span class="ms">key</span><p>No API keys</p></div></td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- ─── SUBSCRIPTIONS ─── --}}
@elseif($code === 'subscriptions')
@php $subs = Subscription::with('tenant','plan')->latest()->paginate(20); @endphp
<div class="card">
    <div class="card-title">Subscriptions <span class="badge badge-blue">{{ $subs->total() }}</span></div>
    <div class="table-wrap">
        <table>
            <thead><tr><th>Tenant</th><th>Plan</th><th>Status</th><th>Expires</th><th>Created</th></tr></thead>
            <tbody>
            @forelse($subs as $s)
            <tr>
                <td style="font-weight:500">{{ $s->tenant?->name ?? '—' }}</td>
                <td><span class="badge badge-apple">{{ $s->plan?->name ?? '—' }}</span></td>
                <td>
                    @php $st=$s->status??'active'; $sc=match($st){'active'=>'badge-green','past_due'=>'badge-yellow','suspended','cancelled','expired'=>'badge-red',default=>'badge-gray'}; @endphp
                    <span class="badge {{ $sc }}">{{ $st }}</span>
                </td>
                <td style="color:var(--muted);font-size:12px">{{ $s->expires_at?->format('d M Y') ?? '∞' }}</td>
                <td style="color:var(--muted);font-size:12px">{{ $s->created_at?->format('d M Y') }}</td>
            </tr>
            @empty
            <tr><td colspan="5"><div class="empty"><span class="ms">receipt_long</span><p>No subscriptions</p></div></td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- ─── INVOICES ─── --}}
@elseif($code === 'invoices')
@php $invoices = Invoice::with('tenant')->latest()->paginate(20); @endphp
<div class="card">
    <div class="card-title">Invoices <span class="badge badge-blue">{{ $invoices->total() }}</span></div>
    <div class="table-wrap">
        <table>
            <thead><tr><th>Invoice #</th><th>Tenant</th><th>Amount</th><th>Status</th><th>Due</th><th>Created</th></tr></thead>
            <tbody>
            @forelse($invoices as $inv)
            <tr>
                <td class="td-mono">#{{ $inv->invoice_number ?? substr($inv->id,0,8) }}</td>
                <td style="font-weight:500">{{ $inv->tenant?->name ?? '—' }}</td>
                <td style="font-weight:600">Rp{{ number_format($inv->grand_total??0,0,',','.') }}</td>
                <td>
                    @php $st=$inv->status??'pending'; $sc=match($st){'paid'=>'badge-green','pending'=>'badge-yellow','overdue'=>'badge-red','cancelled'=>'badge-gray',default=>'badge-gray'}; @endphp
                    <span class="badge {{ $sc }}">{{ $st }}</span>
                </td>
                <td style="color:var(--muted);font-size:12px">{{ $inv->due_date?->format('d M Y') ?? '—' }}</td>
                <td style="color:var(--muted);font-size:12px">{{ $inv->created_at?->format('d M Y') }}</td>
            </tr>
            @empty
            <tr><td colspan="6"><div class="empty"><span class="ms">description</span><p>No invoices</p></div></td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- ─── GATEWAY NODES ─── --}}
@elseif($code === 'gateway_nodes')
@php $nodes = GatewayNode::all(); @endphp
<div class="card">
    <div class="card-title">Gateway Nodes <span class="badge badge-blue">{{ $nodes->count() }}</span></div>
    <div class="table-wrap">
        <table>
            <thead><tr><th>Name</th><th>Base URL</th><th>Status</th><th>Capabilities</th><th>Weight</th></tr></thead>
            <tbody>
            @forelse($nodes as $n)
            <tr>
                <td style="font-weight:500">{{ $n->name }}</td>
                <td class="td-mono">{{ $n->base_url }}</td>
                <td><span class="badge {{ $n->status==='active'?'badge-green':'badge-gray' }}">{{ $n->status }}</span></td>
                <td style="font-size:12px;color:var(--muted)">{{ implode(', ',$n->capabilities??[]) }}</td>
                <td style="font-size:12px">{{ $n->weight ?? 1 }}</td>
            </tr>
            @empty
            <tr><td colspan="5"><div class="empty"><span class="ms">hub</span><p>No gateway nodes</p></div></td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- ─── AUDIT LOGS ─── --}}
@elseif($code === 'audit_logs')
@php $logs = AuditLog::with('tenant')->latest()->paginate(50); @endphp
<div class="card">
    <div class="card-title">Audit Logs</div>
    <div class="table-wrap">
        <table>
            <thead><tr><th>Action</th><th>Actor</th><th>Tenant</th><th>IP</th><th>Time</th></tr></thead>
            <tbody>
            @forelse($logs as $log)
            <tr>
                <td>
                    <div style="font-weight:500">{{ $log->action ?? '—' }}</div>
                    @if($log->description)<div style="font-size:11px;color:var(--muted)">{{ Str::limit($log->description,80) }}</div>@endif
                </td>
                <td style="font-size:12px;color:var(--muted)">{{ $log->actor_email ?? $log->user_id ?? '—' }}</td>
                <td style="font-size:12px;color:var(--muted)">{{ $log->tenant?->name ?? '—' }}</td>
                <td class="td-mono" style="font-size:11px">{{ $log->ip_address ?? '—' }}</td>
                <td style="color:var(--muted);font-size:12px">{{ $log->created_at?->format('d M H:i') }}</td>
            </tr>
            @empty
            <tr><td colspan="5"><div class="empty"><span class="ms">history</span><p>No audit logs</p></div></td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- ─── SETUP GUIDE ─── --}}
@elseif($code === 'setup_guide')
<div class="grid-2">
    <div class="card">
        <div class="card-title" style="display:flex;align-items:center;gap:8px">
            <span class="ms" style="color:var(--blue)">checklist</span> Setup Checklist
        </div>
        @php
        $checks = [
            ['label' => 'Laravel app connected to PostgreSQL', 'ok' => true],
            ['label' => 'Redis queue connection', 'ok' => config('queue.default') === 'redis'],
            ['label' => 'Platform settings seeded', 'ok' => \App\Models\PlatformSetting::count() > 0],
            ['label' => 'Plans seeded (incl. Free plan)', 'ok' => \App\Models\Plan::count() > 0],
            ['label' => 'Platform admin user created', 'ok' => \App\Models\MUser::count() > 0],
            ['label' => 'Gateway node configured', 'ok' => \App\Models\GatewayNode::count() > 0],
        ];
        @endphp
        @foreach($checks as $check)
        <div style="display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--border)">
            <span class="ms" style="font-size:18px;color:{{ $check['ok']?'#059669':'#d97706' }}">
                {{ $check['ok'] ? 'check_circle' : 'radio_button_unchecked' }}
            </span>
            <span style="font-size:13px;color:{{ $check['ok']?'var(--ink)':'var(--muted)' }}">{{ $check['label'] }}</span>
        </div>
        @endforeach
    </div>
    <div class="card">
        <div class="card-title" style="display:flex;align-items:center;gap:8px">
            <span class="ms" style="color:var(--apple)">bolt</span> Quick Actions
        </div>
        <div style="display:flex;flex-direction:column;gap:10px">
            <a href="{{ route('app-admin.settings.edit') }}" class="btn btn-outline" style="justify-content:flex-start">
                <span class="ms">settings</span> Platform Settings
            </a>
            <a href="{{ route('app-admin.modules.show','plans') }}" class="btn btn-outline" style="justify-content:flex-start">
                <span class="ms">layers</span> Manage Plans
            </a>
            <a href="{{ route('app-admin.modules.show','gateway_nodes') }}" class="btn btn-outline" style="justify-content:flex-start">
                <span class="ms">hub</span> Gateway Nodes
            </a>
            <a href="{{ route('app-admin.access.matrix') }}" class="btn btn-outline" style="justify-content:flex-start">
                <span class="ms">shield_lock</span> Permission Matrix
            </a>
        </div>
    </div>
</div>

{{-- ─── DEFAULT / FALLBACK ─── --}}
@else
<div class="card">
    <div class="card-title" style="display:flex;align-items:center;gap:8px">
        <span class="ms" style="color:var(--blue)">info</span> {{ $module->name }}
    </div>
    <p style="font-size:13px;color:var(--muted);margin-bottom:16px">Module code: <code class="td-mono">{{ $module->code }}</code></p>
    <div class="divider"></div>
    <div class="grid-2">
        <div>
            <div class="card-title">Allowed Actions</div>
            @foreach($actions as $action)
            <div style="display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-top:1px solid var(--border)">
                <div>
                    <div style="font-size:13px;font-weight:500">{{ $action->name }}</div>
                    <div class="td-mono" style="font-size:11px">{{ $action->code }}</div>
                </div>
                <span class="badge {{ auth()->user()->canDoAction($module->code,$action->code)?'badge-green':'badge-red' }}">
                    {{ auth()->user()->canDoAction($module->code,$action->code)?'Allowed':'Denied' }}
                </span>
            </div>
            @endforeach
        </div>
        <div style="background:var(--frost);border-radius:12px;padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);text-align:center">
            <span class="ms" style="font-size:40px;opacity:.3">construction</span>
            <p style="font-size:13px">Full CRUD for this module will be implemented in the next phase.</p>
        </div>
    </div>
</div>
<script>
function showAddDeviceModal() {
    const tenants = @json(\App\Models\Tenant::all());
    
    let options = '';
    tenants.forEach(t => {
        options += `<option value="${t.id}">${t.name}</option>`;
    });

    Swal.fire({
        title: 'Add Device',
        html: `
            <div style="text-align:left">
                <div class="form-group">
                    <label class="form-label">Device Name</label>
                    <input id="swal-name" class="form-input" placeholder="e.g. Admin Device">
                </div>
                <div class="form-group" style="margin-top:10px">
                    <label class="form-label">Phone Number</label>
                    <input id="swal-phone" class="form-input" placeholder="e.g. 628123456789">
                </div>
                <div class="form-group" style="margin-top:10px">
                    <label class="form-label">Tenant</label>
                    <select id="swal-tenant" class="form-select">
                        ${options}
                    </select>
                </div>
            </div>
        `,
        focusConfirm: false,
        showCancelButton: true,
        confirmButtonText: 'Save',
        confirmButtonColor: '#bfff5a',
        preConfirm: () => {
            const name = document.getElementById('swal-name').value;
            const phone = document.getElementById('swal-phone').value;
            const tenant = document.getElementById('swal-tenant').value;
            
            if (!name || !phone || !tenant) {
                Swal.showValidationMessage('Semua field harus diisi');
                return false;
            }
            return { name, phone_number: phone, tenant_id: tenant };
        }
    }).then((result) => {
        if (result.isConfirmed) {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '{{ route("modules.devices.create") }}';
            
            const csrf = document.createElement('input');
            csrf.type = 'hidden';
            csrf.name = '_token';
            csrf.value = '{{ csrf_token() }}';
            form.appendChild(csrf);
            
            for (const key in result.value) {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = key;
                input.value = result.value[key];
                form.appendChild(input);
            }
            
            document.body.appendChild(form);
            form.submit();
        }
    });
}
</script>

@endif

@endsection