@extends('layouts.adminlte')

@section('title', 'SESSION MOBILE ANDROID')
@section('page_title', 'SESSION MOBILE ANDROID')

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/datatables/css/dataTables.bootstrap5.min.css') }}" />
    <style>
        .mobile-session-toolbar {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            align-items: center;
            gap: 8px;
        }
        .mobile-session-state {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border: 1px solid #e2e8f0;
            border-radius: 999px;
            padding: 6px 10px;
            background: #f8fafc;
            color: #334155;
            font-size: 12px;
            font-weight: 700;
            white-space: nowrap;
        }
        .mobile-session-state.is-locked {
            border-color: #fecaca;
            background: #fef2f2;
            color: #b91c1c;
        }
        .mobile-session-state.is-open {
            border-color: #bbf7d0;
            background: #f0fdf4;
            color: #15803d;
        }
        .mobile-session-meta {
            display: flex;
            flex-direction: column;
            gap: 2px;
            line-height: 1.25;
        }
        .mobile-session-meta small {
            color: #64748b;
        }
        .mobile-session-lock-cell {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
        }
        .mobile-session-bulkbar {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }
        .mobile-session-bulk-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .mobile-lock-summary {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
            gap: 12px;
            margin-bottom: 14px;
        }
        .mobile-lock-card {
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
            padding: 14px 16px;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
        }
        .mobile-lock-card.is-locked {
            border-color: #fecaca;
            background: linear-gradient(180deg, #fff7f7 0%, #fef2f2 100%);
        }
        .mobile-lock-card.is-open {
            border-color: #bbf7d0;
            background: linear-gradient(180deg, #f7fff9 0%, #f0fdf4 100%);
        }
        .mobile-lock-card.is-neutral {
            border-color: #cbd5e1;
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
        }
        .mobile-lock-card-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 8px;
        }
        .mobile-lock-card-title {
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .3px;
            color: #475569;
            margin: 0;
        }
        .mobile-lock-card-value {
            font-size: 22px;
            font-weight: 800;
            line-height: 1;
            color: #0f172a;
            margin: 0 0 6px;
        }
        .mobile-lock-card-note {
            font-size: 12px;
            color: #64748b;
            line-height: 1.45;
            margin: 0;
        }
        .mobile-lock-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border-radius: 999px;
            padding: 4px 10px;
            font-size: 11px;
            font-weight: 800;
            white-space: nowrap;
        }
        .mobile-lock-badge.is-locked {
            background: #fee2e2;
            color: #b91c1c;
        }
        .mobile-lock-badge.is-open {
            background: #dcfce7;
            color: #15803d;
        }
        .mobile-lock-badge.is-neutral {
            background: #e2e8f0;
            color: #334155;
        }
    </style>
@endpush

