@extends('layouts.app')

@php
    $pageTitle = 'Transactions';
    $pageHeading = 'Transaction Monitor';
    $pageDescription = 'Pantau log absensi mentah dari mesin dengan filter cepat dan label state yang jelas.';
    $tableThemeClass = 'ops-datatable-theme ops-datatable-theme--transactions';
    $sortBy = $filters['sort_by'] ?? 'punch_time';
    $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('transactions.index', $query);
    };
@endphp

@section('content')
    <style>
        .transaction-summary-strip {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 10px;
        }
        .transaction-summary-item,
        .transaction-list-meta {
            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;
            white-space: nowrap;
        }
        .transaction-summary-item strong {
            color: #212529;
            font-size: 14px;
        }
        .transaction-summary-item.today strong,
        .transaction-summary-item.check-in strong {
            color: #198754;
        }
        .transaction-summary-item.check-out strong {
            color: #0d6efd;
        }
        .transaction-list-meta {
            background: #e9ecef;
        }
        .transaction-action-buttons {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }
        .transaction-action-buttons .btn {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 5px 9px;
            border-radius: 3px;
            font-size: 12px;
            white-space: nowrap;
        }
        .manual-clock-form {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }
        .manual-clock-field {
            display: grid;
            gap: 6px;
        }
        .manual-clock-field label {
            margin: 0;
            color: #344054;
            font-size: 12px;
            font-weight: 800;
        }
        .manual-clock-field input,
        .manual-clock-field select,
        .manual-clock-field textarea {
            width: 100%;
            min-width: 0;
            padding: 9px 11px;
            border: 1px solid #98a6b3;
            border-radius: 6px;
            background: #ffffff;
        }
        .manual-clock-field textarea {
            resize: vertical;
        }
        .manual-clock-field--wide {
            grid-column: 1 / -1;
        }
        .manual-clock-help {
            color: #667085;
            font-size: 10px;
            line-height: 1.45;
        }
        .manual-clock-counter {
            color: #0d6efd;
            font-weight: 800;
        }
        .manual-clock-password {
            padding: 10px;
            border: 1px solid #f0ad4e;
            border-left: 4px solid #c44b00;
            border-radius: 6px;
            background: #fff5e8;
        }
        .manual-clock-errors {
            grid-column: 1 / -1;
            padding: 8px 10px;
            border: 1px solid #dc3545;
            border-radius: 6px;
            background: #fff0f1;
            color: #842029;
            font-size: 11px;
        }
        .manual-clock-actions {
            grid-column: 1 / -1;
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }
        @media (max-width: 720px) {
            .manual-clock-form {
                grid-template-columns: 1fr;
            }
            .manual-clock-field--wide,
            .manual-clock-actions,
            .manual-clock-errors {
                grid-column: auto;
            }
        }
    </style>

    <section class="table-card">
        <div class="transaction-summary-strip" aria-label="Ringkasan transaksi">
            <span class="transaction-summary-item">Total <strong>{{ number_format($summary['total']) }}</strong></span>
            <span class="transaction-summary-item today">Hari Ini <strong>{{ number_format($summary['today']) }}</strong></span>
            <span class="transaction-summary-item check-in">Check In <strong>{{ number_format($summary['check_in']) }}</strong></span>
            <span class="transaction-summary-item check-out">Check Out <strong>{{ number_format($summary['check_out']) }}</strong></span>
        </div>

        <form method="GET" action="{{ route('transactions.index') }}" class="filters" style="margin-bottom:12px;">
            <input type="text" name="q" value="{{ $filters['q'] }}" placeholder="Cari emp code, nama, serial number...">
            <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_emp_code" value="1" @checked($filters['exact_emp_code'] ?? false)>
                Exact Emp Code
            </label>
            <select name="state_filter">
                <option value="">- Semua State -</option>
                @foreach ($stateLabels as $stateCode => $stateLabel)
                    <option value="{{ $stateCode }}" @selected((string) ($filters['state_filter'] ?? '') === (string) $stateCode)>{{ $stateLabel }}</option>
                @endforeach
            </select>
            <select name="source_filter">
                <option value="">- Semua Source -</option>
                <option value="device" @selected(($filters['source_filter'] ?? '') === 'device')>Device / Default</option>
                <option value="manual" @selected(($filters['source_filter'] ?? '') === 'manual')>Manual Correction</option>
            </select>
            <select name="device_filter">
                <option value="">- Semua Device -</option>
                @foreach ($devices as $device)
                    <option value="{{ $device->sn }}" @selected((string) ($filters['device_filter'] ?? '') === (string) $device->sn)>{{ match ($device->presence_status ?? 'offline') {
                        'online' => '🟢',
                        'stale' => '🟡',
                        default => '⚪',
                    } }} {{ strtoupper((string) ($device->presence_label ?? 'Offline')) }} - {{ $device->alias ?: $device->sn }} ({{ $device->sn }})</option>
                @endforeach
            </select>
            <input type="date" name="date_from" value="{{ $filters['date_from'] }}">
            <input type="date" name="date_to" value="{{ $filters['date_to'] }}">
            <select name="per_page">
                @foreach ([10,25,50,100,250] as $size)
                    <option value="{{ $size }}" @selected((int) ($filters['per_page'] ?? 100) === $size)>{{ $size }} rows</option>
                @endforeach
            </select>
            <button type="submit" class="primary">Filter</button>
            <a href="{{ route('transactions.index') }}" class="pill-link secondary">Reset</a>
        </form>

        <div style="display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; flex-wrap:wrap;">
            <div>
                <h3 style="margin:0 0 3px;">Transaction List</h3>
                <span class="transaction-list-meta">
                    Menampilkan {{ $transactions->firstItem() ?? 0 }}-{{ $transactions->lastItem() ?? 0 }} dari {{ $transactions->total() }} transaksi
                </span>
            </div>
            <div class="transaction-action-buttons">
                <button type="button" class="btn btn-success btn-sm" onclick="toggleExportPanel()">
                    <i class="fas fa-file-excel"></i> Export
                </button>
                <a href="{{ route('transaction-conflicts.index') }}" class="btn btn-warning btn-sm">
                    <i class="fas fa-right-left"></i> Conflict Transfer
                </a>
                <a href="{{ route('employees.index') }}" class="btn btn-secondary btn-sm">
                    <i class="fas fa-users"></i> Employees
                </a>
                <button type="button" class="btn btn-primary btn-sm" onclick="toggleManualClockModal()">
                    <i class="fas fa-plus"></i> Input Manual
                </button>
            </div>
        </div>
        <div data-datatable data-datatable-server="1">
            <div class="table-scroll">
                <table>
                    <thead>
                        <tr>
                            <th><a href="{{ $sortUrl('id') }}" style="color:inherit; text-decoration:none;">ID {{ $sortIcon('id') }}</a></th>
                            <th><a href="{{ $sortUrl('emp_code') }}" style="color:inherit; text-decoration:none;">Emp Code {{ $sortIcon('emp_code') }}</a></th>
                            <th><a href="{{ $sortUrl('employee_name') }}" style="color:inherit; text-decoration:none;">Name {{ $sortIcon('employee_name') }}</a></th>
                            <th><a href="{{ $sortUrl('punch_time') }}" style="color:inherit; text-decoration:none;">Punch Time {{ $sortIcon('punch_time') }}</a></th>
                            <th><a href="{{ $sortUrl('punch_state') }}" style="color:inherit; text-decoration:none;">State {{ $sortIcon('punch_state') }}</a></th>
                            <th><a href="{{ $sortUrl('source') }}" style="color:inherit; text-decoration:none;">Source {{ $sortIcon('source') }}</a></th>
                            <th><a href="{{ $sortUrl('verify_type') }}" style="color:inherit; text-decoration:none;">Verify {{ $sortIcon('verify_type') }}</a></th>
                            <th>Work Code</th>
                            <th><a href="{{ $sortUrl('terminal_sn') }}" style="color:inherit; text-decoration:none;">Terminal {{ $sortIcon('terminal_sn') }}</a></th>
                            <th><a href="{{ $sortUrl('reserved') }}" style="color:inherit; text-decoration:none;">Notes {{ $sortIcon('reserved') }}</a></th>
                            <th><a href="{{ $sortUrl('upload_time') }}" style="color:inherit; text-decoration:none;">Upload Time {{ $sortIcon('upload_time') }}</a></th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($transactions as $item)
                            <tr>
                                <td>{{ $item->id }}</td>
                                <td>{{ $item->emp_code }}</td>
                                <td>{{ $item->employee_name ?: '-' }}</td>
                                <td>{{ $item->punch_time }}</td>
                                <td>
                                    <span class="status" title="State code {{ $item->punch_state }}">
                                        {{ $stateLabels[(int) $item->punch_state] ?? ('UNKNOWN (' . $item->punch_state . ')') }}
                                    </span>
                                </td>
                                <td>
                                    @if ($item->source_label === 'Manual Correction')
                                        <span class="status pending">{{ $item->source_label }}</span>
                                    @else
                                        <span class="status">{{ $item->source_label }}</span>
                                    @endif
                                </td>
                                <td title="Verify type {{ $item->verify_type }}">
                                    {{ $verifyTypeLabels[(int) $item->verify_type] ?? ('TYPE ' . $item->verify_type) }}
                                </td>
                                <td title="Work code {{ $item->work_code ?? 0 }}">
                                    {{ $workCodeLabels[(int) ($item->work_code ?? 0)] ?? (($item->work_code ?? 0) === null ? '-' : ('CODE ' . $item->work_code)) }}
                                </td>
                                <td>{{ $item->terminal_sn }}</td>
                                <td>{{ $item->reserved ?: '-' }}</td>
                                <td>{{ $item->upload_time }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="11" class="muted">Belum ada data transaksi.</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 {{ $transactions->firstItem() ?? 0 }}-{{ $transactions->lastItem() ?? 0 }} dari {{ $transactions->total() }} transaksi
            </div>
            {{ $transactions->onEachSide(1)->links() }}
        </div>
    </section>

    <div id="transaction-export-panel" class="modal-backdrop" onclick="if (event.target === this) toggleExportPanel(false)">
        <div class="modal-card">
            <div class="modal-head">
                <h3>Pilih Tanggal yang akan di Export</h3>
                <button type="button" class="modal-close" onclick="toggleExportPanel(false)">&times;</button>
            </div>
            <div class="modal-body">
                <form method="GET" action="{{ route('transactions.export.xlsx') }}" class="filters" style="align-items: flex-start;" id="transaction-export-form">
                    <div style="min-width: 240px;">
                        <label style="display:block; font-weight:700; margin-bottom:8px;">Pilih Tanggal Start s/d Tanggal End</label>
                        <div style="display:flex; gap:12px; flex-wrap:wrap;">
                            <input id="transaction-export-date-from" type="date" name="date_from" value="{{ $filters['date_from'] ?: today()->toDateString() }}">
                            <input id="transaction-export-date-to" type="date" name="date_to" value="{{ $filters['date_to'] ?: today()->toDateString() }}">
                        </div>
                    </div>

                    <div style="min-width: 240px;">
                        <label style="display:block; font-weight:700; margin-bottom:8px;">Pilih Status Mesin Finger</label>
                        <select name="state_filter">
                            <option value="">* All</option>
                            @foreach ($stateLabels as $stateCode => $stateLabel)
                                <option value="{{ $stateCode }}" @selected((string) ($filters['state_filter'] ?? '') === (string) $stateCode)>{{ $stateLabel }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div style="min-width: 240px;">
                        <label style="display:block; font-weight:700; margin-bottom:8px;">Pilih Source Transaksi</label>
                        <select name="source_filter">
                            <option value="">* All</option>
                            <option value="device" @selected(($filters['source_filter'] ?? '') === 'device')>Device / Default</option>
                            <option value="manual" @selected(($filters['source_filter'] ?? '') === 'manual')>Manual Correction</option>
                        </select>
                    </div>

                    <div style="min-width: 240px;">
                        <label style="display:block; font-weight:700; margin-bottom:8px;">Pilih Batas Masuk Awal >=</label>
                        <input type="time" name="time_start" value="{{ $filters['time_start'] }}">
                    </div>

                    <div style="min-width: 240px;">
                        <label style="display:block; font-weight:700; margin-bottom:8px;">Pilih Batas Masuk Akhir <=</label>
                        <input type="time" name="time_end" value="{{ $filters['time_end'] }}">
                    </div>

                    <div style="width: 100%;">
                        <div class="muted" style="margin-bottom: 8px;">
                            Fitur pengecualian data dari mesin tertentu. Memilih mesin berarti tidak menampilkan data dari mesin tersebut.
                        </div>
                        <label style="display:block; font-weight:700; margin-bottom:8px;">Pilih Mesin Finger yang dikecualikan (Bisa Multiple)</label>
                        <select name="exclude_devices[]" multiple size="4" style="min-width: 320px; width: 100%; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                            @foreach ($devices as $device)
                                <option value="{{ $device->sn }}" @selected(in_array($device->sn, $filters['exclude_devices'] ?? [], true))>{{ match ($device->presence_status ?? 'offline') {
                                    'online' => '🟢',
                                    'stale' => '🟡',
                                    default => '⚪',
                                } }} {{ strtoupper((string) ($device->presence_label ?? 'Offline')) }} - {{ $device->alias ?: $device->sn }} ({{ $device->sn }})</option>
                            @endforeach
                        </select>
                    </div>

                    <div style="width: 100%;">
                        <label style="display:block; font-weight:700; margin-bottom:8px;">Isian kode finger</label>
                        <div class="muted" style="margin-bottom: 8px;">Pisahkan dengan koma tanpa spasi, kosong berarti ambil semua. Contoh: `10022,10024,30167,21`</div>
                        <textarea name="finger_codes" rows="5" style="width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong); resize: vertical;">{{ $filters['finger_codes'] }}</textarea>
                    </div>

                    <input type="hidden" name="q" value="{{ $filters['q'] }}">
                    <input type="hidden" name="device_filter" value="{{ $filters['device_filter'] }}">

                    <div style="width: 100%; display:flex; gap:12px; justify-content:flex-end;">
                        <button type="button" class="pill-link secondary" onclick="toggleExportPanel(false)">Tutup</button>
                        <button type="submit" class="pill-link secondary" formaction="{{ route('transactions.export.dat') }}">Download DAT</button>
                        <button type="submit" class="primary" formaction="{{ route('transactions.export.xlsx') }}">Download XLSX</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div id="manual-clock-modal" class="modal-backdrop" onclick="if (event.target === this) toggleManualClockModal(false)">
        <div class="modal-card">
            <div class="modal-head">
                <h3>Manual Forgetting Clock Correction</h3>
                <button type="button" class="modal-close" onclick="toggleManualClockModal(false)">&times;</button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ route('forgetting-clock.manual') }}" class="manual-clock-form">
                    @csrf
                    @if ($errors->hasAny(['emp_codes', 'emp_code', 'punch_time', 'punch_state', 'terminal_sn', 'verify_type', 'notes', 'password_confirmation']))
                        <div class="manual-clock-errors">
                            @foreach ($errors->all() as $error)
                                <div>{{ $error }}</div>
                            @endforeach
                        </div>
                    @endif
                    <div class="manual-clock-field manual-clock-field--wide">
                        <label for="manual-clock-emp-codes">Emp Code Bulk</label>
                        <textarea id="manual-clock-emp-codes" name="emp_codes" rows="4" required placeholder="Paste dari Excel atau notepad:&#10;10022&#10;10023&#10;10024">{{ old('emp_codes', old('emp_code')) }}</textarea>
                        <div class="manual-clock-help">
                            Mendukung pemisah enter, tab, spasi, koma, titik koma, atau <code>|</code>.
                            Duplikat otomatis dihapus. <span class="manual-clock-counter" id="manual-clock-emp-code-count">0 Emp Code</span>
                        </div>
                    </div>
                    <div class="manual-clock-field">
                        <label>Punch Time</label>
                        <input type="datetime-local" name="punch_time" value="{{ old('punch_time') }}" required>
                    </div>
                    <div class="manual-clock-field">
                        <label>Punch State</label>
                        <select name="punch_state" required>
                            @foreach ($stateLabels as $stateCode => $stateLabel)
                                <option value="{{ $stateCode }}" @selected((string) old('punch_state', '0') === (string) $stateCode)>{{ $stateLabel }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="manual-clock-field">
                        <label>Terminal SN</label>
                        <select name="terminal_sn">
                            <option value="">- Optional -</option>
                            @foreach ($devices as $device)
                                <option value="{{ $device->sn }}" @selected(old('terminal_sn') === $device->sn)>{{ match ($device->presence_status ?? 'offline') {
                                    'online' => '🟢',
                                    'stale' => '🟡',
                                    default => '⚪',
                                } }} {{ strtoupper((string) ($device->presence_label ?? 'Offline')) }} - {{ $device->alias ?: $device->sn }} ({{ $device->sn }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="manual-clock-field">
                        <label>Verify Type</label>
                        <input type="number" name="verify_type" value="{{ old('verify_type', 1) }}" min="0" max="99">
                    </div>
                    <div class="manual-clock-field manual-clock-field--wide">
                        <label>Notes</label>
                        <textarea name="notes" rows="3" placeholder="Contoh: lupa checkout karena dinas luar">{{ old('notes') }}</textarea>
                    </div>
                    <div class="manual-clock-field manual-clock-field--wide manual-clock-password">
                        <label for="manual-clock-password">Verifikasi Password Login</label>
                        <input id="manual-clock-password" type="password" name="password_confirmation" required autocomplete="current-password" placeholder="Masukkan password user yang sedang login">
                        <div class="manual-clock-help">Wajib diisi untuk mengotorisasi koreksi transaksi manual.</div>
                    </div>
                    <div class="manual-clock-actions">
                        <button type="button" class="pill-link secondary" onclick="toggleManualClockModal(false)">Tutup</button>
                        <button type="submit" class="btn btn-primary">Simpan Koreksi Bulk</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

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

        if (shouldShow) {
            const today = new Date();
            const timezoneOffset = today.getTimezoneOffset() * 60000;
            const localToday = new Date(today.getTime() - timezoneOffset).toISOString().slice(0, 10);
            const dateFrom = document.getElementById('transaction-export-date-from');
            const dateTo = document.getElementById('transaction-export-date-to');

            if (dateFrom && !dateFrom.value) {
                dateFrom.value = localToday;
            }

            if (dateTo && !dateTo.value) {
                dateTo.value = localToday;
            }
        }
    }

    function toggleManualClockModal(force) {
        const panel = document.getElementById('manual-clock-modal');
        if (!panel) return;
        const shouldShow = typeof force === 'boolean' ? force : !panel.classList.contains('open');
        panel.classList.toggle('open', shouldShow);

        if (shouldShow) {
            document.getElementById('manual-clock-emp-codes')?.focus();
        }
    }

    const manualClockEmpCodes = document.getElementById('manual-clock-emp-codes');
    const manualClockEmpCodeCount = document.getElementById('manual-clock-emp-code-count');

    function updateManualClockEmpCodeCount() {
        if (!manualClockEmpCodes || !manualClockEmpCodeCount) return;

        const codes = manualClockEmpCodes.value
            .split(/[\s,;|]+/)
            .map((code) => code.trim())
            .filter(Boolean);

        manualClockEmpCodeCount.textContent = new Set(codes).size + ' Emp Code';
    }

    manualClockEmpCodes?.addEventListener('input', updateManualClockEmpCodeCount);
    updateManualClockEmpCodeCount();

    @if ($errors->hasAny(['emp_codes', 'emp_code', 'punch_time', 'punch_state', 'terminal_sn', 'verify_type', 'notes', 'password_confirmation']))
        toggleManualClockModal(true);
    @endif
</script>
@endpush