@extends('layouts.app')

@php
    $pageTitle = 'Conflict Transfer';
    $pageHeading = 'Review Conflict Transfer';
    $pageDescription = 'Pisahkan transaksi yang salah masuk karena konflik sidik jari, pindahkan ke user yang benar, lalu pantau history transfer dan undo bila diperlukan.';
    $tableThemeClass = 'ops-datatable-theme ops-datatable-theme--conflicts';
@endphp

@section('content')
    <style>
        .conflict-shell {
            display: grid;
            gap: 18px;
        }

        .conflict-card {
            background: var(--panel);
            border: 1px solid #b8c5d1;
            border-radius: 12px;
            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
            overflow: hidden;
        }

        .conflict-card-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 16px 20px;
            border-bottom: 1px solid #b8c5d1;
            background: #eaf2f8;
        }

        .conflict-card-head h3 {
            margin: 0;
            font-size: 22px;
        }

        .conflict-card-head .sub {
            margin-top: 6px;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.7;
        }

        .conflict-card-body {
            padding: 18px 20px 20px;
        }

        .conflict-hero {
            border: 1px solid #66b5e3;
            border-left: 5px solid #0d6efd;
            background: #e8f4fd;
            box-shadow: 0 4px 12px rgba(13, 110, 253, 0.09);
        }

        .conflict-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 30px;
            padding: 0 12px;
            border-radius: 999px;
            background: #ffc107;
            color: #332701;
            font-size: 12px;
            font-weight: 800;
            border: 1px solid #d39e00;
            white-space: nowrap;
        }

        .conflict-form-grid {
            display: grid;
            grid-template-columns: 1.05fr 1.15fr;
            gap: 16px;
        }

        .conflict-section {
            border: 1px solid #b8c5d1;
            border-radius: 10px;
            background: #ffffff;
            padding: 16px;
            transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
        }

        .conflict-section.is-disabled {
            opacity: 0.62;
            transform: scale(0.995);
            filter: grayscale(0.04);
            pointer-events: none;
        }

        .conflict-section.is-disabled .conflict-section-sub {
            color: #9a5800;
        }

        .conflict-section.is-active {
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10);
        }

        .conflict-section--source {
            border-color: #6ea8fe;
            border-left: 5px solid #0d6efd;
            background: #edf5ff;
        }

        .conflict-section--source.is-active {
            border-color: #0d6efd;
            box-shadow: 0 8px 18px rgba(13, 110, 253, 0.16);
        }

        .conflict-section--source .conflict-section-title {
            color: #084298;
        }

        .conflict-section--target {
            border-color: #75b798;
            border-left: 5px solid #198754;
            background: #edf9f2;
        }

        .conflict-section--target.is-active {
            border-color: #198754;
            box-shadow: 0 8px 18px rgba(25, 135, 84, 0.17);
        }

        .conflict-section--target .conflict-section-title {
            color: #0f5132;
        }

        .conflict-section-title {
            margin: 0 0 6px;
            font-size: 15px;
            font-weight: 800;
        }

        .conflict-section-sub {
            margin: 0 0 12px;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.65;
        }

        .conflict-fields {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }

        .conflict-field {
            display: grid;
            gap: 7px;
        }

        .conflict-field label {
            font-size: 12px;
            font-weight: 800;
            color: #344054;
        }

        .conflict-field input,
        .conflict-field select {
            width: 100%;
            min-width: 0;
            padding: 11px 13px;
            border-radius: 7px;
            border: 1px solid #98a6b3;
            background: #ffffff;
        }

        .conflict-field input:focus,
        .conflict-field select:focus {
            outline: none;
            border-color: rgba(45, 106, 79, 0.35);
            box-shadow: 0 0 0 4px rgba(45, 106, 79, 0.11);
        }

        .conflict-field-inline {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 10px;
        }

        .conflict-section-tools {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 12px;
        }

        .conflict-section-tools .conflict-section-sub {
            margin: 0;
            flex: 1;
        }

        .conflict-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
            margin-top: 16px;
            padding: 14px 16px;
            border-radius: 10px;
            background: #fff3cd;
            border: 1px solid #ffca2c;
            border-left: 5px solid #fd7e14;
        }

        .conflict-actions .meta {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.7;
            max-width: 760px;
        }

        .conflict-actions .buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .conflict-table-card {
            border: 1px solid #aebbc7;
            border-radius: 9px;
            background: #ffffff;
            padding: 14px;
        }

        .conflict-table-card h4 {
            margin: 0 0 4px;
            font-size: 16px;
        }

        .conflict-table-card .sub {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.65;
            margin-bottom: 10px;
        }

        .conflict-table-card table th {
            background: #1f4e78;
            color: #ffffff;
            font-size: 12px;
            border-color: #406b91;
        }

        .conflict-table-card table td {
            vertical-align: top;
        }

        .conflict-table-card table tbody tr:nth-child(even) td {
            background: #f1f5f9;
        }

        .conflict-table-card table tbody tr:hover td {
            background: #dbeafe;
        }

        .conflict-card--records {
            border-top: 4px solid #0d6efd;
        }

        .conflict-card--history {
            border-top: 4px solid #198754;
        }

        .conflict-card--history .conflict-card-head {
            background: #e8f6ee;
        }

        .conflict-card--history .conflict-table-card table th {
            background: #146c43;
            border-color: #2f8c62;
        }

        .conflict-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            min-height: 34px;
            padding: 7px 12px;
            border: 1px solid transparent;
            border-radius: 6px;
            color: #ffffff;
            font-size: 12px;
            font-weight: 800;
            line-height: 1.2;
            cursor: pointer;
            transition: filter 0.15s ease, transform 0.15s ease;
        }

        .conflict-btn:hover {
            color: #ffffff;
            filter: brightness(0.9);
            transform: translateY(-1px);
        }

        .conflict-btn--source { background: #0d6efd; border-color: #0a58ca; }
        .conflict-btn--target { background: #198754; border-color: #146c43; }
        .conflict-btn--transfer { background: #c44b00; border-color: #9a3b00; }
        .conflict-btn--secondary { background: #495057; border-color: #343a40; }
        .conflict-btn--danger { background: #dc3545; border-color: #b02a37; }

        .conflict-modal-backdrop {
            position: fixed;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 24px;
            background: rgba(17, 24, 39, 0.45);
            z-index: 1200;
        }

        .conflict-modal-backdrop.open {
            display: flex;
        }

        .conflict-modal {
            width: min(680px, 100%);
            max-height: calc(100vh - 48px);
            overflow: auto;
            background: var(--panel-strong);
            border-radius: 24px;
            border: 1px solid rgba(29, 42, 36, 0.10);
            box-shadow: 0 28px 60px rgba(0, 0, 0, 0.18);
        }

        .conflict-modal-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
            padding: 18px 20px 14px;
            border-bottom: 1px solid rgba(29, 42, 36, 0.08);
        }

        .conflict-modal-head h3 {
            margin: 0 0 6px;
            font-size: 22px;
        }

        .conflict-modal-head p {
            margin: 0;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.7;
        }

        .conflict-modal-body {
            padding: 18px 20px 20px;
            display: grid;
            gap: 16px;
        }

        .conflict-modal-foot {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            padding: 0 20px 20px;
        }

        .conflict-help-inline {
            margin-top: 6px;
            color: var(--muted);
            font-size: 11px;
            line-height: 1.6;
        }

        @media (max-width: 1100px) {
            .conflict-form-grid,
            .conflict-fields,
            .conflict-field-inline {
                grid-template-columns: 1fr;
            }
        }
    </style>

    <section class="hero conflict-hero">
        <h3 style="margin: 0 0 10px; font-size: 22px;">Workspace khusus untuk koreksi transaksi karena konflik sidik jari.</h3>
        <p style="margin: 0; color: var(--muted); line-height: 1.7;">
            Kita pisahkan dari halaman `Transactions` supaya operator fokus ke proses review: cari user sumber, pilih transaksi yang salah, pindahkan ke user tujuan yang benar, lalu simpan history transfer sebagai jejak audit.
        </p>
    </section>

    <div class="conflict-shell">
        <section class="conflict-card">
            <div class="conflict-card-head">
                <div>
                    <h3>Form Pencarian & Transfer</h3>
                    <div class="sub">Referensi kerja kita: tentukan dulu user sumber, batasi tanggal, lalu pilih user tujuan sebelum mengeksekusi perpindahan transaksi.</div>
                </div>
                <div class="conflict-badge" id="transaction-conflict-selected-badge">0 transaksi dipilih</div>
            </div>
            <div class="conflict-card-body">
                <div class="conflict-form-grid">
                    <div class="conflict-section conflict-section--source">
                        <div class="conflict-section-title">1. User Sumber</div>
                        <div class="conflict-section-sub">Gunakan blok ini untuk mencari user yang saat ini menampung transaksi yang salah.</div>
                        <div class="conflict-fields">
                            <div class="conflict-field">
                                <label for="transaction-conflict-source-search">Cari User Sumber (A)</label>
                                <div class="conflict-field-inline">
                                    <input type="text" id="transaction-conflict-source-search" placeholder="Cari emp code / nama">
                                    <button type="button" class="conflict-btn conflict-btn--source" id="transaction-conflict-source-search-button">Cari</button>
                                </div>
                            </div>
                            <div class="conflict-field">
                                <label for="transaction-conflict-source-select">Pilih User Sumber</label>
                                <select id="transaction-conflict-source-select">
                                    <option value="">- Pilih user sumber -</option>
                                </select>
                            </div>
                            <div class="conflict-field">
                                <label for="transaction-conflict-date-from">Tanggal Dari</label>
                                <input type="date" id="transaction-conflict-date-from">
                            </div>
                            <div class="conflict-field">
                                <label for="transaction-conflict-date-to">Tanggal Sampai</label>
                                <input type="date" id="transaction-conflict-date-to">
                            </div>
                        </div>
                    </div>

                    <div class="conflict-section conflict-section--target is-disabled" id="transaction-conflict-target-section">
                        <div class="conflict-section-title">2. User Tujuan</div>
                        <div class="conflict-section-tools">
                            <div class="conflict-section-sub" id="transaction-conflict-target-hint">Pilih user sumber dulu. Setelah transaksi user sumber tampil, blok ini otomatis terbuka untuk memilih user tujuan lainnya.</div>
                            <button type="button" class="conflict-btn conflict-btn--target" id="transaction-conflict-create-target-button">Buat ID Baru di Mesin</button>
                        </div>
                        <div class="conflict-fields">
                            <div class="conflict-field">
                                <label for="transaction-conflict-target-search">Cari User Tujuan (B)</label>
                                <div class="conflict-field-inline">
                                    <input type="text" id="transaction-conflict-target-search" placeholder="Cari emp code / nama">
                                    <button type="button" class="conflict-btn conflict-btn--target" id="transaction-conflict-target-search-button">Cari</button>
                                </div>
                            </div>
                            <div class="conflict-field">
                                <label for="transaction-conflict-target-select">Pilih User Tujuan</label>
                                <select id="transaction-conflict-target-select">
                                    <option value="">- Pilih user tujuan -</option>
                                </select>
                            </div>
                            <div class="conflict-field">
                                <label for="transaction-conflict-reason">Alasan Transfer</label>
                                <input type="text" id="transaction-conflict-reason" value="conflict_fingerprint_registration">
                            </div>
                            <div class="conflict-field">
                                <label for="transaction-conflict-notes">Catatan</label>
                                <input type="text" id="transaction-conflict-notes" placeholder="Contoh: finger ganda saat registrasi.">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="conflict-actions">
                    <div class="meta">
                        `Cari Transaksi User A` hanya memuat transaksi user sumber pada rentang tanggal yang dipilih. Setelah transaksi dicentang, `Pindah Selected ke User B` akan memindahkan transaksi itu ke user tujuan dan otomatis mencatat history conflict transfer.
                    </div>
                    <div class="buttons">
                        <button type="button" class="conflict-btn conflict-btn--source" id="transaction-conflict-load-button">Cari Transaksi User A</button>
                        <button type="button" class="conflict-btn conflict-btn--transfer" id="transaction-conflict-transfer-button">Pindah Selected ke User B</button>
                    </div>
                </div>
            </div>
        </section>

        <section class="conflict-card conflict-card--records">
            <div class="conflict-card-head">
                <div>
                    <h3>Tabel Record Transaksi</h3>
                    <div class="sub">Centang transaksi yang benar-benar harus dipindahkan. Ini meniru alur review manual sehingga operator tidak perlu bekerja langsung dari monitor transaksi mentah.</div>
                </div>
            </div>
            <div class="conflict-card-body">
                <div class="conflict-table-card">
                    <div class="table-scroll">
                        <table>
                            <thead>
                                <tr>
                                    <th style="width:40px;"><input type="checkbox" id="transaction-conflict-check-all"></th>
                                    <th>ID</th>
                                    <th>Emp Code</th>
                                    <th>Punch Time</th>
                                    <th>State</th>
                                    <th>Verify</th>
                                    <th>Terminal</th>
                                    <th>Source</th>
                                    <th>Notes</th>
                                </tr>
                            </thead>
                            <tbody id="transaction-conflict-body">
                                <tr><td colspan="9" class="muted">Pilih user sumber dan rentang tanggal, lalu klik cari transaksi.</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>

        <section class="conflict-card conflict-card--history">
            <div class="conflict-card-head">
                <div>
                    <h3>History Transfer Conflict</h3>
                    <div class="sub">History perpindahan transaksi karena konflik sidik jari. Undo tetap tersedia selama transaksi belum berubah lagi setelah transfer terakhir.</div>
                </div>
                <button type="button" class="conflict-btn conflict-btn--target" id="transaction-conflict-history-refresh-button">Refresh History</button>
            </div>
            <div class="conflict-card-body">
                <div class="conflict-table-card">
                    <div class="table-scroll">
                        <table>
                            <thead>
                                <tr>
                                    <th>Waktu Transfer</th>
                                    <th>Transaksi</th>
                                    <th>Dari</th>
                                    <th>Ke</th>
                                    <th>Tipe</th>
                                    <th>Alasan</th>
                                    <th>Catatan</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody id="transaction-conflict-history-body">
                                <tr><td colspan="8" class="muted">Belum ada history transfer conflict.</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <div class="conflict-modal-backdrop" id="transaction-conflict-create-modal">
        <div class="conflict-modal">
            <div class="conflict-modal-head">
                <div>
                    <h3>Buat ID Baru di Mesin</h3>
                    <p>Buat user tujuan baru dengan data minimum, queue ke mesin yang dipilih, lalu otomatis jadikan user baru itu sebagai tujuan transfer conflict.</p>
                </div>
                <button type="button" class="conflict-btn conflict-btn--secondary" id="transaction-conflict-create-close-top">Tutup</button>
            </div>
            <div class="conflict-modal-body">
                <div class="conflict-fields">
                    <div class="conflict-field">
                        <label for="transaction-conflict-create-terminal">Pilih Mesin</label>
                        <select id="transaction-conflict-create-terminal">
                            <option value="">- Pilih mesin -</option>
                            @foreach ($targetTerminals as $terminal)
                                <option value="{{ $terminal->id }}">
                                    @php
                                        $presenceStatus = (string) ($terminal->presence_status ?? 'offline');
                                        $presenceIcon = match ($presenceStatus) {
                                            'online' => '🟢',
                                            'stale' => '🟡',
                                            default => '⚪',
                                        };
                                        $presenceLabel = strtoupper((string) ($terminal->presence_label ?? 'Offline'));
                                    @endphp
                                    {{ $presenceIcon }}
                                    {{ $presenceLabel }} -
                                    {{ $terminal->alias ?: $terminal->sn }} ({{ $terminal->sn }})
                                </option>
                            @endforeach
                        </select>
                        <div class="conflict-help-inline">🟢 online, 🟡 stale, ⚪ offline.</div>
                    </div>
                    <div class="conflict-field">
                        <label for="transaction-conflict-create-emp-code">User ID Baru</label>
                        <input type="text" id="transaction-conflict-create-emp-code" placeholder="Contoh: 10022A">
                    </div>
                    <div class="conflict-field">
                        <label for="transaction-conflict-create-name">Nama</label>
                        <input type="text" id="transaction-conflict-create-name" placeholder="Nama pada mesin / employee">
                    </div>
                    <div class="conflict-field">
                        <label for="transaction-conflict-create-password">Password / PIN</label>
                        <input type="text" id="transaction-conflict-create-password" placeholder="Minimal password device">
                    </div>
                    <div class="conflict-field" style="grid-column: 1 / -1;">
                        <label for="transaction-conflict-create-notes">Catatan</label>
                        <input type="text" id="transaction-conflict-create-notes" placeholder="Opsional, contoh: user tujuan baru untuk resolusi finger conflict.">
                    </div>
                </div>
            </div>
            <div class="conflict-modal-foot">
            <button type="button" class="conflict-btn conflict-btn--secondary" id="transaction-conflict-create-close">Batal</button>
            <button type="button" class="conflict-btn conflict-btn--target" id="transaction-conflict-create-submit">Buat User + Queue ke Mesin</button>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    const transactionConflictRoutes = {
        employeeOptions: '{{ route('employees.options') }}',
        sourceTransactions: '{{ route('employees.conflict-transactions', ['employee' => '__EMPLOYEE__']) }}',
        transferTransactions: '{{ route('employees.conflict-transactions.transfer', ['employee' => '__EMPLOYEE__']) }}',
        history: '{{ route('transactions.conflict-transfer-history') }}',
        undoTransfer: '{{ route('transactions.conflict-transfer.undo', ['history' => '__HISTORY__']) }}',
        createTargetUser: '{{ route('transaction-conflicts.create-target-user') }}',
    };

    const transactionConflictStateLabels = @json($stateLabels);
    const transactionConflictVerifyLabels = @json($verifyTypeLabels);

    const transactionConflictSourceSearch = document.getElementById('transaction-conflict-source-search');
    const transactionConflictSourceSearchButton = document.getElementById('transaction-conflict-source-search-button');
    const transactionConflictSourceSelect = document.getElementById('transaction-conflict-source-select');
    const transactionConflictTargetSection = document.getElementById('transaction-conflict-target-section');
    const transactionConflictTargetHint = document.getElementById('transaction-conflict-target-hint');
    const transactionConflictCreateTargetButton = document.getElementById('transaction-conflict-create-target-button');
    const transactionConflictTargetSearch = document.getElementById('transaction-conflict-target-search');
    const transactionConflictTargetSearchButton = document.getElementById('transaction-conflict-target-search-button');
    const transactionConflictTargetSelect = document.getElementById('transaction-conflict-target-select');
    const transactionConflictDateFrom = document.getElementById('transaction-conflict-date-from');
    const transactionConflictDateTo = document.getElementById('transaction-conflict-date-to');
    const transactionConflictReason = document.getElementById('transaction-conflict-reason');
    const transactionConflictNotes = document.getElementById('transaction-conflict-notes');
    const transactionConflictLoadButton = document.getElementById('transaction-conflict-load-button');
    const transactionConflictTransferButton = document.getElementById('transaction-conflict-transfer-button');
    const transactionConflictBody = document.getElementById('transaction-conflict-body');
    const transactionConflictCheckAll = document.getElementById('transaction-conflict-check-all');
    const transactionConflictSelectedBadge = document.getElementById('transaction-conflict-selected-badge');
    const transactionConflictHistoryBody = document.getElementById('transaction-conflict-history-body');
    const transactionConflictHistoryRefreshButton = document.getElementById('transaction-conflict-history-refresh-button');
    const transactionConflictCreateModal = document.getElementById('transaction-conflict-create-modal');
    const transactionConflictCreateTerminal = document.getElementById('transaction-conflict-create-terminal');
    const transactionConflictCreateEmpCode = document.getElementById('transaction-conflict-create-emp-code');
    const transactionConflictCreateName = document.getElementById('transaction-conflict-create-name');
    const transactionConflictCreatePassword = document.getElementById('transaction-conflict-create-password');
    const transactionConflictCreateNotes = document.getElementById('transaction-conflict-create-notes');
    const transactionConflictCreateSubmit = document.getElementById('transaction-conflict-create-submit');
    const transactionConflictCreateClose = document.getElementById('transaction-conflict-create-close');
    const transactionConflictCreateCloseTop = document.getElementById('transaction-conflict-create-close-top');

    const transactionConflictUrl = function (template, id) {
        return template.replace('__EMPLOYEE__', String(id)).replace('__HISTORY__', String(id));
    };

    const transactionConflictSelectedIds = function () {
        return Array.from(document.querySelectorAll('[data-transaction-conflict-checkbox]:checked')).map(function (checkbox) {
            return Number(checkbox.value);
        }).filter(Boolean);
    };

    const updateTransactionConflictSelectedBadge = function () {
        if (!transactionConflictSelectedBadge) {
            return;
        }
        transactionConflictSelectedBadge.textContent = transactionConflictSelectedIds().length + ' transaksi dipilih';
    };

    const setTransactionConflictTargetState = function (enabled) {
        if (!transactionConflictTargetSection) {
            return;
        }

        transactionConflictTargetSection.classList.toggle('is-disabled', !enabled);
        transactionConflictTargetSection.classList.toggle('is-active', enabled);

        if (transactionConflictTargetHint) {
            transactionConflictTargetHint.textContent = enabled
                ? 'Pilih user tujuan selain user sumber. Daftar user tujuan akan mengecualikan user yang sedang menjadi sumber.'
                : 'Pilih user sumber dulu. Setelah transaksi user sumber tampil, blok ini otomatis terbuka untuk memilih user tujuan lainnya.';
        }
    };

    const toggleTransactionConflictCreateModal = function (open) {
        if (!transactionConflictCreateModal) {
            return;
        }

        transactionConflictCreateModal.classList.toggle('open', open);
        if (open) {
            transactionConflictCreateEmpCode?.focus();
        }
    };

    const fillTransactionConflictEmployeeOptions = function (selectNode, rows, placeholder) {
        if (!selectNode) {
            return;
        }

        selectNode.innerHTML = '<option value="">' + (placeholder || '- Pilih user -') + '</option>';
        rows.forEach(function (row) {
            const option = document.createElement('option');
            option.value = String(row.id);
            option.textContent = row.emp_code + ' - ' + row.name + (row.is_active ? '' : ' (inactive)');
            selectNode.appendChild(option);
        });
    };

    const appendAndSelectTransactionConflictTargetEmployee = function (employee) {
        if (!transactionConflictTargetSelect || !employee) {
            return;
        }

        const existing = Array.from(transactionConflictTargetSelect.options).find(function (option) {
            return option.value === String(employee.id);
        });

        if (!existing) {
            const option = document.createElement('option');
            option.value = String(employee.id);
            option.textContent = employee.emp_code + ' - ' + employee.name + (employee.is_active ? '' : ' (inactive)');
            transactionConflictTargetSelect.appendChild(option);
        }

        transactionConflictTargetSelect.value = String(employee.id);
    };

    const searchTransactionConflictEmployees = function (role, options = {}) {
        const isSource = role === 'source';
        const query = (isSource ? transactionConflictSourceSearch?.value : transactionConflictTargetSearch?.value || '').trim();
        const params = new URLSearchParams();
        if (query !== '') {
            params.set('q', query);
        }
        const sourceEmployeeId = transactionConflictSourceSelect?.value || '';
        if (!isSource && sourceEmployeeId) {
            params.set('exclude_employee_id', sourceEmployeeId);
        }

        const targetSelect = isSource ? transactionConflictSourceSelect : transactionConflictTargetSelect;
        fillTransactionConflictEmployeeOptions(targetSelect, [], 'Memuat user...');

        fetch(transactionConflictRoutes.employeeOptions + '?' + params.toString(), {
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
            },
        })
            .then(function (response) {
                if (!response.ok) {
                    throw new Error('Gagal memuat daftar user.');
                }
                return response.json();
            })
            .then(function (payload) {
                const rows = payload.rows || [];
                fillTransactionConflictEmployeeOptions(targetSelect, rows, isSource ? '- Pilih user sumber -' : '- Pilih user tujuan -');

                if (isSource && options.autoPickSingle !== false && rows.length === 1 && transactionConflictSourceSelect) {
                    transactionConflictSourceSelect.value = String(rows[0].id);
                    setTransactionConflictTargetState(true);
                    searchTransactionConflictEmployees('target', { autoPickSingle: false });
                    loadTransactionConflictRows();
                    loadTransactionConflictHistory();
                }

                return rows;
            })
            .catch(function (error) {
                fillTransactionConflictEmployeeOptions(targetSelect, [], error.message);
                if (isSource) {
                    setTransactionConflictTargetState(false);
                }
                throw error;
            });
    };

    const loadTransactionConflictRows = function () {
        const sourceEmployeeId = transactionConflictSourceSelect?.value || '';
        if (!sourceEmployeeId || !transactionConflictBody) {
            window.alert('Pilih user sumber dulu.');
            return;
        }

        const params = new URLSearchParams();
        if (transactionConflictDateFrom?.value) {
            params.set('date_from', transactionConflictDateFrom.value);
        }
        if (transactionConflictDateTo?.value) {
            params.set('date_to', transactionConflictDateTo.value);
        }

        transactionConflictBody.innerHTML = '<tr><td colspan="9" class="muted">Memuat transaksi conflict...</td></tr>';

        fetch(transactionConflictUrl(transactionConflictRoutes.sourceTransactions, sourceEmployeeId) + '?' + params.toString(), {
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
            },
        })
            .then(function (response) {
                if (!response.ok) {
                    throw new Error('Gagal memuat transaksi conflict.');
                }
                return response.json();
            })
            .then(function (payload) {
                const rows = payload.rows || [];
                transactionConflictBody.innerHTML = '';
                setTransactionConflictTargetState(true);

                if (!rows.length) {
                    transactionConflictBody.innerHTML = '<tr><td colspan="9" class="muted">Tidak ada transaksi pada range ini.</td></tr>';
                } else {
                    rows.forEach(function (row) {
                        transactionConflictBody.insertAdjacentHTML('beforeend', `
                            <tr>
                                <td><input type="checkbox" value="${row.id}" data-transaction-conflict-checkbox></td>
                                <td>${row.id}</td>
                                <td>${row.emp_code ?? '-'}</td>
                                <td>${row.punch_time ?? '-'}</td>
                                <td>${row.punch_state_label ?? transactionConflictStateLabels[row.punch_state] ?? '-'}</td>
                                <td>${row.verify_type_label ?? transactionConflictVerifyLabels[row.verify_type] ?? '-'}</td>
                                <td>${row.terminal_sn ?? '-'}</td>
                                <td>${row.source_label ?? '-'}</td>
                                <td>${row.reserved ?? '-'}</td>
                            </tr>
                        `);
                    });
                }

                transactionConflictBody.querySelectorAll('[data-transaction-conflict-checkbox]').forEach(function (checkbox) {
                    checkbox.addEventListener('change', updateTransactionConflictSelectedBadge);
                });
                if (transactionConflictCheckAll) {
                    transactionConflictCheckAll.checked = false;
                }
                updateTransactionConflictSelectedBadge();
            })
            .catch(function (error) {
                transactionConflictBody.innerHTML = '<tr><td colspan="9" class="muted">' + error.message + '</td></tr>';
            });
    };

    const loadTransactionConflictHistory = function () {
        if (!transactionConflictHistoryBody) {
            return;
        }

        const params = new URLSearchParams();
        const sourceEmployeeId = transactionConflictSourceSelect?.value || '';
        if (sourceEmployeeId) {
            params.set('employee_id', sourceEmployeeId);
        }

        transactionConflictHistoryBody.innerHTML = '<tr><td colspan="8" class="muted">Memuat history transfer...</td></tr>';

        fetch(transactionConflictRoutes.history + (params.toString() ? '?' + params.toString() : ''), {
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
            },
        })
            .then(function (response) {
                if (!response.ok) {
                    throw new Error('Gagal memuat history transfer.');
                }
                return response.json();
            })
            .then(function (payload) {
                const rows = payload.rows || [];
                transactionConflictHistoryBody.innerHTML = '';

                if (!rows.length) {
                    transactionConflictHistoryBody.innerHTML = '<tr><td colspan="8" class="muted">Belum ada history transfer conflict.</td></tr>';
                    return;
                }

                rows.forEach(function (row) {
                    transactionConflictHistoryBody.insertAdjacentHTML('beforeend', `
                        <tr>
                            <td>${row.created_at ?? '-'}</td>
                            <td>#${row.transaction_id ?? '-'}</td>
                            <td>${row.from_emp_code ?? '-'}</td>
                            <td>${row.to_emp_code ?? '-'}</td>
                            <td>${row.transfer_type ?? '-'}</td>
                            <td>${row.transfer_reason ?? '-'}</td>
                            <td>${row.notes ?? '-'}</td>
                            <td>${row.can_undo ? `<button type="button" class="conflict-btn conflict-btn--danger" style="min-height:28px; padding:4px 9px; font-size:11px;" data-transaction-history-undo="${row.id}">Undo</button>` : '<span class="muted">-</span>'}</td>
                        </tr>
                    `);
                });
            })
            .catch(function (error) {
                transactionConflictHistoryBody.innerHTML = '<tr><td colspan="8" class="muted">' + error.message + '</td></tr>';
            });
    };

    transactionConflictSourceSearchButton?.addEventListener('click', function () {
        searchTransactionConflictEmployees('source');
    });

    transactionConflictTargetSearchButton?.addEventListener('click', function () {
        searchTransactionConflictEmployees('target');
    });

    transactionConflictSourceSearch?.addEventListener('keydown', function (event) {
        if (event.key === 'Enter') {
            event.preventDefault();
            searchTransactionConflictEmployees('source');
        }
    });

    transactionConflictTargetSearch?.addEventListener('keydown', function (event) {
        if (event.key === 'Enter') {
            event.preventDefault();
            searchTransactionConflictEmployees('target');
        }
    });

    transactionConflictCreateTargetButton?.addEventListener('click', function () {
        if (!transactionConflictSourceSelect?.value) {
            window.alert('Pilih user sumber dulu agar pembuatan user tujuan tidak membingungkan operator.');
            return;
        }

        transactionConflictCreateEmpCode.value = '';
        transactionConflictCreateName.value = '';
        transactionConflictCreatePassword.value = '';
        transactionConflictCreateNotes.value = '';
        toggleTransactionConflictCreateModal(true);
    });

    transactionConflictCreateClose?.addEventListener('click', function () {
        toggleTransactionConflictCreateModal(false);
    });

    transactionConflictCreateCloseTop?.addEventListener('click', function () {
        toggleTransactionConflictCreateModal(false);
    });

    transactionConflictCreateModal?.addEventListener('click', function (event) {
        if (event.target === transactionConflictCreateModal) {
            toggleTransactionConflictCreateModal(false);
        }
    });

    transactionConflictCreateSubmit?.addEventListener('click', function () {
        const terminalId = transactionConflictCreateTerminal?.value || '';
        const empCode = (transactionConflictCreateEmpCode?.value || '').trim();
        const name = (transactionConflictCreateName?.value || '').trim();
        const password = (transactionConflictCreatePassword?.value || '').trim();
        const notes = (transactionConflictCreateNotes?.value || '').trim();

        if (!terminalId) {
            window.alert('Pilih mesin tujuan dulu.');
            return;
        }
        if (!empCode) {
            window.alert('Isi User ID baru dulu.');
            return;
        }
        if (!name) {
            window.alert('Isi nama user dulu.');
            return;
        }
        if (!password) {
            window.alert('Isi password/PIN device dulu.');
            return;
        }

        fetch(transactionConflictRoutes.createTargetUser, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: JSON.stringify({
                terminal_id: terminalId,
                emp_code: empCode,
                name: name,
                device_password: password,
                notes: notes,
            }),
        })
            .then(async function (response) {
                const payload = await response.json().catch(function () { return {}; });
                if (!response.ok) {
                    throw new Error(payload.message || 'Gagal membuat user tujuan baru.');
                }
                return payload;
            })
            .then(function (payload) {
                appendAndSelectTransactionConflictTargetEmployee(payload.employee || null);
                toggleTransactionConflictCreateModal(false);
                window.alert(payload.message || 'User tujuan baru berhasil dibuat.');
            })
            .catch(function (error) {
                window.alert(error.message);
            });
    });

    transactionConflictSourceSelect?.addEventListener('change', function () {
        fillTransactionConflictEmployeeOptions(transactionConflictTargetSelect, [], '- Pilih user tujuan -');
        setTransactionConflictTargetState(Boolean(transactionConflictSourceSelect?.value));
        updateTransactionConflictSelectedBadge();
        if (transactionConflictSourceSelect?.value) {
            searchTransactionConflictEmployees('target', { autoPickSingle: false });
            loadTransactionConflictRows();
            loadTransactionConflictHistory();
            return;
        }

        if (transactionConflictBody) {
            transactionConflictBody.innerHTML = '<tr><td colspan="9" class="muted">Pilih user sumber dan rentang tanggal, lalu klik cari transaksi.</td></tr>';
        }
        if (transactionConflictHistoryBody) {
            transactionConflictHistoryBody.innerHTML = '<tr><td colspan="8" class="muted">Belum ada history transfer conflict.</td></tr>';
        }
    });

    transactionConflictLoadButton?.addEventListener('click', function () {
        loadTransactionConflictRows();
        loadTransactionConflictHistory();
    });

    transactionConflictCheckAll?.addEventListener('change', function () {
        document.querySelectorAll('[data-transaction-conflict-checkbox]').forEach(function (checkbox) {
            checkbox.checked = transactionConflictCheckAll.checked;
        });
        updateTransactionConflictSelectedBadge();
    });

    transactionConflictTransferButton?.addEventListener('click', function () {
        const sourceEmployeeId = transactionConflictSourceSelect?.value || '';
        const targetEmployeeId = transactionConflictTargetSelect?.value || '';
        const transactionIds = transactionConflictSelectedIds();

        if (!sourceEmployeeId) {
            window.alert('Pilih user sumber dulu.');
            return;
        }
        if (!transactionIds.length) {
            window.alert('Pilih transaksi yang mau dipindah dulu.');
            return;
        }
        if (!targetEmployeeId) {
            window.alert('Pilih user tujuan dulu.');
            return;
        }
        if (!window.confirm('Pindahkan ' + transactionIds.length + ' transaksi ke user tujuan terpilih?')) {
            return;
        }

        fetch(transactionConflictUrl(transactionConflictRoutes.transferTransactions, sourceEmployeeId), {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: JSON.stringify({
                transaction_ids: transactionIds,
                target_employee_id: targetEmployeeId,
                transfer_reason: transactionConflictReason?.value || 'conflict_fingerprint_registration',
                notes: transactionConflictNotes?.value || '',
            }),
        })
            .then(async function (response) {
                const payload = await response.json().catch(function () { return {}; });
                if (!response.ok) {
                    throw new Error(payload.message || 'Gagal memindahkan transaksi.');
                }
                return payload;
            })
            .then(function (payload) {
                window.alert(payload.message || 'Transaksi berhasil dipindah.');
                loadTransactionConflictRows();
                loadTransactionConflictHistory();
            })
            .catch(function (error) {
                window.alert(error.message);
            });
    });

    transactionConflictHistoryBody?.addEventListener('click', function (event) {
        const button = event.target.closest('[data-transaction-history-undo]');
        if (!button) {
            return;
        }

        const historyId = button.getAttribute('data-transaction-history-undo');
        if (!historyId) {
            return;
        }

        if (!window.confirm('Undo transfer transaksi ini?')) {
            return;
        }

        fetch(transactionConflictUrl(transactionConflictRoutes.undoTransfer, historyId), {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: JSON.stringify({
                notes: 'Undo dari halaman conflict transfer',
            }),
        })
            .then(async function (response) {
                const payload = await response.json().catch(function () { return {}; });
                if (!response.ok) {
                    throw new Error(payload.message || 'Gagal undo transfer.');
                }
                return payload;
            })
            .then(function (payload) {
                window.alert(payload.message || 'Undo transfer berhasil.');
                loadTransactionConflictRows();
                loadTransactionConflictHistory();
            })
            .catch(function (error) {
                window.alert(error.message);
            });
    });

    transactionConflictHistoryRefreshButton?.addEventListener('click', function () {
        loadTransactionConflictHistory();
    });

    setTransactionConflictTargetState(false);
    searchTransactionConflictEmployees('source');
    loadTransactionConflictHistory();
</script>
@endpush