@section('content')
    <div class="mobile-lock-summary">
        <div class="mobile-lock-card {{ $globalLogoutLock ? 'is-locked' : 'is-open' }}">
            <div class="mobile-lock-card-head">
                <p class="mobile-lock-card-title mb-0">Global Lock Logout</p>
                <span class="mobile-lock-badge {{ $globalLogoutLock ? 'is-locked' : 'is-open' }}">
                    <i class="fas {{ $globalLogoutLock ? 'fa-lock' : 'fa-unlock' }}"></i>
                    {{ $globalLogoutLock ? 'Aktif' : 'Nonaktif' }}
                </span>
            </div>
            <p class="mobile-lock-card-value">{{ $globalLogoutLock ? 'LOCK' : 'OPEN' }}</p>
            <p class="mobile-lock-card-note mb-0">
                Berlaku ke semua user mobile. Jika aktif, semua user akan tertahan saat mencoba logout.
            </p>
        </div>
        <div class="mobile-lock-card {{ $globalPhotoLock ? 'is-locked' : 'is-open' }}">
            <div class="mobile-lock-card-head">
                <p class="mobile-lock-card-title mb-0">Global Lock Foto</p>
                <span class="mobile-lock-badge {{ $globalPhotoLock ? 'is-locked' : 'is-open' }}">
                    <i class="fas {{ $globalPhotoLock ? 'fa-lock' : 'fa-unlock' }}"></i>
                    {{ $globalPhotoLock ? 'Aktif' : 'Nonaktif' }}
                </span>
            </div>
            <p class="mobile-lock-card-value">{{ $globalPhotoLock ? 'LOCK' : 'OPEN' }}</p>
            <p class="mobile-lock-card-note mb-0">
                Berlaku ke semua user mobile. Jika aktif, user tidak bisa ganti foto referensi yang sudah ada.
            </p>
        </div>
        <div class="mobile-lock-card {{ $personalLockedUserCount > 0 ? 'is-neutral' : 'is-open' }}">
            <div class="mobile-lock-card-head">
                <p class="mobile-lock-card-title mb-0">Personal Lock Logout</p>
                <span class="mobile-lock-badge {{ $personalLockedUserCount > 0 ? 'is-neutral' : 'is-open' }}">
                    <i class="fas {{ $personalLockedUserCount > 0 ? 'fa-user-lock' : 'fa-user-check' }}"></i>
                    {{ $personalLockedUserCount }} user
                </span>
            </div>
            <p class="mobile-lock-card-value">{{ $personalLockedUserCount }}</p>
            <p class="mobile-lock-card-note mb-0">
                Berlaku hanya ke user tertentu. Saat ini ada {{ $personalLockedUserCount }} user yang logout-nya terkunci.
                Session aktif saat ini: {{ $activeSessionCount }}.
            </p>
        </div>
    </div>

    <div class="card mb-3">
        <div class="card-body">
            <div class="row g-2 align-items-end">
                <div class="col-md-4">
                    <label class="form-label">Search</label>
                    <input type="text" id="filterQ" class="form-control" placeholder="nama / employee code / device / platform">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Status</label>
                    <select id="filterStatus" class="form-select">
                        <option value="">Semua</option>
                        <option value="active" selected>Aktif</option>
                        <option value="kicked">Kicked</option>
                        <option value="logout">Logout</option>
                        <option value="inactive">Inactive</option>
                    </select>
                </div>
                <div class="col-md-6">
                    <div class="mobile-session-toolbar">
                        <span class="mobile-session-state {{ $globalPhotoLock ? 'is-locked' : 'is-open' }}">
                            <i class="fas {{ $globalPhotoLock ? 'fa-lock' : 'fa-unlock' }}"></i>
                            Foto Global: {{ $globalPhotoLock ? 'Terkunci' : 'Terbuka' }}
                        </span>
                        <span class="mobile-session-state {{ $globalLogoutLock ? 'is-locked' : 'is-open' }}">
                            <i class="fas {{ $globalLogoutLock ? 'fa-lock' : 'fa-unlock' }}"></i>
                            Logout Global: {{ $globalLogoutLock ? 'Terkunci' : 'Terbuka' }}
                        </span>
                        <button class="btn btn-outline-success" id="btnUnlockPhotoGlobal" {{ !$globalPhotoLock ? 'disabled' : '' }} data-bs-toggle="tooltip" title="Buka akses upload/ganti foto referensi untuk semua user mobile. Cocok dipakai saat operator mau buka gelombang update foto.">
                            <i class="fas fa-unlock me-1"></i>Buka Lock Foto
                        </button>
                        <button class="btn btn-outline-danger" id="btnLockPhotoGlobal" {{ $globalPhotoLock ? 'disabled' : '' }} data-bs-toggle="tooltip" title="Kunci perubahan foto referensi global. User tidak bisa ubah foto dari Android sampai dibuka lagi.">
                            <i class="fas fa-lock me-1"></i>Kunci Foto
                        </button>
                        <button class="btn btn-outline-success" id="btnUnlockLogoutGlobal" {{ !$globalLogoutLock ? 'disabled' : '' }} data-bs-toggle="tooltip" title="Buka kunci logout global. User boleh logout normal dari aplikasi mobile.">
                            <i class="fas fa-unlock me-1"></i>Buka Lock Logout
                        </button>
                        <button class="btn btn-outline-warning" id="btnLockLogoutGlobal" {{ $globalLogoutLock ? 'disabled' : '' }} data-bs-toggle="tooltip" title="Aktifkan lock logout global. Cocok untuk freeze session saat audit atau kontrol perangkat.">
                            <i class="fas fa-lock me-1"></i>Kunci Logout
                        </button>
                        <button class="btn btn-primary" id="btnFilter"><i class="fas fa-filter me-1"></i>Tampilkan</button>
                        <button class="btn btn-outline-primary" id="btnReload"><i class="fas fa-sync me-1"></i>Reload</button>
                        <button class="btn btn-danger" id="btnKickAll">Kick All Aktif</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="mobile-session-bulkbar">
                <div>
                    <div class="fw-semibold" id="mobileSessionSelectedInfo">Selected: 0 session</div>
                    <div class="small text-muted">Tip: klik checkbox lalu pakai <code>Shift + Click</code> atau <code>Ctrl + Shift + Click</code> untuk memilih range.</div>
                </div>
                <div class="mobile-session-bulk-actions">
                    <button class="btn btn-outline-warning btn-sm" id="btnBulkLockUser" data-bs-toggle="tooltip" title="Aktifkan lock logout untuk semua user terpilih. User tetap login, tapi saat logout dipaksa tetap terkunci.">
                        <i class="fas fa-lock me-1"></i>Kunci Logout User
                    </button>
                    <button class="btn btn-outline-success btn-sm" id="btnBulkUnlockUser" data-bs-toggle="tooltip" title="Buka lock logout untuk semua user terpilih agar user bisa logout normal dari aplikasinya.">
                        <i class="fas fa-unlock me-1"></i>Buka Lock User
                    </button>
                    <button class="btn btn-outline-danger btn-sm" id="btnBulkKickSessions" data-bs-toggle="tooltip" title="Kick hanya session yang dicentang. Cocok untuk membersihkan device tertentu tanpa memutus semua device user.">
                        <i class="fas fa-mobile-alt me-1"></i>Kick Session Terpilih
                    </button>
                    <button class="btn btn-danger btn-sm" id="btnBulkKickUsers" data-bs-toggle="tooltip" title="Kick semua session aktif milik user terpilih, meski user punya lebih dari satu device login.">
                        <i class="fas fa-users me-1"></i>Kick User Terpilih
                    </button>
                </div>
            </div>
            <table id="mobileSessionTable" class="table table-striped table-hover w-100">
                <thead>
                <tr>
                    <th style="width:32px"><input type="checkbox" id="checkAllMobileSessions"></th>
                    <th>No.</th>
                    <th>Karyawan</th>
                    <th>Device</th>
                    <th>Platform</th>
                    <th>Login</th>
                    <th>Last Seen</th>
                    <th>Status</th>
                    <th>Status Logout User</th>
                    <th>Aksi</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendor/datatables/js/dataTables.bootstrap5.min.js') }}"></script>
    <script>
        $(function(){
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            if (csrfToken) $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });

            let rows = [];
            let lastCheckedMobileIndex = null;
            const table = $('#mobileSessionTable').DataTable({
                data: [],
                pageLength: 25,
                drawCallback: function() {
                    initTooltips();
                    refreshMobileSessionSelectionState();
                },
                columns: [
                    { data: null, orderable: false, searchable: false, render: (r) => `<input type="checkbox" class="mobile-session-check" value="${Number(r.id || 0)}" data-karyawan-id="${Number(r.karyawan_id || 0)}">` },
                    { data: null, render: (d, t, r, m) => m.row + 1, orderable: false, searchable: false },
                    { data: null, render: (r) => {
                            const code = (r.karyawan_employee_code || r.employee_code || '-');
                            const finger = (r.finger_id || '-');
                            const name = (r.karyawan_name || '-');
                            return `<div><strong>${name}</strong></div><div class="text-muted">${code} | Finger: ${finger}</div>`;
                        }},
                    { data: null, render: (r) => {
                            const primary = r.device_id || '-';
                            const modelParts = [r.device_brand || '', r.device_model || ''].filter(Boolean).join(' ');
                            const source = r.session_source || '';
                            return `<div class="mobile-session-meta">
                                <div>${primary}</div>
                                ${modelParts ? `<small>${modelParts}</small>` : ''}
                                ${source ? `<small>source: ${source}</small>` : ''}
                            </div>`;
                        }},
                    { data: null, render: (r) => {
                            const platform = (r.platform || '-').toString().toUpperCase();
                            const osName = r.os_name || r.platform || '-';
                            const osVersion = r.os_version || '-';
                            const sdkInt = r.sdk_int ? `SDK ${r.sdk_int}` : '';
                            const appVersion = r.app_version || '-';
                            const appBuild = r.app_build ? `build ${r.app_build}` : '';
                            return `<div class="mobile-session-meta">
                                <div><strong>${platform}</strong></div>
                                <small>OS: ${osName} ${osVersion}</small>
                                ${sdkInt ? `<small>${sdkInt}</small>` : ''}
                                <small>App: ${appVersion}${appBuild ? ` (${appBuild})` : ''}</small>
                            </div>`;
                        }},
                    { data: 'login_at', render: (v) => v || '-' },
                    { data: 'last_seen_at', render: (v) => v || '-' },
                    { data: null, render: (r) => {
                            if (r.is_active) return '<span class="badge bg-success">Aktif</span>';
                            if (r.kicked_at) return `<span class="badge bg-danger">Kicked</span><div><small class="text-muted">${r.kick_reason || '-'}</small></div>`;
                            if (r.logout_at) return '<span class="badge bg-secondary">Logout</span>';
                            return '<span class="badge bg-secondary">Inactive</span>';
                        }},
                    { data: null, orderable: false, searchable: false, render: (r) => {
                            if (!r.karyawan_id || Number(r.karyawan_id) <= 0) return '-';
                            const stateClass = r.logout_locked ? 'is-locked' : 'is-open';
                            const stateIcon = r.logout_locked ? 'fa-lock' : 'fa-unlock';
                            const stateText = r.logout_locked ? 'Terkunci' : 'Terbuka';
                            const btnClass = r.logout_locked ? 'btn-outline-success' : 'btn-outline-warning';
                            const text = r.logout_locked ? 'Buka Lock' : 'Kunci';
                            const title = r.logout_locked
                                ? 'Buka lock logout user ini. Setelah dibuka, user boleh logout normal dari aplikasi.'
                                : 'Kunci logout user ini. Session tetap aktif, tapi user akan dibatasi sesuai kontrol logout.';
                            return `<div class="mobile-session-lock-cell">
                                <span class="mobile-session-state ${stateClass}">
                                    <i class="fas ${stateIcon}"></i>${stateText}
                                </span>
                                <button class="btn btn-xs ${btnClass} btn-toggle-lock" data-karyawan-id="${r.karyawan_id}" data-bs-toggle="tooltip" title="${title}">${text}</button>
                            </div>`;
                        }},
                    { data: null, orderable: false, searchable: false, render: (r) => {
                            const actions = [];
                            if (r.is_active) {
                                actions.push(`<button class="btn btn-xs btn-danger btn-kick-session" data-id="${r.id}" data-bs-toggle="tooltip" title="Putus hanya session ini. User bisa login ulang kalau akun dan session control masih aktif.">Kick Session</button>`);
                            }
                            if (r.karyawan_id && Number(r.karyawan_id) > 0) {
                                actions.push(`<button class="btn btn-xs btn-outline-danger btn-kick-user" data-karyawan-id="${r.karyawan_id}" data-bs-toggle="tooltip" title="Putus semua session aktif milik user ini di semua device.">Kick User</button>`);
                            }
                            return actions.length ? actions.join(' ') : '<span class="text-muted">-</span>';
                        }},
                ]
            });

            function initTooltips() {
                document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
                    bootstrap.Tooltip.getInstance(el)?.dispose();
                    new bootstrap.Tooltip(el);
                });
            }
            function getVisibleMobileChecks() {
                return $('#mobileSessionTable tbody .mobile-session-check').toArray();
            }
            function getSelectedSessionIds() {
                return $('.mobile-session-check:checked').map(function(){ return Number($(this).val()); }).get().filter(x => x > 0);
            }
            function getSelectedKaryawanIds() {
                return [...new Set($('.mobile-session-check:checked').map(function(){ return Number($(this).data('karyawan-id')); }).get().filter(x => x > 0))];
            }
            function refreshMobileSessionSelectionState() {
                const totalVisible = $('.mobile-session-check').length;
                const checkedVisible = $('.mobile-session-check:checked').length;
                $('#checkAllMobileSessions').prop('checked', totalVisible > 0 && totalVisible === checkedVisible);
                const sessionCount = getSelectedSessionIds().length;
                const userCount = getSelectedKaryawanIds().length;
                $('#mobileSessionSelectedInfo').text(`Selected: ${sessionCount} session | ${userCount} user`);
            }
            function syncMobileCheckRange(currentCheckbox, targetState) {
                const checks = getVisibleMobileChecks();
                const currentIndex = checks.indexOf(currentCheckbox);
                if (currentIndex < 0) return;
                if (lastCheckedMobileIndex === null || lastCheckedMobileIndex < 0 || lastCheckedMobileIndex >= checks.length) {
                    lastCheckedMobileIndex = currentIndex;
                    return;
                }
                const start = Math.min(lastCheckedMobileIndex, currentIndex);
                const end = Math.max(lastCheckedMobileIndex, currentIndex);
                for (let i = start; i <= end; i++) {
                    $(checks[i]).prop('checked', targetState);
                }
                lastCheckedMobileIndex = currentIndex;
            }

            function loadData() {
                const q = ($('#filterQ').val() || '').toString().trim();
                const status = ($('#filterStatus').val() || '').toString().trim();
                const params = new URLSearchParams({ q, status });
                $.getJSON(`{{ route('attendance_mobile_sessions.data') }}?${params.toString()}`)
                    .done(resp => {
                        rows = resp.data || [];
                        table.clear().rows.add(rows).draw();
                        lastCheckedMobileIndex = null;
                    })
                    .fail(xhr => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal load data session', 'error'));
            }

            function postAction(url, successMsg, forceActiveFilter = false){
                $.ajax({
                    url,
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
                })
                    .done(resp => {
                        if (forceActiveFilter) {
                            $('#filterStatus').val('active');
                        }
                        loadData();
                        Swal.fire('Success', resp.message || successMsg, 'success');
                    })
                    .fail(xhr => Swal.fire('Error', xhr.responseJSON?.message || 'Aksi gagal', 'error'));
            }

            $('#btnFilter, #btnReload').on('click', loadData);
            $('#filterStatus').on('change', loadData);
            $('#filterQ').on('keydown', function(e){ if(e.key === 'Enter'){ e.preventDefault(); loadData(); } });
            $('#mobileSessionTable').on('click', '.mobile-session-check', function(e){
                const checks = getVisibleMobileChecks();
                const currentIndex = checks.indexOf(this);
                if ((e.shiftKey || (e.ctrlKey && e.shiftKey)) && lastCheckedMobileIndex !== null) {
                    syncMobileCheckRange(this, $(this).is(':checked'));
                } else {
                    lastCheckedMobileIndex = currentIndex;
                }
                refreshMobileSessionSelectionState();
            });
            $('#mobileSessionTable').on('change', '.mobile-session-check', refreshMobileSessionSelectionState);
            $('#checkAllMobileSessions').on('change', function(){
                $('.mobile-session-check').prop('checked', $(this).is(':checked'));
                lastCheckedMobileIndex = null;
                refreshMobileSessionSelectionState();
            });

            function ensureSelectedSessions() {
                const ids = getSelectedSessionIds();
                if (!ids.length) {
                    Swal.fire('Warning', 'Pilih minimal satu session di tabel.', 'warning');
                    return null;
                }
                return ids;
            }
            function ensureSelectedUsers() {
                const ids = getSelectedKaryawanIds();
                if (!ids.length) {
                    Swal.fire('Warning', 'Pilih minimal satu user di tabel.', 'warning');
                    return null;
                }
                return ids;
            }

            $('#btnKickAll').on('click', function(){
                Swal.fire({
                    title: 'Kick semua session aktif?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Kick All'
                }).then(res => {
                    if (!res.isConfirmed) return;
                    postAction(`{{ route('attendance_mobile_sessions.kick_all') }}`, 'Semua session aktif di-kick', true);
                });
            });
            $('#btnBulkKickSessions').on('click', function(){
                const ids = ensureSelectedSessions();
                if (!ids) return;
                Swal.fire({
                    title: `Kick ${ids.length} session terpilih?`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Kick Session Terpilih'
                }).then(res => {
                    if (!res.isConfirmed) return;
                    $.post(`{{ route('attendance_mobile_sessions.bulk_kick_sessions') }}`, { ids })
                        .done(resp => { loadData(); Swal.fire('Success', resp.message || 'Bulk kick session selesai', 'success'); })
                        .fail(xhr => Swal.fire('Error', xhr.responseJSON?.message || 'Bulk kick session gagal', 'error'));
                });
            });
            $('#btnBulkKickUsers').on('click', function(){
                const karyawanIds = ensureSelectedUsers();
                if (!karyawanIds) return;
                Swal.fire({
                    title: `Kick semua session dari ${karyawanIds.length} user terpilih?`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Kick User Terpilih'
                }).then(res => {
                    if (!res.isConfirmed) return;
                    $.post(`{{ route('attendance_mobile_sessions.bulk_kick_users') }}`, { karyawan_ids: karyawanIds })
                        .done(resp => { $('#filterStatus').val('active'); loadData(); Swal.fire('Success', resp.message || 'Bulk kick user selesai', 'success'); })
                        .fail(xhr => Swal.fire('Error', xhr.responseJSON?.message || 'Bulk kick user gagal', 'error'));
                });
            });
            $('#btnBulkLockUser, #btnBulkUnlockUser').on('click', function(){
                const karyawanIds = ensureSelectedUsers();
                if (!karyawanIds) return;
                const enabled = this.id === 'btnBulkLockUser';
                Swal.fire({
                    title: enabled
                        ? `Kunci logout untuk ${karyawanIds.length} user terpilih?`
                        : `Buka lock logout untuk ${karyawanIds.length} user terpilih?`,
                    icon: enabled ? 'warning' : 'question',
                    showCancelButton: true,
                    confirmButtonText: enabled ? 'Kunci Logout User' : 'Buka Lock User'
                }).then(res => {
                    if (!res.isConfirmed) return;
                    $.post(`{{ route('attendance_mobile_sessions.bulk_toggle_user_lock') }}`, { karyawan_ids: karyawanIds, enabled: enabled ? 1 : 0 })
                        .done(resp => { loadData(); Swal.fire('Success', resp.message || 'Bulk lock user selesai', 'success'); })
                        .fail(xhr => Swal.fire('Error', xhr.responseJSON?.message || 'Bulk lock user gagal', 'error'));
                });
            });

            function setGlobalLogoutLock(enabled) {
                $.ajax({
                    url: `{{ route('attendance_mobile_sessions.toggle_global_lock') }}`,
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
                    data: { enabled: enabled ? 1 : 0 }
                })
                    .done(resp => {
                        Swal.fire('Success', resp.message || 'Lock logout global diupdate', 'success')
                            .then(() => window.location.reload());
                    })
                    .fail(xhr => Swal.fire('Error', xhr.responseJSON?.message || 'Aksi gagal', 'error'));
            }

            function setGlobalPhotoLock(enabled) {
                $.ajax({
                    url: `{{ route('attendance_mobile_sessions.toggle_global_photo_lock') }}`,
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
                    data: { enabled: enabled ? 1 : 0 }
                })
                    .done(resp => {
                        Swal.fire('Success', resp.message || 'Lock foto global diupdate', 'success')
                            .then(() => window.location.reload());
                    })
                    .fail(xhr => Swal.fire('Error', xhr.responseJSON?.message || 'Aksi gagal', 'error'));
            }

            $('#btnLockLogoutGlobal, #btnUnlockLogoutGlobal').on('click', function(){
                const enabled = this.id === 'btnLockLogoutGlobal';
                Swal.fire({
                    title: enabled
                        ? 'Kunci logout global untuk semua user mobile?'
                        : 'Buka lock logout global untuk semua user mobile?',
                    icon: enabled ? 'warning' : 'question',
                    showCancelButton: true,
                    confirmButtonText: enabled ? 'Kunci Logout' : 'Buka Lock Logout'
                }).then(res => {
                    if (!res.isConfirmed) return;
                    setGlobalLogoutLock(enabled);
                });
            });

            $('#btnLockPhotoGlobal, #btnUnlockPhotoGlobal').on('click', function(){
                const enabled = this.id === 'btnLockPhotoGlobal';
                Swal.fire({
                    title: enabled ? 'Kunci foto referensi global?' : 'Buka lock foto referensi global?',
                    text: enabled
                        ? 'User yang sudah punya foto tidak bisa mengganti foto referensi. User yang belum punya foto tetap boleh upload pertama kali.'
                        : 'User bisa upload atau mengganti foto referensi dari aplikasi Android.',
                    icon: enabled ? 'warning' : 'question',
                    showCancelButton: true,
                    confirmButtonText: enabled ? 'Kunci Foto' : 'Buka Lock Foto'
                }).then(res => {
                    if (!res.isConfirmed) return;
                    setGlobalPhotoLock(enabled);
                });
            });

            $('#mobileSessionTable').on('click', '.btn-kick-session', function(){
                const id = Number($(this).data('id'));
                if (!id) return;
                Swal.fire({
                    title: 'Kick session ini?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Kick'
                }).then(res => {
                    if (!res.isConfirmed) return;
                    postAction(`{{ url('/attendance-mobile-sessions/kick') }}/${id}`, 'Session di-kick', true);
                });
            });

            $('#mobileSessionTable').on('click', '.btn-kick-user', function(){
                const karyawanId = Number($(this).data('karyawan-id'));
                if (!karyawanId) return;
                Swal.fire({
                    title: 'Kick semua session user ini?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Kick User'
                }).then(res => {
                    if (!res.isConfirmed) return;
                    postAction(`{{ url('/attendance-mobile-sessions/kick-user') }}/${karyawanId}`, 'Semua session user di-kick', true);
                });
            });

            $('#mobileSessionTable').on('click', '.btn-toggle-lock', function(){
                const karyawanId = Number($(this).data('karyawan-id'));
                if (!karyawanId) return;
                postAction(`{{ url('/attendance-mobile-sessions/toggle-user-lock') }}/${karyawanId}`, 'Lock logout user diupdate');
            });

            loadData();
            initTooltips();
        });
    </script>
@endpush