@extends('layouts.app')

@php
    $pageTitle = 'Forgetting Clock';
    $pageHeading = 'Forgetting Clock';
    $pageDescription = 'Deteksi pasangan clock yang tidak seimbang agar lupa check in/out cepat kelihatan.';
    $tableThemeClass = 'ops-datatable-theme ops-datatable-theme--forgetting';
@endphp

@section('content')
    <section class="hero">
        <h3 style="margin: 0 0 10px; font-size: 22px;">Deteksi lupa clock dari pola transaksi harian.</h3>
        <p style="margin: 0; color: var(--muted); line-height: 1.7;">
            Halaman ini merangkum employee yang punya pasangan transaksi tidak seimbang, misalnya ada `CHECK_IN` tanpa `CHECK_OUT`, atau `BREAK_OUT` tanpa `BREAK_IN`.
        </p>
    </section>

    @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;">Berhasil</strong>
            <div>{{ session('status') }}</div>
        </section>
    @endif

    @if (session('import_errors'))
        <section class="hero" style="border-color: rgba(180, 35, 24, 0.2); background: rgba(180, 35, 24, 0.06);">
            <strong style="display: block; color: var(--red); margin-bottom: 8px;">Beberapa baris import perlu dicek</strong>
            <ul style="margin: 0; padding-left: 18px; color: var(--ink);">
                @foreach (session('import_errors') as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </section>
    @endif

    <section class="stats" style="grid-template-columns: repeat(4, minmax(0, 1fr));">
        <div class="card">
            <div class="label">Issue Rows</div>
            <div class="value">{{ number_format($summary['rows']) }}</div>
            <div class="meta">Jumlah baris employee-date yang terdeteksi bermasalah.</div>
        </div>
        <div class="card">
            <div class="label">Today</div>
            <div class="value">{{ number_format($summary['today']) }}</div>
            <div class="meta">Issue untuk tanggal hari ini.</div>
        </div>
        <div class="card">
            <div class="label">Missing Check Out</div>
            <div class="value">{{ number_format($summary['missing_checkout']) }}</div>
            <div class="meta">Check in lebih banyak daripada check out.</div>
        </div>
        <div class="card">
            <div class="label">Break Issues</div>
            <div class="value">{{ number_format($summary['break_issue']) }}</div>
            <div class="meta">Jumlah kasus break out/in tidak seimbang.</div>
        </div>
    </section>

    <section class="table-card">
        <form method="GET" action="{{ route('forgetting-clock.index') }}" class="filters">
            <input type="text" name="q" value="{{ $filters['q'] }}" placeholder="Cari emp code atau nama...">
            <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'] ?? 50) === $size)>{{ $size }} rows</option>
                @endforeach
            </select>
            <button type="submit" class="primary">Filter</button>
            <a href="{{ route('forgetting-clock.index') }}" class="pill-link secondary">Reset</a>
        </form>
    </section>

    <section class="table-card">
        <div style="display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px;">
            <div>
                <h3 style="margin: 0 0 6px;">Bulk Forgetting Clock Import</h3>
                <div class="muted" style="font-size:13px;">Import massal koreksi transaksi dari file CSV/XLSX untuk menutup kasus lupa check in/out.</div>
            </div>
            <div style="display:flex; gap:12px; flex-wrap:wrap;">
                <a href="{{ route('forgetting-clock.template', ['format' => 'xlsx']) }}" class="pill-link">Template XLSX</a>
                <a href="{{ route('forgetting-clock.template', ['format' => 'csv']) }}" class="pill-link">Template CSV</a>
                <button type="button" class="pill-link secondary" onclick="toggleManualClockModal()">Input Manual</button>
                <button type="button" class="pill-link primary" onclick="toggleImportClockModal()">Import Massal</button>
            </div>
        </div>
    </section>

    <section class="table-card">
        <h3 style="margin-bottom: 14px;">Forgetting Clock List</h3>
        <div data-datatable data-datatable-server="1">
            <div class="datatable-toolbar">
                <input type="text" data-datatable-search placeholder="Cari cepat issue lupa clock...">
                <div class="datatable-meta" data-datatable-meta></div>
            </div>
            <div class="table-scroll">
                <table>
                    <thead>
                        <tr>
                            <th>Emp Code</th>
                            <th>Name</th>
                            <th>Date</th>
                            <th>First Punch</th>
                            <th>Last Punch</th>
                            <th>Total Logs</th>
                            <th>Check In/Out</th>
                            <th>Break Out/In</th>
                            <th>OT In/Out</th>
                            <th>Issue</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($rows as $row)
                            <tr>
                                <td>{{ $row->emp_code }}</td>
                                <td>{{ $row->employee_name ?: '-' }}</td>
                                <td>{{ $row->work_date }}</td>
                                <td>{{ $row->first_punch }}</td>
                                <td>{{ $row->last_punch }}</td>
                                <td>{{ $row->total_logs }}</td>
                                <td>{{ $row->check_in_count }} / {{ $row->check_out_count }}</td>
                                <td>{{ $row->break_out_count }} / {{ $row->break_in_count }}</td>
                                <td>{{ $row->ot_in_count }} / {{ $row->ot_out_count }}</td>
                                <td><span class="status pending">{{ $row->issues }}</span></td>
                            </tr>
                        @empty
                            <tr><td colspan="10" class="muted">Belum ada issue forgetting clock pada rentang tanggal ini.</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 {{ $rows->firstItem() ?? 0 }}-{{ $rows->lastItem() ?? 0 }} dari {{ $rows->total() }} issue
            </div>
            {{ $rows->onEachSide(1)->links() }}
        </div>
    </section>

    <section class="table-card">
        <h3 style="margin-bottom: 14px;">Correction Audit Trail</h3>
        <div class="muted" style="margin-bottom: 14px; font-size: 13px;">
            Riwayat siapa yang memasukkan koreksi manual atau import massal. Ini membantu kita cek siapa yang mengubah attendance correction terakhir.
        </div>
        <div data-datatable>
            <div class="datatable-toolbar">
                <input type="text" data-datatable-search placeholder="Cari cepat audit correction...">
                <div class="datatable-meta" data-datatable-meta></div>
            </div>
            <div class="table-scroll">
                <table>
                    <thead>
                        <tr>
                            <th>When</th>
                            <th>Action</th>
                            <th>By</th>
                            <th>Emp Code</th>
                            <th>Punch Time</th>
                            <th>Terminal</th>
                            <th>Summary</th>
                            <th>Notes</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($recentAudits as $audit)
                            <tr>
                                <td>{{ $audit->created_at?->format('Y-m-d H:i:s') ?: '-' }}</td>
                                <td>
                                    <span class="status {{ $audit->action_type === 'manual' ? 'pending' : '' }}">
                                        {{ strtoupper($audit->action_type) }}
                                    </span>
                                </td>
                                <td>{{ $audit->performed_name ?: ($audit->performed_by ?: 'system') }}</td>
                                <td>{{ $audit->emp_code ?: '-' }}</td>
                                <td>{{ $audit->punch_time ?: '-' }}</td>
                                <td>{{ $audit->terminal_sn ?: '-' }}</td>
                                <td>{{ $audit->summary ?: '-' }}</td>
                                <td>{{ $audit->notes ?: '-' }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="8" class="muted">Belum ada audit correction.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </section>

    <div id="forgetting-clock-import-modal" class="modal-backdrop" onclick="if (event.target === this) toggleImportClockModal(false)">
        <div class="modal-card">
            <div class="modal-head">
                <h3>Import Massal Forgetting Clock</h3>
                <button type="button" class="modal-close" onclick="toggleImportClockModal(false)">&times;</button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ route('forgetting-clock.import') }}" enctype="multipart/form-data" class="filters" style="align-items:flex-start;">
                    @csrf
                    <div style="width:100%;">
                        <label style="display:block; font-weight:700; margin-bottom:8px;">File CSV / XLSX</label>
                        <input type="file" name="import_file" accept=".csv,.txt,.xlsx" required>
                        <div class="muted" style="margin-top:8px;">
                            Kolom minimal: `emp_code`, `punch_time`, `punch_state`. Optional: `terminal_sn`, `verify_type`, `work_code`, `reserved`.
                        </div>
                    </div>

                    <div style="min-width:240px;">
                        <label style="display:block; font-weight:700; margin-bottom:8px;">Default Terminal SN</label>
                        <input type="text" id="forgetting-clock-terminal-search" placeholder="Cari alias / SN..." style="margin-bottom:10px;">
                            <select name="default_terminal_sn" style="width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                                <option value="">- (kosong) -</option>
                                @foreach (($terminals ?? []) as $terminal)
                                    <option value="{{ $terminal->sn }}" @selected((string) old('default_terminal_sn', $defaultTerminalSn ?? '') === (string) $terminal->sn)>
                                        {{ match ($terminal->presence_status ?? 'offline') {
                                            'online' => '🟢',
                                            'stale' => '🟡',
                                            default => '⚪',
                                        } }} {{ strtoupper((string) ($terminal->presence_label ?? 'Offline')) }} - {{ $terminal->alias ?: $terminal->sn }} ({{ $terminal->sn }})
                                    </option>
                                @endforeach
                            </select>
                    </div>

                    <div style="min-width:240px;">
                        <label style="display:block; font-weight:700; margin-bottom:8px;">Default Verify Type</label>
                        <input type="number" name="default_verify_type" value="1" min="0" max="99">
                    </div>

                    <div style="min-width:240px;">
                        <label style="display:block; font-weight:700; margin-bottom:8px;">Default Punch State</label>
                        <select name="default_punch_state">
                            <option value="">- Ikuti file -</option>
                            <option value="CHECK_IN">CHECK_IN</option>
                            <option value="CHECK_OUT">CHECK_OUT</option>
                            <option value="BREAK_OUT">BREAK_OUT</option>
                            <option value="BREAK_IN">BREAK_IN</option>
                            <option value="OT_IN">OT_IN</option>
                            <option value="OT_OUT">OT_OUT</option>
                        </select>
                    </div>

                    <div style="width:100%; background: rgba(29, 42, 36, 0.04); border:1px solid var(--line); border-radius:16px; padding:14px;">
                        <div style="font-weight:700; margin-bottom:8px;">Contoh header file</div>
                        <code>emp_code,punch_time,punch_state,terminal_sn,verify_type,work_code,reserved</code>
                        <div class="muted" style="margin-top:8px;">Contoh row: `10022,2026-04-08 08:01:00,CHECK_IN,BWXP201160370,1,,import_koreksi`</div>
                    </div>

                    <div style="width:100%; display:flex; gap:12px; justify-content:flex-end;">
                        <button type="button" class="pill-link secondary" onclick="toggleImportClockModal(false)">Tutup</button>
                        <button type="submit" class="primary">Import Sekarang</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div id="forgetting-clock-manual-modal" class="modal-backdrop" onclick="if (event.target === this) toggleManualClockModal(false)">
        <div class="modal-card">
            <div class="modal-head">
                <h3>Input Manual Forgetting Clock</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="filters" style="align-items:flex-start;">
                    @csrf
                    <div style="width:100%;">
                        <label style="display:block; font-weight:700; margin-bottom:8px;">Emp Code Bulk</label>
                        <textarea id="forgetting-clock-manual-emp-codes" name="emp_codes" rows="4" required style="width:100%; padding:12px 14px; border-radius:8px; border:1px solid #98a6b3; background:#fff; resize:vertical;" placeholder="Paste dari Excel/notepad: enter, tab, spasi, koma, titik koma, atau |">{{ old('emp_codes', old('emp_code')) }}</textarea>
                        <div class="muted" style="font-size:11px; margin-top:5px;">Duplikat otomatis dihapus. <strong id="forgetting-clock-manual-emp-count" style="color:#0d6efd;">0 Emp Code</strong></div>
                    </div>
                    <div style="min-width: 260px;">
                        <label style="display:block; font-weight:700; margin-bottom:8px;">Punch Time</label>
                        <input type="datetime-local" name="punch_time" required>
                    </div>
                    <div style="min-width: 220px;">
                        <label style="display:block; font-weight:700; margin-bottom:8px;">Punch State</label>
                        <select name="punch_state" required>
                            <option value="0">CHECK_IN</option>
                            <option value="1">CHECK_OUT</option>
                            <option value="2">BREAK_OUT</option>
                            <option value="3">BREAK_IN</option>
                            <option value="4">OT_IN</option>
                            <option value="5">OT_OUT</option>
                        </select>
                    </div>
                    <div style="min-width: 220px;">
                        <label style="display:block; font-weight:700; margin-bottom:8px;">Terminal SN</label>
                        <input type="text" id="forgetting-clock-manual-terminal-search" placeholder="Cari alias / SN..." style="margin-bottom:10px;">
                          <select name="terminal_sn" style="width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);">
                              <option value="">- (kosong) -</option>
                              @foreach (($terminals ?? []) as $terminal)
                                  <option value="{{ $terminal->sn }}" @selected((string) old('terminal_sn', $defaultTerminalSn ?? '') === (string) $terminal->sn)>
                                      {{ match ($terminal->presence_status ?? 'offline') {
                                          'online' => '🟢',
                                          'stale' => '🟡',
                                          default => '⚪',
                                      } }} {{ strtoupper((string) ($terminal->presence_label ?? 'Offline')) }} - {{ $terminal->alias ?: $terminal->sn }} ({{ $terminal->sn }})
                                  </option>
                              @endforeach
                          </select>
                    </div>
                    <div style="min-width: 180px;">
                        <label style="display:block; font-weight:700; margin-bottom:8px;">Verify Type</label>
                        <input type="number" name="verify_type" value="1" min="0" max="99">
                    </div>
                    <div style="width:100%;">
                        <label style="display:block; font-weight:700; margin-bottom:8px;">Notes</label>
                        <textarea name="notes" rows="4" style="width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong); resize: vertical;" placeholder="Contoh: lupa checkout karena rapat lapangan"></textarea>
                    </div>
                    <div style="width:100%; padding:10px; border:1px solid #f0ad4e; border-left:4px solid #c44b00; border-radius:6px; background:#fff5e8;">
                        <label style="display:block; font-weight:800; margin-bottom:8px;">Verifikasi Password Login</label>
                        <input type="password" name="password_confirmation" required autocomplete="current-password" placeholder="Masukkan password user yang sedang login" style="width:100%;">
                        <div class="muted" style="font-size:11px; margin-top:5px;">Wajib diisi untuk mengotorisasi koreksi transaksi manual.</div>
                    </div>
                    <div style="width:100%; display:flex; gap:12px; justify-content:flex-end;">
                        <button type="button" class="pill-link secondary" onclick="toggleManualClockModal(false)">Tutup</button>
                        <button type="submit" class="primary">Simpan Koreksi Bulk</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

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

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

    const forgettingClockManualEmpCodes = document.getElementById('forgetting-clock-manual-emp-codes');
    const forgettingClockManualEmpCount = document.getElementById('forgetting-clock-manual-emp-count');
    const updateForgettingClockManualCount = function () {
        if (!forgettingClockManualEmpCodes || !forgettingClockManualEmpCount) return;
        const codes = forgettingClockManualEmpCodes.value.split(/[\s,;|]+/).map((code) => code.trim()).filter(Boolean);
        forgettingClockManualEmpCount.textContent = new Set(codes).size + ' Emp Code';
    };
    forgettingClockManualEmpCodes?.addEventListener('input', updateForgettingClockManualCount);
    updateForgettingClockManualCount();

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

    function filterSelectOptions(searchInputId, selectName) {
        const input = document.getElementById(searchInputId);
        if (!input) return;

        const select = document.querySelector(`select[name="${selectName}"]`);
        if (!select) return;

        const allOptions = Array.from(select.querySelectorAll('option'));
        const placeholder = allOptions.shift();

        input.addEventListener('input', () => {
            const needle = (input.value || '').toLowerCase().trim();
            select.innerHTML = '';
            select.appendChild(placeholder);

            allOptions.forEach((option) => {
                const text = (option.textContent || '').toLowerCase();
                if (needle === '' || text.includes(needle)) {
                    select.appendChild(option);
                }
            });
        });
    }

    filterSelectOptions('forgetting-clock-terminal-search', 'default_terminal_sn');
    filterSelectOptions('forgetting-clock-manual-terminal-search', 'terminal_sn');
</script>
@endpush