@extends('layouts.adminlte')

@section('title', 'SETTING MOBILE APP')
@section('page_title', 'SETTING MOBILE APP')

@push('styles')
    <style>
        .mobile-settings-page .page-shell {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 300px;
            gap: 18px;
            align-items: start;
        }
        .mobile-settings-page .settings-card {
            border: 1px solid #e5e7eb;
            border-radius: 16px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
            overflow: hidden;
        }
        .mobile-settings-page .settings-card + .settings-card {
            margin-top: 16px;
        }
        .mobile-settings-page .settings-card .card-head {
            padding: 16px 18px 0;
        }
        .mobile-settings-page .settings-card .card-head h5 {
            margin: 0;
            font-size: 16px;
            font-weight: 700;
            color: #0f172a;
        }
        .mobile-settings-page .settings-card .card-head p {
            margin: 6px 0 0;
            color: #64748b;
            font-size: 13px;
        }
        .mobile-settings-page .settings-card .card-body {
            padding: 16px 18px 18px;
        }
        .mobile-settings-page .subgrid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 14px 16px;
        }
        .mobile-settings-page .span-3 { grid-column: span 3; }
        .mobile-settings-page .span-4 { grid-column: span 4; }
        .mobile-settings-page .span-6 { grid-column: span 6; }
        .mobile-settings-page .span-8 { grid-column: span 8; }
        .mobile-settings-page .span-12 { grid-column: span 12; }
        .mobile-settings-page .field-note {
            display: block;
            margin-top: 6px;
            color: #64748b;
            font-size: 12px;
            line-height: 1.45;
        }
        .mobile-settings-page .html-editor {
            border: 1px solid #dbeafe;
            border-radius: 14px;
            overflow: hidden;
            background: #fff;
        }
        .mobile-settings-page .html-editor-toolbar {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            padding: 8px;
            border-bottom: 1px solid #e2e8f0;
            background: #f8fafc;
        }
        .mobile-settings-page .html-editor-toolbar .btn {
            padding: 4px 8px;
            font-size: 12px;
            font-weight: 700;
        }
        .mobile-settings-page .html-editor textarea {
            border: 0;
            border-radius: 0;
            resize: vertical;
        }
        .mobile-settings-page .html-preview {
            min-height: 74px;
            padding: 12px;
            border-top: 1px solid #e2e8f0;
            background: #eff6ff;
            color: #0f172a;
            font-size: 13px;
            line-height: 1.45;
        }
        .mobile-settings-page .html-preview:empty::before {
            content: 'Preview HTML akan tampil di sini.';
            color: #64748b;
        }
        .mobile-settings-page .toggle-box {
            height: 100%;
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            padding: 12px 14px;
            background: #f8fafc;
        }
        .mobile-settings-page .toggle-box .form-check {
            margin-bottom: 6px;
        }
        .mobile-settings-page .toggle-box .form-check-label {
            font-weight: 600;
            color: #0f172a;
        }
        .mobile-settings-page .quick-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 10px;
        }
        .mobile-settings-page .quick-stat {
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            padding: 12px 14px;
            background: #fff;
        }
        .mobile-settings-page .quick-stat .label {
            color: #64748b;
            font-size: 12px;
            margin-bottom: 4px;
        }
        .mobile-settings-page .quick-stat .value {
            color: #0f172a;
            font-weight: 700;
            font-size: 15px;
        }
        .mobile-settings-page .side-panel {
            position: sticky;
            top: 14px;
            align-self: start;
        }
        .mobile-settings-page .menu-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }
        .mobile-settings-page .menu-box {
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            padding: 12px 14px;
            background: #fff;
        }
        .mobile-settings-page .menu-box .form-check {
            margin: 0;
        }
        .mobile-settings-page .menu-box .form-check-label {
            font-weight: 600;
            color: #0f172a;
        }
        .mobile-settings-page .guide-box {
            border: 1px dashed #cbd5e1;
            border-radius: 14px;
            padding: 12px 14px;
            background: #f8fafc;
            font-size: 13px;
            color: #475569;
        }
        .mobile-settings-page .profile-batch-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 14px;
            border: 1px solid #bfdbfe;
            border-radius: 14px;
            padding: 12px 14px;
            background: linear-gradient(135deg, #eff6ff, #f8fafc);
        }
        .mobile-settings-page .profile-batch-actions .title {
            color: #0f172a;
            font-weight: 700;
            margin-bottom: 2px;
        }
        .mobile-settings-page .profile-batch-actions .desc {
            color: #64748b;
            font-size: 12px;
            line-height: 1.45;
        }
        .mobile-settings-page .profile-batch-actions .actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 8px;
            min-width: 320px;
        }
        .mobile-settings-page .save-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            border-top: 1px solid #e5e7eb;
            padding-top: 16px;
            margin-top: 18px;
        }
        .mobile-settings-page .save-bar .hint {
            color: #64748b;
            font-size: 12px;
        }
        .mobile-settings-page .tag-picker {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 10px;
        }
        .mobile-settings-page .tag-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border: 1px solid #dbe4ee;
            border-radius: 999px;
            padding: 6px 10px;
            background: #f8fafc;
            color: #0f172a;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            transition: all .15s ease;
        }
        .mobile-settings-page .tag-chip:hover {
            border-color: #93c5fd;
            background: #eff6ff;
            color: #1d4ed8;
        }
        .mobile-settings-page .tag-chip.is-active {
            border-color: #99f6e4;
            background: #ecfeff;
            color: #0f766e;
        }
        .mobile-settings-page .tag-chip code {
            font-size: 11px;
            color: inherit;
            background: transparent;
            padding: 0;
        }
        .mobile-settings-page .theme-color-field {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .mobile-settings-page .theme-color-field input[type="color"] {
            width: 48px;
            height: 38px;
            padding: 3px;
            border-radius: 10px;
        }
        .mobile-settings-page .theme-preview {
            min-height: 100%;
            border: 1px solid #e2e8f0;
            border-radius: 18px;
            padding: 16px;
        }
        .mobile-settings-page .theme-preview-phone {
            max-width: 280px;
            border-radius: 26px;
            padding: 16px;
            box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08), 0 16px 40px rgba(15, 23, 42, .12);
        }
        .mobile-settings-page .theme-preview-card {
            border-radius: 20px;
            padding: 16px;
            box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
        }
        .mobile-settings-page .theme-preview-button {
            border: 0;
            border-radius: 999px;
            padding: 10px 16px;
            color: #fff;
            font-weight: 700;
            width: 100%;
        }
        .mobile-settings-page .theme-preview-badge {
            display: inline-flex;
            align-items: center;
            border-radius: 999px;
            padding: 4px 10px;
            color: #fff;
            font-size: 12px;
            font-weight: 700;
        }
        @media (max-width: 1200px) {
            .mobile-settings-page .page-shell {
                grid-template-columns: minmax(0, 1fr);
            }
            .mobile-settings-page .side-panel {
                position: static;
            }
        }
        @media (max-width: 768px) {
            .mobile-settings-page .span-3,
            .mobile-settings-page .span-4,
            .mobile-settings-page .span-6,
            .mobile-settings-page .span-8,
            .mobile-settings-page .span-12 {
                grid-column: span 12;
            }
            .mobile-settings-page .quick-grid,
            .mobile-settings-page .menu-grid {
                grid-template-columns: 1fr;
            }
            .mobile-settings-page .profile-batch-actions {
                align-items: stretch;
                flex-direction: column;
            }
            .mobile-settings-page .profile-batch-actions .actions {
                min-width: 0;
                justify-content: stretch;
            }
            .mobile-settings-page .profile-batch-actions .actions .btn {
                flex: 1 1 100%;
            }
        }
    </style>
@endpush

