@extends('garage.layouts.app')

@section('content')
@include('garage.hr.styles')
<div class="container-fluid px-3 py-3 hrx-page">
    <div class="d-flex flex-wrap gap-2 justify-content-between align-items-center mb-3">
        <div>
            <div class="h4 mb-0">Device mapping</div>
            <div class="text-muted small">{{ $device->name }} · {{ $device->ip }}:{{ $device->port }}</div>
            <div class="text-muted small mt-1">
                Punches match <strong>only when Device user ID</strong> (Dahua <code>UserID</code>) equals the employee
                <strong>Attendance code</strong> in HR or the value saved in mapping below. Device names are not used for attendance.
            </div>
        </div>
        <div class="d-flex gap-2 flex-wrap">
            <a class="btn btn-outline-secondary btn-sm" href="{{ route('garage.attendance.devices.index') }}">Back</a>
            @if(($autoApplyCount ?? 0) > 0)
                <form method="post" action="{{ route('garage.attendance.devices.mapping.auto-apply', $device->id) }}"
                    onsubmit="return confirm('Apply {{ $autoApplyCount }} high-confidence name match(es)? Review ambiguous rows manually.');">
                    @csrf
                    <button type="submit" class="btn btn-warning btn-sm">
                        <i class="bi bi-magic me-1"></i>Auto-link {{ $autoApplyCount }} match(es)
                    </button>
                </form>
            @endif
            <form method="post" action="{{ route('garage.attendance.devices.sync', $device->id) }}">
                @csrf
                <button class="btn btn-primary btn-sm"><i class="bi bi-arrow-repeat me-1"></i>Sync device (7 days)</button>
            </form>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success py-2 small">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger py-2 small">{{ session('error') }}</div>
    @endif

    @if(($unmappedCount ?? 0) > 0)
        <div class="alert alert-warning py-2 small mb-3">
            <strong>{{ $unmappedCount }}</strong> punch(es) are not linked to any employee.
            <a href="{{ route('garage.attendance.logs.index', ['device_id' => $device->id, 'unmapped' => 1]) }}" class="alert-link">View unmapped logs</a>
        </div>
    @endif

    @if(!empty($unmappedSuggestions))
        <div class="card hrx-card mb-3">
            <div class="card-header py-2 d-flex justify-content-between align-items-center">
                <span class="fw-semibold small">Unmapped on device — link to employee</span>
                <span class="text-muted small">{{ count($unmappedSuggestions) }} identity(ies)</span>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-sm mb-0 align-middle">
                        <thead class="table-light">
                        <tr>
                            <th>Device user ID</th>
                            <th>Name on device</th>
                            <th>Card</th>
                            <th class="text-end">Punches</th>
                            <th>Suggested employee</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($unmappedSuggestions as $row)
                            @php
                                $id = $row['identity'];
                                $top = $row['suggestions'][0] ?? null;
                            @endphp
                            <tr>
                                <td><code>{{ $id->device_user_id ?: '—' }}</code></td>
                                <td class="fw-semibold">{{ $id->person_name ?: '—' }}</td>
                                <td><code>{{ $id->card_no ?: '—' }}</code></td>
                                <td class="text-end">{{ $id->punch_count }}</td>
                                <td>
                                    @if($top)
                                        <span class="fw-semibold">{{ $top['employee_name'] }}</span>
                                        <span class="badge @if($row['can_auto_apply']) bg-success @elseif($top['score'] >= 70) bg-warning text-dark @else bg-secondary @endif ms-1">
                                            {{ $top['score'] }}% match
                                        </span>
                                        @if(count($row['suggestions']) > 1)
                                            <div class="text-muted small">
                                                Also: {{ $row['suggestions'][1]['employee_name'] }} ({{ $row['suggestions'][1]['score'] }}%)
                                            </div>
                                        @endif
                                    @else
                                        <span class="text-muted small">No name to match — set User ID below</span>
                                    @endif
                                </td>
                                <td class="text-end text-nowrap">
                                    @if($top)
                                        <a class="btn btn-outline-primary btn-sm"
                                           href="#emp-row-{{ $top['employee_id'] }}"
                                           data-user="{{ e($id->device_user_id ?? '') }}"
                                           data-name="{{ e($id->person_name ?? '') }}"
                                           data-card="{{ e($id->card_no ?? '') }}"
                                           data-emp="{{ $top['employee_id'] }}"
                                           onclick="var eid=this.dataset.emp;document.getElementById('map-user-'+eid).value=this.dataset.user;document.getElementById('map-name-'+eid).value=this.dataset.name;document.getElementById('map-card-'+eid).value=this.dataset.card;document.getElementById('emp-row-'+eid).scrollIntoView({behavior:'smooth',block:'center'});return false;">
                                            Use suggestion
                                        </a>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card-footer small text-muted">
                Auto-link only applies when device UserID already matches an employee attendance code. Set attendance code on each employee, save mapping, then sync.
            </div>
        </div>
    @endif

    <form method="post" action="{{ route('garage.attendance.devices.mapping.update', $device->id) }}" class="card hrx-card">
        @csrf
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-sm mb-0 align-middle">
                    <thead class="table-light">
                    <tr>
                        <th>Employee (HR)</th>
                        <th style="width: 140px;">Device user ID</th>
                        <th style="width: 180px;">Name on device</th>
                        <th style="width: 140px;">Card no</th>
                        <th class="text-end" style="width: 70px;">Active</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($employees as $e)
                        @php
                            $m = $existing[$e->id] ?? null;
                            $prefillUser = $m->device_user_id ?? ($e->attendance_code ?? '');
                            $prefillCard = $m->card_no ?? ($e->card_no ?? '');
                            $prefillName = $m->device_person_name ?? ($e->attendance_device_name ?? '');
                        @endphp
                        <tr id="emp-row-{{ $e->id }}">
                            <td>
                                <div class="fw-semibold">{{ $e->name }}</div>
                                <div class="text-muted small">
                                    Code: {{ $e->code ?: '—' }}
                                    @if(!empty($e->attendance_code) && $e->attendance_code !== ($m->device_user_id ?? ''))
                                        · User ID in HR: <code>{{ $e->attendance_code }}</code>
                                    @endif
                                    @if(! $e->is_active) · <span class="text-danger">inactive</span> @endif
                                </div>
                            </td>
                            <td>
                                <input id="map-user-{{ $e->id }}" class="form-control form-control-sm" name="map[{{ $e->id }}][device_user_id]"
                                    value="{{ old("map.$e->id.device_user_id", $prefillUser) }}"
                                    placeholder="e.g. 14" />
                            </td>
                            <td>
                                <input id="map-name-{{ $e->id }}" class="form-control form-control-sm" name="map[{{ $e->id }}][device_person_name]"
                                    value="{{ old("map.$e->id.device_person_name", $prefillName) }}"
                                    placeholder="Exact CardName on device" />
                            </td>
                            <td>
                                <input id="map-card-{{ $e->id }}" class="form-control form-control-sm" name="map[{{ $e->id }}][card_no]"
                                    value="{{ old("map.$e->id.card_no", $prefillCard) }}"
                                    placeholder="CardNo" />
                            </td>
                            <td class="text-end">
                                <input type="checkbox" class="form-check-input" name="map[{{ $e->id }}][is_active]" value="1"
                                    @checked(old("map.$e->id.is_active", (bool)($m->is_active ?? true))) />
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer d-flex justify-content-between align-items-center">
            <span class="small text-muted">Saving updates employee User ID / device name / card when filled, then re-links past punches.</span>
            <button class="btn btn-primary btn-sm">Save mapping</button>
        </div>
    </form>
</div>
@endsection