@extends('layouts.app')

@php
    $pageTitle = 'Edit Employee';
    $pageHeading = 'Employee Editor';
    $pageDescription = 'Edit data employee sekaligus cek apakah template sidik jari sudah terdaftar di database biometrik.';
@endphp

@section('content')
    <section class="hero">
        <h3 style="margin: 0 0 10px; font-size: 22px;">Edit employee dan cek registrasi sidik jari.</h3>
        <p style="margin: 0; color: var(--muted); line-height: 1.7;">
            Halaman ini menggabungkan master data employee dengan status template fingerprint dari <strong>`iclock_biodata`</strong>,
            jadi kita bisa cepat lihat apakah user sudah punya template di device atau belum.
        </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 disimpan</strong>
            <div>{{ session('status') }}</div>
        </section>
    @endif

    @if ($errors->any())
        <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 input perlu diperbaiki</strong>
            <ul style="margin: 0; padding-left: 18px; color: var(--ink);">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </section>
    @endif

    <section class="grid">
        <div class="table-card">
            <div style="display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px;">
                <div>
                    <h3 style="margin-bottom: 6px;">Edit Employee</h3>
                    <div class="muted">{{ trim(($employee->first_name ?? '').' '.($employee->last_name ?? '')) ?: '-' }} - Emp Code {{ $employee->emp_code }}</div>
                </div>
                <div style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: flex-end;">
                    <form method="POST" action="{{ route('employees.destroy', $employee) }}">
                        @csrf
                        @method('DELETE')
                        <button
                            type="submit"
                            onclick="return confirm('Hapus employee ini dari aplikasi dan kirim command hapus ke semua mesin? Data employee serta template biometrik di aplikasi akan dihapus.')"
                            style="border: 0; border-radius: 999px; padding: 12px 18px; font-weight: 800; cursor: pointer; color: #fffaf2; background: linear-gradient(135deg, #8d2f23, #b42318);"
                        >
                            Hapus Dari Aplikasi
                        </button>
                    </form>
                    <a href="{{ route('employees.index') }}" style="color: var(--green-deep); text-decoration: none; font-weight: 700;">Kembali ke directory</a>
                </div>
            </div>

            <form method="POST" action="{{ route('employees.update', $employee) }}">
                @csrf
                @method('PUT')

                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px;">
                    @foreach ($editableFields as $field => $meta)
                        <label style="display: grid; gap: 8px;">
                            <span style="font-weight: 700;">{{ $meta['label'] }}</span>

                            @if (($meta['type'] ?? 'text') === 'select')
                                <select
                                    name="{{ $field }}"
                                    style="width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);"
                                >
                                    @foreach (($meta['options'] ?? []) as $optionValue => $optionLabel)
                                        <option value="{{ $optionValue }}" @selected((string) old($field, $employee->{$field}) === (string) $optionValue)>
                                            {{ $optionLabel }}
                                        </option>
                                    @endforeach
                                </select>
                            @elseif (($meta['type'] ?? 'text') === 'department_select')
                                <select
                                    name="{{ $field }}"
                                    style="width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);"
                                >
                                    <option value="">- Pilih Department -</option>
                                    @foreach ($departments as $department)
                                        <option value="{{ $department->id }}" @selected((string) old($field, $employee->{$field}) === (string) $department->id)>
                                            {{ $department->dept_name }}
                                        </option>
                                    @endforeach
                                </select>
                            @elseif (($meta['type'] ?? 'text') === 'position_select')
                                <select
                                    name="{{ $field }}"
                                    style="width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);"
                                >
                                    <option value="">- Pilih Position -</option>
                                    @foreach ($positions as $position)
                                        <option value="{{ $position->id }}" @selected((string) old($field, $employee->{$field}) === (string) $position->id)>
                                            {{ $position->position_name }}
                                        </option>
                                    @endforeach
                                </select>
                            @else
                                <input
                                    type="{{ $meta['type'] ?? 'text' }}"
                                    name="{{ $field }}"
                                    value="{{ old($field, $employee->{$field}) }}"
                                    style="width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-strong);"
                                >
                            @endif

                            <span class="muted" style="font-size: 13px; line-height: 1.6;">{{ $meta['help'] }}</span>
                        </label>
                    @endforeach
                </div>

                <div style="margin-top: 20px; padding: 16px; border-radius: 18px; background: rgba(45, 106, 79, 0.06); border: 1px solid rgba(45, 106, 79, 0.12); line-height: 1.7;">
                    <strong>Opsi update mesin</strong><br>
                    Gunakan tombol <strong>Simpan Database Saja</strong> jika perubahan hanya ingin disimpan ke MySQL.
                    Gunakan tombol <strong>Simpan + Update Mesin</strong> jika ingin sekaligus membuat command ke device.
                    User aktif akan memakai command <code>DATA UPDATE USERINFO ...</code>, sedangkan user nonaktif akan memakai <code>DATA DELETE USERINFO ...</code>.
                </div>

                <div id="device-target-preview"
                    style="margin-top: 14px; padding: 16px; border-radius: 18px; background: rgba(19, 41, 61, 0.05); border: 1px solid rgba(19, 41, 61, 0.1); line-height: 1.7;">
                    <strong>Preview target mesin</strong><br>
                    <div id="device-target-preview-text" class="muted" style="margin-top: 6px;">
                        Memuat target mesin...
                    </div>
                </div>

                <div style="display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px;">
                    <button
                        type="submit"
                        style="border: 1px solid var(--line); border-radius: 999px; padding: 12px 18px; font-weight: 800; cursor: pointer; color: var(--ink); background: var(--panel-strong);"
                    >
                        Simpan Database Saja
                    </button>
                    <button
                        type="submit"
                        name="submit_mode"
                        value="sync"
                        style="border: 0; border-radius: 999px; padding: 12px 18px; font-weight: 800; cursor: pointer; color: #fffaf2; background: linear-gradient(135deg, var(--green-deep), var(--green));"
                    >
                        Simpan + Update Mesin
                    </button>
                </div>
            </form>
        </div>

        <div style="display: grid; gap: 20px;">
            <section class="table-card">
                <h3>Fingerprint Registration</h3>
                <div class="muted" style="margin-bottom: 14px; line-height: 1.7;">
                    Total template sidik jari:
                    @if ($fingerprints->count() > 0)
                        <strong style="color: var(--green-deep);">{{ $fingerprints->count() }} template</strong>
                    @else
                        <strong style="color: var(--amber);">belum ada template</strong>
                    @endif
                </div>

                <div style="display:grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr); gap: 18px; align-items:start; margin-bottom: 18px;">
                    <div style="padding: 16px; border-radius: 18px; background: linear-gradient(180deg, rgba(17, 24, 39, 0.96), rgba(19, 41, 61, 0.96)); color: #eff6ff;">
                        <div style="font-weight: 700; margin-bottom: 12px;">Peta FID Sidik Jari</div>
                        <div style="display:grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px;">
                            @foreach ($fingerMap as $fid => $fingerName)
                                @php
                                    $existingTemplate = $fingerprints->first(fn ($fingerprint) => (int) ($fingerprint->bio_no ?? -1) === (int) $fid);
                                    $latestEnroll = $enrollHistory->first(fn ($history) => (int) ($history->fid ?? -1) === (int) $fid);
                                    $tileStyle = $existingTemplate
                                        ? 'background: rgba(45, 106, 79, 0.22); border: 1px solid rgba(45, 106, 79, 0.35); color: #d1fae5;'
                                        : 'background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: #eff6ff;';
                                @endphp
                                <div style="min-height: 84px; border-radius: 18px; padding: 10px; {{ $tileStyle }}">
                                    <div style="font-size: 24px; font-weight: 800; line-height: 1;">{{ $fid }}</div>
                                    <div style="font-size: 11px; margin-top: 6px; opacity: 0.92;">{{ $fingerName }}</div>
                                    <div style="font-size: 11px; margin-top: 6px; opacity: 0.82;">
                                        {{ $existingTemplate ? 'Sudah ada' : 'Kosong' }}
                                    </div>
                                    @if ($latestEnroll)
                                        <div style="font-size: 11px; margin-top: 6px; color:
                                            @if (($latestEnroll->result_class ?? '') === 'success') #bbf7d0
                                            @elseif (($latestEnroll->result_class ?? '') === 'danger') #fecaca
                                            @else #fde68a
                                            @endif
                                        ;">
                                            {{ $latestEnroll->result_label }}
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div style="display:grid; gap: 14px;">
                        <div style="padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel-strong);">
                            <div style="font-weight: 700; margin-bottom: 8px;">Enroll Sidik Jari Baru</div>
                            <div class="muted" style="font-size: 13px; line-height: 1.7; margin-bottom: 10px;">
                                Pilih mesin target dan nomor FID, lalu queue command enroll sidik jari ke mesin. Status callback akan masuk ke history enroll di bawah.
                            </div>
                            <form method="POST" action="{{ route('employees.enroll-fingerprint', $employee) }}" style="display:grid; gap: 10px;">
                                @csrf
                                <select name="terminal_id" style="width:100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: white;">
                                    <option value="">- Pilih mesin -</option>
                                    @foreach ($terminals as $terminal)
                                        <option value="{{ $terminal->id }}">{{ $terminal->alias ?: $terminal->sn }} ({{ $terminal->sn }})</option>
                                    @endforeach
                                </select>
                                <select name="fid" style="width:100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: white;">
                                    @foreach ($fingerMap as $fid => $fingerName)
                                        <option value="{{ $fid }}">FID {{ $fid }} - {{ $fingerName }}</option>
                                    @endforeach
                                </select>
                                <button
                                    type="submit"
                                    style="border: 0; border-radius: 999px; padding: 12px 18px; font-weight: 800; cursor: pointer; color: #fffaf2; background: linear-gradient(135deg, var(--green-deep), var(--green));"
                                    onclick="return confirm('Queue enroll sidik jari baru ke mesin terpilih?')"
                                >
                                    Queue Enroll Finger
                                </button>
                            </form>
                        </div>
                        <div style="padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel-strong);">
                            <div style="font-weight: 700; margin-bottom: 6px;">Ringkasan Callback</div>
                            <div class="muted" style="font-size: 13px; line-height: 1.7;">
                                Sukses berarti template baru sudah benar-benar diterima dari mesin. Kalau masih <strong>Waiting Callback</strong>, command sudah di-queue tapi template baru belum masuk balik ke database.
                            </div>
                        </div>
                    </div>
                </div>

                <table>
                    <thead>
                        <tr>
                            <th>Bio No</th>
                            <th>Nama Jari</th>
                            <th>Index</th>
                            <th>Version</th>
                            <th>Valid</th>
                            <th>Device SN</th>
                            <th>Preview</th>
                            <th>Updated</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($fingerprints as $fingerprint)
                            <tr>
                                <td>{{ $fingerprint->bio_no ?? '-' }}</td>
                                <td>{{ $fingerprint->finger_label ?? '-' }}</td>
                                <td>{{ $fingerprint->bio_index ?? '-' }}</td>
                                <td>{{ trim(($fingerprint->major_ver ?? '').' '.($fingerprint->minor_ver ?? '')) ?: '-' }}</td>
                                <td>{{ (int) $fingerprint->valid === 1 ? 'Yes' : 'No' }}</td>
                                <td>{{ $fingerprint->sn ?: '-' }}</td>
                                <td>
                                    <button type="button" class="pill-link secondary" style="padding:6px 10px;" data-edit-fingerprint-preview="{{ $fingerprint->preview_url }}" data-edit-fingerprint-label="{{ $fingerprint->finger_label }}">
                                        Preview
                                    </button>
                                    <a href="{{ $fingerprint->preview_download_url }}" target="_blank" rel="noopener" class="pill-link secondary" style="padding:6px 10px; margin-left: 6px;">
                                        Download SVG
                                    </a>
                                </td>
                                <td>{{ $fingerprint->update_time ?: '-' }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="8" class="muted">Belum ada template sidik jari untuk employee ini.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </section>

            <section class="table-card">
                <h3>Enroll Finger History</h3>
                <table>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Terminal</th>
                            <th>FID</th>
                            <th>Nama Jari</th>
                            <th>Queued</th>
                            <th>Status</th>
                            <th>Callback</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($enrollHistory as $history)
                            <tr>
                                <td>{{ $history->id }}</td>
                                <td>{{ $history->terminal_alias ?: $history->terminal_sn }}</td>
                                <td>{{ $history->fid }}</td>
                                <td>{{ $history->finger_label }}</td>
                                <td>{{ $history->commit_time ?: '-' }}</td>
                                <td>
                                    <span class="status
                                        @if (($history->result_class ?? '') === 'success')
                                            success
                                        @elseif (($history->result_class ?? '') === 'danger')
                                            pending
                                        @else
                                            pending
                                        @endif
                                    " style="
                                        @if (($history->result_class ?? '') === 'warning')
                                            background: rgba(183, 121, 31, 0.14); color: var(--amber);
                                        @elseif (($history->result_class ?? '') === 'danger')
                                            background: rgba(180, 35, 24, 0.12); color: var(--red);
                                        @endif
                                    ">
                                        {{ $history->result_label }}
                                    </span>
                                </td>
                                <td>{{ $history->callback_time ?: $history->result_detail ?: '-' }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="7" class="muted">Belum ada history enroll finger untuk employee ini.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </section>

            <section class="table-card">
                <h3>Employee Snapshot</h3>
                <table>
                    <tbody>
                        <tr><th style="width: 42%;">Emp Code</th><td>{{ $employee->emp_code }}</td></tr>
                        <tr><th>Department</th><td>{{ $employee->department_name ?: ($employee->department_id ?: '-') }}</td></tr>
                        <tr><th>Position</th><td>{{ $employee->position_name ?: ($employee->position_id ?: '-') }}</td></tr>
                        <tr><th>Enroll SN</th><td>{{ $employee->enroll_sn ?: '-' }}</td></tr>
                        <tr><th>Card Number</th><td>{{ $employee->card_no ?: '-' }}</td></tr>
                        <tr><th>Verify Mode</th><td>{{ $employee->verify_mode ?? '-' }}</td></tr>
                        <tr><th>Active</th><td>{{ (int) $employee->is_active === 1 ? 'Yes' : 'No' }}</td></tr>
                        <tr><th>App Status</th><td>{{ $employee->app_status ?? '-' }}</td></tr>
                    </tbody>
                </table>
            </section>

            <section class="table-card">
                <h3>Command History</h3>
                <table>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Terminal</th>
                            <th>Command</th>
                            <th>Queued</th>
                            <th>Result</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($commandHistory as $command)
                            <tr>
                                <td>{{ $command->id }}</td>
                                <td>{{ $command->terminal_alias ?: $command->terminal_sn }}</td>
                                <td><code>{{ $command->content }}</code></td>
                                <td>{{ $command->commit_time }}</td>
                                <td>
                                    <span
                                        class="status {{ $command->result_class ?? '' }}"
                                        @if(!empty($command->result_detail))
                                            title="{{ $command->result_detail }}"
                                        @endif
                                        style="@if(($command->result_class ?? '') === 'success-operlog') background: rgba(14, 116, 144, 0.14); color: #0f5f73; border: 1px solid rgba(14, 116, 144, 0.22); @endif"
                                    >
                                        {{ $command->result_label ?? ($command->return_time ? (($command->return_value ?? '-') . ' @ ' . $command->return_time) : 'Pending') }}
                                    </span>
                                    @if (($command->result_class ?? '') === 'success-operlog')
                                        <div class="muted" style="margin-top: 6px; font-size: 12px;">ACK source: OPERLOG</div>
                                    @elseif (!empty($command->result_detail))
                                        <div class="muted" style="margin-top: 6px; font-size: 12px;">{{ $command->result_detail }}</div>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="5" class="muted">Belum ada history command sync untuk employee ini.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </section>
        </div>
    </section>

    <div id="edit-fingerprint-preview-modal" class="modal-backdrop" onclick="if (event.target === this) toggleEditFingerprintPreviewModal(false)">
        <div class="modal-card" style="max-width: 760px;">
            <div class="modal-head">
                <div>
                    <h3 style="margin: 0;">Preview Template Fingerprint</h3>
                    <div id="edit-fingerprint-preview-subtitle" class="muted" style="margin-top: 6px; font-size: 13px;"></div>
                </div>
                <button type="button" class="modal-close" onclick="toggleEditFingerprintPreviewModal(false)">&times;</button>
            </div>
            <div class="modal-body">
                <div style="display:flex; justify-content:flex-end; margin-bottom: 10px;">
                    <a id="edit-fingerprint-preview-download" href="#" class="pill-link secondary" target="_blank" rel="noopener">Download SVG</a>
                </div>
                <div style="border-radius: 18px; border: 1px solid var(--line); background: var(--panel-strong); padding: 12px;">
                    <img id="edit-fingerprint-preview-image" src="" alt="Fingerprint Preview" style="display:block; width:100%; height:auto; border-radius:14px; background:#fff;">
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
@php
    $terminalPreviewPayload = $terminals->map(function ($terminal) {
        return [
            'id' => $terminal->id,
            'sn' => $terminal->sn,
            'alias' => $terminal->alias,
            'status' => (int) $terminal->status,
        ];
    })->values();
@endphp
<script>
    function toggleEditFingerprintPreviewModal(force) {
        const panel = document.getElementById('edit-fingerprint-preview-modal');
        if (!panel) return;
        const shouldShow = typeof force === 'boolean' ? force : !panel.classList.contains('open');
        panel.classList.toggle('open', shouldShow);
    }

    (function () {
        const enrollInput = document.querySelector('input[name="enroll_sn"]');
        const preview = document.getElementById('device-target-preview-text');

        if (!preview) {
            return;
        }

        const terminals = @json($terminalPreviewPayload);

        const renderPreview = function () {
            const value = (enrollInput?.value || '').trim();

            if (!value) {
                preview.innerHTML = 'Karena <strong>Enroll SN</strong> kosong, tombol <strong>Simpan + Update Mesin</strong> akan mengirim command ke <strong>semua mesin</strong> yang terdaftar (' + terminals.length + ' mesin).';
                return;
            }

            const matched = terminals.find(function (terminal) {
                return String(terminal.sn).toUpperCase() === value.toUpperCase();
            });

            if (matched) {
                const approval = matched.status === 1 ? 'Approved' : 'Pending Approval';
                preview.innerHTML = 'Update akan dikirim ke <strong>1 mesin</strong>: <strong>' + (matched.alias || matched.sn) + '</strong> <span class="muted">(' + matched.sn + ' · ' + approval + ')</span>.';
                return;
            }

            preview.innerHTML = 'Enroll SN diisi <strong>' + value + '</strong>, tapi belum cocok dengan device yang terdaftar. Jika disimpan sekarang, command sync kemungkinan <strong>tidak punya target mesin</strong>.';
        };

        renderPreview();
        enrollInput?.addEventListener('input', renderPreview);
        enrollInput?.addEventListener('change', renderPreview);
    })();

    document.addEventListener('click', function (event) {
        const trigger = event.target.closest('[data-edit-fingerprint-preview]');
        if (!trigger) {
            return;
        }

        const previewUrl = trigger.getAttribute('data-edit-fingerprint-preview') || '';
        const label = trigger.getAttribute('data-edit-fingerprint-label') || 'Fingerprint';
        const image = document.getElementById('edit-fingerprint-preview-image');
        const subtitle = document.getElementById('edit-fingerprint-preview-subtitle');
        const download = document.getElementById('edit-fingerprint-preview-download');

        if (image) {
            image.src = previewUrl;
        }
        if (subtitle) {
            subtitle.textContent = label + ' · preview visual dari template TMP, bukan foto sensor asli.';
        }
        if (download) {
            download.href = previewUrl + (previewUrl.includes('?') ? '&' : '?') + 'download=1';
        }

        toggleEditFingerprintPreviewModal(true);
    });
</script>
@endpush