@extends('layouts.master')

@section('styles')
    @include('layouts.components.datatable-assets')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .stat-card-custom {
            border-radius: 12px;
            transition: all 0.25s ease;
            border: 1px solid rgba(0, 0, 0, 0.06);
        }
        .stat-card-custom:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }

        .phone-mockup-wrapper {
            background: #1e293b;
            border: 10px solid #0f172a;
            border-radius: 36px;
            padding: 18px 14px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.25);
            max-width: 320px;
            margin: 0 auto;
            position: relative;
        }
        .phone-notch {
            width: 90px;
            height: 14px;
            background: #0f172a;
            border-radius: 0 0 10px 10px;
            margin: -18px auto 14px auto;
        }
        .phone-screen {
            background: #f8fafc;
            border-radius: 20px;
            padding: 12px;
            min-height: 440px;
            font-family: system-ui, -apple-system, sans-serif;
        }
        .push-banner-preview {
            background: #ffffff;
            border-radius: 14px;
            padding: 12px;
            box-shadow: 0 6px 18px rgba(0,0,0,0.08);
            border: 1px solid #e2e8f0;
            margin-bottom: 14px;
        }
        .in-app-card-preview {
            background: #ffffff;
            border-radius: 12px;
            padding: 12px;
            border: 1px solid #bfdbfe;
            box-shadow: 0 2px 8px rgba(37,99,235,0.08);
        }
        .quick-template-chip {
            cursor: pointer;
            transition: all 0.2s;
            font-size: 11.5px;
            border-radius: 20px;
            padding: 5px 12px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .quick-template-chip:hover {
            background-color: #0d9488 !important;
            color: #ffffff !important;
            transform: scale(1.03);
        }
        .select2-container--default .select2-selection--multiple {
            border: 1px solid #ced4da;
            border-radius: 8px;
            padding: 4px 8px;
            min-height: 42px;
        }
        .select2-container--default.select2-container--focus .select2-selection--multiple {
            border-color: #3b82f6;
            box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
        }
        .emoji-btn {
            background: none;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            padding: 2px 7px;
            font-size: 14px;
            cursor: pointer;
            transition: background 0.15s;
        }
        .emoji-btn:hover {
            background: #f1f5f9;
        }
    </style>
@endsection

@section('content')
<div class="container-fluid">

    <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
        <div>
            <h4 class="mb-0 fw-bold text-dark d-flex align-items-center gap-2">
                <i class="ri-notification-3-line text-primary fs-22"></i>
                Pusat Siaran Notifikasi & Promosi
            </h4>
            <p class="mb-0 text-muted fs-13">Kirim notifikasi broadcast ke aplikasi mobile nasabah untuk promosi reksa dana, pengumuman, dan pembaruan akun.</p>
        </div>
        <div class="d-flex align-items-center gap-2 mt-md-0 mt-3">
            <span class="badge bg-success-transparent text-success border border-success fw-bold px-3 py-2">
                <i class="ri-broadcast-line me-1"></i> FCM & In-App Service Aktif
            </span>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show shadow-sm border-0" role="alert">
            <div class="d-flex align-items-center">
                <i class="ri-checkbox-circle-line fs-20 me-2 text-success"></i>
                <div class="fw-semibold">{{ session('success') }}</div>
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if(session('warning'))
        <div class="alert alert-warning alert-dismissible fade show shadow-sm border-0" role="alert">
            <div class="d-flex align-items-center">
                <i class="ri-alert-line fs-20 me-2 text-warning"></i>
                <div class="fw-semibold">{{ session('warning') }}</div>
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show shadow-sm border-0" role="alert">
            <div class="d-flex align-items-center">
                <i class="ri-error-warning-line fs-20 me-2 text-danger"></i>
                <div class="fw-semibold">{{ session('error') }}</div>
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="row g-3 mb-4">
        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12">
            <div class="card stat-card-custom bg-white shadow-sm mb-0">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <span class="text-muted fs-12 fw-medium text-uppercase d-block mb-1">Total Siaran Terkirim</span>
                            <h4 class="fw-bold mb-0 text-dark">{{ number_format($totalBroadcasts) }}</h4>
                            <span class="text-success fs-11 mt-1 d-inline-flex align-items-center">
                                <i class="ri-send-plane-fill me-1"></i> Riwayat kampanye aktif
                            </span>
                        </div>
                        <div class="avatar avatar-md bg-primary-transparent text-primary rounded-circle">
                            <i class="ri-broadcast-fill fs-20"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12">
            <div class="card stat-card-custom bg-white shadow-sm mb-0">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <span class="text-muted fs-12 fw-medium text-uppercase d-block mb-1">Notifikasi Diterima</span>
                            <h4 class="fw-bold mb-0 text-dark">{{ number_format($totalSentNotifications) }}</h4>
                            <span class="text-info fs-11 mt-1 d-inline-flex align-items-center">
                                <i class="ri-user-received-fill me-1"></i> Terdistribusi ke nasabah
                            </span>
                        </div>
                        <div class="avatar avatar-md bg-info-transparent text-info rounded-circle">
                            <i class="ri-mail-check-line fs-20"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12">
            <div class="card stat-card-custom bg-white shadow-sm mb-0">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <span class="text-muted fs-12 fw-medium text-uppercase d-block mb-1">Kampanye Promosi</span>
                            <h4 class="fw-bold mb-0 text-dark">{{ number_format($totalPromos) }}</h4>
                            <span class="text-purple fs-11 mt-1 d-inline-flex align-items-center">
                                <i class="ri-gift-line me-1"></i> Diskon & produk reksa dana
                            </span>
                        </div>
                        <div class="avatar avatar-md bg-purple-transparent text-purple rounded-circle">
                            <i class="ri-percent-line fs-20"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12">
            <div class="card stat-card-custom bg-white shadow-sm mb-0">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <span class="text-muted fs-12 fw-medium text-uppercase d-block mb-1">Total Nasabah Terdaftar</span>
                            <h4 class="fw-bold mb-0 text-dark">{{ number_format($totalUsers) }}</h4>
                            <span class="text-success fs-11 mt-1 d-inline-flex align-items-center">
                                <i class="ri-shield-check-line me-1"></i> {{ number_format($kycApprovedUsers) }} KYC Terverifikasi
                            </span>
                        </div>
                        <div class="avatar avatar-md bg-success-transparent text-success rounded-circle">
                            <i class="ri-user-star-line fs-20"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4 mb-4">

        <div class="col-xl-8 col-lg-7">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-header bg-white border-bottom py-3 d-flex align-items-center justify-content-between">
                    <div>
                        <h5 class="card-title mb-0 fw-bold text-dark d-flex align-items-center gap-2">
                            <i class="ri-quill-pen-line text-primary"></i> Buat Notifikasi Baru
                        </h5>
                        <span class="fs-12 text-muted">Sesuaikan judul, isi, target audiens dan tautan promosi.</span>
                    </div>

                    <div class="d-none d-md-flex align-items-center gap-1">
                        <span class="fs-11 fw-semibold text-muted me-1">Template Cepat:</span>
                        <span class="badge bg-light text-dark border quick-template-chip" onclick="applyTemplate('promo')">🎁 Promo</span>
                        <span class="badge bg-light text-dark border quick-template-chip" onclick="applyTemplate('kyc')">🛡️ KYC</span>
                        <span class="badge bg-light text-dark border quick-template-chip" onclick="applyTemplate('maintenance')">⚙️ Sistem</span>
                    </div>
                </div>

                <div class="card-body p-4">
                    <form action="{{ route('notifications.admin.send') }}" method="POST" id="broadcastForm">
                        @csrf

                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold fs-13">
                                    <i class="ri-price-tag-3-line text-primary me-1"></i> Kategori Notifikasi <span class="text-danger">*</span>
                                </label>
                                <select class="form-select" name="type" id="notifType" required>
                                    <option value="PROMO" selected>🎁 PROMOSI & PRODUK BARU (PROMO)</option>
                                    <option value="SYSTEM">🔔 PENGUMUMAN SISTEM (SYSTEM)</option>
                                    <option value="TRANSACTION">💰 INVESTASI & TRANSAKSI (TRANSACTION)</option>
                                    <option value="KYC">🛡️ VERIFIKASI AKUN (KYC)</option>
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold fs-13">
                                    <i class="ri-user-shared-line text-primary me-1"></i> Target Audiens <span class="text-danger">*</span>
                                </label>
                                <select class="form-select" name="target_audience" id="targetAudience" required>
                                    <option value="ALL" selected>👥 Semua Pengguna ({{ $totalUsers }} Nasabah)</option>
                                    <option value="KYC_APPROVED">✅ Hanya Nasabah Terverifikasi KYC ({{ $kycApprovedUsers }})</option>
                                    <option value="INVESTORS">💼 Investor Aktif / Memiliki Saldo ({{ $investorsCount }})</option>
                                    <option value="KYC_PENDING">⏳ Sedang Menunggu Verifikasi KYC</option>
                                    <option value="KYC_UNVERIFIED">⚠️ Belum Verifikasi Identitas (KYC)</option>
                                    <option value="SPECIFIC_USERS">🎯 Pengguna Spesifik Tertentu</option>
                                </select>
                            </div>
                        </div>

                        <div class="mb-3 d-none p-3 border rounded-3 bg-light" id="specificUsersWrapper">
                            <div class="d-flex align-items-center justify-content-between mb-2">
                                <label class="form-label fw-semibold fs-13 mb-0">
                                    <i class="ri-user-search-line text-primary me-1"></i> Pilih Nasabah Tujuan <span class="text-danger">*</span>
                                </label>
                                <div class="d-flex align-items-center gap-1">
                                    <button type="button" class="btn btn-xs btn-outline-primary" id="btnSelectAllUsers">
                                        <i class="ri-checkbox-multiple-line me-1"></i> Pilih Semua
                                    </button>
                                    <button type="button" class="btn btn-xs btn-outline-secondary" id="btnClearAllUsers">
                                        <i class="ri-close-line me-1"></i> Hapus Pilihan
                                    </button>
                                </div>
                            </div>
                            <select class="form-control" name="target_user_ids[]" id="userSelect" multiple="multiple" style="width: 100%;">
                                @foreach($users as $u)
                                    <option value="{{ $u->id }}">
                                        {{ $u->name }} ({{ $u->email }} | {{ $u->phone ?? 'No Phone' }})
                                        @if($u->status_kyc == 2) [KYC OK] @endif
                                    </option>
                                @endforeach
                            </select>
                            <span class="fs-11 text-muted mt-1 d-block">
                                <i class="ri-information-line me-1"></i> Ketik nama, email, atau nomor HP nasabah untuk mencari.
                            </span>
                        </div>

                        <div class="mb-3">
                            <div class="d-flex align-items-center justify-content-between mb-1">
                                <label class="form-label fw-semibold fs-13 mb-0">
                                    Judul Notifikasi <span class="text-danger">*</span>
                                </label>
                                <span class="fs-11 text-muted" id="titleCharCount">0/150</span>
                            </div>
                            <input type="text" class="form-control" name="title" id="notifTitle"
                                   placeholder="Contoh: Promo Spesial Reksa Dana: Bonus Investasi s.d 15%!"
                                   maxlength="150" required value="{{ old('title') }}">
                        </div>

                        <div class="mb-3">
                            <div class="d-flex align-items-center justify-content-between mb-1">
                                <label class="form-label fw-semibold fs-13 mb-0">
                                    Isi Pesan Notifikasi <span class="text-danger">*</span>
                                </label>
                                <span class="fs-11 text-muted" id="messageCharCount">0/1000</span>
                            </div>
                            <textarea class="form-control" name="message" id="notifMessage" rows="4"
                                      placeholder="Tuliskan pesan lengkap notifikasi atau detail promo Anda di sini..."
                                      maxlength="1000" required>{{ old('message') }}</textarea>
                        </div>

                        <div class="row g-3 mb-4">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold fs-13">
                                    <i class="ri-link text-primary me-1"></i> Link Aksi / Deep Link (Opsional)
                                </label>
                                <input type="text" class="form-control" name="action_url" id="actionUrl"
                                       placeholder="Misal: /investments atau https://dbic.co.id/promo"
                                       value="{{ old('action_url') }}">
                                <span class="fs-11 text-muted">Akan terbuka saat nasabah menekan notifikasi.</span>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold fs-13">
                                    <i class="ri-image-line text-primary me-1"></i> URL Gambar Banner (Opsional)
                                </label>
                                <input type="url" class="form-control" name="image_url" id="imageUrl"
                                       placeholder="https://domain.com/banner-promo.jpg"
                                       value="{{ old('image_url') }}">
                                <span class="fs-11 text-muted">Gambar akan tampil sebagai banner promosi.</span>
                            </div>
                        </div>

                        <div class="p-3 bg-light rounded-3 mb-4 border">
                            <span class="fs-12 fw-bold text-dark d-block mb-2 text-uppercase">
                                <i class="ri-broadcast-fill text-primary me-1"></i> Saluran Distribusi Pengiriman:
                            </span>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" name="send_in_app" id="sendInApp" value="1" checked>
                                        <label class="form-check-label fw-semibold fs-13" for="sendInApp">
                                            Inbox Aplikasi Mobile
                                            <span class="d-block fs-11 text-muted fw-normal">Menyimpan notifikasi di lonceng notifikasi dan menyalakan <strong>dot merah</strong> di Home.</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" name="send_push" id="sendPush" value="1" checked>
                                        <label class="form-check-label fw-semibold fs-13" for="sendPush">
                                            Push Notification (FCM Topic)
                                            <span class="d-block fs-11 text-muted fw-normal">Menembak notifikasi langsung via Topic Firebase (all_users / user_{id}) tanpa menggunakan token.</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex align-items-center justify-content-end gap-2">
                            <button type="reset" class="btn btn-light px-4 py-2" onclick="resetLivePreview()">
                                <i class="ri-refresh-line me-1"></i> Reset Form
                            </button>
                            <button type="submit" id="submitBroadcastBtn" class="btn btn-primary px-4 py-2 fw-semibold d-inline-flex align-items-center gap-1 shadow-sm">
                                <i class="ri-send-plane-2-fill"></i> Siarkan Notifikasi Sekarang
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-lg-5">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-header bg-white border-bottom py-3">
                    <h6 class="card-title mb-0 fw-bold text-dark d-flex align-items-center gap-2">
                        <i class="ri-smartphone-line text-success fs-18"></i> Live Mobile Preview
                    </h6>
                    <span class="fs-12 text-muted">Simulasi visual tampilan notifikasi di smartphone nasabah.</span>
                </div>

                <div class="card-body p-3 d-flex flex-column justify-content-center">
                    <div class="phone-mockup-wrapper w-100">
                        <div class="phone-notch"></div>
                        <div class="phone-screen">

                            <div class="d-flex justify-content-between align-items-center px-1 mb-3 text-muted" style="font-size: 11px;">
                                <span class="fw-bold text-dark" id="previewTime">09:41</span>
                                <div class="d-flex align-items-center gap-1">
                                    <i class="ri-wifi-line"></i>
                                    <i class="ri-signal-tower-fill"></i>
                                    <i class="ri-battery-charge-line"></i>
                                </div>
                            </div>

                            <div class="text-uppercase fw-bold text-muted mb-1" style="font-size: 10px; letter-spacing: 0.5px;">
                                1. Push Notification di Layar HP:
                            </div>
                            <div class="push-banner-preview mb-3">
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <div class="d-flex align-items-center gap-2">
                                        <div style="width: 20px; height: 20px; background: #0D281C; border-radius: 5px; display: flex; align-items: center; justify-content: center;">
                                            <i class="ri-leaf-fill text-white" style="font-size: 11px;"></i>
                                        </div>
                                        <span class="fw-bold text-dark" style="font-size: 11.5px;">DBIC INVESTASI</span>
                                    </div>
                                    <span class="text-muted" style="font-size: 10px;">baru saja</span>
                                </div>

                                <div class="fw-bold text-dark mb-1" id="previewPushTitle" style="font-size: 12px; line-height: 1.3;">
                                    Promo Spesial Reksa Dana
                                </div>
                                <div class="text-muted" id="previewPushBody" style="font-size: 11px; line-height: 1.4;">
                                    Dapatkan bonus investasi tambahan untuk pembelian reksa dana pertama Anda hari ini!
                                </div>

                                <div id="previewImageWrapper" class="mt-2 d-none">
                                    <img id="previewImageEl" src="" alt="Banner Preview" class="img-fluid rounded-2" style="max-height: 120px; width: 100%; object-fit: cover;">
                                </div>
                            </div>

                            <div class="text-uppercase fw-bold text-muted mb-1" style="font-size: 10px; letter-spacing: 0.5px;">
                                2. Tampilan di Kotak Masuk Aplikasi:
                            </div>
                            <div class="in-app-card-preview">
                                <div class="d-flex align-items-start gap-2">
                                    <div id="previewInAppIconBox" style="width: 34px; height: 34px; border-radius: 8px; background: #ede9fe; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                                        <i class="ri-gift-fill" id="previewInAppIcon" style="color: #6d28d9; font-size: 16px;"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="fw-bold text-dark" id="previewInAppTitle" style="font-size: 12px;">
                                                Promo Spesial Reksa Dana
                                            </span>

                                            <span style="width: 7px; height: 7px; background: #ef4444; border-radius: 50%; display: inline-block;"></span>
                                        </div>
                                        <p class="text-muted mb-1 mt-1" id="previewInAppBody" style="font-size: 11px; line-height: 1.35;">
                                            Dapatkan bonus investasi tambahan untuk pembelian reksa dana pertama Anda hari ini!
                                        </p>
                                        <span class="text-muted" style="font-size: 9.5px;">baru saja • Hari ini</span>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white border-bottom py-3 d-flex align-items-center justify-content-between flex-wrap gap-2">
                    <div>
                        <h5 class="card-title mb-0 fw-bold text-dark d-flex align-items-center gap-2">
                            <i class="ri-history-line text-primary"></i> Riwayat Siaran Notifikasi
                        </h5>
                        <span class="fs-12 text-muted">Daftar rekaman siaran notifikasi dan promosi yang telah dikirimkan.</span>
                    </div>
                </div>

                <div class="card-body p-3">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0" id="broadcastTable">
                            <thead class="table-light">
                                <tr>
                                    <th style="width: 50px;">#</th>
                                    <th>Waktu Siaran</th>
                                    <th>Kategori</th>
                                    <th>Judul & Isi Notifikasi</th>
                                    <th>Target Segmen</th>
                                    <th>Saluran</th>
                                    <th>Total Terkirim</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($broadcasts as $idx => $b)
                                    <tr>
                                        <td class="text-muted fs-12">{{ $idx + 1 }}</td>
                                        <td>
                                            <span class="fw-semibold text-dark d-block fs-12">{{ $b->created_at->setTimezone('Asia/Jakarta')->translatedFormat('d M Y') }}</span>
                                            <span class="text-muted fs-11">{{ $b->created_at->setTimezone('Asia/Jakarta')->format('H:i') }} WIB</span>
                                        </td>
                                        <td>
                                            @if($b->type === 'PROMO')
                                                <span class="badge bg-purple-transparent text-purple border border-purple px-2 py-1 fs-11">
                                                    <i class="ri-gift-line me-1"></i> PROMO
                                                </span>
                                            @elseif($b->type === 'SYSTEM')
                                                <span class="badge bg-info-transparent text-info border border-info px-2 py-1 fs-11">
                                                    <i class="ri-notification-3-line me-1"></i> SISTEM
                                                </span>
                                            @elseif($b->type === 'KYC')
                                                <span class="badge bg-warning-transparent text-warning border border-warning px-2 py-1 fs-11">
                                                    <i class="ri-shield-user-line me-1"></i> KYC
                                                </span>
                                            @else
                                                <span class="badge bg-success-transparent text-success border border-success px-2 py-1 fs-11">
                                                    <i class="ri-money-dollar-circle-line me-1"></i> TRANSAKSI
                                                </span>
                                            @endif
                                        </td>
                                        <td style="max-width: 320px;">
                                            <span class="fw-bold text-dark d-block fs-13 text-truncate">{{ $b->title }}</span>
                                            <span class="text-muted fs-12 d-block text-truncate" title="{{ $b->message }}">{{ $b->message }}</span>
                                            @if($b->action_url)
                                                <a href="{{ $b->action_url }}" target="_blank" class="fs-11 text-primary d-inline-flex align-items-center gap-1 mt-1">
                                                    <i class="ri-external-link-line"></i> {{ Str::limit($b->action_url, 30) }}
                                                </a>
                                            @endif
                                        </td>
                                        <td>
                                            @php                                                $audienceLabels = [
                                                    'ALL'             => 'Semua Nasabah',
                                                    'KYC_APPROVED'    => 'KYC Terverifikasi',
                                                    'KYC_PENDING'     => 'KYC Menunggu',
                                                    'KYC_UNVERIFIED'  => 'Belum KYC',
                                                    'INVESTORS'       => 'Investor Aktif',
                                                    'SPECIFIC_USERS'  => 'User Spesifik',
                                                ];

@endphp
                                            <span class="badge bg-light text-dark border px-2 py-1 fs-11">
                                                {{ $audienceLabels[$b->target_audience] ?? $b->target_audience }}
                                            </span>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center gap-1">
                                                @if($b->send_in_app)
                                                    <span class="badge bg-success-transparent text-success fs-10" title="Kotak Masuk Aplikasi">
                                                        <i class="ri-inbox-line me-1"></i> In-App
                                                    </span>
                                                @endif
                                                @if($b->send_push)
                                                    <span class="badge bg-primary-transparent text-primary fs-10" title="Push Notification HP">
                                                        <i class="ri-smartphone-line me-1"></i> Push
                                                    </span>
                                                @endif
                                            </div>
                                        </td>
                                        <td>
                                            <span class="fw-bold text-dark fs-13">{{ number_format($b->total_sent) }}</span>
                                            <span class="text-muted fs-11 d-block">penerima</span>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center gap-1">

                                                <form action="{{ route('notifications.admin.resend', $b->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Apakah Anda yakin ingin menyiarkan ulang notifikasi ini?');">
                                                    @csrf
                                                    <button type="submit" class="btn btn-sm btn-icon btn-outline-primary" title="Kirim Ulang">
                                                        <i class="ri-repeat-line"></i>
                                                    </button>
                                                </form>

                                                <form action="{{ route('notifications.admin.destroy', $b->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Hapus riwayat siaran ini?');">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-sm btn-icon btn-outline-danger" title="Hapus Riwayat">
                                                        <i class="ri-delete-bin-line"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="8" class="text-center py-4 text-muted">
                                            <i class="ri-notification-off-line fs-24 d-block mb-1"></i>
                                            Belum ada siaran notifikasi yang dikirimkan.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {

            if ($('#broadcastTable tbody tr').length > 1 || !$('#broadcastTable tbody tr td[colspan]').length) {
                $('#broadcastTable').DataTable({
                    stateSave: true,
                    stateDuration: 7200,
                    order: [[1, 'desc']],
                    pageLength: 10,
                    language: {
                        search: "Cari Riwayat:",
                        lengthMenu: "Tampilkan _MENU_ entri",
                        info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ siaran",
                        paginate: {
                            previous: "Sebelumnya",
                            next: "Selanjutnya"
                        }
                    }
                });
            }

            $('#userSelect').select2({
                placeholder: "Pilih satu atau beberapa nasabah...",
                allowClear: true
            });

            $('#targetAudience').on('change', function() {
                if ($(this).val() === 'SPECIFIC_USERS') {
                    $('#specificUsersWrapper').removeClass('d-none');
                } else {
                    $('#specificUsersWrapper').addClass('d-none');
                }
            });

            $('#btnSelectAllUsers').on('click', function() {
                $('#userSelect > option').prop('selected', true);
                $('#userSelect').trigger('change');
            });

            $('#btnClearAllUsers').on('click', function() {
                $('#userSelect').val(null).trigger('change');
            });

            $('#notifTitle').on('input', function() {
                var text = $(this).val().trim();
                $('#titleCharCount').text($(this).val().length + '/150');
                var val = text.length > 0 ? text : 'Promo Spesial Reksa Dana';
                $('#previewPushTitle').text(val);
                $('#previewInAppTitle').text(val);
            });

            $('#notifMessage').on('input', function() {
                var text = $(this).val().trim();
                $('#messageCharCount').text($(this).val().length + '/1000');
                var val = text.length > 0 ? text : 'Dapatkan bonus investasi tambahan untuk pembelian reksa dana pertama Anda hari ini!';
                $('#previewPushBody').text(val);
                $('#previewInAppBody').text(val);
            });

            $('#imageUrl').on('input', function() {
                var url = $(this).val().trim();
                if (url.length > 5) {
                    $('#previewImageEl').attr('src', url);
                    $('#previewImageWrapper').removeClass('d-none');
                } else {
                    $('#previewImageWrapper').addClass('d-none');
                }
            });

            $('#notifType').on('change', function() {
                var type = $(this).val();
                updatePreviewIconType(type);
            });

            var now = new Date();
            var hours = String(now.getHours()).padStart(2, '0');
            var minutes = String(now.getMinutes()).padStart(2, '0');
            $('#previewTime').text(hours + ':' + minutes);

            $('#broadcastForm').on('submit', function() {
                var btn = $('#submitBroadcastBtn');
                btn.prop('disabled', true).html('<i class="ri-loader-4-line me-1" style="animation: spin 1s linear infinite; display: inline-block;"></i> Menyiarkan...');
            });
        });

        function updatePreviewIconType(type) {
            var iconBox = $('#previewInAppIconBox');
            var icon = $('#previewInAppIcon');

            if (type === 'PROMO') {
                iconBox.css('background', '#ede9fe');
                icon.attr('class', 'ri-gift-fill').css('color', '#6d28d9');
            } else if (type === 'KYC') {
                iconBox.css('background', '#fef3c7');
                icon.attr('class', 'ri-shield-user-fill').css('color', '#b45309');
            } else if (type === 'TRANSACTION') {
                iconBox.css('background', '#dcfce7');
                icon.attr('class', 'ri-money-dollar-circle-fill').css('color', '#166534');
            } else {
                iconBox.css('background', '#e0f2fe');
                icon.attr('class', 'ri-notification-3-fill').css('color', '#0369a1');
            }
        }

        function applyTemplate(templateName) {
            if (templateName === 'promo') {
                $('#notifType').val('PROMO').trigger('change');
                $('#notifTitle').val('Promo Gajian: Cashback Investasi Reksa Dana 10%! 🎁').trigger('input');
                $('#notifMessage').val('Mulai investasi reksa dana bulan ini dan raih cashback unit penyertaan hingga Rp 250.000 khusus transaksi pertama Anda! Jangan lewatkan kesempatan emas ini.').trigger('input');
                $('#actionUrl').val('/investments');
            } else if (templateName === 'kyc') {
                $('#notifType').val('KYC').trigger('change');
                $('#notifTitle').val('Buka Akses Penuh: Lengkapi Verifikasi KYC Akun Anda 🛡️').trigger('input');
                $('#notifMessage').val('Tingkatkan keamanan akun Anda dan nikmati transaksi investasi reksa dana tanpa batas saldo dengan melengkapi verifikasi identitas (KYC) sekarang juga.').trigger('input');
                $('#actionUrl').val('/kyc');
            } else if (templateName === 'maintenance') {
                $('#notifType').val('SYSTEM').trigger('change');
                $('#notifTitle').val('Pemberitahuan: Pemeliharaan Sistem Terjadwal ⚙️').trigger('input');
                $('#notifMessage').val('Kami akan melakukan pemeliharaan infrastruktur rutin pada hari Minggu pukul 01:00 - 04:00 WIB guna meningkatkan kenyamanan dan kecepatan transaksi Anda.').trigger('input');
                $('#actionUrl').val('');
            }
        }

        function resetLivePreview() {
            setTimeout(function() {
                $('#notifTitle').trigger('input');
                $('#notifMessage').trigger('input');
                $('#imageUrl').trigger('input');
                $('#notifType').trigger('change');
            }, 100);
        }
    </script>
@endsection