@section('content')
    <div class="mobile-settings-page">
        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        @if($errors->any())
            <div class="alert alert-danger mb-3">
                <div class="fw-semibold mb-1">Ada beberapa input yang perlu diperiksa:</div>
                <ul class="mb-0 ps-3">
                    @foreach($errors->all() as $err)
                        <li>{{ $err }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST" action="{{ route('attendance_mobile_notification_settings_v2.update') }}">
            @csrf

            <div class="page-shell">
                <div>
                    <div class="settings-card">
                        <div class="card-head">
                            <h5>Ringkasan Cepat</h5>
                            <p>Lihat kondisi utama mobile app sebelum mengubah detail setting.</p>
                        </div>
                        <div class="card-body">
                            <div class="quick-grid">
                                <div class="quick-stat">
                                    <div class="label">Offline Queue</div>
                                    <div class="value">{{ $mobile_offline_allowed ? 'Diizinkan' : 'Dimatikan' }}</div>
                                </div>
                                <div class="quick-stat">
                                    <div class="label">Mode Absen</div>
                                    <div class="value">
                                        @php
                                            $activeAttendanceModes = collect([
                                                $mobile_attendance_mode_face ? 'FaceID' : null,
                                                $mobile_attendance_mode_gps ? 'GPS' : null,
                                                $mobile_attendance_mode_twofa ? '2FA' : null,
                                            ])->filter()->implode(' + ');
                                        @endphp
                                        {{ $activeAttendanceModes !== '' ? $activeAttendanceModes : 'Belum ada mode aktif' }}
                                    </div>
                                </div>
                                <div class="quick-stat">
                                    <div class="label">Log Bug Mobile</div>
                                    <div class="value">{{ $mobile_client_log_enabled ? 'Aktif' : 'Nonaktif' }}</div>
                                </div>
                                <div class="quick-stat">
                                    <div class="label">Required Android / iOS</div>
                                    <div class="value">
                                        A: {{ $mobile_android_required_version !== '' ? $mobile_android_required_version : '-' }}
                                        <br>
                                        I: {{ $mobile_ios_required_version !== '' ? $mobile_ios_required_version : '-' }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="settings-card">
                        <div class="card-head">
                            <h5>Branding Login</h5>
                            <p>Dipakai bersama oleh login Laravel dan aplikasi Flutter.</p>
                        </div>
                        <div class="card-body">
                            <div class="subgrid">
                                <div class="span-6">
                                    <label class="form-label">Nama Perusahaan</label>
                                    <input type="text" class="form-control" name="login_company_name" maxlength="120"
                                           value="{{ old('login_company_name', $login_company_name) }}"
                                           placeholder="Contoh: PT. Hikari Teknologi Indonesia">
                                </div>
                                <div class="span-6">
                                    <label class="form-label">URL Logo Login</label>
                                    <input type="text" class="form-control" name="login_logo_url" maxlength="500"
                                           value="{{ old('login_logo_url', $login_logo_url) }}"
                                           placeholder="https://... atau /storage/...">
                                    <small class="field-note">Contoh: <code>/storage/branding/logo-login.png</code></small>
                                </div>
                            </div>
                        </div>
                    </div>

                    @php
                        $themePreview = [
                            'enabled' => old('mobile_theme_enabled', $mobile_theme_enabled ? '1' : '0') === '1',
                            'name' => old('mobile_theme_name', $mobile_theme_name),
                            'event_label' => old('mobile_theme_event_label', $mobile_theme_event_label),
                            'primary' => old('mobile_theme_primary_color', $mobile_theme_primary_color),
                            'primary_dark' => old('mobile_theme_primary_dark_color', $mobile_theme_primary_dark_color),
                            'secondary' => old('mobile_theme_secondary_color', $mobile_theme_secondary_color),
                            'background' => old('mobile_theme_background_color', $mobile_theme_background_color),
                            'surface' => old('mobile_theme_surface_color', $mobile_theme_surface_color),
                            'text' => old('mobile_theme_text_color', $mobile_theme_text_color),
                            'muted' => old('mobile_theme_muted_text_color', $mobile_theme_muted_text_color),
                            'gradient_enabled' => old('mobile_theme_gradient_enabled', $mobile_theme_gradient_enabled ? '1' : '0') === '1',
                            'gradient_start' => old('mobile_theme_gradient_start_color', $mobile_theme_gradient_start_color),
                            'gradient_end' => old('mobile_theme_gradient_end_color', $mobile_theme_gradient_end_color),
                        ];
                    @endphp
                    <div class="settings-card">
                        <div class="card-head">
                            <h5>Tema Android / Event Theme</h5>
                            <p>Warna ini dikirim dari Laravel ke aplikasi Android saat app refresh data, login, atau membuka dashboard.</p>
                        </div>
                        <div class="card-body">
                            <div class="subgrid">
                                <div class="span-4">
                                    <div class="toggle-box">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="mobileThemeEnabled" name="mobile_theme_enabled" value="1" {{ $themePreview['enabled'] ? 'checked' : '' }}>
                                            <label class="form-check-label" for="mobileThemeEnabled">Aktifkan Tema dari Server</label>
                                        </div>
                                        <small class="field-note">Jika OFF, Android memakai tema default aplikasi.</small>
                                    </div>
                                </div>
                                <div class="span-4">
                                    <label class="form-label">Nama Tema</label>
                                    <input type="text" class="form-control js-theme-preview-input" name="mobile_theme_name" maxlength="80"
                                           data-preview-target="themeName"
                                           value="{{ $themePreview['name'] }}"
                                           placeholder="Contoh: Lebaran 2026">
                                </div>
                                <div class="span-4">
                                    <label class="form-label">Label Event</label>
                                    <input type="text" class="form-control js-theme-preview-input" name="mobile_theme_event_label" maxlength="80"
                                           data-preview-target="themeEvent"
                                           value="{{ $themePreview['event_label'] }}"
                                           placeholder="Contoh: Event Ramadhan">
                                    <small class="field-note">Opsional, tampil sebagai penanda tema/event.</small>
                                </div>

                                <div class="span-8">
                                    <div class="subgrid">
                                        <div class="span-4">
                                            <label class="form-label">Primary</label>
                                            <div class="theme-color-field">
                                                <input type="color" class="form-control form-control-color js-theme-color" name="mobile_theme_primary_color" data-theme-var="primary" value="{{ $themePreview['primary'] }}">
                                                <code>{{ $themePreview['primary'] }}</code>
                                            </div>
                                        </div>
                                        <div class="span-4">
                                            <label class="form-label">Primary Dark</label>
                                            <div class="theme-color-field">
                                                <input type="color" class="form-control form-control-color js-theme-color" name="mobile_theme_primary_dark_color" data-theme-var="primaryDark" value="{{ $themePreview['primary_dark'] }}">
                                                <code>{{ $themePreview['primary_dark'] }}</code>
                                            </div>
                                        </div>
                                        <div class="span-4">
                                            <label class="form-label">Secondary</label>
                                            <div class="theme-color-field">
                                                <input type="color" class="form-control form-control-color js-theme-color" name="mobile_theme_secondary_color" data-theme-var="secondary" value="{{ $themePreview['secondary'] }}">
                                                <code>{{ $themePreview['secondary'] }}</code>
                                            </div>
                                        </div>
                                        <div class="span-4">
                                            <label class="form-label">Background</label>
                                            <div class="theme-color-field">
                                                <input type="color" class="form-control form-control-color js-theme-color" name="mobile_theme_background_color" data-theme-var="background" value="{{ $themePreview['background'] }}">
                                                <code>{{ $themePreview['background'] }}</code>
                                            </div>
                                        </div>
                                        <div class="span-4">
                                            <label class="form-label">Surface / Card</label>
                                            <div class="theme-color-field">
                                                <input type="color" class="form-control form-control-color js-theme-color" name="mobile_theme_surface_color" data-theme-var="surface" value="{{ $themePreview['surface'] }}">
                                                <code>{{ $themePreview['surface'] }}</code>
                                            </div>
                                        </div>
                                        <div class="span-4">
                                            <label class="form-label">Text</label>
                                            <div class="theme-color-field">
                                                <input type="color" class="form-control form-control-color js-theme-color" name="mobile_theme_text_color" data-theme-var="text" value="{{ $themePreview['text'] }}">
                                                <code>{{ $themePreview['text'] }}</code>
                                            </div>
                                        </div>
                                        <div class="span-4">
                                            <label class="form-label">Muted Text</label>
                                            <div class="theme-color-field">
                                                <input type="color" class="form-control form-control-color js-theme-color" name="mobile_theme_muted_text_color" data-theme-var="muted" value="{{ $themePreview['muted'] }}">
                                                <code>{{ $themePreview['muted'] }}</code>
                                            </div>
                                        </div>
                                        <div class="span-4">
                                            <div class="toggle-box h-100">
                                                <div class="form-check form-switch">
                                                    <input class="form-check-input" type="checkbox" id="mobileThemeGradientEnabled" name="mobile_theme_gradient_enabled" value="1" {{ $themePreview['gradient_enabled'] ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="mobileThemeGradientEnabled">Aktifkan Gradasi</label>
                                                </div>
                                                <small class="field-note">Jika aktif, background halaman mobile memakai warna start-end.</small>
                                            </div>
                                        </div>
                                        <div class="span-4">
                                            <label class="form-label">Gradient Start</label>
                                            <div class="theme-color-field">
                                                <input type="color" class="form-control form-control-color js-theme-color" name="mobile_theme_gradient_start_color" data-theme-var="gradientStart" value="{{ $themePreview['gradient_start'] }}">
                                                <code>{{ $themePreview['gradient_start'] }}</code>
                                            </div>
                                        </div>
                                        <div class="span-4">
                                            <label class="form-label">Gradient End</label>
                                            <div class="theme-color-field">
                                                <input type="color" class="form-control form-control-color js-theme-color" name="mobile_theme_gradient_end_color" data-theme-var="gradientEnd" value="{{ $themePreview['gradient_end'] }}">
                                                <code>{{ $themePreview['gradient_end'] }}</code>
                                            </div>
                                        </div>
                                    </div>
                                    <small class="field-note">Perubahan warna berlaku setelah klik Simpan, lalu user mobile refresh data / buka ulang dashboard.</small>
                                </div>

                                <div class="span-4">
                                    <div class="theme-preview" id="themePreviewShell" style="background: {{ $themePreview['background'] }};">
                                        <div class="theme-preview-phone" id="themePreviewPhone" style="background: {{ $themePreview['background'] }};">
                                            <div class="theme-preview-card" id="themePreviewCard" style="background: {{ $themePreview['surface'] }};">
                                                <div class="d-flex justify-content-between align-items-start mb-3">
                                                    <div>
                                                        <div id="themePreviewName" class="fw-bold" style="color: {{ $themePreview['text'] }};">{{ $themePreview['name'] }}</div>
                                                        <small id="themePreviewMuted" style="color: {{ $themePreview['muted'] }};">Halo, Karyawan</small>
                                                    </div>
                                                    <span class="theme-preview-badge" id="themePreviewBadge" style="background: {{ $themePreview['secondary'] }};">{{ $themePreview['event_label'] !== '' ? $themePreview['event_label'] : 'Mobile' }}</span>
                                                </div>
                                                <div class="mb-3" style="color: {{ $themePreview['text'] }};">
                                                    <div class="fw-bold fs-5">08:00 / 17:00</div>
                                                    <small id="themePreviewCaption" style="color: {{ $themePreview['muted'] }};">Preview kartu dashboard Android</small>
                                                </div>
                                                <button type="button" class="theme-preview-button" id="themePreviewButton" style="background: {{ $themePreview['primary'] }};">SUBMIT</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="settings-card">
                        <div class="card-head">
                            <h5>Presensi Mobile</h5>
                            <p>Atur apakah user boleh offline, butuh selfie, dan apakah face AI wajib.</p>
                        </div>
                        <div class="card-body">
                            <div class="subgrid">
                                <div class="span-4">
                                    <div class="toggle-box">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="mobileOfflineAllowed" name="mobile_offline_allowed" value="1" {{ old('mobile_offline_allowed', $mobile_offline_allowed ? '1' : '0') === '1' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="mobileOfflineAllowed">Izinkan Offline Queue</label>
                                        </div>
                                        <small class="field-note">Jika internet putus, data presensi boleh disimpan dulu di HP lalu dikirim belakangan.</small>
                                    </div>
                                </div>
                                <div class="span-4">
                                    <div class="toggle-box">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="mobileOfflineRequireApproval" name="mobile_offline_require_approval" value="1" {{ old('mobile_offline_require_approval', $mobile_offline_require_approval ? '1' : '0') === '1' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="mobileOfflineRequireApproval">Offline Wajib Approval</label>
                                        </div>
                                        <small class="field-note">Gunakan jika log offline ingin ditinjau HR/Admin sebelum dianggap final.</small>
                                    </div>
                                </div>
                                <div class="span-4">
                                    <label class="form-label">Maksimal Usia Queue Offline (menit)</label>
                                    <input type="number" class="form-control" name="mobile_max_offline_minutes" min="1" max="10080"
                                           value="{{ old('mobile_max_offline_minutes', $mobile_max_offline_minutes) }}">
                                    <small class="field-note">Jika lewat batas ini saat sync, server akan menolak log offline.</small>
                                </div>

                                <div class="span-4">
                                    <div class="toggle-box">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input js-attendance-mode-toggle" type="checkbox" id="mobileAttendanceModeFace" name="mobile_attendance_mode_face" value="1" {{ old('mobile_attendance_mode_face', $mobile_attendance_mode_face ? '1' : '0') === '1' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="mobileAttendanceModeFace">Mode FaceID + GPS</label>
                                        </div>
                                        <small class="field-note">Jika OFF, tab FaceID di Android akan dikunci dan submit sumber FaceID ditolak server.</small>
                                    </div>
                                </div>
                                <div class="span-4">
                                    <div class="toggle-box">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input js-attendance-mode-toggle" type="checkbox" id="mobileAttendanceModeGps" name="mobile_attendance_mode_gps" value="1" {{ old('mobile_attendance_mode_gps', $mobile_attendance_mode_gps ? '1' : '0') === '1' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="mobileAttendanceModeGps">Mode GPS Only</label>
                                        </div>
                                        <small class="field-note">Jika ON, user boleh presensi cukup GPS sesuai radius/site tanpa FaceID.</small>
                                    </div>
                                </div>
                                <div class="span-4">
                                    <div class="toggle-box">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input js-attendance-mode-toggle" type="checkbox" id="mobileAttendanceModeTwofa" name="mobile_attendance_mode_twofa" value="1" {{ old('mobile_attendance_mode_twofa', $mobile_attendance_mode_twofa ? '1' : '0') === '1' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="mobileAttendanceModeTwofa">Mode 2FA + GPS</label>
                                        </div>
                                        <small class="field-note">Jika ON, user bisa submit setelah scan QR 2FA aktif dan GPS valid.</small>
                                    </div>
                                </div>

                                <div class="span-4">
                                    <div class="toggle-box">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="mobileAttendanceRequirePhoto" name="mobile_attendance_require_photo" value="1" {{ old('mobile_attendance_require_photo', $mobile_attendance_require_photo ? '1' : '0') === '1' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="mobileAttendanceRequirePhoto">Wajib Selfie</label>
                                        </div>
                                        <small class="field-note">Aturan ini berlaku untuk mode FaceID + GPS. Mode GPS Only dan 2FA + GPS diatur oleh switch mode di atas.</small>
                                    </div>
                                </div>
                                <div class="span-4">
                                    <div class="toggle-box">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="mobileAttendanceRequireFaceAi" name="mobile_attendance_require_face_ai" value="1" {{ old('mobile_attendance_require_face_ai', $mobile_attendance_require_face_ai ? '1' : '0') === '1' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="mobileAttendanceRequireFaceAi">Wajib Face AI Match / Liveness</label>
                                        </div>
                                        <small class="field-note">Otomatis hanya relevan jika wajib selfie dan mode FaceID + GPS aktif.</small>
                                    </div>
                                </div>
                                <div class="span-4">
                                    <div class="toggle-box border border-warning-subtle bg-warning-subtle">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="mobileAttendanceRequireFaceLivenessChallenge" name="mobile_attendance_require_face_liveness_challenge" value="1" {{ old('mobile_attendance_require_face_liveness_challenge', $mobile_attendance_require_face_liveness_challenge ? '1' : '0') === '1' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="mobileAttendanceRequireFaceLivenessChallenge">Anti Foto Cetak</label>
                                        </div>
                                        <small class="field-note">Jika ON, FaceID wajib membawa challenge liveness dari Android. Payload FaceID lama tanpa challenge akan ditolak server.</small>
                                    </div>
                                </div>
                                <div class="span-4">
                                    <label class="form-label">Profil FaceID</label>
                                    <select class="form-select" name="mobile_attendance_face_profile">
                                        <option value="strict" {{ old('mobile_attendance_face_profile', $mobile_attendance_face_profile ?? 'normal') === 'strict' ? 'selected' : '' }}>
                                            Strict
                                        </option>
                                        <option value="normal" {{ old('mobile_attendance_face_profile', $mobile_attendance_face_profile ?? 'normal') === 'normal' ? 'selected' : '' }}>
                                            Normal
                                        </option>
                                        <option value="hijab_friendly" {{ old('mobile_attendance_face_profile', $mobile_attendance_face_profile ?? 'normal') === 'hijab_friendly' ? 'selected' : '' }}>
                                            Hijab Friendly
                                        </option>
                                    </select>
                                    <small class="field-note">Strict = paling ketat. Normal = default aman. Hijab Friendly = lebih toleran untuk wajah berjilbab dan kacamata, tetapi masker penuh tetap ditolak.</small>
                                </div>
                                <div class="span-4">
                                    <label class="form-label">Minimum Face Match Score</label>
                                    <input type="number" class="form-control" name="mobile_attendance_min_face_match_score" min="0.10" max="1.00" step="0.01"
                                           value="{{ old('mobile_attendance_min_face_match_score', number_format($mobile_attendance_min_face_match_score, 2, '.', '')) }}">
                                    <small class="field-note">Semakin kecil semakin mudah lolos. Default aman: 0.75. Coba 0.70 jika scan terasa terlalu susah.</small>
                                </div>
                                <div class="span-4">
                                    <label class="form-label">Minimum Face Liveness Score</label>
                                    <input type="number" class="form-control" name="mobile_attendance_min_face_liveness_score" min="0.10" max="1.00" step="0.01"
                                           value="{{ old('mobile_attendance_min_face_liveness_score', number_format($mobile_attendance_min_face_liveness_score, 2, '.', '')) }}">
                                    <small class="field-note">Dipakai server untuk validasi liveness. Jika challenge aktif dan sering gagal, coba 0.70 - 0.75.</small>
                                </div>
                                <div class="span-4">
                                    <label class="form-label">Batas Akurasi GPS Web / iOS (meter)</label>
                                    <input type="number" class="form-control" name="mobile_attendance_web_max_gps_accuracy_meter" min="1" max="10000" step="0.1"
                                           value="{{ old('mobile_attendance_web_max_gps_accuracy_meter', $mobile_attendance_web_max_gps_accuracy_meter) }}">
                                    <small class="field-note">Khusus web/iOS. Android tetap memakai batas GPS native. Nilai lebih besar menoleransi GPS Safari yang kasar.</small>
                                </div>
                                <div class="span-4">
                                    <div class="toggle-box border border-info-subtle bg-info-subtle">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="mobileAttendanceSiteRequiredDefault" name="mobile_attendance_site_required_default" value="1" {{ old('mobile_attendance_site_required_default', $mobile_attendance_site_required_default ? '1' : '0') === '1' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="mobileAttendanceSiteRequiredDefault">Default Scan Lokasi Wajib</label>
                                        </div>
                                        <small class="field-note">Jika ON, user tanpa penugasan lokasi harian tidak bisa submit presensi sampai diberi Site Assign.</small>
                                    </div>
                                </div>
                                <div class="span-4">
                                    <div class="toggle-box" style="opacity:0.6; pointer-events:none;">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" disabled
                                                {{ $mobile_attendance_allow_without_shift_or_spl ? 'checked' : '' }}>
                                            <label class="form-check-label">Izinkan Presensi Tanpa Shift / SPL</label>
                                        </div>
                                        <small class="field-note">
                                            <i class="fas fa-info-circle text-info"></i>
                                            Pengaturan ini sudah dipindah ke section <strong>"Policy Aplikasi"</strong> di bawah.
                                            Silakan atur di bagian SPL / Leave / Forgetting Clock.
                                        </small>
                                    </div>
                                    <input type="hidden" name="mobile_attendance_allow_without_shift_or_spl"
                                        value="{{ $mobile_attendance_allow_without_shift_or_spl ? '1' : '0' }}">
                                </div>
                                <div class="span-4">
                                    <label class="form-label">Anti Spam Scan (detik)</label>
                                    <input type="number" class="form-control" name="mobile_attendance_repeat_interval_seconds" min="10" max="3600"
                                           value="{{ old('mobile_attendance_repeat_interval_seconds', $mobile_attendance_repeat_interval_seconds) }}">
                                    <small class="field-note">Scan IN/OUT dengan tipe yang sama akan ditolak jika berulang lebih cepat dari nilai ini. Default aman: 60 detik.</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="settings-card">
                        <div class="card-head">
                            <h5>Policy Aplikasi (SPL / Cuti / Lupa Absen)</h5>
                            <p>Atur aturan untuk pengajuan SPL, cuti/leave, dan lupa absen. Perubahan berlaku untuk semua user mobile.</p>
                        </div>
                        <div class="card-body">
                            {{-- SPL --}}
                            <div class="mb-4">
                                <h6 class="fw-bold mb-2"><i class="fas fa-briefcase me-1"></i> SPL (Surat Perintah Lembur)</h6>
                                <div class="subgrid">
                                    <div class="span-4">
                                        <div class="toggle-box">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="splRequireEligible" name="spl_require_eligible" value="1"
                                                    {{ old('spl_require_eligible', $spl_require_eligible ? '1' : '0') === '1' ? 'checked' : '' }}>
                                                <label class="form-check-label" for="splRequireEligible">Require Eligible</label>
                                            </div>
                                            <small class="field-note">Cek kelayakan sebelum izinkan pengajuan SPL.</small>
                                        </div>
                                    </div>
                                    <div class="span-4">
                                        <div class="toggle-box">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="splAllowWeekend" name="spl_allow_weekend" value="1"
                                                    {{ old('spl_allow_weekend', $spl_allow_weekend ? '1' : '0') === '1' ? 'checked' : '' }}>
                                                <label class="form-check-label" for="splAllowWeekend">Boleh Weekend</label>
                                            </div>
                                            <small class="field-note">Izinkan pengajuan SPL di hari Sabtu/Minggu.</small>
                                        </div>
                                    </div>
                                    <div class="span-4">
                                        <div class="toggle-box">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="splAllowHoliday" name="spl_allow_holiday" value="1"
                                                    {{ old('spl_allow_holiday', $spl_allow_holiday ? '1' : '0') === '1' ? 'checked' : '' }}>
                                                <label class="form-check-label" for="splAllowHoliday">Boleh Hari Libur</label>
                                            </div>
                                            <small class="field-note">Izinkan pengajuan SPL di hari libur nasional.</small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <hr class="my-3">

                            {{-- Leave / Cuti --}}
                            <div class="mb-4">
                                <h6 class="fw-bold mb-2"><i class="fas fa-calendar-minus me-1"></i> Leave / Cuti</h6>
                                <div class="subgrid">
                                    <div class="span-4">
                                        <div class="toggle-box">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="leaveRequireEligible" name="leave_require_eligible" value="1"
                                                    {{ old('leave_require_eligible', $leave_require_eligible ? '1' : '0') === '1' ? 'checked' : '' }}>
                                                <label class="form-check-label" for="leaveRequireEligible">Require Eligible</label>
                                            </div>
                                            <small class="field-note">Cek kelayakan cuti sebelum izinkan pengajuan.</small>
                                        </div>
                                    </div>
                                    <div class="span-4">
                                        <div class="toggle-box">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="leaveAllowWeekend" name="leave_allow_weekend" value="1"
                                                    {{ old('leave_allow_weekend', $leave_allow_weekend ? '1' : '0') === '1' ? 'checked' : '' }}>
                                                <label class="form-check-label" for="leaveAllowWeekend">Boleh Weekend</label>
                                            </div>
                                            <small class="field-note">Izinkan cuti jatuh di hari Sabtu/Minggu.</small>
                                        </div>
                                    </div>
                                    <div class="span-4">
                                        <div class="toggle-box">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="leaveAllowHoliday" name="leave_allow_holiday" value="1"
                                                    {{ old('leave_allow_holiday', $leave_allow_holiday ? '1' : '0') === '1' ? 'checked' : '' }}>
                                                <label class="form-check-label" for="leaveAllowHoliday">Boleh Hari Libur</label>
                                            </div>
                                            <small class="field-note">Izinkan cuti jatuh di hari libur nasional.</small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <hr class="my-3">

                            {{-- Forgetting Clock / Lupa Absen --}}
                            <div class="mb-2">
                                <h6 class="fw-bold mb-2"><i class="fas fa-clock me-1"></i> Lupa Absen (Forgetting Clock)</h6>
                                <div class="subgrid">
                                    <div class="span-4">
                                        <div class="toggle-box">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="forgettingClockRequireEligible" name="forgetting_clock_require_eligible" value="1"
                                                    {{ old('forgetting_clock_require_eligible', $forgetting_clock_require_eligible ? '1' : '0') === '1' ? 'checked' : '' }}>
                                                <label class="form-check-label" for="forgettingClockRequireEligible">Require Eligible</label>
                                            </div>
                                            <small class="field-note">Cek kelayakan sebelum izinkan pengajuan lupa absen.</small>
                                        </div>
                                    </div>
                                    <div class="span-4">
                                        <div class="toggle-box">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="forgettingClockAllowWeekend" name="forgetting_clock_allow_weekend" value="1"
                                                    {{ old('forgetting_clock_allow_weekend', $forgetting_clock_allow_weekend ? '1' : '0') === '1' ? 'checked' : '' }}>
                                                <label class="form-check-label" for="forgettingClockAllowWeekend">Boleh Weekend</label>
                                            </div>
                                            <small class="field-note">Izinkan pengajuan lupa absen di hari Sabtu/Minggu.</small>
                                        </div>
                                    </div>
                                    <div class="span-4">
                                        <div class="toggle-box">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" id="forgettingClockAllowHoliday" name="forgetting_clock_allow_holiday" value="1"
                                                    {{ old('forgetting_clock_allow_holiday', $forgetting_clock_allow_holiday ? '1' : '0') === '1' ? 'checked' : '' }}>
                                                <label class="form-check-label" for="forgettingClockAllowHoliday">Boleh Hari Libur</label>
                                            </div>
                                            <small class="field-note">Izinkan pengajuan lupa absen di hari libur nasional.</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="settings-card">
                        <div class="card-head">
                            <h5>Notifikasi & Broadcast</h5>
                            <p>Atur reminder check-in/check-out dan pesan broadcast untuk user mobile.</p>
                        </div>
                        <div class="card-body">
                            <div class="subgrid">
                                <div class="span-12">
                                    <div class="toggle-box">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="broadcastEnabled" name="broadcast_enabled" value="1"
                                                   {{ old('broadcast_enabled', $broadcast_enabled ? '1' : '0') === '1' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="broadcastEnabled">Aktifkan Broadcast ke Flutter</label>
                                        </div>
                                        <small class="field-note">Kalau aktif, pesan di bawah akan ikut dipolling oleh aplikasi mobile.</small>
                                    </div>
                                </div>

                                <div class="span-6">
                                    <label class="form-label">Judul Broadcast</label>
                                    <input type="text" class="form-control" name="broadcast_title" maxlength="120"
                                           value="{{ old('broadcast_title', $broadcast_title) }}"
                                           placeholder="Contoh: Info HRGA">
                                </div>
                                <div class="span-6">
                                    <label class="form-label">Jam Tetap Cek Hadir (HH:mm)</label>
                                    <input type="time" class="form-control" name="morning_check_time"
                                           value="{{ old('morning_check_time', $morning_check_time) }}">
                                    <small class="field-note">Dipakai jika mode cek hadir pagi = jam tetap.</small>
                                </div>
                                <div class="span-6">
                                    <label class="form-label">Reminder Check-in (menit)</label>
                                    <input type="number" class="form-control" name="checkin_grace_minutes" min="0" max="240"
                                           value="{{ old('checkin_grace_minutes', $checkin_grace_minutes) }}">
                                </div>
                                <div class="span-6">
                                    <label class="form-label">Reminder Check-out (menit)</label>
                                    <input type="number" class="form-control" name="checkout_grace_minutes" min="0" max="240"
                                           value="{{ old('checkout_grace_minutes', $checkout_grace_minutes) }}">
                                </div>
                                <div class="span-6">
                                    <label class="form-label">Mode Cek Hadir Pagi</label>
                                    <select class="form-select" name="morning_check_mode">
                                        <option value="shift" {{ old('morning_check_mode', $morning_check_mode) === 'shift' ? 'selected' : '' }}>
                                            Berdasarkan Jadwal Shift
                                        </option>
                                        <option value="fixed" {{ old('morning_check_mode', $morning_check_mode) === 'fixed' ? 'selected' : '' }}>
                                            Jam Tetap Harian
                                        </option>
                                    </select>
                                    <small class="field-note">Shift = pakai jadwal masuk. Fixed = pakai jam tetap harian.</small>
                                </div>
                                <div class="span-3">
                                    <label class="form-label">Delay Alpha (menit)</label>
                                    <input type="number" class="form-control" name="alpha_delay_minutes" min="0" max="1440"
                                           value="{{ old('alpha_delay_minutes', $alpha_delay_minutes) }}">
                                </div>
                                <div class="span-3">
                                    <label class="form-label">Repeat Alpha (menit)</label>
                                    <input type="number" class="form-control" name="alpha_repeat_minutes" min="1" max="240"
                                           value="{{ old('alpha_repeat_minutes', $alpha_repeat_minutes) }}">
                                </div>
                                <div class="span-12">
                                    <label class="form-label">Pesan Broadcast</label>
                                    <div class="html-editor">
                                        <div class="html-editor-toolbar" data-editor-toolbar="broadcastMessage">
                                            <button type="button" class="btn btn-outline-secondary" data-insert-tag="strong"><b>B</b></button>
                                            <button type="button" class="btn btn-outline-secondary" data-insert-tag="em"><i>I</i></button>
                                            <button type="button" class="btn btn-outline-secondary" data-insert-line="br">BR</button>
                                            <button type="button" class="btn btn-outline-secondary" data-insert-block="p">Paragraf</button>
                                            <button type="button" class="btn btn-outline-secondary" data-insert-list="ul">List</button>
                                            <button type="button" class="btn btn-outline-secondary" data-insert-color="#0F766E">Hijau</button>
                                            <button type="button" class="btn btn-outline-secondary" data-insert-color="#DC2626">Merah</button>
                                            <button type="button" class="btn btn-outline-secondary" data-insert-template="update">Template Update</button>
                                        </div>
                                        <textarea id="broadcastMessage" class="form-control js-html-editor" name="broadcast_message" rows="5" maxlength="5000"
                                                  placeholder="Tulis pengumuman untuk semua user mobile...">{{ old('broadcast_message', $broadcast_message) }}</textarea>
                                        <div id="broadcastMessagePreview" class="html-preview"></div>
                                    </div>
                                    <small class="field-note">Boleh pakai HTML ringan: &lt;b&gt;, &lt;i&gt;, &lt;p&gt;, &lt;br&gt;, &lt;ul&gt;&lt;li&gt;, dan &lt;span style="color:#..."&gt;.</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="settings-card">
                        <div class="card-head">
                            <h5>Batch Update Profil Mobile</h5>
                            <p>Pengaturan batch dipisahkan agar tidak tercampur saat menyimpan setting mobile lainnya.</p>
                        </div>
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-between gap-3 flex-wrap">
                                <div>
                                    <div class="fw-semibold">Status: {{ $mobile_profile_update_enabled ? 'Aktif' : 'Nonaktif' }}</div>
                                    <small class="field-note">Batch saat ini: {{ $mobile_profile_update_batch_key ?: '-' }}</small>
                                </div>
                                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#profileUpdateBatchModal">
                                    <i class="fas fa-users-cog me-1"></i>Buka Batch Update Profil
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="modal fade" id="profileUpdateBatchModal" tabindex="-1" aria-labelledby="profileUpdateBatchModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-xl modal-dialog-scrollable">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <div>
                                        <h5 class="modal-title" id="profileUpdateBatchModalLabel">Batch Update Profil Mobile</h5>
                                        <div class="small text-muted">Atur target, kolom wajib, dokumen, lalu simpan batch dari tombol di bawah.</div>
                                    </div>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                            <div class="subgrid">
                                <div class="span-12">
                                    <div class="toggle-box">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="mobileProfileUpdateEnabled" name="mobile_profile_update_enabled" value="1" {{ old('mobile_profile_update_enabled', $mobile_profile_update_enabled ? '1' : '0') === '1' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="mobileProfileUpdateEnabled">Aktifkan Lock Update Profil</label>
                                        </div>
                                        <small class="field-note">Saat aktif, user target akan dipaksa stay di halaman pengisian profil sampai menekan finish update.</small>
                                    </div>
                                </div>
                                <div class="span-4">
                                    <label class="form-label">Batch / Gelombang</label>
                                    <input type="text" class="form-control" name="mobile_profile_update_batch_key" maxlength="80"
                                           value="{{ old('mobile_profile_update_batch_key', $mobile_profile_update_batch_key) }}"
                                           placeholder="Contoh: HR-ALAMAT-20260507">
                                    <small class="field-note">Batch key menandai gelombang popup. Jika ingin memunculkan lagi ke user yang sama, ganti batch key atau pakai tombol <strong>Simpan + Kirim Ulang Popup</strong>.</small>
                                </div>
                                <div class="span-4">
                                    <label class="form-label">Target User</label>
                                    <select class="form-select" name="mobile_profile_update_target_mode">
                                        <option value="all" {{ old('mobile_profile_update_target_mode', $mobile_profile_update_target_mode) === 'all' ? 'selected' : '' }}>Semua user mobile</option>
                                        <option value="selected" {{ old('mobile_profile_update_target_mode', $mobile_profile_update_target_mode) === 'selected' ? 'selected' : '' }}>User tertentu saja</option>
                                    </select>
                                </div>
                                <div class="span-4">
                                    <div class="toggle-box">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="mobileProfileRequireDocs" name="mobile_profile_update_require_supporting_documents" value="1" {{ old('mobile_profile_update_require_supporting_documents', $mobile_profile_update_require_supporting_documents ? '1' : '0') === '1' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="mobileProfileRequireDocs">Wajib Dokumen Pendukung</label>
                                        </div>
                                        <small class="field-note">Aktifkan jika HR juga ingin minta upload KTP, KK, BPJS, rekening, atau file pelengkap lain.</small>
                                    </div>
                                </div>
                                <div class="span-6">
                                    <label class="form-label">Judul Lock</label>
                                    <input type="text" class="form-control" name="mobile_profile_update_title" maxlength="120"
                                           value="{{ old('mobile_profile_update_title', $mobile_profile_update_title) }}"
                                           placeholder="Contoh: Update Alamat & Dokumen Wajib">
                                </div>
                                <div class="span-6">
                                    <label class="form-label">Kolom Profil Wajib</label>
                                    <input type="text" class="form-control js-tag-target" data-tag-group="profile-fields" name="mobile_profile_update_required_fields" maxlength="1000"
                                           value="{{ old('mobile_profile_update_required_fields', $mobile_profile_update_required_fields) }}"
                                           placeholder="phone,email,address,address_ktp,birth_place,birth_date,religion,npwp_no,education_level,school_name,graduation_year,emergency_contact_name,emergency_contact_phone">
                                    <small class="field-note">Klik tag field yang relevan. Referensi diambil dari kolom profil karyawan yang memang dipakai untuk mobile update.</small>
                                    <div class="tag-picker" data-tag-group="profile-fields">
                                        @foreach(($mobile_profile_update_field_refs ?? []) as $ref)
                                            <button type="button" class="tag-chip js-tag-chip" data-value="{{ $ref['key'] }}" data-target-group="profile-fields">
                                                <span>{{ $ref['label'] }}</span>
                                                <code>{{ $ref['key'] }}</code>
                                            </button>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="span-12">
                                    <label class="form-label">Pesan ke Karyawan</label>
                                    <textarea class="form-control" rows="4" name="mobile_profile_update_message" maxlength="2000"
                                              placeholder="Jelaskan alasan update massal ini, misalnya permintaan HR untuk pembaruan alamat domisili dan dokumen identitas terbaru.">{{ old('mobile_profile_update_message', $mobile_profile_update_message) }}</textarea>
                                </div>
                                <div class="span-12">
                                    <label class="form-label">Target Employee Code / Finger ID</label>
                                    <textarea class="form-control" rows="3" name="mobile_profile_update_target_employee_codes" maxlength="10000"
                                              placeholder="Contoh: EMP001, EMP002, 12345, 12346">{{ old('mobile_profile_update_target_employee_codes', $mobile_profile_update_target_employee_codes) }}</textarea>
                                    <small class="field-note">Dipakai hanya jika target = user tertentu. Bisa isi campuran employee code atau finger ID, pisahkan dengan koma / enter.</small>
                                </div>
                                <div class="span-12">
                                    <label class="form-label">Kode Dokumen Pendukung Wajib</label>
                                    <input type="text" class="form-control js-tag-target" data-tag-group="supporting-docs" name="mobile_profile_update_required_supporting_codes" maxlength="2000"
                                           value="{{ old('mobile_profile_update_required_supporting_codes', $mobile_profile_update_required_supporting_codes) }}"
                                           placeholder="Contoh: ktp,kk,bpjs_kesehatan,rekening_bank">
                                    <small class="field-note">Klik tag dokumen yang diperlukan. Yang ditampilkan hanya kode referensi yang relevan untuk mobile.</small>
                                    <div class="tag-picker" data-tag-group="supporting-docs">
                                        @foreach(($mobile_profile_update_doc_refs ?? []) as $ref)
                                            <button type="button" class="tag-chip js-tag-chip" data-value="{{ $ref['key'] }}" data-target-group="supporting-docs">
                                                <span>{{ $ref['label'] }}</span>
                                                <code>{{ $ref['key'] }}</code>
                                            </button>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                                    <button type="submit" class="btn btn-outline-primary" name="mobile_profile_update_force_repush" value="0">
                                        <i class="fas fa-save me-1"></i>Simpan Batch
                                    </button>
                                    <button type="submit" class="btn btn-primary" name="mobile_profile_update_force_repush" value="1">
                                        <i class="fas fa-bell me-1"></i>Simpan & Kirim Popup
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="settings-card">
                        <div class="card-head">
                            <h5>Version Gate</h5>
                            <p>Kontrol update app per platform. Android dan iOS bisa punya versi wajib dan link update yang berbeda.</p>
                        </div>
                        <div class="card-body">
                            <div class="guide-box mb-3">
                                <div class="fw-semibold mb-1"><i class="fas fa-book me-1"></i>Alur cepat update versi</div>
                                <ol class="mb-2 ps-3">
                                    <li>Set versi di <code>attendance_mobile_client/pubspec.yaml</code> pada field <code>version</code>.</li>
                                    <li>Build APK/IPA dengan versi yang sama.</li>
                                    <li>Isi <strong>Required Version</strong> dengan format exact, misalnya <code>1.0.1+2</code>.</li>
                                </ol>
                                <div class="small">Jika enforce aktif, versi yang beda sedikit pun tetap dianggap mismatch.</div>
                            </div>

                            <div class="subgrid">
                                <div class="span-6">
                                    <div class="settings-card border h-100">
                                        <div class="card-head">
                                            <h5>Android</h5>
                                            <p>Dipakai oleh APK Android. Nilai ini juga dimirror ke setting lama agar kompatibel.</p>
                                        </div>
                                        <div class="card-body">
                                            <div class="subgrid">
                                                <div class="span-6">
                                                    <label class="form-label">Required Version</label>
                                                    <input type="text" class="form-control" name="mobile_android_required_version" maxlength="40"
                                                           value="{{ old('mobile_android_required_version', $mobile_android_required_version) }}"
                                                           placeholder="Contoh: 1.0.0+2">
                                                </div>
                                                <div class="span-6">
                                                    <div class="toggle-box">
                                                        <div class="form-check form-switch">
                                                            <input class="form-check-input" type="checkbox" id="mobileAndroidEnforceExactVersion" name="mobile_android_enforce_exact_version" value="1" {{ old('mobile_android_enforce_exact_version', $mobile_android_enforce_exact_version ? '1' : '0') === '1' ? 'checked' : '' }}>
                                                            <label class="form-check-label" for="mobileAndroidEnforceExactVersion">Enforce Exact Version</label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="span-6">
                                                    <div class="toggle-box">
                                                        <div class="form-check form-switch">
                                                            <input class="form-check-input" type="checkbox" id="mobileAndroidAutoLogoutMismatch" name="mobile_android_auto_logout_on_mismatch" value="1" {{ old('mobile_android_auto_logout_on_mismatch', $mobile_android_auto_logout_on_mismatch ? '1' : '0') === '1' ? 'checked' : '' }}>
                                                            <label class="form-check-label" for="mobileAndroidAutoLogoutMismatch">Auto Logout on Mismatch</label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="span-6">
                                                    <div class="toggle-box">
                                                        <div class="form-check form-switch">
                                                            <input class="form-check-input" type="checkbox" id="mobileAndroidNotifyUpdateEnabled" name="mobile_android_notify_update_enabled" value="1" {{ old('mobile_android_notify_update_enabled', $mobile_android_notify_update_enabled ? '1' : '0') === '1' ? 'checked' : '' }}>
                                                            <label class="form-check-label" for="mobileAndroidNotifyUpdateEnabled">Aktifkan Notifikasi Update</label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="span-12">
                                                    <label class="form-label">Link Update Android</label>
                                                    <input type="text" class="form-control" name="mobile_android_update_url" maxlength="500"
                                                           value="{{ old('mobile_android_update_url', $mobile_android_update_url) }}"
                                                           placeholder="https://play.google.com/... atau link APK internal">
                                                </div>
                                                <div class="span-12">
                                                    <label class="form-label">Judul Notifikasi Update</label>
                                                    <input type="text" class="form-control" name="mobile_android_update_title" maxlength="120"
                                                           value="{{ old('mobile_android_update_title', $mobile_android_update_title) }}"
                                                           placeholder="Update aplikasi Android tersedia">
                                                </div>
                                                <div class="span-12">
                                                    <label class="form-label">Pesan Notifikasi Update</label>
                                                    <textarea class="form-control" name="mobile_android_update_message" rows="2" maxlength="1000"
                                                              placeholder="Versi Android terbaru sudah tersedia.">{{ old('mobile_android_update_message', $mobile_android_update_message) }}</textarea>
                                                </div>
                                            </div>                                                <div class="span-6"><div class="toggle-box"><div class="form-check form-switch">
                                                    <input class="form-check-input" type="checkbox" name="mobile_android_patch_enabled" value="1" {{ old('mobile_android_patch_enabled', $mobile_android_patch_enabled ? '1' : '0') === '1' ? 'checked' : '' }}>
                                                    <label class="form-check-label">Aktifkan Patch Android</label>
                                                </div></div></div>
                                                <div class="span-6"><label class="form-label">Link Patch Android</label>
                                                    <input type="text" class="form-control" name="mobile_android_patch_url" maxlength="500" value="{{ old('mobile_android_patch_url', $mobile_android_patch_url) }}" placeholder="URL patch">
                                                </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="span-6">
                                    <div class="settings-card border h-100">
                                        <div class="card-head">
                                            <h5>iOS</h5>
                                            <p>Dipakai oleh build iPhone/iPad. Bisa arahkan ke App Store / TestFlight secara terpisah.</p>
                                        </div>
                                        <div class="card-body">
                                            <div class="subgrid">
                                                <div class="span-6">
                                                    <label class="form-label">Required Version</label>
                                                    <input type="text" class="form-control" name="mobile_ios_required_version" maxlength="40"
                                                           value="{{ old('mobile_ios_required_version', $mobile_ios_required_version) }}"
                                                           placeholder="Contoh: 1.0.0+2">
                                                </div>
                                                <div class="span-6">
                                                    <div class="toggle-box">
                                                        <div class="form-check form-switch">
                                                            <input class="form-check-input" type="checkbox" id="mobileIosEnforceExactVersion" name="mobile_ios_enforce_exact_version" value="1" {{ old('mobile_ios_enforce_exact_version', $mobile_ios_enforce_exact_version ? '1' : '0') === '1' ? 'checked' : '' }}>
                                                            <label class="form-check-label" for="mobileIosEnforceExactVersion">Enforce Exact Version</label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="span-6">
                                                    <div class="toggle-box">
                                                        <div class="form-check form-switch">
                                                            <input class="form-check-input" type="checkbox" id="mobileIosAutoLogoutMismatch" name="mobile_ios_auto_logout_on_mismatch" value="1" {{ old('mobile_ios_auto_logout_on_mismatch', $mobile_ios_auto_logout_on_mismatch ? '1' : '0') === '1' ? 'checked' : '' }}>
                                                            <label class="form-check-label" for="mobileIosAutoLogoutMismatch">Auto Logout on Mismatch</label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="span-6">
                                                    <div class="toggle-box">
                                                        <div class="form-check form-switch">
                                                            <input class="form-check-input" type="checkbox" id="mobileIosNotifyUpdateEnabled" name="mobile_ios_notify_update_enabled" value="1" {{ old('mobile_ios_notify_update_enabled', $mobile_ios_notify_update_enabled ? '1' : '0') === '1' ? 'checked' : '' }}>
                                                            <label class="form-check-label" for="mobileIosNotifyUpdateEnabled">Aktifkan Notifikasi Update</label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="span-12">
                                                    <label class="form-label">Link Update iOS</label>
                                                    <input type="text" class="form-control" name="mobile_ios_update_url" maxlength="500"
                                                           value="{{ old('mobile_ios_update_url', $mobile_ios_update_url) }}"
                                                           placeholder="https://apps.apple.com/... atau link TestFlight">
                                                </div>
                                                <div class="span-12">
                                                    <label class="form-label">Judul Notifikasi Update</label>
                                                    <input type="text" class="form-control" name="mobile_ios_update_title" maxlength="120"
                                                           value="{{ old('mobile_ios_update_title', $mobile_ios_update_title) }}"
                                                           placeholder="Update aplikasi iOS tersedia">
                                                </div>
                                                <div class="span-12">
                                                    <label class="form-label">Pesan Notifikasi Update</label>
                                                    <textarea class="form-control" name="mobile_ios_update_message" rows="2" maxlength="1000"
                                                              placeholder="Versi iOS terbaru sudah tersedia.">{{ old('mobile_ios_update_message', $mobile_ios_update_message) }}</textarea>
                                                </div>
                                            </div>                                                <div class="span-6"><div class="toggle-box"><div class="form-check form-switch">
                                                    <input class="form-check-input" type="checkbox" name="mobile_ios_patch_enabled" value="1" {{ old('mobile_ios_patch_enabled', $mobile_ios_patch_enabled ? '1' : '0') === '1' ? 'checked' : '' }}>
                                                    <label class="form-check-label">Aktifkan Patch iOS</label>
                                                </div></div></div>
                                                <div class="span-6"><label class="form-label">Link Patch iOS</label>
                                                    <input type="text" class="form-control" name="mobile_ios_patch_url" maxlength="500" value="{{ old('mobile_ios_patch_url', $mobile_ios_patch_url) }}" placeholder="URL patch">
                                                </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="settings-card">
                        <div class="card-head">
                            <h5>Kontrol Upload Log Hari Lalu</h5>
                            <p>Kunci ingest tanggal kemarin dan lebih lama setelah jam tertentu.</p>
                        </div>
                        <div class="card-body">
                            <div class="subgrid">
                                <div class="span-6">
                                    <div class="toggle-box">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="ingestLockEnabled" name="ingest_lock_enabled" value="1"
                                                   {{ old('ingest_lock_enabled', $ingest_lock_enabled ? '1' : '0') === '1' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="ingestLockEnabled">Kunci Perubahan Log Hari Lalu</label>
                                        </div>
                                        <small class="field-note">Jika aktif, log tanggal kemarin terkunci setelah cutoff. Log yang lebih lama selalu terkunci.</small>
                                    </div>
                                </div>
                                <div class="span-6">
                                    <label class="form-label">Jam Cutoff Lock (HH:mm)</label>
                                    <input type="time" class="form-control" name="ingest_lock_cutoff_time"
                                           value="{{ old('ingest_lock_cutoff_time', $ingest_lock_cutoff_time) }}">
                                    <small class="field-note">Contoh: 10:00. Setelah jam ini, upload log kemarin ditolak kecuali admin override.</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="settings-card">
                        <div class="card-head">
                            <h5>Log Bug Mobile</h5>
                            <p>Kontrol apakah error Flutter/Android disimpan ke database, dan batasi jumlah row agar tetap ringan.</p>
                        </div>
                        <div class="card-body">
                            <div class="subgrid">
                                <div class="span-6">
                                    <div class="toggle-box">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="mobileClientLogEnabled" name="mobile_client_log_enabled" value="1"
                                                   {{ old('mobile_client_log_enabled', $mobile_client_log_enabled ? '1' : '0') === '1' ? 'checked' : '' }}>
                                            <label class="form-check-label" for="mobileClientLogEnabled">Aktifkan Simpan Log Mobile</label>
                                        </div>
                                        <small class="field-note">Matikan jika sistem sudah stabil dan Anda tidak ingin database terus menampung log baru.</small>
                                    </div>
                                </div>
                                <div class="span-6">
                                    <label class="form-label">Maksimal Row Log Tersimpan</label>
                                    <input type="number" class="form-control" name="mobile_client_log_max_rows" min="100" max="1000000"
                                           value="{{ old('mobile_client_log_max_rows', $mobile_client_log_max_rows) }}">
                                    <small class="field-note">Saat jumlah log melewati batas ini, row paling lama akan dibersihkan otomatis.</small>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="side-panel">
                    <div class="settings-card">
                        <div class="card-head">
                            <h5>Panel Cepat</h5>
                            <p>Beberapa kontrol yang paling sering dicari.</p>
                        </div>
                        <div class="card-body">
                            <div class="menu-grid mb-3">
                                <div class="menu-box">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="menuAbsen" name="menu_absen" value="1" {{ old('menu_absen', $menu_absen ? '1' : '0') === '1' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="menuAbsen">Absen</label>
                                    </div>
                                </div>
                                <div class="menu-box">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="menuJadwal" name="menu_jadwal" value="1" {{ old('menu_jadwal', $menu_jadwal ? '1' : '0') === '1' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="menuJadwal">Jadwal</label>
                                    </div>
                                </div>
                                <div class="menu-box">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="menuSpl" name="menu_spl" value="1" {{ old('menu_spl', $menu_spl ? '1' : '0') === '1' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="menuSpl">SPL</label>
                                    </div>
                                </div>
                                <div class="menu-box">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="menuLeave" name="menu_leave" value="1" {{ old('menu_leave', $menu_leave ? '1' : '0') === '1' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="menuLeave">Leave</label>
                                    </div>
                                </div>
                                <div class="menu-box">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="menuKalender" name="menu_kalender" value="1" {{ old('menu_kalender', $menu_kalender ? '1' : '0') === '1' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="menuKalender">Kalender</label>
                                    </div>
                                </div>
                                <div class="menu-box">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="menuReport" name="menu_report" value="1" {{ old('menu_report', $menu_report ? '1' : '0') === '1' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="menuReport">Report</label>
                                    </div>
                                </div>
                                <div class="menu-box">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="menuFc" name="menu_forgetting_clock" value="1" {{ old('menu_forgetting_clock', $menu_forgetting_clock ? '1' : '0') === '1' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="menuFc">Forgetting Clock</label>
                                    </div>
                                </div>
                                <div class="menu-box">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="menuSp" name="menu_sp" value="1" {{ old('menu_sp', $menu_sp ? '1' : '0') === '1' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="menuSp">SP</label>
                                    </div>
                                </div>
                                <div class="menu-box">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="menuSalary" name="menu_salary" value="1" {{ old('menu_salary', $menu_salary ? '1' : '0') === '1' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="menuSalary">Gaji</label>
                                    </div>
                                </div>
                                <div class="menu-box">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="menuApproval" name="menu_approval" value="1" {{ old('menu_approval', $menu_approval ? '1' : '0') === '1' ? 'checked' : '' }}>
                                        <label class="form-check-label" for="menuApproval">Approval</label>
                                    </div>
                                </div>
                            </div>

                            <div class="guide-box">
                                <div class="fw-semibold mb-1">Cara baca halaman ini</div>
                                <ul class="mb-0 ps-3">
                                    <li><strong>Presensi Mobile</strong>: aturan check-in/check-out.</li>
                                    <li><strong>Notifikasi & Broadcast</strong>: reminder dan pengumuman.</li>
                                    <li><strong>Version Gate</strong>: wajib update app atau tidak.</li>
                                    <li><strong>Kontrol Upload Log</strong>: lock upload log hari lalu.</li>
                                </ul>
                            </div>

                            <div class="mt-3 d-grid gap-2">
                                <a href="{{ route('guides.index', ['section' => 'attendance-mobile-notification-settings']) }}"
                                   target="_blank"
                                   class="btn btn-outline-dark btn-sm">
                                    <i class="fas fa-book me-1"></i>Buka Guide
                                </a>
                                <a href="{{ route('attendance_mobile_guides.index') }}"
                                   class="btn btn-outline-info btn-sm">
                                    <i class="fas fa-mobile-alt me-1"></i>Guide Mobile App
                                </a>
                                <a href="{{ route('attendance_mobile_client_logs.index') }}"
                                   class="btn btn-outline-primary btn-sm">
                                    <i class="fas fa-bug me-1"></i>Lihat Log Mobile
                                </a>
                                <a href="{{ route('public.attendance_2fa', ['label' => 'PUBLIC-2FA']) }}"
                                   target="_blank"
                                   class="btn btn-outline-success btn-sm">
                                    <i class="fas fa-qrcode me-1"></i>Buka Layar QR 2FA
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="settings-card">
                        <div class="card-head">
                            <h5>Simpan Perubahan</h5>
                            <p>Simpan seluruh setting utama pada halaman ini.</p>
                        </div>
                        <div class="card-body">
                            <button type="submit" class="btn btn-primary w-100" name="mobile_profile_update_force_repush" value="0">
                                <i class="fas fa-save me-1"></i>Simpan Setting
                            </button>
                            <small class="field-note d-block mt-2">Pengaturan batch profil disimpan melalui modal batch tersendiri.</small>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script>
        const photoToggle = document.getElementById('mobileAttendanceRequirePhoto');
        const faceAiToggle = document.getElementById('mobileAttendanceRequireFaceAi');

        function syncFaceAiToggle() {
            if (!photoToggle || !faceAiToggle) return;
            if (!photoToggle.checked) {
                faceAiToggle.checked = false;
                faceAiToggle.disabled = true;
            } else {
                faceAiToggle.disabled = false;
            }
        }

        photoToggle?.addEventListener('change', syncFaceAiToggle);
        syncFaceAiToggle();

        const attendanceModeToggles = Array.from(document.querySelectorAll('.js-attendance-mode-toggle'));
        attendanceModeToggles.forEach((toggle) => {
            toggle.addEventListener('change', () => {
                if (!attendanceModeToggles.some((item) => item.checked)) {
                    toggle.checked = true;
                    alert('Minimal satu mode presensi Android harus aktif.');
                }
            });
        });

        const themePreview = {
            shell: document.getElementById('themePreviewShell'),
            phone: document.getElementById('themePreviewPhone'),
            card: document.getElementById('themePreviewCard'),
            name: document.getElementById('themePreviewName'),
            muted: document.getElementById('themePreviewMuted'),
            caption: document.getElementById('themePreviewCaption'),
            badge: document.getElementById('themePreviewBadge'),
            button: document.getElementById('themePreviewButton'),
            gradientToggle: document.getElementById('mobileThemeGradientEnabled'),
        };
        const themeState = {};

        function applyThemePreview() {
            if (!themePreview.shell) return;
            const background = themeState.background || '#F8FAFC';
            const gradientStart = themeState.gradientStart || background;
            const gradientEnd = themeState.gradientEnd || '#ECFEFF';
            const gradientEnabled = themePreview.gradientToggle?.checked;
            const previewBackground = gradientEnabled
                ? `linear-gradient(160deg, ${gradientStart}, ${gradientEnd})`
                : background;
            themePreview.shell.style.background = previewBackground;
            themePreview.phone.style.background = previewBackground;
            themePreview.card.style.background = themeState.surface || '#FFFFFF';
            themePreview.name.style.color = themeState.text || '#0F172A';
            themePreview.muted.style.color = themeState.muted || '#64748B';
            themePreview.caption.style.color = themeState.muted || '#64748B';
            themePreview.button.style.background = themeState.primary || '#0F766E';
            themePreview.badge.style.background = themeState.secondary || '#14B8A6';
        }

        document.querySelectorAll('.js-theme-color').forEach((input) => {
            const key = String(input.dataset.themeVar || '').trim();
            themeState[key] = input.value;
            input.addEventListener('input', () => {
                themeState[key] = input.value;
                const code = input.parentElement?.querySelector('code');
                if (code) code.textContent = input.value.toUpperCase();
                applyThemePreview();
            });
        });
        themePreview.gradientToggle?.addEventListener('change', applyThemePreview);

        document.querySelectorAll('.js-theme-preview-input').forEach((input) => {
            input.addEventListener('input', () => {
                const target = String(input.dataset.previewTarget || '').trim();
                if (target === 'themeName' && themePreview.name) {
                    themePreview.name.textContent = input.value || 'Default AHSP';
                }
                if (target === 'themeEvent' && themePreview.badge) {
                    themePreview.badge.textContent = input.value || 'Mobile';
                }
            });
        });
        applyThemePreview();

        const parseCsv = (value) => {
            return String(value || '')
                .split(',')
                .map(v => v.trim())
                .filter(Boolean);
        };

        const normalizeInput = (input) => {
            const unique = [...new Set(parseCsv(input.value))];
            input.value = unique.join(',');
            return unique;
        };

        const syncTagGroup = (group) => {
            const input = document.querySelector(`.js-tag-target[data-tag-group="${group}"]`);
            if (!input) return;
            const selected = normalizeInput(input);
            document.querySelectorAll(`.js-tag-chip[data-target-group="${group}"]`).forEach((chip) => {
                const value = String(chip.dataset.value || '').trim();
                chip.classList.toggle('is-active', selected.includes(value));
            });
        };

        document.querySelectorAll('.js-tag-chip').forEach((chip) => {
            chip.addEventListener('click', () => {
                const group = String(chip.dataset.targetGroup || '').trim();
                const value = String(chip.dataset.value || '').trim();
                const input = document.querySelector(`.js-tag-target[data-tag-group="${group}"]`);
                if (!input || !value) return;
                const items = normalizeInput(input);
                const next = items.includes(value)
                    ? items.filter((item) => item !== value)
                    : [...items, value];
                input.value = next.join(',');
                syncTagGroup(group);
            });
        });

        document.querySelectorAll('.js-tag-target').forEach((input) => {
            const group = String(input.dataset.tagGroup || '').trim();
            input.addEventListener('input', () => syncTagGroup(group));
            syncTagGroup(group);
        });

        const broadcastEditor = document.getElementById('broadcastMessage');
        const broadcastPreview = document.getElementById('broadcastMessagePreview');

        const syncBroadcastPreview = () => {
            if (!broadcastEditor || !broadcastPreview) return;
            broadcastPreview.innerHTML = broadcastEditor.value || '';
        };

        const insertIntoEditor = (before, after = '') => {
            if (!broadcastEditor) return;
            const start = broadcastEditor.selectionStart || 0;
            const end = broadcastEditor.selectionEnd || 0;
            const value = broadcastEditor.value;
            const selected = value.substring(start, end);
            const next = value.substring(0, start) + before + selected + after + value.substring(end);
            broadcastEditor.value = next;
            const cursor = start + before.length + selected.length;
            broadcastEditor.focus();
            broadcastEditor.setSelectionRange(cursor, cursor);
            syncBroadcastPreview();
        };

        document.querySelectorAll('[data-editor-toolbar="broadcastMessage"] button').forEach((button) => {
            button.addEventListener('click', () => {
                const tag = button.dataset.insertTag;
                const block = button.dataset.insertBlock;
                const line = button.dataset.insertLine;
                const list = button.dataset.insertList;
                const color = button.dataset.insertColor;
                const template = button.dataset.insertTemplate;

                if (tag) return insertIntoEditor(`<${tag}>`, `</${tag}>`);
                if (block) return insertIntoEditor(`<${block}>`, `</${block}>`);
                if (line) return insertIntoEditor('<br>');
                if (list) return insertIntoEditor('<ul><li>', '</li></ul>');
                if (color) return insertIntoEditor(`<span style="color:${color};font-weight:700;">`, '</span>');
                if (template === 'update') {
                    return insertIntoEditor('<p><b>FITUR UPDATE</b></p><ul><li>Update aplikasi ke versi terbaru.</li><li>Perbaikan dan peningkatan fitur.</li></ul>');
                }
            });
        });

        broadcastEditor?.addEventListener('input', syncBroadcastPreview);
        syncBroadcastPreview();
    </script>
@endpush