@extends('layouts.app')

@php
    $pageTitle = 'Devices';
    $pageHeading = 'Device Management';
    $pageDescription = 'Perangkat baru wajib di-approve lebih dulu sebelum dianggap aman untuk sinkronisasi.';
    $tableThemeClass = 'ops-datatable-theme ops-datatable-theme--devices';
    $sortBy = $filters['sort_by'] ?? 'last_activity';
    $sortDir = $filters['sort_dir'] ?? 'desc';
    $sortIcon = function (string $column) use ($sortBy, $sortDir): string {
        if ($sortBy !== $column) {
            return '↕';
        }

        return $sortDir === 'asc' ? '↑' : '↓';
    };
    $sortUrl = function (string $column) use ($filters, $sortBy, $sortDir): string {
        $query = array_filter($filters, fn ($value) => $value !== null && $value !== '' && $value !== []);
        $query['sort_by'] = $column;
        $query['sort_dir'] = $sortBy === $column && $sortDir === 'asc' ? 'desc' : 'asc';

        return route('devices.index', $query);
    };
    $now = \Illuminate\Support\Carbon::now();
    $formatTimeHealth = function ($value, string $emptyLabel, int $warnMinutes = 15, int $dangerMinutes = 60) use ($now) {
        if (empty($value)) {
            return [
                'display' => '-',
                'relative' => $emptyLabel,
                'style' => 'color: var(--muted);',
                'warning' => null,
            ];
        }

        $time = \Illuminate\Support\Carbon::parse($value);
        $diffMinutes = max(0, $time->diffInMinutes($now));
        $display = $time->format('Y-m-d H:i:s');

        if ($time->isSameDay($now) && $diffMinutes <= $warnMinutes) {
            return [
                'display' => $display,
                'relative' => $time->diffForHumans($now, [
                    'parts' => 2,
                    'short' => false,
                ]),
                'style' => 'color: #17643d; font-weight: 800;',
                'warning' => null,
            ];
        }

        if ($time->isSameDay($now) && $diffMinutes <= $dangerMinutes) {
            return [
                'display' => $display,
                'relative' => $time->diffForHumans($now, [
                    'parts' => 2,
                    'short' => false,
                ]),
                'style' => 'color: #9a6700; font-weight: 700;',
                'warning' => 'Mulai telat, masih hari ini.',
            ];
        }

        $warning = $time->isSameDay($now)
            ? 'Terlalu lama dari jam sekarang.'
            : 'Tanggal sudah tidak sama dengan hari ini.';

        return [
            'display' => $display,
            'relative' => $time->diffForHumans($now, [
                'parts' => 2,
                'short' => false,
            ]),
            'style' => 'color: #b42318; font-weight: 800;',
            'warning' => $warning,
        ];
    };
@endphp

@section('content')
    <style>
        .device-summary-strip {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 10px;
        }
        .device-summary-item {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            min-height: 30px;
            padding: 4px 9px;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            background: #f8f9fa;
            color: #495057;
            font-size: 12px;
        }
        .device-summary-item strong {
            color: #212529;
            font-size: 14px;
        }
        .device-summary-item.pending strong,
        .device-summary-item.offline strong {
            color: #dc3545;
        }
        .device-summary-item.online strong,
        .device-summary-item.approved strong {
            color: #198754;
        }
        .device-registry-meta {
            display: inline-flex;
            align-items: center;
            min-height: 30px;
            padding: 4px 9px;
            border-radius: 4px;
            background: #e9ecef;
            color: #495057;
            font-size: 12px;
            white-space: nowrap;
        }
        .device-action-buttons {
            display: flex;
            align-items: center;
            gap: 4px;
            flex-wrap: wrap;
            min-width: 210px;
        }
        .device-action-buttons form {
            display: inline-flex;
            margin: 0;
        }
        .device-action-buttons .btn {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 7px;
            border-radius: 3px;
            font-size: 11px;
            line-height: 1.2;
            white-space: nowrap;
        }
    </style>

    @if (session('status'))
        <section class="hero" style="border-color: rgba(45, 106, 79, 0.24); background: rgba(45, 106, 79, 0.08);">
            <strong style="display: block; color: var(--green-deep); margin-bottom: 6px;">Status</strong>
            <div>{{ session('status') }}</div>
        </section>
    @endif

    <section class="table-card">
        <div class="device-summary-strip" aria-label="Ringkasan device">
            <span class="device-summary-item">Total <strong>{{ number_format($summary['total']) }}</strong></span>
            <span class="device-summary-item approved">Approved <strong>{{ number_format($summary['approved']) }}</strong></span>
            <span class="device-summary-item pending">Pending <strong>{{ number_format($summary['pending']) }}</strong></span>
            <span class="device-summary-item online">Online <strong>{{ number_format($summary['online']) }}</strong></span>
            <span class="device-summary-item">Stale <strong>{{ number_format($summary['stale']) }}</strong></span>
            <span class="device-summary-item offline">Offline <strong>{{ number_format($summary['offline']) }}</strong></span>
            <span class="device-summary-item">Polling <strong>{{ number_format($summary['polling']) }}</strong></span>
            <span class="device-summary-item">Data Sync <strong>{{ number_format($summary['data_sync']) }}</strong></span>
        </div>

        <form method="GET" action="{{ route('devices.index') }}" class="filters" style="margin-bottom: 12px;">
            <input type="text" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="Cari alias, SN, IP... Gunakan =SN untuk exact">
            <div style="grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: -6px;">
                @if (!empty($bulkQuickMeta['active']))
                    <span class="status" style="background: rgba(37, 99, 235, 0.14); color: #1d4ed8; border: 1px solid rgba(59, 130, 246, 0.18);">Bulk paste aktif</span>
                    <span class="muted" style="font-size: 13px;">
                        {{ (int) ($bulkQuickMeta['matched_tokens'] ?? 0) }} data cocok / {{ (int) ($bulkQuickMeta['unmatched_tokens'] ?? 0) }} tidak cocok
                    </span>
                    @if (!empty($bulkQuickMeta['unmatched_list']))
                        <span class="muted" style="font-size: 12px;">
                            Tidak cocok: {{ implode(', ', array_slice($bulkQuickMeta['unmatched_list'], 0, 12)) }}@if (count($bulkQuickMeta['unmatched_list']) > 12) ... @endif
                        </span>
                    @endif
                @endif
            </div>
            <label style="display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted);">
                <input type="checkbox" name="exact_device" value="1" @checked($filters['exact_device'] ?? false)>
                Exact Device
            </label>
            <select name="approval_filter">
                <option value="">- Semua Approval -</option>
                <option value="approved" @selected(($filters['approval_filter'] ?? '') === 'approved')>Approved</option>
                <option value="pending" @selected(($filters['approval_filter'] ?? '') === 'pending')>Pending Approval</option>
            </select>
            <select name="activity_filter">
                <option value="">- Semua Activity -</option>
                <option value="polling" @selected(($filters['activity_filter'] ?? '') === 'polling')>Polling Only</option>
                <option value="data_sync" @selected(($filters['activity_filter'] ?? '') === 'data_sync')>Data Sync Active</option>
            </select>
            <select name="per_page">
                @foreach ([10,25,50,100,250] as $size)
                    <option value="{{ $size }}" @selected((int) ($filters['per_page'] ?? 50) === $size)>{{ $size }} rows</option>
                @endforeach
            </select>
            <button type="submit" class="primary">Filter</button>
            <a href="{{ route('devices.index') }}" class="pill-link secondary">Reset</a>
        </form>

        <form method="POST" action="{{ route('devices.bulk-command') }}" id="bulk-device-command-form">
        @csrf
        <div style="display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 10px; flex-wrap: wrap;">
            <div>
                <h3 style="margin:0 0 3px;">Device Registry</h3>
                <div class="muted" style="font-size:12px;">Centang mesin lalu gunakan Command To Machine.</div>
            </div>
            <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap;">
                <span class="device-registry-meta">
                    Menampilkan {{ $devices->firstItem() ?? 0 }}-{{ $devices->lastItem() ?? 0 }} dari {{ $devices->total() }} device
                </span>
                <button type="button" class="pill-link primary" id="open-device-command-modal">Command To Machine</button>
            </div>
        </div>
        <div data-datatable data-datatable-server="1">
        <div class="table-scroll">
        <table>
            <thead>
                <tr>
                    <th style="width: 42px;">
                        <input type="checkbox" data-check-all-devices>
                    </th>
                    <th><a href="{{ $sortUrl('alias') }}" style="color:inherit; text-decoration:none;">Alias {{ $sortIcon('alias') }}</a></th>
                    <th><a href="{{ $sortUrl('sn') }}" style="color:inherit; text-decoration:none;">Serial Number {{ $sortIcon('sn') }}</a></th>
                    <th><a href="{{ $sortUrl('ip_address') }}" style="color:inherit; text-decoration:none;">IP {{ $sortIcon('ip_address') }}</a></th>
                    <th><a href="{{ $sortUrl('approval') }}" style="color:inherit; text-decoration:none;">Approval {{ $sortIcon('approval') }}</a></th>
                    <th>Sync Rule</th>
                    <th><a href="{{ $sortUrl('state') }}" style="color:inherit; text-decoration:none;">State {{ $sortIcon('state') }}</a></th>
                    <th><a href="{{ $sortUrl('user_count') }}" style="color:inherit; text-decoration:none;">User Qty {{ $sortIcon('user_count') }}</a></th>
                    <th>Finger Qty</th>
                    <th><a href="{{ $sortUrl('transaction_count') }}" style="color:inherit; text-decoration:none;">Transaction Qty {{ $sortIcon('transaction_count') }}</a></th>
                    <th><a href="{{ $sortUrl('push_time') }}" style="color:inherit; text-decoration:none;">Last Poll {{ $sortIcon('push_time') }}</a></th>
                    <th><a href="{{ $sortUrl('upload_time') }}" style="color:inherit; text-decoration:none;">Last Data Sync {{ $sortIcon('upload_time') }}</a></th>
                    <th><a href="{{ $sortUrl('last_activity') }}" style="color:inherit; text-decoration:none;">Last Activity {{ $sortIcon('last_activity') }}</a></th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($devices as $device)
                    <tr>
                        <td>
                            <input type="checkbox" name="device_ids[]" value="{{ $device->id }}" data-device-checkbox>
                        </td>
                        <td>
                            <div>{{ $device->alias }}</div>
                            @if ((int) $device->status !== 1 && $device->create_time && \Illuminate\Support\Carbon::parse($device->create_time)->isToday())
                                <div style="margin-top:6px;"><span class="status pending">New Device</span></div>
                            @endif
                        </td>
                        <td>{{ $device->sn }}</td>
                        <td>{{ $device->ip_address }}</td>
                        <td>
                            @if ((int) $device->status === 1)
                                <span class="status">Approved</span>
                            @else
                                <span class="status pending">Pending Approval</span>
                            @endif
                        </td>
                        <td>
                            @if ((int) $device->status === 1)
                                <span class="muted">Sync allowed</span>
                            @else
                                <span style="color: var(--amber); font-weight: 700;">Sync blocked until approved</span>
                            @endif
                        </td>
                        <td>
                            <div>
                                @if ((int) $device->status !== 1)
                                    <span class="status pending">Ping Blocked</span>
                                @elseif (empty($device->first_sync_at))
                                    <span class="status stale">Waiting First Sync</span>
                                @else
                                    <span class="status {{ $device->presence_status }}">{{ $device->presence_label }}</span>
                                    <div style="margin-top: 6px;">
                                        @php
                                            $activityStyle = match ($device->presence_activity_type ?? null) {
                                                'polling' => 'background: rgba(28, 100, 242, 0.12); color: #1c64f2;',
                                                'data_sync' => 'background: rgba(45, 106, 79, 0.12); color: #2d6a4f;',
                                                default => 'background: rgba(201, 162, 39, 0.14); color: #8b6b14;',
                                            };
                                        @endphp
                                        <span class="status" style="{{ $activityStyle }}">
                                            {{ $device->presence_activity_label }}
                                        </span>
                                    </div>
                                @endif
                            </div>
                            <div class="muted" style="font-size: 12px; margin-top: 6px;">
                                @if ((int) $device->status !== 1)
                                    Device boleh tercatat, tapi heartbeat dan sync data ditahan sampai approval.
                                @elseif (empty($device->first_sync_at))
                                    Device sudah approved, tapi belum ada feedback pertama dari mesin ke database.
                                @else
                                    {{ $device->presence_meta }}
                                @endif
                            </div>
                        </td>
                        <td>
                            <div>{{ $device->user_count ?? 0 }}</div>
                            <div class="muted" style="font-size: 12px;">DB: {{ $device->db_user_count ?? 0 }}</div>
                        </td>
                        <td>
                            <div>{{ $device->fp_count ?? 0 }}</div>
                            <div class="muted" style="font-size: 12px;">DB: {{ $device->db_fp_count ?? 0 }}</div>
                        </td>
                        <td>
                            <div>{{ $device->transaction_count ?? 0 }}</div>
                            <div class="muted" style="font-size: 12px;">DB: {{ $device->db_transaction_count ?? 0 }}</div>
                        </td>
                        <td>
                            @php($pushHealth = $formatTimeHealth($device->push_time, 'Belum ada poll', 1, 10))
                            <div style="{{ $pushHealth['style'] }}">{{ $pushHealth['display'] }}</div>
                            <div class="muted" style="font-size: 12px; {{ $pushHealth['style'] }}">{{ $pushHealth['relative'] }}</div>
                            @if ($pushHealth['warning'])
                                <div style="margin-top: 6px;">
                                    <span class="status pending" style="background: rgba(180, 35, 24, 0.10); color: #b42318;">
                                        {{ $pushHealth['warning'] }}
                                    </span>
                                </div>
                            @endif
                        </td>
                        <td>
                            @php($uploadHealth = $formatTimeHealth($device->upload_time, 'Belum ada sync data', 5, 30))
                            <div style="{{ $uploadHealth['style'] }}">{{ $uploadHealth['display'] }}</div>
                            <div class="muted" style="font-size: 12px; {{ $uploadHealth['style'] }}">{{ $uploadHealth['relative'] }}</div>
                            @if ($uploadHealth['warning'])
                                <div style="margin-top: 6px;">
                                    <span class="status pending" style="background: rgba(180, 35, 24, 0.10); color: #b42318;">
                                        {{ $uploadHealth['warning'] }}
                                    </span>
                                </div>
                            @endif
                        </td>
                        <td>
                            @php($activityHealth = $formatTimeHealth($device->last_activity, 'Belum ada heartbeat', 1, 10))
                            <div style="{{ $activityHealth['style'] }}">{{ $activityHealth['display'] }}</div>
                            <div class="muted" style="font-size: 12px; {{ $activityHealth['style'] }}">{{ $activityHealth['relative'] }}</div>
                            @if ($activityHealth['warning'])
                                <div style="margin-top: 6px;">
                                    <span class="status pending" style="background: rgba(180, 35, 24, 0.10); color: #b42318;">
                                        {{ $activityHealth['warning'] }}
                                    </span>
                                </div>
                            @endif
                            <div class="muted" style="font-size: 12px; margin-top: 6px;">{{ $device->presence_meta ?? 'Belum ada heartbeat' }}</div>
                            <div class="muted" style="font-size: 12px;">First sync: {{ $device->first_sync_at ?: '-' }}</div>
                        </td>
                        <td>
                            <div class="device-action-buttons">
                                <a href="{{ route('devices.edit', $device) }}" class="btn btn-primary btn-sm" title="Edit parameter device">
                                    <i class="fas fa-pen"></i> Edit
                                </a>
                                <a href="{{ route('employees.index', ['device_filter' => $device->sn]) }}" class="btn btn-secondary btn-sm" title="Lihat user pada device">
                                    <i class="fas fa-users"></i> Users
                                </a>
                                <a href="{{ route('devices.users.export.xlsx', $device) }}" class="btn btn-success btn-sm" title="Export user ke XLSX">
                                    <i class="fas fa-file-excel"></i> XLSX
                                </a>
                                @if ((int) $device->status !== 1)
                                    <form method="POST" action="{{ route('devices.approve', $device) }}">
                                        @csrf
                                        <button type="submit" class="btn btn-success btn-sm" title="Approve device">
                                            <i class="fas fa-check"></i> Approve
                                        </button>
                                    </form>
                                @endif
                                <form method="POST" action="{{ route('devices.pull-users', $device) }}">
                                    @csrf
                                    <button type="submit" class="btn btn-warning btn-sm" {{ (int) $device->status !== 1 ? 'disabled' : '' }} title="Tarik daftar user dari device">
                                        <i class="fas fa-download"></i> Pull Users
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="14" class="muted">Belum ada data device.</td></tr>
                @endforelse
            </tbody>
        </table>
        </div>
        </div>
        <div style="margin-top: 16px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;">
            <div class="muted" style="font-size:13px;">
                Menampilkan {{ $devices->firstItem() ?? 0 }}-{{ $devices->lastItem() ?? 0 }} dari {{ $devices->total() }} device
            </div>
            {{ $devices->onEachSide(1)->links() }}
        </div>
        </form>
    </section>

    <div id="device-command-modal" class="modal-backdrop" onclick="if (event.target === this) toggleDeviceCommandModal(false)">
        <div class="modal-card" style="max-width: 760px;">
            <div class="modal-head">
                <div>
                    <h3 style="margin: 0;">Command To Machine</h3>
                    <div class="muted" id="device-command-summary" style="margin-top:6px; font-size:13px;">Pilih command operasional untuk device yang dicentang.</div>
                </div>
                <button type="button" class="modal-close" onclick="toggleDeviceCommandModal(false)">&times;</button>
            </div>
            <div class="modal-body">
                <div style="display:grid; gap:14px;">
                    <label style="display:grid; gap:8px;">
                        <span style="font-weight:700;">Command</span>
                        <select id="device-command-type" name="command_type" form="bulk-device-command-form" style="width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                            <option value="reboot">Reboot</option>
                            <option value="volume">Volume Control</option>
                            <option value="com_setting">COM Setting</option>
                            <option value="timezone">Pilih Timezone</option>
                            <option value="update_clock">Update Jam</option>
                            <option value="min_scan">Minimal Scan</option>
                            <option value="bell_schedule">Jadwal Bel</option>
                            <option value="language">Bahasa</option>
                            <option value="work_code">Work Code</option>
                            <option value="resync_transactions">Soft Re-sync Transaksi</option>
                            <option value="relog_transactions">Hard Re-log Transaksi</option>
                            <option value="relog_transactions_range">Re-log Transaksi Dari Tanggal</option>
                        </select>
                    </label>

                    <label style="display:grid; gap:8px;" id="device-command-value-wrapper">
                        <span style="font-weight:700;" id="device-command-value-label">Nilai Command</span>
                        <input type="text" id="device-command-value" name="command_value" form="bulk-device-command-form" style="width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                        <span class="muted" id="device-command-value-help" style="font-size:13px;">Isi nilai sesuai kebutuhan command.</span>
                    </label>

                    <div id="device-command-date-range-wrapper" style="display:none; gap:12px;">
                        <div class="hero" style="margin:0; border-color: rgba(68, 98, 137, 0.18); background: rgba(68, 98, 137, 0.08);">
                            <strong style="display:block; margin-bottom:6px; color: #355070;">Mode Relog By Date</strong>
                            <div class="muted" style="line-height:1.7;">
                                Mode ini memakai <strong>raw log server</strong> untuk backfill transaksi tanggal tertentu ke database. Jadi ini bukan filter tanggal yang dijalankan langsung oleh mesin.
                            </div>
                        </div>
                        <div style="display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px;">
                            <label style="display:grid; gap:8px;">
                                <span style="font-weight:700;">Tanggal A</span>
                                <input type="date" id="device-command-date-from" name="date_from" form="bulk-device-command-form" style="width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                            </label>
                            <label style="display:grid; gap:8px;">
                                <span style="font-weight:700;">Tanggal B</span>
                                <input type="date" id="device-command-date-to" name="date_to" form="bulk-device-command-form" style="width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                            </label>
                        </div>
                    </div>

                    <div class="hero" style="margin:0; border-color: rgba(183, 121, 31, 0.18); background: rgba(183, 121, 31, 0.08);">
                        <strong style="display:block; margin-bottom:6px; color: var(--amber);">Catatan</strong>
                        <div class="muted" style="line-height: 1.7;">
                            Command di bawah memakai format write-back ADMS yang bersifat best effort. Untuk command seperti `jadwal bel`, `work code`, atau `COM setting`, pastikan firmware mesin memang mendukung parameter tersebut.
                        </div>
                    </div>

                    <div style="display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap;">
                        <button type="button" class="pill-link secondary" onclick="toggleDeviceCommandModal(false)">Batal</button>
                        <button type="submit" form="bulk-device-command-form" class="pill-link primary" onclick="return confirm('Queue command ini ke mesin yang dicentang?')">Queue Command</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section class="table-card">
        <h3>Approval Audit Trail</h3>
        <div class="muted" style="margin-bottom: 14px; font-size: 13px;">
            Riwayat siapa yang approve device dan kapan perubahan approval dilakukan.
        </div>
        <div data-datatable>
            <div class="table-scroll">
                <table>
                    <thead>
                        <tr>
                            <th>When</th>
                            <th>Device</th>
                            <th>Action</th>
                            <th>Old Status</th>
                            <th>New Status</th>
                            <th>By</th>
                            <th>Summary</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($recentApprovalAudits as $audit)
                            <tr>
                                <td>{{ $audit->created_at?->format('Y-m-d H:i:s') ?: '-' }}</td>
                                <td>{{ $audit->terminal_alias ?: $audit->terminal_sn }}</td>
                                <td><span class="status">{{ strtoupper($audit->action_type) }}</span></td>
                                <td>{{ $audit->old_status ?? '-' }}</td>
                                <td>{{ $audit->new_status ?? '-' }}</td>
                                <td>{{ $audit->performed_name ?: ($audit->performed_by ?: 'system') }}</td>
                                <td>{{ $audit->summary ?: '-' }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="7" class="muted">Belum ada audit approval device.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </section>

    <section class="table-card">
        <h3>Re-log Audit Trail</h3>
        <div class="muted" style="margin-bottom: 14px; font-size: 13px;">
            Riwayat soft re-sync, hard re-log, dan backfill re-log berdasarkan tanggal agar tim bisa review tindakan recovery per mesin.
        </div>
        <div data-datatable>
            <div class="table-scroll">
                <table>
                    <thead>
                        <tr>
                            <th>When</th>
                            <th>Device</th>
                            <th>Action</th>
                            <th>Range</th>
                            <th>Rows</th>
                            <th>By</th>
                            <th>Summary</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($recentRelogAudits as $audit)
                            <tr>
                                <td>{{ $audit->created_at?->format('Y-m-d H:i:s') ?: '-' }}</td>
                                <td>{{ $audit->terminal_alias ?: $audit->terminal_sn }}</td>
                                <td><span class="status" style="background: rgba(68, 98, 137, 0.14); color: #355070;">{{ strtoupper(str_replace('_', ' ', $audit->action_type)) }}</span></td>
                                <td>
                                    @if ($audit->requested_from || $audit->requested_to)
                                        {{ $audit->requested_from ?: '?' }} s/d {{ $audit->requested_to ?: '?' }}
                                    @else
                                        -
                                    @endif
                                </td>
                                <td>{{ $audit->row_count }}</td>
                                <td>{{ $audit->performed_name ?: ($audit->performed_by ?: 'system') }}</td>
                                <td>{{ $audit->summary ?: '-' }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="7" class="muted">Belum ada audit re-log device.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
<script>
    function toggleDeviceCommandModal(force) {
        const panel = document.getElementById('device-command-modal');
        if (!panel) return;
        const shouldShow = typeof force === 'boolean' ? force : !panel.classList.contains('open');
        panel.classList.toggle('open', shouldShow);
    }

    (function () {
        const checkAll = document.querySelector('[data-check-all-devices]');
        const deviceCheckboxes = Array.from(document.querySelectorAll('[data-device-checkbox]'));
        const openModalButton = document.getElementById('open-device-command-modal');
        const commandType = document.getElementById('device-command-type');
        const commandValueWrapper = document.getElementById('device-command-value-wrapper');
        const commandValue = document.getElementById('device-command-value');
        const commandValueLabel = document.getElementById('device-command-value-label');
        const commandValueHelp = document.getElementById('device-command-value-help');
        const dateRangeWrapper = document.getElementById('device-command-date-range-wrapper');
        const dateFromInput = document.getElementById('device-command-date-from');
        const dateToInput = document.getElementById('device-command-date-to');
        const summary = document.getElementById('device-command-summary');

        if (!deviceCheckboxes.length || !openModalButton || !commandType || !commandValueWrapper || !commandValue) {
            return;
        }

        const countSelected = function () {
            return deviceCheckboxes.filter(function (checkbox) {
                return checkbox.checked;
            }).length;
        };

        const updateCommandField = function () {
            const config = {
                reboot: { showValue: false, label: 'Tanpa Nilai', help: 'Command reboot tidak butuh nilai tambahan.' },
                volume: { showValue: true, label: 'Volume', help: 'Isi level volume, contoh `5`.' },
                com_setting: { showValue: true, label: 'COM Setting', help: 'Isi communication key / com key, contoh `0`.' },
                timezone: { showValue: true, label: 'Timezone', help: 'Isi timezone device, contoh `7` untuk WIB.' },
                update_clock: { showValue: true, label: 'Update Jam', help: 'Isi tanggal jam, contoh `2026-04-08 10:30:00`.' },
                min_scan: { showValue: true, label: 'Minimal Scan', help: 'Isi nilai minimal scan / minsan, contoh `1`.' },
                bell_schedule: { showValue: true, label: 'Jadwal Bel', help: 'Isi jadwal bel, contoh `08:00;12:00;17:00`.' },
                language: { showValue: true, label: 'Bahasa', help: 'Isi kode bahasa device, contoh `73`.' },
                work_code: { showValue: true, label: 'Work Code', help: 'Isi nilai work code, contoh `1`.' },
                resync_transactions: { showValue: false, showDate: false, label: 'Tanpa Nilai', help: 'Soft re-sync: kirim `QUERY ATTLOG` tanpa reset stamp. Cocok saat data hanya sedikit nyantol.' },
                relog_transactions: { showValue: false, showDate: false, label: 'Tanpa Nilai', help: 'Hard re-log: reset `ATTLOGStamp` ke 0 lalu kirim `QUERY ATTLOG`, jadi mesin diminta kirim ulang transaksi lebih dalam.' },
                relog_transactions_range: { showValue: false, showDate: true, label: 'Tanpa Nilai', help: 'Backfill by date: baca ulang raw log server untuk tanggal A s/d B, lalu isi transaksi yang belum ada ke database.' },
            };

            const current = config[commandType.value] || config.reboot;
            commandValueWrapper.style.display = current.showValue ? '' : 'none';
            commandValueLabel.textContent = current.label;
            commandValueHelp.textContent = current.help;
            if (dateRangeWrapper) {
                dateRangeWrapper.style.display = current.showDate ? 'grid' : 'none';
            }

            if (!current.showValue) {
                commandValue.value = '';
            }
        };

        checkAll?.addEventListener('change', function () {
            deviceCheckboxes.forEach(function (checkbox) {
                checkbox.checked = checkAll.checked;
            });
        });

        openModalButton.addEventListener('click', function () {
            const selected = countSelected();

            if (selected < 1) {
                window.alert('Centang mesin dulu sebelum mengirim command.');
                return;
            }

            if (summary) {
                summary.textContent = selected + ' mesin dipilih. Tentukan command operasional yang ingin di-queue.';
            }

            updateCommandField();
            toggleDeviceCommandModal(true);
        });

        commandType.addEventListener('change', updateCommandField);
        document.querySelector('#bulk-device-command-form')?.addEventListener('submit', function (event) {
            if (commandType.value === 'relog_transactions_range') {
                if (!dateFromInput?.value || !dateToInput?.value) {
                    event.preventDefault();
                    window.alert('Isi tanggal A dan tanggal B dulu untuk re-log berdasarkan tanggal.');
                    return;
                }
            }
            if (commandType.value === 'relog_transactions') {
                if (!window.confirm('Hard re-log akan reset ATTLOG stamp ke 0 dan bisa memicu kirim ulang transaksi lama dalam jumlah lebih besar. Lanjutkan?')) {
                    event.preventDefault();
                }
            }
        });
        updateCommandField();
    })();
</script>
@endpush